HTMLを使用してWebページにタイトルを追加してスタイルを設定する方法

このチュートリアルでは、ホームページにタイトルとサブタイトルを追加してスタイルを設定します。 デモンストレーションサイトでは、サミーの名前とサミーのプロの称号を使用していますが、ここに好きなコンテンツを追加できます。 このコンテンツでは、<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ピクセルに調整し、フォントの色を白に変更します。 また、<h1>要素に10ピクセルのマージンを追加しました。

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