読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

HTMLの入力

記述の練習の準備

  • 管理フォルダーを作成
  • Cドライブ直下に「自分の名前を英字」フォルダーを作り管理しなさい
  • その中に「0422」を作り、データを管理します

※このとき、フォルダー名・ファイル名に日本語を使用しないこと!


ブラウザに情報を表示するためにはHTMLで記述する

ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります。
それ以外では表示できないと言っても過言ではありません。


ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります。

HTML:HyperText Markup Language


ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。

ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。


正確な意味を理解するには、「仕様書」と呼ばれるW3C(World Wide Web Consortium)が策定したルールを読むことが必須です。


ごく簡単なHTMLの説明(HTML仕様書の日本語要約)


HTMLの目的

  • HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています。
  • コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします。

HTMLを記述することは、見知らぬ誰かとつながること

  • 一個人が作ったサイト(情報)であっても、リンクをたどって、その情報の知りたい人の役にたつことができるかもしれないということです。
  • つまり、自分の価値を誰かが認めてくれるということです。
  • その誰かを意識することにより、初めて「表現」が成立します。

HTMLの基本ルール

  • 日本語で入力した文字はそのまま表示されない(他国語も同様)
  • マークアップという意味付けをすると表示できる
  • HTMLでは、大きさ・色のなどの修飾は直接記述しない

Markupとは
  • 目印(荷札:タグ)をつけていくこと
記述する内容は3つ

  • どこから = 開始タグ
  • どこまで = 終了タグ
  • 要素の種類 = 要素タイプ

開始タグ

  • <」と「>」の間に「要素の種類」を書く。

終了タグ

  • 「</」と「>」の間に「要素の種類」を書く。


<h1>一番重要な見出し</h1>


文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となります。

文字参照(character references)

記述表示説明
&lt;<右大不等号 lesser than
&gt;>左大不等号 greater than
&amp;&アンドマーク、アンパサンド
&quot;"ダブルクォート、引用符
&nbsp;
空白文字 no-break space

記述する

この段階では、複雑な意味やルールは存在しません。

  1. テキストエディターを起動する
  2. 新規ファイル作成
  3. 所定の場所に保存する
  4. 記述を始める
テキストを「大見出し」と「段落」に分ける
かちかち山

昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
テキスト内容を構成している要素を探す
  • タイトルと本文で構成されている
  • ページ内の構成要素としては、大見出しと段落になります


意味づけをする

<ここから大見出し>
かちかち山
<ここまで大見出し>

<ここから段落>
昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
<ここまで段落>


記号化してみる

<大見出し>
かちかち山
</大見出し>

<段落>
昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
</段落>


英語化してみる

<heading1>
かちかち山
</heading1>

<paragraph>
昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
</paragraph>


英語を記号化してみる

<h1>
かちかち山
</h1>
<p>
昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
</p>


このように「タグ」は英単語の省略形が多いのですが、一定の規則性があるわけではありません。

Webページを表示するための基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>

</body>
</html>
bodyの中に文書構造を挿入
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページを表示するための基本構造</title>
</head>
<body>
<h1>
かちかち山
</h1>
<p>
昔々、ある会社に山田という名前の若い社長さんがおりました。社長仲間のあいだでは「やま」と呼ばれていました。山田社長には、ことあるごとに「Win-Winの考え方が大切なんです」と語りだすクセがありました。
</p>
</body>
</html>

記述の手順

箱の中の必要な2つの要素を記述する
  • 〜 は、そのルールで記述するための「箱」
  • 〜 ブラウザに内容のルールを伝える(ブラウザでは不過視)
  • 〜 閲覧者に内容の意味を伝える(ブラウザでは可視)
<html>
<head>

</head>

</html>


次に

<html>
<head>

</head>
<body>

</body>
</html>



ここまではHTMLの「箱」を作る記述のため、表示する内容はありません。
このあと必要な要素を記述していくことになります。


基本構造の入力
  • 基本構造は「head部」と「body部」


head部

  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)


body部

  • 閲覧者が内容を確認する部分
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 可視(表示)

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。


では「検索」は、何を検索するのか?
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。


この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。


では、どうやったら「インデックス」されるのか。
その話に入る前に、しばらく準備の時間が必要です。


meta要素
  • 「charset」は、文字コードを正しく判別して文字化けをしないように記述します
  • 基本的には「UTF-8」という、ユニコードを表示する指定をします
<meta charset="UTF-8">
link要素
<link rel="stylesheet" href="css/style.css">
title要素
  • 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを考えます。
body要素

本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。
その内容は「本文(ほんもん)」として、記述します。
その中から、内容を一目で把握できるように「見出し」を立ち上げます。
つまり、見出しで表すことのできる、文節の塊が「段落」となります。


この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。
「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。


文章だけが長く続くと、可読性が落ちます。
そこで、箇条書きが利用されます。
1行で完結に表現できるものは、箇条書きにします。


特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。
まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。
ですから、それには「箇条書き」が有効です。


つまりbody内には、常に

  1. 見出し
  2. 段落
  3. 箇条書き


が記述されることになります。



《課題》
次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん

文書構造に必要な要素

  1. タイトル
  2. 見出しと本文
  3. 箇条書き(番号つき、番号なし)
  4. 補足説明の画像
見出し <h1> <h2> <h3>
  • ページ内容を表す1行
  • 優先順位のレベルでマークアップする
  • 見出しの拾い読みでも、ページのツリー講座がわかるように
<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>


見出しは、段落(本文)と組み合わせて記述します。

段落 <p>
  • 基本的には、2行以上の文章に指定する(1行でも可)
  • 迷ったら、「p要素」にする
  • 段落ブロックの下は、必ず1行分の空きができる
箇条書き <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>02月20日</dt>
<dd>フェリカテクニカルアカデミーWebサイト制作科開講</dd>
<dt>02月24日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>02月24日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>

画像挿入

  • alt属性は、必須
  • 現在で必然性がなければ、width="幅" height="高さ" は、不要です
  • width="幅" height="高さ" を記述する場合は、pxなどの単位は不要
<img src="画像の置いてある場所" width="幅" height="高さ" alt="代替え文字">


img:image
src:source


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML:画像を表示</title>
</head>
<body>
<h1>画像を表示</h1>
<p>HTML内に画像を挿入する記述</p>
<p><img src="glass.jpg" width="400" height="250" alt="眼鏡"></p>
</body>
</html>
表組み
  • 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>


文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。

水平線

hr:horizontal rule


「キューピー」のページを「表示→スタイルシートスタイルシートを使用しない」にすると「水平線」が使われているのがわかります。
このように現在では、「hr」は「区切り線」として見せるのではなく、「意味を区切る」ことに利用されることが多いようです。
※いわゆる水平垂直の目盛りは「ruler:ルーラー」です。

リンク

Webは「リンク」こそ命。
リンクには3つの使い方があります。


a:anchor
href:hyper reference

  1. テキストリンク
  2. 画像リンク
  3. メールリンク
<a href="移動先のアドレス">◎◎◎のページへ移動</a>
<a href="移動先のアドレス"><img src="画像の住所" width="幅" height="高さ" alt="代替え文字"></a>
<a href="mailto:xxx@xxx.net">お問い合わせ(メールソフトが起動します)</a>
広告を非表示にする