HTML

HTMLタグ解説

<html></html> -HTML-

基本的なHTMLの構造


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  <title>タイトル</title>
</head>
<body>
本文
…………
</body>
</html>

はじめのうちは「おまじない」としてコピペしてもらっても構いません。

!DOCTYPE -文書型宣言-

Document Type Definition (DTD)

HTMLの文書構造の仕様とバージョンを定義する。

この内容によって使用できるタグや、
ブラウザ毎の細かなデザインが変化する。

主なDOCTYPE宣言 HTML4.1

1999年策定。

Transitional

記述の仕様が柔軟なタイプ。主にこちらが使われる。

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

strict

厳密で正確な記述を要求する。使えるタグの制限がとても厳しい。

 
<!!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

主なDOCTYPE宣言 XHTML

HTMLをXMLの文法で定義しなおしたマークアップ言語


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5.0

2010年策定予定。

以下の記述で最新の仕様を参照するようになる予定。


<!DOCTYPE html>

-コメント-

「」で囲まれた文章は表示されない。

自分用のメモや開発者内での説明に利用する。


<!-- ここは見えない -->


<!-- 
改行しても大丈夫。

「きみに」「は」「みえない」 
「ここで」「は」「みえない」 

 -->

<head></head> -ヘッダ-

タイトルや製作者、文字コード、スタイルシートなどの
WEBサイトに関する情報・本文に
表示されない情報を記述する部分

必須タグ。HTML文書に１つのみ記述。

headタグ内部には以下のようなタグを記述できる。

meta
title
style
link
script

head要素内の記述例


<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
  <title>飛田のHTML</title>
  <meta name="generator" content="HHG - Hi0aHtmlGenerator" />
  <meta name="version" content="2.0" />
  <meta name="presdate" content="20090707" />
  <meta name="author" content="hida" />
  <meta name="company" content="hi0a.com" />
  <link rel="shortcut icon" href="/img/favicon.ico" />
  <link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />
  <style type="text/css" media="all">
    a{
      color:#ff0000;
    }
  </style>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    function message(msg){
      alert(msg);
    }
  </script>
</head>

<meta /> -メタ情報-

製作者、文字コードなどのWEBサイトに関する情報を記述する部分

特に文字コードの指定は必須。

Shift_JIS宣言


  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

UTF-8宣言


  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title> -タイトル-

文書の題名。ウェブブラウザの最上部に表示される。

必須タグ。HTML文書に１つのみ記述文字コード指定の後ろに記述する

titleタグとブラウザのタイトルバー

<body></body> -本文-

必須タグ。HTML文書に１つのみ記述。

閲覧者に見せる情報は全てbody領域内に記述してください。

h1, h2, h3, h4, h5, h6 -見出し-

文章内の小題を記述し、需要度を設定する

重要度の高い見出しタグほど文字が大きくなる

 
<h1>文書のタイトル</h1>
<h2>章のタイトル</h2>
<h3>節のタイトル</h3>
<h4>項のタイトル</h4>

※数字が大きくなるほど文字が小さり、重要度も下がる。

<p> -段落-

 
<p>こんにちわ。</p>
<p>いい天気ですね。</p>

<br /> -改行-

文章を改行する。

長すぎる文章を区切りのよい箇所で区切り、
読みやすくする。

brのような単独で意味が簡潔するタグは閉じタグがいらない。

XHTML宣言の場合は<br />のように記述します。


<p>このように長すぎる文章は<br />途中で改行して読みやすくすることも。</p>

連続する改行は禁止

※縦の空白を表現するのに
このような改行タグを
連続して書く方法は正しくありません。

悪い例

 
↓をみて<br />
<br />
<br />
<br />
<br />
犯人はヤス

<em> -強調-

<strong> -重要である-

固有名詞など文章中で意味合いを強調したい語句に指定する。

 
ネルフは<p>汎用人型戦闘兵器<em>エヴァンゲリオン<em>の製造に成功した。</p>

a -リンク-

属性にhref="～"をつけることでそのURLに移動させるリンクをつくる

「href」は「Hypertext REFerence」の略。

HTMLの真骨頂！

 
  <p>「tsudaるってどういう意味ですか？ (^q^)」</p>
  <p>「<a href="http://google.co.jp/">ぐぐれ</a>」</p>

「tsudaるってどういう意味ですか？ (^q^)」

「ぐぐれ」

さまざまなリンク指定


  現在のディレクトリ ( http://example.com/tohhou/reimu.html )
  <p><a href="http://google.co.jp/">絶対パス</a></p>
  <p><a href="marisa.html">相対パス</a></p>
  <p><a href="spell_card/musoufuin.html">相対パス(下のディレクトリへ)</a></p>
  <p><a href="../">相対パス(上のディレクトリへ)</a></p>

<img /> -画像-

画像を文書に貼り付ける

.png

 
<img src="/img/a/self.png" alt="画像の説明文" />

WEBサイトで使える画像形式は「gif」「jpg」「png」の3種類。

→画像形式についての詳しい説明

<ul> -順序なしリスト-

要素間に順序を持たない箇条書きを表す

自動で「・」のような区切り文字が付きます。

少年ジャンプ
少年ガンガン
少年アワーズ

 
<ul>
  <li>少年ジャンプ</li>
  <li>少年ガンガン</li>
  <li>少年アワーズ</li>
</ul>

<ol> -順序付リスト-

自動で「1,2,…」のような区切り数字が付きます。

序論
実験
考察
結論

 
<ol>
  <li>序論</li>
  <li>実験</li>
  <li>考察</li>
  <li>結論</li>
</ol>

<dl> -定義リスト-

dtの説明をddで定義・解説します。

2ちゃんねる: 電子掲示板の集合体
google: 検索エンジン

 
<dl>
  <dt>2ちゃんねる</dt><dd>電子掲示板の集合体</dd>
  <dt>google</dt><dd>検索エンジン</dd>
</dl>

<div></div> -汎用的なブロック要素-

タグ自体は文章的な意味をもたない。

属性やスタイルシートで機能を付け加えることができる

ブロック要素の前後は自動的に改行される

<span></span> -汎用的なインライン要素-

タグ自体は文章的な意味をもたない。

属性やスタイルシートで機能を付け加えることができる

インライン要素の前後はdivのように自動的に改行されない

 
<span style="color:#ff0000;">真っ赤っか！</span>

<table> -テーブル-

th, tr, td, tbody, thead -テーブル用タグ-

excelのような表をつくることができる

※横並びにするのが簡単なため、
古いサイトではレイアウトやデザインに使われるが
本来の用途ではない。

※横並びレイアウトなどをしたいときは、
divタグとスタイルシート(CSS)の組み合わせで
デザインしましょう。

table関連タグの解説

table: 表全体をあらわす
tr: 表でいう行(縦の分割)
td: 表でいう列(横の分割)
thead: 表でいう列名
th: 表でいう列名用のtdタグ
tbody: 表でいう実際の情報・本文の領域

table例

 
<table>
  <thead>
    <tr>
      <th>No</th>
      <th>作品名</th>
      <th>ヒロイン</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>空の境界</td>
      <td>両儀式</td>
    </tr>
  </tbody>
</table>

No	作品名	ヒロイン
1	空の境界	両儀式
2	月姫	アルクェイド

<form> -フォーム-

ユーザーが入力したデータをサーバへ渡す機能に用いる。
情報を受け取るにはCGIなどの環境が必要。

最近ではCGIを使えないサーバでも
JavaScript用の入力フォームとして活躍している。

 
<form action="****.cgi" method="post">
  <input type="text" name="" value="初期値" />
  <input type="radio" name="" value="" />
  <input type="radio" name="" value="" />
  <input type="checkbox" name="" value="" />
  <input type="checkbox" name="" value="" />
  <input type="password" name="" value="" />
  <input type="hidden" name="" value="" />
  <input type="submit" name="" value="" />
  <input type="button" name="" value="" />
  <textarea>    </textarea>
</form>

type="radio" ラジオボタン

択一選択式

職業は？：

戦士武闘家僧侶魔法使い

type="checkbox" チェックボックス

複数選択式

今週の漫画でおもしろかった作品は？：

ジョジョの奇妙な冒険ドラゴンボールるろうに剣心幽遊白書

type="password" パスワード

入力した文字が見えない

type="hidden" 隠しフィールド

あらかじめ固定で与えたい情報を入れておく

閲覧者はソースを見ない限り内容をみることはできない

type="file" ファイルを添付

自分のパソコンのファイルをサーバにアップロードするときにつかう

type="button" ボタン

ただのボタンが表示される。

HTMLだけではフォームとしての効果はない。

JavaScriptでイベントのスイッチに使う。

type="submit" 実行ボタン

実行ボタンが表示される。

入力した情報をサーバに渡す

<select> プルダウンメニュー

選択すると、下に選択候補が表示される

<textarea> テキストエリア

複数行に渡る文章の受け渡しに利用

<style> -スタイル-

タグの内側にスタイルシートを記述できる。

色や余白などデザインの変更に使用する。

※古いブラウザでは対応しておらず、
コードがそのまま表示されてしまうのでコメントタグで囲む。


<style type="text/css"><!--
a{
  color:#ff0000; //文字色を指定
}
p{
  font-size:14px; //文字サイズを指定
}
//--></style>

<link /> -リンク-

関連する他の文書を定義する。

目次やヘルプページなどを指定することで、
検索エンジンの参考に使われる。


<link rel="index" href="./index.htm">
<link rel="contents" href="./contents.htm">
<link rel="help" href="./help.htm">
<link rel="search" href="./search.htm">
<link rel="prev" href="./001.htm">
<link rel="next" href="./003.htm">

外部スタイルシートを参照する。


<link rel="stylesheet" type="text/css" href="/css/style.css" charset="utf-8" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/print.css" charset="utf-8" media="print" />

<script> -スクリプト-

タグの内側にJavaScriptを記述できる

※古いブラウザでは対応しておらず、
コードがそのまま表示されてしまうのでコメントタグで囲む。


<script type="text/javascript"><!--
function test(){
  alert('わんわん');
}
//--></style>

<object> -オブジェクト-

FLASHなどを表示することができる。

※古いブラウザではobjectタグに対応していないので、内部に古いタグのembedタグを記述する。


<object classid="clsid: ..." codebase="http://..." type="application/x-shockwave-flash" width="200" height="200">
  <param name="movie" value="test.swf" />
  <param name="loop" value="false" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="test.swf" loop="false" quality="high"
     type="application/x-shockwave-flash" width="200" height="200" />
</object>

<iframe> -内部フレーム-

HTML内に別のHTMLを表示する領域をつくる


<iframe src="other.htm"></iframe>

古いタグ (非推奨)

非推奨タグに指定されているタグを紹介します。

デザインの部分はスタイルシートが受け持つことになり、
デザイン用のタグがいくつか廃止される予定です。

※これからのHTMLでは使わないようにしましょう。

廃止(あるいは解釈の変更)されるHTMLタグの例

<font> -フォントや色、文字サイズ指定-
<s> -打ち消し線-
<u> -下付き線-
<big> -文字を大きく-
<small> -文字を小さく-
<center> -左右中央に-
<marquee> -流れる文字-
<blink> -点滅する文字-

<frameset><frame> -フレーム-

単体ページから親のページを捜しにくい、
などの理由で一切廃止されます。

divタグでのレイアウト

タグ以外にデザイン用の属性も非推奨にされています。

スタイルシートを使わない古いHTMLでは以下のように文字組みを行っています。

 
<div align="center">中央寄せ</div>
<div align="right">右寄せ</div>

以上のように主要なタグも多く廃止されます。

しかし、
携帯市場に限ってはブラウザの対応が遅れているため、
まだまだ古いタグを使うこともある思います。

新しいタグ

HTML5では新しいタグが追加されます。

代表的なHTML5タグ。

<canvas> -キャンバス-

<video> -ビデオ-

<audio> -オーディオ-

前時代的な小技メモ

右クリック禁止

ユーザービリティが下がるので、
できるだけ使わないようにしよう。

<body oncontextmenu="return false">

文字列選択禁止

<body onselectstart="return false">

標準化規格

html5

構文が正しいかどうか、こちらでチェックできます

HTMLの役割

HTMLだけでどこまでのクオリティのサイトがつくれるか

HTMLは文書構造のみを記述するための言語なので、
文字列が整列されている程度のサイトしかできません。

デザインをより良くするためには
CSSでHTMLにデザイン情報を関連付ける技術と
画像編集などの能力が必要です。

また、ファイルに情報を書き込むような操作も
PerlやRubyなどサーバ側で動く言語
を使わなければいけません。

より良いWEBサイトをつくるために

いろいろな言語・技術を平行して習得する。
アンテナを光らせ、常に新しい情報を追う。
人のサイトを見る。技を盗む。

目的を持つ

「習得するための勉強」なんて面白くないし、長続きしません。

「習うより慣れろ」で趣味で触りながら覚えていくのがいいと思います。

自分の作品を公開したい
専門知識をWEBに広めて役立てたい
つくりたいWEBサービスがある
どこからでもアクセスできる自分用のメモとして活用したい