ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページ作成 コンテンツ内容 追加したhtmlファイルをメモ帳にて編集しよう

前回は、既存のhtmlファイルを複製し3つのhtmlファイルを追加したところまで行いました。

今回は、その追加したhtmlファイルのままだと既存の内容のままなので、編集作業を行なっていきます。

1、本文などの内容を作成する

前回、作成したファイルの内容は以下のとおりです。

・プロフィール(profile.html)
・ニュース(news.html)
・サイトについて(info.html)

まずは、これらのページに合った内容を考える必要があります。
ご自身で決めたページの内容にそって本文などを考えてみましょう。

 

ここではサンプルとして以下のような本文を作成しました。

ページ内容

 

2、作成した内容を反映しよう

上記で作成した内容をそれぞれのhtmlファイルに反映(編集)していきます。

※ファイルの開き方・保存方法、ブラウザでの確認方法などは省略しています。以前のページをご参考にして下さい。

 

■profile.html

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>
<h2>簡単な自己紹介</h2>
<p>
初めまして。当ホームページをご覧頂きありがとうございます。
こちらのページでは簡単な自己紹介をしています。
</p>
<p>
名前:hptsukurikata<br><br>
趣味:ドライブ、ネットサーフィン、サッカー、温泉など<br><br>
好きな食べ物:ハンバーグ、カレー、お刺身、蕎麦<br><br>
PR:当サイトはホームページ作成をイチから始める初心者の方の為のサンプルサイトになります。<br>
作って三ヶ月とまだまだ不慣れな部分がありますが、日々より良いものに改善していければと思っています。
</p>
</body>

 

●profile.html記述参考イメージ
プロフィールページ

 

■news.html

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>
<h2>こちらのページでは、お知らせを掲載しています。</h2>
<p>
12/11/25:ページ更新いたしました。
</p>
<p>
12/11/13:ホームページ開設いたしました。
</p>
</body>

 

●news.html記述参考イメージ
ニュースページ

 

■info.html

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>
<h2>初心者の方の為のサンプルサイト</h2>
<p>
当ホームページは、ホームページ作成をイチから始める初心者の方の為のサンプルサイトとなります。その為、ページ内文章の内容などもサンプルとして掲載しております。予めご了承下さい。
見ておわかりのように、ページ全体はみすぼらしいものとなりますが、あくまで全く初めての方を対象とし、お作りしています。
</p>
<p>
理由としましては、初めから詰め込みすぎると挫折してしまい二度と作ろうと思う気持ちにならない可能性があると思ったからです。
せっかくホームページ作成に興味を持った人がいるのであれば、少しでも基本的な知識を習得し最後までやり遂げて頂きたいと思い、出来るだけわかりやすい内容で全体の流れを説明しております。
</p>
<p>
もし宜しければ、「40代・50代からのホームページ作成 チャレンジ 初心者」をご覧頂ければ幸いです。
</p>
</body>

 

●info.html記述参考イメージ
インフォメーションページ

それぞれのページにご自身で考えた本文内容を記述していきます。
htmlファイル編集後は必ず上書き保存を忘れず行いましょう。
(※新しいファイル名やファイルを複製する場合などは、名前を付けて保存)

 

3、事項について

次回は、編集したhtmlファイルがしっかり反映されているか確認作業を行います。