こんな感じにしたければ<img src="../img/ag_666_2.gif" width=60 height=60>とします。今回からテキストエディタでHTMLを作成して行きたいと思います。拡張子はhtmかhtmlにして下さいね。どちらでもいいですが、当コンテンツではhtmで統一して記述します。
HTMLはタグと呼ばれる命令を使い構成されます。やってりゃぁその内覚えるんで、細かな説明は省きます。
HTMLを表示する為に最低限必要なタグというのはhtmlタグとbodyタグではないでしょうか。htmlタグはHTML自体の宣言、bodyタグは本文の宣言になります。下記のsample_01.htmが恐らく一番簡単なHTMLですな。
下記のリンク(sample_01.htm)をクリックするとサンプルのHTMLが新しいウィンドウで開きますんで、HTMLSourceと下記SampleHTMLの内容と見比べて覚えて下さい(Windows&IEであれば、ウィンドウ上で右クリックし“ソースの表示”を選択するとメモ帳でSourceを表示します)。
TripodJapanのPopUp広告が自動で実行されたSourceなんで、<body>より上にScriptが自動で挿入されますが、気にしないで下さい。
どうしてもScriptを見たくなくて100%正しいSampleが見たい方の為に、SampleHTMLをまとめてダウンロード出来る様にその内しますんで。
| <html> <body> </body> </html> |
文字を表示するのは簡単で、<body>と</body>の間に表示したい文字を打ち込めば良いのです。
| <html> <body> Hello World!This is Rambo from "Magnum Opus!". </body> </html> |
これが一番簡単なHTMLですね。見て解る様に、タグというのは<html>〜<html/>みたいに開始と終了がありますので覚えて下さい。
これでは読み難いので段落タグ<p>〜</p>を使います。pはParagraph(段落)のpです。
| <html> <body> <p>Hello World!</p><p>This is Rambo</p><p>from "Magnum Opus!".</p> </body> </html> |
今度はSourceが見にくくなるので、字下げをします。
| <html> <body> <p>Hello World!</p> <p>This is Rambo</p> <p>from "Magnum Opus!".</p> </body> </html> |
sample_03とsample_04を比べると、Sourceは違いますがブラウザを通した見え方は一緒です。字下げはあくまで作り手の問題ですんで、ずらーっと文字が並んでても気にならない方は字下げなんてしなくてもOKですよ。
中央揃えや右詰めも使ってみましょう。段落タグ<p>〜</p>のパラメーター“aligh”にて中央揃えなら“center”右詰めなら“right”と宣言します(左詰めは“left”ですが省略出来ます)。
| <html> <body> <p>Hello World!</p> <p align="center">This is Rambo</p> <p align="right">from "Magnum Opus!".</p> </body> </html> |
段落タグ<p>〜</p>を使うと、段落と段落の間が一行空きます。そこで改行タグ<p>〜<br>を使うと改行出来ます。brはbreak(ブレイク)のbrですな。
| <html> <body> <p>Hello World!</p> <p align="center">This is Rambo</p> <p align="right">from "Magnum Opus!".<br> (http://sound.jp/magnum_opus/)</p> </body> </html> |
この改行タグは他のタグとは違い“/”付きの終了タグかありません。改行するのに始めも終わりもないもんね。
HTMLにおいて一番重要なハイパーリンクの挿入には<a>〜</a>を使います。例えばYahooJapanへのリンクであれば<a href="http://www.yahoo.co.jp/">YahooJapan</a>とします。aはAnchor(アンカー)のaです。
| <html> <body> <p>Hello World!</p> <p align="center">This is Rambo</p> <p align="right">from "<a href="http://sound.jp/magnum_opus/">Magnum Opus!</a>".<br> "YahooJapan" is <a href="http://www.yahoo.co.jp/">here</a>".</p> </body> </html> |
リンクを新しいウィンドウで開く場合はtargetというパラメーターを使います。YahooJapanを新しいウィンドウで開くアンカーであれば<a href="http://www.yahoo.co.jp/" target="_blank">YahooJapan</a>とします。
| <html> <body> <p>Hello World!</p> <p align="center">This is Rambo</p> <p align="right">from "<a href="http://sound.jp/magnum_opus/">Magnum Opus!</a>".<br> "YahooJapan" is <a href="http://www.yahoo.co.jp/" target="_blank">here</a>".</p> </body> </html> |
新しいウィンドウでリンク先を表示するのは見やすいですが、なんでもかんでもそうすると返って見にくかったり、閉じるのが面倒臭くなります。時と場合を良く考えてtargetを宣言しないといけませんぞ。
文字を大きくするには<font size="">〜</font>を使います。例えばこれくらいのサイズであれば<font size="5">これくらい</font>とします。
| <html> <body> <p><font size="10">H</font>ello World!</p> <p align="center">This is <font size="5">Rambo</font></p> <p align="right"><font size="1">from</font> "<a href="http://sound.jp/magnum_opus/">Magnum Opus!</a>"</p> </body> </html> |
sizeの指定をしない初期状態で3が設定されます。文字を大きくしたければ大きな数字を、小さくしたければ小さな数字を設定して下さい。
文字を大きくしたい始点へ<font size="x">を、終点へ</font>を入れれば文字の大きさを変えられます。簡単ですね。
HTMLで色を表現するには光の三原色であるRGB(Red,Green,Blue)を16進数で指定します。
例えば赤だったら#ff0000、緑なら#00ff00、青なら#0000ffです。解るかな、赤が#ff0000、緑が#00ff00、青が#0000ffです。#の後の6桁の16進数で、頭2桁が赤の濃さ、中2桁が緑の濃さ、尻2桁が青の濃さになります。で、#000000なら黒、#ffffffなら白となる訳です。
百聞は一見にしかず、表にまとめましたのでこちらのHTML Color一覧をご覧下さい。
文字の色を変えるには<font color="#xxxxxx">〜</font>を使います。例えば赤であれば<font color="#ff0000">赤</font>とします。16進の色指定にはHTML Color一覧をご利用下さい。
| <html> <body> <p><font color="#ff0000">Hello</font> World!</p> <p>This is <font color="#0000ff">Rambo</font></p> <p>from <font color="#00ff00">Magnum Opus!</font>.</p> </body> </html> |
色・大きさ共に変更する場合は同じ括弧の中に両方指定します。
| <html> <body> <p><font color="#ff0000" font size="5">Hello</font> World!</p> <p>This is <font color="#0000ff" font size="6">Rambo</font></p> <p>from <font color="#00ff00" font size="7">Magnum Opus!</font>.</p> </body> </html> |
使い方は<font size="">〜</font>と同じで、フォントの色・サイズ共に変更する場合も</font>は1つで平気です。単純ですね。
文字を太字へするには<b>〜</b>を使います。例えばこんな感じにしたければ<b>こんな感じ</b>と記述します。
| <html> <body> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from <b>Magnum Opus!</b></p> </body> </html> |
bはBold(ボールド)のbですね。
文字を斜体へするには<i>〜</i>を使います。例えばこんな感じにしたければ<i>こんな感じ</i>と記述します。
| <html> <body> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from <i>Magnum Opus!</i></p> </body> </html> |
iはItalic(イタリック)のiですね。
背景の色を変えるには<body bgcolor="#xxxxxx">の様に指定します。例えば赤い背景にしたければ<body bgcolor="#ff0000">とします。
| <html> <body bgcolor="#ff0000"> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from Magnum Opus!</p> </body> </html> |
bodyタグのパラメータとして指定する訳ですな。bgcolorというのはBackGroundColorの事です。
画像を表示するには<img>タグを使用します。例えばこんな感じにしたければ<img src="../img/ag_666_2.gif" width=60 height=60>とします。
srcには画像のPathを、widthとheightには画像のサイズを指定します。サイズの指定は省略出来ますが、正しいサイズを指定した方が表示が早くなります。勿論サイズを変更する事も出来、上の画像もやとする事も出来ます。
"img"といった(名前はどうでもいいけど)ディレクトリを作成し、画像等をまとめて放り込んで置くと整理しやすいです。下記のSampleでは、ペイントでテキトウに作ったバナーを表示します。
| <html> <body> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from <img src="img/bnr_1.gif" width=123 height=45></p> </body> </html> |
更に、画像へハイパーリンクを仕込む事により、クリックすると別ページを開くような画像も作成可能です。
| <html> <body> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from <a href="http://sound.jp/magnum_opus/"><img src="img/bnr_2.gif" width=123 height=45></a></p> </body> </html> |
特別な作業はいらず、普通にテキストをハイパーリンクするのと同様の指定で画像からのリンクは可能です。
画像表示にはいくつかのオプションが指定出来ます。
ブラウザの設定というのは多種多様で、画像をイチイチ表示しない様な設定でブラウジングする人もいます(最近はかなり減ったみたいですが)。“alt”にて、ブラウザ上で画像を表示しない(出来ない・ダウンロード中の)時に表示するテキストの指定が出来ます。例えば
こんな感じにしたければ<img src="img/fuck_you.gif" width=130 height=25 alt="この画像はないよ！">とします(実際にfuck_you.gifはありません)。
それからsample_16.htmを見ると解る様に、画像へハイパーリンクを埋め込むと枠線(ハイパーテキスト)がつきます。これを表示したくない場合、“border”を指定します。
| <html> <body> <p>HelloWorld!</p> <p>This is Rambo</p> <p>from <a href="http://sound.jp/magnum_opus/"><img src="img/bnr_1.gif" width=123 height=45></a>or<a href="http://sound.jp/magnum_opus/"><img src="img/bnr_2.gif" width=123 height=45></a><br> from <a href="http://sound.jp/magnum_opus/"><img src="img/bnr_1.gif" width=123 height=45 border=0></a>or<a href="http://sound.jp/magnum_opus/"><img src="img/bnr_2.gif" width=123 height=45 border=0></a></p> </body> </html> |
どちらでもお好きな方を御利用下さい。
| <<Prev |
★Menu★ |
Next>> |