1.HTMLファイルを作成する
「1-1. Webサイトの仕組みとHTML・CSSについて」で説明したように、HTMLとはHyper Text Markup Languageというマークアップ言語のことです。今回は実際のHTMLのタグを記述して、ブラウザでどのように表示されるのか確認しましょう。
これから作成するにあたって、HTMLは「HTML5」で記述していきます。「HTML5」とはHTMLのバージョンです。
まずはHTMLを記述するファイルを用意します。
Visual Studio Code（以下、VS Code）を立ち上げて、「Command（WindowsはCtrl） + N」で新しいファイルを作成します。
「Command（WindowsはCtrl） + S」で名前を付けて保存します。
作業用のフォルダ「html-lesson」を作成します。
作成したフォルダ内に「index.html」という名前で保存します。
新しく作ったファイルにまずは基本の雛形を記述していきます。
2.<html>・<head>・<body>タグについて
<html></html>
htmlタグはこの文書がhtmlであると示すタグです。
このタグで囲まれた中に文章構造を記述していきます。
<head></head>
headタグはこの文章のヘッダ情報を記述するタグです。
ヘッダ情報にはこの文章のタイトルや説明文を記述したり、文字コードを指定したり、外部CSSを読み込んだりします。
検索エンジンで検索したときに表示されるテキストはヘッダ情報に記載されている情報です。
<body></body>
bodyタグはこの文章の文書構造を記述するタグです。
このタグの中にブラウザ上に表示したい文書を記述していきましょう。
3.HTMLの雛形をindex.htmlに記述する
HTMLの基本の雛形は下記の記述になります。
<html>
<head>
</head>
<body>
</body>
</html>
上記のHTMLをindex.htmlに記述して、保存しましょう。
4.HTMLでHello,World!を表示する
続いてページ内に文字を表示してみましょう。
<body>〜</body>の中にテキストを書いていきます。
<p>Hello, World!</p> と記載して保存してみましょう。
<html>
<head>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
保存ができたら、Google Chromeを立ち上げ、index.htmlをドラッグ・アンド・ドロップして開きます。ファイルが開けたら、ブラウザに
「Hello, World!」
とテキストが表示されます。
うまく表示できましたか？続いてよく使うHTMLをそれぞれ紹介していきます。
