4-2 ベースになるHTML文章

この講座ではエディタの中でも 『TeraPad(テラパッド)』 を利用して作成する方法を記載しております。

テキストエディターに関する説明は こちら(HP-TIPS > HP作成方法 > テキストエディター) をご覧下さいませ。(『TeraPad』 のダウンロード方法はこちら をご覧下さい)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="名前.css" type="text/css">
<title>ページのタイトル</title>
</head>
<body>
<h1>見出しの言葉</h1>
<p>段落</p>
</body>
</html>

4-2-1 作成方法

実際にHTML文章を作成する方法です。(画像は全てXPの物を使用しております)。

  1. まず 『4-2』 で紹介した上記の文章 をコピー致します。
  2. 『TeraPad』 を開きます。

    テラパッドを開いた際の画面

    デスクトップ上にテラパッドのショートカットアイコンが表示されていない方は、「マイコンピューター > Cドライブ > Program Files > TeraPad」 の中に格納されております。(ちなみに画面に記載されている「EOF」の文字は「End Of File」の略で、ここで文章は終了していますという意味の単語です)。

  3. 開いた画面に先程コピーした文章を貼り付けて下さい。

    テラパッドにHTML文章をコピーした画面

    上記のような画面になりましたら、ファイル(F) > 名前を付けて保存(A)を選択して下さい。

  4. 保存場所をデスクトップまたは作成したサイト用のフォルダに指定し、
    ファイルの種類(T)を「すべてのファイル」に選択した後に 『お好きな名前(半角英数字).html』 で保存して下さい。

    名前を付けて保存する画面

    ※ 上記のように指定した場合、「index.html」ファイルがデスクトップ上に保存されます。

  5. 保存されたHTML文章をダブルクリックすると
    下記のようなページが表示されるかと思います。

    出来上がったページの画面

    これで一番簡単なHTML文章が出来ました。お疲れ様でした(^^) あとは同じ要領でページを作成していけばOKです。(もしくは一つキチンとしたHTML文章が出来ていれば、あとはそれをページごとコピーして中身だけを書き換えるという方法もございます)

次のページからは作成したHTML文章の具の中身(HEAD部とBODY部)のうち、HEAD部の説明をしております。 取り急ぎBODY部(実際にブラウザに表示される部分)のタグを知りたい方は、下記の目次先をご覧下さいませ。

  1. リンクに関して
  2. 画像に関して
  3. 見出し・段落・改行・強調に関して
  4. 文字に関して
  5. リスト
  6. テーブル
  7. その他