2/9 HTML入門（２）

フレームを作成する

・フレームセットページ　…フレームの枠組みを定義するWebページ。
　　　　　　　　　　　　　　　　文書型宣言とHTML要素HEAD要素を記述する。
・＜frameset＞
　　rows　→フレームを横に分割し、高さを上から順に指定する。
　　cols　→フレームを縦に分割し、幅を左から順に指定する。
　　name　→フレームに名前を設定する。
　　src　→フレームに表示するファイルを指定する

＜!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.0 Frameset//EN"＞
＜html＞
＜head＞＜title＞複合フレーム＜/title＞＜/head＞
＜frameset rows="*,80"＞
　＜frameset cols="30%,*"＞
　＜frame name="contents" src="contets.html"＞
　＜frame name="file" src="file.html"＞＜/frameset＞
＜frame name="address" src="address.html"＞
＜/frameset＞
＜/html＞


あとは各ページを作るだけ☆

2/9 HTML入門

遅刻しませんでした（ﾜﾗ



文字を強調する

・＜em＞　…文字列を強調する。斜体で表示される。
・＜strong＞　…文字列を強調する。太字で表示される。


行替えとブロック揃え

　　align（アライン）　→行揃えを指定する。
　　　　　　　　　　　　　　「right」右「center」中央「left」左

＜h3 align="left"＞左揃え＜/h3＞
＜p align="right"＞右揃え＜br＞文章が右に揃います＜/p＞

・＜div＞　…複数の要素をグループ化したり、
　　　　　　　任意にブロックレベルの範囲を設定する。

＜div align="right"＞
＜h2＞divで揃える＜/h2＞
＜p＞divで揃える＜br＞ブロック全体を右に揃えます＜/p＞
＜p＞＜img src="log.gif"＞＜/p＞
＜/div＞


リンクの設定

・＜a＞
　　href（ハイパーリファレンス）　→リンク先を設定する。
　　target　→リンク先の内容をどのウインドウで読み込むかを指定する。
　　　　　　　　「_self」はリンクのあるウインドウと同一のウインドウ
　　　　　　　　にリンクを読み込む。
　　　　　　　　「_blank」は新しいウインドウにリンク先を読み込む。
　　　　　　　　targetを指定しなければ「_self」として処理される。

＜a href="london1.html" target="_self"＞＜みどころ１＞
＜br＞
＜a href="london1.html" target="_blank"＞＜img src="nextbtn.gif" alt="次へ" width="37" height="25"＞＜/a＞
＜br＞
＜a href=mailto:info@***.**"＞電子メールはこちらへ＜/a＞
＜a href="http://www.yahoo.co.jp/"＞yahoo＜/a＞


表を作成する

・＜table＞　…その範囲が表であることを示す。
　　border　→セルの間に引かれる罫線を指定する。
　　cellspacing　→表の外枠線とセル、及びセルとセルの間隔を
　　　　　　　　　　　　ピクセルか％で指定する。
　　cellpadding　→セルの罫線とセルの内容との間隔をピクセルか％で
　　　　　　　　　　　　指定する。
・＜th＞　…行や列の見出しを定義する。太字でセンタリングされて
　　　　　　　表示される。
・＜tr＞　…行を定義する。
・＜td＞　…表に含まれる個々のセルを定義する。
　　colspan（コルスパン）　→そのセルから指定された数だけ
　　　　　　　　　　　　　　　　　右方向のセルを連結する。
　　rowspan（ロウスパン）　→そのセルから指定された数だけ
　　　　　　　　　　　　　　　　　下方向のセルを連結する。
　　width　→セルの幅を指定する
　　height　→セルの高さを指定する
　　bgcolor　→表の背景色を指定する。
　　valign　→セルの内容の垂直方向を指定する。
　　　　　　　　「top」上端「middle」中央「bottom」下端
　　nowrap　→指定改行しないように指定する。
　　※＆ｎｂｓｐ； 　→空白。

＜html＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html,charset=shift_JIS"＞
＜title＞DTPの単位＜/title＞＜/head>
＜body＞
＜table border="5" cellspacing="5" cellpadding="5"＞
＜tr＞
＜th colspan="2" rowspan="2"＞ ＜/th＞＜th colspan="3"＞水平位置＜/th＞＜/tr＞
＜tr＞
＜th width="50"＞左＜/th＞
＜th width="50"＞中＜/th＞
＜th width="50"＞右＜/th＞＜/tr＞
＜tr align="center"＞
＜th rowspan="3"＞垂直＜br＞位置＜/th＞
＜th height="50" bgcolor="#ccccff"＞上＜/th＞
＜td align="left" valign="top"＞●＜/td＞
＜td align="center" valign="top"＞●＜/td＞
＜td align="right" valign="top"＞●＜/td＞＜/tr＞
＜tr＞
＜th height="50"bgcolor="#ccccff"＞中＜/th＞
＜td align="left" valign="middle"＞●＜/td＞
＜td align="center" valign="middle"＞●＜/td＞
＜td align="right" valign="middle"＞●＜/td＞＜/tr＞
＜tr＞
＜th height="50"bgcolor="#ccccff"＞下＜/th＞
＜td align="left" valign="bottom"＞●＜/td＞
＜td align="center" valign="bottom"＞●＜/td＞
＜td align="right" valign="bottom"＞●＜/td＞＜/tr＞
＜/table>

＜table border="8" cellspacing="8" cellpadding="8"＞
＜tr align="center" valign="bottom" height="100"＞
＜th nowrap valign="middle"bgcolor="#ccccff"＞一行一括指定＜/th＞
＜td width="50"＞●＜/td＞＜td width="50"＞●＜/td＞
＜td width="50" align="left"＞●＜/td＞＜/tr＞
＜/table＞
＜/body＞
＜/html>


長いから続く。。。

2/5 HTML入門

初手から遅刻したので、最初の方は割愛。。


ＨＴＭＬ＝HyperText Markup Language

・要素　…段落や見出し、表、リストなどのWebページを構成する単位
・タグ　…要素を定義するときに記述する記号。「<>」で囲まれた部分。
　　　　　「<>」の中には要素の意味を表す「要素名」が入る。
　　　　　タグには「開始タグ」と「終了タグ」があり、その２つの間に
　　　　　「内容」を囲む。終了タグは要素名の前に「/」を入れる。
　　　　　※例外あり
・属性　…要素に追加できる詳細設定。
　　　　　属性の意味を表す「属性名」を開始タグの要素名の後ろに入れ、
　　　　　間に半角スペースを入れる。
・HTMLファイルの名前やタグは半角英数小文字で。


Webページの構造

・文書型宣言
　…WebページがどのHTMLバージョンで記述されているかを宣言している

＜HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"＞

・＜head＞　…Webページに関する情報部分。
　　　　　　　　タイトルや文字コードなど。ブラウザには表示されない。
・＜title＞　…ブラウザのタイトルバーなどに表示される。

＜html＞
＜head＞
＜meta http-equiv=Content-Type" content="text/html,charset=Shift_JIS"＞
＜title＞HTMLの仕組み＜/title＞
＜/head＞
＜/html＞

・＜body＞　…実際にブラウザに表示される内容。
・＜h1＞　…その部分が見出しであることを示す。
　　　　　　　６段階あり、h1が一番上位、以下数字が大きくなるにつれて
　　　　　　　見出しレベルが下がる。

＜h1＞見出しのレベル１＜/h1＞

・＜p＞　…その範囲が１つの段落であることを示す。
　　　　　　範囲の前でテキストが改行され、さらに１行分空白が入る。
・＜br＞　…ブラウザ上で改行する。空要素なので終了タグはない。
・＜hr＞　…表示領域の幅いっぱいに罫線を引く。


インターネットで扱う画像

・GIF形式　…256色。特定の色を透明にできる。
　　　　　　　　複数の画像をアニメーションのように表示できる。
　　　　　　　　拡張子「.gif」
・JPEG形式　…約1670万色。写真に使用するとよい。
　　　　　　　　　画質を下げることでファイルを小さくできる。
　　　　　　　　　拡張子「.jpg」
・PNG形式　…約280兆色。新しい形式。特定の色を透明にできる。
　　　　　　　　　拡張子「.png」


画像の挿入

・＜img＞　…Webページに画像を挿入する。
　　src　→画像ファイルを指定する
　　alt　→画像の代わりのテキストを指定する
　　width　→画像の幅を指定する
　　height　→画像の高さを指定する

＜h2＞＜img src="logo.gif" alt="ロゴ" width="240" height="68"＞気楽に歩く伝統の街＜/h2＞
＜p＞＜img src="photo_1-a.jpg" alt="ロンドン" width="251" height="201"＞＜/p＞


文字色の指定

・＜span style＞　…テキストの色を指定する。

＜h1＞＜span ＞ＬＯＮＤＯＮ＜/span＞＜/h1＞
＜h3＞＜span ＞ＬＯＮＤＯＮ＜/span＞＜/h3＞


背景画像の指定

・＜body background＞　…ページ全体の背景画像を指定する。

＜body background="bg1.gif"＞