HTMLの基礎覚え書き - 概要 - The blog

HTMLに関して勉強しようと思い立ったので覚え書き(ここを参考にしました)

HTML構造の概要

1. Root要素であるhtml要素はhead要素、body要素によって構成される

<html>
    <head>
    </head>
    <body>
    </body>
</html>

- html要素には名前空間とそのHTML文書の記載言語を記す

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

2. head要素にはtitle要素とmeta要素を書く

<head>
    <title>これはtitle要素です</title>
</head>

- meta要素のhttp-equiv属性に"Content-TypeやContent-Script-Type"を記載する

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

3. body要素はp要素とheading要素(h1..h6)からなる

<body>
    <h1>見出し語1</h1>
    <h2>subの見出し語</h2>
    <p>これはparagraphです</p>
</body>

4. HTML文書の先頭ではXML宣言をする

<?xml version="1.0" encoding="UTF-8"?>

list表示をしたい時

1. ol要素でList itemとして使用したいli要素を囲む
通し番号がふられる。olの意味はordered list。liの意味はlist item

<ol>
    <li>これはリストアイテムです</li>
</ol>

2. ul要素でList itemとして使用したいli要素を囲む
通し番号がふられない。ulの意味はunordered list

<ul>
    <li>これもリストアイテムです</li>
</ul>

3. dl要素ではdt要素、dd要素を入れ子しリスト表示する
辞書見出し語をdt要素でmarkupし説明文をdd要素でmarkupする

<dl>
    <dt>これは見出し語です</dt>
    <dd>これは説明文です</dd>
</dl>

Tableを表示したい時

1. 表を作成するにはtable要素でtr要素(Table row)とtd要素(Table data)を入れ子にする(tr要素はtd要素を入れ子する)

- table要素にborder属性、cellspacing属性、cellpadding属性を指定することにより表のstyleを定義することが出来る

<table border="5" cellspacing="10" cellpadding="10">
    <tr>
        <td>Name</td>
        <td>Flavour</td>
        <td>Color</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>like banana</td>
        <td>Yellow</td>
    </tr>
</table>

- table要素にsummary属性を付加することができる(ex. ハンディキャップがある人のためなど)
- table開始タグの直後にcaption要素を付け加えることにより、表に題名をつけることができる

<table summary="This is a table of fruits">
    <caption>Fruit Tables</caption>
    <tr>
        <td>Name</td>
        <td>Flavour</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td>Sour</td>
    </tr>
</table>

- 項目名を示したい場合はtd要素の代わりにth要素でmarkupする
- セル内の背景色を変更したい場合はstyle属性のbackgroundプロパティで色を指定する
- セルの統合をしたい場合はrowspan属性、colspan属性で値を指定する

<table border="1" cellpadding="10" cellspacing="10">
  <caption>Table of fruits</caption>
  <tr>
    <th>Category</th>
    <th>Name</th>
    <th>Flavour</th>
    <th>Shape</th>
  </tr>
  <tr>
    <th rowspan="2" style="background:#FF0000">Red Fruits</th>
    <td>Apple</td>
    <td>Sweet</td>
    <td>Round</td>
  </tr>
  <tr>
    <td>Strawberry</td>
    <td>Sweet</td>
    <td>Pyramid</td>
  </tr>
  <tr>
    <th>Yellow Fruits</th>
    <td>Orange</td>
    <td>Sour</td>
    <td colspan="2">I don't know</td>
  </tr>
</table>

- colgroup要素を最初のtr要素の前に記述することにより、列をgroup化し同じstyleを適用することが出来る
- 同じstyleを連続した複数の列にまたがって適用したい場合はspan属性で数を指定する
- col要素も同じ。col要素を意味的なまとまりにしたい場合はcolgroup要素の入れ子として扱ってもいい

<table>
    <colgroup style="background:#FF0000">
    </colgroup>
    <colgroup>
        <col span="2" style="background:#000000">
    </colgroup>
    <tr>
        <td>Swimming</td>
        <td>Running</td>
        <td>Jogging</td>
    </tr>
</table>

- 行はthead要素、tbody要素、tfoot要素でgroup化することが出来る
- tbody要素は複数のtr要素をgroup化出来るが、thead要素、tfoot要素は1つのtr要素しか出来ない

<table>
    <thead style="background:#FF0000">
        <tr>
            <th>Name</th>
            <th>Duration</th>
            <th>Time</th>
        </tr>
    </thead>
    <tfoot style="background:#00FFFF">
        <tr>
            <th>Sum</th>
            <td>100 min</td>
            <td>3 times</td>
        </tr>
     </tfoot>
     <tbody style="background:#EEEEEE">
         <tr>
            <th>Running</th>
            <td>50 min</td>
            <td>2 times</td>
        </tr>
        <tr>
            <th>Swimming</th>
            <td>50 min</td>
            <td>1 time</td>
        </tf>
     </tbody>
</table>

画像を表示したい時

1. img要素のsrc属性に画像のpath、alt属性に画像が表示出来なかった時の代替え文言を指定する

- width属性、height属性で画像の大きさを指定することが出来る
- align属性でそれに続くtextの表示位置を指定出来る

<!-- alignがleftだとtextは画像の右側に回り込む -->
<img src="image.jpg" alt="ここにimageを表示" width="100" height="100" align="left">

Hyper linkをしたい時

1. a要素(Anchorの意味)のhref属性にリンク先のaddressを指定し、リンク表示文言をa要素で囲む()

- Localに保存されているHTML文書へのリンクの場合は相対URLを使用できる
- ハイパーリンクはweb pageだけじゃなくて"mailto:"URIでmailをリンクすることも出来る

<a href="http://www.google.com">Google</a>

- HTML文書の特定の場所(フラグメント)にリンクを張りたい時は
  1. リンク先のa要素にid属性を定義する
  2. リンク元のhref属性で「file名#リンク先id」を指定する

<!-- リンク元 -->
<a href="file_b.html#linked">linkedへのリンク</a>
<!-- リンク先 -->
<a id="linked">これはlinkedです</a>

同file内へのlinkは「file名#リンク先id」の「file名」を省略することが出来る

作者の情報を記載する

1. address要素でHTML文書の作者情報を記載

<address>
  sei10sa10; 2011-08-20日更新;
  <a href="mailto:yourmail@domain.com">sei10sa10へのメッセージ</a>
</address>

HashTag #HTML