画像付きの最初の HTML ページを作成する

はじめに

この実験では、手順を追って最初の画像付き HTML ウェブページを作成する方法を学びます。この実験では、構造化されたプロジェクトディレクトリの設定、画像リソースのダウンロード、基本的な HTML ドキュメントの作成、およびウェブページへの画像の挿入を通じて案内します。ウェブ開発ファイルの整理、HTML 画像タグの使用、およびウェブページでの画像の表示方法の理解に関する実践的な経験を得ます。

この実験が終了すると、プロジェクト構造管理、画像処理、および基本的な HTML ドキュメント作成を含む基本的なウェブ開発スキルを示すシンプルで機能的な HTML ページを作成します。この実践的なアプローチは、ウェブ開発の旅を始めようとしている初心者に堅牢な基礎を提供します。

プロジェクト構造を設定する

このステップでは、画像付きの最初の HTML ページを作成するためのプロジェクト構造を設定します。整然としたプロジェクト構造は、ウェブ開発ファイルを整理して管理しやすくするために欠かせないものです。

VM セットアップによって既にプロジェクト構造が設定されています。my-first-webpage ディレクトリを確認しましょう：

ls my-first-webpage

この構造は、異なる種類のファイルを分離するのに役立ちます：

images/ には画像リソースを保存します
css/ はスタイルシートファイルに使用できます（この実験では使用しません）

ディレクトリ構造を確認しましょう：

tree

出力例：

.
├── css
└── images

素晴らしい！これで、ウェブ開発ファイルを管理しやすくするクリーンで整然としたプロジェクト構造が設定されました。

画像リソースをダウンロードして整理する

このステップでは、最初の HTML ウェブページで使用する画像をダウンロードします。インターネットから簡単で無料の画像を使用し、先ほど作成した images ディレクトリに保存します。

まず、プロジェクトディレクトリに移動します：

cd ~/project/my-first-webpage

画像が正しくダウンロードされたことを確認しましょう：

ls images

出力例：

landscape.jpg

画像ファイルが見えない場合は、以下のコマンドを実行してダウンロードする必要がある場合があります。images ディレクトリに画像ファイルが見える場合は、このステップをスキップしてください。

wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"

画像ファイルの詳細を確認します：

file images/landscape.jpg

出力例：

images/landscape.jpg: JPEG画像データ、JFIF標準1.01、アスペクト比、密度1x1、セグメント長16、ベースライン、精度8、1170x780、コンポーネント3

この画像は、HTML ページで使用できるようになりました。HTML での画像挿入の例として適した風景画像をダウンロードしました。

基本的な HTML ドキュメントを作成する

このステップでは、最初のウェブページの基礎となる基本的な HTML ドキュメントを作成します。HTML（HyperText Markup Language）は、ウェブページを作成するための標準マークアップ言語です。

プロジェクトディレクトリに移動します：

cd ~/project/my-first-webpage

WebIDE を開き、index.html という新しいファイルを作成します：

touch index.html

次に、基本的な HTML 構造を追加しましょう。WebIDE で index.html ファイルを開き、以下のコードを入力します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>
  </body>
</html>

この HTML ドキュメントの主要なコンポーネントを解説しましょう：

<!DOCTYPE html> は、これが HTML5 ドキュメントであることを宣言します
<html> は HTML ページのルート要素です
<head> には、ドキュメントに関するメタ情報が含まれています
<body> には、表示されるページコンテンツが含まれています
<h1> は主要な見出しです
<p> は段落です

HTML ページに画像を挿入する

このステップでは、ダウンロードした風景画像を HTML ページに挿入する方法を学びます。<img> タグは、HTML に画像を埋め込むために使用されます。

WebIDE で index.html ファイルを開き、画像を含むようにコンテンツを変更します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>

    <h2>Beautiful Landscape</h2>
    <img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
  </body>
</html>

画像タグの属性を解説しましょう：

src：画像ファイルへのパスを指定します
alt：アクセシビリティのための代替テキストを提供します
width：画像の表示幅を設定します（ピクセル単位）

画像表示をプレビューして理解する

このステップでは、HTML ページをプレビューする方法と、ウェブブラウザで画像がどのように表示されるかを理解する方法を学びます。LabEx 環境は、組み込みのプレビュー機能付きの WebIDE を提供するため、すぐにウェブページを表示できます。

ウェブページをプレビューするには、WebIDE の「Go Live」ボタンを探します。

ページ内の my-first-webpage フォルダをクリックすると、自動的に index.html ファイルがプレビューモードで開きます。

HTML ページの WebIDE プレビュー

これにより、追加した風景画像が表示された index.html ファイルのリアルタイムビューが起動します。

HTML ページのリアルタイムプレビュー

HTML における画像表示に関するいくつかの重要な概念を見てみましょう：

画像パス

src 属性は、画像への相対パスを指定します：

<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />

相対パスは、HTML ファイルの場所を基準にしています
ウェブファイルパスでは常に正斜線 (/) を使用します

画像属性

width：画像の表示サイズを制御します（ピクセル単位）
alt：アクセシビリティのためのテキスト説明を提供します
height を使用して画像のサイズを設定することもできます

レスポンシブ画像

画像をレスポンシブにするには、CSS を使用するか、HTML 属性を調整することができます：

<img
  src="images/landscape.jpg"
  alt="Scenic Landscape"
  style="max-width: 100%; height: auto;"
/>

style 属性は、画像の表示サイズを設定するために使用されます。これは、画像の幅と高さを制御できる CSS プロパティです。

max-width: 100%; は、画像がコンテナの幅を超えないようにします
height: auto; は、画像のアスペクト比を維持します

今は CSS は心配しないでください。後の実験で扱います。

WebIDE のプレビューで画像が正しく表示されていることを確認しましょう。以下が表示されるはずです：

風景画像
幅 500 ピクセル
明瞭で読みやすい代替テキスト

まとめ

この実験では、参加者は構造化されたプロジェクト環境を設定し、画像を使って最初の HTML ウェブページを作成する方法を学びました。このプロセスは、ターミナルコマンドを使ってクリーンなディレクトリ構造を確立し、画像や CSS 用の専用フォルダを作成することから始まり、これにより Web 開発ファイルを整理しやすくなります。

この実験では、wget を使って Unsplash からサンプルの風景画像をダウンロードする方法を学び、ファイル管理とリソース取得の実践的なスキルを習得しました。プロジェクトファイルを体系的に整理し、画像リソースを取得することで、参加者は Web 開発プロジェクトの準備と HTML ページ用の画像アセットの取り扱いに関する基礎知識を身につけました。