2017-06-03

Webアプリ勉強2・・・HTMLその2

 HTMLについての勉強の続きです。

 HTMLの勉強での科目です。

1.HTML・・・内容にあたる部分(ブロックレベル要素
 1)HTMLの要素(要素とは、構成するパーツのようなもの)
  head要素
  body要素
   A.ブロックレベル要素 ←今回
2.CSS・・・修飾
3.JavaScript・・・動作プログラム



今回は、ブロックレベル要素とインライン要素を詳細に見ていきます。

A.ブロックレベル要素
・<address>
 その文書に関する連絡先・問合せ先を表します。
 住所に限らず、ホームページのリンク先・メールアドレス・住所・電話番号・FAX等 連絡をとるために必要な情報を配置することができます。

・<blockquote>
 引用・転載であることを表します。
 比較的長めの文章を引用・転載する際に使用します。

・<center>
 テキストや画像等のコンテンツをセンタリングする際に使用します。
 この要素は非推奨要素となっているので、できるだけスタイルシート(CSS)を使用します。

・<div>
 それ自身は特に意味を持っていません。
 <div>~</div>で囲んだ範囲をひとかたまりとして、 align属性で位置を指定したり、スタイルシートを適用するのに用います。

<dl>
 Definition Listの略で、<dl>~</dl>の範囲が定義リストであることを表します。 
 定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。 

・<fieldset>
 フォームの入力項目をグループ化する際に使用します。
 グループの先頭には、<legend>~</legend>で入力項目グループにタイトルをつけます。
 フォームの入力項目をグループ化することで、Tabキーなどでグループ間を簡単に移動できます。

・<form>
 入力・送信フォームを作成する際に使用します。
 <form>~</form>の間に、 <input><sekect>・ <textarea>等の要素により、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置します。
 フォームに入力されたデータは、送信ボタンを押すことでCGIプログラム等へ送信され、一定の処理が行われます。 その際の送信先はaction属性で、転送方法はmethod属性で、データ形式はenctype属性でそれぞれ指定します。

・<h1>-<h6>
 hとはHeadingの略で、見出しを意味します。
 <h1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。 <h6>が最下位の見出しです。
 一般的なブラウザでは<H>要素で囲まれた部分はテキストのサイズが変化し、太字で表示され、前後に改行が入ります。
※これを利用して単にテキストのサイズを変えたり太字にするなど、見栄えを目的に<h>要素を使用することは避けましょう。

・<hr>
 Horizontal Ruleの略で水平の罫線を表します。
width属性で幅(横の長さ)を、size属性で太さ(縦の高さ)を指定します。 また、デフォルトでは影の付いた立体的な罫線となります。変更したい時は、noshade属性により平面的な単色の罫線にすることができます。

・<noframes>
 フレーム(<frameset>~</frameset>)に 対応していないブラウザを使用している場合や設定でフレームを表示しないようにしている場合などに、 代わりに表示させる内容を指定します。

・<noscript>
 スクリプトが動作しないブラウザのために、 代わりに表示させる内容を指定します。
 <noscript>~</noscript>の中に記述された内容は、 ユーザーの使用しているブラウザがスクリプトに対応していない場合や、 スクリプトを実行しない設定にしている場合などに表示されます。
 ※<HEAD>~</HEAD>の中ではなく、 <BODY>~</BODY>の中に記述します。

・<ol>
 Ordered Listの略で、順序のあるリストを表示する際に使用します。
 type属性により、算用数字(1,2,3,...)、アルファベット小文字(a,b,c,...)、 アルファベット大文字(A,B,C,...)、ローマ数字小文字(ⅰ,ⅱ,ⅲ,...)、 ローマ数字大文字(Ⅰ,Ⅱ,Ⅲ,...)を指定することができます。 また、start属性により開始番号を指定できます。

・<p>
 Paragraphの略で、<p>~</p>で囲まれた部分がひとつの段落であることを表します。
 一般的なブラウザでは<p>~</p>の前後に1行分改行されますが、 単に改行することが目的の場合には、<p>要素ではなく<br>要素を使用します。

・<pre>
 Preformatted Text(整形済みテキスト) の略で、<pre>~</pre>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。
 ※Internet ExplorerやNetscapeなど多くのブラウザでは、<pre>~</pre>の範囲内でも 「< 」と「 >」 は特殊文字として解釈されるので、&lt; と &gt; に置換する必要があります。

・<table>
 テーブル(表)を作成する要素です。
 テーブル(表)の基本的な構造は、 <table>~</table>内に<tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や <td>~</td>でセルを定義します。
 テーブル(表)の各セルには見出しを定義するヘッダセル(<th>~</th>)と、 データを定義するデータセル(<td>~</td>)があります。 ヘッダセル内のテキストは、一般的なブラウザでは太字でセンタリングされて表示されます。
 ※<table>要素をレイアウト目的で使用できますが、本来はテーブル(表)を作成するための要素なので、 レイアウト目的には、できるだけスタイルシート(CSS)を利用します。

・<ul>

 Unordered Listの略で、順序のないリストを表示する際に使用します。 
 リストの各項目は<li>要素を用いて記述します。 
 ※順序のあるリスト表示には<ol>要素を使用します。
 ※type属性により、 黒丸(disc)、白丸(circle)、黒い四角(square)を指定することができます。 また、<li>要素にtype属性をつけると、 項目ごとに黒丸(disc)、白丸(circle)、黒い四角(square)をつけ分けることができます。

 以上がブロックレベル要素です。

 少し長くなったので、インライン要素については、次回、記載します。

0 件のコメント:

コメントを投稿