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

提供: Internet Web School

(版間での差分)
(ページの作成: ホームページ作成とアップロードHTMLタグその2 == 概要 == 前章で紹介した…)
 
(間の1版分が非表示)
4 行: 4 行:
== 概要 ==
== 概要 ==
-
前章で紹介した資料
+
 前章で紹介した資料
* http://www.htmq.com/
* http://www.htmq.com/
10 行: 10 行:
にもとづいて、更に高度なWebページ作りを練習しましょう。
にもとづいて、更に高度なWebページ作りを練習しましょう。
-
== 練習 1 ==
+
== 練習 ==
 +
 
 +
=== 練習 1 ===
-
- 練習 1: Rat Cat Dog という文字列を全てh3のサイズで作り、文字の色を、赤、青、ピンクにしなさい。test2.html というファイルにし、ローカルなどこかのフォルダーに保存し、ブラウザで表示しなさい。
+
 Rat Cat Dog という文字列を全てh3のサイズで作り、文字の色を、赤、青、ピンクにしなさい。test2.html というファイルにし、ローカルなどこかのフォルダーに保存し、ブラウザで表示しなさい。
<pre>
<pre>
25 行: 27 行:
です。カラーの種類については
です。カラーの種類については
-
- http://www.htmq.com/color/colorname.shtml
+
* http://www.htmq.com/color/colorname.shtml
 +
を参考にしてください。このhtmlファイルはtest2.html としましょう。
-
を参考にしてください。このhtmlファイルはtest2.html としましょう。~
+
 この例を前章の練習の例と比べますと、文字の大きさを前章の例では<hn>というタグで指定しましたが、ここでは<font sze=n ...>というタグで指定しています。<hn>の場合には数字nが大きいほど文字は小さくなりますが<font size=n ...>の場合にはnが大きくなるほど文字は大きくなります。また<hn>の場合には改行がされますが、<font sze=n ...>の場合には改行されないので<br>という改行のためのタグが必要です。
-
この例を前章の練習の例と比べますと、文字の大きさを前章の例では<hn> というタグで~
+
=== 練習 2 ===
-
指定しましたが、ここでは<font sze=n ...> というタグで
+
-
指定しています。<hn> の場合には数字nが大きいほど文字は小さくなりますが<font sze=n ...>
+
-
の場合にはnが大きくなるほど文字は大きくなります。
+
-
また<hn> の場合には改行がされますが、<font sze=n ...> の場合には
+
-
改行されないので<br> という改行のためのタグが必要です。
+
-
== 練習 2 ==
+
 次の写真をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(写真の上で右クリックし、名前を付けて保存を選び、autumninporland.jpg という名前を付ければよい)、この写真とそれの説明「ポーランドの秋」をつけたWebページを作りなさい(htmlファイルの名はtest3.htmlとする)。
-
- 練習 2: 次の写真をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(写真の上で右クリックし、名前を付けて保存を選び、autumninporland.jpg という名前を付ければよい)、この写真とそれの説明「ポーランドの秋」をつけたWeb ページを作りなさい(htmlファイルの名はtest3.htmlとする)。
+
[[ファイル:COMHOC00010003_autumninporland.jpg]]
-
 
+
-
#ref(autumninporland.jpg)
+
<pre>
<pre>
51 行: 47 行:
</pre>
</pre>
-
== 練習 3 ==
+
=== 練習 3 ===
-
- 練習 3: 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、ship.GIF という名前を付ければよい)、この絵とそれの説明「Ship (Pictogram).」 ページを作りなさい(htmlファイルの名はtest11.htmlとする)。
+
 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、ship.GIF という名前を付ければよい)、この絵とそれの説明「Ship (Pictogram).」 ページを作りなさい(htmlファイルの名はtest11.htmlとする)。
-
#ref(ship.GIF)
+
[[ファイル:COMHOC00010003_ship.GIF]]
<pre>
<pre>
66 行: 62 行:
</pre>
</pre>
-
== 練習 4 ==
+
=== 練習 4 ===
-
- 練習 4: 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、airplane.GIF という名前を付ければよい)、この絵とそれの説明「Ship (Pictogram).」 ページを作りなさい(htmlファイルの名はtest12.htmlとする)。
+
 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、airplane.GIF という名前を付ければよい)、この絵とそれの説明「Ship (Pictogram).」 ページを作りなさい(htmlファイルの名はtest12.htmlとする)。
-
#ref(airplane.GIF)
+
[[ファイル:COMHOC00010003_airplane.GIF]]
-
== 練習 5 ==
+
=== 練習 5 ===
-
- 練習 5: 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、car.GIF という名前を付ければよい)、この絵とそれの説明「Car (Pictogram).」 ページを作りなさい(htmlファイルの名はtest13.htmlとする)。
+
 次の絵をあなたのパソコンの、htmlファイルを収めるのと同じフォルダーにダウンロードし(絵の上で右クリックし、名前を付けて保存を選び、car.GIF という名前を付ければよい)、この絵とそれの説明「Car (Pictogram).」 ページを作りなさい(htmlファイルの名はtest13.htmlとする)。
-
#ref(car.GIF)
+
[[ファイル:COMHOC00010003_car.GIF]]
-
== 練習 6 ==
+
=== 練習 6 ===
-
- 練習 6: 次のようなhtmlファイルをあなたのパソコンにつくります。すなわち
+
 次のようなhtmlファイルをあなたのパソコンにつくります。すなわち
-
ship~
+
 
-
airplane~
+
* ship
-
car~
+
* airplane
-
という3つの単語が表示され、それぞれの文字列に、test11.html,test12.html,test13.html
+
* car
-
がリンクされているようにします(それぞれの単語上でクリックするとそれぞれのhtmlファイルが表示される)。このhtmlファイルをtest00.html とします。このhtmlファイルをブラウザの「ファイルから実行」機能で実行させてみましょう。
+
 
 +
という3つの単語が表示され、それぞれの文字列に、test11.html,test12.html,test13.html がリンクされているようにします(それぞれの単語上でクリックするとそれぞれのhtmlファイルが表示される)。このhtmlファイルをtest00.html とします。このhtmlファイルをブラウザの「ファイルから実行」機能で実行させてみましょう。
<pre>
<pre>
97 行: 94 行:
   </html>
   </html>
</pre>
</pre>
-
 
-
 
-
 
-
 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 が使われてきました。
 
-
 
-
* [[wikipedia_ja:HyperText_Markup_Language|Hyper Text Markup Language(Wikipedia)]] 
 
-
 
-
 上の資料にはhtmlの概略が述べられていますが、具体的な書き方については
 
-
 
-
* http://www.htmq.com/
 
-
 
-
 を参考にするといいでしょう。
 
-
 
-
== 練習 ==
 
-
 
-
 Rat Cat Dog という文字列を3行で順に大きな文字で表示するhtmlファイルを作り、ブラウザで表示しなさい(ブラウザには直接ローカルなhtmlファイルを表示させる機能があります。Internet Explorer ではファイルメニューで開くを選択すればいいのです)。このhtmlファイルの内容は
 
-
 
-
<pre>
 
-
<html>
 
-
<body>
 
-
<h3>Rat <h2>Cat<h1>Dog
 
-
</body>
 
-
</html>
 
-
</pre>
 
-
 
-
です。
 
== CAIテスト  ==
== CAIテスト  ==
* [[cai_ja:COMHOC00010003|CAIテストのページへ]]
* [[cai_ja:COMHOC00010003|CAIテストのページへ]]

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

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

目次

概要

 前章で紹介した資料

にもとづいて、更に高度な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>

です。カラーの種類については

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

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

練習 2

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

ファイル:COMHOC00010003_autumninporland.jpg

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

練習 3

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

ファイル:COMHOC00010003_ship.GIF

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

練習 4

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

ファイル:COMHOC00010003_airplane.GIF

練習 5

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

ファイル:COMHOC00010003_car.GIF

練習 6

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

  • ship
  • airplane
  • car

という3つの単語が表示され、それぞれの文字列に、test11.html,test12.html,test13.html がリンクされているようにします(それぞれの単語上でクリックするとそれぞれのhtmlファイルが表示される)。このhtmlファイルをtest00.html とします。この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>

CAIテスト

個人用ツール