この講座で、このページに初めて来られた方へ。本講座の目次があります。
リンクの張り方
今回はリンクを張って見ましょう。この回では前回までに作業を進めていたファイルが必要です。まだ作ってない人の為に前回まで進行したファイルを用意しておきましたので、ダウンロードしておきましょう。
まず、リンクとは何かということについて説明しましょう。リンクとは、ウェブ上の情報の繋がりのことです。さらに、この繋がりの特徴として方向性がある、つまり一方通行の繋がりであるということがあげられます。
文字列 → 文書、画像、動画、その他
こんな感じですね。文書中のある画像から矢印が延びていって目的地の情報へと繋がっていくイメージです。そして、その矢印の根本をリンクの始点、矢印の伸びた先をリンクの終点といいます。
それでは実際にリンクを張って見ましょう
同一サイトでのリンクの張り方
まず、第２回で作った日記から第３回で作った日記にリンクを張って見ましょう。
メモ帳でnikki1.htmlを開いてください。[ここに開き方の説明へのリンクつけるかも]
リンクを作る場合にはまず、始点と終点を考えます。今回はnikki1.htmlにある文字列「親子丼」を始点として、recipe1.htmlにリンクを張って見ましょう。それでは、実際に作業するところを抜粋してみますね。
親子丼 → recipe1.html
まず、始点に要素「a」を与えてやりましょう。
<a>親子丼</a> → recipe1.html
こうですね。次に、このa要素にリンクの終点を教えてやります。
<a href="recipe1.html">親子丼</a> → recipe1.html
今までに見たことのない記号が出てきました。この例のhrefをa要素の属性といいます。
hrefはハイパーリファレンス属性の略ですね。超意訳すれば「すっごく便利に参考文献が見られるよ属性」てなとこです。
href="recipe1.html"の""で囲まれた部分であるrecipe1.htmlをhref属性の値だとか、属性値だとかいいます。
属性と属性値は今後良く出てくるので覚えておきましょう。まとめると、
<要素 属性="属性値"></要素>
となります。属性をつけるのは開始タグだけでOKです。というか、終了タグにつけてはいけません。
リンクの場合は
<a href="終点のファイル名">リンクの始点</a>
と書いておきましょう。
何はともあれリンク一つが完成しました。できたHTMLはこんな感じです。
<p> 今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に<a href="recipe1.html">親子丼</a>を食べました。</p& gt;
他のサイトにリンクを張ろう
自分のサイトのページにリンクが張れたら次は、他のサイトにも張りたいですよね。とりあえず、Petanko.orgのトップページにリンクを張る方法を考えてみましょう。
ここで悩むのはリンクの終点の記入方法です。ウェブ上にある大量のファイルから、他のサイトのページをただ一つに特定する記述であるURIを使います。ウェブページを見ているときウィンドウのどこか（多分上の方）に「http://」から始まる文字列がありませんか？ それがURIです。URLだとかアドレスとも呼ばれてますね。
このURLをhref属性の値として、リンクを張ればいいです。Petanko.orgに張りたければ、リンクの始点が文字列「Petanko.org」、終点が「http://petanko.org/」ですから、
<a href="http://petanko.org/">Petanko.org</a>
こうなります。
注意
ここで注意が一つあるのですがa要素の中にa要素は入れられません。
<p><a href="url 未定"><a href="http://petanko.org/"> Petanko.org</a>のウェブサイト作成講座にようこそ！</a>< /p>
このようなリンクの張り方は不正です。これからリンクを張りたければ
<p><a href="http://petanko.org /">Petanko.org</a>の<a href="url未定"& amp;gt;ウェブサイト作成講座にようこそ！</a></p>
このような感じにしましょう。
強調
a要素を習ったついでに、これよりも簡単な強調の仕方について覚えちゃいましょう。ここまで来た皆さんには簡単です。
強調をしたいところの要素はemです。そして、強い強調をしたいところの要素はstrongです。特に属性は必要なく、これらの要素のタグをつけてしまえばおわりです。
さらに、このemやらstrongは重ねがけができて、
<p> 普通のところ<em>強調したいところ<em>もっと強調したいところ</em></em></p>
だとか、
<p> 普通のところ<em>強調したいところ<strong>めちゃくちゃ強調したいところ<em>死にそうなくらい強調したいところ</em>< /strong></em></p>
ただし、以前説明したのと同じように[!シラバスの変更必要有!]emの袋もstrongの袋も破れちゃだめで、
<p> 普通<em>強調<strong>もっともっと強調</em> もっと強調</strong>普通</p>
こういう風に書いたらだめです。こんな感じで強調させていきたかったら、
<p> 普通<em>強調<strong>もっともっと強調</strong></em><strong>もっと強調</strong>普通</p>
このように書くといいですよ。
インライン要素について
今回a、em、strong要素について学びましたが、この性質は今まで習った他の要素の性質とは異なります。ですから、これらの要素をインライン要素といって前回習ったブロックレベル要素とは区別します。
段落や箇条書きと、このaやem、strong要素の違いについて比較してみましょう。
ブロックレベル要素は文章を基本的な構造として分類するものです。
ですから、ブロックレベル要素の始まりでは行が、新しい行に移っていると思います。
このように、文章をページの端から端まである長方形、つまりブロックで囲まれるように分類するという特徴があります。
これに対して、a、em、strong要素はブロックレベル要素が作った基本的な構造に肉付けする役割を持っています。
段落などの基本的な構造は誰がマークアップしても同じような仕上がりになりますが、リンクや強調といった肉付けは作者によってばらばらの結果になります。インライン要素は作者の主観によってつけられるというのもインライン要素の特徴の一つですね。
さて、このインライン要素ですが、インライン要素は全てブロックレベル要素の中に無いといけません。文章の骨組みの前に肉付けがあるとおかしいですからね。つまり、
<p><a href="終点のURI">始点の文字列</a></p>
はＯＫですが、
<a href="終点のURI"><p>始点の文字列</p></a>
こういうのはNGです。
作る順番としても、まずブロックレベル要素で骨組みを完成させてからインライン要素で肉付けさせるように心がけましょう。
コメントする