良く使うタグ

一般的な書類は文章を打ち込みながら、必要に応じて改行したり、行の先頭をそろえるためにタブやインデントを指定したりして文章の書式を整えます。
これに対してホームページ作りではタグという識別子を使って書式を指定します。このタグは数多くあり、柔軟な書式を定義することができます。反面、数多くのタグの使い方を知らないとホームページは作れないと思われがちです。また、いわゆるタグの説明・解説書もこれら数多くのタグを網羅的に説明したものがほとんどであり、初学者には高いハードルとして感じられます。
しかし、数多くのタグもタグ同士が主従関係を持っているので、その主従関係に着目して各タグの役割を理解すれば、タグの使い方はそれほど難しいものではありません。

下記の一覧表は日常使う使用頻度の高いタグについて、タグの主従関係に着目し作ったものです.
表の見方は、
<head>文の中には<title>文や<meta>文を記述することができ、
<body>文にはホームページの実体になる<hn>文(タイトル)、<p>文(一つの段落を構成する)、<table>文(帳票を作る。上記の表もtable文で構成されています)、<div>文(複数の段落をグループにまとめる)、<imag>文(写真などのイメージの貼付けを指定する)、<a>文(ハイパーリンクを指定する)などを記述することが出来ます。
なお、参考のために既存のホームページの実際のhtml文(ソース)を見る一番簡単な方法は、ブラウザーで任意のサイトを開いて、そのサイトのソースを表示させる事です。
既存のホームページを開いているスクリーン上でマウスの右クリックを行うと、ポップアップメニューの中に“(ページの)ソースの表示”というメニューが出てきます。これをクリックすると、開いているページを構成しているhtmlソースがスクリーンに表示されます。
上記タグ一覧を脇に置いてタグの主従関係と各タグの役割を確認しながらhtmlソースを見てゆけば、実際のhtmlソースの記述法を効率よく習得することができるでしょう。
html HTML HTML文書全体を囲み、HTNLドキュメントである事を示す。
head head bodyダグの前に置き、TitleダグやMetaダグを内側に含む、ホームページ本体には影響なし。
titile titile ブラウザのタイトルバー上に表示する文章のタイトルを指定する。
meta meta 文章のメタ(高次な)情報を記述。
link link スタイルシートの読込み、フォント定義ファイルの読込みを行う。
body body ブラウザに表示する内容を記述する。
hn (1<=n<=6) header 見出しの指定。数値は見出しの重要度を示す。
前後が自動的に改行される。
数値が大きいほど文字は小さい。
p paragraph 段落を指定。
先頭行に空行が1行挿入される。
ul Unnumbered List 番号なしリストの定義。
Type指定で各リストの先頭にマークが付く。
ネスティング可能。
li list TYPE= リストのマークを指定します。
ulの時には以下のいずれかを指定します。
        circle:白丸(H3/e4/N2)
      disc:黒丸(H3/e4/N2)
      square:四角(H3/e4/N2)
olの時には以下のいずれかを指定します。
        1:1, 2, 3, 4, 5, ...(H3/e2/N2/i2)
      a:a, b, c, d, e, ...(H3/e2/N2/i2)
      A:A, B, C, D, E, ...(H3/e2/N2/i2)
      i:i, ii, iii, iv, v, ...(H3/e2/N2/i4)
      I:I, II, III, IV, V, ...(H3/e2/N2/i4)
ol Ordered List 番号付きリストの定義。
Type指定で各リストの先頭に通し番号が付く。
ネスティング可能。
dl Definition Lists 定義語型リスト
dt Term name 定義語 例)CPU
dd Term Definition 定義内容 例)中央演算処理装置
table table 表組み
必ずtrとセットで記述。
caption caption 表題をテーブルの上部または下部に記入します。
tr table row 表の行指定、必ずth、tdとセットで記述。
th table header 表の見出し要素。
字体が太字になる。
rowspan、colspanで複数列、複数行にまたがるセルの指定。
td table data 表のデータ要素。
rowspan、colspanで複数列、複数行にまたがるセルの指定。
address address ページ制作者情報。住所やメールアドレスを記述する。
テキストは斜字体になる。
div division 複数の段落のグループ化
ある程度大きな範囲に対して、行揃えやスタイルを適用したい場合に使用(ブロック要素)。
Div id="xxx" xxxはユニーク
行ごとに空行は挿入されない。
span span 段落内の単語、文章のグループ化
br 強制改行
a Anchor ハイパーリンク指定。
href="url"
href="url#Anchor name" name="Anchor name"
href="mailto:your@mail.address
imag Inline Image イメージ指定 src="url"; width; height
<!--
末尾は-->
Comment 間の部分をコメントとみなし、本文に影響を与えない。
ページ本体に影響なし。

補足説明

tableタグの罫線をなくす
tableタグの属性として boder="0"; cellspacing="0"; cellpadding="0"; を指定。

以上が、ホームページを自作するための基礎です。
この後、この基礎を踏まえて用途ごとのhtml、CSSの記述の定石と工夫をまとめますので、ホームページ作成の手引きとして活用してください。
1 2 3

 

このサイトは個人生活を健やかに、愉しく、 企業活動を闊達にして、 持続可能な社会作りを目指します
Copyright © しなやか暮し研究所 2012 All Rights Reserved.