HTMLとは、Webページの文書の構造を表すマークアップ言語です。

難しいことはなく、文字などのテキストに何らかのマーク(印)をつけて、特別な意味のあるものにしようということです。

封筒や手紙などには、差出人の項目やタイトル、中身の文章などがありますが、HTMLで言うなら、これが文書の構造になります。
どういったデザインの封筒を使うとか、タイトルを装飾するとか、中身の文章のフォントなどは、基本的には別途CSSで記述するようにすると言ったルールになっています。

ファイルの作成の仕方

HTMLファイルを作成するには以下の方法があります。

  • メモ帳などのテキストエディタで内容を書き、.htmlという拡張子で保存する
  • PHPなどのプログラムでHTMLファイルを作成する
  • PHPなどのデータベースからHTMLの内容を取得し、ページ内で出力する

ファイルそのものを手作業で作成したり、ファイルをプログラムで作成したり
ページの一部のHTMLをデータベースから持ってきて表示するなどの方法があります。

ここでは、Windowsで最初からついているメモ帳で作成してみます。
本来であれば、無料のでいいので違うテキストエディタを使ったほうがいいです。

/uploads/picture/asset/152/memochou1.png

メモ帳の文字コードをutf-8にします。Windows7以降であれば、メモ帳でも文字コードを選択できます。

無い場合は、そのまま保存します。shift-jisになっているはずです。

HTMLの書き方を簡単に説明

HTMLでは、タグというものを使って、文字や文章をマークアップします。タグで囲んであげることによって、ここからここまでは、このページのタイトルとか
この部分はメニューを書くところなどとして、特別な意味づけを行います。

このマークアップをする理由としては、インターネットにアクセスしてきたブラウザに知らせるためであったり、検索エンジンに評価してもらうためだったりします。

タグは、半角英数字の<と>を利用します。

<これがタグです>この中にテキストを書きます。</これが終了タグです>

というふうに書きます。終了タグがいらない場合もあったりしますし、はさまれている間に書くテキストがない場合もあります。

タグの属性を書く場合、半角英数字のシングルクォーテーションかダブルクォーテーションで囲みます。

タグの種類を紹介

bodyタグで使う重要なタグを、5つほど書いてみます。

h1タグ

見出しタグとよばれるもので、そのページの見出しになります。日記であればタイトルに相当します。
他に、h2タグやh3タグなどがあります。h1は通常1つのページに2個より多く書くのは好ましくないというルールがあります。

imgタグ

imgタグ(イメージの略)によって画像を張ることが出来ます。

<img src="画像のアドレス">

imgタグによって画像を表示することが出来ます。画像のアドレスには絶対パスや相対パスがあります。

aタグ

aタグで、他のページにリンクを張ることができます。

<a href="飛び先アドレス" target="_blank">テキスト</a>

で、飛び先にリンクを張ることが出来ます。
target属性は、リンクの開き方の指定で、_blankなら、新しいウィンドウ、タブを開きます。
自分のサイト内であれば新しいウィンドウを開かないようにしたほうがいいです。

段落・改行タグ

pタグが段落、brタグが改行タグになります。
pは段落をつけます。brは単純な改行です。

リストタグ

liタグのことで、リスト形式で表示してくれます。

グローバルメニューには、リストタグを使用するのが正しいです。

番号順のリスト

<ol>
  <li></li>
</ol>

並び順に意味を持たないリスト

<ul>
  <li></li>
</ul>

実際に書いてみよう

test.htmlの内容として書いてみます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLを書いてみよう</title>
  </head>
  <body>
    <h1>プログラミング言語の種類</h1>
    <p>数あるプログラミング言語の中から有名な言語を紹介します。</p>
    <ul>
      <li><a href="https://edtech.jp/skills/ruby" target="_blank">Ruby</a></li>
      <li><a href="https://edtech.jp/skills/php" target="_blank">PHP</a></li>
      <li><a href="https://edtech.jp/skills/javascript" target="_blank">JavaScript</a></li>
      <li><a href="https://edtech.jp/skills/java" target="_blank">Java</a></li>
      <li><a href="https://edtech.jp/skills/c-lang" target="_blank">C言語</a></li>
    </ul>
  </body>
</html>

FirefoxやChromeなどのモダンなブラウザであれば、test.htmlファイルを貼り付けるとHTMLファイルとして認識して表示してくれるはずです。

ファイルを作成したときに文字コードを選択できなかった場合は

<meta charset="utf-8">

のところをshift-jisにします。ファイルを作成した際の文字コードと、ブラウザに表示してほしい文字コードの指定が異なっていると、文字化けの原因になります。

hrefやtargetなどの後で囲んでいる文字は、シングルクォーテーション「’」やダブルクォーテーション「”」が使えます。また、半角英数字で書きます。

タグの種類はたくさんありますが、重要なものだけ覚えあとは必要な時に調べれば良いでしょう。