作業手順

目標：Webサイトに「HELLO　WORLD」と表示する

下記の手順でWebサイト作成していきます。

  1. テキストエディタ（TeraPad）にコードの記入
  2. ファイルの拡張子を「html」にして保存（ファイル名は「test.html」）
  3. ブラウザを立ち上げ「HELLO　WORLD」が表示されるか確認

では実際にやっていきましょう。

コードの記入

「TeraPad」を立ち上げ下記のコードをコピー＆ペーストしてください。新規ファイルの立ち上げ方が分からない方は下記のリンクをクリックし、「TeraPadの使い方説明」→「新規作成の方法」を確認して下さい。

→こちらをクリック

コピーするのは<!DOCTYPE html>～</html>までコピーして新しく立ち上げたファイルにペーストして下さい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
   「HELLO　WORLD」
　</body>
</html>

この時<head>・<body>のインデントを合わせておくようにしましょう。

ちなみにインデントとは行の先頭に空白を入れて、行の開始位置を横にズラすこと言います。こうすることでページのソースコードが見やすくなるため絶対にやっておきましょう。

ファイルの拡張子を「html」にして保存

拡張子を「html」にしてファイルを保存します。TeraPadでファイルを保存の仕方が分からない人下記のリンクをクリックし「TeraPadの使い方説明」→「新規作成の方法」を確認して下さい。

→こちらをクリック

作業場所として新しいフォルダを作っておくのオススメします。今回はファイル名を「test.html」として保存します。ちなみに私は下記のように保存しています。

【例】
デスクトップ（フォルダ）
　　→Webサンプル（フォルダ）
　　　　→test.html（ファイル）

拡張子の説明

拡張子とはファイルの種類を識別するするためにファイル名のあとに付けられる文字列。ドットの後に付く文字列の事。例：「test.html」→htmlの部分

拡張子を間違えるとファイルを認識しなくなったりします。ファイルを作成する際には注意しましょう。

ブラウザを立ち上げ「HELLO　WORLD」が表示されるか確認

「TeraPad」のFireFoxアイコンをクリックしてブラウザに表示してみて下さい。

全体が白い画面で「HELLO　WORLD」と表示されましたか？

本文で説明したようにhtmlファイルでは文字や画像の表示する事しかできません。これからcssやJavascriptを使用してもっとレベルの高いWebページを一緒に作っていきましょう。