ソースを表示

[[ホームページ作成とアップロード]]
＞ [[ホームページ作成とアップロード/HTMLタグその2|HTMLタグその2]]

== 概要 ==

　前章で紹介した資料

* http://www.htmq.com/

にもとづいて、更に高度なWebページ作りを練習しましょう。

== 練習 ==

=== 練習 1 ===

　Rat Cat Dog という文字列を全てh3のサイズで作り、文字の色を、赤、青、ピンクにしなさい。test2.html というファイルにし、ローカルなどこかのフォルダーに保存し、ブラウザで表示しなさい。

<pre>
  <html>
  <body>
  <font size="5" color="red">Rat</font><br>
  <font size="5" color="blue">Cat</font><br>
  <font size="5" color="pink">Dog</font><br>
  </body>
  </html>
</pre>

です。カラーの種類については
* http://www.htmq.com/color/colorname.shtml
を参考にしてください。このhtmlファイルはtest2.html としましょう。

　この例を前章の練習の例と比べますと、文字の大きさを前章の例では＜hn＞というタグで指定しましたが、ここでは＜font sze=n ...＞というタグで指定しています。＜hn＞の場合には数字ｎが大きいほど文字は小さくなりますが＜font size=n ...＞の場合にはnが大きくなるほど文字は大きくなります。また＜hn＞の場合には改行がされますが、＜font sze=n ...＞の場合には改行されないので＜br＞という改行のためのタグが必要です。

=== 練習 2 ===

　次の写真をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし（写真の上で右クリックし、名前を付けて保存を選び、autumninporland.jpg　という名前を付ければよい）、この写真とそれの説明「ポーランドの秋」をつけたWebページを作りなさい(htmlファイルの名はtest3.htmlとする）。

#ref(autumninporland.jpg)

<pre>
  <html>
  <body>
   <h2>ポーランドの秋</h2>
   <img src="autumninporland.jpg">
  </body>
  </html>
</pre>

=== 練習 3 ===

　次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし（絵の上で右クリックし、名前を付けて保存を選び、ship.GIF　という名前を付ければよい）、この絵とそれの説明「Ship (Pictogram).」　ページを作りなさい(htmlファイルの名はtest11.htmlとする）。

#ref(ship.GIF)

<pre>
  <html>
  <body>
   <h2>Ship (Pictogram)</h2>
   <img src="ship.GIF">
  </body>
  </html>
</pre>

=== 練習 4 ===

　次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし（絵の上で右クリックし、名前を付けて保存を選び、airplane.GIF　という名前を付ければよい）、この絵とそれの説明「Ship (Pictogram).」　ページを作りなさい(htmlファイルの名はtest12.htmlとする）。

#ref(airplane.GIF)

=== 練習 5 ===

　次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし（絵の上で右クリックし、名前を付けて保存を選び、car.GIF　という名前を付ければよい）、この絵とそれの説明「Car (Pictogram).」　ページを作りなさい(htmlファイルの名はtest13.htmlとする）。

#ref(car.GIF)

=== 練習 6 ===

　次のようなhtmlファイルをあなたのパソコンにつくります。すなわち

* ship
* airplane
* car

という３つの単語が表示され、それぞれの文字列に、test11.html,test12.html,test13.html がリンクされているようにします（それぞれの単語上でクリックするとそれぞれのｈｔｍｌファイルが表示される）。このhtmlファイルをtest00.html とします。このhtmlファイルをブラウザの「ファイルから実行」機能で実行させてみましょう。

<pre>
  <html>
  <body>
   <h2>menu</h2>
   <a href="test11.html" >ship</a> <br>
   <a href="test12.html" >airplane</a> <br>
   <a href="test13.html" >car</a> <br>
  </body>
  </html>
</pre>

== CAIテスト  ==

* [[cai_ja:COMHOC00010003|CAIテストのページへ]]