ＨＴＭＬガイド・・舞子の浜

作成：2000年11月30日　

ＨＴＭＬ初歩の初歩

印刷用 pdf ファイル （22kb、4ページ）を用意しています　 ここをクリックして下さい。

　ＨＴＭＬ（ Hyper Text Markup Language ）は、ＷＷＷページを記述するために作られた言語で、箇条書き、画像の貼り付け、表やリンクなどＷｅｂページで見かける構造を記述できます。

　ＨＴＭＬは「見え方ではなく意味を指定する」という考え方で構成されています。例えば、見出しは通常大きい文字で表示されますが、ＨＴＭＬでは、「ここからここまでが大きい文字で表示」ではなく、「ここからここまでが見出し」という形で指定します。そして、実際の見え方は見る環境によって異なります。

《ＨＴＭＬの基本構造》

　HTMLは、次のように記述します

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

　　<head>

　　　　・・・　ヘッダー部分　・・・

　　</head>

　　<body>

　　　　・・・　本体部分　・・・

　　　　・・・・・・・・

　　</body>

</html>

　最初の行は DOCTYPE宣言と呼ばれ、これに続く HTMLの記述が 4.01という規格に従っていることを示します。

　２行目からが HTMLによる記述で、「<」と「>」で囲まれたタグで書式を指定します。
　タグは開始タグ（例：<html>）と終了タグ（例：</html>）があり、一対の開始タグと終了タグにはさまれた範囲を要素（例：HTML要素）と呼びます。

　要素の中に別の要素を含むこともできます。上の例では、html要素の中に、head要素と body要素が含まれています。
　head要素の内側をヘッダーと呼び、Webページがどのようなページであるかを表す情報を記述します。（ブラウザの窓には表示されません）
body要素の内側を本体といい、ここにページの内容（ブラウザの窓に現れるもの）を記述します。

htmlタグ内の lang="ja" は使用する言語が日本語であること示します

《いろいろなタグ》

文を書く
	見出し	h1（大）～ h6（小）　heading level 1～6
	段落	p　　paragraph
	横線	hr 　horizontal rule　　　終了タグ無し
	改行	br 　forced line break　　終了タグ無し

箇条書き	（リスト）
	番号無し	（ ul ： unorderd list　li：list item ）
		<ul>
		<li>・・・項目１・・・</li>
		<li>・・・項目２・・・</li>
		・・・・・
		</ul>

	番号つき	（ ol ： ordered list ）
		<ol>
		<li>・・・項目１・・・</li>
		<li>・・・項目２・・・</li>
		・・・・・
		</ol>

	定義	（ dl ： define list　dt ： define term　dd ： define data ）
		<dl>
		<dt> 用語１ </dt><dd>・・・説明１・・・</dd>
		<dt> 用語２ </dt><dd>・・・説明２・・・</dd>
		・・・・・
		</dl>

表: table要素で全体をあらわします。tr（table row）要素で表の１行を、td（table data）または th（table header）要素で升目の一つをあらわします。

<table>
　　<tr><td>1行,1升目</td><td>1行,2升目</td>・・・</tr>
　　<tr><td>2行,1升目</td><td>2行,2升目</td>・・・</tr>
　　・・・・・
</table>

画像の埋め込み　（Inline Image）: 　画像をこの位置に直接貼り付けるのではなく、imgタグを用いて、他の場所にある画像をこの場所に表示させます。次のように記述します。
　　　　<img src="ファイル名" alt="説明">; 　多くのタグは属性（attribute）を指定して、その表示の仕方を調整できるようになっています。
　img タグの場合、src属性で表示する画像を指定し、alt属性には画像の説明を記述します。文字だけしか表示できないブラウザでは、画像の位置に説明が表示されます。; 　画像に続いて文字（文）を表示させるときは、align属性で表示位置を指定します。
　　align="left"　・・・画像を左端（rightで右端）に寄せ、周りをテキストが回り込みます。
　回り込みを解除するにはbrタグのclear属性を用いて <br clear="all"> とします。

リンク: 　他のファイルを参照する機能で、ページの中のある部分（通常は文字の色が変わっており、下線がついている　下の例ではリンクテキストの部分）をクリックすることによって別のページに切り替えることができます。
　切り替えるページは、今見ているページの中にあっても、同じコンピュータの中、あるいはインターネットでつながっている他のコンピュータの中にあってもかまいません。
　リンクは a（anchor）タグを用いて次のように記述します。
　　<a href="ファイル名">・・リンクテキスト・・</a>

《タグで表示を整える》

◎文字の装飾
	大きく	big
	小さく	small
	太字	b	bold text style
	斜体	i	italic trxt style
	下線	u	underlined text style
	取り消し線	s	strike-through text style
	等間隔	tt	teletype or monospaced text style
	下付き添え字	sub	subscript
	上付き添え字	sup	superscript

◎文章の配置
	引用	blockquote
	整形済みテキスト	pre	preformatted text

《タグに属性を与えて表示を整える》

◎ページ全体・・・・ body タグに属性を指定
	背景の色	bgcolor
	背景に使う画像	background
	文字の色	text

◎文章の配置
	左、中央、右寄せ	div タグ（ブロック要素を示す）に align 属性で指定

◎文字の表示・・・・font タグに属性を指定
	大きさ	size
	色	color
	フォント	face

　<font color="..."> や <bgcolor ="..."> などの色を指定する属性では、次のような方法で色を指定します。
　　　　color="#ff0000"・・・・色のRGB値を指定する。
　　　　color="red"　　・・・・色の名前を指定する。
　RGB値は #ff0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分を00～ffまでの16進数で記述します。
　一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になります。

《その他》

注　釈: 　　ブラウザの画面には表示されません
特殊文字: HTML文書の中では、タグに使う < や >などの文字はそのままでは表示できません。文字として表示するときは下記のように記述します。

名前符号表示される文字

< 右大不等号 ( < )

> 左大不等号 ( > )

& アンパサンド ( & )

" ダブルクォーテーション (")

  空白文字

【ＨＴＭＬソース】	リンクを張るには <a> を用います。
【ブラウザでの表示】	リンクを張るには <a> を用います。

《HTMLでできること、できないこと》

　HTMLはさまざまなコンピュータ環境で利用できるように工夫された表示方法ですが、ブラウザの種類、画面の大きさによって見え方が変わります。したがって自分の意図した見え方になるとは限りませんが、いろいろな工夫があります。

画像と文字の配置を思い通りにしたい

－　画像は右寄せか左寄せしかできません。表を使えばある程度可能です。

図と文字を重ねたい

－　できません。表を使って背景と文字を組み合わせると可能になります。

背景の色にグラディエーションをかけたい

－　これもできません。グラディエーションのかかった細い棒を背景に敷き詰めることによって表示できます。

字体（フォント）を変えたい

－　font タグのface 属性で指定可能ですが、見る人のコンピュータにも同じフォントが入っていないと意図したとおりに見えないので、期待通りに表示されるとは限りません。

参考： HTMLワンポイント

↑HTML ガイドの目次に戻る　　閉じる

タグの詳しい説明や使用例の掲載されているＷｅｂページを、リンク集で紹介していますから参考にしてください。

作成　：　小田桐一良

名前符号		表示される文字
<		右大不等号 ( < )
>		左大不等号 ( > )
&		アンパサンド ( & )
"		ダブルクォーテーション (")
		空白文字