プログラミング

ゼロから始めるプログラミング生活 #1 HTMLでWebサイトを作る準備編

さて、HTMLを学ぶにあたって

「とりあえず実際にWebサイトを作ってみよう」

ということで早速制作に入ろうと思うのです。

サイトのイメージは・・・雑貨屋さん?

名前は・・・おふとんしてたらまたねてた?(ネーミングセンス・・・)

まずは下準備から

まずはWebサイト制作のためにサイトの情報を管理するためのファイルを用意します。

デスクトップに新規ファイルを、とりあえず名前は「website」。

どうやらWebサイトを作る上で関連する名前は「半角英数の小文字のみ」がいいとのこと。

次にHTMLを書き込む「テキストエディタ」を用意します。

今回使用するのは「Atom」。

Atomダウンロードへ

というわけで2つを用意してみました。

 

 

次にパソコンでデフォルトになっている

「拡張子の非表示」を「拡張子を表示する」に変更します。

先程作ったファイル「website」を開き

次に上部の「表示」をクリックして現れたメニュー欄に

「ファイル名拡張子」という項目のチェックボックスにチェックを入れます。

 

これで下準備は終了です。

HTMLを書き込んでみる

AtomをつかってHTMLファイルを制作してみます。

まずはAtomを起動。

 

ここにHTMLを書き込んでいきます。

まずは基本的なTHML、サイトを表示する上で必須のタグ

<!doctype html>
<html>
<head>

</head>
<body>

</body>
</html>

これがWebサイトの基本構造らしいです。

「!doctype html」というのが気になり調べてみたら

「とりあえずいれておけばいい」とのこと。

お、おぅ・・・

「!doctype html」はDOCTYPE宣言といい
ファイル書いたHTMLがどのバージョンのHTMLに準拠して作成されているかを示すもので、必ず1行目に記載します。
このDOCTYPE宣言、
HTMLのバージョンが4のときは表記が難しかったようですが
HTMLのバージョンが5になってから!doctypeだけでよくなったようです。

<html>

ここからHTML(タグ)を使って行くよ、っていう宣言。

 

<head>

メタデータ、データについてのデータ。

Webサイトの文字コード方式を設定したり、タイトルを設定したりする場所。

 

<body>

Webサイトを構成する場所。

 

こんな感じかな?

<head>タグの中を記入してみる

まずは<head></head>内、

文字の指定をWebサイトの名称をいれてみます。

<head>
<meta charset=”UTF-8″>
<title>♪ようこそ♪おふとんしてたらまたねてたへ</title>
</head>

<meta charset=”○○”>
HTMLファイルの文字コード方式を決めるタグ。
UTF-8とは、世界的にも最もポピュラーな文字コードらしいです。
Webサイトが文字化けした場合ここを疑うみたいですね。

Atomの文字コード方式はデフォルトでUTF-8となっているはずですが
使う人やファイルによって文字コードが違う場合があります。
そのときはAtomのページ右下の文字コードを選択することによって
そのファイルの文字コード方式を変更することもできます。
<title>
 
HTML自身の「タイトル」を示します。
 
ブラウザのタブに表示されるほか、ブックマークや履歴のタイトルなどにも使われます。

書き込んだHTMLを保存してみる

今回Webサイトを作るにあたって準備したHTMLがこちら。

<!doctype html>
<html>
<head>

<meta charset=”UTF-8″>
<title>♪ようこそ♪おふとんしてたらまたねてたへ</title>

</head>
<body>

</body>
</html>

こちらを保存してみます。

まずは「ファイル」から「別名で保存」を選択。

 

次に保存する場所をデスクトップに作ったフォルダ「website」にして

「ファイル名」を「index.html」に変更し保存します。

 

Webサイト形式で保存されました。 開いてみます。
 

ブラウザのタブにサイト名が載った真っ白なWebサイトが出来上がっていますね。

今回のまとめ

というわけで今回はWebサイトを作る下準備を終えたところで終了です。

次回は真っ白なWebサイトをそれっぽいサイトにしていくために

<body>タグ内を記載していこうと思います。

 

ゼロから始めるプログラミング生活 #2 HTMLを使ってWebサイトをつくってみよう! https://mataneteta.com/programmingzero1/ 前回Webサイトを作る準備が終わりました。 ...