Webサイトの作成練習

手順
目次へ↑

次のファイルを自分のメディア(フロッピーディスク、MO、又はUSBメモリ)にダウンロードして下さい。
( [右クリック] して [対象をファイルに保存] ) で、すべてのファイルを同一フォルダに入れて下さい。

sample.html, second.html, bar.gif, bkg.gif, kgu.gif,

また、保存する際に最後に l をつけて拡張子を .html にして下さい。拡張子が .html のファイルを保存しようとする時にIEが余計なお節介で拡張子を .htm に変えようとするためです。注意してください。
ダウンロードした sample.html をIEで開いて下さい。
同じファイル sample.html を今度はメモ帳で開いて下さい。
拡張子が .html のファイルはIEに関連付けされてるので何も考えずに開くとIEで開いてしまいます。いろいろやり方はありますが、次の3種類くらい紹介しておきます。
- sample.html のアイコンを [右クリック] して [プログラムから開く] → [Notepad]
- メモ帳を立ち上げてからメモ帳のウィンドウに sample.html を D&D(ドラッグ・アンド・ドロップ)
- メモ帳のメニューから ( [ファイル(F)] → [開く(O)] → [ファイルの種類(T)] を [すべてのファイル] にしてから sample.html を探す)。
メモ帳のウィンドウでファイルの内容を修正し、[上書き保存]する。
IEのウィンドウで [最新の情報に更新] して修正が反映されてるかチェックする。
手順 4. 5. を納得するまで繰り返す。

段階1
目次へ↑

メモ帳に表示されてる HTML ソースコードと実際にブラウザ IE に表示されてる様子を見比べてみて下さい。タイトルの "my homepage" が IE のウィンドウバーやタブバーに表示されてることや、改行位置など確認できると思います。

<html>
<head>
<title>my homepage</title>
</head>
<body>
私のホームページにようこそ<br>
金沢太郎です。<br>
金沢学院大学の１年生です。<br>
簿記検定２級合格をめざしてがんばっています。
</body>
</html>

段階2
目次へ↑

水平線 <hr>、見出し <h1>～</h1>、段落 <p>～</p>、リンク <a>～</a>、画像 <img>のタグを使って次のように編集します。灰色になってる網掛け部分が修正箇所です。

<html>
<head>
<title>my homepage</title>
</head>
<body>
<hr>
<h1>私のホームページにようこそ</h1>
<hr>
<p>
金沢太郎です。<br>
金沢学院大学の１年生です。<br>
簿記検定２級合格をめざしてがんばっています。
</p>
<a href="second.html">第２ページへ</a><br>
<img src="bar.gif">
</body>
</html>

問題なければ次のような表示になります。(この例では背景が白色になってますがブラウザの標準設定によっては違った色が出るかも知れません。)

またリンクの設定が間違ってなければ、第２ページへのリンクをクリックすると次の図のページが現れます。

second.html の内容と表示。

<html>
<head>
<title>second page≤/title>
</head>
≤body>
第２ページです<br>
<a href="sample.html">戻る</a>
</body>
</html>

段階3
目次へ↑

<body>タグの属性で全体の文字と背景の色を変えてみましょう。

次のように直してください。灰色の網掛け部分が変更箇所です。 "#xxxxxx" の x の部分は (ここ) を参考に16進数の数値を入れてください。文字の色と背景の色にある程度のコントラストをつけないと文字が読めないので注意してください。

<html>
<head>
<title>my homepage</title>
</head>
<body bgcolor="#xxxxxx" text="#xxxxxx">
<hr>
<h1>私のホームページにようこそ</h1>
<hr>
<p>
金沢太郎です。<br>
金沢学院大学の１年生です。<br>
簿記検定２級合格をめざしてがんばっています。
</p>
<a href="second.html">第２ページへ</a><br>
<img src="bar.gif">
</body>
</html>

段階4
目次へ↑

<body>の background 属性で背景全体に画像を入れてみましょう。また、<p> タグを入れて段落を増やしましょう。さらに、<u>、<b>タグで文字を飾ってみましょう。最後に画像に大学トップページのリンクを張ってみましょう。

次のように直してください。灰色の網掛け部分が変更箇所です。

<html>
<head>
<title>my homepage</title>
</head>
<body background="bkg.gif">
<hr>
<h1>私のホームページにようこそ</h1>
<hr>
<p>
<u>金沢太郎</u>です。<br>
</p>
<p>
金沢学院大学の１年生です。<br>
<b>簿記検定合格</b>をめざしてがんばっています。
</p>
<a href="http://www.kanazawa-gu.ac.jp"><img src="kgu.gif">金沢学院大学へ</a><br>
<a href="second.html">第２ページへ</a><br>
<img src="bar.gif">
</body>
</html>

完成したら次のような表示になります。

段階5
目次へ↑

これまでやったことを復習して自分の自己紹介を myprofile.html というファイルに作ってください。画像ファイルなどは何を使っても良いですが他人の素材を使うときは規約などに目を通しておきましょう。

(イン活TOPに戻る) (藤本の担当講義に戻る) (目次に戻る) (Webサイト作成の基礎知識に戻る)

Webサイトの作成練習

目次

手順目次へ↑

段階1目次へ↑

段階2目次へ↑

段階3目次へ↑