デザイン基礎

HTMLの構造

これだけは押さえたい!HTMLの基礎

HTML(HyperText Markup Language)は、ウェブページを作成するために開発された言語です。リンクを埋め込むことのできる高機能な言語です。

マークアップ

マークアップというのは、文書の各部分が、どのような役割を持っているのかを示すといことです。<p>や<h1>などの書き方で文章にマークをつけていきます。その部分がどんな要素なのかを明確にすることで、GOOGLEなどがその文書の構造を理解できるようになりSEO対策にも役立ちますし、きれいなデザインを作るときに必須になります。

HTMLファイルを作る

お手持ちのテキストエディタ(ATOMやSublime Text、Eclipseなど)でファイルを作ってみましょう。

sample.htmlという名前で以下のようなコードを書き保存しましょう。保存場所はデスクトップにしてください。

 

<!doctype html>はこのファイルがHTMLであることを表しています。<html lang=”ja”>はHTMLの始まりの合図です。lang=”ja”で日本語の書かれるファイルであることを表します。<html>タグには必ず締めのタグを用意します。一番下の行に</html>が確認できますね。

<head></head>の間にはページのタイトルや文字コードが「UTF-8」であることを書きます。「UTF-8」は日本語などに対応した文字コードでWEBアプリの場合はこれを使います。作成できたらブラウザを通してみてみましょう。デスクトップに作ったファイルをクリックしてください。自動的にブラウザが立ち上がります。

ファイルがお手持ちのブラウザのアイコンになっていない場合は、右クリック→プログラムから開く、で好きなブラウザを選択してください。

上記のように表示されましたか?

ブラウザによって若干の表示のずれがあります。<title>部分はページを開いた上のタブの部分に表示されています。<body>タグになかにはいよいよページの中身を書いていきます。今回はシンプルに見出しと段落を作りました。<h1></h1>はページの中で最も協調したい見出しになります。デフォルトでフォントサイズも大きく表示されます。<h1>から<h6>まで重要度によって使い分けることができます。<p></p>は段落を表しています。

リストとテーブル

リスト

リストの作り方を見ていきましょう。リストは<ul>と<li>タグで作ります。

先ほどの<p>タグの下にでも上記コードを追加して保存しましょう。ブラウザでのぞくと以下のようになります。

自動的にリストデザインになりました。<ul>はリストの始まりの合図です。個々の内容は<li>タグの中に書いていきます。

テーブル

次に テーブルの作り方をみていきましょう。テーブルは項目を横に連ねることができるのでリストよりも複雑な構成を作ることができます。

 

<table>の中に中身を作っていきます。border=”1″は枠線あり、widthは左右の幅が300pxであることを表しています。<tr>は一行分(table row)を表しています。<th>は項目名です。実際の内容は<td>タグを使って表します。それでは表示を確認してみましょう。リストの下にコードを追加して保存しましょう。ブラウザで確認すると以下のようになります。


以上がHTMLの基本になります。PHPの学習を始めるなら以上の内容が分かっていれば十分です。WEBデザインに興味があるようでしたらHTMLに合わせてCSSを学んでみてください。CSSは今書いたHTMLに色や形などのデザインを加えていく言語です。一方、PHPはホームページを訪れた方と双方向にやり取りしたりできる非常に面白いプログラミング言語です。HTMLの下準部もできたことですし、さっそくPHPの学習に進んでいきましょう。