HTMLでホームページの作り方

HTML・CSS

ホームページを作るには、HTML「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」という、ウェブページを記述するための「言語」が必要になります。

言語はW3C(World Wide Web Consortium)という団体によって規格が決められていて、更に、バージョンによって細かく違っており、後継規格であるXHTMLとCSSで構築することによって、表示速度が速く、検索エンジン好みのサイトになるといわれています。
最近はHTML 5に関する話題もあって、付いていくのも大変ですが、まぁどんどん改良(?)されているわけですね。

…というと、とても難しそうですが、基本はとっても簡単です。

とにかく何か、作ってみましょう!

この時点では、インターネットに接続している必要もありません。
パソコンの、メモ帳と、ブラウザを使います。

まず、テキストエディタを開きます。

今回は手軽なwindows付属の「メモ帳」を使って作ってみましょう。

startmemo
メモ帳を開くには、スタートボタン→すべてのプログラム→アクセサリ→メモ帳 をクリック!

無料で使いやすいソフトもたくさん配布されています。

ホームページを作るために揃えるべき必要なものとは?
ホームページを作るために、必要なものをそろえていきましょう! パソコン ホームページを作るための「エディタ」 公開するための場所「レンタルw...

HTMLを書いてみましょう。

HTMLのタグは、必ず半角英数で書かないと、きちんと動きません。

HTML文書を大きく分けると 「ヘッダ」と 「ボディ(本体)」の2つ から成り立っています。
更にものすごく大雑把に言うと、「ヘッダ」は文書の概要的な情報を、「ボディ(本体)」には、実際にページに表示される内容を書きます。

初めに、HTMLは「ここから始まって」「ここまでで終わり」というように、始点と終点が対になっている「タグ」を覚えましょう。(対になっていないタグもありますが、これは追々ご説明します)

HTMLの開始には  <html>
HTMLの 終わりは  </html> という風に、2個セットになります。

 

まずは、「このファイルがHTMLですよ」ということを宣言します。

<html>
</html>

次に、HTMLタグの間に「それぞれのパーツを入れる箱」を作ります。

ヘッド(head)と、ボディ(body)のセットです。

<html>
 
<head>
</head>
 
<body>
</body>
 
</html>

ここまで書いたら、まず「保存」しましょう!

マイドキュメントに「web」など、分かりやすい名前のフォルダを作成します。

作った「web」フォルダの中に半角英数で「index.html」と名前を付けて保存してください。

※なぜ「index.html」なのかというと、このファイル名はちょっと特殊で、フォルダを開いた時に、ブラウザが一番初めに読もうとするファイル名なんです。通常、これが「ホームページ(スタートページ)」になります。

「index.html」がないと、フォルダの中身が丸見えになってしまうこともあるので、フォルダには「index.html」を必ず作っておきましょう!

せっかく書いたものが消えてしまうと心が折れてしまいます。
こまめに保存するのも大切なことですよ!

 

ヘッダーに欠かせない情報「タイトル」を追加します。

<html>
 
<head>
<title>ホームページのタイトル</title>
</head>
 
<body>
</body>
 
</html>

title

ここで上書き保存して、index.htmlをダブルクリックして、ブラウザで見てみると…真っ白ですね(笑)
でも、よくみると…タイトル部分に文字が入ってるのが分かりますか??

次にボディの枠の間に、文字を書いてみます。

<html>
 
<head>
<title>ホームページのタイトル</title>
</head>
 
<body>
この文章が見えたら成功です。おめでとう!
</body>
 
</html>

書いたら、忘れずに「上書き保存」しましょう!

ちなみに、大抵キーボードの「Ctrlキー」を押しながら「S」キーを押すと「上書き保存」できます。

保存したら、index.htmlをダブルクリックして、ブラウザで確認してみましょう。

body内に書いた文字が、そっけなく表示されていれば、とりあえず成功です!

次回は、文字を飾ってみましょう♪

タイトルとURLをコピーしました