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）
| 記述 | 表示 | 説明 |
|---|---|---|
| < | < | 右大不等号 less than |
| > | > | 左大不等号 greater than |
| & | & | アンドマーク、アンパサンド |
| " | " | ダブルクォート、引用符 |
| | 空白文字 no-break space または none-break space |
一般的な呼び方
- 「 < 」「 > 」：アングルブラケット
- 「 [ 」「 [ 」：ブラケット
- 「 { 」「 } 」：カールブラケット
HTMLの記述
TeraPadで入力練習
- TeraPad
- TeraPadを使う理由は、タグ（単語）の入力の手順に慣れてもらうため便利な機能を使用しない状態で入力練習をしたいためです（シンプル）
- その後、Brackets → Dreamweaver と使用していきます
箱の中の必要な２つの要素を記述する
- 〜 は、そのルールで記述するための「箱」
- 〜 ブラウザに内容のルールを伝える（ブラウザでは不過視）
- 〜 閲覧者に内容の意味を伝える（ブラウザでは可視）
<html> <head> </head> </html>
次に
<html> <head> </head> <body> </body> </html>
ここまではHTMLの「箱」を作る記述のため、表示する内容はありません。
このあと必要な要素を記述していくことになります。
基本構造の入力
基本構造とは
「文書構造」つまり、ページ内容のツリー構造を指します。
この文書構造を理解するには「パラグラフの概念」を理解する必要があります。
タイトルのみ表示
<html> <head> <title>はじめてのHTML入力練習</title> </head> <body> </body> </html>
HTMLの入力の仕方
１行目の「<html>」の入力の仕方を順序で説明すると以下のようになります。
まず、開始タグを入力。
- 「<」左アングル・ブラケット：小なり（less than）
- html
- 「>」右アングル・ブラケット：大なり（greater than）
続いて、
- 「enter(return)」キーを２回押し、１行空ける
続いて、終了タグを入力。
- 「<」左アングル・ブラケット：小なり（less 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>2016年02月29日</dt> <dd>HTMLの授業開始</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>
