実習1 基本的な骨組み

ホームページ作成入門講座
- HTML編 -
1999年6月
Copyright© 1999 INAGAWA, Kumiko
テキスト 第4版
0-1 実習環境を作る
-実習用フォルダ作成-
デスクトップ上で右クリック
→ [新規作成] →[ フォルダ]
0-2 実習環境を作る
- 実習用フロッピーの内容をハードディスク
上にコピーする -
①3.5インチFDのウインドウを開く
②[編集]→[すべて選択]
③実習用フォルダにドラッグ
ドラッグ
0-2 実習環境を作る
-拡張子を表示させる-
ここのチェックをはずす
実習1 基本的な骨組みを作る





1-1 メモ帳でindex.htmlを開く
1-2 入力の際の注意点ほか
1-3 作成例をみながら、追加入力する
1-4 保存して、NetscapeCommunicator
で確認する
1-5 全体構造の説明
1-1 メモ帳でindex.htmlを開く
①メモ帳を起動する。
[スタート]→[プログラム]→[アクセサリ]→[メモ帳]
② 実習用データ「index.html」を開く
ここを「すべてのファイル」にしない
と、.htmlという拡張子のファイルが表
示されない。
1-2 入力の際の注意点ほか




日本語入力方法確認(カナ入力?ローマ
字入力?)
タグのなかは空白は半角で
HTMLソースで行をかえても、実際のブラ
ウザ表示に影響しません。
ファイル名やURI以外は、大文字・小文字
の区別は関係ありません。
1-3 作成例入力
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tansitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML lang="ja">
<HEAD>
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=shift_jis">
<TITLE>ホームページ作成講座</TITLE>
</HEAD>
<BODY>
<H2>ようこそ、私のページへ</H2>
</BODY>
</HTML>
1-4 保存・確認
1.保存 [ファイル]→[上書き保存]
2.確認
①[ファイル]→
[ページを開く]
② ファイル
を選択
③ ファイルの
場所を選択
④ index.html
をクリック
⑤ 開く
1-5
<BODY>~</BODY>
これで囲まれたものが、HTML文書の本文であることを示す。
使用例
<BODY
BACKGROUND="haikei.gif" 背景画像の指定
BGCOLOR="white"
背景色
TEXT="black"
基本の文字の色
LINK=" #00FF00" リンクの文字の色
VLINK="oliev" 一度読み込んだことのあるリンクの色
ALINK="red"> マウスでリンク部分をクリックしている間の色
--この間に本文を記述-</BODY>
無こ
理れ
にら
書は
かオ
なプ
くシ
てョ
もン
よな
いの
。で
、
実習2 文字の修飾・改行






2-1
2-2
2-3
2-4
2-5
2-6
見出し <Hn>~</Hn>
改行<BR>・段落<P>
色の指定
文字の修飾 <FONT>~</FONT>
その他の文字の修飾
作成例入力
2-1 <Hn>~</Hn>(nは数字)
章の見出し(Header)を指定
[記述例]
<H1>見出し1</H1>
<H2>見出し2</H2>
<H3>見出し3</H3>
<H4>見出し4</H4>
<H5>見出し5</H5>
<H6>見出し6</H6>
ブラウザで
表示すると
2-2 改行・段落 <BR>,<P>~</P>
…
<BR>
[記述例]
改行
<P> …
段落付け
改行の場合は、こんな感じ。<BR>
段落付けの場合はこんなふうになる。
<P>こんな
書き方をしても、こ
うなる。</P>
[ブラウザで表示すると]
改行の場合は、こんな感じ。
段落付けの場合はこんなふうになる。
こんな書き方をしても、こうなる。
2-3-①
色の指定
方法1:色の名前を書く
<BODY BGCOLOR="Gray" >
|
</BODY>
方法2:色の番号を書く
<BODY BGCOLOR="#808080">
|
</BODY>
どちらも背景がグレーになる
実習2-3ー②
赤の
強さ
緑の
強さ
色の構造
青の
強さ
# FF 00 00
2桁ごとに赤緑青の強さを表している。
表示は16進数。
(00,01,… 09,0A,0B…0F,10,11…FF)
色と番号の例
Black (#000000)
Gray (#808080)
Silver (#C0C0C0)
White (#FFFFFF)
Red (#FF0000)
Yellow (#FFFF00)
Lime (#00FF00)
Aqua (#00FFFF)
Blue (#0000FF)
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
</FONT>
[ブラウザで表示すると]
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>
2-6 文字の修飾・改行
-入力-
<BODY>
改 行
<BR>
<H2>ようこそ、わたしのページへ</H2>
<BR>
<FONT COLOR="#007700">
フォントの指定
こんにちは。<BR>
ただいまホームページ講座作成を受講しています。<BR>
</FONT>
</BODY>
実習3 水平線・リスト




3-1
3-2
3-3
3-4
水平線 <HR>
リスト表示(箇条書)①
リスト表示(箇条書)②
作成例入力
<UL>
<OL>
3-1 水平線
<HR>
[記述例] <HR>
… 標準
<HR WIDTH="50%"> … 横幅 (「%」か「ピクセル」で指定)
<HR SIZE="10">
この例では、ブラウザに対して50%の横幅。
… 太さ (「%」か「ピクセル」で指定)
この例では、太さ10ピクセル。
<HR NOSHADE>
… 影なし
<HR WIDTH="30" ALIGN="left">
…
[ブラウザで
表示すると]
ALIGN:表示位置指定。"left"は左寄せ、
"right"は右寄せ、"center"は中央。
3-2 リスト表示①
[記述例]
<UL>
<LI>リスト1
<LI>リスト2
</UL>
<UL>
[ブラウザ表示]
各リストの先頭には
<LI>を付ける
<UL TYPE="circle">
<LI>リスト3
<LI>リスト4
</UL>
<UL TYPE="square">
<LI>リスト5
<LI>リスト6
</UL>
3-3 リスト表示②
[記述例] <OL>
<LI>リスト1
<LI>リスト2
</OL>
<OL>
[ブラウザ表示]
<OL TYPE="A">
<LI>リスト3
<LI>リスト4
</OL>
TYPE="A"
TYPE="a"
TYPE="I"
TYPE="I"
:A,B,C,D,E …
:a,b,c,d,e …
:I,II,III …
:i,ii,iii …
3-4 水平線・リスト(箇条書)
-入力-
<BODY>
<BR>
<H2>ようこそ、わたしのページへ</H2>
<HR>
水平線
<BR>
<FONT COLOR="#007700">
こんにちは。<BR>
ただいまホームページ講座作成を受講しています。<BR>
</FONT>
リスト
<UL>
<LI>私について
<LI>ホームページ作成お役立ちページ
</UL>
<BR><BR>
<HR>
</BODY>
実習4 画像の貼り付け




4-1
4-2
4-3
4-4
ファイル・フォルダについて
IMGタグ全体
SRC属性
サンプル画像を貼りつけてみる
4-1 ファイル・フォルダ
A社
B社
会社情報
会社情報
会社情報
"会社情報"
"A社のフォルダ/会社情報"
"B社のフォルダ
/会社情報"
4-2 IMGタグ全体
<IMG
SRC="画像ファイル名"
ALIGN="表示位置"
HEIGHT= "画像の高さ"
画像ファイルはgif形式かjpeg形式。
詳細は②で。
top, middle,bottomなどを指定。
leftやrightで、回り込みの指定ができる。
詳細は③で。
数値のみ指定はピクセル、%で指定すると
ブラウザの表示部分に対する割合になる。
WIDTH= "画像の横幅"
ALT="文字"
画像の代わりに表示する文字列を指定。
BORDER= "囲み線の太さ" >
数値を指定。
0を指定すると囲み線なし
4-3
SRC属性
ディレクトリ構造が以下のような
場合の例をみてみる。
index.htmlという文書の中で
画像ファイルを記述すると、
・同じディレクトリ内の画像
<IMG SRC="gazou1.gif">
・gazouというディレクトリ内の画像
<IMG SRC="gazou/gazou2.jpg">
4-4 画像の貼り付け
-入力-
「ようこそ、わたしのページへ」の下にサンプル画像を
貼り付ける。
画像ファイルは、GIF形式かJPEG形式でなければならない。
実習用フォルダの中を確認して、画像を指定してみよう。
<H2>ようこそ、わたしのページへ</H2>
<HR>
<P>
<IMG SRC= "sample1.gif" ALT="サンプル"
HEIGHT="100" WIDTH="100"><BR>
実習5 背景の画像
-入力-
背景の指定は次の2通りが考えられる。
① <BODY BGCOLOR="○○"> で、背景の色を指定。
② <BODY BACKGROUND="○○"> で、背景の画像を指定。
この実習では、画像の貼り付けをやってみる。
実習用フロッピーに"back.gif"が入っているので、それ
を使う。
<BODY BACKGROUND="back.gif">
実習6 自分で画像をつくる
ホームページで使用できる画像形式は、GIF形式かJPEG形式。
(拡張子が「.gif」 か 「.jpg」)
フリーの素材が出回っているので、あえて作ることはない
かもしれないが、いちばんお金がかからない方法を説明する。
手順1:Windows付属の「ペイント」をつかって、絵を描く。
手順2:「ペイント」の保存時に、GIF形式かJPG形式で保存する。
6-1 画像形式変換
実習用データとして、「home.bmp」を用意してあるので、これ
を変換する。
① ペイントを起動し、[ファイル]→[開く]でhome.bmpを開く。
② [ファイル]→[名前を付けて保存]
③下図のとおり、保存する形式(ここではGIF形式)を選んで、
OK。
実習7
「わたしについて」
のページ作成
7-1
開く
7-2
7-3
7-4
実習用データ「watashi.html」を




位置指定 <DIV>
表の作成 <TABLE>
watashi.htmlを完成させる
7-2 位置指定
<DIV>
<DIV ALIGN="left">
これは左よせ
</DIV>
<DIV ALIGN="center">
これは中央
</DIV>
<DIV ALIGN="right">
これは右よせ
</DIV>
ALIGNを指定しなければ、左よせ。
</DIV>のあとは自動改行
7-3 表①
~基本~
<TD>
<TD>
<TR>
あい
<TR> <TD> かきく
</TD>
</TD>
<TABLE BORDER="1">
<TR>
<TD>あい</TD>
<TD>うえお</TD>
</TR>
<TR>
<TD>かきく</TD>
<TD>けこ</TD>
</TR>
</TABLE>
<TD>
うえお </TD> </TR>
けこ
</TD> </TR>
線の太さ
各行は<TR>~</TR>で囲む
各項目は<TD>~</TD>で囲む
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>
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>
7-4
watashi.htmlを作成
作成例
飾り線
自己紹介
の表
Index.htmlに戻
るためのリンク
作成例
<BODY BACKGROUND="gazou/back1.gif">
<BR>
中央揃え
<DIV ALIGN="center">
<IMG SRC="gazou/line1.gif">
<P>
<B><FONT COLOR="#003300" SIZE=+2>わたしについて</FONT></B>
<BR><BR><BR>
<TABLE BORDER="1" WIDTH="50%">
<TR>
<TD>氏名</TD>
<TD>岡川 稲子</TD>
</TR>
<TR>
~途中省略~
つづき
<TR>
<TD ROWSPAN="2">趣味</TD>
<TD>インターネットとたわむれること<BR>
(ただし仕事になってしまってから、つらくなってきた..)</TD>
</TR>
<TR>
<TD>パソコンいじり<BR>
(しつこいようだけど、最近仕事になってしまってから、つらくなっ
てきた..)</TD>
</TR>
</TABLE>
<BR><BR>
<IMG SRC="line0005.gif">
</DIV>
実習8 リンクをはる
ようこそ私のページヘ
・私について
これをクリックすると
メール送信画面がでる
ようにする。
・お役立ちリンク集
watashi.html
私について
メールはこちら
index.html
links.html
お役立ちリンク集
・○○のページ
・○○のページ
・○○のページ
ホームページに戻る
ホームページに戻る
8-1 リンク
<A HREF~>
index.html内での記述の例
①別のホームページにジャンプ
<A HREF="http://www.nisc-net.co.jp/">○○・・</A>
html
index.html
②meibutu.htmlにジャンプ
<A HREF="meibutu.html"> ○○・・ </A>
meibutu.html
niigata
sake.html
kome.html
sonota
tulip.html
③sake.htmlにジャンプ
<A HREF="niigata/sake.html"> ○○・・ </A>
③tulip.htmlにジャンプ
<A HREF="niigata/sonota/tulip.html">○○・・ </A>
④メールアドレスにメール送信
<A HREF="mailto:[email protected]"> ○○・・ </A>
※
○○・・の部分は、ホームページに表示する
文字列や図を記述します。
実習9 フリー素材の使い方
WEB上には、たくさんのフリー素材のページがある。
無料のものがほとんどだが、使用上の注意をよく読んで
トラブルが起こらないようにしよう。
①使いたい画像の上で、
右クリックをする。
②「画像を」名前をつけて保存」
を選択。
③実習用フォルダに適当な
ファイル名をつけて保存。
ただし、拡張子(.gifとか.jpgとか)
は変更しない。
実習10 ファイル転送(WS-FTPの使い方)
WS FTPを起動すると「Sessionのプロパティ」というウィンドウが現れるので以下の画面のように
「General」の各項目を記入する。
「Profile Name:」
このボックスには「適当な名前」を入力。
設定の名前。
「Host Name/Address:」
サーバーマシンの「サーバネーム」または
「IPアドレス」を入力。
「Anonymous」のチェックボックスは
外しておく。
********
「User ID:」
「ユーザー名」を入力。
「Password:」
入力と同時にアスタリスクになるので画面に
は現れない。
設定がすんだら「OK」をクリック
(実習10ー2) ファイル転送つづき
うまく接続されると、次のようになります。
ローカルマシン
(自分の目の前のマシン)
ホームディレクトリが表示
されている
リモートマシン
(サーバーマシン)
(実習10ー3) ファイル転送つづき
①
②
③
④
ローカル、リモートともに対象となるフォルダ(ディレクトリ)を表示させる
転送したいファイルをクリック
ASCII か Binary か、チェックボックスをクリック
転送
これをダブルクリックすると、
ひとつ上のディレクトリを表示する
② 転送したいファイルをクリック
③ ASCIIかBinary
かを選択。
通常、htmlを記述した
ものはASCII、その
他画像などはbinary。
④ ローカルからリモートへ
転送。
スタイルシート 使用例
①フォントの大きさを変える
<SPAN STYLE=“font-size:20pt”>文字文字</SPAN>
②文字列の背景色
<SPAN STYLE="background:silver">背景色</SPAN>
③下線の無いリンクにする
<A HREF="xxx.html" STYLE="text-decoration:none">リンク</A>
④背景を左端のみに表示する
<STYLE TYPE="text/css">
<!-- BODY { background: url(image/back.gif) repeat-y }
</STYLE>
-->