【初心者向け】HTMLで出来るWebデザインは文字や画像を表示することだけ

作業手順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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