さて、HTMLを学ぶにあたって
「とりあえず実際にWebサイトを作ってみよう」
ということで早速制作に入ろうと思うのです。
サイトのイメージは・・・雑貨屋さん？
名前は・・・おふとんしてたらまたねてた？（ネーミングセンス・・・）
まずは下準備から
まずはWebサイト制作のためにサイトの情報を管理するためのファイルを用意します。
デスクトップに新規ファイルを、とりあえず名前は「website」。
どうやらWebサイトを作る上で関連する名前は「半角英数の小文字のみ」がいいとのこと。
次にHTMLを書き込む「テキストエディタ」を用意します。
今回使用するのは「Atom」。
というわけで２つを用意してみました。
次にパソコンでデフォルトになっている
「拡張子の非表示」を「拡張子を表示する」に変更します。
先程作ったファイル「website」を開き
次に上部の「表示」をクリックして現れたメニュー欄に
「ファイル名拡張子」という項目のチェックボックスにチェックを入れます。
これで下準備は終了です。
HTMLを書き込んでみる
AtomをつかってHTMLファイルを制作してみます。
まずはAtomを起動。
ここにHTMLを書き込んでいきます。
まずは基本的なTHML、サイトを表示する上で必須のタグ
<html>
<head>
</head>
<body>
</body>
</html>
これがWebサイトの基本構造らしいです。
「!doctype html」というのが気になり調べてみたら
「とりあえずいれておけばいい」とのこと。
お、おぅ・・・
ファイル書いたHTMLがどのバージョンのHTMLに準拠して作成されているかを示すもので、必ず１行目に記載します。
このDOCTYPE宣言、
HTMLのバージョンが４のときは表記が難しかったようですが
HTMLのバージョンが５になってから!doctypeだけでよくなったようです。
<html>
ここからHTML（タグ）を使って行くよ、っていう宣言。
<head>
メタデータ、データについてのデータ。
Webサイトの文字コード方式を設定したり、タイトルを設定したりする場所。
<body>
Webサイトを構成する場所。
こんな感じかな？
<head>タグの中を記入してみる
まずは<head></head>内、
文字の指定をWebサイトの名称をいれてみます。
<meta charset=”UTF-8″>
<title>♪ようこそ♪おふとんしてたらまたねてたへ</title>
</head>
使う人やファイルによって文字コードが違う場合があります。
そのときはAtomのページ右下の文字コードを選択することによって
そのファイルの文字コード方式を変更することもできます。
書き込んだHTMLを保存してみる
今回Webサイトを作るにあたって準備したHTMLがこちら。
<html>
<head>
<meta charset=”UTF-8″>
<title>♪ようこそ♪おふとんしてたらまたねてたへ</title>
</head>
<body>
</body>
</html>
こちらを保存してみます。
まずは「ファイル」から「別名で保存」を選択。
次に保存する場所をデスクトップに作ったフォルダ「website」にして
「ファイル名」を「index.html」に変更し保存します。
ブラウザのタブにサイト名が載った真っ白なWebサイトが出来上がっていますね。
今回のまとめ
というわけで今回はWebサイトを作る下準備を終えたところで終了です。
次回は真っ白なWebサイトをそれっぽいサイトにしていくために
<body>タグ内を記載していこうと思います。
