このチュートリアルでは、ホームページにタイトルとサブタイトルを追加してスタイルを設定します。 デモンストレーションサイトでは、サミーの名前とサミーのプロの称号を使用していますが、ここに好きなコンテンツを追加できます。 このコンテンツでは、 <h1> 見出し要素、 <p> 段落要素、および <em> 強調要素。

次の強調表示されたコードスニペットをプロファイルの後に貼り付けます <img> 要素とクロージングの前 </div> 鬼ごっこ:

...
<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00; padding-top:80px;">
<h1>Sammy the Shark</h1>
<p><em>Senior Selachimorpha at DigitalOcean</em></p>
</div>

必ず自分の情報でテキストを変更してください。

ファイルを保存して、ブラウザにリロードします。 次のようなものを受け取るはずです。

このコードスニペットで使用されている要素は、タイトルとサブタイトルに軽いスタイルを適用します。 ただし、タイトルとサブタイトルのスタイルをデモンストレーションサイトのスタイルと一致させる場合は、スタイル値を追加する必要があります。

これらの変更を行うために、 style これらの要素に属性を付けて、追加のプロパティを設定します。 強調表示された属性を <h1><p> 次のコードスニペットに示されている要素:

<h1 style="font-size:100px; color:white; margin:10px;">Sammy the Shark</h1>

<p style="font-size:30px; color: white;"><em>Senior Selachimorpha at DigitalOcean</em></p>

ファイルを保存して、ブラウザにリロードします。 次のようなものを受け取るはずです。

これらのスタイルプロパティは、フォントサイズを30ピクセルに調整し、フォントの色を白に変更します。 また、10ピクセルのマージンを追加しました <h1> エレメント。

これで、HTMLを使用してWebページにタイトルとサブタイトルを追加してスタイルを設定する方法を理解する必要があります。 次のチュートリアルでは、Webサイトに追加のWebページを作成してリンクする方法を学習します。