HTML #02 ひな形の作成

2017年7月12日 2017年9月12日

こんにちは！
UPSTARTSのSベンです！

今回から実際にHTMLを書いていきたいと思います！

ひな形の作成
ブラウザで確認

ひな形の作成

では前回用意してもらった、GoogleChromeとAtomを使い作業していきます。

Atomにソースを書いていきます。

HTMLのひな形は下記のような感じになります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ONE PIECE</title>
    </head>
    <body>
        海賊王におれはなる！！
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ONE PIECE</title>

</head>

<body>

海賊王におれはなる！！

</body>

</html>

各部分の説明をしていきます。

基本的に下記のように

開始タグ、終了タグの形で書いていきます。

開始タグ
<html>

終了タグ
</html>

文字コード

次に文字コードを設定していきます。

先ほどのひな形の下記部分に入力すると、文字コードを設定する事ができます。

今回は「UTF-8」としておきます。

<meta charset="UTF-8">

1	<meta charset="UTF-8">

タイトル

次にこのページのタイトルを設定します。

タイトルはひな形の<titile>部分に書いていきます。

今回は「ONE PIECE」としておきます。

<title>ONE PIECE</title>

1	<title>ONE PIECE</title>

body

bodyタグ内に文字などを書くと、画面に表示されます。

今回は下記のように書いています。

<body>
    海賊王におれはなる！！
</body>

<body>

海賊王におれはなる！！

</body>

ブラウザで確認

ではファイルを保存して、ブラウザで確認してみましょう！

左上の「ファイル」→「保存」でファイルを保存できます。

場所は任意の場所で、ファイル名は「index.html」とします。

保存したファイルをドラッグ＆ドロップで

Google Chromeに表示します。

すると先ほど入力した

「海賊王におれはなる！！」の文字が表示されたかと思います。

上のタブ部分にはタイトルで設定した

「ONE PIECE」が表示されているかと思います。

では今回は「HTMLのひな形」についてやっていきました。

次回からは「body内で使うタグ」についてやっていきたいと思います。

ではまた次回！