開発者ドキュメント

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

このチュートリアルでは、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.">
...

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

「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>

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

モバイルバージョンを終了