1. >>これが!ホームページの作り方Da! Home
  2. > ホームページの作り方 3

ホームページの作り方 3

実際に”コーディング”してみよう!

HTMLの”コーディング”と呼ばれる作業についてお話していきましょう。

HTMLを”書く”という意味で、WEB業界では「コーディング」という言葉があります。
(これは他のプログラミング言語の場合でも一緒ですね。)

このページでは、HTMLの基礎と、「コーディング」をすることについて説明していきます。

HTMLページの”作り方”基礎

まずは、先に見てもらった方が早いと思います。
下記の英数字の羅列が、HTMLの基本的な形となります。

 HTML見本

このHTMLで出来た英数字の羅列の事を「ソース」といいます。
このソース書いたファイルを、「index.html」という名前で保存してみましょう。
すると、このようになります。

HTML見本 プレビュー時

・・と、この様になります。
このとき、画面の左上をみると、”ビールを止めて健康に”などと書かれているはずです。

上記のソースを見てみると、気が付くことがありませんか?
・・例えば、<p>で始まった文章が、</p>で終わってるなどの特徴がありませんか?
また、<p>〜</p>は、<body>から、</body>の間に挟まれていませんか?

HTMLの基本は、この<p>や<body>という、一つ一つの単語(これを”タグ”といいます。)を、必要に応じて囲い込むことで、
成り立っているのが大きな特徴です。

それでは、「タグは挟み込むものだ」ということを踏まえ、上記のソースについて解説していきたいと思います。

<html>〜<⁄html>
このページはHTMLページである、ということを宣言している部分です。
これのタグの間に内容を書いていきます。
<head>〜</head>
”ヘッダー”と呼ばれる、HTMLページの情報が記されている部分です。
ページタイトルから、ページの説明文などを、この中で記述していきます。
<title>〜</title>
この中にページタイトルを書きます。
この中では、ひらがな・カタカナなどを書くことも出来ますが、HTMLタグは書けません。
<head>〜</head>内に書きます。
<body>〜</body>
”ボディタグ”と呼ばれるもので、
このタグの間に、ページの内容を書いていきます。

この、上記4種類のタグが、HTMLファイルにおける、必要最低限の”骨格”となります。

次は、<body>〜</body>内にある2種類のタグについて、解説します。

<p>〜</p>
このタグは「段落」を示すタグです。
この中にある文章は、ひとくくりの文章として扱われます。
<p>を複数使用することによって、見た目は改行と同じような働きをしますが、
改行には<br />タグがあるので、そちらを使いましょう。
<br />
改行に使用するタグです。
<p>を連続して使用すると、文章の上下に余白が空きますが、
このタグを使用した場合は余白がありません。

・・なんか飾りっ気が足りないですね。
ちょっと文字などを飾り付けてみましょうか。

その方法は次のページにて。

pagetop

  • 当サイトのコンテンツ一覧です。
  • ホームページの作り方 1
  • ホームページの作り方 2
  • ホームページの作り方 3
  • ホームページの作り方 4
  • ホームページの作り方 5