Javascript Patchworker - インフォメーション

サンプルソース

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 02 <html><head> 03 <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> 04 <title>WELCOME TO MY HOMEPAGE!</title> 05 </head><body> 06 <p><b>WELCOME TO MY HOMEPAGE!</b></p> 07 <table border="0"> 08 <tr><td>8/27</td><td>日記を更新</td></tr> 09 <tr><td>8/25</td><td>サイトを運営開始</td></tr> 10 </table> 12  11 </body></html>

HTMLの基本

<!DOCTYPE HTML ～

　HTML文章に必須とされる、文書型宣言です。文書宣言とはその文章がどんな言語で書かれているかを明示するためのものです。詳しいDOCTYPE宣言の説明は省略します。~~（後ほどTipsのページに掲載する予定です。）~~
　DOCTYPE宣言でユーザが設定する主な部分は強調してあるTransitionalの部分です。次の3つがこの部分に指定できます。
Strict ： W3Cが定めるHTMLの正式な仕様です。非推奨のタグや属性が使用できなくなります。
Transitional ： Strict移行前の暫定的な仕様です。非推奨のタグ/属性も使用可能です。
Frameset ：フレームを使用するページのための仕様です。

基本的なタグ

<html>
　書かれている文書がHTMLであることを示すために、全体をこのタグで囲います。通常は文書型宣言の直後に記述します。設定できる属性はlangだけです。
<head>
　本で言う目次の部分を作成します。コンテンツに関するさまざまな情報を埋め込んだり、ページ全体に影響を及ぼすスクリプトやスタイルシートもここに記述します。
<meta>
　ヘッダに情報を埋め込むためのもっとも主要なタグです。03行目のメタタグではページのエンコードタイプを指定していますが、最低でもこれだけは設定しておくことを推奨します。
　詳しいことはHTMLのリンク関連の<meta>についてで解説しています。
<title>
　ヘッダに記述し、ページのタイトルを設定します。HTML4.01では必須のタグとなっています。
<body>
　実際に出力される文章はすべて、<body>～</body>に記述されています。
このタグについてはHTMLのドキュメント関連の<body>についてで詳しく解説しています。

ブロックレベル要素とインラインレベル要素

　<body>～</body>に記述されるタグのほとんどは「ブロックレベル要素」「インラインレベル要素」の2つに分けることが出来ます。
ブロックレベル要素
　段落や表などの、文章の塊のことを指します。ブロックレベル要素の後には改行を含みます。サンプルソースでは<p>タグや<table>などがこれにあたります。
インラインレベル要素
　文字や行などのブロックレベル要素を構成するための要素を指します。サンプルソースでは<b>タグがこれにあたります。

　<ブロック><インライン></インライン></ブロック> と入れ子にすることは出来ますが、その逆インラインでブロックをはさむことは出来ません。
スタイルシートのボックス関連でこの要素について再び取り上げていますので、詳しくはそちらを参照してください。

共通属性

　HTMLにはほとんどのタグに設定できる属性が用意されていて、それを共通属性といいます。共通属性には以下のものがあります。
class属性 ：要素をグループ分けするためのもので、スタイルシートの適用の際などによく使われます。
id属性 ：要素に目印をつけるためのもので、JavaScriptやアンカーなどでよく使われます。
style属性 ：要素にスタイルシートを設定するためのものです。
title属性 ：要素に補助的な情報を付加します。要素にカーソルを乗せることで表示されます。
lang属性 ：要素の言語を明示することが出来ます。
dir属性 ：要素の書字方向を設定します。アラビア語など右から左に向けて読む言語で書くときに用います。

コメントアウト

　HTMLにはディスプレイに表示されないコメントやメモを残すことができます。こまめにメモを残しておくことで後で編集が楽になります。
　コメントはをつけます。<と!の間にスペースなどを入れてはいけません。またコメントの中に--を入れないようにしてください。
　将来的に追加しようと思う内容も、コメントアウトしておくことで編集が楽になります。

前のページ　　次のページ

 TOPページに戻る