HTML #02 ひな形の作成

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

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

 

 

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

 

 

 

ひな形の作成

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

 

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

 

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

 

 

 

 

 

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

 

 

基本的に下記のように

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

 

 

開始タグ
<html>

終了タグ
</html>

 

 

 

文字コード

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

 

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

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

 

 

 

 

タイトル

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

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

 

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

 

 

 

body

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

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

 

 

ブラウザで確認

 

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

 

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

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

 

 

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

Google Chromeに表示します。

 

 

すると先ほど入力した

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

 

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

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

 

 

 

 

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

 

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

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る