授業 第１回
目次
１、タグとは
２、基本的なタグの説明
３、一番基本的なHTMLタグ
４、 文書型と文字コードの指定
５、基本的タグ
＊＊＊＊ 導入 ＊＊＊＊＊
なぜXHTMLなのか？ ＞ 間違いを探しやすく、きれいな文書を作ることが出来る＝自分の意図通りの表示をさせることができる。CSSやJavascriptも自分の思い通りの動作をすることが多く、後から苦労しなくても良い。「後のケンカは先にしておこう！」
XHTMLは携帯電話の標準である ＞ docomo,au,softbankの携帯は、普通のHTMLだと別々に書かなければならないが、XHTMLだと、メーカーや機種に関係なく、表示できるので、手間が省ける。
1. ブラウザについて Firefox（Firebugを導入します）か、Safariをインストールして使用してください。この授業で使うxhtmlはIE8以下では、動作しません。
2. デバッグについて （Firebugを導入） 。間違ったXHTML文は、ブラウザが解釈できず、表示されない。エラーメッセージを良く読み、間違っている場所が無くなるまで、ひたすらなおす。エラーメッセージは、Firefoxが日本語。
3．エディタについて(viエディタの使用）。サーバーで直接編集できるので、アップロードの手間がかからない。端末はpoderosaが優れている。puttyでも良いが、文字コードの設定が面倒。端末の基本コマンドを思い出す。
4．ファイルの保存先（public_html/tomcat内への保存）mobileというディレクトリを作り、そこに保存。
5．ファイル名のつけ方（日本語のファイル名は付けない。全角文字（マルチバイト文字）を使用してはいけない。
6. HTMLタグ辞典の用意（授業の時、忘れずに携帯すること）
7．画像について（あまり大きな画像を用いない。サイズをなるべく小さくすること。altを必ず付けること）大きくても500px × 350px を超えてはいけない。画像サイズは最大でも500KB。1MBなんて大きさは、とんでもない大きさで、見るひとに迷惑をかけるのでやめてください。
8. xhtml文法チェッカーについて 「WWW Consortium」（W3C＝インターネットの仕組みを考えた団体)の提供する文法チェッカーで、チェックしたいurlを入力してチェックする。この授業で書いたXHTMLは必ず、このチェッカーにかけて、エラーがなくなるまで、チェックして下さい。正しいXHTML文を書くと、以下のアイコンがもらえます。アイコンの数を成績に考慮します。
1、タグとは何か？
html文書（htmlソース）は、タグ（要素とも言う）と言うものを使って書いていきます。
< と > で囲まれたものをタグと言います。 <タグ名>のようにタグを書きます。タグは基本的に開始タグ（始まりのタグ）と終了タグ（終わりのタグ）に分かれています。 開始のタグは<タグ名>のように書き、終了タグは</タグ名>開始タグと終了タグでひとつのセットになります。 <> は必ず半角文字で書いてください。開始タグと終了タグの間に内容を書いていきます。
タグによっては、<タグ名 />の形になるものがあります。間に内容を書く必要が無いタグに使われます。
例
<タグ名>この囲まれた部分が内容になります。</タグ名>
<タグ名 />
2 、基本的なタグの説明
基本的な４つのタグを説明します。この4つのタグは必ずhtml文書に必要なものなので確実に覚えてください。
1.<html></html> このタグは、「これはhtml文書ですよ」と宣言しているタグです。
2. <head></head> このタグの中に基本的なページの情報を書いていきます。
3.<title></title> このタグは、ページのタイトルを指定します。
4.<body></body> 実際にブラウザの中に表示させる内容をこの中に書きます。
注意
3、一番基本的な、html文書
書き方
タグは「始まり」と「終わり」が必ずある。「始まり」（<タグ>）と「終わり」（</タグ>または<タグ />）を必ず確認し、間違えないように注意すること。なお全角スペースを決して混ぜないこと。
HTML文書は、必ずタマネギの皮のように、内容を「包む」構造になっている。
例
<html> <head> <title>タイトルを指定する</title> </head> <body> ここに内容を書く </body> </html>
４、 文書型と文字コードの指定
この授業ではxmlの一種である「xhtml」を使ってページを作ろうと思います。xhtmlは規則が厳しく、間違えるとブラウザが表示しません。なぜこれを使うのか、というと、
＊「Javascript」との相性が良い ＊「携帯電話」のhtmlはxhtmlで書かなければならない
という理由からです。間違いを探しやすい、というのも理由ですね。
例
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>タイトルを指定する</title>
</head>
<body>
ここに内容を書く
<![CDATA[
この部分は、表示されません
]]>
</body>
</html>
課題１.
上のxhtml文をメモ帳で作成し、sample1.htmlという名前でサーバーに保存しなさい。
次に、ブラウザを開き、保存したxhtml文書が、どのように表示されるか、確認しなさい。
５、基本的タグ（bodyの間に書く）
... <body> <タグ 属性１="値" 属性２="値">内容</タグ> </body> ....
準備
1.新しく基本xhtml文書を作り、sample2.htmlという名前で保存しなさい。（sample1.htmlをコピーし、名前を変えても構わない）
2.説明を聞きながら以下の「例文」をsample2.htmlのbody要素の中にdivを追加し、その中に一つづつ書いてください。
3.説明を聞きながら、保存したXHTML文書が、どのように表示されるか、ブラウザで確認しなさい
課題２.
XHTML辞典で確認しながら、以下の「例文」を、<body>の<div>の中に書き、どのように表示されるか、確認してみよう。
レイアウト
| タグ名 | 例文 |
| 改行<br /> | 次に改行します<br />
|
| 区切り線<hr /> | 区切り線を入れます<hr /> |
| 領域<div><span> | <div>div領域です</div> |
| 段落<p> | <p>段落です</p> <p>段落です</p> |
文字
| タグ名 | 例文 |
<h1>から<h6>まで |
<h1>見出しの書式です</h1> |
| 太字<b> | <b>この部分が太字になります</b> |
| イタリック<i> | <i>この部分がイタリック体になります</i> |
| 下線<u>（廃止） XHTMLでは廃止されました | CSSのtext-decorationで設定 |
| 取り消し線<s>（廃止） XHTMLでは廃止されました | CSSのtext-decorationで設定 |
リンクタグ
＊例文
ページ内へのリンク <a href="#sss">SSS地点でいきます</a> tttttttttttttt<br /> ttttttttttttt<br /> tttttttttttt<br /> tttttttttttt<br /> tttttttttttt<br /> .... できるだけたくさん<br />を入れて下さい....... <a name="sss">ここがSSS地点</a>
画像表示（画像はxhtmlファイルのある場所にアップロードして下さい）
<img src="" alt="" />
＊例文
<img src="test.jpg" alt="テストの画像です" />
記号付きリストを表示する
ul要素は囲んだ部分のリストの種類が記号であることを意味します。使い方は、ol要素と同じです。
<ul> <li>ここは一つ目のリストになります。</li> <li>ここは二つ目のリストになります。</li> <li>ここは三つ目のリストになります。</li> </ul> <ol> <li>ここは一つ目のリストになります。</li> <li>ここは二つ目のリストになります。</li> <li>ここは三つ目のリストになります。</li> </ol>
表を作る（デザインには使用しないこと）
表はページデザインには使用しないでください！表はデータを表示するためのものです。最近ではページのデザインに使用することが嫌われます。ページデザインは後から説明するCSSで出来ますので、それを使って下さい。
また、携帯電話で表は表示出来ないものもあります。
表を作るときに必要な最低限の３つの要素を説明します。
<table>～～～</table>
この要素で囲んだ部分はテーブル（表）であることを宣言しています。
<tr>～～～</tr>
table要素の中に書きます。表の横一列を表しています。
<td>～～～</td>
tr要素の中に書きます。この要素で囲んだ部分は表の１つの部屋を表していて セル といいます。
これらの要素を下のように使います。
＊例文
<table border="1">
<tr> <td>ここは一行目の１つ目のセルになります。</td> <td>ここは一行目の2つ目のセルになります。</td> </tr> <tr> <td>ここは２行目の１つ目のセルになります。</td> <td>ここは２行目の2つ目のセルになります。</td> </tr> <tr> <td colspan="2">ここは３行目の１つ目のセルになります。</td> </tr> </table>
フォームの表示
---４月１２日----
<form action="処理するurl" name="フォームの名前" method="送信形式">
<fieldset> <legend>>グループ名</legend> ... 内容 ... </fieldset>
</form>
formタグは、データをサーバーに送信したりするときの部品を表示します。送信形式は、 get か post のどちらかを指定します。getはurlの後ろに ? を付けてデータを送信する形式で、postは一度に多くのデータを送信するときに使います。これらは後から勉強する、JSPを作るときによく使います。
以下の<input>要素などは、<form action=""><fieldset>～</fieldset></form>の間に書きます。
なお、action属性は必須です。inputなどは<fiealdset>の間に書くことになっています<legend>はグループのタイトルなので必要です（legendの前には、何も書いてはいけません）。（４月１３日修正）
input要素の type属性 をbuttonに指定するとボタンを作ることができます。 value属性 には、ボタンのラベルを指定します。input要素には終了タグ />を使用すること（忘れないように！）
＊例文
<form action=""> <fieldset> <legend>ボタン</legend> <input type="button" value="ボタンです" /> </fieldset> </form>
textarea要素で複数行のテキストエリアを作ることができます。 rows属性 で高さを、 cols属性 で横の幅を指定することができます。これらの属性値は半角数字で指定します。
<form action=""> <fieldset> <legend>グループ名</legend> <textarea rows="4" cols="30">テキストエリアを作りました</textarea> </fieldset> </form>
input要素の type属性 をtextに指定すると、１行だけのテキストエリアを作ることができます。 size属性 でテキストエリアの幅を指定することができます。属性値は半角数字で指定します。
<input type="text" size="50" value="1行だけのテキストエリアです" />
input要素の type属性 をpasswordに指定すると、テキストエリアにパスワードを入力できるようになります。 size属性 でテキストエリアの幅を指定することができます。属性値は半角数字で指定します。
<input type="password" size="50" />
select要素で囲まれた部分は、その部分がメニューであることを表します。その中にoption要素を複数置くことによってメニューを作ることができます。下のように使います。
<select> <option>めにゅー１</option> <option>めにゅー２</option> <option>めにゅー３</option> <option>めにゅー４</option> <option>めにゅー５</option> </select>
好きな食べ物は？<br /> <input type="checkbox" id="c1" /><label for="c1">リンゴ</label> <input type="checkbox" id="c2" /><label for="c2">バナナ</label> <input type="checkbox" id="c3" /><label for="c3">ブドウ</label> <input type="checkbox" id="c4" /><label for="c4">メロン</label> <input type="checkbox" id="c5" /><label for="c5">スイカ</label>
あなたの年齢は？<br /> <input type="radio" id="r1" /><label for="r1" >１０代</label> <input type="radio" id="r2" /><label for="r2">２０代</label> <input type="radio" id="r3" /><label for="r3">３０代</label>
フォームの書き方（例 以下を参考にフォームを作ってみてください
<form action=""> <fieldset>
<legend>ボタンやテキスト</legend> <input type="button" value="ボタンです" /><br /> <textarea rows="4" cols="30">テキストエリアを作りました</textarea><br /> <input type="text" size="50" value="1行だけのテキストエリアです" /><br /> <input type="password" size="50" /><br /> </fieldset> <fieldset>
<legend>ドロップダウンボックス、チェックボックス、ラジオボタン</legend> <select> <option>めにゅー１</option> <option>めにゅー２</option> <option>めにゅー３</option> <option>めにゅー４</option> <option>めにゅー５</option> </select><br /> 好きな食べ物は？<br /> <input type="checkbox" id="c1" /><label for="c1">リンゴ</label> <input type="checkbox" id="c2" /><label for="c2">バナナ</label> <input type="checkbox" id="c3" /><label for="c3">ブドウ</label> <input type="checkbox" id="c4" /><label for="c4">メロン</label> <input type="checkbox" id="c5" /><label for="c5">スイカ</label><br /> あなたの年齢は？<br /> <input type="radio" id="r1" /><label for="r1" >１０代</label> <input type="radio" id="r2" /><label for="r2">２０代</label> <input type="radio" id="r3" /><label for="r3">３０代</label> </fieldset> </form>
課題３.
＊準備 今後、課題は、public_html/tomcat/mobile2011で作成、保存します。
まず以下の操作を実行し、tomcatから見られるようにします。
hanrin@ushijima:~> cd public_html/tomcat/
hanrin@ushijima:~/public_html/tomcat> mkdir mobile2011
hanrin@ushijima:~/public_html/tomcat> cd mobile2011/
hanrin@ushijima:~/public_html/tomcat/mobile2011>
以後は、http://175.41.242.121/tci10xxxx/mobile2011/profile.html
のように、チルダ（〜）無しでアクセスします。
＊テンプレートの作成。
まず、内容を入れるための枠組（テンプレート）を作成します。
１、ロゴ（タイトル画像）
２、メニュー（リンクなど）
３、コンテンツ（本文）
４、フッター（著作権情報など）
の４分構成で作ることが多いです。
----- コード見本 ------- (template.html)
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>ページタイトル</title> </head> <body> <![CDATA[ 全体を囲むdiv ]]> <div> <![CDATA[ ロゴ画像など]]> <div> ロゴ </div> <hr /> <![CDATA[ リンクメニューなど]]> <div> メニュー </div> <hr /> <![CDATA[ここからが本文になります ]]> <div> コンテンツ </div> <hr /> <![CDATA[ 著作権情報や、作成者の名前など]]> <div> フッター </div> </div> </body> </html>
上記の「ひな形」（テンプレート）をtemplate.htmlという名前でpublic_html/tomcat/mobile2011に保存しなさい。（何回も使うので、間違えないように）
課題４.
1.出来上がったtemplate.htmlをコピーし、profile.htmlという名前に変更しなさい。
2.profile.htmlを使って、自分のふるさと紹介のページを作りなさい（<div><img><ul><li>などを使います）。出来上がるページは単純になりますが、tableを使ったりしないで下さい。後からCSSを使って直しますので、今はそのままにしておいて下さい。
ロゴ、メニュー、コンテンツ、フッターの部分に、以下の要素を書いて完成させてください。
たとえば、砺波市の場合
１、私のふるさと紹介（ロゴ画像） ２、他のページへのリンクなど（メニュー） ３、本文（コンテンツ） 場所 人口 交通 高速道路、鉄道（画像付き） 名所 ５、６カ所（画像付き） 主な店 アピタ ４、フッター（著作権情報 ＝学籍番号）
のように作る。