HTMLの入力
記述の練習の準備
- 管理フォルダーを作成
- Cドライブ直下に「name」フォルダーを作り管理しなさい
- その中に「名前」→「日付フォルダー」を作り、データを管理します
※このとき、フォルダー名・ファイル名に日本語使用不可。
ブラウザに情報を表示するためにはHTMLで記述する
ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります。
それ以外では表示できないと言っても過言ではありません。
ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります。
HTML：HyperText Markup Language
- Webページを記述するためのマークアップ言語
「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。
ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。
正確な意味を理解するには、「仕様書」と呼ばれるW3C（World Wide Web Consortium）が策定したルールを読むことが必須です。
HTMLの目的
- HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています。
- コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします。
HTMLを記述することは、見知らぬ誰かとつながること
- 一個人が作ったサイト（情報）であっても、リンクをたどって、その情報の知りたい人の役にたつことができるかもしれないということです。
- つまり、自分の価値を誰かが認めてくれるということです。
- その誰かを意識することにより、初めて「表現」が成立します。
HTMLの基本ルール
- 日本語で入力した文字はそのまま表示されない（他国語も同様）
- マークアップという意味付けをすると表示できる
- HTMLでは、大きさ・色のなどの修飾は直接記述しない
Markupとは
- 目印（荷札：タグ）をつけていくこと
記述する内容は3つ
- どこから = 開始タグ
- どこまで = 終了タグ
- 要素の種類 = 要素タイプ
開始タグ
- 「<」と「>」の間に「要素」を書く。
終了タグ
- 「</」と「>」の間に「要素」を書く。
<h1>一番重要な見出し</h1>
文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となります。
文字参照（character references）
| 記述 | 表示 | 説明 |
|---|---|---|
| < | < | 右大不等号 lesser than |
| > | > | 左大不等号 greater than |
| & | & | アンドマーク、アンパサンド |
| " | " | ダブルクォート、引用符 |
| | 空白文字 no-break space |
HTMLの記述
- Dreamweaverを利用しない場合は、TeraPad・Crescent Eveを使います
箱の中の必要な２つの要素を記述する
- 〜 は、そのルールで記述するための「箱」
- 〜 ブラウザに内容のルールを伝える（ブラウザでは不過視）
- 〜 閲覧者に内容の意味を伝える（ブラウザでは可視）
<html> <head> </head> </html>
次に
<html> <head> </head> <body> </body> </html>
ここまではHTMLの「箱」を作る記述のため、表示する内容はありません。
このあと必要な要素を記述していくことになります。
基本構造の入力
- 基本構造は「head部」と「body部」
head部
- UA（user agent）が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
- あくまでもブラウザが理解するための部分
- 不可視（非表示）
body部
- 閲覧者が内容を確認する部分
- 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
- 可視（表示）
現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。
では「検索」は、何を検索するのか？
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。
この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。
では、どうやったら「インデックス」されるのか。
その話に入る前に、しばらく準備の時間が必要です。
その他のmeta
<meta name="description" content=""> <meta name="keywords" content="">
link要素
<link rel="stylesheet" href="css/style.css" media="all">
title要素
- 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを考えます。
body要素
本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。
その内容は「本文（ほんもん）」として、記述します。
その中から、内容を一目で把握できるように「見出し」を立ち上げます。
つまり、見出しで表すことのできる、文節の塊が「段落」となります。
この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。
「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。
文章だけが長く続くと、可読性が落ちます。
そこで、箇条書きが利用されます。
１行で完結に表現できるものは、箇条書きにします。
特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。
まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。
ですから、それには「箇条書き」が有効です。
つまりbody内には、常に
- 見出し
- 段落
- 箇条書き
が記述されることになります。
《課題》
次の内容をマークアップしなさい。
今日の献立 今日は、子供も大人も好きなカレーを作ろうと思います。 カレーの材料 カレー・ルー 豚肉 じゃがいも たまねぎ にんじん
文書構造に必要な要素
- タイトル
- 見出しと本文
- 箇条書き（番号つき、番号なし）
- 補足説明の画像
見出し <h1> <h2> <h3>
- ページ内容を表す１行
- 優先順位のレベルでマークアップする
- 見出しの拾い読みでも、ページのツリー講座がわかるように
<h1>アフォーダンス</h1> <h2>デザインにおけるアフォーダンス</h2> <h3>本来のアフォーダンス</h3>
見出しは、段落（本文）と組み合わせて記述します。
段落 <p>
- 基本的には、２行以上の文章に指定する（１行でも可）
- 迷ったら、「p要素」にする
- 段落ブロックの下は、必ず１行分の空きができる
箇条書き <ul> <ol> <dl>
- 必然性のある箇条書きを利用する
ul（unordered list）
順序が置き換わっても意味が伝わる並列な内容に使う。- 行頭マークは「黒丸」
<ul> <li>私が好きな真っ赤なりんご</li> <li>あなたが好きなのはバナナ</li> </ul>
ol（ordered list）
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。- 行頭は数字
<ol> <li>まず良く洗ってから皮をむき</li> <li>それからおもむろに囓りつく</li> </ol>
dl（definition list）
「名称（用語）」と「その説明文（定義）」をセットにしてリスト化するときに使う。- リスト全体に対する dl要素：definition list
- 名称(用語)に対する dt要素：definition term
- 説明文(定義)に対する dd要素：definition description
<dl> <dt>りんご</dt> <dd>赤い色をした丸い果物。</dd> <dt>バナナ</dt> <dd>黄色い色をした細長い果物。</dd> </dl>
以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。
<dl> <dt>01月27日</dt> <dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd> <dt>01月29日</dt> <dd>HTMLの基本構造の入力練習</dd> <dt>01月30日</dt> <dd>定義型リストと表組みの練習</dd> </dl>
表組み
- table 要素
- caption 要素
- tr要素：table row
- td 要素：table data
- th要素：table header
<body> <h1>Web年表</h1> <table border="1"> <caption>1999年以前</caption> <tr> <th>西暦</th><th>出来事</th> </tr> <tr> <td>1989年</td><td>WWWの誕生</td> </tr> <tr> <td>1993年</td><td>Mosaic 登場</td> </tr> <tr> <td>1995年</td><td>Windows 95</td> </tr> <tr> <td>1998年</td><td>Google 登場</td> </tr> </table> </body>
<table border="1" summary="カリキュラム内容のイメージ"> <tr> <th>科目</th> <td>内容</td> </tr> <tr> <th>国語</th> <td>正しい文書構造を理解する（パラグラフの概念）</td> </tr> <tr> <th>算数</th> <td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td> </tr> <tr> <th>理科</th> <td>力学からコンピュータの描画を理解する</td> </tr> <tr> <th>社会</th> <td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td> </tr> <tr> <th>英語</th> <td>Webのバックグラウンドから理解するために必要な言葉の理解する</td> </tr> <tr> <th>図工</th> <td>デザインのルールを理解する</td> </tr> </table>
文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
アドレス
「住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します。
一般的には「著作マーク (c)」を明示する場合にも利用されています。
<address>フェリカテクニカルアカデミー<br> 〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル２F 連絡先： 03-3981-7201</address>
リンク
Webは「リンク」こそ命。
リンクには３つの使い方があります。
- テキストリンク
- 画像リンク
- メールリンク
<a href="移動先のアドレス">◎◎◎のページへ移動</a> <a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替え文字"></a> <a href="mailto:xxx@xxx.net">お問い合わせ（メールソフトが起動します）</a>
a：anchor
href：hyper reference
新規ウィンドウで開く
- target="_blank"
この属性は、HTMLの解釈の変遷により、使わないほうが良いといわれたりしましたが、HTML5では使用可能になっています。
<html> <head> <title>はじめてのHTML入力練習</title> </head> <body> <h1>結論：大見出し</h1> <p>要約</p> <h2>結論：検証</h2> <p>解説</p> <ul> <li>検証の項目</li> <li>検証の項目</li> <li>検証の項目</li> </ul> <p>解説</p> <ol> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> <li>順序のある検証の項目</li> </ol> <dl> <dt>01月27日</dt> <dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd> <dt>01月29日</dt> <dd>HTMLの基本構造の入力練習</dd> <dt>01月30日</dt> <dd>定義型リストと表組みの練習</dd> </dl> <table border="1" summary="カリキュラム内容のイメージ"> <tr> <th>科目</th> <td>内容</td> </tr> <tr> <th>国語</th> <td>正しい文書構造を理解する（パラグラフの概念）</td> </tr> <tr> <th>算数</th> <td>JavaScript、ActionScript、PHPなどでプログラミングの考え方を理解する</td> </tr> <tr> <th>理科</th> <td>力学からコンピュータの描画を理解する</td> </tr> <tr> <th>社会</th> <td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td> </tr> <tr> <th>英語</th> <td>Webのバックグラウンドから理解するために必要な言葉の理解する</td> </tr> <tr> <th>図工</th> <td>デザインのルールを理解する</td> </tr> </table> <address>フェリカテクニカルアカデミー<br> 〒171-0022 東京都豊島区南池袋2-4-3 ホウライビル２F 連絡先： 03-3981-7201</address> </body> </html>
