ＨＴＭＬの基本

投稿者:RegionCellLabo

１．HTMLとは
（１）HTML
　HTMLはHyperText Markup Languageの略。
　ハイパーテキストは独立して存在するドキュメント間で参照を設定できる構造をもつ。
　マークアップ言語はドキュメントの構造や修飾のためのタグというテキストを挿入して記述する。
（２）HTMLとXHTMLの違い
　XHTMLはXMLをベースにHTMLを再構築したもの。
　XHTML（Extensible HyperText Markup Languageの略）は、
　・タグは必ず終了タグ”/”で閉じる、
　・要素をあらわすタグは小文字で表記しなければならない
などの決まりがある。
（３）規格の変化
　SGML→HTML HTMLはもともと文書を保管・閲覧するための言語として開発
　　｜→XML　データを保管するための言語として開発　
　　　→XHTML(W3C　2000-2018年)　HTMLをXMLに適合するように定義しなおしたもの
　　　 →HTML5（WHATWG 2004策定、W3C 2007策定2014-2021年勧告）
　　　XHTMLの仕様も取り入れたもの
　　　→HTML Living Standard（WHATWG 2011 – ）
　　　　HTML5のWHATWGとW3Cの仕様を統一

W3C：World Wide Web Consortium
World Wide Webで使用される各種技術（HTTP、CSS、DOMなど）の標準化を推進する為に設立された標準化団体
WHATWG：Web Hypertext Application Technology Working Group
　　HTMLと関連技術の開発をするためのコミュニティ
（４）HTML5 と HTML Living Standardの違い
　　HTML5に対して仕様が追加されている
　「HTML（WHATWG Living Standard）」の日本語訳
　　https://momdo.github.io/html/

２．HTMLの基本構造
２．１　タグ
（１）タグ
　ドキュメントの見出し、段落などの構造の意味づけをタグ（「<」と「>」）記号を使って記述。
　開始タグと終了タグで指示を与えたいテキストを囲む
　タグとテキストを合わせた全体を要素という。
　タグは半角、小文字で記述。
（２）タグの属性
　タグの要素に追加する設定を属性といい、要素の種類によって異なる。
　<要素名 属性=”値”>の形式で記述する。

２．２　ドキュメントの基本構造
（１）全体の構造

（２）ヘッダのタグ
・<title>～</title>タグ
　ブラウザのウインドウのタイトル文字列として表示。
・<meta>タグ
ドキュメントに関する情報の設定
連絡先、制作者、文字コードの指定
<meta naem=”reply-to” content=”連絡先”/>
<meta name=”author” content=”制作者”/>
<meta http-equiv=”Content-Type” content=”text/html;charset=文字コード “/>　
　
検索エンジン対応の設定
　キーワード（name=”keywords”）と紹介文（name=”description”）
　　検索サイトに登録し、検索でヒットしたとき、タイトルと紹介文が表示される。検索の拒否は、　
　　<meta name=”robots” content=”index,follow”/>

（３）ボディのタグ
・<p>～</p>タグ
　段落を設定
・<hn>～</hn>タグ　n=1,2,・・・,6
　見出しを設定
・<br>タグ
　改行する
　文書中の改行は無視され、1文字分のスペースとして扱われるため、改行は<br>を入れる。
　<br>は空要素で、HTMLでは終了タグは不要、但し、XHTMLでは
　<br />として、”/”でタグを閉じる必要がある。
・<strong>～</strong>
　文字の強調
・<hr>
　水平線
・<adress>～</adress>
　連絡先情報の記述
・<ul>～</ul> <li>～</li>
　順序不同リストで、箇条書き項目を設定しリストの先頭に黒丸●が付く
・<ol>～</ol>
　序列リストで、段落番号付きの箇条書きを設定
・<dl>～</dl> <dt>～</dt> <dd>～</dd>
　定義リストで、用語と用語をセットにしたリスト形式を定義する
・タグと要素、属性と値
　<要素名 属性=”値”>
  <body bgcolor=”#ff0000″>
  色指定は先頭に”#”を付け、RGBの各2桁の数字を組み合わせて表現する

３．画像の挿入とリンク設定
（１）画像の挿入　　
　　<img src=”test.jpg” width=”200px” height=”300px” alt=”サンプル” />
　　alt属性：代替テキストの設定

（２）リンクの設定
　　<a href=”リンク先のURL”>
　　リンク先のURLの指定は、相対パスと絶対パス（URLによる指定）がある
（３）アンカー（リンクを張るための名前）
　<a href=”#test1″>テスト画像</a>
：
  <a name=”test1″ id=”test1″>テスト画像は・・</a>
　アンカーにリンクさせるためには”#”のあとにアンカー名を指定
　<a href=”#アンカー名”>
　アンカー名は古いブラウザ（name属性）とXHTML（id属性）の両方に対応するように両方に同じアンカー名を記述する

４．その他のタグ
・テーブル<table>タグ
　１行２列のテーブル
　<table border=”1″ width=”300″ height=”150″>
　　<tr>     ・・・行の定義
　　<td></td>　・・・セルの定義
　　<td></td>
　　</tr>
  </table>

・フォーム<form>タグ
　<form action=”入力内容の送信先” name=”フォームの識別名” method=”送信方法post又はget”>
<input type=”text” name=”t1″ value=”sample” size=”10″ maxlength=”15″>
　name:コントロールを識別するための名前
　value：デフォルトで入力枠に表示するテキストを設定
　size：入力枠の幅を文字数で指定
　maxlength:入力可能な最大文字数を指定
</form>

　他に、
・チェックボックス　<input type=”checkbox”>　・・・
・ラジオボタン　<input type=”radio”>　・・・
・ファイルアップロード　<input type=”file”>　・・・
・ドロップダウンメニュー
　　　<select name=”名前”> <option>～</option>　・・・　　
　　　</select> 
 がある。

The end