on-line manual
TOP
Excel
一太郎
Mathematica
PowerPoint
HTML
Internet Explorer
Eudora
ローマ字・カナ対応表
記号対応表
フロッピーディスク

 

 

簡易HTMLマニュアル

HTML入門 | 改行を入れる | 文字のサイズを変える | 色をつける | そのほかの修飾 | 画像を入れる 

リンクを張る  | 表をつくる  | そのほかのタグ

 

HTMLとは?

HTMLは「ハイパーテキスト・マークアップ・ランゲージ(HyperText Markup Language)」の略で、
ホームページを作成するための言語です。

まずは基本的なこと 

まず、テキストエディターと呼ばれるソフトを立ち上げます。

Windowsでは「メモ帳」や「ワードパッド」、Macintoshでは「Simple Text」がテキストエディターにあたります。

これらのソフトは少々使いづらい、という人は 窓の杜 や ベクターデザイン から「秀丸」「ViVi」(以上はWindows用)
「Jedit」(Macintosh用)といったソフトをダウンロードしてインストールしてください。

テキストエディタを開いたら、下の線で囲まれた部分のように入力してみましょう。


<html>
<body>
これは一番簡単なHTMLファイル
</body>
</html>


適当な名前をつけて保存します。名前は「〜〜.html」または「〜〜.htm」、ファイル形式はテキスト文書にしてください。

今作成したHTMLファイルをブラウザで表示すると このように なります。

この画面に戻るには「back」または「戻る」ボタンをクリックしてください。

ブラウザソフト上で、「ファイル」メニューの「開く」を選択し、自分の作成したファイルを表示させてください。

うまく表示できましたか?

自分の作成したファイルがうまく表示されなかった場合は次のことを確認してください。

  • テキスト形式で保存しているか
  • <html>や</html>がちゃんと半角になっているか。<html>と全角になっていないか?
  • ファイル名は「〜〜.html」または「〜〜.htm」になっているか。ピリオドを忘れていないか

ちなみに「これは一番簡単なHTMLファイル」の部分を変えると、表示される文字もかわります。


<html>
<body>
これでも立派なHTMLファイル
</body>
</html>


とすれば、 このように 表示されます。

 

このページのトップへ


 

改行を入れてみよう

改行してみる

まず、次のようなファイルを作成してみましょう。


<html>
<body>
中央大学経済学部
東京都八王子市東中野742-1
中央大学多摩キャンパス7号館
</body>
</html>


これをブラウザで表示させると このように なります。

改行されずに一行で表示されましたね。

改行したいときは、<br>を使用します。


<html>
<body>
中央大学経済学部<br>
東京都八王子市東中野742-1<br>
中央大学多摩キャンパス7号館<br>
</body>
</html>


今度はちゃんと3行で表示されます。ブラウザ表示は こちら

 

 

段落にしてみる

<br>を使うと一行改行されますが、<p>を使うと、改段(改行+1行あける)になります。


<html>
<body>
中央大学経済学部<p>
東京都八王子市東中野742-1<p>
中央大学多摩キャンパス7号館<p>
</body>
</html>


結果は こちら

このページのトップへ


 

文字のサイズを変えてみよう

サイズを変えてみる@

文字のサイズを変えるには<h*>を使います(*には1〜6の数字が入ります)


<html>
<body>
<h1>これはh1の文字</h1>
これは普通のサイズの文字
<h2>これはh2の文字</h2>
これは普通のサイズの文字
<h3>これはh3の文字</h3>
これは普通のサイズの文字
<h4>これはh4の文字</h4>
これは普通のサイズの文字
<h5>これはh5の文字</h5>
これは普通のサイズの文字
<h6>これはh6の文字</h6>
</body>
</html>


これを表示すると このように なります。

そろそろわかってきたと思いますが、HTMLでは<〜>と</〜>に囲まれた部分が〜の修飾をうけます。
つまり、<h1>と</h1>で囲まれた部分だけが、h1サイズの文字になります。この<〜>をタグといいます。


サイズを変えてみるA

<h*>の他に<font size=*>というタグもあります。


<html>
<body>
<font size=1>これはfont size=1の文字</font>
これは普通のサイズの文字
<font size=2>これはfont size=2の文字</font>
これは普通のサイズの文字
<font size=3>これはfont size=3の文字</font>
これは普通のサイズの文字
<font size=4>これはfont size=4の文字</font>
これは普通のサイズの文字
<font size=5>これはfont size=5の文字</font>
これは普通のサイズの文字
<font size=6>これはfont size=6の文字</font>
これは普通のサイズの文字
<font size=7>これはfont size=7の文字</font>
</body> </html>


ブラウザで表示させると このように なります。

ちょっと見づらくなってしまいましたが、<h*>と違って、自動的に改行されないことがおわかりでしょうか。

当然、<br>や<p>を使えば、改行できます。

また、<font size=+1>〜</font>とすると、相対的に文字サイズを指定することができます。

この場合は一回り大きな文字になります。当然+2や-1に指定することも可能です。

このページのトップへ

 


 

色をつけてみよう

文字の色を変えてみる

まず、文字の色を変えてみましょう。


<html>
<body>
ここの文字は黒<br>
<font color=#ff0000>
ここの文字は赤<br>
</font>
<font color=#00ff00>
ここの文字は緑<br>
</font>
<font color=#0000ff>
ここの文字は青<br>
</font>
<font color=#ffff00>
ここの文字は黄色<br>
</font>
<font color=#ff00ff>
ここの文字は紫<br>
</font>
<font color=#00ffff>
ここの文字は水色<br>
</font>
ここの文字は黒<br>
</body>
</html>


結果は ここ 。

#ff00000が何か関係あるのはわかったと思います。

実はこれは16進数で表された数字なのです。ffは255にあたります。

16進数について詳しく知りたい方は ここ をクリックしてください。

もうちょっと簡単な方法もあります。


<html>
<body>
ここの文字は黒<br>
<font color=red>
ここの文字は赤<br>
</font>
<font color=green>
ここの文字は緑<br>
</font>
<font color=blue>
ここの文字は青<br>
</font>
<font color=yellow>
ここの文字は黄色<br>
</font>
<font color=magenta>
ここの文字は紫<br>
</font>
<font color=cyan>
ここの文字は水色<br>
</font>
ここの文字は黒<br>
</body>
</html>


結果は ここ 。

文字の色を指定するときはで指定します。

この数字と文字と色の関係は次の表の様になっています。

対応する数字 対応する文字
#ff0000 red
#008000 green
#0000ff blue
黄色 #ffff00 yellow
#ff00ff magenta
水色 #0000ff cyan
#000000 black
#ffffff white

注:Netscape2.x以前をご使用の方には、最後の白が見えなくなっています。
Netscape3またはInternet Explorer3以降をご使用の方は見やすくするために黄色・水色・白の背景が黒くなっています。

#のあとの数字が、2桁ずつそれぞれ赤・緑・青に対応しています。

例えば、#00ff00に指定すると明るめの緑、#800000に指定すると、暗めの赤になります。

この数字を大きくすればするほど明るい色に、小さくすればするほど暗めの色になります。
(なお現在の文字色‘暗めの青’は、#000066です。)

ほかにも濃い紫(darkviolet)ピンク(pink)など、全部で16万色(=256×256×256)の指定ができます。

とてもここでは紹介しきれないので、色についてよく知りたい方は こちら などを参照してください。

では、文字のサイズと色の指定は同時にできるのか?

良い質問です。

答えを先にいうと、できます。

上の「できます。」の部分は次の様になっています。


<font size=+2 color=blue>できます。</font>


sizeとcolorはどちらが先でも構いません。


背景色を変えてみる

ここまでのことが理解できた人なら、背景色を変えるのは簡単です。

背景色を変えるには、今まで2行目に入れていた<body>を<body bgcolor=〜>にするだけです。


<html>
<body bgcolor=blue>
このページの背景は青です。
</body>
</html>


結果は ここ 。


背景と一緒に文字の色まで指定してみる

背景色を変えたついでに文字の色まで指定してみましょう。


<html>
<body bgcolor=blue text=white>
このページの背景は青で、文字は白
</body>
</html>


結果は ここ 。

背景色は変えないけど文字の色は変えたい、という場合は、<body text=〜>とすればOKです。

 

このページのトップへ

 


 

そのほかの修飾をしてみよう

センタリングしてみる

 

センタリングするには、<center>〜</center>をつかいます。


<html>
<body>
この文字はセンタリングされていない<br>
<center>
この文字はセンタリングされている<br>
<font size=5>このfont size=5の文字もセンタリングされている</font><br>
<font color=blue>この青い文字もセンタリングされている</font><br>
<h6>このh6の文字もセンタリングされている</h6><br>
</center>
この文字はセンタリングされていない
</body>
</html>


結果は ここ 。

このように<center>〜</center>の中で別の修飾タグを使うことが可能です。



右寄せしてみよう

センタリングがわかれば、右寄せは簡単です。<center>〜</center>の代わりに<div align=right>〜</div>を使うだけです。


<html>
<body>
この文字は左寄せ。<br>
<center>
この文字はセンタリング<br>
</center>
<div align=right>
この文字は右寄せ<br>
</div>
</body>
</html>


結果は ここ 。



区切り線を入れてみる

いつもサンプルの前と後ろに入れている区切り線は<hr>というタグを使います。


<html>
<body>
この下に区切り線があります。
<hr>
この上に区切り線があります。
</body>
</html>


結果は ここ 。

区切り線の長さを変えてみる



区切り線の長さを変えるには <hr with=***> を使います。


<html>
<body>
下はwidth=100の区切り線
<hr width=100>
下はwidth=200の区切り線
<hr width=200>
下はwidth=300の区切り線
<hr width=300>
下はwidth=400の区切り線
<hr width=400>
下はwidth=25%の区切り線
<hr width=25%>
下はwidth=50%の区切り線
<hr width=50%>
下はwidth=75%の区切り線
<hr width=75%>
</body>
</hrml>


結果は ここ 。

% をつけない場合は絶対指定となり、% をつけると相対指定となります。

ブラウザウィンドウの大きさを変えるとよくわかると思います。



強調・斜体・下線にしてみる

強調するには<b>〜</b>を、斜体にするには<i>〜</i>、下線を 引くには<u>〜</u>を使います


<html>
<body>
<b>この文字は強調</b><br>
<i>この文字は斜体</i><br>
<u>この文字は下線</u><br>
</body>
</html>


結果は ここ 。

このように強調・斜体・下線を同時につかうことも可能です。

当然このように他の修飾タグと組み合わせて使うことも可能です。

ちなみにこの部分は


<u><b><i>このように強調・斜体・下線を同時につかうこと</i></b></u>も可能です。<br>
当然<i><font color=red>このように他の修飾タグと組み合わせて</font></i>使うことも可能です。


と、なっています。


このページのトップへ

 


 

画像を入れてみよう。

まずは画像を入れてみる

画像を入れるためには画像を用意しなくてはなりません。

PhotoShopで作ったもの、PaintShopProで作ったもの、何でも構いませんが、
通常ブラウザで表示できるのはJPEG(ジェーペグ)、GIF(ジフ)、TIFF(ティフ)の三種類だけです。

一般的には、写真や大きな画像にはJPEG、イラストや小さな画像にはGIFという使い分け方をしています。

また、JPEG画像は***.jpg、GIF画像は***.gif、TIFF画像は***.tifという名前にしてください。

と、いってもすぐには用意できない、という人は下の赤い丸をダウンロードして使ってください。


※画像の上で右クリックし【名前を付けて画像を保存】 を選択し、適当な場所に画像を保存してください。


<html>
<body>
<img src="circle.gif">
</body>
</html>


circle.gifの部分には自分が用意した画像のファイル名を入れてください。また、このHTMLファイルは画像と同じフォルダに入れてください(または、画像をこのHTMLファイルと同じフォルダに入れてください)。

結果は ここ 。

画像を複数同時に表示してみる

自分の希望通りに画像を表示するためには、<br>や<center>〜</center>を使いこなす必要があります。


<html>
<body>
下の画像は3つ横に並んでいる<br>
<img src="circle.gif">
<img src="circle.gif">
<img src="circle.gif"><br>
下の画像は3つ縦に並んでいる<br>
<img src="circle.gif"><br>
<img src="circle.gif"><br>
<img src="circle.gif"><br>
下の画像は2×2で中央に並んでいる<br>
<center>
<img src="circle.gif">
<img src="circle.gif"><br>
<img src="circle.gif">
<img src="circle.gif"><br>
</body> </html>


結果は ここ 。

画像と一緒に文字をいれてみる。

とりあえず、何も考えずに文字と画像を一緒にいれてみましょう。


<html>
<body>
この文字は画像の左にある<img src="circle.gif"><br>
<img src="circle.gif">この文字は画像の右にある
</body>
</html>


結果は ここ 。

まぁ、うまくいったように見えます。でも、ちょっと待ってください。

画像の横に1行くらいなら構いませんが、これが複数行になるとどうなるでしょう?


<html>
<body>
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
<img src="circle.gif"><br>
<img src="circle.gif">
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
</body>
</html>


答えは ここ 。

なんだか、みっともなくなってしまいました。

ちょっと格好良く画像を配置してみる

じゃあ、格好良く配置してみましょう。

やり方は簡単。

文字の前に<img src="***.***" align=*****>と入れるのです。

src="***.***"には画像のファイル名を、align=*****には、画像を左に入れたければleftを、右に入れたければrightを入れます。


<html>
<body>
<img src="circle.gif" align=right>
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
この長い文章を画像の左にいれるとどうなるでしょう。
<br> <img src="circle.gif" align=left>
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
この長い文章を画像の右にいれるとどうなるでしょう。
</body>
</html>


結果は ここ 。

結構、見栄えが良くなったでしょう。

壁紙として画像を入れてみる

さて、壁紙の設定はどうするのでしょうか?

答えは、<body background=~***.***">を使います。

当然、***.***には壁紙として使う画像の名前を入れます。


<hrml>
<body background="circle.gif">
このページの背景は日の丸
</body>
</html>


結果は ここ 。

じっと見ていると、気分が悪くなるので、注意しましょう。

 

このページのトップへ

 


 

リンクを張ってみよう

同じフォルダの中でリンクを張ってみる

リンクを張るには<a href="****.html">〜</a>を使います。

****.htmlには リンク先のファイル名(画像でも可)、〜には文字や画像を入れます。

次からの例では、最初の[***.html]はファイル名を示しますので、[file1.html]とあったら、file1.htmlという名前で保存してください。


[file1.html]
<html>
<body>
これはfile1.htmlです。<br>
<a href="file2.html">ここ</a>をクリックするとfile2.htmlが開きます。
</body>
</html>

[file2.html]
<html>
<body>
file2.htmlにようこそ。<br>
file1.htmlに戻る場合は<a href="file1.html">ここ</a>をクリックしてください。</body>
</html>


結果は ここ 。

違うフォルダの中でリンクを張ってみる

例えば、あるフォルダ(folderA)の中に2つのフォルダ(folderBとfolderC)があるとします。


folderAの中にfile-A.htmlが、folderBの中にfile-B.htmlが、folderCの中にfile-C.htmlがあるとします。

このときに、file-A.htmlからfile-B.htmlに、fileB-htmlからfile-C.htmlに、
file-C.htmlからfile-A.htmlにリンクを張る場合はどうすれば良いのでしょうか?

これを解決するためには、まずディレクトリ構造を知らなくてはなりません。

先ほどの状況をディレクトリ構造で表すと次の図の様になります。


このとき、左にあるフォルダを「上位ディレクトリ」または「上にあるディレクトリ」、
右にあるフォルダを「下位ディレクトリ」または「下にあるディレクトリ」と呼びます。

ディレクトリとフォルダは全く同じ意味です。

下位ディレクトリにあるファイルにリンクを張るには、<a href="下位ディレクトリ名/ファイル名">とします。

上位ディレクトリにあるファイルにリンクを張るには、<a href="../ファイル名">とします。

下位ディレクトリから別の下位ディレクトリ(便宜上「目的ディレクトリ」とします。)にリンクを張るには、
<a href="../目的ディレクトリ名/ファイル名">とします。

じゃあ、実際にやってみましょう。


[file-A.html]
<html>
<body>
これはfolderAにあるfile-A.htmlです。<br>
folderBにあるfile-B.htmlに行くには<a href="folderB/file-B.html">ここ</a>をクリックしてください。
</body>
</html>


[file-B.html]
<html>
<body>
これはfolderBにあるfile-B.htmlです。<br>
<a href="../folderC/file-C.html">ここ</a>をクリックしてください。folderCにあるfile-C.htmlが開きます。
</body>
</html>


[file-C.html]
<html>
<body>
これはfolderCにあるfile-C.htmlです。<br>
<a href="../file-A.html">folderAにあるfile-A.htmlに行く</a>
</body>
</html>


file-A.htmlがfolderAに、file-B.htmlがfolderBに、file-C.htmlがfolderCにあることを確かめてください。

結果は ここ 。

他の人のページにリンクを張ってみる

友人のページやお気に入りのページにリンクを張りたいときは、リンク先を絶対指定します。

絶対指定というと難しそうですが、実は簡単です。

<a href="http://www.***.**.jp/">というようにURLを全て書き込めば良いのです。


<html>
<body>
<a href="http://www.yahoo.co.jp/">Yahoo!JAPANへのリンク</a><br>
中央大学ホームページへは<a href="http://www2.chuo-u.ac.jp/econ/">ここ</a>をクリック。<br>
<a href="http://www2.chuo-u.ac.jp/econ/"><img src="circle.gif"></a>赤い丸をクリックすると、中央大学経済学部のホームページへジャンプします</a>
</body>
</html>


結果は ここ 。

 

このページのトップへ

 


 

表を作ってみよう

簡単な表を作ってみる

表をつくるには、以下のタグを使います

<table>〜</table> 表を入れることを宣言します
<tr>〜</tr> 横の列(行)の始まりと終わりを宣言します
<td>〜</td> マスの中身を記述します。
<th>〜</th> マスの中身を強調で記述します。

<html>
<body>
<table>
<tr><th>ここは表の左上(強調)</th><td>ここは表の右上</td></tr>
<tr><td>ここは表の左下</td><th>ここは表の右下(強調)</th></tr>
</table>
</body>
</html>


結果は ここ 。

枠線を入れるには、3行目の<table>の部分を<table border=1>にします。

枠線をいれると、 こうなります 。

border=の数字を変えると、外枠の太さが変わります。色々試してみてください。

複数列(行)にまたがるマスを作りたい

ここは普通のマス ここは横2マス分
ここは縦2マス分 ここは普通のマス ここは普通のマス
ここは普通のマス ここは普通のマス

と、いうように横○マス分のマスをつくりたいときは、<td>の代わりに<td colspan=*>を使います。

*には2マス分なら2、3マス分なら3を入れます。

同様に縦○マス分のマスを作るときは、<td rowspan=*>を使います。


<table border=1>
<tr><td>ここは普通のマス</td><td colspan=2>ここは横2マス分</td></tr>
<tr><td rowspan=2>ここは縦2マス分</td><td>ここは普通のマス</td><td>ここは普通のマス</td></tr>
<tr><td>ここは普通のマス</td><td>ここは普通のマス</td></tr>
</table>


応用として、横2マス分、縦2マス分のマスを作ることもできます。


<html>
<body>
<table border=1>
<tr><td>ここは普通のマス</td><td>ここは普通のマス</td><td>ここは普通のマス</td></tr>
<tr><td>ここは普通のマス</td><td colspan=2 rowspan=2>ここは横2マス分、<br>縦2マス分のマス</td></tr>
<tr><td>ここは普通のマス</td></tr>
</table>
</body>
</html>


結果はここ 。

表に見出しをつけてみる

表に見出しをつけるには、<caption align=****>〜</caption>を使います。

align=***には、topかbottomが入ります。当然のことですが、topを指定すると上に、bottomを指定すると下に見出しが入ります。


<html>
<body>
<table border=1>
<caption align=top>上の見出しの例</caption>
<tr><td>表の左上</td><td>表の右上</td></tr>
<tr><td>表の左下</td><td>表の右下</td></tr>
</table>
<br>
<table border=1>
<caption align=bottom>下の見出しの例</caption>
<tr><td>表の左上</td><td>表の右上</td></tr>
<tr><td>表の左下</td><td>表の右下</td></tr>
</table>
</body>
</html>


結果は ここ  。

 

このページのトップへ

 


 

そのほかのタグ

タイトルをつけてみる


このように、タイトルバーの部分に文字を入れる方法を説明します。

<html>と<body>の間に、<head><title>〜</title></head>を挿入します。


<html>
<head>
<title>
ここの部分がタイトルバーに表示されます
</title>
</head>
<body>
本文
</body>
</html>


結果は ここ 。

ウィンドウの下に文字を流す

上の様に、ウィンドウのしたのところにメッセージを流す方法です。
本当はJavaScriptの知識がなくてはできないことなのですが、その気になれば簡単にできるので、紹介します。


<html>
<head>
<title>
タイトルを入力します。
</title>
<script language="JavaScript">
<!--
function Status1(str){
str = str.substring(1, str.length)+str.substring(0,1);
window.status = str;
window.setTimeout("Status1('"+str+"')",300);
}
//-->
</script>
</head>

<body onload="Status1('ここに入力したメッセージが流れます。この部分を変えると、流れるメッセージも変わります。')">
ここから本文を始めます。
</body>
</html>


結果は ここ 。

この例の<html>から<body onloard="Status1('〜')>の部分をそっくりそのままコピーすれば、
スクロールするメッセージの出来上がりです。

これでHTML入門を終了します。

これ以上のことを知りたい人は、HTMLのマニュアルを買うなどの方法で学んでください。

 

このページのトップへ

 



back




HTML のトップへ

 

 

 

中央大学キャンパスONLINE