文字を強調してみよう
たとえば何か文章を書いているとします。
そして、この語句は重要だから、強調したい。
そんな時ありますよね?
そんな時の為に、文字を強調するタグをご紹介いたします。
<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フォルダ(HTML)と画像フォルダ(gazou)があります。
<img src="reidai01.gif" alt="例の絵">
この書き方だと、
同じフォルダ内に画像ファイルとHTMLファイルがある場合の指定の仕方です。
同じフォルダ内にあるのならば、これで表示する事が出来ます。
先ほどのように、
フォルダを別にした場合は、どう指定すれば良いのでしょうか?
<img src="../gazou/reidai01.gif" alt="例の絵">
このように指定します。
../とは、今このファイルがあるフォルダから一つ上に行きます。
と言う意味です。
例えば「rensyu」と言う建物の地下一階「gazou」の部屋に荷物があります。
貴方(gazourensyu.html)は今、地下一階の「HTML」の部屋にいます。
さて、貴方は荷物を取りに行くのに、まずどうしますか?
そうです。まず部屋から出ます。
それが
「../」なのです。
部屋から出て、「gazou」の部屋に入って荷物を取る。
そう言う指定をしなくてはならないのです。
この場合はどうでしょう?
「rensyu」フォルダの中に、「gazourensyu.html」と「gazou」フォルダがあります。
この場合、貴方は部屋から出る必要が無いので、
<img src="gazou/reidai01.gif" alt="例の絵">
になります。
解って頂けたでしょうか?
これは、リンクを張る際などにも使いますので、覚えておいてください。
<<前へ
次へ>>
ページの上へ