実習1 基本的な骨組み

Download Report

Transcript 実習1 基本的な骨組み 

ホームページ作成入門講座
－ HTML編 －
１９９９年６月
Copyright© 1999 INAGAWA, Kumiko
テキスト 第４版
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 入力の際の注意点ほか




日本語入力方法確認（カナ入力？ローマ
字入力？）
タグのなかは空白は半角で
ＨＴＭＬソースで行をかえても、実際のブラ
ウザ表示に影響しません。
ファイル名やＵＲＩ以外は、大文字・小文字
の区別は関係ありません。
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 保存・確認
１．保存 [ファイル]→[上書き保存]
２．確認
①[ファイル]→
[ページを開く]
② ファイル
を選択
③ ファイルの
場所を選択
④ 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>（ｎは数字）
章の見出し(Header)を指定
［記述例］
<H1>見出し１</H1>
<H2>見出し２</H2>
<H3>見出し３</H3>
<H4>見出し４</H4>
<H5>見出し５</H5>
<H6>見出し６</H6>
ブラウザで
表示すると
2-2 改行・段落 <BR>，<P>～</P>
…
<BR>
［記述例］
改行
<P> …
段落付け
改行の場合は、こんな感じ。<BR>
段落付けの場合はこんなふうになる。
<P>こんな
書き方をしても、こ
うなる。</P>
［ブラウザで表示すると］
改行の場合は、こんな感じ。
段落付けの場合はこんなふうになる。
こんな書き方をしても、こうなる。
2-3-①
色の指定
方法１：色の名前を書く
<BODY BGCOLOR＝"Gray" >
|
</BODY>
方法２：色の番号を書く
<BODY BGCOLOR＝"#808080">
|
</BODY>
どちらも背景がグレーになる
実習2-3ｰ②
赤の
強さ
緑の
強さ
色の構造
青の
強さ
＃ ＦＦ ００ ００
２桁ごとに赤緑青の強さを表している。
表示は１６進数。
（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"や"-1"などの現在の大きさに対する相対指定もできる。
<FONT COLOR="色の指定">
色の指定は、色の名前か、"#808080"のような形式。
［記述例］
<FONT SIZE="-1" COLOR="#FF0000">
文字１
</FONT>
<BR><BR>
<FONT SIZE="6" COLOR="GREEN">
文字２
</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%の横幅。
… 太さ （「％」か「ピクセル」で指定）
この例では、太さ１０ピクセル。
<HR NOSHADE>
… 影なし
<HR WIDTH="30" ALIGN="left">
…
［ブラウザで
表示すると］
ALIGN：表示位置指定。"left"は左寄せ、
"right"は右寄せ、"center"は中央。
3-2 リスト表示①
［記述例］
<UL>
<LI>リスト１
<LI>リスト２
</UL>
<UL>
［ブラウザ表示］
各リストの先頭には
<LI>を付ける
<UL TYPE="circle">
<LI>リスト３
<LI>リスト４
</UL>
<UL TYPE="square">
<LI>リスト５
<LI>リスト６
</UL>
3-3 リスト表示②
［記述例］ <OL>
<LI>リスト１
<LI>リスト２
</OL>
<OL>
［ブラウザ表示］
<OL TYPE="A">
<LI>リスト３
<LI>リスト４
</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-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= "囲み線の太さ" >
数値を指定。
０を指定すると囲み線なし
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 背景の画像
－入力－
背景の指定は次の２通りが考えられる。
① <BODY BGCOLOR="○○"> で、背景の色を指定。
② <BODY BACKGROUND="○○"> で、背景の画像を指定。
この実習では、画像の貼り付けをやってみる。
実習用フロッピーに"back.gif"が入っているので、それ
を使う。
<BODY BACKGROUND="back.gif">
実習6 自分で画像をつくる
ホームページで使用できる画像形式は、GIF形式かJPEG形式。
（拡張子が「.gif」 か 「.jpg」）
フリーの素材が出回っているので、あえて作ることはない
かもしれないが、いちばんお金がかからない方法を説明する。
手順１：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>
実習８ リンクをはる
ようこそ私のページヘ
・私について
これをクリックすると
メール送信画面がでる
ようにする。
・お役立ちリンク集
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>
※
○○・・の部分は、ホームページに表示する
文字列や図を記述します。
実習９ フリー素材の使い方
WEB上には、たくさんのフリー素材のページがある。
無料のものがほとんどだが、使用上の注意をよく読んで
トラブルが起こらないようにしよう。
①使いたい画像の上で、
右クリックをする。
②「画像を」名前をつけて保存」
を選択。
③実習用フォルダに適当な
ファイル名をつけて保存。
ただし、拡張子（.gifとか.jpgとか）
は変更しない。
実習１０ ファイル転送（WS-FTPの使い方）
WS FTPを起動すると「Sessionのプロパティ」というウィンドウが現れるので以下の画面のように
「General」の各項目を記入する。
「Profile Name:」
このボックスには「適当な名前」を入力。
設定の名前。
「Host Name/Address:」
サーバーマシンの「サーバネーム」または
「ＩＰアドレス｣を入力。
「Anonymous」のチェックボックスは
外しておく。
********
「User ID:」
「ユーザー名」を入力。
「Password:」
入力と同時にアスタリスクになるので画面に
は現れない。
設定がすんだら「ＯＫ」をクリック
（実習１０ー２） ファイル転送つづき
うまく接続されると、次のようになります。
ローカルマシン
（自分の目の前のマシン）
ホームディレクトリが表示
されている
リモートマシン
（サーバーマシン）
（実習１０ー３） ファイル転送つづき
①
②
③
④
ローカル、リモートともに対象となるフォルダ（ディレクトリ）を表示させる
転送したいファイルをクリック
ＡＳＣＩＩ か Ｂｉｎａｒｙ か、チェックボックスをクリック
転送
これをダブルクリックすると、
ひとつ上のディレクトリを表示する
② 転送したいファイルをクリック
③ ＡＳＣＩＩかＢｉｎａｒｙ
かを選択。
通常、htmlを記述した
ものはＡＳＣＩＩ、その
他画像などは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>
-->