レッスン 1: HTMLとホームページの仕組み

ホームページは、HTMLという言語で作られた「文書」が、インターネット上で表示されるものです。HTMLは「HyperText Markup Language（ハイパーテキストマークアップ言語）」の略で、ホームページの「骨組み」を作るために使われます。

1. ホームページの仕組み：どうやって表示されるの？

  1. サーバーに保存されているHTMLファイル
    HTMLファイルは通常、サーバーと呼ばれるインターネット上のコンピュータに保存されています。各ホームページは、サーバー内の特定のフォルダにHTMLファイルとして存在しています。
  2. ブラウザが表示する
    ユーザーがウェブブラウザ（Chrome、Firefox、Safariなど）で特定のURL（例：www.example.com）にアクセスすると、ブラウザはそのサーバーからHTMLファイルを取得し、表示します。ブラウザはHTMLコードを読み取り、見やすい形に変換して表示する機能を持っています。

HTMLコードを記述する方法

HTMLコードはテキストで書かれているため、プログラムや専用のアプリケーションがなくても書くことが可能です。以下に、メモ帳とSublime Text 3というエディタを使ってHTMLコードを記述する方法を説明します。

メモ帳を使った方法

Windowsのメモ帳を使ってHTMLコードを書く方法を紹介します。

  1. メモ帳を開く
    スタートメニューから「メモ帳」を検索して起動します。
  2. HTMLコードを記述する
    例えば、以下のようなシンプルなHTMLコードを入力します。htmlコードをコピーする<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>こんにちは、世界！</h1> <p>これは私の最初のウェブページです。</p> </body> </html>
  3. ファイルを保存する
    「ファイル」メニューから「名前を付けて保存」を選び、ファイル名を index.html にして保存します。保存場所は、デスクトップやわかりやすいフォルダにしておくと良いでしょう。
  4. ブラウザで表示する
    保存した index.html をダブルクリックすると、ブラウザでHTMLファイルが開きます。コードで指定した内容が、ブラウザで表示されているはずです。

Sublime Text 3を使った方法

Sublime Text 3は、コードを書くのに非常に便利なテキストエディタです。無料で使うことができ、HTMLの学習や実際の開発にも広く使われています。ここでは、Sublime Text 3を使ってHTMLを記述する方法を説明します。

  1. Sublime Text 3をインストールする
    Sublime Textの公式サイトにアクセスし、インストーラーをダウンロードしてインストールします。
  2. 新しいファイルを作成する
    インストール後にSublime Textを起動し、File > New File を選択して新しいファイルを作成します。
  3. HTMLコードを記述する
    先ほどと同様に、以下のコードを入力してみましょう。htmlコードをコピーする<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>こんにちは、世界！</h1> <p>これは私の最初のウェブページです。</p> </body> </html>
  4. ファイルを保存する
    File > Save As... を選択し、index.htmlという名前で保存します。
  5. ブラウザで表示する
    保存したファイルをブラウザで開くと、HTMLで記述した内容が表示されます。

なぜSublime Text 3を使うと良いのか？

Sublime Text 3を使うことで、HTMLの学習やコーディングがより快適になります。以下のような特徴があります。

  • シンタックスハイライト：HTMLタグやコードの色分けがされるため、タグの種類がひと目で分かりやすくなり、ミスを減らすことができます。
  • 自動補完：HTMLタグを途中まで入力すると、タグを自動で補完してくれるため、手間が省け、作業スピードが向上します。
  • マルチカーソル編集：複数箇所を同時に編集できる機能があり、同じコードを複数箇所で修正する場合に便利です。
  • プラグインが豊富：Sublime Textにはプラグインが多く、拡張機能を追加することでさらに便利に使うことができます。例えば、CSSやJavaScriptなどのファイルも一緒に管理する際に役立ちます。

HTMLとホームページの表示の仕組みを理解し、基本的な編集方法を押さえることで、学習をスムーズに始められます。まずはHTMLファイルを作成し、実際にブラウザで表示してみましょう。Sublime Text 3などのエディタを活用することで、さらに効率的に学習できます。

コメント