イチから自分で書く編

はじめに

サンプルサイト
※サンプルサイトは静的サイトとしてつくってます。

今どきHTMLの解説してくれるサイトなんてごまんとありますし、ガイドブックも多数出てるかと思います。
なので正直、もっと親切なサイトや本を探して閲覧したほうがいいです。

基本の基本

まずは何も考えずにテキストエディタに下記を入れてください。コピペでいいです。

そしたらHTML形式で保存してください。迷ったら「index.html」とかにしておきますか。
タイトルはなんでもいいですが、必ず半角英数にしましょう。
するとこのサイトができます→サンプル
これをFTPやファイルマネージャ等でレンタルサーバーにアップロードすればwebサイトが公開されます。
おめでとうございます。

更に情報を追記する

先ほどのHTMLを上書き。

同じくHTML形式で保存。
アップロードするとこうなります→サンプル
本文を追記したほか、文字コードをセットしたり、スマホからの閲覧を整えたり、タイトルバーにタイトルが出たりしました。
<head>〜</head>の間に入力したものは画面には表示されず、ページに関する情報を書く部分となります。
<body>〜</body>の間に入力したものがブラウザに表示される内容となります。

デザインを整える

先ほどのHTMLを上書き。

同じくHTML形式で保存。

次にテキストエディタで新しいファイルを開きます。
新規ファイルに下記を入れます。

新規ファイルのほうは「style.css」のタイトルにして、HTMLと同じ場所に保存してください。
必ず拡張子まで含めてファイル名をつけること。
2ファイルまとめてアップロードするとこうなります→サンプル

「.css」のファイルは「スタイルシート」と言い、サイトの装飾は基本的に全てこのスタイルシートで行います。
HTML上で直接装飾してもいいですが、複数ページを一括で装飾設定できるスタイルシートのほうが便利かと思います。