はじめてのWebデザイン『HTML・CSS』入門

2-1. HTMLでHello,World!を表示しよう

実際にHTMLを記述してブラウザ上で表示してみましょう。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/08最終更新日:2019/05/08

スポンサーリンク

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!」
とテキストが表示されます。

Hello, World! の表示
ブラウザで開いたindex.html

うまく表示できましたか?続いてよく使うHTMLをそれぞれ紹介していきます。

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者