はじめてのHTML

1章 はじめてのHTML

HTMLタグの役割について学習します。まずは試しにHTMLファイルを作成して、Webページとして表示してみましょう。

1.1 HTMLファイルの作成

エディタを起動し、さっそくHTMLを書いてみましょう。前章でもお伝えしましたが、この教材では、AWS Cloud9を使用します。

起動したら、左上の「File」をクリックして、その中の「New File」をクリックしましょう。

次は、下のHTMLコードを今開いた新規ファイルの中に、コピー&ペーストしてください。

  <head>
    <meta charset="utf-8">
  </head>
  <h1>Hello World!</h1>
  <h2>Let's start HTML and CSS!</h2>
  <ul>
    <li>bullet point1</li>
    <li>bullet point2</li>
    <li>bullet point3</li>
  </ul>

下の画像のようになりましたか?

コピー&ペーストができたら、下の画像のように、index.htmlというファイル名で保存してください。(保存するファイル名は、好きな名前でも構いません)

ここで注意すべきことが1つあります。ファイル名の拡張子は、必ず.htmlとしてください。 .htmlという拡張子があることで、index.htmlは、HTMLのコードが書かれたファイルであるとブラウザに認識されるからです。

無事に保存できた場合、下の画像のように、画面左にindex.htmlというファイルが置かれているはずです。

このHTMLファイルこそが、私たちが普段目にしているWebサイトのページを作っている実体のある物の1つです。

勘の鋭い方は、「CSSの場合も、同様に.cssという拡張子のファイルを作成して、Webページを作っていくのでは?」と疑問に思ったかもしれません。ズバリ正解です!

1.2 Webページの表示

作成したindex.htmlをブラウザで確認する

いま作成したばかりのindex.htmlをWebページとして確認してみましょう!

下の画像のように、「Tools」→「Preview」→「Preview File index.html」を選択してください。

このように、画面の右半分がWebページとしてプレビュー表示されていれば問題ありません。

右半分ではなくブラウザ全面で表示したい場合、上の画像の赤丸の場所をクリックすれば全面表示になります。

おめでとうございます! 皆さんは、Webプログラミングの世界で、小さな一歩を踏み出しました。

タグを確認する

Webページとしての表示とエディタでindex.htmlを開いたHTMLのコードを見比べて、以下の点を確認してみましょう。

  • <>に囲まれたh1h2などの文字は、Webページには表示されない。
  • <h1></h1><h2></h2>で挟まれた文字は、Webページでは大きく太字になっている。
  • <li></li>で囲まれた文は、Webページで箇条書きになっている。

HTMLコードの中で、<>で囲まれた<h1><li>などを、HTMLタグもしくはタグといいます。HTMLのコードを書くときはこのHTMLタグを使って、文字や画像などを役割を明記したうえで配置していきます。

1.3 HTMLタグの役割

先ほどコピー&ペーストしたHTMLのコードを見てみましょう。

  <head>
    <meta charset="utf-8">
  </head>
  <h1>Hello World!</h1>
  <h2>Let's start HTML and CSS!</h2>
  <ul>
    <li>bullet point1</li>
    <li>bullet point2</li>
    <li>bullet point3</li>
  </ul>

多くのHTMLタグは、<h1>〜</h1>という形で、開始タグ<h1>と終了タグ</h1>でコンテンツとなる文字などを囲んで使用します。

そして、HTMLタグで囲まれた部分には、タグの種類に応じて、Webページ上での役割が与えられて配置されます。

例えば、<h1>は、囲んだ文字を見出しとして配置するタグです。<h1>から<h6>まで存在し、数字が小さいほど大きい見出しになります。

<h1>で囲まれた「Hello World!」と<h2>で囲まれた「Let's start HTML and CSS!」をWebページで比較すると「Hello World!」の方が大きくなっているのが確認できます。

HTML要素

開始タグから終了タグまでの部分をHTML要素といいます。下のコードの場合は<h1>Hello World!</h1>の全ての部分をh1要素とよびます。

  <h1>Hello World!</h1>

リスト(箇条書き)タグ

<ul>〜</ul>は、箇条書きの範囲を明示するタグです。

さらに、そのul要素の中に、<li>〜</li>すなわちli要素を設けることによって、文頭に黒丸が配置され、文末で改行が施される箇条書きが作られます。

<ul>
    <li>bullet point1</li>
    <li>bullet point2</li>
    <li>bullet point3</li>
  </ul>

要素

また<head>~</head>にはHTML文書のメタデータなどを記述していきます。

ここでは<meta charset="utf-8">を使い、ブラウザで表示される文字コードutf-8と指定しています。ここで文字コードを指定することで、文字化けが起きないようにしています。


まとめ

1章ではHTMLファイルの作成と、HTMLタグの役割について学習しました。

次章以降では、Webページ制作には欠かすことのできない、HTMLコードを書き始める際のひな形や、よく使用されるタグについて学習していきます。

もし学習に行き詰まってしまったら...無料体験レッスンに
参加してみませんか?

SAMURAI ENGINEERは、
月額7000円からマンツーマン
レッスンができます。

現役エンジニアがあなたのプログラミング学習を徹底サポート。
未経験でも挫折せず、最短で目標達成するために必要な
手厚いサポート体制が揃っています。
少しでも興味をお持ちでしたら、
無料体験レッスンへお越しください。