HTMLを書く 1 (body編)

プログラミング入門

HTMLをおぼえると

  • WEBページの構造が理解できるようになる
  • ブログ・ホームページをカスタマイズできるようになる(CSSの知識も必要)

HTMLとは

正式な名前は 「Hyper Text Markup Language」 でWEBページのための言語です。
WEBページはHTMLで文章と構造を記述し、それをCSSと呼ばれるものによって装飾します。

始めるにはどうしたらいい？

メモ帳などのテキストエディタか、HTML編集が可能なブログを使います。
また、基礎を学ぶのと記述時間の短縮のためにMarkdown記法から始めるのもよいと思います。
図書館で本を借りて勉強するのもいいですが情報が古いことも多いので、インターネット上で良いサイトを見つけるか、不安であれば新しめの書籍を買うのがいいと思います。

いい情報が見つからなかった人へ

知識の整理を含めて、html5に合わせて一応解説しておきます。
今回は一番のメインとなるbody編です。
まず下にサンプルのコードを書いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 今回は省略 -->
</head>

<body>
<header>
  <h1>タイトル</h1>
</header>
<article>
  <h2>見出し</h2>
  <p>メイン部分<br>
     改行します。<strong>強調します</strong>
  </p>
  <div id='ID' class='クラス'>
  <a href='リンクのアドレス'>リンク</a>
  <img src='画像のアドレス' alt='表示されなかった時用の文字'>
  </div>
</article>
<aside>
  <h3>サイドバー</h3>
</aside>
<footer>
  <h4>フッター</h4>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
</footer>
</body>

</html>

< >はタグと呼ばれ、文章の構造を意味します。基本的に< >と</ >で内容を囲みます。
HTMLは見た目にはほとんど見えない<head>部分と実際に表示される<body>部分に大きく分けることができます。 今回は、<body> 以降の部分に注目してください。

上部に表示される<header>、横に表示する<sidebar>、メインとなる<article>、下に表示する<footer>という一般的な構造のコードです。

その中で使われる代表的なタグについて解説すると

  • <h1>,<h2>：見出しに使います。h1からh6まであり、数字が小さいほど重要な内容ということを意味しています。
  • <p>：文章を意味します。
    • 改行するには、改行したい場所に<br>をいれます。</br>で囲む必要は必要ありません
    • 強調したい部分は<strong>を使います。
  • <div>：ひとつの固まりを意味します。id・classと合わせて装飾するときに使います。
  • <a>：リンクを意味します。リンクしたい文字を囲み、href=" "にはリンクしたいアドレスを入力します。(アドレスは"で囲む)
  • <img>：画像を意味します。src=" "には画像のアドレスを入れます。alt=" "は一見あまり意味がなさそうですが、他にも役割があるので、書いておいたほうがいいです。
  • <ul>：リストを意味します。リストの各項目は<li>で囲みます。

上のサンプルコードをメモ帳などのテキストエディタに貼り付けて保存すれば、ブラウザで見ることができます。
まだこの時点では装飾はしていないので、例えば<aside>部分も横に表示されるわけではありません。
装飾にはCSSと呼ばれる装飾用の言語の知識も必要です。

おすすめの勉強方法

まずはMarkdown記法を覚えるとHTMLを覚えるのに便利なだけでなく、短時間でHTMLが書けるようにもなります。 また最近の大手のブログでは、「見たまま編集」のようなモ名ードとHTMLモードの両方を切り替えて使えることが多いので、はじめは「見たままモード」で書いたあとに「HTMLモード」に切り替えて、どのようにタグが使われているか見てみるといいと思います。