レッスン

ウェブ開発 

HTMLの紹介

ウェブ開発の世界へようこそ！このレッスンでは、インターネットの基本的な構成要素であるHTMLについて紹介します。HTMLはHyperText Markup Languageの略で、ウェブページを作成するための標準言語です。ウェブサイトの骨格と考えてください。構造とコンテンツを提供します。

HTMLがなければ、ウェブブラウザはテキスト、画像、リンクを表示する方法を知りません。シンプルな個人ページから複雑なウェブアプリケーションまで、ウェブサイト構築に興味のある人にとって不可欠です。基本から始め、シンプルなウェブページレイアウトの作成に進みます。

HTMLの構造: 基本的なテンプレート

すべてのHTMLドキュメントは基本的な構造に従います。この構造は、ブラウザにHTMLファイルを読み込んでいることを伝え、ページに不可欠な要素を提供します。以下に、最小限のHTMLテンプレートを示します。

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

それぞれの部分を分解してみましょう。

  • <!DOCTYPE html>: この宣言は、ドキュメントがHTML5ドキュメントであることをブラウザに伝えます。常にHTMLファイルの先頭に記述する必要があります。
  • <html>: これはページのルート要素です。他のすべての内容は、このタグの中に記述されます。
  • <head>: このセクションには、タイトル、文字セット、スタイルシートへのリンクなど、HTMLドキュメントに関するメタ情報が含まれます。
  • <title>: HTMLページのタイトルを指定します（ブラウザのタイトルバーまたはタブに表示されます）。
  • <body>: ここにウェブページのすべてのコンテンツ（テキスト、画像、リンク、その他ユーザーが見るすべてのもの）が記述されます。

HTMLタグ: 要素と属性

HTMLはタグを使用して要素を定義します。ほとんどのタグは、開始タグと終了タグのペアで構成されます。例えば、<p>は段落の開始タグで、</p>は終了タグです。

一部のタグは自己終了型であり、個別の終了タグを必要としません。例えば、<br>タグは改行を作成します。タグには属性を持たせることもでき、要素に関する追加情報を提供します。例えば、<img>タグ（画像用）は、src属性を使用して画像ソースを指定します。

見出し: <h1>から<h6>まで

見出しはコンテンツを構造化し、読みやすくするために使用されます。HTMLには6つのレベルの見出しがあり、<h1>（最も重要）から<h6>（最も重要ではない）まであります。通常、<h1>はページのメインタイトルに使用されます。

以下に例を示します。

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

段落: <p>

段落は、テキストのブロックを表示するために使用されます。<p>タグは段落を定義します。

例:

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

リスト: <ul>と<ol>

HTMLには2種類のリストがあります。順序なしリスト（<ul>）と順序付きリスト（<ol>）です。順序なしリストは特定の順序がない項目に使用され、順序付きリストは特定の順序が必要な項目に使用されます。リスト項目は<li>タグを使用して定義されます。

両方の例を以下に示します。

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

リンク: <a>

リンクは、ユーザーが異なるウェブページ間や同じページ内のセクション間を移動できるようにします。<a>タグはハイパーリンクを定義します。最も重要な属性は、リンクのURLを指定するhrefです。

例:

            
<a href="https://www.example.com">Visit Example.com</a>

target属性は、リンクされたドキュメントを開く場所を指定するために使用できます。target="_blank"は、リンクを新しいタブまたはウィンドウで開きます。

画像: <img>

<img>タグは、ウェブページに画像を埋め込むために使用されます。src属性は画像ファイルへのパスを指定します。alt属性は画像の代替テキストを提供し、画像が読み込めない場合に表示され、アクセシビリティにとって重要です。

例:

            
<img src="image.jpg" alt="Description of the image">

シンプルなウェブページレイアウトの構築

さあ、学んだことをすべて組み合わせて、基本的なウェブページレイアウトを作成しましょう。見出し、段落、リスト、リンク、画像を含めます。

以下に完全なHTMLコードを示します。

            
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple webpage created using HTML fundamentals.</p>
    <ul>
        <li>Learn HTML</li>
        <li>Practice coding</li>
        <li>Build awesome websites</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visit Google</a>
    <img src="placeholder.jpg" alt="A placeholder image">
</body>
</html>

"placeholder.jpg"を実際の画像ファイルへのパスに置き換えることを忘れないでください。このコードをHTMLファイル（例：「index.html」）として保存し、ウェブブラウザで開いて結果を確認してください。これで完全に機能するHTMLページができました！



-/- ✔: 0, ✖: 0