Htmlの基礎
- 1. HTML
HTML というプログラム言語は文章に対して、意味づけを行うためのマークアップ言語です。
アングルブラケットと呼ばれる <> に囲まれた要素名によってコンピュータがただの文字を意味のある文として認識します。
（例）
<h1> ページ内のもっとも重要な見出しです。
<img> 画像を画面に表示させます。
<a> リンクを設定します。
上記のように <> で囲まれた要素をタグと言います。
HTML で用意されているタグの大半は開始タグと終了タグの一対でマークアップしていきます。
（例）
< タグ名 > 内容 </ タグ名 >
終了タグには必ずスラッシュ（/）がつきます。
このように、どこからどこまでは ... という内容に対しては開始タグと終了タグが存在しますが、ここで改行！のように
範囲指定のないものは終了タグが存在しません。終了タグが存在しないタグを空タグ（空要素）といいます。
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
- 2. HTML でいう要素とは、開始タグから終了タグまでを指します。
（例） （要素名） （属性） （値）
開始タグ・・・ <table summary=”△△△” >
<tr>
<td>○○○</td><td>◇◇◇</td>
要素 </tr>
<tr>
<td>○○○</td><td>◇◇◇</td>
</tr>
終了タグ・・・ </table>
※例ではテーブルタグを使用している。この場合は table 要素となる。
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
- 6. １、html の子要素に head タグと body タグ以外のタグが存在する。
２、body タグの子要素にインライン要素がある。
３、p タグの中に p タグが存在する。
４、ul（ol）タグの子要素に li タグ以外のタグが存在する。
５、dl タグの子要素に dt タグ dd タグ以外のタグが存在する。
６、インライン要素のなかにブロック要素が存在する。
７、スタイルを目的としたマークアップを行う行為。
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
- 7. <!--html のコードと文字コードの定義 -->
<meta http-equiv=”content-type” content=” text/html;charset= 文字コード” >
<!--CSS のコード定義 (HTML 内に CSS を記述するとこのみ必要 ) -->
<meta http-equiv=”content-style-type” content=” text/css” >
<!--Javascript のコード定義 (HTML 内に Javascript を記述するとこのみ必要 ) -->
<meta http-equiv=”content-script-type” content=”text/javascript” >
<!-- 検索エンジンのためのキーワードを設定 -->
<meta name=”keywords” content=” key01,key02key03” >
<!-- 検索エンジンのためのページ紹介文を設定 -->
<meta name=”description” content=”紹介文” >
<!-- 製作者情報を登録 -->
<meta name=”author” content=”名前” >
<!-- 著作権 -->
<meta name=”copyright” content=”製作年数 著作権利者名（日本語不可）”>
<!-- 日付（更新日）-->
<meta name=”date” content=”2011-07-22” >
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
- 9. 要素の style 属性で適応
body 内で使用する要素（タグ）には、すべて style 属性があり、style 属性の値として CSS を適応することができるが、
要素一つ一つに style をつけていくのは、大変な作業になります。
<h1 style=” color=#ff0000” >
要素の head 内で適応
head 要素内に style 要素を記述し、その style 要素内では CSS 言語を使用することができます。
CSS 言語を html のコメントタグ <!-- --> で囲んでおけば、CSS に対応していなブラウザではテキストとして表示され
ることを防げます。
<style type=” text/css” >
<!--
h1 {
color:#ff0000;
}
-->
</style>
すべてのスタイルを head 要素内に記述をすると、その内容も検索エンジンは読んでいきますので、あまり使われません。
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
- 10. 外部 CSS を読み込んで適応
head 要素内に link 要素を使って読み込むことができます。
外部 CSS としてまとめて管理しておくことで、後々の管理がしやすく W3C からも推奨されています。
link 要素の rel 属性で HTML との関係性が stylesheet であることを定義し、href 属性で CSS ファイルを呼び出します。
type 属性で text/css とテキストで書かれた CSS ファイルであることも指定してあげる必要があるので注意が必要です。
<link rel=” stylesheet” href=” パス” type=” text/css” >
Copyright 2011 TANAKA SHINJI. All Rights Reserved.
