このチュートリアルでは、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
プロパティ。 Themargin
プロパティを使用すると、HTML要素を囲む空白のサイズを指定できます。 Thefloat
プロパティを使用すると、画像をディスプレイの右側と左側に「フロート」させながら、テキストをその側面に流すことができます。 - 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:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p>
</div>
このコードスニペットの各部分を確認するために、少し一時停止してみましょう。
- The
<div style="height:600px; margin:100px;">
要素はを作成します容器それはheight
600ピクセルのmargin
100ピクセルの。- The
<h1>
elementは、コンテンツにテキストヘッダーを追加します。- 二つ
<p style="line-height: 2.0; font-size:20px;">
タグは、行の高さが2.0に拡張され、フォントが20ピクセルの2つの段落を作成します。- ‘ @SampleEmail .com”>サミー @SampleEmail .com `は、電子メールアドレスに電子メールリンクを追加します。
- クロージング
</div>
タグは私たちを閉じます<div>
容器。「index.html」ファイルを保存して、ブラウザにリロードします。 Webページの上部セクションの下のセクションは次のようになります。
これで、画像とテキストがデモWebサイトに表示されたまま表示されます。 コードスニペットのスタイルプロパティを調整して、コンテンツの高さ、余白、フォントサイズ、またはその他のスタイルプロパティを変更できます。
ブラウザのビューポートが大幅に縮小されると、テキストは最終的にページ上の他の要素に流れ込むことに注意してください。 さまざまなデバイスに対応するレイアウトを作成するには、CSS(チュートリアルシリーズは近日公開予定)やFlexboxなどの追加のフロントエンドスキルを習得する必要があります。
これで、を使用して画像とテキストを並べて配置する方法を理解できたはずです。
<div>
コンテナ、style
属性、およびスタイルのプロパティ。 シリーズの次の最後のチュートリアルでは、HTMLを使用してWebサイトフッターを作成する方法を学習します。<footer>
エレメント。 - The