山口県萩市に在るホームページ制作と動画・映像制作を行う会社の情報発信BLOGです。

自作ホームページ制作(HTML編・第1回)

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

HP-1

自作ホームページ制作

HTMLと言われるブラウザに表示するためのコーティングと言われるプログラミングを行ってきます。
かなり割愛させて頂くことがあります。基本的には、本Blogで1つのホームページが完成するところまで連載していきます。
このBlogでは、詳細なところ等は省かせて頂くこともあります。もし、興味があったり、勉強されたい方は、本Blogと他の教材を観覧されることをお勧めします。ちなみにホームページ制作を行う上で本を1冊購入され勉強するだけでは、完全に理解するのことは、かなり難しいので、様々な教材で勉強されることを推奨します。

HTML5を使ったコーディングの基本

前回では、テキストエディタ(ホームページ制作の準備)のご紹介をさせて頂きました。
では、実際に使ってみましょう。
今回は、CotEditorCotEditorと言うソフトウェアを使用していきます。
※インストール方法は、ご説明は致しませんのでご了承下さい。
早速、開いて見ると以下のような感じです。

CotEditor1

ここに、文字を打ち込んでいくのですが、HTML5等コーディングを行うときは、「doctype宣言」をしなければいけません。
doctype宣言とは、HTML編集時に利用する”タグ”とバージョン規制を行うものです。
そして、ここからここまでを「html」でコーティングしていきます。と「日本語」でを記入。

<!DOCTYPE html>
<html lang="ja">
</html>

つまり、一番最初に記入することは、「HTML5」と言う規格で「html」の編集を「日本語」で制作します。と言う意味。

次に、文字エンコードの選択です。
文字コードとは、コンピューター上で文字を表示させるための規格に準じたコードです。Unicodeを表現した「UTF-8」が一般的です。
下記でご紹介しますが、「head」内に記入します。

<head>
<meta charset="UTF-8">
</head>

とテキストエディタに記入してみます。
そして、保存から(任意の場所で結構です。)、「index.html」と形式をHTMLに変えて更度に開くと色が変わっていることがわかります。スペルミスやタグの記入ミスがあると色のが変化しません。

次に、「head」「body」について。
基本的に「head」内に記載するものはスタイルシート(CSS)と呼ばれる装飾を行うモノやScriptと呼ばれるモノを記載していきます。「head」内に記載したモノはブラウザ上では表示されません。
そして、「head」と言っていますが「head」もタグです。基本的にタグは囲んで初めて機能を使用できます。

CotEditor2

次に「body」内に記載するモノは、ブラウザ上に表示すモノです。
タイトルや、文章・画像は、この「body」内に記載していきます。「body」も「head」同様に囲みます。
そして、「body」は「head」の下に記入します。
ここまでを通して記入してみると

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>

となります。

ブラウザで確認する

では上記の「index.html」にテキストを記入してブラウザで確認してみましょう。
CotEditorを編集する場合は、

browser1

にようにしてCotEditorを開きます。
では、編集を行っていきます。
上記でも説明しましたが、ブラウザに表示させるには「body」〜「body」の中に記載していきます。
例として、

<body>
テストの文字です。色々試してみてください。
</body>

CotEditor3

となります。
そして、プラウザで見てみましょう。
ブラウザをSafariで表示した場合、

browser-Safari
Safari1

ブラウザーをGoogle chromeで表示した場合、

browser-Google
Google1

ホームページは、これを組み合わせていき、1つのページを制作していきます。
そこまで難しいものではないので、根気がある方や、興味がある方は制作されてみることをお勧めします。

画像を入れてみよう

では、今回の最後に上記の「index.html」の画像を入れてみましょう。
今は、単体のファイルですが、まずは、「フォルダ」を制作して画像用のフォルダも制作します。
今回は、フォルダ名は、「www」と。
画像用のフォルダを「img」とします。
そして、画像を用意して下さい。今回、画像の名前は「img.png」とし、「img」フォルダの中に入れます。(画像はなんでも構いません・今回の画像の大きさは、横幅が500pxのモノを使用。)
全てを「www」フォルダの中に入れます。

folder1

すると、

folder2

となります。
では、ブラウザで見れるようにhtmlコーティングを行います。
先ほどの「www」フォルダ内の「index.html」を開き〜内に”タグ”を記入していきます。
“タグ(タグリファレンス)”につては、次回ご説明をします。

<body>
<img src="img/img.png">
</body>

CotEditor4

と、記載してみてください。(コピー&貼り付けでも構いません。)
すると、

browser2

と、表示去るはずです。

このように「html」は、”タグ”と言われるコードを記入してブラウザに反映させていきます。
今回は、「doctype宣言」「html」「head」「body」のご説明をさせて頂きました。
次回も是非、ご覧下さい。
ご観覧ありがとうございました。

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

フォローお願いします

SNS