htmlのページ of jikkyo.農業教育.net

2015-11-07

農業情報処理(実教出版)　学習支援サイト

ｈｔｍｌに関する基本的な演習のページ

（メモ帳とブラウザがあればできる演習です）

ｈｔｍｌに関する基本的な内容を学習します。

［生徒のみなさんへ］

フォルダ「WebClass」内に01～40のフォルダーがあります。自分の番号を間違えないように。フォルダ構成図
各自のフォルダー内の「index.html」ファイルをメモ帳で編集しながら実習しますので，
話をよく聞いて，一緒に進めましょう。

［授業を担当する先生へ］

授業で生徒が共有するディレクトリ内に，生徒が直接アクセスできるフォルダを作成し，indexファイルの画面
その中に，index.html　と　コンテンツデータ　を保存しましょう（図参照）
フォルダ「WebClass」に生徒のページへリンクしたindex.htmlを作成すると簡単にページを確認できます。

［演習１］インデックスファイルを確認してみましょう！

※InternetExploreを開き，自分の番号のフォルダにある「index.html」ファイルをドラッグ＆ドロップする。
↓
真っ白なページが表示される。

Q：タイトルは？ ==>　　　　A：農業情報処理（htmlの基礎）

［演習２］インデックスファイルをメモ帳で開こう！

自分の番号フォルダー内にある，index.htmlファイルを右クリックし，
「プログラムから開く」から，メモ帳を選択する。
メモ帳に以下の通りに表示される。
※ ＜＞に挟まれた部分をタグというが，＜◎◎＞～～～＜／◎◎＞と対なっている。

［やってみよう！］演習２画面
<html>~~</html>タグは，ドキュメントがＨＴＭＬで書かれていることを宣言する。
ドキュメント全体の最初と最後に置く。
<tytle>~~</tytle>で挟まれている部分は，タイトルとして表示される。
<tytle>~~</tytle>の間に，「自分の名前」と入力してみよう。
<body>~~</body>で囲まれている部分は，ドキュメントとしてブラウザに表示される。
<tytle>~~</tytle>で囲まれた部分を「自分の名前」に書き換えてみよう。

メモ帳で，「＞ファイル＞上書き保存（ｓ）」を選択する（ファイルが上書きされる）。
ブラウザの画面に戻り，「 Ctrl ＋ｒ」を押して，ページを再読み込みする。
インデックスの「農業情報処理（htmlの基礎）」が「自分の名前」に変更される。

※演習２のソース

<html>
<head>
<title>自分の名前 </title>
</head>
<body>

</body>
</html>

［演習３］<tytle></tytle>と<body></body>の間に文字を入れる

［やってみよう！］演習３画面

<body>~~</body>の間に「農業情報処理ｈｔｍｌ演習のサンプルページ。
 ｈｔｍｌについて学びましょう。」
と入力し，上書き保存して，再読み込みする。

※演習３のソース

<html>
<head>
<title>自分の名前</title>
</head>
<body>
農業情報処理ｈｔｍｌ演習のサンプルページ。ｈｔｍｌについて学びましょう。
</body>
</html>

［演習４］背景の色と標準の文字色を指定しよう

［やってみよう！］演習４画面
<body>〜〜</body>の間に以下のように入力してみよう
<body bgcolor="green">
<body text="yellow">
農業情報処理ｈｔｍｌ演習・・・・・・ｈｔｍｌについて学びましょう。

解説
背景の色：緑（ green or #006500 ）
文字の色：黄（ yellow or #ffff00 ）

※演習４のソース

<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">
農業情報処理ｈｔｍｌ演習のサンプルページ。ｈｔｍｌについて学びましょう。
</body>
</html>

［演習５］フォントの大きさ・文字色を指定する ~~

［やってみよう！］演習５画面
「農業情報処理ｈｔｍｌ演習のサンプルページ･･･」の文字の上下に，タグを入力する。

農業情報処理ｈｔｍｌ演習のサンプルページ

解説
　　〜〜　
※文字サイズが大きくなり，文字色が「オレンジ」になった。

※演習５のソース

［演習６］フォンとの大きさを比較する ~~
［演習７］改行のタグを確認する ／

［やってみよう！］
フォントの大きさは，「１」～「７」で指定する。
※１行目のタグを入力し，その行を６行分複写して，サイズを変更する。
改行は，段落を変える と行が変わる がある。
このタグは， ・ は省略可能である。
※「･･･サンプルページ」の後に，タグを入れる。

解説（演習６）
　　〜〜　
font size=“１〜７”で大きさが決定される。画面から１よりも７の方が大きくなることがわかる。
また，color=“色”でフォントの色を変更することができる。
文字・色ともに，変更されるのは，　〜　の範囲。
１行目のオレンジ色は演習５で指定したものであり，
それ以外の文字は <tbody text=“yellow”>で指定した黄色が表示される。

解説（演習７）
以下の，文字の大きさに関するソースの行末を確認する。文字１〜３=====>　<ｂｒ>　　Break（改行）の略。文章を明示的に改行するために使われる。文字４〜７=====>　<ｐ>　　　Ｐaragraph（段落）の略。IEでは段落は1行分の間隔をあけて表示されます。
画面で違いを確認すると，「フォントの大きさ１〜３」行目までは次行が改行されているのが分かる。
「フォントの大きさ４〜６」では，１行が１段落のため，行間が１行空いているように表示される。

※演習６・７のソース

<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">ｈｔｍｌについて学びましょう。

文字の大きさ１ 
文字の大きさ２ 
文字の大きさ３ 
文字の大きさ４
文字の大きさ５
文字の大きさ６
文字の大きさ７
</body>
</html>

［演習８］テキストの位置を変える ~~ ☆・・・ left center right

［やってみよう！］
テキストの位置を変えましょう。
タイトル行の文字の大きさを最大の７に換え，センタリングする。

農業情報処理ｈｔｍｌ演習のサンプルページ

フォントの大きさの最後の３行を左・中央・右に寄せる

フォントの大きさ５

フォントの大きさ６

フォントの大きさ７

解説（演習８）
行の中で文字を「左寄せ」・「中央揃い」・「右寄せ」する時は，　〜　　で指定する。
☆の部分が　左：ｌｅｆｔ　　中央：ｃｅｎｔｅｒ　　右：ｒｉｇｈｔ　で指定する。

※演習８のソース

<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">
フォントの大きさ５

フォントの大きさ６

フォントの大きさ７
</body>
</html>

さまざまな装飾
［演習９］文字を飾る抹消線<s></s> ／太文字 ／下線 ~~
［演習１０］横罫線で変化を付ける <hr>

［やってみよう！］
文字に装飾をしてみよう！
「左寄せ」の文字は抹消線（見え消し）
「センタリング」の文字は太文字
「右寄せ」の文字は下線

解説（演習９）
行の中で文字を「左寄せ」・「中央揃い」・「右寄せ」する時は，　〜　　で指定する。
☆の部分が　左：ｌｅｆｔ　　中央：ｃｅｎｔｅｒ　　右：ｒｉｇｈｔ　で指定する。
「見え消し線」は　<s>　〜 </s>、「太字」は　　〜 、　「アンダーライン」は　　〜 　を使う。
他には，斜体　　〜 　などがある

［やってみよう！］
罫線を引いてみよう！
　　線の太さ：<hr size="★”>　　　★･･･ピクセル数（長さは％指定も可）
　　線の長さ：<hr width"★”>　　　★･･･ピクセル数（長さは％指定も可）
　　線の位置：<hr align="☆”>　　　☆･･･left / center / right
　　影のない線：<hr noshade>
・オレンジのタイトルの上下に指定無しの線を引く
・中央の「フォントの大きさ６」の上に，太さ８ピクセル，長さ２５％を中央に指定
・中央の「フォントの大きさ６」の下に，太さ３０ピクセル，長さ５００の線を中央に指定
・最下行に影のない線を指定

解説（演習１０）
ページを横断するように横罫線を引く時は，<ｈｒ>　で指定する。
横罫線の「太さ」・「長さ」・「位置」・「陰の有無」を指定することができる。
位置は，左：ｌｅｆｔ　　中央：ｃｅｎｔｅｒ　　右：ｒｉｇｈｔ　と文字の位置と同様である。

※演習９・１０のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">
<s>フォントの大きさ５</s>
<hr size="8" width="25%">
フォントの大きさ６
フォントの大きさ７
<hr noshade>
</body>
</html>

［演習１１］写真を挿入する <img src="写真ファイル">

［やってみよう！］
ページ内に写真を表示しよう！
表示したい写真を自分のフォルダーに複写する
ここでは，学校の校舎の写真（ファイル名：kosha.jpg）を表示する
<hr size="30" width="500">で改行し，以下を入力する。

上書き保存して，ブラウザで表示する。

解説（演習11）
画像を表示するタグは，imgであり，画像ファイルはsrc属性で指定する。
Webページで表示できる画像形式は，GIF・JPEG・PNGの３種類。
写真の大きさは，width属性とhight属性で指定することができる。
今回はサイズを調整した画像を用意したので，サイズ指定は行わない。

※演習１１のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">
<s>フォントの大きさ５</s>
<hr size="8" width="25%">
フォントの大きさ６
フォントの大きさ７
<hr noshade>
</body>
</html>

［演習１２］リンクを張る <a href="☆">~~</a> ☆･･･URL等

生徒各自のフォルダの外にある「indexhtml」は，生徒のページへ移動するためのインデックスファイルです。
生徒のページに「index.html」へのリンクを設定すれば，index.htmlページから生徒各自のページへ移動して，そのページのリンクからindex.htmlへ移動できるようになります。

［やってみよう！］
ページ内に「index.html」へのリンクを作成しましょう！
「フォントの大きさ７」の文字のしたに，「インデックスへ」という文字をサイズ６で入力しましょう。
インデックスへ
文字「インデックスへ」を，<a href="../index.html”>　　　</a>で挟み込みます

解説（演習12）
＜ａ＞タグは，アンカー（Anchor）の略で，リンクの出発点と到着点を指定するタグで，href属性でリンク先を指定します。
今回はフォルダの外にあるindex.htmlファイル（一つ上のディレクトリにある）へ移動することになるので，index.htmlの前に，
．．／を付けます。
※「リンク」の色は，ブラウザで指定された色が表示される。

※演習１２のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green">
<body text="yellow">
<s>フォントの大きさ５</s>
<hr size="8" width="25%">
フォントの大きさ６
フォントの大きさ７
<a href="../index.html">インデックスへ</a>
<hr noshade>
</body>
</html>

［演習１３］写真にリンクを張る <a href="☆">~~</a> ☆･･･URL等

［やってみよう！］
ページ内の写真にリンクを作成しましょう！
<a href="../index.html">ここが文字 or 写真のファイル</a>

<a href="../index.html"></a>

解説（演習13）
文字も写真も同様に，リンクを付けることができる。
画面を見て分かるように，写真にリンクの枠が付いているのが分かる。

※演習１３のソース
<html>

<head>
<title>自分の名前</title> 　　　　　　　　　　　　　
</head>
<body>
<body bgcolor="green"> 　　　　　　　　　　　　　　　
<body text="yellow"> 　　　　　　　　　　　　　　　　
<body link="red”>
　　　　　　　　　　　　　　　　　 
<hr>
農業情報処理ｈｔｍｌ演習のサンプルページ
<hr>
フォントの大きさ１ 
フォントの大きさ２ 
フォントの大きさ３ 
フォントの大きさ４
　　<s>フォントの大きさ５</s>
　　<hr size="8" width="25%">
　　フォントの大きさ６
　　<hr size="30" width="500">
<a href="../index.html"><img src="kosha.jpg"></a>
　　フォントの大きさ７
<a href="../index.html">インデックスへ</a>
<hr noshade>
</body>
</html>

［演習14］アプリケーションソフトを使ったWebページの作成

プレゼンテーションソフト（パワーポイントなど）を使ってもWebページを作成できる。

Webページの作成の他に，他形式で保存できる

※保存先は、自分のフォルダーへ
(1)PNGポータブルネットワークグラフィックス形式
(2)webページ
(3)ビデオ形式(※Excel2007ではビデオ形式で保存できない）

いろいろなファイル形式にリンクを張る

(1)～(3)にリンクを張る（以下のように、前後をリンクタグで囲む）。
※リンクファイルを指定するときは、ファイル名・拡張子に注意する。

<a href="../sample_00.png">
(1)PNGポータブルネットワークグラフィックス形式
</a>

<a href="../sample_00.html">
(2)webページ
</a>

<a href="../sample_00.wmv">
(3)ビデオ
</a>

解説
演習13で行ったように，文字・写真にはリンクを付けることができる。
演習14では，文字や写真だけでなく，Webページや映像にもリンクを付けることがわかる。

農業情報処理(実教出版)　学習支援サイト

ｈｔｍｌに関する基本的な演習のページ

（メモ帳とブラウザがあればできる演習です）

［演習１］インデックスファイルを確認してみましょう！

［演習２］インデックスファイルをメモ帳で開こう！

［演習３］<tytle></tytle>と<body></body>の間に文字を入れる

［演習４］背景の色と標準の文字色を指定しよう

［演習５］フォントの大きさ・文字色を指定する <font>~~</font>

［演習６］フォンとの大きさを比較する <font>~~</font>
［演習７］改行のタグを確認する <br> ／ <p>

［演習８］テキストの位置を変える <p align="☆">~~</p> ☆・・・ left center right

さまざまな装飾
［演習９］文字を飾る抹消線<s></s> ／太文字<b></b> ／下線 <u>~~</u>
［演習１０］横罫線で変化を付ける <hr>

［演習１１］写真を挿入する <img src="写真ファイル">

［演習１２］リンクを張る <a href="☆">~~</a> ☆･･･URL等

［演習１３］写真にリンクを張る <a href="☆">~~</a> ☆･･･URL等

［演習14］アプリケーションソフトを使ったWebページの作成

農業情報処理(実教出版) 学習支援サイト

ｈｔｍｌに関する基本的な演習のページ

（メモ帳とブラウザがあればできる演習です）

［演習１］インデックスファイルを確認してみましょう！

［演習２］インデックスファイルをメモ帳で開こう！

［演習３］<tytle>~~</tytle>と<body>~~</body>の間に文字を入れる

［演習４］背景の色と標準の文字色を指定しよう

［演習５］フォントの大きさ・文字色を指定する <font>~~</font>

［演習６］フォンとの大きさを比較する <font>~~</font> ［演習７］改行のタグを確認する <br> ／ <p>

［演習８］テキストの位置を変える <p align="☆">~~</p> ☆・・・ left center right

さまざまな装飾 ［演習９］文字を飾る 抹消線<s>~~</s> ／ 太文字<b>~~</b> ／ 下線 <u>~~</u> ［演習１０］横罫線で変化を付ける <hr>

［演習１１］写真を挿入する <img src="写真ファイル">

［演習１２］リンクを張る <a href="☆">~~</a> ☆･･･URL等

［演習１３］写真にリンクを張る <a href="☆">~~</a> ☆･･･URL等

［演習14］アプリケーションソフトを使ったWebページの作成

農業情報処理(実教出版)　学習支援サイト

［演習３］<tytle></tytle>と<body></body>の間に文字を入れる

［演習６］フォンとの大きさを比較する <font>~~</font>
［演習７］改行のタグを確認する <br> ／ <p>

さまざまな装飾
［演習９］文字を飾る抹消線<s></s> ／太文字<b></b> ／下線 <u>~~</u>
［演習１０］横罫線で変化を付ける <hr>