2021年3月26日金曜日

ホームページを構成する代表的な要素「hr」「blockquote」「strong、a、img」などを組み合わせてホームページが作られる‐HTML・CSSを学ぶ。

 ホームページを構成する要素はブロックレベル要素と言われる「h1、h2、p、ul、li」、インライン要素と言われる「brまたはbr /」の要素があります。


ブロックレベル要素とインライン要素について詳しくはこちら:「h1やh2」などの見出し・段落、「divやspan」などのブロックレベル要素・インライン要素‐HTML・CSSを学ぶ


ブロックレベル要素・インライン要素はまだ、たくさんの要素があり今回はブロックレベル要素「hr、blockquote」、インライン要素「strong、a、img」について学びます。


ブロックレベル要素

「hr」要素

区切り線を引きたいときに使います。<hr>は開始タグのみで使用する。線を引きたいところにタグを使用する。


使用例

<hr>・・・区切り線

<p>区切り線を引く</p>

<hr>・・・区切り線



区切り線を引く



「blockquote」要素

引用を表します。何かの問題が発生した時に定型文を引用します。少し幅や高さが小さく表示されます。


<p>

只今問題が発生しています。機能をご利用いただけません。

</p>

<blockquote>

<p>

このまま暫くお待ちください。今係員が対応しています。

</p>

</blockquote>


只今問題が発生しています。機能をご利用いただけません。

このまま暫くお待ちください。今係員が対応しています。


インライン要素

「a」要素

リンクを表す要素でリンクを貼りたい時に使用します。<a>~</a>はこれだけでは意味を持ちません。<aの後ろにリンク先のURL属性を付加して使用します。


使用例

<p>

<a href="index.html">指定のページ</a>へリンクしたり<a href="https://fslife39.blogspot.com/">最強のスマホ・パソコンライフ</a>にリンクをすることが出来ます。

</p>


指定のページへリンクしたり最強のスマホ・パソコンライフへリンクをすることが出来ます。


「strong」要素

文字を太字にして強調します。「strong」要素で囲んだ部分のみ強調できます。見出しでも文字を太字に強調できますが、見出しはあくまでも見出し専用です。文章の中で強調したい部分には「strong」を使用します。

見出しについてもっと見てみる:ブロガーBloggerでブロックレベル要素「h1、h2、h3、h4、段落、標準」などの表示の違いを見てみます‐HTML・CSSを学ぶ。


使用例

<p>

文字を<strong>強調</strong>します。・・・「強調」部分を強調します

</p>


文字を強調します


「img」要素

画像をページ内に挿入するときに使用します。imgはこれだけでは意味を持ちません。src、width、height属性を付加して使用します。


使用例

<p>画像を挿入します。

<img src="fslife39.jpg" width="88" height="31" alt="最強のスマホ・パソコンライフ"</p>


「img」要素に付加して使用する属性

src="画像のURL・ファイル名"

width="画像の幅"

height="画像の高さ

alt="画像が表示されない時の代替文字"最強のスマホ・パソコンライフ"


画像を挿入します  最強のスマホ・パソコンライフ


0 件のコメント:

コメントを投稿

おすすめドリンク

楽天
 
Amazon

私にとって記念すべきブログ投稿となります

記念すべきブログ投稿 ブログ記事を書いている時、なぜか「思えば、遠くへきたもんだ~♪」と昔懐かしい歌の歌詞を口ずさんでいました。現在では、「海援隊」と言うグループ名は知らなくとも「武田鉄矢」ならご存じですよね。 武田鉄矢さんが確か3人でユニットを組んで活動しておられた時の歌なので...