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

はじめに

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") subgraph Lab Skills html/basic_elems -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/head_elems -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/text_head -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/layout -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/access_cons -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/multimedia -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/img_maps -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} html/embed_media -.-> lab-451042{{"画像付きの最初の HTML ページを作成する"}} end

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

このステップでは、画像付きの最初の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 ファイルがプレビューモードで開きます。

これにより、追加した風景画像が表示された index.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ページ用の画像アセットの取り扱いに関する基礎知識を身につけました。