ホームページ作成入門講座

ホームページ作成入門講座

日時：平成１３年２月２５日　　午前１０時

場所：中之条ツインプラザ

ＪＡＲＬ群馬県支部

ホームページの基本

◎ＨＴＭＬとは

　　・　ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕｅｇｅ（ハイパーテキスト記述言語）

　　　　　バージョンに注意

　　・　テキストファイル

　　　　　拡張子：htm

　　・　タグ

　　　　　<HTML>　</HTML>　　　　開始タグ、終了タグ

　　・　ブラウザー

　　　　　インターネットエクスプローラ、ネットスケープコミュニケータ(ナビゲータ) 等

◎ホームページの作り方

　　・　内容、構成を考える

　　　　　　コンテンツ

　　・　画像等材料の用意

　　　　　フォルダー（ディレクトリ）
　　　　　ＪＰＧ、ＧＩＦファイル
　　　　　画像ファイルサイズは小さく（サイズ縮小、減色）
　　　　　画像処理ソフトの利用
　　　　　著作権に注意

　　・　ＨＴＭＬによるソースファイルを作成・保存する。

　　　　　メモ帳等のテキストエディター
　　　　　タグ挿入タイプのテキストエディター
　　　　Ｗｉｎｄｏｗｓ付属の"FrontＰａｇｅ　Ｅｘｐｒｅｓｓ"
　　　　　市販のホームページ作成ソフト
　　　　　
　　　　　最初に表示するファイル名は、"index.htm"がよい。
　　　　　大文字と小文字：ＵＮＩＸサーバーは区別する。ファイル名はどちらかに統一する。
　　　　　半角と全角：ファイル名はなるべく半角英数文字で、半角カナは使わない。
　　　　　改行：ＨＴＭＬソース上の改行は意味がない。タグ<BR>が必要。

　　・　ブラウザで見て確認する。

　　　　　ブラウザの種類とバージョンに注意。
　　　　　違った表示になる場合や、対応していないタグがある。

　　・　サーバーに送る

　　　　　契約しているプロバイダーのＷｅｂサーバーへ送る（アップロード）。
　　　　　無料レンタルサーバーの利用
　　　　　ＦＴＰ転送用のソフトの利用

作成してみましょう

◎基本構造

<Html>
<Head>
<Title>群馬太郎ホームページ</Title>
</Head>
<BODY>
ようこそＭｙＨｏｍｅｐａｇｅへ
メニュー
ＷＨＡＴ'Ｓ　ＮＥＷ
自己紹介
検索
リンク
質問はこちらへ
</Body>
</Html>

<BODY>と</BODY>の間に内容を書く。

属性　　<BODY BGCOLOR="#000000"></BODY>

　　　背　景　色　　　　　　　　BGCOLOR="#FFFFFF"
　　　背景画像　　　　　　　　　BACKGROUND="abc.gif "
　　　本文文字色　　　　　　　TEXT="#000000"　
　　　ﾘﾝｸ部分の色　　　　　　LINK="#0000FF"
　　　ｸﾘｯｸされたときの色　　 ALINK="#00FF00"
　　　ｸﾘｸ済みの色　　　　　　 VLINK="#00FFFF"

カラー

　　黒：#000000(BLACK)　　　赤：#FF0000(RED)　　　緑：#008000(GREEN)
　　黄緑：00FF00(LIME) 　　　青：#0000FF(BLUE)　　　水色：#00FFFF(AQUA)
　　黄：#FFFF00(YELLOW)　　紺：#000080(NAVY)　　紫：#800080(PURPLE)
　　空：#00FFFF(SKYBLUE)　灰：#808080(GRAY) 　　銀：#C0C0C0(SILVER)
　　茶：#800000(MAROON) 　白：#FFFFFF(WHITE)

◎見出し

<H1 ALIGN="CENTER">ようこそＭｙＨｏｍｅｐａｇｅへ </H1>

文字サイズ

　　　Ｈ１　　　大きい
　　　Ｈ２
　　　Ｈ３　　　標準
　　　Ｈ４
　　　Ｈ５　　　小さい

　位置

　　左端　　ALIGN="LEFT"　　
　　中心　　ALIGN="CENTER"
　　右端　　ALIGN="RIGHT"

※文字の大きさを制御するだけならば、次の <FONTSIZE=""> タグの方がよい。

◎文字サイズ・書体

<FONT SIZE="5" COLOR="#000000">メニュー </FONT>

<B>ABC</B>　　　　　太字
<I>ABC</I>　　　　　　イタリック
<U>ABC</U>　　　　　アンダーライン

サイズ
　　　１（小）から７（大）で指定する。
　　　サイズを指定しない場合　SIZE="3"　の大きさで表示される。
　
　　色
　　　<BODY>タグと同じカラーコードによる。

◎その他

　　　　　　　　　　　　　コメント文（表示されない）
<COMMENT></COMMENT>　　　　　　　　　　〃
<P ALIGN="CENTER"></P> 　　　　段落と割付
<DIV ALIGN="CENTER></DIV>　　割付
<Br>　　　　　　　　　　　　　　　　　　　改行
<HR COLOR="#0000FF" SIZE="5" WIDTH="50%">　　水平線
<CENTER></CENTER> 　　　　　　　センタリング
<Blockquote></Blockquote>　　　　引用（インデントされる）
<PRE></PRE>　　　　　　　　　　　　　見た目どおりに表示される

ここまでのタグを使ったホームページ例

◎リスト

番号順リスト

<OL TYPE="a"　>
<LI>パソコンを買いました
<LI>ワープロの勉強をしました
<LI>メールの勉強をしました
<LI>ホームページ作成を勉強しました
</０L>

番号なしリスト

<UL TYPE="CIRCLE">
<LI>
<LI>
<LI>
<LI>
<LI>
</UL>

ＴＹＰＥ属性

　番号順

　　　　１：番号に算用数字
　　　　Ａ：アルファベット大文字
　　　　ａ：アルファベット小文字
　　　　Ｉ：番号に大文字のローマ数字
　　　　ｉ：番号に小文字のローマ数字

　番号なし

　　　　●：DISC
　　　　○：CIRCLE
　　　　■：SQUARE

◎画像

<IMG SRC="abc.jpg" ALT=”XYZ” WIDTH=320 HEIGHT=240 ALIGN="LEFT" BORDER="1" HSPACE="20" VSPACE="20">

<BR CLEAR="ALL">

◎表
<Table ALIGN="CENTER" BORDER=3>
<CAPTION ALIGN="TOP">自己紹介</CAPTION>
<Tr>
<Th>項目</Th><Th>内容</Th>
<Tr>
<Td>名前</Td> <Td>群馬太郎</Td>
</Tr>
<Tr>
<Td>生年月日 </Td><Td>2001年１月１日 </Td>
</Tr>
<Tr>
<Td>住所 </Td><Td>群馬県前橋市 </Td>
</Tr>
<Tr>
<Td>趣味 </Td><Td>こちらへ </Td>
</Tr>
<Tr>
<Td>ＰＣ環境</Td><Td>ＰＣの部屋へ </Td>
</Tr>

</Table>

◎リンク

・別ページへリンク

<A HREF="abc.htm">リンク先</A>

・別サイトへのリンク

<A HREF="http://www.yahoo.co.jp">ヤフーＪａｐａｎ</A>

・メール送信の設定

<A HREF="mailto:abc@jarl.com">MAIL</A>

・同一ページ内の指定箇所へリンク

<A HREF="#ABC">リンク先</A>
<A NAME="ABC">ABC</A>

リンク先の部分は、文字のほか画像を用いることもできます。

　　　<A HREF="abc.htm"><IMG SRC="abc.gif">リンク先</A>

属性として　TARGET="_BLANK"　とすることでリンク先を新しいウインドウに表示できます。

　　　<A HREF="abc.htm" TARGET="_BLANK">

◎フレーム

frame.htm

<html>
<head>
<title>フレームサンプル</title>
</head>
<Frameset Cols="20,80" FrameSpacing="1">
<Frame Src="frame1.htm" name="A">
<Frame Src="frame2.htm" name="B">
</Frameset>
</html>

frame1.htm

<Html>
<Head>
<Title>フレーム１</Title>
</Head>
<BODY>
メニュー<BR><BR>
<A HREF="frame2.htm#X" TARGET="B">ＷＨＡＴ'Ｓ　ＮＥＷ</A><BR><BR>
<A HREF="frame2.htm#Y" TARGET="B">自己紹介</A><BR><BR>
検索<BR><BR>
リンク<BR><BR>
質問はこちらへ<BR><BR>
</Body>
</Html>

frame2.htm

<Html>
<Head>
<Title>フレーム２</Title>
</Head>
<BODY>
ようこそＭｙＨｏｍｅｐａｇｅへ<BR><BR>
メニュー<BR><BR>

<A NAME=X>
ＷＨＡＴ'Ｓ　ＮＥＷ<BR><BR>
　　パソコンを買いました<BR>
　　ワープロの勉強をしました<BR><BR>
</A>
<A NAME=Y>
自己紹介<BR><BR>
　　名前<BR>
　　生年月日<BR><BR>
</A>
</Body>
</Html>

魅力あるﾎｰﾑﾍﾟｰｼﾞ作り

◎コンテンツが一番大切

　　タイムリーな更新

　　画面の動きを軽く

◎多くのタグを覚える

　　<MARQUEE DIRECTION="LEFT" BEHAVIOR="SCROLL" BGCOLOR="#00FFFF">回ります</MARQUEE>

　　<BLINK>点滅します</BLINK>

◎ＧＩＦアニメ等の利用

　　フリー素材を提供するホームページの利用

　　画像処理ソフトを使って自分で作る

◎ＪａｖａＳｃｒiｐｔ

更新日付の表示

<script language="javascript">

</script>

時刻によるあいさつ

<SCRIPT Language="JavaScript">

</SCRIPT>

◎ＣＧＩ・ＳＳＩ

アクセスカウンター

掲示板

<<< ホームページ作成に便利なフリーソフトウエア紹介>>>

・　ＴＴＴＥＤＩＴ又はＷｅｂＥｄｉｔｏｒ　　タグ挿入型ＨＴＭＬエディター

・ＨＣＨＫ　　ＨＴＭＬチェッカー

・ＲＯＯＴＦＴＰ又ＦＦＦＴＰ　　エクスプローラのようなＦＴＰクライアントソフト

・ＧＩＭＰ　　　　　高機能フォトレタッチソフト。ロゴの作成もできる。

・ＩｒｆａｎＶｉｅｗ　　高速画像ビューア、画像の簡単な補正、サイズ変更、減色機能もある。

・ＨｉｐｅｒＰａｉｎｔ　　高機能フルカラーグラフィックエディター

・Ｄｐｉｘ　　　　　　２５６色グラフィックエディター

・ Animation GIF Maker　　アニメＧＩＦ作成ソフト

<<<　サンプルソース（sample.htm）　>>>

１：<html>
２：<head>
３：<title>群馬太郎ホームページ</title>
４：</head>
５：<body bgcolor="#C0C0C0">
６：<hr size="4" noshade width="85%" color="#00FF00">
７：<p align="center"><font color="#0000FF" size="7">ようこそＭｙ
　　Ｈｏｍｅｐａｇｅへ</font></p>
８：<hr size="4" noshade width="85%" color="#00FF00">
９：<div align="center">
１０：<img src="bridge.jpg" border="1" width="500" height="390">
１１：<br><br><br>
１２：<font color="#FF0000" size="7">メニュー</font>
１３：<br><br><br><br><br>
１４：<font color="#0000FF" size="4"><b>ＷＨＡＴ'Ｓ　ＮＥＷ</b>
１５：<br>
１６：<oL><font color="#0000FF" size="4">
１７：<LI>パソコンを買いました
１８：<LI>ワープロの勉強をしました
１９：<LI>メールの勉強をしました
２０：<LI>ホームページ作成を勉強しました</font>
２１：</oL>
２２：<br>
２３：<b><A Href="table.htm">自己紹介</A></b>
２４：<br><br>
２５：<b><A Href="http://www.yahoo.co.jp">検索</A></b><br><br>
２６：<b>リンク</b></font>
２７：<br><br><br><br>
２８：<font color="#FF0000" size="2"><b>質問等は<A Href="mailto:ja1svp
　　　@jarl.com">こちら</A>へ</b></font><br>
２９：</p>
３０：</body>
３１：</html>

<<<　HTMLタグ一覧　>>>

フォント
<FONT>*T
<B>*S
<I>S
<TT>S
<U>T
<S>T
<STRIKE>T
<BIG>S
<SMALL>S
<BLINK>
<BASEFONT>T

意味
<ADDRESS>S
<BLOCKQUOTE>S
<Q>S
<INS>S
<DEL>S
<SUB>S
<SUP>S
<EM>S
<STRONG>S
<ACRONYM>S
<ABBR>S
<CITE>S
<DFN>S
<CODE>S
<KBD>S
<SAMP>S
<VAR>S

基本
<!DOCTYPE>*
<HTML>*S
<HEAD>*S
<TITLE>*S
<BODY>*S

コメント
*
<COMMENT>x

文書構造
<H1>-<H6>*S
<P>*S

改行
<BR>*S
<NOBR>
<WBR>

水平線
<HR>*S

リンク
<A>*S
<BASE>S
<MAP>S
<AREA>S

リスト
<LI>*S
<UL>*S
<OL>*S
<DL>*S
<DT>*S
<DD>*S
<DIR>xT
<MENU>xT

フォーム
<FORM>S
<INPUT>S
<SELECT>S
<OPTGROUP>S
<OPTION>S
<TEXTAREA>S
<BUTTON>S
<FIELDSET>S
<LEGEND>S
<LABEL>S

テーブル
<TABLE>*S
<TR>*S
<TH>*S
<TD>*S
<CAPTION>S
<COL>S
<COLGROUP>S
<THEAD>S
<TBODY>S
<TFOOT>S

音・動画
<IMG>*S
<BGSOUND>

埋め込み
<SCRIPT>*S
<NOSCRIPT>S
<APPLET>T
<OBJECT>S
<PARAM>S
<EMBED>
<NOEMBED>

フレーム
<FRAME>F
<FRAMESET>F
<NOFRAMES>F
<IFRAME>T

レイヤ
<LAYER>
<ILAYER>
<NOLAYER>

べたテキスト
<PRE>*S
<XMP>x
<PLAINTEXT>x
<LISTING>x

スタイル
<STYLE>*S
<SPAN>S
<DIV>S

レイアウト
<CENTER>T
<MULTICOL>x
<SPACER>x

国際化
<BDO>S

ルビ
<RUBY>x
<RB>x
<RT>x
<RP>x

その他
<META>S
<LINK>S
<MARQUEE>x
<ISINDEX>xT
<KEYGEN>x
<NEXTID>x
<SERVER>x

特殊文字
&xxx;*

属性
ACCESSKEY=
ALIGN=
CLASS=
DIR=
ID=
LANG=
LANGUAGE=
NAME=
STYLE=
TABINDEX=
TARGET=
TITLE=
TYPE=
=color

* よく使用されているもの
x あまり使用されないもの
S HTML4.01(Strict)で定義されるもの
T HTML4.01(Transitional)で定義されるもの
F HTML4.01(Frameset)で定義されるもの

[PR]話題の《あのｹﾞｰﾑ》の世界へ:今なら無料で遊び放題のﾁｬﾝｽ中だよ！