Saetl.net

Simple And Easy TempLate

ご利用方法 - HTML編集のやり方

HTML編集のやり方

  • HTML(index.htmlやcategories.html)を自分のサイトの内容にあわせて編集します。
  • HTMLを編集するには有料のホームページビルダーAdobe Dreamweaver、無料(一部有料)のWeb制作に使えるエディターTeraPadなどのテキストエディタを使用します。
  • 初めてホームページを作成する人にはホームページビルダーが使いやすいですが、本格的に作成するにはホームページビルダーでは物足りなくなってくるのでAdobe Dreamweaverがおすすめです。
    ※Adobe Dreamweaverを使うにはHTMLやCSSを理解していることが必要です。


HTML編集の流れ



ここではこのページのコードを参考に解説します。



  • 1.タイトルやキーワードを設定する。
    • ドキュメントタイプ <!DOCTYPE html>(下記はHTML5のドキュメントタイプ宣言)は特に変更する必要がありませんが、ホームページビルダーをお使いの場合はレイアウトが崩れる場合がありますのでこちらなどを参考にしてください。
      <!DOCTYPE html>
    • タイトルはブラウザツールバー検索エンジンの検索結果などに表示され、SEOでキーワードを入れる場所として最も重要とされていますので各ページの内容にあったキーワードを含むタイトルをつけます。
      <title>ご利用方法 - HTML編集のやり方 | Saetl.net</title>
    • meta name="Description" にはキーワードを含むページの説明文を記入します。
      <meta name="Description" content="ご利用方法 - HTML編集のやり方 | シンプルで使いやすい無料のホームページテンプレート  Saetl.net" />
    • meta name="Keywords" には そのページの内容にあったキーワード(単語)をカンマ「,(半角)」で区切って記入します。
      <meta name="Keywords" content="ご利用方法,HTML編集,やり方,ホームページ,テンプレート,作成,無料,著作権表示なし,website,template,Copyright,free" />
    • Faviconの設定をします。
      Faviconは自分のサイトのアイコンを作成し、 こちらなどでfavicon.icoを作成して任意の場所に保存してください。
      https://saetl.netの部分を自分のサイトのアドレスに変更してください。
      <link rel="icon" href="この部分を変更/favicon.ico" type="image/x-icon" />
      <link rel="shortcut icon" type="img/x-icon" href="この部分を変更/favicon.ico" />
  • 2.メニューを決める。
    • 各メニューをサイトの内容にあわせて編集します。下記の 「howto.html」 や 「ダウンロードや公開まで」 の部分はリンクするページのファイル名などにそれぞれ変更します。
      <ul>
        <li> <a href="howto.html">ダウンロードから公開まで</a> </li>
        <li> <a href="howtohtml.html">HTML編集のやり方</a> </li>
        <li> <a href="howtocss.html">CSS編集のやり方</a> </li>
        <li> <a href="howtojavascript.html">JavaScriptの設定</a> </li>
      </ul>
  • 3.テキストを編集する。
    • 見出し「h1」はキーワードを入れる場所としてタイトルの次に重要なのでタイトルと同じキーワードを使った見出しにします。
      <h1> <a href="index.html" title="シンプルで使いやすい無料のホームページテンプレート">Saetl.net</a> </h1>
    • その他のテキスト(本文の内容、フッター部分など)を編集します。
  • 4.画像を編集する。
    • サイト名のロゴやその他の画像を編集します。
      画像があるフォルダとファイル名(images/logo.png 部分)をそれぞれ変更し、代替テキスト(alt="無料のホームページテンプレート - Saetl.net" 部分)や幅・高さも変更します。
      <img src="images/logo.png" alt="無料のホームページテンプレート - Saetl.net" width="234" height="83" />
  • 5.広告などを入れる。