htmlファイル どこ

HTMLファイルはどこにあるのか？

HTMLファイルを保存し、ブラウザで確認する方法について詳しく説明します。この節では、HTMLファイルの保存手順、適切なファイル名の付け方、およびブラウザでHTMLファイルを確認する方法を学びます。

HTMLファイルの保存

HTMLファイルを作成する際には、正しい形式でファイルを保存し、適切なフォルダ構造を使用することが重要です。このセクションでは、ch02という新しいフォルダを作成し、HTMLファイルをUTF-8形式で保存する方法を説明します。

1. フォルダの作成

まず、HTMLファイルを保存するためのフォルダを作成します。ch02というフォルダを作成する手順は次のとおりです。

手順:

  1. フォルダの新規作成:
    • エクスプローラーを開き、webpageフォルダに移動します。
    • 画面上部の「ファイル」メニューをクリックし、「新規作成」→「フォルダ」を選択します。
  2. フォルダ名の変更:
    • 作成された「新しいフォルダ」を右クリックし、「名前の変更」を選択して、フォルダ名をch02に変更します。

これで、HTMLファイルを保存するためのch02フォルダが作成されました。

2. HTMLファイルの作成と保存

次に、テキストエディタを使ってHTMLファイルを作成し、保存します。ここでは、サクラエディタを使用して例を示します。

手順:

  1. サクラエディタを起動:
    • サクラエディタを起動し、新しいファイルを開きます。
  2. HTMLソースコードの記述:
  3. <!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLのテスト</title>
    </head>
    <body>
        HTMLの基礎を勉強しています。
    </body>
</html>
  4. ファイルの保存:
    • webpage/ch02フォルダを保存先として選択します。
    • ファイル名はtest.htmlとします。
    • 文字コードは「UTF-8」を選択して保存します。

保存手順は次の通りです。

  • 「ファイル」メニューから「名前を付けて保存」を選択します。
  • ファイル名をtest.htmlとし、文字コードはUTF-8を選択します。
  • 「保存」ボタンをクリックして完了です。

3. 文字コードに関する注意

HTMLファイルを日本語で作成する場合、保存時の文字コードに注意しないと文字化けが発生する可能性があります。HTMLファイルの作者は、<meta charset="UTF-8">タグを使って、使用する文字コードをブラウザに指定します。UTF-8は、現在のウェブ標準で推奨される文字コードです。

HTMLファイルのファイル名

HTMLファイルの命名規則についても理解しておく必要があります。特に、ファイル名には使用できる文字と使用できない文字があるため、注意が必要です。

ファイル名の命名規則

  • 使用できる文字: 半角英数字、ハイフン（-）、アンダースコア（_）
    例: info.html、photo1.html、info-company.html

  • 使用できない文字: スペース、特殊記号、日本語
    例: info company.html（スペースを含む）、info&company.html（&記号を含む）、会社情報.html（日本語を含む）

多くのウェブサーバでは、ファイル名の大文字と小文字が区別されるため、ファイル名はすべて小文字で統一することが推奨されます。

HTMLファイルの確認

HTMLファイルを保存した後は、ブラウザを使ってその表示を確認します。このセクションでは、Google Chromeを使用してHTMLファイルを確認する方法を説明します。

手順:

  1. ブラウザでHTMLファイルを開く:
    • エクスプローラーでwebpage/ch02フォルダを開き、先ほど保存したtest.htmlファイルをダブルクリックします。
    • ファイルがブラウザで表示されます。

ブラウザのアドレスバーの確認

ブラウザのアドレスバーを確認すると、次のように表示されます:

file:///C:/Users/username/Documents/webpage/ch02/test.html

このアドレスは、現在閲覧しているHTMLファイルがローカル環境に保存されていることを示しています。

絶対パスと相対パス

  • 絶対パス: http://から始まるURLで、ウェブ上のファイルやページの位置を指定します。 例: http://www.example.com/index.html

  • 相対パス: 現在のファイルを基点として、他のファイルやリソースの位置を指定します。ウェブサイト内で他のページにリンクを張る際に使用します。 例: ./images/photo.jpg

絶対パスと相対パスの概念は、次の章でより詳細に学びます。

この章では、HTMLファイルの保存とブラウザでの閲覧、適切なファイル名の付け方について学びました。次の章では、HTMLファイル間のリンクの設定について学習します。

HTMLファイルをWebサーバーにアップロードする方法

Webサイトを公開する場合、HTMLファイルはFTPを使用してWebサーバーにアップロードする必要があります。

FTPを使用してファイルをアップロードする基本的な手順は以下の通りです：

<!DOCTYPE html>
<html>
    <head>
        <title>FTPアップロード例</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>このページはFTPを介してアップロードされました。</p>
    </body>
</html>

HTMLファイルの管理とバージョン管理

多くの開発者はGitなどのバージョン管理システムを使用して、HTMLファイルの変更履歴を管理しています。

Gitを用いた基本的な操作は次の通りです：

$ git init
$ git add <ファイル名>
$ git commit -m "初回コミット"

さらに詳しい情報は、以下のリソースを参照してください：

W3Schools - HTML Introduction

QA

  • Q: HTMLファイルはどのように開くことができますか？
    A: HTMLファイルはブラウザで直接開くことができます。
  • Q: HTMLファイルを編集するための推奨エディタは何ですか？
    A: VSCodeやAtomなどのコードエディタがお勧めです。
  • Q: FTP以外にHTMLファイルをアップロードする方法はありますか？
    A: SFTPやWeb管理パネルを使用することもできます。

その他の参考記事:html ファイル