こんにちは!
UPSTARTSのSベンです!
今回から実際にHTMLを書いていきたいと思います!
ひな形の作成
では前回用意してもらった、GoogleChromeとAtomを使い作業していきます。
Atomにソースを書いていきます。
HTMLのひな形は下記のような感じになります。
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ONE PIECE</title> </head> <body> 海賊王におれはなる!! </body> </html> |
各部分の説明をしていきます。
基本的に下記のように
開始タグ、終了タグの形で書いていきます。
開始タグ
<html>
終了タグ
</html>
文字コード
次に文字コードを設定していきます。
先ほどのひな形の下記部分に入力すると、文字コードを設定する事ができます。
今回は「UTF-8」としておきます。
1 |
<meta charset="UTF-8"> |
タイトル
次にこのページのタイトルを設定します。
タイトルはひな形の<titile>部分に書いていきます。
今回は「ONE PIECE」としておきます。
1 |
<title>ONE PIECE</title> |
body
bodyタグ内に文字などを書くと、画面に表示されます。
今回は下記のように書いています。
1 2 3 |
<body> 海賊王におれはなる!! </body> |
ブラウザで確認
ではファイルを保存して、ブラウザで確認してみましょう!
左上の「ファイル」→「保存」でファイルを保存できます。
場所は任意の場所で、ファイル名は「index.html」とします。
保存したファイルをドラッグ&ドロップで
Google Chromeに表示します。
すると先ほど入力した
「海賊王におれはなる!!」の文字が表示されたかと思います。
上のタブ部分にはタイトルで設定した
「ONE PIECE」が表示されているかと思います。
では今回は「HTMLのひな形」についてやっていきました。
次回からは「body内で使うタグ」についてやっていきたいと思います。
ではまた次回!