夏休みの宿題にホームページを作ろう

自分のウェブサイトに文字を表示しよう。

4.自分のサイトに文字を表示しよう

サイトメーカー「今回は実際に簡単なホームページを作ろう。今日の目標は『文字を出す』こと!」

ホーム君「ついに僕の素晴らしきホームページの初めの一歩が踏み出されるんだね!」

サイトメーカー「ではまず、Yahoo!ジオシティーズのページを開きましょう」

サイトメーカー「すでにYahoo!にログインしている人は右側の『開設済みの人は、さっそくホームページを作ろう! ホームページの作成・更新』というボタンをクリック。前回の管理画面の様なページへ行きます」

「開設済みの人は、さっそくホームページを作ろう!」

サイトメーカー「ログインしていない人は、右側の「ホームページの作成・更新 Yahoo! JAPAN IDでのログインが必要です」という所をクリックし、前回と同じように自分のIDとパスワードを入力してログインしましょう。前回の管理画面のようなページへ行けたはずです」

ログインが必要です

ホーム君「なんか、色々なメニューがあるけどどうすればいいの?」

サイトメーカー「『簡単にホームページを作りたい!テンプレートを選んで、編集するだけでホームページが作れます。もちろん何回でも編集できます。』とか『自由にホームページを作りたい!HTMLの知識がなくても、仕上がりをチェックしながら、オリジナルのデザインで自由に、簡単にホームページを作れます。』とか『ブログ風デザインで簡単に毎日更新!ジオログ管理ページにアクセスすれば、すぐにホームページが作成できます。編集・更新も簡単!』とか項目が色々ありますね。でも、今回のボク達は手作りをします。なんせ初めて作るホームページ。デザインはダサくなってしまうでしょう。ものすごい技術とかも無理です。でも、慣れていけばブログ程度のデザインは作れるようになります(夏休み中は無理かもしれませんが)。夏休みの宿題提出時はちょっと不格好かもしれませんが『本当にゼロから作ったの?ホーム君ってすごーい。頭いいんだね!格好いい!結婚してください!』と言われること必至です」

ホーム君「よーし、女の子の為にホームページを作るぞ!」

サイトメーカー「その意気です!というわけで、項目の一番下の方『ファイルを管理 新規ファイルの作成や、HTML、画像などすべてのファイルの編集が可能。サブディレクトリの作成、コピー、名前の変更、削除もできます。』という項目の『ホームページを修正する』ボタンを押しましょう(まだ作ってもいないのに「修正する」というのも変な話ですが)」

「ホームページを修正する」ボタンを押そう

ホーム君「うひゃー!!またまた恐そうなページが!!」

サイトメーカー「『ファイルマネージャ』と書かれていて『ファイルやディレクトリの管理や修正ができます。またエディタを選んで、その場でHTMLファイルの作成や編集が可能です。エディタはファイルマネージャ画面右上のプルダウンメニューから、「ジオクリエーター」と「アドバンストHTMLエディタ」を選択できます。通常は「利用するエディタ」として「アドバンストHTMLエディタ」が選択されています。』とか、まぁ専門用語で訳の分からないことが書かれています。『大人はいつもそう。難しい言葉で私たち子供を翻弄して、馬鹿にして……。私たち子供だって必死で生きてるんだよ……!!』とか思いながら『ファイルの作成・編集をする』ボタンを押します」

ファイルの作成・編集をする

ホーム君「だ、ダメだ。難しそうなページの連続攻撃。なんだかホームページを作れる自信が無くなってきたよ……」

サイトメーカー「このページは『ファイルマネージャ』ページと言います。大丈夫です。信じてください。とりあえず、事前に言っておきますが、ここで何か操作を間違えたからといって、あなたのパソコンが壊れることは絶対にありませんサイトを作るというのは世界で一番安全なプログラミングです。あまりにも安全過ぎて、プロの方たちからはプログラミングだと認められていません。マジです」

ファイルマネージャ

サイトメーカー「その上、あなたが今操作しようとしているのは、レンタルサーバー側の操作です。あなたのパソコンとは一切関係がありません。また、このサーバーは天下のYahoo!様が管理しております。素人の操作のミス程度で壊れるようなヤワなサーバーを使っておりません。『素人どんと来い!』です。むしろ、サービスを提供しておいて『お客様である私たちのミス』で簡単に崩壊するようなサービスを提供しているなら、逆にYahoo!のサービスの質を疑うね!くらいの気持ちでいきましょう。頑張って!ホーム君。女の子の為に!」

ホーム君「ぬおー!!彼女が欲しいんじゃー!!もうどうにでもなれー!!うがー!!」

サイトメーカー「はい。ホーム君が復活(?)したところで早速操作していきます。まず、この管理画面の『新規』ボタンをクリックしてください。これは『新しくウェブサイトのページを作るためのボタン』です。おそらく、「新規」ボタンはこのページの中で3つ見付かると思います。一番上と真ん中のは同じ機能の『新規』ボタンで、一番下だけが『サブディレクトリの編集』という機能の為の『新規』ボタンです」

サイトメーカー「『サブディレクトリの編集』機能はまた次回教える予定なので、今回は一番上、もしくは真ん中の『新規』ボタンを押してください」

ホーム君「ぐひゃー!!また入力欄かー!!ぐおー!!」

サイトメーカー「ページが変わって、文字が入力できるページに来ました。まず見逃しがちなのが大きい文字入力画面の上にある「ファイル名」と書かれた入力画面です。ここに、半角英数文字でindex.htmlと入力してください」

ホーム君「英語でかー!?」

サイトメーカー「英語ででーす」

ホーム君「なんか、indexとhtmlの文字の間に黒い点『.』があるけど、これも書くんかー!?」

サイトメーカー「書くんでーす。ちなみにこの黒い点はドットと読みます。キーボードの、いつもひらがなで『。』を出しているキーを半角英数の入力状態で押せば多分『.』が出ます(環境によって異なります)」

ホーム君「っしゃー!!おらー!!」

サイトメーカー「次に、真ん中の訳の分からない宇宙人語が書かれている大きな入力画面ですが、まず、中に書かれている謎の暗号文を全て消します」

ホーム君「えぇっ!?いいの!?怒られない!?」

サイトメーカー「いいんです。僕を信じてください。僕とホーム君の仲じゃないデスか」

ホーム君「……いや!!信じられないね!!そもそも僕はまだサイトメーカーのプライバシーな情報を一つも知らない!!」

サイトメーカー「……趣味はスモウ観戦です」

ホーム君「……渋いなぁ」

サイトメーカー「はいはい!どうでもいいから入力欄の中の意味の分からない奴をさっさと消して!そして、以下の様に文字を入力してください」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
</body>
</html>

サイトメーカー「一つの文章の行の最後でEnterボタンを押せば、次の行に入力することが出来ます。『こんにちは』と『はじめまして』は全角の日本語で入力しますが、その他の英語と記号は全て半角英数で入力してください」

サイトメーカー「半角・全角の切替えは、色々方法がありますが、一例として、キーボードの左、手元側の方では無く画面側の方に「半角/全角」というボタンがあります。これを押せば、半角・全角が切替えられます。もちろん、それ以外の方法で半角、全角を切替えても構いません」

サイトメーカー「記号の出しかたも教えておきます。(それぞれ半角で)<はShiftボタンを押しながらひらがなの『ね』のボタンを押せばでます。/はひらがなの『め』のボタンを押せばでます。>はShiftボタンを押しながらひらがなの『る』のボタンを押せばでます。(パソコンによっては操作方法が異なる場合もあるかもしれません)」

現在の状態

サイトメーカー「入力が終わりましたら『プレビュー』ボタンを押してみてください(上の方と下の方にふたつボタンがありますが、どちらも同じ機能ですので、好きな方を押してください)。なんとこれを押すと、ホームページ上でどのように表示されるかが上の方に表示されるのです!今回は文字だけなので、特に面白みは無いかもしれません」

サイトメーカー「『はじめまして』と表示されているのを確認したら、『保存』ボタンを押してください(これも、上の方と下の方にふたつボタンがありますが、どちらも同じ機能なので、好きな方を押して構いません)」

ホーム君「ふぎゃー!!エラーが出たー!!怒られたー!!もう死ぬー!!」

サイトメーカー「『警告: ファイル「index.html」はすでに存在します。 上書きしてもよろしければ、もう一度「保存」を押してください。』と出てきます。が、大丈夫です。最初から上書きしたくて作りました。というわけで『大人はいつもそう。金と力にものを言わせて、非力な私たちを追い詰める……!』とか思いながら、指示通りもう一度『保存』ボタンを押してください」

ホーム君「非力な私たちを追い詰める……!!」

サイトメーカー「はい。管理画面の最初の方に戻りました。実は、これでもう既に、あなたが作った初めてのウェブページが出来ています。この管理画面の中、上の方に『ホームページURL: http://〜』と、あなたのサイトのアドレスが書かれているのが分かるでしょうか?ホーム君の場合は『ホームページURL: http://island.geocities.jp/xhtml7/』と書かれています(大人の事情でホーム君は前回とアドレスが違います)。これをクリックします」

あなたのサイトのアドレスをクリック

ホーム君「ちょ!『はじめまして』って書かれてるー!!」

サイトメーカー「と感動していただければ嬉しいです。上に広告のバナー(四角い画像)が表示されてしまっていますが、無料レンタルサーバーなのでこれは仕方がありません」

ホーム君「あれ?でも、『こんにちは』っていう文章も書いたのに、『こんにちは』は表示されて無いな……」

サイトメーカー「実は、分かりにくいですが、きちんと表示されています」

タイトルタグ

サイトメーカー「さて、無事に表示された人がほとんどだと思いますが、中には文字化けをしてしまっている人もいるでしょう。そういう方は下記の補足を参考にしてください。次回は、今日書いた文章の具体的な説明だ(html言語の基本を理解しようへ続く)!」

このエントリーをはてなブックマークに追加