【初めてのホームページ制作】#02 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ02

いよいよ実際にホームページを作っていきたいと思います。
最終的に↓のリンク先と同じページを作っていきますのでよろしくお願いします。

sampleホームページ

sampleホームページに使っているソースファイルを↓に一式ダウンロード出来るようにしましたのでダウンロードをして解凍しておいてください。
実際に表示させてみてもいいですよ♪

一緒に1から作っていきたいのでしたら、sampleフォルダ内の『index.html』ファイルを開いて中のコード全て削除して上書き保存し、『common.css』はファイルごと削除してください。

HTMLの基本構成

HTMLを記述していくために最初に基本部分を作成しておきましょう。

HTMLの基本的な部分を作成する

まず最初にこちらの画像を見てください。こちらが基本部分となります。

HTMLの基本構成

HTMLの基本構成

なんだこれはー!?って僕も最初は思いました(笑)

とりあえずこれさえ記述しちゃえばHTMLになるんだ!と思ってください(笑)

コードを用意してますのでコピーして『index.html』に貼り付けてくださいね。

コピーのショートカットキー:Ctrl+C
ペーストのショートカットキー:Ctrl+V
保存のショートカットキー:Ctrl+S

(※コード内をダブルクリックするとコードの全選択ができます。)
■HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

これを記述しちゃえば後は文字や画像を入れるだけでブラウザ上に表示させることがます。

Hello World!!を表示してみる

まずは下の画像のように<body>と</body>の間に『Hello World!!』って打ちこんでみてください。

Hello World!!

Hello World!!

打ち込んだらショートカット:Ctrl+sで保存してください。

ファイル名は基本的に『index.html』にしておいた方が後々わかり易いです。
また、文字コードをプルダウンから『UTF-8』(※重要)に変更して保存してください。
これで文字化けを防ぐことができます。
(※先ほどのindex.htmlファイルの中身を削除してそのまま使う方は、画像の『手順001』は飛ばしても構いません。)

手順001

手順001

保存して終わったら『index.html』を右クリックしてプログラムから開くにカーソルをあて、お使いのブラウザを選択してください。

僕の場合は『Google Chrome』をメインで使っているのでこちらを選択します。

手順002

手順002

クリックすると、先ほど打ち込んだ『Hello world』が表示されているはずです。

手順003

手順003

感動しません?僕だけですか(笑)?

とりあえずこれでブラウザ上で自分が打ち込んだ文字が表示されたわけです。

次回からどんどんコーディングしていきますよ!
【初めてのホームページ制作】#03 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ02

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA