Presentation is loading. Please wait.

Presentation is loading. Please wait.

ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society

Similar presentations


Presentation on theme: "ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society"— Presentation transcript:

1 ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society
テキスト 第4版 Copyright© 1999 Nigata Internet Society

2 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を開く ①メモ帳を起動する。 [スタート]→[プログラム]→[アクセサリ]→[メモ帳]

7 ② 実習用データ「index.html」を開く

8 1-2 入力の際の注意点ほか 日本語入力方法確認(カナ入力?ローマ字入力?) タグのなかは空白は半角で
1-2 入力の際の注意点ほか 日本語入力方法確認(カナ入力?ローマ字入力?) タグのなかは空白は半角で HTMLソースで行をかえても、実際のブラウザ表示に影響しません。 ファイル名やURL(ホームページアドレス)以外は、大文字・小文字の区別は関係ありません。

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.保存 [ファイル]→[上書き保存] 2.確認 ② ファイルを選択 ①[ファイル]→ [ページを開く]
1-4 保存・確認 1.保存 [ファイル]→[上書き保存] 2.確認 ② ファイルを選択 ①[ファイル]→ [ページを開く] ③ ファイルの場所を選択 ④ 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>(nは数字)
章の見出し(Header)を指定 [記述例] <H1>見出し1</H1> <H2>見出し2</H2> <H3>見出し3</H3> <H4>見出し4</H4> <H5>見出し5</H5> <H6>見出し6</H6> ブラウザで 表示すると

14 2-2 改行・段落 <BR>,<P>~</P>
段落付けの場合はこんなふうになる。 <P>こんな 書き方をしても、こ うなる。</P> [記述例] [ブラウザで表示すると] 改行の場合は、こんな感じ。 段落付けの場合はこんなふうになる。 こんな書き方をしても、こうなる。

15 2-3-① 色の指定 方法1:色の名前を書く <BODY BGCOLOR="Gray" > | </BODY>
2-3-① 色の指定  方法1:色の名前を書く <BODY BGCOLOR="Gray" >      | </BODY> どちらも背景がグレーになる 方法2:色の番号を書く <BODY BGCOLOR="#808080">      | </BODY>

16 実習2-3ー② 色の構造 # FF 00 00 色と番号の例 Red (#FF0000) Black (#000000)
実習2-3ー② 色の構造 赤の 強さ 緑の 強さ 青の 強さ 2桁ごとに赤緑青の強さを表している。 表示は16進数。 (00,01,… 09,0A,0B…0F,10,11…FF) # FF 00 00 色と番号の例 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~7まで指定できる            "+1"や"-1"などの現在の大きさに対する相対指定もできる。 <FONT COLOR="色の指定">            色の指定は、色の名前か、"#808080"のような形式。 [記述例] [ブラウザで表示すると] <FONT SIZE="-1" COLOR="#FF0000"> 文字1 </FONT> <BR><BR> <FONT SIZE="6" COLOR="GREEN"> 文字2

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">  … 太さ (「%」か「ピクセル」で指定)           この例では、太さ10ピクセル。 <HR NOSHADE>   … 影なし <HR WIDTH="30" ALIGN="left">           … ALIGN:表示位置指定。"left"は左寄せ、               "right"は右寄せ、"center"は中央。  [ブラウザで  表示すると]

22 3-2 リスト表示① <UL> [記述例] <UL> <LI>リスト1 <LI>リスト2
<UL TYPE="circle">  <LI>リスト3  <LI>リスト4 <UL TYPE="square">  <LI>リスト5  <LI>リスト6 [ブラウザ表示] 各リストの先頭には <LI>を付ける

23 3-3 リスト表示② <OL> [ブラウザ表示] [記述例] <OL> <LI>リスト1
<OL TYPE="A">  <LI>リスト3 <LI>リスト4 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 画像の貼り付け 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で、回り込みの指定ができる。 詳細は③で。 数値のみ指定はピクセル、%で指定すると ブラウザの表示部分に対する割合になる。 画像の代わりに表示する文字列を指定。 数値を指定。 0を指定すると囲み線なし

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"> 背景の指定は次の2通りが考えられる。
実習5 背景の画像 -入力- 背景の指定は次の2通りが考えられる。 ① <BODY BGCOLOR="○○"> で、背景の色を指定。 ② <BODY BACKGROUND="○○"> で、背景の画像を指定。 この実習では、画像の貼り付けをやってみる。 実習用フロッピーに"back.gif"が入っているので、それを使う。 <BODY BACKGROUND="back.gif">

31 実習6 自分で画像をつくる ホームページで使用できる画像形式は、GIF形式かJPEG形式。 (拡張子が「.gif」 か 「.jpg」)
実習6 自分で画像をつくる ホームページで使用できる画像形式は、GIF形式かJPEG形式。 (拡張子が「.gif」 か 「.jpg」) フリーの素材が出回っているので、あえて作ることはない かもしれないが、いちばんお金がかからない方法を説明する。 手順1: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 実習8 リンクをはる links.html watashi.html index.html ようこそ私のページヘ ・私について
実習8 リンクをはる ようこそ私のページヘ ・私について ・お役立ちリンク集 メールはこちら これをクリックすると メール送信画面がでる ようにする。 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 実習9 フリー素材の使い方 WEB上には、たくさんのフリー素材のページがある。 無料のものがほとんどだが、使用上の注意をよく読んで
実習9 フリー素材の使い方 WEB上には、たくさんのフリー素材のページがある。 無料のものがほとんどだが、使用上の注意をよく読んで トラブルが起こらないようにしよう。 ①使いたい画像の上で、  右クリックをする。 ②「画像を」名前をつけて保存」  を選択。 ③実習用フォルダに適当な  ファイル名をつけて保存。  ただし、拡張子(.gifとか.jpgとか)  は変更しない。

42 実習10 ファイル転送(WS-FTPの使い方)
WS FTPを起動すると「Sessionのプロパティ」というウィンドウが現れるので以下の画面のように 「General」の各項目を記入する。 「Profile Name:」 このボックスには「適当な名前」を入力。 設定の名前。 「Host Name/Address:」 サーバーマシンの「サーバネーム」または 「IPアドレス」を入力。 「Anonymous」のチェックボックスは 外しておく。 ******** 「User ID:」 「ユーザー名」を入力。 「Password:」 入力と同時にアスタリスクになるので画面に は現れない。 設定がすんだら「OK」をクリック

43 (実習10ー2) ファイル転送つづき ローカルマシン (自分の目の前のマシン) リモートマシン (サーバーマシン) ホームディレクトリが表示
(実習10ー2) ファイル転送つづき うまく接続されると、次のようになります。 ホームディレクトリが表示 されている ローカルマシン (自分の目の前のマシン) リモートマシン (サーバーマシン)

44 (実習10ー3) ファイル転送つづき ① ローカル、リモートともに対象となるフォルダ(ディレクトリ)を表示させる
(実習10ー3) ファイル転送つづき ① ローカル、リモートともに対象となるフォルダ(ディレクトリ)を表示させる ② 転送したいファイルをクリック ③ ASCII か Binary か、チェックボックスをクリック ④ 転送 これをダブルクリックすると、 ひとつ上のディレクトリを表示する ② 転送したいファイルをクリック ④ ローカルからリモートへ 転送。 ③ ASCIIかBinaryかを選択。 通常、htmlを記述したものはASCII、その他画像などはbinary。


Download ppt "ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society"

Similar presentations


Ads by Google