Download presentation
Presentation is loading. Please wait.
1
ホームページ作成入門講座 － HTML編 － １９９９年６月 Copyright© 1999 Nigata Internet Society
テキスト 第４版 Copyright© 1999 Nigata Internet Society
2
0-1 実習環境を作る －実習用フォルダ作成－ デスクトップ上で右クリック → [新規作成] →[ フォルダ]
![0-1 実習環境を作る －実習用フォルダ作成－ デスクトップ上で右クリック → [新規作成] →[ フォルダ]](http://slidesplayer.net/slide/11293403/61/images/2/0-1+%E5%AE%9F%E7%BF%92%E7%92%B0%E5%A2%83%E3%82%92%E4%BD%9C%E3%82%8B+%EF%BC%8D%E5%AE%9F%E7%BF%92%E7%94%A8%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E4%BD%9C%E6%88%90%EF%BC%8D+%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E4%B8%8A%E3%81%A7%E5%8F%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF+%E2%86%92+%5B%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90%5D+%E2%86%92%5B+%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%5D.jpg "0-1 実習環境を作る －実習用フォルダ作成－ デスクトップ上で右クリック → [新規作成] →[ フォルダ]")
3
0-2 実習環境を作る － 実習用フロッピーの内容をハードディスク上にコピーする －
0-2 実習環境を作る － 実習用フロッピーの内容をハードディスク上にコピーする － ①3.5インチFDのウインドウを開く ②[編集]→[すべて選択] ③実習用フォルダにドラッグ ドラッグ
4
0-2 実習環境を作る －拡張子を表示させる－ ここのチェックをはずす
5
実習1 基本的な骨組みを作る 1-1 メモ帳でindex.htmlを開く 1-2 入力の際の注意点ほか
実習1 基本的な骨組みを作る 1-1 メモ帳でindex.htmlを開く 1-2 入力の際の注意点ほか 1-3 作成例をみながら、追加入力する 1-4 保存して、NetscapeCommunicatorで確認する 1-5 全体構造の説明
6
1-1 メモ帳でindex.htmlを開く ①メモ帳を起動する。 [スタート]→［プログラム］→[アクセサリ]→[メモ帳]
![1-1 メモ帳でindex.htmlを開く ①メモ帳を起動する。 [スタート]→［プログラム］→[アクセサリ]→[メモ帳]](http://slidesplayer.net/slide/11293403/61/images/6/1-1+%E3%83%A1%E3%83%A2%E5%B8%B3%E3%81%A7index.html%E3%82%92%E9%96%8B%E3%81%8F+%E2%91%A0%E3%83%A1%E3%83%A2%E5%B8%B3%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%99%E3%82%8B%E3%80%82+%5B%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%5D%E2%86%92%EF%BC%BB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%EF%BC%BD%E2%86%92%5B%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B5%E3%83%AA%5D%E2%86%92%5B%E3%83%A1%E3%83%A2%E5%B8%B3%5D.jpg "1-1 メモ帳でindex.htmlを開く ①メモ帳を起動する。 [スタート]→［プログラム］→[アクセサリ]→[メモ帳]")
7
② 実習用データ「index.html」を開く
8
1-2 入力の際の注意点ほか 日本語入力方法確認（カナ入力？ローマ字入力？） タグのなかは空白は半角で
1-2 入力の際の注意点ほか 日本語入力方法確認（カナ入力？ローマ字入力？） タグのなかは空白は半角で ＨＴＭＬソースで行をかえても、実際のブラウザ表示に影響しません。 ファイル名やＵＲL（ホームページアドレス）以外は、大文字・小文字の区別は関係ありません。
9
1-3 作成例入力 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tansitional//EN" " <HTML lang="ja"> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=shift_jis"> <TITLE>ホームページ作成講座</TITLE> </HEAD> <BODY> <H2>ようこそ、私のページへ</H2> </BODY> </HTML>
10
1-4 保存・確認 １．保存 [ファイル]→[上書き保存] ２．確認 ② ファイルを選択 ①[ファイル]→ [ページを開く]
1-4 保存・確認 １．保存 [ファイル]→[上書き保存] ２．確認 ② ファイルを選択 ①[ファイル]→ [ページを開く] ③ ファイルの場所を選択 ④ index.htmlをクリック ⑤ 開く
![1-4 保存・確認 １．保存 [ファイル]→[上書き保存] ２．確認 ② ファイルを選択 ①[ファイル]→ [ページを開く]](http://slidesplayer.net/slide/11293403/61/images/10/1-4+%E4%BF%9D%E5%AD%98%E3%83%BB%E7%A2%BA%E8%AA%8D+%EF%BC%91%EF%BC%8E%E4%BF%9D%E5%AD%98+%5B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%5D%E2%86%92%5B%E4%B8%8A%E6%9B%B8%E3%81%8D%E4%BF%9D%E5%AD%98%5D+%EF%BC%92%EF%BC%8E%E7%A2%BA%E8%AA%8D+%E2%91%A1+%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%81%B8%E6%8A%9E+%E2%91%A0%5B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%5D%E2%86%92+%5B%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E9%96%8B%E3%81%8F%5D.jpg "1-4 保存・確認. １．保存 [ファイル]→[上書き保存] ２．確認. ② ファイルを選択. ①[ファイル]→ [ページを開く] ③ ファイルの場所を選択. ④ index.htmlをクリック. ⑤ 開く.")
11
1-5 <BODY>～</BODY>
これで囲まれたものが、HTML文書の本文であることを示す。 使用例 <BODY BACKGROUND="haikei.gif" 背景画像の指定 BGCOLOR="white" 背景色 TEXT="black" 基本の文字の色 LINK=" #00FF00" リンクの文字の色 VLINK="oliev" 一度読み込んだことのあるリンクの色 ALINK="red"> ﾏｳｽでﾘﾝｸ部分をｸﾘｯｸしている間の色 --この間に本文を記述-- </BODY> これらはオプションなので、 無理に書かなくてもよい。
12
実習2 文字の修飾・改行 2-1 見出し <Hn>～</Hn>
実習2 文字の修飾・改行 2-1 見出し <Hn>～</Hn> 2-2 改行<BR>・段落<P> 2-3 色の指定 2-4 文字の修飾 <FONT>～</FONT> 2-5 その他の文字の修飾 2-6 作成例入力
13
2-1 <Hn>～</Hn>（ｎは数字）
章の見出し(Header)を指定 ［記述例］ <H1>見出し１</H1> <H2>見出し２</H2> <H3>見出し３</H3> <H4>見出し４</H4> <H5>見出し５</H5> <H6>見出し６</H6> ブラウザで 表示すると
14
2-2 改行・段落 <BR>，<P>～</P>
段落付けの場合はこんなふうになる。 <P>こんな 書き方をしても、こ うなる。</P> ［記述例］ ［ブラウザで表示すると］ 改行の場合は、こんな感じ。 段落付けの場合はこんなふうになる。 こんな書き方をしても、こうなる。
15
2-3-① 色の指定 方法１：色の名前を書く <BODY BGCOLOR＝"Gray" > | </BODY>
2-3-① 色の指定 方法１：色の名前を書く <BODY BGCOLOR＝"Gray" > | </BODY> どちらも背景がグレーになる 方法２：色の番号を書く <BODY BGCOLOR＝"#808080"> | </BODY>
16
実習2-3ｰ② 色の構造 ＃ ＦＦ ００ ００ 色と番号の例 Red (#FF0000) Black (#000000)
実習2-3ｰ② 色の構造 赤の 強さ 緑の 強さ 青の 強さ ２桁ごとに赤緑青の強さを表している。 表示は１６進数。 （00,01,… 09,0A,0B…0F,10,11…FF） ＃ ＦＦ ００ ００ 色と番号の例 Red (#FF0000) Yellow (#FFFF00) Lime (#00FF00) Aqua (#00FFFF) Blue (#0000FF) Black (#000000) Gray (#808080) Silver (#C0C0C0) White (#FFFFFF)
17
2-4 文字の修飾<FONT>～</FONT>
<FONT SIZE="サイズの指定"> サイズは１～７まで指定できる "+1"や"-1"などの現在の大きさに対する相対指定もできる。 <FONT COLOR="色の指定"> 色の指定は、色の名前か、"#808080"のような形式。 ［記述例］ ［ブラウザで表示すると］ <FONT SIZE="-1" COLOR="#FF0000"> 文字１ </FONT> <BR><BR> <FONT SIZE="6" COLOR="GREEN"> 文字２
18
2-5 その他の文字の修飾 <B>太字(Bold)</B><BR>
2-5 その他の文字の修飾 ［記述例］ <B>太字(Bold)</B><BR> <I>斜体(Italic)</I><BR> <TT>等幅</TT><BR> <U>下線(Underline)</U><BR> <STRIKE>取消線(Strikeout)</STRIKE><BR> <BLINK>点滅(Blink)</BLINK><BR> ［ブラウザで 表示すると］
19
2-6 文字の修飾・改行 －入力－ <BODY> <BR> 改 行
2-6 文字の修飾・改行 －入力－ <BODY> <BR> <H2>ようこそ、わたしのページへ</H2> <FONT COLOR="#007700"> こんにちは。<BR> ただいまホームページ講座作成を受講しています。<BR> </FONT> </BODY> 改 行 フォントの指定
20
実習3 水平線・リスト 3-1 水平線 <HR> 3-2 リスト表示（箇条書）① <UL>
実習3 水平線・リスト 3-1 水平線 <HR> 3-2 リスト表示（箇条書）① <UL> 3-3 リスト表示（箇条書）② <OL> 3-4 作成例入力
21
3-1 水平線 <HR> ［記述例］ <HR> … 標準
<HR WIDTH="50%"> … 横幅 （「％」か「ピクセル」で指定） この例では、ブラウザに対して50%の横幅。 <HR SIZE="10"> … 太さ （「％」か「ピクセル」で指定） この例では、太さ１０ピクセル。 <HR NOSHADE> … 影なし <HR WIDTH="30" ALIGN="left"> … ALIGN：表示位置指定。"left"は左寄せ、 "right"は右寄せ、"center"は中央。 ［ブラウザで 表示すると］
22
3-2 リスト表示① <UL> ［記述例］ <UL> <LI>リスト１ <LI>リスト２
<UL TYPE="circle"> <LI>リスト３ <LI>リスト４ <UL TYPE="square"> <LI>リスト５ <LI>リスト６ ［ブラウザ表示］ 各リストの先頭には <LI>を付ける
23
3-3 リスト表示② <OL> ［ブラウザ表示］ ［記述例］ <OL> <LI>リスト１
<OL TYPE="A"> <LI>リスト３ <LI>リスト４ TYPE="A" ：A,B,C,D,E … TYPE="a" ：a,b,c,d,e … TYPE="I" ：I,II,III … TYPE="I" ：i,ii,iii …
24
3-4 水平線・リスト（箇条書） 下の の中を埋めて入力をしてください。
3-4 水平線・リスト（箇条書） 下の の中を埋めて入力をしてください。 <BODY> <BR> <H2>ようこそ、わたしのページへ</H2> <FONT COLOR="#007700"> こんにちは。<BR> ただいまホームページ講座作成を受講しています。<BR> </FONT> <UL> <LI>私について <LI>ホームページ作成お役立ちページ </UL> <BR><BR> </BODY> 水平線 リスト 水平線
25
実習４ 画像の貼り付け 4-1 ファイル・フォルダについて 4-2 IMGタグ全体 4-3 SRC属性 4-4 サンプル画像を貼りつけてみる
26
4-1 ファイル・フォルダ A社 B社 "会社情報" "A社のフォルダ/会社情報" "B社のフォルダ /会社情報" 会社情報 会社情報
4-1 ファイル・フォルダ A社 B社 会社情報 会社情報 会社情報 "会社情報" "A社のフォルダ/会社情報" "B社のフォルダ /会社情報"
27
4-2 IMGタグ全体 <IMG SRC="画像ﾌｧｲﾙ名" ALIGN="表示位置" HEIGHT= "画像の高さ"
WIDTH= "画像の横幅" ALT="文字" BORDER= "囲み線の太さ" > 画像ファイルはgif形式かjpeg形式。 詳細は②で。 top, middle,bottomなどを指定。 leftやrightで、回り込みの指定ができる。 詳細は③で。 数値のみ指定はピクセル、%で指定すると ブラウザの表示部分に対する割合になる。 画像の代わりに表示する文字列を指定。 数値を指定。 ０を指定すると囲み線なし
28
4-3 SRC属性 <IMG SRC="gazou1.gif">
ディレクトリ構造が以下のような 場合の例をみてみる。 index.htmlという文書の中で 画像ﾌｧｲﾙを記述すると、 ・同じディレクトリ内の画像 <IMG SRC="gazou1.gif"> ・gazouというディレクトリ内の画像 <IMG SRC="gazou/gazou2.jpg">
29
4-4 画像の貼り付け －入力－ <H2>ようこそ、わたしのページへ</H2> <HR>
4-4 画像の貼り付け －入力－ 「ようこそ、わたしのページへ」の下にサンプル画像を 貼り付ける。 画像ファイルは、GIF形式かJPEG形式でなければならない。 実習用フォルダの中を確認して、画像を指定してみよう。 <H2>ようこそ、わたしのページへ</H2> <HR> <P> <IMG SRC= "sample1.gif" ALT="サンプル" HEIGHT="100" WIDTH="100"><BR>
30
実習5 背景の画像 －入力－ <BODY BACKGROUND="back.gif"> 背景の指定は次の２通りが考えられる。
実習5 背景の画像 －入力－ 背景の指定は次の２通りが考えられる。 ① <BODY BGCOLOR="○○"> で、背景の色を指定。 ② <BODY BACKGROUND="○○"> で、背景の画像を指定。 この実習では、画像の貼り付けをやってみる。 実習用フロッピーに"back.gif"が入っているので、それを使う。 <BODY BACKGROUND="back.gif">
31
実習6 自分で画像をつくる ホームページで使用できる画像形式は、GIF形式かJPEG形式。 （拡張子が「.gif」 か 「.jpg」）
実習6 自分で画像をつくる ホームページで使用できる画像形式は、GIF形式かJPEG形式。 （拡張子が「.gif」 か 「.jpg」） フリーの素材が出回っているので、あえて作ることはない かもしれないが、いちばんお金がかからない方法を説明する。 手順１：Windows付属の「ペイント」をつかって、絵を描く。 手順2：「ペイント」の保存時に、GIF形式かJPG形式で保存する。
32
6-1 画像形式変換 実習用データとして、「home.bmp」を用意してあるので、これ を変換する。
② [ファイル]→[名前を付けて保存] ③下図のとおり、保存する形式（ここではGIF形式）を選んで、OK。
33
実習7 「わたしについて」 のページ作成 7-1 実習用データ「watashi.html」を開く 7-2 位置指定 <DIV>
実習7 「わたしについて」 のページ作成 7-1 実習用データ「watashi.html」を開く 7-2 位置指定 <DIV> 7-3 表の作成 <TABLE> 7-4 watashi.htmlを完成させる
34
7-2 位置指定 <DIV> <DIV ALIGN="left"> これは左よせ </DIV>
<DIV ALIGN="center"> これは中央 <DIV ALIGN="right"> これは右よせ ALIGNを指定しなければ、左よせ。 </DIV>のあとは自動改行
35
7-3 表① ～基本～ <TR> </TR> あい うえお <TR> かきく けこ
7-3 表① ～基本～ <TD> <TD> <TR> </TR> あい うえお </TD> </TD> <TR> <TD> <TD> かきく けこ </TR> </TD> </TD> <TABLE BORDER="1"> <TR> <TD>あい</TD> <TD>うえお</TD> </TR> <TD>かきく</TD> <TD>けこ</TD> </TABLE> 線の太さ 各行は<TR>～</TR>で囲む 各項目は<TD>～</TD>で囲む
36
7-3 表② ～オプション～ <TABLE BORDER="1">
7-3 表② ～オプション～ <TABLE BORDER="1"> <TR><TD COLSPAN= "2">あ</TD><TD>い</TD></TR> <TR><TD>う</TD><TD>え</TD><TD>お</TD></TR> </TABLE> <TABLE BORDER="1"> <TR><TD ROWSPAN="2">あ</TD><TD>い</TD> <TD>う</TD></TR> <TR><TD>え</TD><TD>お</TD></TR> </TABLE>
37
7-3 表③ ～オプション～ <TABLE BORDER="1" CELLSPACING="0">
7-3 表③ ～オプション～ 立体感のない 線にする <TABLE BORDER="1" CELLSPACING="0"> <TR><TD>あ</TD><TD>い</TD><TD>う</TD></TR> <TR><TD>え</TD><TD>お</TD><TD>か</TD></TR> </TABLE> <TABLE BORDER="1" BORDERCOLOR="red"> <TR BGCOLOR="#FFCCCC"><TD>あ</TD> <TD>い</TD></TR> <TR><TD BGCOLOR="#CCCCFF">え</TD> <TD>お</TD></TR> </TABLE> セルや線に 色を指定
38
7-4 watashi.htmlを作成 作成例 飾り線 自己紹介の表 Index.htmlに戻るためのリンク
39
実習８ リンクをはる links.html watashi.html index.html ようこそ私のページヘ ・私について
実習８ リンクをはる ようこそ私のページヘ ・私について ・お役立ちリンク集 メールはこちら これをクリックすると メール送信画面がでる ようにする。 links.html watashi.html お役立ちリンク集 ・○○のページ ホームページに戻る 私について ホームページに戻る index.html
40
8-1 リンク ＜A HREF～＞ index.html内での記述の例 ①別のホームページにジャンプ
②meibutu.htmlにジャンプ <A HREF="meibutu.html "> ○○・・ </A> ③sake.htmlにジャンプ <A HREF="niigata/sake.html "> ○○・・ </A> ③tulip.htmlにジャンプ <A HREF="niigata/sonota/tulip.html">○○・・ </A> ④メールアドレスにメール送信 <A ○○・・ </A> html index.html niigata sake.html sonota tulip.html kome.html meibutu.html ※ ○○・・の部分は、ホームページに表示する 文字列や図を記述します。
41
実習９ フリー素材の使い方 WEB上には、たくさんのフリー素材のページがある。 無料のものがほとんどだが、使用上の注意をよく読んで
実習９ フリー素材の使い方 WEB上には、たくさんのフリー素材のページがある。 無料のものがほとんどだが、使用上の注意をよく読んで トラブルが起こらないようにしよう。 ①使いたい画像の上で、 右クリックをする。 ②「画像を」名前をつけて保存」 を選択。 ③実習用フォルダに適当な ファイル名をつけて保存。 ただし、拡張子（.gifとか.jpgとか） は変更しない。
42
実習１０ ファイル転送（WS-FTPの使い方）
WS FTPを起動すると「Sessionのプロパティ」というウィンドウが現れるので以下の画面のように 「General」の各項目を記入する。 「Profile Name:」 このボックスには「適当な名前」を入力。 設定の名前。 「Host Name/Address:」 サーバーマシンの「サーバネーム」または 「ＩＰアドレス｣を入力。 「Anonymous」のチェックボックスは 外しておく。 ******** 「User ID:」 「ユーザー名」を入力。 「Password:」 入力と同時にアスタリスクになるので画面に は現れない。 設定がすんだら「ＯＫ」をクリック
43
（実習１０ー２） ファイル転送つづき ローカルマシン （自分の目の前のマシン） リモートマシン （サーバーマシン） ホームディレクトリが表示
（実習１０ー２） ファイル転送つづき うまく接続されると、次のようになります。 ホームディレクトリが表示 されている ローカルマシン （自分の目の前のマシン） リモートマシン （サーバーマシン）
44
（実習１０ー３） ファイル転送つづき ① ローカル、リモートともに対象となるフォルダ（ディレクトリ）を表示させる
（実習１０ー３） ファイル転送つづき ① ローカル、リモートともに対象となるフォルダ（ディレクトリ）を表示させる ② 転送したいファイルをクリック ③ ＡＳＣＩＩ か Ｂｉｎａｒｙ か、チェックボックスをクリック ④ 転送 これをダブルクリックすると、 ひとつ上のディレクトリを表示する ② 転送したいファイルをクリック ④ ローカルからリモートへ 転送。 ③ ＡＳＣＩＩかＢｉｎａｒｙかを選択。 通常、htmlを記述したものはＡＳＣＩＩ、その他画像などはbinary。
Similar presentations
