タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦
ウェブページのしくみ 画面に表示される文字 装飾や画像の指定 画像や音声などのファイル ＨＴＭＬファイルの指定に従ってブラウザが表示する。 文字だけの ＨＴＭＬファイル バイナリー ファイル
ウェブページの見え方 指示に従って見る側で構成される。 作ったものと見えるものは違う場合がある。 ワープロとは違う。 機種の違い ブラウザの違い 画面サイズの違い フォントの違い ワープロとは違う。
＜ と ＞で挟まれた文字は画面には表示されない。 ＨＴＭＬとは Hyper Text Markup Language 装飾やハイパーリンクをもった文字文書 装飾にはタグを使う。 ＜ と ＞で挟まれた文字は画面には表示されない。
タグによる装飾の例 単独利用型のタグ・・・例）改行＜ＢＲ＞ あいう えお あいう えお <BR> ブラウザで見ると あいうえお 改行されない 改行される
タグによる装飾の例 サンドイッチ型・・・例）斜体＜I＞と＜／I＞ あいう えお あ いう えお <I> </I> あ いう えお <I> </I> ブラウザで見ると あいうえお あいうえお 挟まれた文字だけが 斜体になっている
様々なタグ（１） 見出し <H○> </H○> 区切り線 <HR> 改行 <BR> 画像 <IMG SRC=画像ファイル名> リンク <A HREF=HTMLファイル名></A> 〇には数字が入る
様々なタグ（２） 文字の大きさ <FONT SIZE=○> 文字の色 <FONT COLOR=○> 中央寄せ <CENTER> </CENTER> 箇条書き <UL> </UL> 各項目 <LI>
様々なタグ（３） 構造をあらわすタグ <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> <HTML> </HTML> <HEAD> </HEAD> 表示なし <BODY> </BODY> 本 文
様々なタグ（４） 表 <TABLE> </TABLE> 表の１行 <TR> </TR> 表の１マス <TD> </TD>
表のタグ <TABLE> <TR> <TD> <TD> </TD>
タグのオプション WIDTH=幅 HEIGHT=高さ ALIGN= SIZE=文字のサイズ COLOR=色 LEFT CENTER RIGHT TOP MIDDLE BOTTOM SIZE=文字のサイズ COLOR=色
幅や高さの指定 ドット数で指定する方法 ウィンドウ全体に対する相対的な幅で指定する方法 例）WIDTH=200 幅を200ドットにする。 HEIGHT=100 高さを100ドットにする。 ウィンドウ全体に対する相対的な幅で指定する方法 例）WIDTH=50% 幅を窓全体の幅の50%にする。
色の指定 COLORやBGCOLORオプションで使う。 色名で指定 赤・緑・青の色の配合の割合で指定 COLOR=Red など 色見本参照 COLOR= #00FFFF など 色見本参照 # 00 FF FF
TABLEタグのオプション <TABLE> <TD COLSPAN=2> </TD> <TR> <TD> </TD> <TD> </TD> </TR> <TD ROWSPAN=2> </TD> <TR> </TR> </TABLE>
画像の形式と取り込み 画像の形式 画像の取り込み ＧＩＦ画像 ＪＰＥＧ画像 画像のところにカーソルを持っていって、右クリック 「名前をつけて画像を保存」を選び、保存先を指定
なぜタグを学習するのか インターネットの仕組みの理解 実際には何が流れているのか 高度な技術への発展 ＣＧＩ Ｉ－ｍｏｄｅ ごみタグの整理