ホームページの作り方

当サイトでは初心者向けにホームページの作り方の解説をしています。

当サイトはPRを含むページがあります。

6.ホームページ用のファイルを作る

ヤミー「今回はいよいよ!ホームページ用のファイルを作ります!」

サイトウ君「いえーい」

ヤミー「まず「メモ帳ソフト」をクリックして起動してください。メモ帳ソフトの場所を忘れた人は4.メモ帳ソフトの場所を参考にしてさい」

サイトウ君「メモ帳ソフトを起動しました」

メモ帳ソフトを起動する

ヤミー「よし。ここに以下のように文字を書いてください」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
元気かな
</body>
</html>
htmlコードを書く

ヤミー「「こんにちは」と「元気かな」以外は全部、半角英数で入力してください」

サイトウ君「ちょっと待ってこれ、えげつなく難しくない??」

ヤミー「そうよね。初心者にはえげつなく難しいよね。慣れれば簡単なのだけど」

ヤミー「ちなみに < という文字は、半角英数の文字を入力する状態でキーボードで「shiftキー」を押しながら、このキーを押せば入力できます」

< の入力の仕方

サイトウ君「よし、まず一文字入力できた」

ヤミー「まだ一文字目!?」

ヤミー「じゃあ次に半角英数でエイチティーエムエルと入力して」

サイトウ君「エイチティーエムエル」

ヤミー「> は「shiftキー」を押しながら、このキーを押せば入力できるよ」

> の入力の仕方

サイトウ君「まず <html> まで書けた」

ヤミー「じゃあ、Enterキーを押すと、入力カーソルを次の行に移せるから、Enterキーを押してみて」

Enterキーの場所

サイトウ君「Enterキーを押すと、入力カーソルが2行目に移動した!」

ヤミー「そうです。次は < を入力して、英語で「ヘッド」って書いて、 > を入力」

サイトウ君「<head>って書いた」

ヤミー「じゃあ Enterキー を押して次の行に進もう」

サイトウ君「次の行に行きました」

ヤミー「じゃあ < と入力して、英語で「タイトル」と書いて、> を入力

サイトウ君「<title>って書いた」

ヤミー「じゃあ全角で「こんにちは」と書こう」

サイトウ君「<title>こんにちは まで書いた」

ヤミー「じゃあ < と入力して……」

ヤミー「次は / だね。 / は半角英数を入力できる状態で、このキーを押せば入力できるよ」

/の場所

ヤミー「そして、英語で「タイトル」と書いて > を書けばいいよ」

サイトウ君「<title>こんにちは</title> まで書いた」

ヤミー「じゃあEnterキーを押して次の行に移動して……」

ヤミー「あとはノリと勢いで書いていってくれ。英語のボディとか書いたり色々……」

サイトウ君「急に説明が雑だな……」

ヤミー「ちなみに、気づいてるかな?<タグ名>~</タグ名>って言うのを、タグというのだけど、タグはサンドイッチみたいに基本的に始まりと終わりでサンドイッチみたいに挟んでるよ」

<html>
<head>
<title>こんにちは</title>
</head>
<body>
元気かな
</body>
</html>

ヤミー「例えば、全体をhtmlタグで挟んでいて、「こんにちは」をtitleタグで挟んで、titleタグをheadタグで挟んで、「元気かな」をbodyタグで挟んでます」

ヤミー「というわけで、書けた?」

サイトウ君「書けたと思う……多分。どこかで間違ってたり失敗したりしてるかもしれないけど」

ヤミー「間違ってたり失敗してたりしてもパソコンは壊れないから安心してね。じゃあ作ったファイルを保存しよう「ファイル」を選んで」

ファイルを選ぶ

ヤミー「「名前を付けて保存」を選んで」

「名前を付けて保存」を選ぶ こんなウィンドウが表示される

ヤミー「で、多分この雲のアイコンのメニューを選ぶと」

雲のアイコンのメニューを選ぶ

ヤミー「デスクトップが表示されるのでそれを選ぶと」

デスクトップ

ヤミー「5.デスクトップにフォルダを作るで作成したhtmlフォルダが存在するはずなので、それを選ぶ」

htmlフォルダ

ヤミー「ここが「デスクトップ > html」みたいになってたら、保存する場所の選択は合ってる」

保存する場所

ヤミー「次に「ファイルの種類」の「テキスト ドキュメント(*.txt)」っていうやつをクリックして」

ファイルの種類をクリック ファイルの種類をクリック

ヤミー「「すべてのファイル(*.*)」を選んでください」

すべてのファイルにする

ヤミー「そして、ファイル名を「a.html」に変更してください。文字は半角英数で入力してください。「エー ドット エイチティーエムエル」です。.(ドット)はキーボードのこのキーを打てば入力できます」

ドットはこのキーで入力できる a.htmlにファイル名を変更する

ヤミー「最後に「保存」を押してください」

保存する

ヤミー「これで、a.htmlというファイル名でファイルが保存できました」

サイトウ君「今回は難しすぎて死ぬかと思った」

ヤミー「次回、城之内、死す。デュエルスタンバイ!(次回、7.作ったホームページ用ファイルをブラウザで見てみる)」

--- 以下、補足 ---

ヤミー「文字を間違って入力した場合は Deleteキーとか」

Deleteキー

ヤミー「Back Spaceキーとかを押せば」

Back Spaceキー

ヤミー「誤って入力した文字を消せるので慌てないでね」