簡単なhtmlファイルを作成し、htmlファイルをブラウザで表示することでweb画面の仕組みを理解します。

web画面とは

Google chromeやIE、safariなどの ブラウザ が表示する画面のことです。ブラウザがhtmlの内容を解釈し、画面に表示します。

htmlとは

htmlはタグにより構成されています。ブラウザはタグの種類と意味を解釈し画面に表示します。

タグとは

タグはカッコ(<>)で記載します。カッコの中にはタグ名を記載します。タグは 開始タグ、終了タグ があり、開始タグはカッコ(<>)で、終了タグはスラッシュカッコ(</>)で記述します。
開始タグ、終了タグで囲った部分へ画面に表示したい内容を記述します。
以下は p というタグ名で画面に表示したい内容は ああああ となります。

<p>ああああ</p>

タグの構成は以下となります。

<開始タグ>画面に表示したい内容</終了タグ>

web画面の作成

web画面は簡単に作成できます。簡単なweb画面を作成してみましょう。

htmlの記述

メモ帳へ以下の内容を記述、もしくはコピペします。ファイル名は index.html とします。

・index.html

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    
    <body>
      <p>ああああ</p>
    </body>
    
</html>

htmlファイルの保存

デスクトップにindex.htmlファイルというファイル名で保存します。
保存するときはファイルの拡張子をtxtではなく html にすることに注意して下さい。
さらに、例は文字コードをutf8に指定しているのでファイルを保存する際に、utf8を指定し保存して下さい。
web画面を表示した際に文字化けを起こす可能性があります。

web画面の表示

デスクトップのindex.htmlをダブルクリックします。
ブラウザが起動し画面が表示されます。
index.htmlをダブルクリックすると、アプリケーションの選択画面が表示されることもあります。その場合は、ブラウザ(Google chromeやIE、safari)を選択して下さい。

最後に

今回はhtmlの概要と簡単なhtmlファイルを作成し、web画面が表示される仕組みを理解しました。
次回はhtmlの基礎である、タグの構成について説明します。

次回

タグの構成

▼ HTMLに関する記事の一覧をみる

HTML目次一覧

HTML – 目次