もくじ

とりあえず作る

エディタで入力

<html>
<head>
<title>このページのタイトル</title>
</head>
<body>
<h1>私の ウェブページ</h1>
<p>はじめてのウェブページです。</p>
</body>
</html>

エディタを立ち上げて、上記の灰色地の部分を入力してください。このようになります。青色の部分は別の文でもかまいません。黒字の部分は必ず半角文字(直接入力)で入れます。

Editorに入力したところ

一度保存してタグを見やすくする

index.html という名前で public_html に保存します。(保存のやり方を熟知している人は保存後に進んでください)

次のように保存します。保存ボタン保存ボタンを押すか、メニューから保存を選びます。

準備してある public_html というフォルダに保存します。下図のままだとユーザーホームに保存されてしまいますので、public_html を指定しましょう。

保存

他のフォルダの三角をクリックします。

保存

ダブルクリックで public_html に移動します。

保存

public_html に移動したら、名前を入れます。

保存

下図のように名前に index.html を入力し一番下の保存ボタンを押します。

保存

保存後の見え方の変化

保存すると編集中のファイルの名前が index.html になります。タイトルバーで確認できます。

geditの色分け表示

色がつく<html> や </html> のようなものは、はさまれた部分の言葉や文章がどんな役割をしているか、どのような性格があるかを示す(Markupする)ものです。「タグ」とよばれます。geditにはこのタグを色を変えて表示する機能が備わっています。保存することで、拡張子が .html や .htm になると自動的にやってくれます。

配色は使用ソフトやバージョンで変わるかも知れません。ある程度は自分で好みにできます。

ウェブブラウザで見る

htmlファイルはウェブブラウザで閲覧します。多くのシステムで.htmlの拡張子をもつファイルをダブルクリックすればウェブブラウザで開くようになっています。

でもダブルクリックしないでindex.htmlの上で右クリックをしてみてください。

ブラウザを選んで

2つのウェブブラウザから選ぶことができます。

Epiphany
まず一番上に「Epiphanyで開く」とあります。これはDebianの推奨ブラウザです。一番上にあるのでファイルをダブルクリックすればこれで開くことがわかります。
Iceweasel
「別のアプリで開く」b>の中にIceweaselがあります。Iceweaselを選択してください。
Iceweaselはfirefoxというウェブブラウザの名前とアイコンを変更したものです。

次のように見えるはずです。

文字化けする時は

ひょっとしたら次のように「文字化け」があるかもしれません。

これは日本語の文字をファイルに保存する方法がいくつかあって,このindex.htmlはUTF-8で保存しているのですが,ブラウザが別の規格たとえばEUC-JPとかShift_JISとかで表示しているからです。

ブラウザのメニューから「文字エンコーディング」を探して文書にあったものを設定します。今回はUTF-8にします。firefox(iceweasel)ならばつぎのようにします。

このようなことをなくすためにどの「文字エンコーディング」をして保存したのかをファイルに書いておく方法があります。index.htmlにはまだそれがないので,ブラウザ側で指定のない時の設定(デフォルトまたは既定といいます)で表示しています。

このデフォルトを変更することもできます。しかし、別のファイルを見た時にまた文字化けするかもしれません。ブラウザで自分が作ったファイルだけを見るのではありません,インターネット上のファイルがどうなっているかなのです。

やり方はブラウザの種類やバージョンによって異なり深いところにあって複雑です。LINUX用のFirefoxならばメニューの[編集]-[設定]-[コンテンツ]-[フォントと配色]の[詳細設定]の[既定の文字エンコーディング]を変えます。(Windows版ならばメニューの[ツール]から始まります)

エディタで再編集

htmlファイルはエディタで開いたままブラウザで表示しても問題ありません。ページの作成中はエディタで開いたままにして、エディタで保存→ブラウザで再読み込み を繰り替えして完成させます。

編集したら保存します。名前がついているので上書きです。

編集後保存

再読み込みのボタンを押すと変更が反映されます。

保存後再読み込み

後日の編集

ファイルを閉じてしまった場合、または後日編集の続きをする場合は、次の様に編集するファイルのアイコンを右クリックして[geditで開く]を選びます。ダブルクリックでは編集できません。

jonah:publicにindex.html

ウェブページ(Apr.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/
Apr.2011 改訂
May.2012 改訂
Apr.2013 改訂