今回は…
というテーマでお送りします。
よろしくお願いします。
よろしくお願いします。
【１】 HTMLの基本
① 位置づけ
前回、Webの大きな流れを学びましたね。
Webブラウザからリクエストを送ると
サーバからレスポンスが返ってきます。
この時に…
HTML・CSS 形式のファイルです。
Webブラウザは、HTML・CSS を解釈して
画面に表示します。
② HTML / CSS
この HTML / CSS の働きを見ておきましょう。
を記述します。この部分が見出し、この範囲が段落
ここは一覧表です…、といった感じですね。
文書の骨格と言える部分です。
これに対して
を担当します。
全体に中央揃え、見出しは「緑色」、
表の枠線は「細い線」で…、といったことです。
骨格に、肉付けする感じですね。
Webブラウザは、これらを組み合わせて解釈して
Webページを表示することになります。
今回は、このうち…
ハイパーリンク（他のファイルにジャンプすること）
について見ていきましょう。
③ HTML とは
このうち…
…は、文書の中に リンクを埋め込んで
おいて 他の文書に ジャンプできる仕組みです。
…は、タグというものを使って
文書の構造を指定していく言語です。
文書の各部分に意味づけをする感じですね。
④ タグ
タグは、文書の部分に意味づけをする
「印」のようなものです。
この 文書の ある部分に意味づけすることを
「マークアップする」と言います。
そして、マークアップする時に「文書の ある部分」を
「開始タグ」と「終了タグ」で囲むこととなります。
例えば、大きな見出しを表すタグ h1 の場合
開始タグ 終了タグ
このような形で書きます。
終了タグには / の記号をつけて表します。
また、タグの種類としては 終了タグ が無い形で
使用する「単独タグ」というものもあります。
例えば、改行を表すタグ <br> です。
⑤ タグの属性
タグに補足情報を加える時には
を使用します。
記述する時には、「属性」と「属性値」を
セットで記述する事となります。
このように書きます。
タグの名前の後に空白文字を明けて 属性=”属性値”
という形で書きます。
タグによって、指定できる属性は異なります。
どんな属性を使えるかは、のちほどお伝えしますね。
ここでは、タグの補足情報として「属性」が
ある事を押さえておきましょう。
【２】 ハイパーリンク
ハイパーリンクを作成する aタグ
を見ていきましょう。
このように記述します。
href属性には、クリックした時にジャンプする
リンク先を属性値として指定します。
このリンク先の指定方法には、絶対パスと
相対パスがあります。のちほど、ご説明しますね。
そして 表示文字列は、ハイパーテキストが
表示される文字列です。
また、この他に target属性で リンクを開く方法を
指定することもできます。
例えば、リンク先のページを 別タブで開きたい場合
と、指定します。
それでは、【絶対パス】と【相対パス】
について 見ていきましょう。
✅ 外部のWebサイトへのリンクに使用。
✅ ブラウザのアドレスバーに
表示される内容をそのまま記述。
（例）Googleページへのリンクを作る場合
<a href=”https://www.google.co.jp/”>Google検索へ</a>
他のファイルの場所を示す方法。
✅ 同じフォルダ内： ファイル名
✅ 下位のフォルダ内： フォルダ名/ファイル名
✅ 上位のフォルダ内： ../ファイル名
（例）sub1 フォルダの item1.html へのリンクを作る場合
<a href=”sub1/item1.html”>アイテム１へ</a>
では、フォルダ構成例で見ていきましょう。
03 フォルダ には、index.html と store.html があります。
そして 03 の下には フォルダ sub1 と sub2 があります。
フォルダ sub1 には item1.html があって…
フォルダ sub2 には item2.html があります。
リンクを張りたい場合…
<a href=”store.html”>店情報へ</a>
このように、href属性には
ファイル名をそのまま指定します。
リンクを張りたい場合…
<a href=”sub1/item1.html”>アイテム１へ</a>
このように、href属性には
フォルダ名/ファイル名 の形式で指定します。
リンクを張りたい場合には…
<a href=”../index.html”>トップ画面へ</a>
このように href属性には ../ の後にファイル名を指定します。
.. がひとつ上のフォルダの意味になります。
sub2フォルダの item2.html にリンクを張りたい場合…
<a href=”../sub2/item2.html”>アイテム２へ</a>
このように href属性には
../フォルダ名/ファイル名 という指定のしかたをします。
② と ③ の組み合わせ という感じですね。
Webサイト内部の ファイル指定では
相対パスで 指定する場合が多いものです。
この相対パスの指定方法を 押さえておきましょう。
こうやって作られていたんですね。
仕組みが分かって、面白くなってきました…。
とっても 面白いですね。
これ 最初に考えた人は凄いな～って思います。
【まとめ】
文書の各部分をタグを使って
意味づけする。
✅ 文書にリンクを埋め込んで
他の文書にジャンプできる。
✅ <a> タグを使用する。
✅ href属性にリンク先を指定。
今回も、ご覧いただき、ありがとうございます。