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

提供: Internet Web School

(版間での差分)

移動: ナビゲーション, 検索

Admin (トーク | 投稿記録)
(ページの作成: ホームページ作成とアップロード＞ HTMLタグその2 == 概要 == 前章で紹介した…)
次の差分→

2012年6月25日 (月) 06:02時点における版

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

概要

前章で紹介した資料

http://www.htmq.com/

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

練習 1

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

  <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>

です。カラーの種類については - http://www.htmq.com/color/colorname.shtml

を参考にしてください。このｈｔｍｌファイルはtest2.html としましょう。~

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

練習 2

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

ref(autumninporland.jpg)

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

練習 3

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

ref(ship.GIF)

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

練習 4

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

ref(airplane.GIF)

練習 5

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

ref(car.GIF)

練習 6

- 練習　6：　次のようなhtmlファイルをあなたのパソコンにつくります。すなわち ship~ airplane~ car~ という３つの単語が表示され、それぞれの文字列に、test11.html,test12.html,test13.html がリンクされているようにします（それぞれの単語上でクリックするとそれぞれのｈｔｍｌファイルが表示される）。このｈｔｍｌファイルをtest00.html とします。このｈｔｍｌファイルをブラウザの「ファイルから実行」機能で実行させてみましょう。

  <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>

　Web サーバにあるファイル（これをhtmlファイルという）は、クライアントと呼ぶパソコン（多分あなたのパソコンもそう）から、ブラウザと呼ぶソフトを使って見ることができます。

　ブラウザというのは Internet Explorer や Safari や Google Chrome などのソフトのことです。

　htmlファイルというのは基本的にはテキストファイルです。すなわちメモ帳やnotpadなどのテキストエディターで編集できる簡単な形式のファイルです。テキストファイルでは文字の大きさもすべて同じであるし、太い文字、カラーのついた文字などを表現できません。しかしWebページでは豊富なデザインがさっれていて、それらの表現も必要になります。Webページのためのデザインを指定するのがhtmlタグと呼ばれるものです。それらは基本的には <...> のようにかぎ括弧で囲んだ文字列です。多くの場合、<...>と</...>がペアになっています。それは一つのブロックです。それらはブラウザに対する命令でブロックの中のみで有効です。ブラウザがタグをそのまま画面に表示することはありません。

　htmlタグについては次のページを参照してください。なおhtmlというのは Hyper Text Markup Language の略です。そしてhtmlのファイルは ***.html または ***.htm という名前を付けます。歴史的にはパソコン系では拡張子が3文字なので.htmが使われ、UNIXの動くワークステーション系では .html が使われてきました。

Hyper Text Markup Language（Wikipedia）

　上の資料にはhtmlの概略が述べられていますが、具体的な書き方については

http://www.htmq.com/

　を参考にするといいでしょう。

練習

　Rat Cat Dog という文字列を３行で順に大きな文字で表示するhtmlファイルを作り、ブラウザで表示しなさい（ブラウザには直接ローカルなhtmlファイルを表示させる機能があります。Internet Explorer ではファイルメニューで開くを選択すればいいのです)。このhtmlファイルの内容は

 <html>
 <body>
 <h3>Rat <h2>Cat<h1>Dog
 </body>
 </html>

です。

CAIテスト

CAIテストのページへ