ICT 研修資料 ホームページを Web 上で簡単作成！！ 多くのポータルサイト（Yahoo! Japan, Infoseek, etc.）では無料で作成できます。 任地での経験を情報発信することができ， 貴重な経験を派遣隊員同士はもちろん他者と共有することができます。 ここでは、Yahoo! Geocities を使って作ってみましょう 派遣現職教員（バヌアツ 15-1 小学校教諭）関野貴之先生の HP http://tabetabe.mine.nu/Vanuatu/ JOCV OV の HP ホームページ −1 ICT 研修資料 まずログイン 1. http://www.yahoo.co.jp/ にアクセスし，「ホームページ作成」をクリック 2. Yahoo! JAPAN にログイン どちらかをクリック 3. ログイン画面 ID は Yahoo メッセンジャーと共通 ホームページ −2 ICT 研修資料 いよいよＨＰ開設 1. 「ホームページ開設」をクリック 2. 「規約」に同意し ホームページ 開設！ あなたの HP のアドレス 早速ホームページ 作成へ！ ホームページ −3 ICT 研修資料 いよいよＨＰ作成（トップページ） ○ まず、「クイックページ」を利用してトップページを作成しよう クイックページを利用 デザインの 選択 とりあえずトップページの デザインだけできあがり ホームページ −4 ICT 研修資料 ＨＰ作成（ほかのページ） ○ ほかのページは HTML エディタで記述。 HTML の基礎知識が必要になる。 わからなくても、とりあえずいろいろ書いてみよう HTML エディタ ここで HTML を記述 ファイルマネージャ ファイルの階層等を設定 ○ ファイルマネージャでは、個人のコンピュータで作成 した HTML ファイルなどをアップすることもできる。 ホームページ −5 ICT 研修資料 HTML の基本ルール ○ 命令はタグと呼ばれる記号で挟む（たまに<br>, <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> 私のホームページです。<br> <b>これは太字です</b><br> <font color=”#ff0000”>これは赤です</font> <p>これは段落です</p> <p><a href=”test2.html”>これはリンクです</a></p> <img src=”test.jpg”>これは画像を張っています。 <ol> <li>番号つき箇条書きです</li> <ul> <li>番号なし箇条書きです</li> <li>このように入れ子にすることもできます</li> </ul> <li>2 行目</li> </ol> </body> </html> ホームページ −6 ICT 研修資料 HTML の基本タグ 基本タグ <html> HTML 文書を書く <head> HTML のヘッダを書く <title> HTML のタイトルを書く <body> HTML の本文を書く <h1> 章の見出しを記述する（1 から 6 まで） <p> 段落を記述する <hr> 水平線を記述する <br> 改行する（タグは閉じない） <center> 中寄せする <div align=center> 中寄せする <div align=right> 右寄せする フォント（文字） <font size="..."> 文字の大きさを変更する（1, 2, 3, 4, 5, など絶対指定 と+1, -1 など相対指定） <b> 太字にする <i> 斜体文字にする <font color="..."> 文字の色を変更する <font face="..."> 文字の書体を変更する <u> アンダーラインを引く <s> 打ち消し線を引く 背景 <body bgcolor="..."> <body background="..."> 背景色を指定する 背景画像を指定する リンク <img src="..."> 画像を貼り付ける（例：<img src=”image.gif”>） <a href="..."> リンクする（例：<a href=”test.html”>test</a>） <a href="mailto:∼">メールアドレスクリックでメーラーを起動する 箇条書き（リスト） <ol> <ul> <li> 順序箇条書き（type=”a” でアルファベットにもできます） 順序なし箇条書き（type=”disc”, type=”circle”, type=”square”） リスト項目 ホームページ −7 ICT 研修資料 相対パスと絶対パス ホームページ作成時、よくリンクが切れていることがあります。リンクを張る際にはファイル が保存されているフォルダ（ディレクトリ）の階層を考えなければなりません。ここでは、リン クを張るために用いる「相対パス」と「絶対パス」のそれぞれを簡単に紹介します。 たとえば、作成した 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 を指定しています。 ホームページ −8 ICT 研修資料 参考 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/ （掲示板が有名？） ホームページ −9
© Copyright 2026 Paperzz
