Webサイトを作成する言語HTMLを学ぼう。
まずは使い慣れているテキストエディターで以下のソースコードを打ち込む。(左端の行番号は打ち込まなくてよい)
●lesson1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>はじめてのHTML</title> </head> <body> <p>Hello world!!</p> </body> </html>
入力が終わったら、文字コードをUTF-8、ファイル名を lesson1.html としデスクトップに保存する。
デスクトップに作成されたlesson1.htmlを右クリックして プログラムから開く→Google Chrome を選択する。（またはファイルをChromeにドラッグ&ドロップ)
ブラウザに Hello world!! と表示されれば成功だ！
ブラウザ上で右クリックより ページのソースを表示 で今打ったソースコードが確認できる。
[ソースコード解説]
1行目:文書宣言。「このページはhtmlで書かれています」と宣言している。なお、この講座では現在主流のhtml５で書いていく。
2:html開始タグ。これは10:の終了タグと対応している。このようにHTMLでは開始タグと終了タグで要素を囲むことによって形成していく。
3:head開始タグ。これは6:の終了タグと対応していて、このhead部にmetaタグなどの文書情報を記入する。
4:metaタグ。ここではこのHTMLの文字コードをUTF-8に設定している。
またこのmetaタグには終了タグがない事にも注目。このような場合「 />」とスラッシュをつける。HTML5ではこのスラッシュは省略可能だが、最初のうちは終了タグのないタグの尻はスラッシュを付けることを意識しよう。
5:titleタグ。このHTMLのタイトルを記述する。ブラウザのタブの部分にこのタイトルが表示されるだけでなくSEO(検索エンジン最適化)的に最重要なので実際の開発では吟味する必要がある。
7:body開始タグ。これは9:と対応している。このbody内部に実際にブラウザで表示される部分を記述する。
8:pタグはパラグラフつまり段落要素を表すタグ。<p>～</p>で囲まれた部分が一つの段落としてみなされる。pタグの開始位置が右にずれているのはインデントといい、ソースコードを見やすくするための作法。
[見出しタグ、リストタグ]
先ほどｐタグを学んだがHTMLには様々なタグが用意されている。今回はその中から見出しタグ、リストタグを学ぶ。
デスクトップにある lesson1.html ファイルを開き以下のように編集しよう。
編集が済んだら、lesson2.htmlとして別名保存する。
●lesson2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>プログラミング言語人気ランキング</title>
</head>
<body>
<!-- h1は見出しタグです。 -->
<h1>2017年度プログラミング言語人気ランキング</h1>
<!-- olはOrdered Listの略です。 -->
<ol>
<li>JavaScript</li>
<li>Java</li>
<li>C#</li>
<li>PHP</li>
<li>Python</li>
</ol>
</body>
</html>
ブラウザで表示してみよう。以下のように表示されれば成功だ。
[ソースコード解説]
8:コメント行。HTMLでは<!–～ –>でくくられた部分をコメントとして処理する。コメントとはソースコードに添えるメモ書きのようなものでブラウザには表示されない。（ただしソースコードを見ればそのまま表示されるので見られてまずいことは書けない。）
9:見出しタグ。h1～h6までがあり、h1は大見出し。番号が小さくなるにしたがって重要度が低くなる。SEO的にもタイトルタグの次に重要なタグ。h1にどのような言葉が選ばれているがでそのサイトのSEOにかける情熱を測ることができる。
11:番号付きリスト（Ordered List)。 <li>～</li>のリスト要素を番号付きで表示する。olの代わりにulタグ（Unordered List)を使うと番号なしリストを作成できる。
[テーブルタグ,定義リストタグ]
今度は表をつくるテーブルタグと定義リストを勉強しよう。エディタで以下のソースを入力する。
●lesson3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>インタプリタとコンパイラ</title> </head> <body> <h1>インタプリタとコンパイラ</h1> <p>ソースコードを機械が理解できるように翻訳する方法には、インタプリタとコンパイラ方式があります。</p> <!--aタグでリンク先を指定します。--> <p><a href="http://nyumon-info.com/program/bunrui.html">詳しい解説を見る</a></p> <h2>特徴</h2> <table border="1"> <caption>インタプリタとコンパイラの特徴</caption> <tr><th></th><th>インタプリタ</th><th>コンパイラ</th></tr> <tr><th>プログラム実行</th><td>ソースファイルを直接実行</td><td>コンパイル作業が必要</td></tr> <tr><th>処理速度</th><td>遅い</td><td>速い</td></tr> </table> <h3>代表的な言語</h3> <dl> <dt>インタプリタ</dt> <dd>Python</dd> <dd>Ruby</dd> <dt>コンパイル</dt> <dd>C</dd> <dd>C++</dd> </dl> </body> </html>
ブラウザで表示してみよう。下のように表示されれば成功だ！
[ソースコード解説]
11:aタグでリンク機能。リンク先をhref=””の中に記述する。</a>までの間がリンク文字として下線が表示される。
13:tableタグで表を作成。border=”1″というオプションで１pxの罫線をつけている。
14:表題を付けたい場合はcaptionタグ。
15:trはtable row、 thはtable headerの略です。rowは行のことでこの後も頻繁に出てくる, ここで覚えてしまおう。trタグで作られた行にthタグで表の見出しとなる要素を記述している。
16～17:trで行を生成し、データを挿入していく。tdはtable dataの略。
20:dlはDescription Listの略で、<dl>～</dl>の範囲が説明リストであることを表す。説明リストとは、説明される用語とその用語の説明を一対にしたリストのこと。
21:dtとはDescription Termの略で、説明される用語を意味する。 <dt>～</dt>に説明される用語を記述する。
22～23:ddとはDescription、definitionの略で、説明や定義を意味する。このように複数並べて記述できる。
[練習問題]
以下のようなサイトを作れ
文言は以下からコピペしてよい
HTMLで定義されている要素の多くは、 ブロックレベル要素（Block-Level Elements）か、インライン要素（Inline Elements）に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、p要素の中のstrong要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。。
[解答例]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>ブロック要素、インライン要素</title>
</head>
<body>
<h1>ブロック要素、インライン要素</h1>
<p>HTMLで定義されている要素の多くは、 ブロックレベル要素（Block-Level Elements）か、インライン要素（Inline Elements）に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。
</p>
<h2>ブロック要素</h2>
<p>ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。</p>
<h2>インライン要素</h2>
<p>
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、p要素の中のstrong要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。</p>
<h2>配置のルール</h2>
<p>ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。</p>
<h3>よく使うタグ分類</h3>
<dl>
<dt>ブロック要素</dt>
<dd>p</dd>
<dd>div</dd>
<dd>h1</dd>
<dd>ol</dd>
<dd>ul</dd>
<dd>table</dd>
<dt>インライン要素</dt>
<dd>a</dd>
<dd>img</dd>
<dd>span</dd>
<dd>strong</dd>
</dl>
</body>
</html>
コメント