トップページ>>HTML>>書き方>>タグその1>>タグその2

文字を強調してみよう

たとえば何か文章を書いているとします。
そして、この語句は重要だから、強調したい。
そんな時ありますよね?

そんな時の為に、文字を強調するタグをご紹介いたします。 <em></em> <em>タグはテキスト(文字)を強調する時に使用します。
どうなるのでしょうか?実際にやってみましょう。 <em>ドキドキ</em>がとまらない! ドキドキがとまらない!  お解りいただけたでしょうか?
「ドキドキ」の部分だけが、斜めになっているのが解りますか?
ちょっと解りづらいですよね。これだと、あまり強調されている様な感じではない・・・。
それでは、さらに強調した語句をご紹介いたします。 <strong></strong> <strong>タグです。
さらにテキストを強調したい時に使うタグです。
実際にやってみましょう。
<strong>ドキドキ</strong>がとまらない! ドキドキがとまらない! このように、太字になりました。
先ほどからチョコチョコと出てくる。赤字で下線の付いた強調した文字は、
この<strong>タグを使っているのです。
動作が違うのは、CSSを使用して、色をつけたりしているからです。
それでは実際にこのページのソースコードを見てみる事にしましょう。

 ブラウザの表示と言う所をクリックしてください。
アップルのマークの横にアプリケーションの名前があると思います。
その横の方に表示と言う項目があるはずです。
それをクリックすると、色々な項目が表れますね。
その中に、ソースを表示と言う欄がありますね?
それをクリックしますと、別ウインドウでソースコードが表示されます。

何やら良く解らない英単語がズラズラ並んでいますね・・・。
解る所だけ見てみましょう。

実際のページとソースコードを見比べて、こんな感じなんだと思うのも勉強の内だと思います。
その中に、<strong>を見つける事は出来たでしょうか?

見つける事が出来たならば、こんな感じに使うんだなぁ。
くらいに思っていてください。
ページの上へ

ホームページを写真で飾ってみよう

皆さんはどのようなホームページを作りたいと考えているのでしょうか?
子供の成長記録や、自分で見つけた美しい風景や、
面白い看板などをページに載せてみたいと思いませんか?
そんな時に役に立つのがこちら。 <img> <img>タグです。
イメージ(Image)の略称ですね。きっと。
 イメージ、つまり画像です。写真だろうと絵だろうと画像ですね。
なので、写真でも絵でもこの<img>タグでページに載せる事が出来ます。
しかし、ただ単にこの<img>タグを書いただけでは、何も載せる事は出来ません。

 ところで皆さん。HTMLファイルはどこに保存されていますか?
ちゃんと専用のフォルダを作って保存されているでしょうか?
フォルダを作りましょう。今からでも遅くはないです。

作りましたね?
それでは画像の貼付け方を説明いたします。

 まず、画像を用意します。
絵でも写真でもなんでも構いません。
私は絵を用意しました。決して小学生や幼稚園児の落書きではありません。
<img src="reidai01.gif" alt="例の絵"> こう書いてみました。
srcプロパティは、この画像がどこにあると言うのを指定する為の物です。
altプロパティは何らかの不具合で画像が表示されなかった場合に、
かわりに表示するテキストを入れます。
気付いていらっしゃるかも知れませんが、
プロパティを指定する時には、ダブルクウォート(")シングルクウォート(')で囲うのを忘れないでください。
もちろん、閉じるのを忘れないようにしてくださいね。

 さて。ホームページを作る時には、画像は一枚や二枚しか使わないのでしょうか?
そんな事はありませんね?
何枚も使いたくなると思います。
そうなった時に、HTMLファイルと画像ファイルとを同じフォルダに入れておいたら
ゴチャゴチャして嫌ですよね?
画像ファイルとHTMLファイルを別々のフォルダに入れた場合、
上の書き方では指定されないのです。
  • rensyu
    • HTML
      • gazourensyu.html
    • gazou
      • reidai01.gif
 例えば、こんな感じにフォルダを作ったとします。
ホームページ作成練習フォルダ(rensyu)の中に、HTMLフォルダ(HTML)と画像フォルダ(gazou)があります。
<img src="reidai01.gif" alt="例の絵">  この書き方だと、同じフォルダ内に画像ファイルとHTMLファイルがある場合の指定の仕方です。
同じフォルダ内にあるのならば、これで表示する事が出来ます。
先ほどのように、フォルダを別にした場合は、どう指定すれば良いのでしょうか?
<img src="../gazou/reidai01.gif" alt="例の絵">  このように指定します。
../とは、今このファイルがあるフォルダから一つ上に行きます。
と言う意味です。
 例えば「rensyu」と言う建物の地下一階「gazou」の部屋に荷物があります。
貴方(gazourensyu.html)は今、地下一階の「HTML」の部屋にいます。
さて、貴方は荷物を取りに行くのに、まずどうしますか?

 そうです。まず部屋から出ます。
それが「../」なのです。
部屋から出て、「gazou」の部屋に入って荷物を取る。
そう言う指定をしなくてはならないのです。
  • rensyu
    • gazourensyu.html
    • gazou
      • reidai01.gif
 この場合はどうでしょう?
「rensyu」フォルダの中に、「gazourensyu.html」と「gazou」フォルダがあります。
この場合、貴方は部屋から出る必要が無いので、 <img src="gazou/reidai01.gif" alt="例の絵"> になります。
解って頂けたでしょうか?
 これは、リンクを張る際などにも使いますので、覚えておいてください。 例の絵

<<前へ 次へ>> ページの上へ