5.タグ abc順(使ったことがあるタグだけ)


タグ a

<a href="p3.html">~</a>

aはanchor(アンカー)の略で要素内容をクリックするとhrefで指定するURLへ移動します。
よく使う属性hrefはhypertext referenceの略でエイチレフやエッチレフと読み、行き先のことです。
なので上記の記載は、~の部分をクリックするとp3.htmlページへ移動しますということです。

属性には表示する位置を指定するtargetがあります。リンクをどう開きたいかは訪問者に決めさせるというインターネット倫理の基本原則がありますが、特にiframe(インラインフレーム)などを使っているときには指定することも可能です。
target="_blank":別のタブ(ウィンドウ)に表示
target="_self":現在のフレーム(ウィンドウ)に表示
target="_parent":親フレームに表示
target="_top":フレーム分割を解除してウィンドウ全体に表示

2021/09/20 追加

上記4つだけでは新しいウィンドウで表示することはできませんが、下記のソースで表示できます。

<p><a href="training2.html" onclick="window.open('training2.html','ウィンドウの名前','width=600,height=400');return false;">サイズが設定どおりになりました。</a></p>

サイズが設定どおりになりました。

よく使うのは、<a href="p3.html" target="_blank">で、今見ているページを残して別のウィンドウ(タブ)に出します。

もうひとつのよく使う属性はname(ネーム)
<a name="namae">などと名前を付けておき、付けた名前の前に「#」を付けることで別のところに<a href="#namae">namaeと書かれたところに移動</a>を書いて移動します。 2021/09/17 下記に訂正

ジャンプしたい場所の任意のタグにid="名前"を付けておき、<a href="ページ#名前">・・・・</a>でジャンプします。

例:タグ br に行きます。
この例は、ジャンプしたい場所には<h3 id="br1">と名前を付けておき、<a href="#br1">タグ br に行きます。</a>と書いています。

≪HTML LS≫
<a href="">をクリックしたときに、hrefのページに遷移しつつ、別URLにpingを送信するping属性が追加されています。
<a href="クリックした行き先" ping="別URL">


タグ b

<b>~</b>

bold(太字)の略で、<b>囲んだ部分の文字を太字に</b>します。
結果は、bold(太字)の略で、囲んだ部分の文字を太字にします。

太字にするのは<b>以外に<em>、<strong>があります。
<b>~</b>:太字にするだけ。
<em>~</em>:太字にして強調します。(重要性は表しません)<em>の中にさらに<em>を入れ子にすることで協調の度合いを高めることができます。
<strong>~</strong>:その内容がとても重要であることをユーザーに対して伝えます。<strong>の中にさらに<strong>を入れ子にすることで、重要性の度合いを高めることができます。


タグ body

<body>~</body>

html文書では<html>、<head>、<body>の3種類のタグで文書の構造を定義します。<body>に書かれた内容が実際にブラウザに表示される文書になります。

タグの書き方をミスって全然違うところに書いた文章でもページに表示されたりします。テストの答案なら「×」なんですが、おそらくブラウザがうまく解釈して表示してくれていると思います。

<html>
 <head>
 ・・・・
 </head>
 <body>
 (文章や画像を配置します)
 </body>
</html>


タグ br

<br>(終了タグはありません)

break(ブレイク)の略。書いたところから改行します。私の知る限り属性はありません。

このように書くとマイナビオールスターゲームの<br>スタメンを<br>サプライズ発表した。
このように表示されますマイナビオールスターゲームの
スタメンを
サプライズ発表した。

<br>を連続して書いて行間を空けるのはよくないと聞きます。ネット上のどのページを見てもそのように書いていますが、本当でしょうか?
調べる限り、<br>を連続してはダメとはどこにも書かれていません。<br>を連続で使わない方がコーディング上好ましいです。とは書いてあります。
難しいですね、まあ、できる限り<p>などを使って処理しましょう。


タグ div

<div>~</div>

division(ディビジョン、仕切り)の略です。四角い枠を作って、様々な要素をひとまとめにします。また、改行して終わります。この要素自体は特別な意味を持ちません。

この要素は、他に適した要素がない場合の、最終手段としての要素とされています。他に適切な要素がある場合は、そちらを使用することが強く推奨されています。

同様なタグに<span>がありますが、<div>はブロック要素(一般的に前後に改行がはいる様な要素)として、<span>はインライン要素(一般的に前後に改行が入らない要素)として定義されています。

divに属性(class属性やid属性)を追加するとその範囲内はすべて対象になります。
例えば、

htmlで <div class="rei1">divに属性を追加するとその範囲内はすべて対象になります。</div>
スタイルシートで .rei1 {
border:solid 1px #f66;
background-color:#fee;
}
このように表示されます
divに属性を追加するとその範囲内はすべて対象になります。

タグ dl、dt、dd

dl要素は名前(dt要素)と値(dd要素)で構成される記述リストです。
dlはdefinition list(定義)の略、dtはDefinition Term(定義する用語)の略、ddはDefinition Description(用語の説明)の略です。

このように書くと <dl>
<dt>7月15日</dt>
<dd>p01.html、p02.htmlページの作成</dd>
<dt>7月16日</dt>
<dd>p03.html、p04.htmlページの作成</dd>
</dl>
このように表示されます
7月15日
p01.html、p02.htmlページの作成
7月16日
p03.html、p04.htmlページの作成

タグ em

<em>~</em>

emは emphasis(強調)の略。<em>~</em>で囲まれたテキストを強調する際に用います。多くのブラウザでは、強調を斜体文字で表現しますが、ブラウザによっては色を変えるなど、斜体以外の表現となる場合もあります。

太字にするのは<em>以外に<b>、<strong>があります。
<b>~</b>:太字にするだけ。
<em>~</em>:太字にして強調します。(重要性は表しません)<em>の中にさらに<em>を入れ子にすることで協調の度合いを高めることができます。
<strong>~</strong>:その内容がとても重要であることをユーザーに対して伝えます。<strong>の中にさらに<strong>を入れ子にすることで、重要性の度合いを高めることができます。


タグ embed

<embed src="...." type="....">

embedはembedding(埋めこみ)の略。Flash(*.swf)、動画(*mp4, *.ogg, *.mpg, *.mov)、音声(*.wav, *.aif, *.au, *.mid, *.ra)などを埋め込む際に用いられます。
プラグインがインストールされていなかったり、プラグインのバージョンが異なっていたりすると、再生できなかったり、再生方法が異なっていたりします。プラグインがインストールされていないと、そのページを表示する度に「プラグインが無いけどインストールするか?」のようなダイアログが表示されることもあります。

データを埋め込むには、src属性でリソースのURLを指定して、type属性でMIMEタイプを指定します。src属性とtype属性を同時に指定する場合、当然ながら、src属性で指定したリソースに合致する適切なMIMEタイプを指定してやる必要があります。例えば、以下のように書きます。

<embed type="video/webm"
 src="/media/flower.mp4"
 width="250"
 height="200">

type属性でMIMEタイプを指定しますが、MIMEタイプはどれくらいあるのでしょうか?
代表的なものは、
CSS(.css):text/css
アイコン(.ico):image/vnd.microsoft.icon
フラッシュ(.swf):application/x-shockwave-flash
動画ファイル(.avi):video/x-msvideo
動画ファイル(.mp4):video/mp4
動画ファイル(.webm):video/webm
音声MP3(.mp3):audio/mpeg
音声WAVE(.wav):audio/wav