HTML を使ってオリジナルの Web ページを作る.
Web ページを作成するにあたり,以下の点に留意すること.
住所・電話番号・生年月日・メールアドレス・自分の写真などの個人情報は,悪用される可能性もあるので,公開は自己責任で!
他人の著作権・肖像権などを侵害しないように!
他人の中傷,法に触れるような内容,あるいは人格を疑われるような事を書かないこと!
大学のサーバで作るページには,広告を載せてはダメ!
HTML は HyperText Markup Language の略で,HyperText を記述するための言語の一つである.
教育用計算機システムで個人用 Web Page を公開するために,まずは以下の準備作業を行う(詳しくはテキスト pp.30-32 を参照).
公開用フォルダ public_html
を作成する.具体的には次のようにする.
Documents を立ち上げ,フォルダ linuxhome
に入る(ダブルクリックする).
「ホーム > 新しいフォルダー」を選択.
『新しいフォルダー』と表示されている新しいフォルダーの名称欄に public_html
と入力し,Enter キーを押す.
フォルダ public_html
に閲覧許可を与える.具体的には次のようにする.
画面下方のクイック起動バーの右端にある「>>」をクリックし「Devel > Cygwin」を選ぶ.
別ウィンドウが開き,コマンドライン入力できるようになる.そこから「ssh webserver」(間は半角スペース)と入力して Enter キーを押す.つまり次のように入力する.
$ ssh webserver
すると,Are you sure you want to continue connecting (yes/no)? と聞いてくるので,yes と入力して Enter キーを押す.
正常に www サーバーにログインできたら,次のようなコマンドラインが現れる.
-sh-4.1$
そこから「chmod 711 ..
」(「chmod
」と「711
」,および「711
」と「..
」の間は,いずれも半角スペース)と入力して Enter キーを押す.つまり次のように入力する.
$-sh-4.1$ chmod 711 ..
同様に「chmod 711 .
」(「chmod
」と「711
」,および「711
」と「.
」の間は,いずれも半角スペース)と入力して Enter キーを押す.つまり次のように入力する.
$-sh-4.1$ chmod 711 .
作業に成功したら,exit
と入力して Enter キーを押し,WWW サーバーからログアウトする.
こうして自分のホームディレクトリに戻ってくるので,再びexit
と入力して Enter キーを押し,Cygwin を終了する.
【Tips】 chmod
は change mode を意味する Unix コマンドであり,711
は,「所有者」「所有グループ」「その他」にそれぞれ
7(「読み取り4」+「書き込み2」+「実行1」), 1(「実行1」),1(「実行1」)という許可(パーミッション)を与えているのである.
フォルダ
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回」 に詳しいので,ぜひ一度目を通して下さい.
「情報教育システムサポートページ」のメニューなどからCLEにログインし,コース一覧から「情報活用基礎」を選択.
左側のメニューから「コンテンツ」を選択し,「第5回 出席確認テスト」に回答・提出する.
回答期限: 本日 16:30
作業が終了したらログアウトし,ディスプレイの電源を切る.計算機本体の電源は切らない.
なお,次回も Web ページ作成の続きを行います.