Microsoft Word - HTML.docx

Size: px

Start display at page:

Download "Microsoft Word - HTML.docx"

しほこたけはな
7 years ago
Views:

1 ホームページを見る環境 (Web ブラウザの種類やバージョン, 画面サイズなど)は多種多様であり, 自分が見ている状態と必ずしも同じではないことを前提に作成してください 1

2 1. 文書のレイアウト, 文字の書式原則として,タグと属性は大文字, 属性の値は"で囲んだ小文字で記述しますまた, 複数の属性は半角スペースで区切ります全角スペースは文字として扱われます作成時の注意全て入力して確認する必要はない少しずつ入力し,そのつど確認するテキストエディタと InternetExplorer は完成するまで閉じない [ 上書き保存 ][ 更新 ] 入力ミスはエラーにならないので表示結果を確認する演習問題 1 moji.html moji.txt をコピーし,タグを追加しなさい 1. 水平線半角スペースを表す <HR> <HR SIZE="8"> <HR WIDTH="100"> <HR SIZE="8" WIDTH="80%"> <HR NOSHADE> SIZE: 線の幅 (ピクセル) WIDTH: 線の長さ(ピクセル %) %はウィンドウサイズに対する割合 NOSHADE: 影なし 2. 文字の書式 (1) 文字の大きさ(1) ( 改行を含むヘッダーの意味で使う) <H1> 大きい文字 </H1> <H6> 小さい文字 </H6> (2) 文字の大きさ(2) ( 改行を含まないが属性でフォントや文字の色が指定できる) <FONT SIZE="4">サイズ 4 の文字 </FONT> SIZE は 1~7 7 が一番大きい,デフォルトは 3 の大きさ相対的な大きさの指定も可能 +1,-2 (3) 文字の修飾 <I> 斜体 </I> 斜体 <B> 太字 </B> 太字 <U> 下線 </U> 下線 <S> 取消し線 </S> 取消し線 y=x<sup>2</sup> y=x 2 下付きは<SUB> (4) 複数のタグを組み合わせる <FONT SIZE="4"><B>サイズ 4 の太字 </B></FONT> <I><B> 斜体の太字 </B></I> 3. 文書のレイアウト (1) 中央揃え <CENTER> ~ </CENTER> (2) 段落 <P> ~ </P> または <DIV> ~ </DIV> <P ALIGN="left center right"> ~ </P> left: 左揃え center: 中央揃え right: 右揃えのいずれか 1 つ指定 <P> 単独で使うと改行して 1 行空いた状態になる <P ALIGN="right"> 右揃え</P> (3) 左右に余白をあける <BLOCKQUOTE> ~ </ BLOCKQUOTE > 2

水平線半角スペースを表す <HR> <HR SIZE="8"> <HR WIDTH="100"> <HR SIZE="8" WIDTH="80%"> <HR NOSHADE> SIZE: 線の幅 (ピクセル) WIDTH: 線の長さ(ピクセル %) %はウィンドウサイズに対する割合 NOSHADE: 影なし 2.

3 2. 色の指定演習問題 2 moji.html 1カラー定数 ( 色の名前 )で指定 Red,Green,Blue,Ywllow,Black,White などがありますトーン( 色相 ) light bright deep dark あさい明るいこい暗い 2 色の番号で指定赤緑青 (RGB)それぞれの値を 16 進数の 2 桁 (00~FF)で表記して #0088FF 00: 赤 88: 緑 FF: 青の組合せで指定します #FF0000: 赤 #00FF00: 緑 #0000FF: 青 #FFFF00: 黄 #000000: 黒 #FFFFFF: 白 moji.html を変更しなさい (1) ウィンドウの背景 ( 黒 ) (2) 基本の文字色 ( 白 ) (3) サイズ 4 の太字 ( 赤 ) (4) 水平線 5 本 ( 黄,ピンク,Cyan,Lemonchiffon, 青 ) 応用をコピーし,タグを追加してサンプルのページを作りなさい ( 参考 ) 共有フォルダの, color.exe, color.xlsx をコピーして使ってください (1) ウィンドウの背景と文字 (ページ全体の基本の色 ) <BODY TEXT=" 文字の色 " BGCOLOR=" 背景色 "> (2) 文字 <FONT COLOR=" 文字の色 "> (3) 水平線 <HR COLOR=" 水平線の色 "> 3

#0088FF 00: 赤 88: 緑 FF: 青の組合せで指定します #FF0000: 赤 #00FF00: 緑 #0000FF: 青 #FFFF00: 黄 #000000: 黒 #FFFFFF: 白 moji.

4 3.マーキー <MARQUEE> ~ </MARQUEE > <MARQUEE> 動かす文字や画像 </MARQUEE > ちょっと一服属性 BEHAVIOR="scroll slide alternate" スクロールの動き scroll:スクロール(デフォルト) slide:スライド alternate: 折り返し DIRECTION="right left up down" スクロールの方向 left: 右から左 (デフォルト) right: 左から右 up: 下から上 down: 上から下 WIDTH="300" 横スクロール範囲 (ピクセル,%) HEIGHT="50%" 縦スクロール範囲 (ピクセル,%) SCROLLAMOUNT="3" スクロール速度 (ピクセル) 1( 遅い)~ウィンドウ幅デフォルトは 6 練習 moji.html, の適当な部分をマーキーで動かしてみよう演習問題 3 scroll.html 1.スクロール(デフォルト) 2. 画面の中央で折り返し BEHAVIOR,WIDTH 3. 下から上へゆっくりスクロール DIRECTION,SCROLLAMOUNT,HEIGHT="80%" 参考マーキーをネストすれば斜めに動きます Scroll2.html 4

HEIGHT="50%" 縦スクロール範囲 (ピクセル,%) SCROLLAMOUNT="3" スクロール速度 (ピクセル) 1( 遅い)~ウィンドウ幅デフォルトは 6 練習 moji.html,www.

5 4. 画像の表示 <IMG> 1. 利用できる画像ファイル GIF PNG JPG JPEG ホームページ用として標準的な画像ファイルの1つアニメーションなどに対応するユニシスの特許技術が使用されているので,GIF ファイルを使用するソフトの配布には注意が必要 (Graphics Interchange Format) GIF の置き換えを目的に開発された画像ファイル形式 (Portable Network Graphics) ホームページ用として標準的な画像ファイルの1つ主に写真を圧縮して使用する (Joint Photographic Experts Group) 2. 画像のインライン表示 (1) 同じフォルダにある画像ファイルを表示する <IMG SRC=" 画像ファイル名 "> ファイル名は拡張子まで必要 (2) 画像の拡大縮小 <IMG SRC=" 画像ファイル名 " HEIGHT="80" WIDTH="50%" BORDER="2"> HEIGHT,WIDTH の一方だけ指定すれば縦横同じ比率で拡大縮小される BORDER は画像に枠を付ける(ピクセル) 練習 nbumap.html NBU 案内図をコピーする <HTML><BODY> NBU アクセスマップ<BR> <IMG SRC="nbumap.gif"> </BODY></HTML> 画像の大きさを横 200 に変更画像がない場合 (3) 画像と文字の位置 ( 文字の回り込み) <IMG SRC=" 画像ファイル名 " ALIGN="right"> 文章 ALIGN="left right" ALIGN="top middle bottom " 1 行だけ回り込み解除 <BR CLEAR="all"> (4) ページの背景に画像を並べる <BODY BACKGROUND=" 画像ファイル名 "> BGPROPERTIES=FIXED 画像を固定する練習 nbumap.html <HTML> <BODY> NBU アクセスマップ<BR> <IMG SRC="nbumap.gif" WIDTH="200"> 大分空港から市内へ<BR> ホーバーで約 25 分 <BR> バスで約 60 分 <BR> 大分駅から大在駅へJRで約 15 分 <BR> 大在駅から徒歩で約 25 分 <BR> 所在地 : 大分県大分市一木 1727 </BODY> </HTML> ウィンドウサイズ( 幅 )を変更 ALIGN を追加回り込み解除演習問題 5 変更 ) 応用 5 kiso.html 応用 6 earth.html 5

的に開発された画像ファイル形式 (Portable Network Graphics) ホームページ用として標準的な画像ファイルの1つ主に写真を圧縮して使用する (Joint Photographic Experts Group) 2.

6 5.リンク <A>~</A> <A HREF=" "> </A> がクリックされたらを表示するはブラウザに表示される文字または画像はファイル名または URL (1) 同じフォルダにある HTML ファイルへのリンク (A) 文字をクリック <A HREF=" HTML ファイル名 ">ここをクリック</A> <A HREF=" nbumap.html">nbumap</a> (B) 画像をクリック( 他のリンクも同じ) <A HREF=" HTML ファイル名 "><IMG SRC=" 画像ファイル名 "></A> <A HREF=" nbumap.html"><img SRC="nbumap.gif"></A> (2) Web サイトへのリンク <A HREF="URL">ここをクリック</A> <A HREF=" のページ</A> (3) 新しいウィンドウで表示 TARGET="_blank" (5) メールソフトの起動ブラウザで指定しているメールソフト <A HREF="mailto:メールアドレス">メールはこちら</A> (6) ページ内リンク(ページサイズが大きい場合など) <A HREF="#top"> 先頭に戻る</A> <A NAME="top"></A>の行から表示される <A NAME="top"></A> <A NAME="sec"></A> <A HREF="#sec">sec に戻る</A> <A HREF="#top">top に戻る</A> 演習問題 6 link.html 応用 9 表と組み合わせる link1.html link2.html 応用 10 画像と組み合わせる aqua.html <A HREF=" TARGET="_blank">NBU(New)</A> (4) 同じフォルダにある画像ファイルへのリンク <A HREF=" 画像ファイル名 ">ここをクリック</A> <A HREF=" nbumap.gif" TARGET="_blank"> 画像の表示 </A> 6

gif"></A> (2) Web サイトへのリンク <A HREF="URL">ここをクリック</A> <A HREF=" http://www.nbu.ac.

7 6. 表の作成 <TABLE>~</TABLE> <TABLE>は表だけでなく, 表示のレイアウトを整える目的で使われることが多いので, 使い方を覚えてください 4. 画像の表示 <TABLE> ~ </TABLE> <TR> ~ <TD> </TD> 1つの表 1 行 (ROW) 1つのデータ(セル,COLUMN) の部分がセルの中に表示される 3 行 2 列の表を作る場合 <TABLE> <TR> <TD>1-1</TD> <TD>1-2</TD> <TR> <TD>2-1</TD> <TD>2-2</TD> <TR> <TD>3-1</TD> <TD>3-2</TD> </TABLE> 2 行 3 列の表を作る場合 <TABLE> <TR> <TD>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> <TR> <TD>2-1</TD> <TD>2-2</TD> <TD>2-3</TD> </TABLE> 練習 table.html 機械電気工学科建築学科航空宇宙工学科情報メディア学科経営経済学科 <HTML><BODY> <TABLE> <TR> <TD> 機械電気工学科 </TD> <TD> 建築学科 </TD> <TD> 航空宇宙工学科 </TD> <TR> <TD> 情報メディア学科 </TD> <TD> 経営経済学科 </TD> <TD></TD> </TABLE> </BODY></HTML> (1) 表の罫線, 表示間隔 <TABLE >だけでは罫線は表示されない BORDER=" 罫線の幅 " BORDERCOLOR=" 罫線の色 ( 全体 )" 細かく指定 BORDERCOLORLIGHT=" 左上側の罫線の色 " BORDERCOLORDARK=" 右下側の罫線の色 " (2) 表のタイトル <CAPTION ALIGN="left center right">タイトル</caption> (3) セルの背景色 <TABLE BGCOLOR=" 色 "> 表全体に適用 <TR BGCOLOR=" 色 "> 行全体に適用 <TD BGCOLOR=" 色 "> 該当するセルに適用重複して指定した場合の優先度表 < 行 <セル 7

<TR> <TD>3-1</TD> <TD>3-2</TD> </TABLE> 2 行 3 列の表を作る場合 <TABLE> <TR> <TD>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> <TR> <TD>2-1</TD> <TD>2-2</TD> <TD>2-3</TD> </TABLE> 練習 table.

8 (4) 表全体やセルの幅と高さ( 指定しないときは自動 ) <TABLE WIDTH="200" HEIGHT="100"> 表全体 (WIDTH= 行 ) <TD WIDTH="80" HEIGHT="80"> セル (5) セル内のデータ表示位置 <TABLE ALIGN="left center right"> ウィンドウに対する表の位置 <TR ALIGN="left center right"> 行全体に適用 <TD ALIGN="left center right"> 該当するセルに適用 VALIGN="top middle bottom" 上下方向の位置 (6) 表の中に画像を表示する <TD><IMG SRC=" 画像ファイル名 "></TD> 練習 table.html を変更 <TABLE BORDER= 5 BORDERCOLOR="Green"> <CAPTION ALIGN= center >タイトル</CAPTION> <TR BGCOLOR="Yellow"> <TD> 機械電気工学科 </TD> <TD> 建築学科 </TD> <TD BGCOLOR="LightBlue"> 航空宇宙工学科 </TD> <TR ALIGN="center" HEIGHT="80"> <TD ALIGN="right" BGCOLOR="LightBlue"> 情報メディア学科 </TD> <TD WIDTH="200"> 経営経済学科 </TD> <TD></TD> </TABLE> データがないセルの表示の違いに注意 <TD></TD> <TD> 半角スペース</TD> <TD> 全角スペース</TD> BORDERCOLOR を変更してみよう BORDERCOLORLIGHT="Green" BORDERCOLORDARK="Purple" (7) 表のセルの結合 table1.html <TABLE BORDER="2" WIDTH="100" HEIGHT="50"> <TR> <TD COLSPAN="2"> </TD> 1 <TD ROWSPAN="2"> </TD> 2 <TR> <TD ROWSPAN="2"> </TD> 3 <TD> </TD> 4 <TR> <TD COLSPAN="2"> </TD> 5 </TABLE> 練習 table2.html 演習問題 4 time.html 応用 2 restmenu.html 応用 3 color.html 応用 4 iro.html 応用 7 表 + 画像 kuma.html 応用 8 表 +MARQUEE cheer.html ( 参考 )cheer2.html 5 8

html を変更 <TABLE BORDER= 5 BORDERCOLOR="Green"> <CAPTION ALIGN= center >タイトル</CAPTION> <TR BGCOLOR="Yellow"> <TD> 機械電気工学科 </TD> <TD> 建築学科 </TD> <TD BGCOLOR="LightBlue"> 航空宇宙工学科 </TD>

9 7.フレーム <FRAMESET>~</FRAMESET>, <FRAME>, <IFRAME> ウィンドウを複数に分割して表示します分割した部分をフレームといい,フレームを定義するファイルと各フレームに表示するファイルが必要です 1. 左右に分割 COLS aqua.html frame1.html 注意 :<BODY>タグなし <FRAMESET>~</FRAMESET> フレーム分割 COLS="200,*" 左のフレームを幅 200 ピクセル, 残りの部分を右のフレーム <FRAME> フレーム定義 SRC: 表示するファイル名や URL NAME:フレーム名 2. 上下に分割 ROWS aqua.html kuma.html kuma.html <HTML> <FRAMESET COLS="200,*" > <FRAME SRC="aqua.html" NAME="sub1"> <FRAME SRC="kuma.html" NAME="sub2"> </FRAMESET> </HTML> <HTML> <FRAMESET ROWS="40%,*"> <FRAME SRC="aqua.html" NAME="sub1"> <FRAME SRC="kuma.html" NAME="sub2"> </FRAMESET> </HTML> 3.NAME の使い方 ( 指定したフレームへの表示 ) aqua.html を変更 <A HREF=" " TARGET="sub2"> </A> TARGET="フレーム名 " 指定したフレームに表示 TARGET="_blank" 新しいウィンドウに表示 (リンク参照 ) TARGET="_top" フレーム構造を解除してウィンドウ全体に表示フレーム構造のデータ編集について [ 表示 ] ソースでは構造を定義したファイルのソースが表示されます各フレームのファイルを編集する場合は, 編集したいフレーム上で [ 右クリック] ソースの表示を選択してください FRAME タグの属性について最初に何も表示しない場合は SRC を省略表示が変わらないフレームは NAME を省略 SRC の値は HTML ファイル,URL, 画像ファイルなど ROWS="40%,*" 上のフレームを全体の 40%, 残りの部分を下のフレーム 9

html kuma.html <HTML> <FRAMESET COLS="200,*" > <FRAME SRC="aqua.html" NAME="sub1"> <FRAME SRC="kuma.html" NAME="sub2"> </FRAMESET> </HTML> <HTML> <FRAMESET ROWS="40%,*"> <FRAME SRC="aqua.

10 4. 組合せ 5.ページ内にフレーム領域を作る <IFRAME> 画像などと同じ扱い <HTML> <FRAMESET ROWS="50%,*"> <FRAME SRC=" NAME="sub1"> <FRAMESET COLS="50%,*"> <FRAME SRC="aqua.html" NAME="sub2"> <FRAME SRC="kuma.html" NAME="sub3"> </FRAMESET> </FRAMESET> </HTML> aqua.html kuma.html iframe.html <HTML> <BODY BGCOLOR="Yellow"> <IFRAME NAME="iframe" WIDTH="300" HEIGHT="160" ALIGN="left"> </IFRAME> <A HREF="link.html" TARGET="iframe">LINK</A><BR> <A HREF=" TARGET="iframe">NBU</A> </BODY> </HTML> ROWS="50%,*" 上のフレームを高さ 50%, 残りの部分を下のフレーム COLS="50%,*" 左のフレームを幅 50%, 残りの部分を右のフレームウィンドウサイズによって大きさが変化する応用 11 dogcat.html <FRAMESET>の属性 ( 最初の指定が適用される) FRAMEBORDER="1/0" 仕切り線の表示 / 非表示 (デフォルトは 1) BORDER="2" 仕切り線の太さ(ピクセル) 練習 aqua.html kuma.html FRAMEBORDER="0" BORDER="0" 10

html <HTML> <BODY BGCOLOR="Yellow"> <IFRAME NAME="iframe" WIDTH="300" HEIGHT="160" ALIGN="left"> </IFRAME> <A HREF="link.html" TARGET="iframe">LINK</A><BR> <A HREF="http://www.nbu.ac.

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今日の学習内容エディタ(emacs)を使った基本的なHTML の書き方 Webページの公開 HTMLの基礎知識 HTML(Hyper Text Markup Language)は Webページを作るための必要な記述言語 HTMLにおける指定の内容は: 1. 文章 (テキスト)に対する役割 2. 文章やイメージなどのページ