HTMLとは

HTML:HyperText Markup Language


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

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


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


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


HTMLの目的

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


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

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

HTMLの基本ルール

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

Markupとは
  • 目印(荷札:タグ)をつけていくこと
  • 「<」と「>」は「アングルブラケット」と呼びます
  • 「<」:レッサーザン(lesser than)
  • 「>」:グレイターザン(grater than)
  • 「/」:スラッシュ (slash)
記述する内容は3つ

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

開始タグ

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

終了タグ

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


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


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



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

記述の準備:テキストエディタ

初期の段階で「HTML」を記述する練習には「メモ帳」ではないテキストエディタが必要になります。

  • 起動・動作が早い
  • 文字コード指定
  • コードのカラーリングなど、HTML入力に適している


以上の理由で、「テキストエディタ」を使用します。

記述する

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


  1. テキストエディターを起動する
  2. 新規ファイル作成
  3. 所定の場所に保存する
  4. 記述を始める
<html>

</html>


このとき、

  • 新規ファイル*1ってどう作るの?
  • 所定の場所*2ってどこ?
  • 保存する名前*3は?


わからない人は、授業前に解決しておきましょう。

箱の中の必要な2つの要素を記述する

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

</head>

</html>


次に

<html>
<head>

</head>
<body>

</body>
</html>



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



*1: ファイルメニューから作成

*2: Cドライブ直下に管理フォルダーを作成して保存する

*3: 基本的に自由。日付名のフォルダー管理をするとわかりやすい