情報活用基礎 第5回(5月15日)


本日のメニュー

HTML を使ってオリジナルの Web ページを作る.

Web ページを作る前に

Web ページを作成するにあたり,以下の点に留意すること.

HTML とは?

HTML は HyperText Markup Language の略で,HyperText を記述するための言語の一つである.

準備作業

教育用計算機システムで個人用 Web Page を公開するために,まずは以下の準備作業を行う(詳しくはテキスト pp.30-32 を参照).

ともかく作ってみよう

フォルダ Z/linuxhome/public_html の中に,index.html というファイル名で,次の文を作成する.
(例えば「メモ帳」にコピー&ペーストして,上記ファイル名で保存する.)
なお,保存する際の文字コードは「UTF-8」に設定すること!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのホームページ</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>はじめてのホームページ</h1>

<p>工事中</p>

</body>
</html>

作ったページを見てみる

ブラウザ(例えば Firefox)のアドレス欄に次のように打ち込み,上で作ったページを見てみる.

http://webserver/~ログイン名/

続いてブラウザのメニュー(「右クリック > メニューバー」としてメニューを表示させるとよい)から「ツール > ウェブ開発 > ページのソース」を選んで,上記ページのソースファイルを見てみる.

リンクを張ってみる

上記ソースファイル中の

<p>工事中</p>

はあまりに情けないので,次で置き換えてみる.

<p>私の隣に座っているのは,友人の <a href="http://webserver/~隣の人のログイン名"> 隣の人の名前 </a> です.</p>

Web 上ではどこがどう変わったのか,ブラウザから確認してみよう.

タグとは?

上記ソースファイルには <...></...> のようなカギカッコで囲まれた部分がたくさんあるが,こういうものを タグ(tag)という.例えば

<p>工事中</p>

は,段落(paragraph)のはじめを表す <p> という開始タグと,段落の終わりを表す </p> という終了タグがあって,それらの間に「工事中」という情報が書き込まれたものである.タグとその中身を合わせて「要素」という.

Web ページを作成するには,まずは様々なタグを使いこなせるようになることが不可欠です. 三重大学の 奥村晴彦先生による HTML5 の解説記事, あるいは大阪大学の 降旗大介先生の情報活用基礎のページ「第4回」 などを参照しながら,様々なタグの使い方を試してみましょう.

なお,WWW に関する一般的解説は 降旗大介先生の情報活用基礎のページ「第3回,第4回」 に詳しいので,ぜひ一度目を通して下さい.

確認テストの実施

作業の終了

作業が終了したらログアウトし,ディスプレイの電源を切る.計算機本体の電源は切らない.

なお,次回も Web ページ作成の続きを行います.