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

2012年6月25日 (月) 06:05 における Admin による編集

Admin — Mon, 25 Jun 2012 06:05:51 GMT

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

-	~~#ref(autumninporland~~.jpg)	+	[[ファイル:COMHOC00010003_autumninporland.jpg]]

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

-	~~#ref(airplane~~.GIF)	+	[[ファイル:COMHOC00010003_airplane.GIF]]

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

-	~~#ref(car~~.GIF)	+	[[ファイル:COMHOC00010003_car.GIF]]

	=== 練習 6 ===		=== 練習 6 ===

2012年6月25日 (月) 05:59 における Admin による編集

Admin — Mon, 25 Jun 2012 05:59:42 GMT

←前の版		2012年6月25日 (月) 05:59時点における版
4 行:		4 行:
	== 概要 ==		== 概要 ==

-	~~前章で紹介した資料~~	+	前章で紹介した資料

	* http://www.htmq.com/		* http://www.htmq.com/
10 行:		10 行:
	にもとづいて、更に高度なWebページ作りを練習しましょう。		にもとづいて、更に高度なWebページ作りを練習しましょう。

-	== 練習 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 としましょう。

-	~~を参考にしてください。このｈｔｍｌファイルはtest2~~.~~html としましょう。~~~	+	この例を前章の練習の例と比べますと、文字の大きさを前章の例では＜hn＞というタグで指定しましたが、ここでは＜font sze=n ...＞というタグで指定しています。＜hn＞の場合には数字ｎが大きいほど文字は小さくなりますが＜font size=n ...＞の場合にはnが大きくなるほど文字は大きくなります。また＜hn＞の場合には改行がされますが、＜font sze=n ...＞の場合には改行されないので＜br＞という改行のためのタグが必要です。

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

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

	#ref(autumninporland.jpg)		#ref(autumninporland.jpg)
51 行:		47 行:
	</pre>		</pre>

-	== 練習 3 ==	+	=== 練習 3 ===

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

	#ref(ship.GIF)		#ref(ship.GIF)
66 行:		62 行:
	</pre>		</pre>

-	== 練習 4 ==	+	=== 練習 4 ===

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

	#ref(airplane.GIF)		#ref(airplane.GIF)

-	== 練習 5 ==	+	=== 練習 5 ===

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

	#ref(car.GIF)		#ref(car.GIF)

-	== 練習 6 ==	+	=== 練習 6 ===

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

Admin: ページの作成: ホームページ作成とアップロード＞ HTMLタグその2 == 概要 == 前章で紹介した…

Admin — Mon, 25 Jun 2012 05:53:31 GMT

ページの作成: ホームページ作成とアップロード＞ HTMLタグその2 == 概要 == 前章で紹介した…

新規ページ

[[ホームページ作成とアップロード]]
＞ [[ホームページ作成とアップロード/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

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

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

== 練習 2 ==

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

#ref(autumninporland.jpg)

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

== 練習 3 ==

- 練習　３：　次の絵をあなたのパソコンの、ｈｔｍｌファイルを収めるのと同じフォルダーにダウンロードし（絵の上で右クリックし、名前を付けて保存を選び、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 ==

- 練習　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 とします。このｈｔｍｌファイルをブラウザの「ファイルから実行」機能で実行させてみましょう。

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

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

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

です。

== CAIテスト ==

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

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

2012年6月25日 (月) 06:05 における Admin による編集

2012年6月25日 (月) 05:59 における Admin による編集

Admin: ページの作成: ホームページ作成とアップロード ＞ HTMLタグその2 == 概要 == 前章で紹介した…

Admin: ページの作成: ホームページ作成とアップロード＞ HTMLタグその2 == 概要 == 前章で紹介した…