htmlに関する基本的な演習のページ
(メモ帳とブラウザがあればできる演習です)
htmlに関する基本的な内容を学習します。
[生徒のみなさんへ]
フォルダ「WebClass」内に01~40のフォルダーがあります。自分の番号を間違えないように。フォルダ構成図
各自のフォルダー内の「index.html」ファイルをメモ帳で編集しながら実習しますので,
話をよく聞いて,一緒に進めましょう。
[授業を担当する先生へ]
授業で生徒が共有するディレクトリ内に,生徒が直接アクセスできるフォルダを作成し,indexファイルの画面
その中に,index.html と コンテンツデータ を保存しましょう(図参照)
フォルダ「WebClass」に生徒のページへリンクしたindex.htmlを作成すると簡単にページを確認できます。
[演習1]インデックスファイルを確認してみましょう!
※InternetExploreを開き,自分の番号のフォルダにある「index.html」ファイルをドラッグ&ドロップする。
↓
真っ白なページが表示される。
Q:タイトルは? ==> A:農業情報処理(htmlの基礎)
[演習2]インデックスファイルをメモ帳で開こう!
自分の番号フォルダー内にある,index.htmlファイルを右クリックし,
「プログラムから開く」から,メモ帳を選択する。
メモ帳に以下の通りに表示される。
※ < >に挟まれた部分をタグというが,<◎◎>~~~</◎◎>と対なっている。
[やってみよう!]演習2画面
<html>~~</html>タグは,ドキュメントがHTMLで書かれていることを宣言する。
ドキュメント全体の最初と最後に置く。
<tytle>~~</tytle>で挟まれている部分は,タイトルとして表示される。
<tytle>~~</tytle>の間に,「 自分の名前 」と入力してみよう。
<body>~~</body>で囲まれている部分は,ドキュメントとしてブラウザに表示される。
<tytle>~~</tytle>で囲まれた部分を「自分の名前」に書き換えてみよう。
メモ帳で,「 >ファイル>上書き保存(s) 」を選択する(ファイルが上書きされる)。
ブラウザの画面に戻り,「 Ctrl + r 」を押して,ページを再読み込みする。
インデックスの「農業情報処理(htmlの基礎)」が「自分の名前」に変更される。
※演習2のソース
<html>
<head>
<title>自分の名前 </title>
</head>
<body>
</body>
</html>
[演習3]<tytle>~~</tytle>と<body>~~</body>の間に文字を入れる
[やってみよう!]演習3画面
<body>~~</body>の間に「 農業情報処理html演習のサンプルページ。
<!--この部分は表示されません--> htmlについて学びましょう。 」
と入力し,上書き保存して,再読み込みする。
※演習3のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
農業情報処理html演習のサンプルページ。<!--この部分は表示されません-->htmlについて学びましょう。
</body>
</html>
[演習4]背景の色と標準の文字色を指定しよう
[やってみよう!]演習4画面
<body>〜〜</body>の間に以下のように入力してみよう
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 -->
農業情報処理html演習・・・・・・htmlについて学びましょう。
解説
背景の色:緑 ( green or #006500 )
文字の色:黄( yellow or #ffff00 )
※演習4のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 -->
農業情報処理html演習のサンプルページ。<!--この部分は表示されません-->htmlについて学びましょう。
</body>
</html>
[演習5]フォントの大きさ・文字色を指定する <font>~~</font>
[やってみよう!]演習5画面
「 農業情報処理html演習のサンプルページ ・・・」の文字の上下に,タグを入力する。
<font size="5" color="orange">
農業情報処理html演習のサンプルページ
</font>
解説
<font size="5" color="orange”> 〜〜 </font>
※文字サイズが大きくなり,文字色が「オレンジ」になった。
※演習5のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<font size="5" color="orange”><!-- 文字サイズを「5」,文字色をオレンジに変更 —>
農業情報処理html演習のサンプルページ。<!--この部分は表示されません-->htmlについて学びましょう。
</font>
</body>
</html>
[演習6]フォンとの大きさを比較する <font>~~</font>
[演習7]改行のタグを確認する <br> / <p>
[やってみよう!]
フォントの大きさは,「 1 」~「 7 」で指定する。
※1行目のタグを入力し,その行を6行分複写して,サイズを変更する。
改行は,段落を変える <p> と 行が変わる <br> がある。
このタグは,</p> ・ </br> は省略可能である。
※「・・・サンプルページ」の後に,<p>タグを入れる。
解説(演習6)
<font size="5" color="orange”> 〜〜 </font>
font size=“1〜7”で大きさが決定される。画面から1よりも7の方が大きくなることがわかる。
また,color=“色”でフォントの色を変更することができる。
文字・色ともに,変更されるのは,<font> 〜 </font >の範囲。
1行目のオレンジ色は演習5で指定したものであり,
それ以外の文字は <tbody text=“yellow”>で指定した黄色が表示される。
解説(演習7)
以下の,文字の大きさに関するソースの行末を確認する。文字1〜3=====> <br> Break(改行)の略。文章を明示的に改行するために使われる。文字4〜7=====> <p> Paragraph(段落)の略。IEでは段落は1行分の間隔をあけて表示されます。
画面で違いを確認すると,「フォントの大きさ1〜3」行目までは次行が改行されているのが分かる。
「フォントの大きさ4〜6」では,1行が1段落のため,行間が1行空いているように表示される。
※演習6・7のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<font size="5" color="orange”><!-- 文字サイズを「5」,文字色をオレンジに変更 —>
農業情報処理html演習のサンプルページ。<!--この部分は表示されません-->htmlについて学びましょう。
</font>
<font size="1">文字の大きさ1</font><br>
<font size="2">文字の大きさ2</font><br>
<font size="3">文字の大きさ3</font><br>
<font size="4">文字の大きさ4</font><p>
<font size="5">文字の大きさ5</font><p>
<font size="6">文字の大きさ6</font><p>
<font size="7">文字の大きさ7</font><p>
</body>
</html>
[演習8]テキストの位置を変える <p align="☆">~~</p> ☆・・・ left center right
[やってみよう!]
テキストの位置を変えましょう。
タイトル行の文字の大きさを最大の7に換え,センタリングする。
<p align="center">
<font size=“7" color="orange">農業情報処理html演習のサンプルページ</font>
</p>
フォントの大きさの最後の3行を左・中央・右に寄せる
<p align="left"><!-- 文字を左寄せする -->
<font size="5">フォントの大きさ5</font></p>
<p align="center"><!-- 文字をセンタリングする -->
<font size="6">フォントの大きさ6</font></p>
<p align="right"><!-- 文字を右寄せする -->
<font size="7">フォントの大きさ7</font></p>
解説(演習8)
行の中で文字を「左寄せ」・「中央揃い」・「右寄せ」する時は,<p align=“ ☆ ”> 〜 </p> で指定する。
☆の部分が 左:left 中央:center 右:right で指定する。
※演習8のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<p align="center">
<font size="5" color="orange">
農業情報処理html演習のサンプルページ
</font></p>
<font size="1">文字の大きさ1</font><br>
<font size="2">文字の大きさ2</font><br>
<font size="3">文字の大きさ3</font><br>
<font size="4">文字の大きさ4</font><p>
<p align="left"><!-- 文字を左寄せする -->
<font size="5">フォントの大きさ5</font></p>
<p align="center"><!-- 文字をセンタリングする -->
<font size="6">フォントの大きさ6</font></p>
<p align="right"><!-- 文字を右寄せする -->
<font size="7">フォントの大きさ7</font></p>
</body>
</html>
さまざまな装飾
[演習9]文字を飾る 抹消線<s>~~</s> / 太文字<b>~~</b> / 下線 <u>~~</u>
[演習10]横罫線で変化を付ける <hr>
解説(演習9)
行の中で文字を「左寄せ」・「中央揃い」・「右寄せ」する時は,<p align=“ ☆ ”> 〜 </p> で指定する。
☆の部分が 左:left 中央:center 右:right で指定する。
「見え消し線」は <s> 〜 </s>、「太字」は <b> 〜 </b>、 「アンダーライン」は <u> 〜 </u> を使う。
他には,斜体 <i> 〜 </i> などがある
[やってみよう!]
罫線を引いてみよう!
線の太さ:<hr size="★”> ★・・・ピクセル数(長さは%指定も可)
線の長さ:<hr width"★”> ★・・・ピクセル数(長さは%指定も可)
線の位置:<hr align="☆”> ☆・・・left / center / right
影のない線:<hr noshade>
・オレンジのタイトルの上下に指定無しの線を引く
・中央の「フォントの大きさ6」の上に,太さ8ピクセル,長さ25%を中央に指定
・中央の「フォントの大きさ6」の下に,太さ30ピクセル,長さ500の線を中央に指定
・最下行に影のない線を指定
解説(演習10)
ページを横断するように横罫線を引く時は,<hr> で指定する。
横罫線の「太さ」・「長さ」・「位置」・「陰の有無」を指定することができる。
位置は,左:left 中央:center 右:right と文字の位置と同様である。
※演習9・10のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<p align="center">
<font size="5" color="orange">
農業情報処理html演習のサンプルページ
</font></p>
<font size="1">文字の大きさ1</font><br>
<font size="2">文字の大きさ2</font><br>
<font size="3">文字の大きさ3</font><br>
<font size="4">文字の大きさ4</font><p>
<p align="left"><!-- 文字を左寄せする -->
<s><font size="5">フォントの大きさ5</font></s></p>
<p align="center"><hr size="8" width="25%">
<b><font size="6">フォントの大きさ6</font></b></p><!-- 文字をセンタリングする —>
<p align="center"><hr size="30" width="500"></p>
<p align="right"><!-- 文字を右寄せする -->
<u><font size="7">フォントの大きさ7</font></u></p>
<hr noshade>
</body>
</html>
[演習11]写真を挿入する <img src="写真ファイル">
[やってみよう!]
ページ内に写真を表示しよう!
表示したい写真を自分のフォルダーに複写する
ここでは,学校の校舎の写真(ファイル名:kosha.jpg)を表示する
<hr size="30" width="500">で改行し,以下を入力する。
上書き保存して,ブラウザで表示する。
解説(演習11)
画像を表示するタグは,imgであり,画像ファイルはsrc属性で指定する。
Webページで表示できる画像形式は,GIF・JPEG・PNGの3種類。
写真の大きさは,width属性とhight属性で指定することができる。
今回はサイズを調整した画像を用意したので,サイズ指定は行わない。
※演習11のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<p align="center">
<font size="5" color="orange">
農業情報処理html演習のサンプルページ
</font></p>
<font size="1">文字の大きさ1</font><br>
<font size="2">文字の大きさ2</font><br>
<font size="3">文字の大きさ3</font><br>
<font size="4">文字の大きさ4</font><p>
<p align="left"><!-- 文字を左寄せする -->
<s><font size="5">フォントの大きさ5</font></s></p>
<p align="center"><hr size="8" width="25%"></p>
<b><font size="6">フォントの大きさ6</font></b></p><!-- 文字をセンタリングする —>
<p align="center"><hr size="30" width="500"></p>
<p align="center”></p>
<p align="right"><!-- 文字を右寄せする -->
<u><font size="7">フォントの大きさ7</font></u></p>
<hr noshade>
</body>
</html>
[演習12]リンクを張る <a href="☆">~~</a> ☆・・・URL等
生徒各自のフォルダの外にある「indexhtml」は,生徒のページへ移動するためのインデックスファイルです。
生徒のページに「index.html」へのリンクを設定すれば,index.htmlページから生徒各自のページへ移動して,そのページのリンクからindex.htmlへ移動できるようになります。
[やってみよう!]
ページ内に「index.html」へのリンクを作成しましょう!
「フォントの大きさ7」の文字のしたに,「インデックスへ」という文字をサイズ6で入力しましょう。
<p align="center"><font size="6">インデックスへ</font></p>
文字「インデックスへ」を,<a href="../index.html”> </a>で挟み込みます
解説(演習12)
<a>タグは,アンカー(Anchor)の略で,リンクの出発点と到着点を指定するタグで,href属性でリンク先を指定します。
今回はフォルダの外にあるindex.htmlファイル(一つ上のディレクトリにある)へ移動することになるので,index.htmlの前に,
../を付けます。
※「リンク」の色は,ブラウザで指定された色が表示される。
※演習12のソース
<html>
<head>
<title>自分の名前</title>
</head>
<body>
<body bgcolor="green"><!-- 背景を緑色に変更 -->
<body text="yellow"><!-- 文字色を黄色に変更 —>
<p align="center">
<font size="5" color="orange">
農業情報処理html演習のサンプルページ
</font></p>
<font size="1">文字の大きさ1</font><br>
<font size="2">文字の大きさ2</font><br>
<font size="3">文字の大きさ3</font><br>
<font size="4">文字の大きさ4</font><p>
<p align="left"><!-- 文字を左寄せする -->
<s><font size="5">フォントの大きさ5</font></s></p>
<p align="center"><hr size="8" width="25%"></p>
<b><font size="6">フォントの大きさ6</font></b></p><!-- 文字をセンタリングする —>
<p align="center"><hr size="30" width="500"></p>
<p align="center”></p>
<p align="right"><!-- 文字を右寄せする -->
<u><font size="7">フォントの大きさ7</font></u></p>
<p align="center"><font size="6" color="red"><a href="../index.html">インデックスへ</a></font></p>
<hr noshade>
</body>
</html>
[演習13]写真にリンクを張る <a href="☆">~~</a> ☆・・・URL等
[やってみよう!]
ページ内の写真にリンクを作成しましょう!
<a href="../index.html">ここが文字 or 写真のファイル</a>
<p align="center”>
<a href="../index.html"></a></p>
解説(演習13)
文字も写真も同様に,リンクを付けることができる。
画面を見て分かるように,写真にリンクの枠が付いているのが分かる。
※演習13のソース
<html>
<head>
<title>自分の名前</title> <!-- タイトルを自分の名前に変更 -->
</head>
<body>
<body bgcolor="green"> <!-- 背景を緑色に変更 -->
<body text="yellow"> <!-- 文字色を黄色に変更 -->
<body link="red”>
<p align="center"> <!-- 文字をセンタリングする -->
<hr>
<font size="7" color="orange">農業情報処理html演習のサンプルページ</font></p>
<hr>
<font size="1">フォントの大きさ1</font><br><!-- 文字大きさを1~7に変更 -->
<font size="2">フォントの大きさ2</font><br>
<font size="3">フォントの大きさ3</font><br>
<font size="4">フォントの大きさ4</font><p>
<p align="left"><!-- 文字を左寄せする --><s><font size="5">フォントの大きさ5</font></s></p>
<p align="center"><hr size="8" width="25%">
<p align="center"><b><font size="6">フォントの大きさ6</font></b></p><!-- 文字をセンタリングする -->
<p align="center"><hr size="30" width="500">
<p align="center"><a href="../index.html"><img src="kosha.jpg"></a></p><!-- 写真をセンタリングする -->
<p align="right"><!-- 文字を右寄せする --><u><font size="7">フォントの大きさ7</font></u></p>
<p align="center"><font size="6" color="red"><a href="../index.html">インデックスへ</a></font></p>
<hr noshade>
</body>
</html>
[演習14]アプリケーションソフトを使ったWebページの作成
プレゼンテーションソフト(パワーポイントなど)を使ってもWebページを作成できる。
Webページの作成の他に,他形式で保存できる
※保存先は、自分のフォルダーへ
(1)PNGポータブルネットワークグラフィックス形式
(2)webページ
(3)ビデオ形式(※Excel2007ではビデオ形式で保存できない)
いろいろなファイル形式にリンクを張る
(1)~(3)にリンクを張る(以下のように、前後をリンクタグで囲む)。
※リンクファイルを指定するときは、ファイル名・拡張子に注意する。
<a href="../sample_00.png">
<font size="4">(1)PNGポータブルネットワークグラフィックス形式</font><p>
</a>
<a href="../sample_00.html">
<font size="4">(2)webページ</font><p>
</a>
<a href="../sample_00.wmv">
<font size="4”>(3)ビデオ</font><p>
</a>
解説
演習13で行ったように,文字・写真にはリンクを付けることができる。
演習14では,文字や写真だけでなく,Webページや映像にもリンクを付けることがわかる。