HTMLを使用してホームページの本文を作成する方法

このチュートリアルでは、HTML<div>要素とHTMLstyleプロパティを使用して、デモンストレーションWebサイトの本文または中央セクションを再作成します。

デモンストレーションWebサイトの中央のセクションには、大きなプロフィール画像と短い段落のテキストが並べて表示されています。このレイアウトは、このシリーズの前のチュートリアルで学習した<div>コンテナーを使用して実現できます。 CSSなどのフロントエンドスキルを引き続き学習する場合は、このチュートリアルで使用する方法に基づいて、Webページにコンテンツを配置するための改善された方法があることに注意してください。

Webページに大きなプロフィール画像を追加する方法

まず、デモサイトに表示されている大きなプロフィール画像を追加します。開始する前に、使用する大きなプロフィール画像またはその他の画像を選択していることを確認してください。画像は400x600ピクセルで表示されるため、画像サイズがこれらのサイズで機能することを確認してください。画像がない場合は、デモサイトから画像をダウンロードできます。画像を取得したら、画像フォルダに保存します。（HTMLを使用してWebページに画像を追加する方法の復習については、このチュートリアルシリーズの前半のチュートリアル HTML画像にアクセスしてください）。

次に、「index.html」ファイルの</div>を最後に閉じた後、<body>タグを閉じる前に次のコードスニペットをコピーします。

...
<!--Second section-->
<img src="images/large-profile.jpg" style="height:600px; margin:100px; float: left;" alt="A pretend invisible person wearing a hat, glasses, and coat.">
...

このコードスニペットの各部分を確認するために、少し一時停止してみましょう。

 は、ブラウザによって読み取られないコメントであり、人間が読みやすいようにhtmlファイルを整理するために使用されます。
<img>タグは、ウェブページに画像を挿入していることをブラウザに通知します。
src="images/large-profile.jpg"は、表示されている画像の場所をブラウザに通知します。
style属性を使用すると、height、margin、およびfloatプロパティを定義できます。 marginプロパティを使用すると、HTML要素を囲む空白のサイズを指定できます。 floatプロパティを使用すると、画像をディスプレイの右側と左側に「フロート」させながら、テキストをその側面に流し込むことができます。
alt属性を使用すると、代替テキストを画像に追加して、スクリーンリーダーを使用する訪問者のサイトへのアクセスを改善できます。このコードスニペットの代替テキストを、画像に一致する説明に変更することを忘れないでください。

「index.html」ファイルを保存して、ブラウザにリロードします。 Webページの上部セクションの下のセクションは次のようになります。

エラーが発生した場合は、index.htmlファイルの正しい領域にすべてのHTMLコードを追加し、画像がsrcで指定したファイルパスにあることを確認してください。属性。

「自己紹介」セクションをWebページに追加する方法

次に、画像の右側にテキストの段落を追加します。この例のダミーテキストは、自由に選択したテキストに置き換えてください。

このテキストセクションは、<div>コンテナを作成し、その中にテキストコンテンツを挿入することで作成します。

「index.html」ファイルで、上記の手順で追加した画像の後、</body>タグを閉じる前に次のコードスニペットを追加します。

...
<div style="height:600px; margin:100px;">
  <h1>Hello </h1>
  <p style="line-height: 2.0; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes 
  nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum mattis. Turpis in eu mi 
  bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet 
  bibendum enim facilisis gravida. Cursus turpis sa tincidunt dui ut ornare lectus. Enim nec dui nunc 
  mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Tussa 
  ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis 
  dis. Enim tortor at auctor urna nunc id cursus metus.</p>
  <p style="line-height: 2.0; font-size:20px;">Email me at <a 
  href="mailto:[email protected]">[email protected] </a></p>
</div>

このコードスニペットの各部分を確認するために、少し一時停止してみましょう。

The<div style="height:600px; margin:100px;"> 要素はを作成しますhow-to-use-a-div-the-html-content-division-element

容器それはheight 600ピクセルのmargin 100ピクセルの。 <h1>要素は、コンテンツにテキストヘッダーを追加します。 2つの<p style="line-height: 2.0; font-size:20px;">タグは、行の高さが2.0に拡張され、フォントが20ピクセルの2つの段落を作成します。 ' [[“mailto:Sammy%3Ca%7C@SampleEmail]] [[“mailto:Sammy%3Ct0%7C.com”>サミー]] community/users/sampleemail [[“mailto:Sammy%3Ct0%7C@SampleEmail]] [[“mailto:Sammy%3C/a%7C.com]] `は、電子メールアドレスに電子メールリンクを追加します。 </div>タグを閉じると、<div>コンテナが閉じます。

「index.html」ファイルを保存して、ブラウザにリロードします。 Webページの上部セクションの下のセクションは次のようになります。

これで、画像とテキストがデモWebサイトに表示されたまま表示されます。コードスニペットのスタイルプロパティを調整して、コンテンツの高さ、余白、フォントサイズ、またはその他のスタイルプロパティを変更できます。

ブラウザのビューポートが大幅に縮小されると、テキストは最終的にページ上の他の要素に流れ込むことに注意してください。さまざまなデバイスに対応するレイアウトを作成するには、CSS（チュートリアルシリーズは近日公開予定）やFlexboxなどの追加のフロントエンドスキルを習得する必要があります。

これで、<div>コンテナ、style属性、およびスタイルプロパティを使用して画像とテキストを並べて配置する方法を理解できたはずです。シリーズの次の最後のチュートリアルでは、HTML<footer>要素を使用してWebサイトフッターを作成する方法を学習します。