HTMLの入力
記述の練習の準備
- 管理フォルダーを作成
- Cドライブ直下に「name」フォルダーを作り管理しなさい
- その中に「日付フォルダー」を作り、データを管理します
※このとき、日本語使用不可。
ブラウザに情報を表示するためにはHTMLで記述する
- ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります
- ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります
HTML：HyperText Markup Language
- Webページを記述するためのマークアップ言語
「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。
ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。
正確な意味を理解するには、「仕様書」と呼ばれるW3C（World Wide Web Consortium）が策定したルールを読むことが必須です。
- Web未経験者は、必ず読むこと。
HTMLの目的
- HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています。
- コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします。
HTMLの基本ルール
- 日本語で入力した文字はそのまま表示されない（他国語も同様）
- マークアップという意味付けをすると表示できる
- HTMLでは、大きさ・色のなどの修飾は直接記述しない
Markupとは
- 目印（荷札：タグ）をつけていくこと
記述する内容は3つ
- どこから = 開始タグ
- どこまで = 終了タグ
- 要素の種類 = 要素タイプ
開始タグ
- 「<」と「>」の間に「要素」を書く。
終了タグ
- 「</」と「>」の間に「要素」を書く。
<h1>一番重要な見出し</h1>
文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となります。
文字参照（character references）
| 記述 | 表示 | 説明 |
|---|---|---|
| < | < | 右大不等号 lesser than |
| > | > | 左大不等号 greater than |
| & | & | アンドマーク、アンパサンド |
| " | " | ダブルクォート、引用符 |
| | 空白文字 no-break space または none-break space |
一般的な呼び方
- 「 < 」「 > 」：アングルブラケット
- 「 [ 」「 [ 」：ブラケット
- 「 { 」「 } 」：カールブラケット
HTMLの記述
記述する
- TearaPadを起動
- テキストエディターを起動する
- 新規ファイル作成
- 所定の場所に保存する
- 記述を始める
<html> </html>
このとき、
- 新規ファイルってどう作るの？
- 所定の場所ってどこ？
- 保存する名前は？
わからない人は、授業前に解決しておきましょう。
箱の中の必要な２つの要素を記述する
- 〜 は、そのルールで記述するための「箱」
- 〜 ブラウザに内容のルールを伝える（ブラウザでは不過視）
- 〜 閲覧者に内容の意味を伝える（ブラウザでは可視）
<html> <head> </head> </html>
次に
<html> <head> </head> <body> </body> </html>
ここまではHTMLの「箱」を作る記述のため、表示する内容はありません。
このあと必要な要素を記述していくことになります。
基本構造の入力
基本構造とは
「文書構造」つまり、ページ内容のツリー構造を指します。
この文書構造を理解するには「パラグラフの概念」を理解する必要があります。
タイトルのみ表示
<html> <head> <title>はじめてのHTML入力練習</title> </head> <body> </body> </html>
HTMLの入力の仕方
１行目の「<html>」の入力の仕方を順序で説明すると以下のようになります。
まず、開始タグを入力。
- 「<」左アングル・ブラケット：小なり（lesser than）
- html
- 「>」右アングル・ブラケット：大なり（greater than）
続いて、
- 「enter(return)」キーを２回押し、１行空ける
続いて、終了タグを入力。
- 「<」左アングル・ブラケット：小なり（lesser than）
- html
- 「/」スラッシュ
- 「>」右アングル・ブラケット：大なり（greater than）
その結果、以下のような「開始タグと終了タグ」のセットができます。
<html> </html>
使用するキーは、
★２日目の復習
入力
- 開始タグと終了タグをセットで入力する
- 半角と全角の違いに注意（日本語の入力後にそのまま入力すると「アングルブラケット」や「ダブルクォート」が全角になってしまいます。）
（1）HTMLの構造を入力
<html> </html>
（2）head要素とbody要素を入力
- head部はUAのための記述（非表示）
- body部は閲覧者のための記述（表示）
<html> <head> </head> <body> </body> </html>
（3）title要素を入力
- title要素は、UAの上部に表示される（必須）
<html> <head> <title>ページのタイトル</title> </head> <body> </body> </html>
（4）meta要素を入力
- 文字のエンコードを指定する
<html> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> </body> </html>
（5）h要素とp要素を入力
- 見出しと本文をセットで記述する
<html> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> <h1>優先順位の高い見出し</h1> <p>テーマの本文</p> </body> </html>
- 必然性により、下位構造も記述する
- h2〜h6は、複数回の使用可
<html> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> </head> <body> <h1>優先順位の高い見出し</h1> <p>テーマの本文</p> <h2>次に優先順位の高い見出し</h2> <p>テーマ内の項目の本文</p> <h2>次に優先順位の高い見出し</h2> <p>テーマ内の項目の本文</p> <h3>次の次に優先順位の高い見出し</h3> <p>テーマ内の項目の本文</p> </body> </html>
（6）本文の内容を、絞ってわかりやすくするために箇条書きにする
- 番号なしと番号付きがある
<ul> <li>番号なし箇条書き</li> <li>番号なし箇条書き</li> <li>番号なし箇条書き</li> </ul> <ol> <li>番号なし箇条書き</li> <li>番号なし箇条書き</li> <li>番号なし箇条書き</li> </ol>
（7）語句説明や日付のある箇条書きにして、よりわかりやすくする
- 定義型リストを利用する
<dl> <dt>Webデザインの勉強</dt> <dd>初心者がゼロから始めるWebデザインの勉強</dd> </dl> <dl> <dt>2012年12月22日</dt> <dd>授業開始</dd> </dl>
（8）まとめるとわかりやすいものは、表組みにする
- table要素を利用する
- tr要素で「行」をまとめると記述しやすい
- 属性はCSSで指定しますが、この段階では入力します
<table width="400" border="1"> <tr> <th>１日目</td><th>２日目</th><th>３日目</th> </tr> <tr> <td>基本構造</td><td>画像とリンク</td><td>Illustratorの基礎</td> </tr> <tr> <td>各要素と役割</td><td>Illustratorの基礎</td><td>まとめ</td> </tr> </table>
