10 個で憶える HTML

全体の構成 : 次の項目は「お呪い」として憶える(というか Copy&Past する)

表記

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
頭部部分
  </head>
  <body>
本体部分
  </body>
</html>

文章のタイトル : 頭部に記載する(title タグ)
表記
```
<title>文章のタイトル</title>
            
```
文字のサイズの指定と強調 : h タグ ( h1, h2, .. ) で囲まれた部分は文字のサイズが指定されたサイズになり、強調される
表記
```
ここで <h3>h 文字のサイズ</h3> が変る。
            
```
結果

ここで
文字のサイズ
が変る。
改行: html 内では、改行も空白もすべてまとめられて一つの空白の用に扱われる。改行をしたい場合は、明示的に、br タグを付ける。
表記
```
ここに <br /> といれると、「ここに」の後に改行が入る
            
```
結果

ここに
といれると、「ここに」の後に改行が入る

段落: 段落を表現する場合は p タグで囲む

表記

              <p> 一段落目の文章を入れる。</p>
              <p> ニ段落目の文章を入れる。</p>
              <p> 三段落目の文章を入れる。</p>

結果

一段落目の文章を入れる。

ニ段落目の文章を入れる。

三段落目の文章を入れる。

箇条書 (項目の列挙): 項目を並べる場合は ul を使う。項目は li で囲む。

表記

              <ul>
                <li>
リンゴ
                </li>
                <li>
ミカン
                </li>
                <li>
バナナ
                </li>
              </ul>

結果

リンゴ
ミカン
バナナ

箇条書 (番号付け): 項目に更に連番を付ける場合は ol を使う。項目は li で囲む。

表記

              <ol>
                <li>
リンゴ
                </li>
                <li>
ミカン
                </li>
                <li>
バナナ
                </li>
              </ol>

結果

リンゴ
ミカン
バナナ

Hyper Link : 他のページへの Link を行う場合は a タグを使う。
- a タグの属性である href に URL を指定する。
- a タグの中には Page の説明を書く。
表記
```
              <a href="http://www.google.co.jp">
Google
              </a>
: 検索エンジン
            
```
結果

Google : 検索エンジン
画像 : 画像を表示するには img タグを利用する。
- 画像ファイルは src 属性で指定する。
- 画像が表示されない(しない)場合のために alt 属性で図の内容を指定する。
表記
```
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Cat_poster_1.jpg/1024px-Cat_poster_1.jpg" alt="N." />
            
```
結果
あとはググろう

10 個で憶える HTML

文字のサイズ