HTMLファイルを保存してブラウザで表示を確認する

作成したファイルを保存する

作成したHTMLファイルを保存してブラウザで表示する方法についての備忘録です。ATOMを使用している場合は上部の「ファイル」→「保存」で任意の場所に保存します。

ショートカットキーを使用する場合は、Windowsなら「Ctrl」+「S」キー、Macなら「command」 + 「S」キーを押します。ちなみに私はWindowsを使用しています。

ファイルを保存する場合は、拡張子は.htmlにします。ここではファイル名をindex.htmlとします。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>奮闘記┃アラフォー未経験のおっさんがWEBサイト作成やプログラムに挑戦</title>
    <mata name="description" content="アラフォー未経験のおっさんがWEBサイトの作成やプログラミングに挑戦します。その時に得た情報や必要なことを書き記す備忘録でもあります。">
  </head>

  <body>
    <h1>まずは自己紹介</h1>
    <p>今年38歳になるアラフォーのおっさんです。</p>
  <body>
</html>

保存したファイルをブラウザで開く

先ほど保存したファイルをダブルクリックまたはファイル上で右クリック→プログラムから開くから好きなブラウザを選択します。そうすると下記のように表示されます。

HTMLのタグを追加しCSSでコーティングしていくことでWEBサイトは出来上がります。これがWEBサイトを作成する上での第一歩です。

HTMLファイル名の注意事項

拡張子が必要

HTMLファイルを保存する時は上記にも記載しましたが、必ず.htmlという拡張子が必要です。また画像ファイルを保存する時は.jpgや.gifなどを使用します。

ファイル名は半角英数字のみ

ファイル名にも決まりごとがあります。先ほど作成したindex.htmlのindex部分は必ず半角英数字を使用します。日本語(いんでっくす.html)などは使用できません。

備考

日本語の他、空白や「:(コロン)」「.(カンマ)」などほとんどの記号は使用できません。記号を使用する場合は基本的に「_(アンダーバー)」「-(ハイフン)」のみを使用します。

小文字に統一する

大文字で記載した場合、一部の環境では正常に表示されない場合があるため、ファイル名はindex.htmlというように小文字に統一しましょう。

TOPページはindex.htmlにしよう

WEBサイトを作成する場合、ホームページのトップページは基本的に「index.html」という名前で保存することが一般的です。index.htmlというファイル名の場合、その部分(index.html)を省略して検索をしても同じページが表示れます。

コメント

タイトルとURLをコピーしました