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