要素の入れ子(ネスト)と子孫関係
要素の入れ子(ネスト)と子孫関係
- テキストP.035
- HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています
- このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造には、まった影響を与えないということ
ブロックレベル要素とインラインレベル要素
- インラインレベル要素は、ブロックレベル要素に内包されていないといけない
<p><img src="" alt=""></p>
- インラインレベル要素の中に、ブロックレベル要素を内包することはできない
- 以下の記述は、間違いです(HTML5の場合は、可能)
<a href=""><p>テキスト</p></a>
ブロックレベル要素の特徴
- 幅の大きさを指定しない限り、ブラウザ幅全体を表示領域とする
- つまり、行揃えの指定ができる
インラインレベル要素の特徴
- 文章1行の中の1文字の扱いと同様の扱いになります
- つまり、行揃えの指定ができない
コンテンツ部分をマークアップ
- テキストP.038〜
- 読みやすいように段落内で改行する
- 大事な語句を強調する
- 画像を挿入する
- リンクを設定する
強制改行
- <br>
- forced line break
大事な語句を強調
- <em> または <strong>
- emphasis
画像を挿入
- img:image
- src:source
- alt属性は、必須
<img src="img/subaru.jpg" alt="すばる">
相対パスと絶対パス
- 「パス」とは、「ファイルの場所」を示すための大切な仕組みです
相対パス relative path
- 今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを指定します
相対パスを記述
- 同じ階層内にあるファイル →ファイル名 で記述
- 同じ階層内にある、別フォルダの中にあるファイル → フォルダ名/ファイル名 で記述
- 今いる階層の1つ上の階層にあるファイル → ../ファイル名 で記述(※2つ上の階層にあるファイル の場合は「../../ファイル名」となります)
絶対パス absolute path
- httpから始まるWebサイトのアドレス(URL)を使って場所を指定します
相対パス例
《nav1のボタンを押すと、categoryAのindex.htmlを表示する》
<ul> <li><a href="categoryA/index.html"><img src="img/nav1.png" alt="カテゴリAへリンク"></a></li> </ul>
《categoryBのindex.html内のhomeボタンを押すと、siteトップのindex.htmlを表示する》
<ul> <li><a href="../index.html"><img src="../img/home.png" alt="サイトトップへリンク"></a></li> </ul>
注意!
- フォルダー名・ファイル名に日本語を使用することは不可
- フォルダー名・ファイル名にスペースをを使用することは不可