Webページの作成手順とHTML構文の概要

トップページとなるファイル public_html/index.htmlを作成する場合の手順を紹介する。 ネットワーク(MIND)への接続と利用も併せて参照のこと。

Webページの作成・閲覧手順

  1. Webブラウザを起動する
  2. ローカルコンピュータでのWeb専用フォルダ たとえば myweb を開く。
  3. HTMLファイル index.html をテキストエディタで作成し、myweb内に保存する。
  4. ローカルファイルとして閲覧:作成したHTMLファイルをWebブラウザに Drag & Drop(このとき「アドレスバー」にはどのように表示されるかを確認せよ)。
  5. 編集・保存したHTMLファイル(などの)をWebサーバ www.isc.meiji.ac.jp 側にファイル転送する。
  6. Webサーバ経由で閲覧確認:Webサーバ経由 http://www.isc.meiji.ac.jp で閲覧ために、そのURLをWebブラウザに入力する。 たとえば、URLとして次のように:
    http://www.isc.meiji.ac.jp/~ce98765/index.html
    
  7. Webページの作成サイクル:Webブラウザの閲覧結果をみながら、HTMLファイルの修正・保存して 4. および 5. にもどってWebブラウザでファイルを再読み込みする。

エディタ画面でHTML文書が修正されていても、『それを保存した上で、ファイルをブラウザに再読み込みするまでは』、閲覧ページ内容は更新されないことに注意しよう。

作成するHTMLファイル

WebページとしてHTMLファイルを作成する場合に留意すべき点は次の3点である。

DOCTYPE宣言はWebブラウザにHTMLファイル内容をどのように解釈すべきを通知する。 Webブラウザが高機能化して、HTMLタグの書き方を間違えてもブラウザがうまく取り繕って表示してしまう。 そも結果、「間違い」に気づきにくい上に、自分の環境(OSやブラウザ)だけに依存した見栄えのつじつま合わせに陥りやすい。

意識した厳格なHTML5での記述は、EPUB3に準拠した電子書籍の作成には欠かせない。

簡単なWebページをWebサーバ経由で表示してみる

simple_publichtml_files

次のような内容でWebサーバー www.isc.meiji.ac.jp 内のユーザ ce98765 のWeb専用ディレクトリ public_html 直下に、ファイル index.html (これをファイルパスを含めて ~/public_html/index.htmlと書く)を保存しよう。 ここでは、画像ファイル ~/public/image/myillustration.png も読み込んでいる。 多数のファイルを整然と管理できるようにするために、目的に応じてフォルダを階層的に配置しよう。 ここでは、フォルダ image を作成してそこに画像ファイル myillustration.png を格納している。

この例では、HTMLファイルには文字コード指定やDOCTYPE宣言を行っている。 これについては、HTML5のHTML要素とそのヘッダ部で紹介する。

<!DOCTYPE html>
<html lang="ja">
<title>太郎のページ</title>
</head> 

<body>
<h1>明治太郎のページにようこそ</h1>
<img src="image/myillustration.png">
このページには楽しい内容が盛りだくさんです。
<ul> 
<li><a href="profile.html">自己紹介</A></li>
<li><a href="restraurant.html"> たこ焼きはここで食え</a></li>
<li><a href="saru-kani.html">サルかに合戦研究</a></li>
</ul> 
<hr />
<address>
明治太郎 ce98765@meiji.ac.jp<br />
明治大学大学 理工学研究科 複雑科学専攻1年
</address>
</body>
</html>
演習1: 上の例を参考に、Webディレクトリ public_html内に index.html を作成し、http://www.isc.meiji.ac.jp 経由でその内容を閲覧しなさい。 このとき、「アドレスバー」には public_html は表示されないことを観察しなさい。
演習2: 上の例では、作成したファイルの文字コードを指定していない。 Webブラウザのデフォルト文字コード設定を確認し、文字化けなどの現象がどのように現れるかを確かめてみなさい。

Webページの署名

自分で作成するすべてのWebページに署名をつけることは、内容に関する責任を明確にし、信頼されるWebページであるためには欠かせないことは明らかである。 上の例ではアドレスタグ<address>を使って署名を書いている。

演習3: 学内限定Webページで実名を明記することには大きな問題が発生する可能性は少ない(それでもWebコンテンツにはしかるべき配慮が必要であることは言うまでもない)。 さまざまなに提供されているブログサービスやWebページサービスにおいて、実名表記についてどう考えればよいだろうか。
演習4: twitterはフォローしていなくてもダイレクトメッセージを受け取ることができるようになった(日本ではまだ。順次実現中のようだ)。 Webページを含めて(メールアドレスやtwitterアカウントが明記されているなど)メッセージ発信者へのメッセージ伝達が可能な仕組みは、スパムを蔓延させるだけだという否定的な見方と、スパムをあしらうことができれば新しいコミュニケーションチャネルを拡大させるとして歓迎する見方がある。 どう考えるべきだろうか。