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

Middle section

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

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

まず、デモサイトに表示されている大きなプロフィール画像を追加します。 開始する前に、使用する大きなプロフィール画像またはその他の画像を選択していることを確認してください。 画像は400×600ピクセルで表示されるため、画像サイズがこれらのサイズで機能することを確認してください。 画像がない場合は、デモサイトから画像をダウンロードできます。 画像を取得したら、画像フォルダに保存します。 (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.">
...

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

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

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

Middle section of webpage with large profile image

エラーが発生した場合は、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;"> 要素はを作成します
    容器

    それはheight 600ピクセルのmargin 100ピクセルの。

  • <h1>要素は、コンテンツにテキストヘッダーを追加します。
  • 2つの<p style="line-height: 2.0; font-size:20px;">タグは、行の高さが2.0に拡張され、フォントが20ピクセルの2つの段落を作成します。
  • @SampleEmail