◆ HTMLタグの基本
★HTMLタグって何だろう?
HTMLタグと言うのはHyper Text Markup Languageの略で、Web上で広く使用されるHTMLと言う言語の命令が記述される部分が「タグ」と呼ばれます。
簡単に言えば、「改行しなさい」と言う意味のタグ(命令)を書けば、Webページ上では文章などが改行されて表示されると言うこと。
タグには様々な種類があり、画像を表示させるもの、リンクを貼るもの、書体を決めるものなど、多種多様だが、良く使われるタグ、特にブログで多く使われるタグはさほど多くなく、基本的なものを押さえるだけで、相当表現の幅が広がるので是非挑戦してみて下さい。
★タグの基本
タグは「<」と「>」の間に記述されます。
先に述べた改行を表すタグの場合なら<br>または<BR>となります。
HTMLタグは大文字と小文字を区別しないので、どちらでも見やすい方で良いです。
また、効果の範囲を指定する命令の場合、と言っても大部分が指定しますが、<タグ>と</タグ>の間に挟まれた部分がそのタグの効果が及ぶ範囲となります。
先に記述する方を「開始タグ」、後に書く/(スラッシュ)に続く方を「終了タグ」とも呼びます。
例えばある単語を太字にしたい場合は下記の様に記述します。
また、もう少し複雑な指定ができるタグもあります。
下記は文字(フォント)の表示方法を指定する為のタグ<FONT>ですが、色とサイズを指定するオプションが記述されています。
<FONT color="#ff0000" size="+2">
タグの種類を表す「FONT」の後に色を指定する為の「color」オプションとサイズを指定する為の「size」オプションが付いています。
オプションは通常、「オプション名="値"」の様に、オプション名に続いて=(イコール)、そして"(ダブルクォート)に囲まれた中に値を記述します。
ブログの記事内で使用することはありませんが、通常のページを構成する場合、様々なタグは <HTML>タグと<BODY>タグの中に記述されます。
試しに上記のタグをテキストエディタ(メモ帳など)にコピーして、適当な場所に拡張子をhtmかhtmlにして保存してみて下さい。(拡張子txtで保存後に書き換えてもOKです)
インターネットエクスプローラーなどのWebブラウザで開いてみると「この中に表示させたい内容を記述する。」とだけ表示されたページができているはずです。
★良く使われるタグ
この他にも非常に多くの、無数のタグがありますが、ここに挙げたものを覚えるだけでもかなり表現の幅は広がります。
是非ともマスターしてみて下さい。
HTMLタグと言うのはHyper Text Markup Languageの略で、Web上で広く使用されるHTMLと言う言語の命令が記述される部分が「タグ」と呼ばれます。
簡単に言えば、「改行しなさい」と言う意味のタグ(命令)を書けば、Webページ上では文章などが改行されて表示されると言うこと。
タグには様々な種類があり、画像を表示させるもの、リンクを貼るもの、書体を決めるものなど、多種多様だが、良く使われるタグ、特にブログで多く使われるタグはさほど多くなく、基本的なものを押さえるだけで、相当表現の幅が広がるので是非挑戦してみて下さい。
★タグの基本
タグは「<」と「>」の間に記述されます。
先に述べた改行を表すタグの場合なら<br>または<BR>となります。
HTMLタグは大文字と小文字を区別しないので、どちらでも見やすい方で良いです。
また、効果の範囲を指定する命令の場合、と言っても大部分が指定しますが、<タグ>と</タグ>の間に挟まれた部分がそのタグの効果が及ぶ範囲となります。
先に記述する方を「開始タグ」、後に書く/(スラッシュ)に続く方を「終了タグ」とも呼びます。
例えばある単語を太字にしたい場合は下記の様に記述します。
| 記述例:「この単語を<B>太字</B>にします。」 表示例:「この単語を太字にします。」 |
また、もう少し複雑な指定ができるタグもあります。
下記は文字(フォント)の表示方法を指定する為のタグ<FONT>ですが、色とサイズを指定するオプションが記述されています。
<FONT color="#ff0000" size="+2">
タグの種類を表す「FONT」の後に色を指定する為の「color」オプションとサイズを指定する為の「size」オプションが付いています。
オプションは通常、「オプション名="値"」の様に、オプション名に続いて=(イコール)、そして"(ダブルクォート)に囲まれた中に値を記述します。
| 記述例:<FONT color="#ff0000" size="+2">文字表示テスト</FONT> 表示例:文字表示テスト |
ブログの記事内で使用することはありませんが、通常のページを構成する場合、様々なタグは <HTML>タグと<BODY>タグの中に記述されます。
| <HTML> <BODY> この中に表示させたい内容を記述する。 </BODY> </HTML> |
インターネットエクスプローラーなどのWebブラウザで開いてみると「この中に表示させたい内容を記述する。」とだけ表示されたページができているはずです。
★良く使われるタグ
| <BR> | 改行 |
| 改行する為のタグ。終了タグは無く、記述した位置で一度だけ改行される | |
| 記述例 | この位置で<BR>改行されます。 |
| 表示例 | この位置で 改行されます。 |
| <A> | リンク |
| リンクを貼る為のタグ。開始タグと終了タグの間の文字や画像をクリックした時に指定したページなどへジャンプするようにする。targetオプションで開く先のウインドウも指定できる。 | |
| 記述例 | <A href="リンク先のアドレス">ここにリンクを貼ります</A> |
| 表示例 | ここにリンクを貼ります (※注 リンク先にページはありません) |
| <IMG> | 画像 |
| イメージ(画像)を表示させる為のタグ。幅や高さ、枠線(border)も指定できる。終了タグは無い。 | |
| 記述例 | <IMG src="画像のアドレス" border="0"> |
| 表示例 | |
| <FONT> | フォント |
| 文字の表示方法を指定するタグ。開始タグと終了タグの間の文字の色やサイズなどを指定できる。 | |
| 記述例 | <FONT color="#ff0000" size="+2">文字表示テスト</FONT> |
| 表示例 | 文字表示テスト |
| <B> | 太字 |
| 文字を太字にする為のタグ。開始タグと終了タグの間の文字を太字にする。 | |
| 記述例 | この単語を<B>太字</B>にします。 |
| 表示例 | この単語を太字にします。 |
| <I> | 斜体 |
| 文字を斜体にする為のタグ。開始タグと終了タグの間の文字を斜体にする。 | |
| 記述例 | この単語を<I>斜体</I>にします。 |
| 表示例 | この単語を斜体にします。 |
| <HR> | 水平線 |
| 水平線を入れるためのタグ。終了タグは無く、記述した位置に一本だけ水平線が挿入される。 | |
| 記述例 | この間に <HR> 水平線が入ります |
| 表示例 | この間に
水平線が入ります |
この他にも非常に多くの、無数のタグがありますが、ここに挙げたものを覚えるだけでもかなり表現の幅は広がります。
是非ともマスターしてみて下さい。
コメント
コメントの投稿
この記事に対するトラックバック
トラックバックURL:
この記事にトラックバックする(FC2ブログユーザー) ※英字のみのTBは受け付けられません。













身近な自然
unsuffAccorne(10/13)
mellon(10/13)
カカオ(ブログdeフォトコン)(10/12)
sacchon-happy(10/12)
カカオ(ブログdeフォトコン)(10/11)
ココロ(10/10)
カカオ(ブログdeフォトコン)(09/22)
模糊(09/21)
模糊(09/21)
カカオ(ブログdeフォトコン)(09/21)
ウルフのスナフ(09/21)
カカオ(ブログdeフォトコン)(09/21)
カカオ(ブログdeフォトコン)(09/19)
模糊(09/19)
mellon(09/19)
カカオ(ブログdeフォトコン)(09/14)
s.sawada(09/13)
カカオ(ブログdeフォトコン)(09/09)
狐丸(09/09)
カカオ(ブログdeフォトコン)(09/05)
カカオ(ブログdeフォトコン)(09/05)
としぽ(09/04)
カカオ(ブログdeフォトコン)(09/02)
カカオ(ブログdeフォトコン)(09/02)
まみ(09/02)
まみ(09/02)
カカオ(ブログdeフォトコン)(09/01)
狐丸(08/31)
ココロ(08/29)
カカオ(ブログdeフォトコン)(08/25)