HTMLstudy
HTMLの勉強
ここではホームページ、すなわちWEBサイトを作成するために必要な記述言語である、HTMLの勉強をします。
HTMLとは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）のことです。
ハイパーテキスト (hypertext) とは、複数の文書（テキスト）を相互に関連付け、結び付ける仕組みのことで、「テキストを超える」という意味から"hyper-"（～を超えた） "text"（文書）と名付けられています。
また、マークアップ言語（マークアップげんご、英: markup language）はコンピュータ言語の一種で、文章の構造（段落など）や見栄え（フォントサイズなど）に関する指定を文章とともにテキストファイルに記述するための言語です。
HTMLの働きの第一は、文章の中で、見出し、段落、表、リストといった役割を指定して、文章を構造化することです。
文章に対するそれらの指定をマークアップ (markup) と呼び、マークアップを記述するための文字列をタグ (tag) と呼びます。
すなわち、HTMLはタグを使ったテキスト文書というわけです。
＜要素＞ を開始タグ、 ＜／要素 ＞ を終了タグといいます。
開始タグと終了タグのあいだには内容（コンテンツ）が入ります。
例えば、要素pに対して、＜p＞ HTMLの構造とタグ </p>の場合、＜p＞が開始タグ、</p>が終了タグです。
挟まれている部分「HTMLの構造とタグ」が、段落を表すタグ＜p＞の対象となる内容です。
段落を作る働きをもつタグ＜p＞は、対象となる内容が一行改行されて始まり、
内容の最後の行の後が一行改行されて終わります。
つまり＜P＞ ～ ＜/p＞にはさまれた「～」部分が、ひとつの塊（グループ、ブロック）となるわけです。
他にも、、＜head＞～＜/head＞、＜body＞～＜/body＞、＜div＞～＜/div＞、＜span＞～＜/span＞、＜h１＞～＜/h１＞、＜h２＞～＜/h２＞、・・・・
などがあります。
また、終了タグを省略できるものとしては、＜p＞、＜li＞ があります。これらの要素の終了タグは省略することができます。しかし、XHTMLにおいては省略しません。HTMLにおいてのみです。
また、「改行」を示す＜br＞のように、内容が存在しない要素の場合は、終了タグはありません。単独です。
終了タグのいらない単独タグとして、他にも、<hr>,<img>があります。
＜hr＞は、水平線、区切り線を表示するタグ。
＜img＞は画像を表示するタグです。
タグで書かれたテキストを表示させるものがブラウザと呼ばれるソフトです。ブラウザでホームページを見ることができます。
ブラウザを動かす機能（ソフト）がWEBサーバーです。
ブラウザが異なると、同じHTMLの文章でも、見え方が違うことがあります。その違いを超えて、ブラウザがなんであろうと、同じ見え方になるように進められたのがHTMLの標準化です。
現在標準とされるHTMLは、ブラウザの開発元を含む企業や大学の参加するＷ３C（World Wide Web Consortium）という機関が策定したもので、HTML4.01として仕様書が公開されています。
最初のW3C勧告となったXHTML（Extensible HyperText Markup Language）1.0 は HTML 4.01を元にしたものとなっており、HTML 4.01に対応したWebブラウザではほぼ完全な形でページを見られるようになっています。
現在の最新版はXHTML 1.1で、XHTML 1.0の文書見栄えを指定するタグを廃止し、
文書構造の記述に特化した言語へと変化しつつあります。
尚、見栄えの記述は全てCSSで行うことになりました。
HTMLの基礎１
＜箇条書き＞
(1)番号なしリストタグ ＜ul＞～＜/ul＞<p>私の好きな雑誌：</p> <ul> <li>りぼん</li> <li>なかよし</li> </ul>↓↓これを実行すると；
私の好きな雑誌：
- りぼん
- なかよし
(注意）ul は unordered list（番号無し箇条書き），li は list item（箇条書き項目）。
<li> ... </li> の中には文字などのインライン要素や、またはブロックレベル要素が入る。
番号無しリストタグ・・・＜ul＞～＜/ul＞を使った結果
- お菓子
- レモン
- りんご
- コーヒー
- ショートケーキ
(2)番号つきリストタグ ＜ol＞～＜/ol＞
<p>私の好きな雑誌：</p> <ol> <li>りぼん</li><br /> <li>なかよし</li><br /> </ol>ol は ordered list（番号付き箇条書き）である。
<p>私の好きな雑誌：</p> <ul style="list-style-type:decimal"> <li>りぼん</li><br /> <li>なかよし</li><br /> </ul>↓↓これを実行すると；
私の好きな雑誌：
- りぼん
- なかよし
（注意）「＜ul style="list-style-type:decimal"＞」の部分は、
リスト項目の先頭に番号を打ちますという意味です。
番号付きリストタグ・・・＜ol＞～＜/ol＞を使った結果
- ドメイン取得
- サーバーを契約
- HPをサーバーupload
- 公開
- メンテナンス
(3)用語の説明タグ
<p>用語の説明：</p> <dl> <dt>XHTML</dt> <dd>Webページをマーク付けするための言語</dd> <dt>CSS</dt> <dd>Webページの見栄えを整えるための言語</dd> </dl>↓↓これを実行すると；
用語の説明：
- XHTML
- Webページをマーク付けするための言語
- CSS
- Webページの見栄えを整えるための言語
dl は definition list（定義リスト），
dt は definition term（定義する用語），
dd は definition description（定義の記述）の意味
作成の実際
テキストエディタを使って挑戦！
まず、テキストエディタ（例：サクラエディタ）を準備してください。
そこに直接、タグ文書を記入して行きます。書きながら覚えましょう！
まず、手始めに warming up しましょう！
HTMLで、サクラエディタに次のように書いてみてください。
sample
<html> <head> <title>HTMLの練習</title> </head> <body> <br /> <h1>文字表現の練習です</h1> <br /> <h3>（原文）<br /> 「 私は、エディタでホームページを作る練習をし ています。」</h3> <br /><br /> ■ （青色表示）： 上の文章を、青色で表示します。 <br /><br /> <span style="color:blue">「 私は、エディタでホームページを作る練習 をしています。」 </span> <br /><br /> ■ （青色太字表示）： この青色文字を、太字で表示します。 <br /><br /> <span style="color:blue;font-weight:bold">「 私は、エディタでホー ム ページを作る練習をしていま す。」 </span> <br /><br /> となります。 <br /><br /><br /> <a href="http://makehp.mitioka.com/index.php?makingHP">戻る</a> <br /><br /><br /> 以上で、文章の表示を終わります。 <br /><br /> </body> </html>
上記のように書いたら、ファイルを保存し、エディタを終了させることになりますが、
この時、忘れてはならないのは、「名前を付けて保存」→ 「保存時の拡張子は、例えば、『html_exercise.html』のように、『.html』をつけます。」
また、HTMLファイルを保存する時、ファイル名は必ず半角英数文字を使います。なぜなら全角文字だとエラーを発生するので。
次に、
ファイルの種類は、「すべてのファイル」
文字コードセットは、「UTF-8」
改行コードは、「変換なし」
として、デスクトップに保存すると良いでしょう。
すると保存したデスクトップ上に上記のファイル名『html_exercise.html』で表示されます。
それをクリックすると、黒色の文章、青色の文章、青色太字の文章が表示されますよ。
⇒ sample
いかがですか？
今、あなたがエディタで入力したhtmlファイルが、画面上に表示されましたか。
注意： sample画面の一番上の緑の実践で囲った赤色文字の部分（「これは、sampleです。」）は、スタイルを適用していますが、上記プログラムの中では省いてあります。
（スタイル適用に関しては「CSSの勉強」で学びましょう。）
◆上記の「sample 」のタグの説明をします。
＜html＞ ? ＜/html＞ WEBページの始まりと終わりを示します。
＜head＞ ? ＜/head＞ WEBページの前準備の全体的な設定をします。
＜title＞ ? ＜/title＞ WEBページのタイトル名です。画面の最上位の左端に小さく表示されます。
＜body＞ ? ＜/body＞ この間(～)にWEBページの中身を書きます。
＜h１＞ ? ＜/h１＞ 大見出し
＜h２＞ ? ＜/h２＞ 中見出し
＜h３＞ ? ＜/h３＞ 小見出し
＜br /＞ 改行
＜a href="http://makehp.mitioka.com/index.php?makingHP">戻る＜/a＞
説明します。
＜a＞の中の要素「a」はアンカー（anchor）を指定します。リンク（ハイパーリンク）を設定するときに使います。
「href＝” ? ”」がそのリンクの飛び先のURLを指定します。「”」と「”」の間にURLを書きます。a要素のhref属性は、リンク先を指定する属性です。
＜a＞とその終了タグ＜/a＞で挟まれた要素が、クリックするとジャンプする「リンクボタン」になります。
続いて、
＜span style="color:blue"＞「私は、エディタでホームページを作る練習 をしています。」＜/span＞
の部分について説明します。
「<span> ～ </span>」は「間にはさまれた要素をグループ化」します。
同じく「 <div> ～ </div> 」も「間にはさまれた要素をグループ化」しますが、その大きな違いは、
spanタグは一行の範囲内（インライン）の要素に対してグループ化します。
divタグは、タグの始まりと終わりの前後に改行を伴い、複数行に渡るまとまった部分の、ブロックレベル範囲内の要素のグループ化をします。
spanは、要素をグループ化したり、まとまりを示すものであって、これだけでは表示上は何の変化もありません。
上記の例のように、style属性を伴ってスタイルを適用する範囲を示すものとして利用されます。
「 style="color:blue"」は、span要素にスタイルを指定しています。
つまり、＜span＞ ～ ＜／span＞ の間にある一行の要素の色を青にしなさいという指示です。
また、次は、
＜span style="color:blue;font-weight:bold"＞「 私は、エディタでホー ム ページを作る練習をしています。」＜/span＞
スタイル宣言のルールセットの部分｛color:blue;font-weight:bold｝の中身は、「；」（セミコロン）で区切って、複数の「属性：属性値；」を列挙できます。（参考：CSSの勉強）
この場合は、文字の色を青に、フォントを太字にしなさいという指示です。
以上で、sampleの説明は終わります。
これで、『エディタで最も簡単なホームページを作成した』ことになります。
学 習
上記の、「<」と「>」で囲まれた部分をタグといいます。すなわち、＜html＞、＜br /＞、＜body＞、＜span style＝”color:blue"＞～＜/span＞ などを使った文書がHTML言語です。
＜span style＝”color:blue"＞～＜/span＞の赤のアンダーラインの部分がCSSの要であるスタイル（style）と呼ばれる部分です。
CSSとは、「Cascading Style Sheet」（カスケーディング・スタイル・シート）の頭文字をとった略語です。
CSSにはバージョンがあり、現在はCSS4までありますが、もっぱら現在頻繁に使われているのは、CSS2.0、CSS2.1です。また最近ではCSS3が登場して来ていますが、CSS4はまだ少数です。
詳しくは、 こちら《Cascading Style Sheets 》 を参照してください。
＊（注意）HTML4.01とXMLの特徴を合わせて厳密に規定したXHTML1.0の特徴は、
例えば、終了タグは省略しないで必ず書くとか、HTMLではタグの大文字・小文字を区別しないがXHTML1.0は小文字で書くとか、番号付きリスト<ol>は使わず、<ul style="list-style-type:decimal">を使うとか、改行タグ<br>は<br />と書くとかいった具合です。
現在ではHTML4.01や、XHTML1.1が主流をなしているが、将来はやがてXHTML2.0やHTML5へと移行するでしょう。しかし最新の情報によると、下位互換性の問題で、XHTML2.0は策定終了となり、HTML5は継続策定中です。HTML5の特徴としてはグラフィカルな機能などが盛り込まれ、かつ下位互換性に対応しているので、これからの主流となるようです。
従って、HTML5のタグは部分的に現在のHTML4.01と混在して使用可能ということです。
またCSSも現在は2.01版ですが、CSS３へと移行しつつあります。
(参考：HTML5とCSS3）
