第２章 HTMLの基本 2.1 HTML文書の書き方 2.2 基本的なタグ 2.3 テキスト関連のタグ 2.4 リンクタグ 2.5 ブロックレベル要素とインライン要素 2.6 特殊文字 2.7 その他 2.1 HTML文書の書き方 2.1.1 HTML文書の要素とタグ 2.1.2 属性と属性値 2.1.3 HTML文書の基本構造 2.1.4 HTML文書の作成 2.1.5 付加情報 2.1.6 コメント 2.1.1 HTML文書の要素とタグ （１）文書を構成する部品を要素（element）という テキストや見出し，段落に分け，画像等を貼り付ける。 これらを要素（element）という。 （２）要素はタグ（tag）で指定される 要素がどんな部品かを示し，またその範囲を示すため に，タグを指定する。 <TABLE border="1"> <TBODY> <TR> <TD><IMG src="vinegar.jpg" width="34" height="129" border="0"></TD> <TD>ご飯だけを食べたときより<BR> 酢の物が一緒だと血糖値の<BR> 上昇が25%抑えられたとのことです。<BR> <BR> 血糖値の上昇がゆっくりであれば<BR> インシュリンの分泌量が減り，<BR> 脂肪の増大も抑えられます。</TD> </TR> </TBODY> </TABLE> （３）タグ（tag）は入れ子構造をとる タグは入れ子構造で，互い違いの指定は許されない。 <TABLE border="1"> <TBODY> <TR> <TD><IMG src="vinegar.jpg" width="34” height="129" border="0"></TD> <TD>ご飯だけを食べたときより<BR> 酢の物が一緒だと血糖値の<BR> 上昇が25%抑えられたとのことです。<BR> <BR> 血糖値の上昇がゆっくりであれば<BR> インシュリンの分泌量が減り，<BR> 脂肪の増大も抑えられます。</TD> </TR> </TBODY> </TABLE> 例えば， 以下の構造は許されない。 <TD>ご飯だけを<EM>食べたときより<BR> 酢の物が一緒だと血糖値の</TD> 上昇が25%抑えられたとのことです。</EM> 2.1.2 属性と属性値 より詳しい情報を付け加えるために， 属性と属性値を付加する場合がある。 <IMG src="vinegar.jpg" width="34” height="129" border="0"></TD> 属性 src width height border 属性値 "vinegar.jpg” "34” "129” "0" 2.1.3 HTML文書の基本構造 基本的には，次の構成となる <!DOCTYPE ………> ⇒文書型の宣言。HTML文書であることを示す <HTML> <HEAD> ・ ・ ⇒HTML文書全体に関する情報（なくてもよい） ・ </HEAD> <BODY> ・ ・ ⇒表示させるコンテンツに関する情報 ・ </BODY> </HTML> 2.1.4 HTML文書の作成 （１）文書型宣言 HTML文書がどのような仕様に基づいて記述されているかを示す。 ■HTML 4.01 厳密型DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ■HTML 4.01 移行型DTD（厳密型で作成できない場合の仕様） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ■HTML 4.01 フレーム設定型DTD（フレームを使用するＷｅｂ） <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Frameset//EN"> （２）HTMLの言語を設定する HTML文書がどの言語を用いて記述されているかを指定 ■日本語の場合 <html lang="ja"> 属性値 ar de el en es fr 意味 アラビア語 ドイツ語 ギリシャ語 英語 スペイン語 フランス語 属性値 it ja ko la ru zh 意味 イタリア語 日本語 韓国語 ラテン語 ロシア語 中国語 （３）文字コードを設定する 文字コードをMETAタグで指定する ■日本語の場合 <META http-eqiuv="Content-Type" content="text/html charset=UTF-8”> 文字コード ETF-8 Shift JIS EUC content属性値のcharset部の記述 UTF-8 Shift_JIS EUC-JP （４）ページにタイトルをつける 文書タイトルをtitleタグを使って書く。 <head> <meta http-eqiuv="Content-Type" content="text/html"> <title>酢の効用</title> </head> （５）ＨＴＭＬ文書を作成してみる <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html lang="ja"> <head> <META http-eqiuv="Content-Type" content="text/html; charset=Shift_JIS"> <title>酢の効用</title> </head> <body> <p><u><font color="#ff0000"><i><b>■酢の効用 </b></i></font><BR></u></p> <p> ご飯だけを食べたときより<BR> 酢の物が一緒だと血糖値の<BR> 上昇が25%抑えられたとのことです。<BR><BR> 血糖値の上昇がゆっくりであれば<BR> インシュリンの分泌量が減り，<BR> 脂肪の増大も抑えられます。 </p> </body> </html> 2.1.5 付加情報 METAタグに付加情報を加える 属性 属性値の内容 description 説明文 keywords HTML文書のキーワード author ページ製作者 copyright 著作権 reply-to 連絡先 build 制作年月日 expires 執行日 【記述方法】 <META name=“属性” content=“属性値”> 付加情報の例 <META http-eqiuv="Content-Type" content="text/html; charset=Shift_JIS"> <META name=“author” content=“Yutaka Shirai”> <META name=“keywords” content=“健康, 酢, 効果”> 2.1.6 コメント コメントの書き方（<!--と-->で囲む） <!--この部分はブラウザで無視されます--> 2.2 基本的なタグ 2.2.1 見出しタグ 2.2.2 段落タグ 2.2.3 改行タグ 2.2.4 水平線タグ 2.2.5 見栄えを整える属性 2.2.1 見出しタグ <body> <h1>見出しレベル１</h1> <h2>見出しレベル２</h2> <h3>見出しレベル３</h3> <h4>見出しレベル４</h4> <h5>見出しレベル５</h5> </body> 2.2.2 段落タグ <p>段落1です</p> <p>段落2です</p> 2.2.3 改行タグ 大正末期から昭和初期にかけ，<BR> 雑誌「童話」,「赤い鳥」,「金の星」に投稿して，<BR> 「若き動揺詩人の中の巨星」と賞賛されたが，<BR> 26歳の若さでこの世を去った。<BR> 見出しタグと改行の例 <p>大正末期から昭和初期にかけ，<BR> 雑誌「童話」,「赤い鳥」,「金の星」に投稿して，<BR> 「若き動揺詩人の中の巨星」と賞賛されたが，<BR> 26歳の若さでこの世を去った。<BR> </p> <p> 彼女の詩は，自然な物に対して優しく，<BR> 思いやり深さがあり，<BR> 多くの人々に大きな感動を与えています。<BR> 現在，教科書や副読本にも掲載され，<BR> 幅広い年代の人たちに愛されている。<BR> </p> 2.2.4 水平線タグ <hr> <h2>【解説】</h2> <hr> <p> 大正末期から昭和初期にかけ，<BR> 雑誌「童話」,「赤い鳥」,「金の星」に投稿して，<BR> 「若き動揺詩人の中の巨星」と賞賛されたが，<BR> 26歳の若さでこの世を去った。<BR> </p> 2.2.5 見栄えを整えるタグ ■見出し要素とp要素に指定できる属性 属性 align 属性値 center, left, right 意味 表示位置を中央，左，右に ■hr要素に指定できる属性 属性 align color size width 属性値 center, left, right カラーコードまたは色名 1以上の整数 1以上の整数 意味 表示位置を中央，左，右に 水平線の色を指定する 高さを指定 横幅を指定 見栄えを整えるタグの例 <body> <h1 align="center">動揺詩人 金子みすず（本名金子テル）</h1> <h2 align="left">【生きた時代など】1903～1930</h2> <p align="left"> 1903年（明治36年）山口県長門市仙崎（当時大島郡先崎村） 生まれ </p> <h2 align="left">【解説】</h2> <hr color="#FF0000 align="center" width="500" size="4"> <p align="left"> 大正末期から昭和初期にかけ，<BR> 雑誌「童話」,「赤い鳥」,「金の星」に投稿して，<BR> 「若き動揺詩人の中の巨星」と賞賛されたが，<BR> 26歳の若さでこの世を去った。<BR> </p> 表示例 ■前頁のリストと比べよう！！ 2.3 テキスト関連のタグ 2.3.1 引用 2.3.2 文字強調 2.3.3 上付き・下付き文字 2.3.1 引用 <p align="left">金子みすずの「花びらの海」の一節です。</p> <blockquote> <p> 草屋の軒に花が散る。<BR> 丘の上でも花が散る。<BR> 日本中に花が散る<BR><BR> 日本中に散る花を<BR> 集めて海に浮べましょ。<BR> </p> </blockquote> 2.3.2 文字強調 <em> <strong> ： 強調文字。一般に斜体で表現される。 ： より強い強調文字。一般に太字で表現される。 金子みすずの<em>「花びらの海」</em>の一節です。</p> 金子みすずの<strong>「花びらの海」</strong>の一節です。</p> 2.3.3 上付き・下付き文字 <sup> <sub> ： 上付き文字 ： 下付き文字 庭の広さは68.52m<sup>2</sup>です 水の分子式はH<sub>2</sub>Oです 2.4 リンクタグ 2.4.1 リンクを張る 2.4.2 他のHTMLファイルへのリンク 2.4.3 絶対パスと相対パス 2.4.4 HTMLファイル以外へのリンク 2.4.5 ページ内リンク 2.4.6 電子メール用リンク 2.4.1 リンクを貼る <a>タグの href 属性で指定する。 【用語】 <a> : anchor(アンカー：錨）の意味 href: Hypertext REFerence リンクの例 <a href="http://www.souzousha.iinaa.net/"> このページの管理者</a>のサイトです。 該当するリンクが開かれるかを確認しよう!! リンク表示部分をクリックすると 指定されたサイトが開かれることを確認。 ここをクリック 「前に戻る」を クリック 2.4.2 他のHTMLファイルへのリンク <h2 align="left">■ファイルリンクの例</h2> <p align="left"> <a href=“020301.html”>花びらの歌</a> </p> 2.4.3 絶対パスと相対パス ■絶対パス 通常他のWebサイトへのリンクのときに指定する。 【例】”http://www.sample.com/contents/download.html” ■相対パス ①現在のフォルダと同じフォルダ内を指定する場合，ファイル名 のみを指定する。 【例】”samplefile.html” ②現在のフォルダの下のサブフォルダ内を指定する場合，サブ フォルダ以降を指定する。 【例】”sampleDir/file.html” ③現在のフォルダの親のフォルダを指定する場合，フォルダの階 層が１つあがるたびに「../」を先頭に付ける。 【例】”../../index.html”（この場合は２つ上のフォルダ） 2.4.5 ページ内リンク ■アンカーポイントをid属性で指定 <h2 id="flowerSea">花びらの海</h2> <p align="left"> 金子みすずの<strong>「花びらの海」</strong>の一節です。</p> ■名前の先頭に「#」を付けてアンカーポイントにリンク <p>|<a href="#flowerSea">花びらの海</a>|お花だったら|山茶花 |</p> ページ内リンクの確認 ■ページ内にジャンプするかを確かめよう クリックして 2.4.6 電子メール用リンク ■「mailto:」を先頭に付けると電子メール用リンクとなる <a href="mailto:[email protected]">お問合せはこちらまで</a> 電子メール用リンクのその他の指定 ■複数の電子メールアドレス（セミコロンで区切る） <a href="mailto:[email protected];[email protected]">お問 合せはこちらまで</a> ■CCを指定する場合（宛先の後に?cc=を付けて続ける） <a href="mailto:[email protected][email protected]">お 問合せはこちらまで</a> ■件名を指定する場合（宛先の後に?subjectを付けて記述） <a href=“mailto:[email protected]?subject=問合せ">お問合 せはこちらまで</a> 【補足】 ■ターゲットリンク target属性を追加するとリンク先を開くウィンドウを指定できる。 ①「_blank」 リンク先のページを新規のウィンドウに表示 ②「_parent」リンク先のページを現在の親フレームに表示 ③「_self」 現在のフレーム内に表示 ④「_top」 フレーム枠を消去して再描画 ■アクセスキー属性 いわゆるショートカットキーはaccesskey 属性で指定する。 <a href=“xyz.html” accesskey=“1”>東京</a> WindowsのInternet Exploreでは，[Alt」キーと「1」を同時にク リックするとリンク「東京」にジャンプする。 2.5 ブロックレベル要素とインライン要素 2.5.1 ブロックレベル要素と インライン要素の違い 2.5.2 ブロックタグによるスタイル指定 2.5.3 <span>タグの使用 2.5.1 ブロックレベル要素とインライン要素の違い (1) ブロックレベル要素 ■ブロックレベル要素 データを入れる箱となる要素要素となる 要素名 h1～h6 p blckquote ul, ol, li table, tr, th, td div 内容 見出し要素 段落用要素 引用要素 リスト関連要素 テーブル関連要素 一般的なブロック要素 (2) インライン要素 ■インライン要素 テキストや画像等の特定の部分に役割・機能を持たせる。 （インライン要素は，テキストや他のインライン要素を持つこ とができるがブロックレベル要素を含むことはできない 要素名 a em strong span img 内容 リンク要素 強調文字 より強調するための文字 一般的なインライン要素 画像要素 (3) ブロックレベル要素とインライン要素の関係 ●一般に，ブロックレベル要素は，他のブロック要素レベル やインライン要素を含むことができる。 ●インライン要素にはブロックレベル要素を含むことができ ない。 ●ブロックレベル要素が続くときは改行されるが，インライン 要素が続くときは改行されない。 ブロックレベル要素 ブロックレベル要素 ブロックレベル要素 ブロックレベル要素 インライン要素 インライン要素 (4) インライン要素とbody要素の関係 ●bodyタグの直後にインライン要素を置いても， Windows Exploreでは正常に表示されるが， 正確には，ルール違反であることに注意。 <p>タグ等で段落付けしよう。 【ルール違反例】 <body> <a href=“http://www.badsample.com/”>ルール違反だよ</a><br> <br> bodyタグの直後にインライン要素を置いたら<br> 正確には，ルール違反です!! </body> 2.5.2 ブロックタグによるスタイル指定 見た目は似ているdiv要素（divisionの略：区切りの意味）とp要素 これまで出てきたサンプルで以下のように変更してみる。 <p> ⇒ <div> </p> ⇒ </div> ただし，div要素は区切りという意味しか持っていないので， きちんと段落を分けるp要素を使うほうが良い。 【注意】一般的な文章にはp要素を使おう!! 2.5.3 spanタグの使用 ■インライン要素の一部にスタイルを指定 <p align="left"> 大正末期から昭和初期にかけ，<BR> 雑誌「童話」,「赤い鳥」,「金の星」に投稿して，<BR> <span style="border:5px solid #FF7777;"> 若き動揺詩人の中の巨星</span>と賞賛されたが，<BR> 26歳の若さでこの世を去った。<BR> </p> 2.6 特殊文字 2.6.1 実体参照 2.6.2 実体参照の例 2.6.3 半角スペースの連続 2.6.1 実体参照 HTMLのマークアップに使用される特殊な文字を使いたい 実体参照を使う 文字 “ & < > (半角スペース) … 実体参照 " & < > … 実体名の意味 quotation mark ampersand less-than sign greater-than sign non-break space 三点リーダ c © 著作権マーク R ® ™ ♥ 登録商標 商標 ハート TM d 2.6.2 実体参照の例 雑誌"童話",<赤い鳥><BR> ©Yutaka Shirai, 2010.<BR> 2.6.3 半角スペースの連続 今回のテーマは 童話 です<BR> 2.7 その他 2.7.1 連絡先 2.7.2 単語の省略形を表示 2.7.1 連絡先 <address>お問合せはスッチーまで： <a href="mailto:[email protected]">[email protected] </a></address> 2.7.2 単語の省略形を表示 Webページは<abbr title="Hyper Text Markup Language">HTML </abbr>で作成されている カーソルをHTMLのところに 移動するとフルスペルが表示される Hyper Text Markup Language
© Copyright 2024 ExpyDoc
