ホームページを Web 上で簡単作成！！

(1)

ホームページを Web 上で簡単作成！！

多くのポータルサイト（Yahoo! Japan, Infoseek, etc.）では無料で作成できます。

任地での経験を情報発信することができ，

貴重な経験を派遣隊員同士はもちろん他者と共有することができます。

ここでは、Yahoo! Geocities を使って作ってみましょう

派遣現職教員（バヌアツ 15-1 小学校教諭）関野貴之先生のHP http://tabetabe.mine.nu/Vanuatu/

JOCV OV の HP

(2)

まずログイン

1. http://www.yahoo.co.jp/ にアクセスし，「ホームページ作成」をクリック

2. Yahoo! JAPAN にログイン

3. ログイン画面

ID はYahooメッセンジャーと共通

どちらかをクリック

(3)

いよいよＨＰ開設

1. 「ホームページ開設」をクリック

2. 「規約」に同意し

ホームページ開設！

早速ホームページ作成へ！

あなたの HP

のアドレス

(4)

いよいよＨＰ作成（トップページ）

○ まず、「クイックページ」を利用してトップページを作成しよう

クイックページを利用

デザインの選択

とりあえずトップページの

デザインだけできあがり

(5)

ＨＰ作成（ほかのページ）

○ ほかのページはHTMLエディタで記述。

HTMLの基礎知識が必要になる。

わからなくても、とりあえずいろいろ書いてみよう

○ ファイルマネージャでは、個人のコンピュータで作成したHTMLファイルなどをアップすることもできる。

ファイルマネージャファイルの階層等を設定

HTML エディタ

ここで HTML を記述

(6)

HTML の基本ルール

○ 命令はタグと呼ばれる記号で挟む（たまに , <img>など例外あり）

○ 改行は意味を成さない

○ タグを閉じる際はスラッシュではじめる（たとえば、</body>）

○ タグは半角英数で記述する

○ HTML ファイルの拡張子は, .html もしくは .htm

○ HTML ファイルのファイル名は基本的に半角英数文字を用いる

○ 色は RGB で 16 進法：黒（#000000），白（#ffffff），赤（#ff0000），緑（#00ff00），青（#0000ff）

○ 画像は GIF, JPG, PNG 形式を用いる

＜練習１＞

1. 以下をテキストエディタ（メモ帳）で書いてみよう。

2. test.html の名前で保存しよう。

3. ブラウザ（Internet Explorer, Netscape, Mozilla, Firefox, など）で表示してみよう。

4. 画像が表示されません。何かの写真(jpg 形式)を test.html と同じフォルダに入れて、ブラウザの「更新」ボタンを押してみましょう。ちゃんと表示されましたか？

test.html

<html>

<head>

<title>ホームページの練習</title>

</head>

<body>

私のホームページです。

これは太字です

これは赤です

これは段落です

<a href=”test2.html”>これはリンクです</a>

<img src=”test.jpg”>これは画像を張っています。

<ol>

<li>番号つき箇条書きです</li>

<ul>

<li>番号なし箇条書きです</li>

<li>このように入れ子にすることもできます</li>

</ul>

</ol>

</body>

</html>

(7)

HTML の基本タグ

基本タグ

<html> HTML文書を書く

<head> HTMLのヘッダを書く

<title> HTMLのタイトルを書く

<body> HTMLの本文を書く

<h1> 章の見出しを記述する（1から6まで）

段落を記述する

<hr> 水平線を記述する

改行する（タグは閉じない）

<center> 中寄せする

<div align=center> 中寄せする

<div align=right> 右寄せする

フォント（文字）

文字の大きさを変更する（1, 2, 3, 4, 5, など絶対指定と+1, -1 など相対指定）

太字にする

斜体文字にする

文字の色を変更する

文字の書体を変更する

アンダーラインを引く

<s> 打ち消し線を引く

背景

<body bgcolor="..."> 背景色を指定する

<body background="..."> 背景画像を指定する

リンク

<img src="..."> 画像を貼り付ける（例：<img src=”image.gif”>）

<a href="..."> リンクする（例：<a href=”test.html”>test</a>）

<a href="mailto:〜">メールアドレスクリックでメーラーを起動する

箇条書き（リスト）

<ol> 順序箇条書き（type=”a” でアルファベットにもできます）

<ul> 順序なし箇条書き（type=”disc”, type=”circle”, type=”square”）

<li> リスト項目

(8)

相対パスと絶対パス

ホームページ作成時、よくリンクが切れていることがあります。リンクを張る際にはファイルが保存されているフォルダ（ディレクトリ）の階層を考えなければなりません。ここでは、リンクを張るために用いる「相対パス」と「絶対パス」のそれぞれを簡単に紹介します。

たとえば、作成したHTMLファイルと画像ファイルが、以下のようなフォルダ（ディレクトリ）

階層になっているとします。 □ がフォルダを、 ◇ がファイルを意味します。アドレス (http://www.criced.tsukuba.ac.jp/index.html) が◆を表示します。

□ http://www.criced.tsukuba.ac.jp/

├◆ index.html

├□ criced

│├◇ aaa.html

│├◇ bbb.html

│└□ image

│ ├◇ ccc.jpg

│ └◇ ddd.gif

├□ hoge

│└◇ ddd.html

相対パス

◆ index.html から◇ aaa.html へジャンプする相対パス（リンク）は次のように書きます。

<a href=”criced/aaa.html”>aaaへジャンプ</a>

index.htmlのあるところからcriced フォルダに入り、aaa.htmlを指定しています。

◇ aaa.html から◇ ddd.html へジャンプする相対パス（リンク）は次のように書きます。

<a href=”../hoge/ddd.html”>dddへジャンプ</a>

aaa.html のあるところから階層をひとつ上がり（”..”はひとつ上の階層を示す）、

hogeフォルダに入りddd.htmlを指定しています。

絶対パス

◆ index.html から◇ aaa.html へジャンプする絶対パス（リンク）は次のように書きます。

<a href=”http://www.criced.tsukuba.ac.jp/criced/aaa.html”>aaa へジャンプ</a>

一番上の階層からcriced フォルダに入り、aaa.htmlを指定しています。

◇ aaa.html から◇ ddd.html へジャンプする絶対パス（リンク）は次のように書きます。

<a href=”http://www.criced.tsukuba.ac.jp/hoge/ddd.html”>dddへジャンプ</a>

一番上の階層からhoge フォルダに入り、ddd.htmlを指定しています。

(9)

参考

HP作成ソフト

○ IBMホームページビルダー (http://www-6.ibm.com/jp/software/internet/hpb/)

○ Macromedia Dreamweaver (http://www.macromedia.com/jp/software/dreamweaver/)

○ Adobe GoLive (http://www.adobe.co.jp/products/golive/)

○ Microsoft FrontPage (http://www.microsoft.com/japan/office/frontpage/)

HP作成の有名サイト

○ とほほのWWW入門 http://www.tohoho-web.com/

無料cgi, phpスクリプトを提供する有名サイト

○ Kent Web http://www.kent-web.com/ （掲示板が有名？）

ホームページを Web 上で簡単作成！！