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

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

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

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

次に、最後のクロージング後に次のコードスニペットをコピーします </div> 閉会前 <body> 「index.html」ファイルのタグ：

...
<!--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.">
...

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

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

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

エラーがある場合は、の正しい領域にすべてのHTMLコードが追加されていることを確認してください。 index.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>

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