Ⓒ2008 E.Moriya HTML概論 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
Ｗｅｂページ記述用言語 ＨＴＭＬ XML （1998年 XML 1.0, 2001年 XHTML 1.1） HyperText Markup Language タグ（命令を< >で括って表す）を使って記述する <タグ名> タグの対象範囲 </タグ名> W3C (WWW Consotium, 1994)が仕様を認定 1997年 HTML 4.0 1999年 HTML 4.01 XML （1998年 XML 1.0, 2001年 XHTML 1.1） eXtensible Markup Language ユーザ独自のタグを作れる HTML 4.0 はXHTML 1.0へリフォーム (HTMLよりは文法が厳密) ブラウザが対応していないとダメだが、現状は混乱状況 → http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20363641,00.htm 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
HTMLファイルの基本構造 <html> <head> ここにはヘッダ情報を書く <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/loose.dtd”> ・・・ 文書型の定義 <html> <head> ここにはヘッダ情報を書く <title> ページタイトル </title> </head> <body> <h1> 表題大見出し </h1> メインコンテンツをここに書く <a href=“http://www.edu.waseda.ac.jp/~moriya/”> リンク </a> <img src=“moriya_lab.gif”> ・・・ 画像ファイルの参照 </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
文書型定義と文書型宣言 ＤＴＤ （Document Type Definition） 使用する要素や属性の特色や用法を定義する 文書型宣言 使用する要素や属性の特色や用法を定義する HTML 4.01 strict DTD 最も厳密。非推奨の要素や属性は排除。フレームも禁止。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> HTML 4.01 Transitional DTD 非推奨要素・属性を含む。インラインフレームのみ。将来のバージョン改定への移行用。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/loose.dtd”> HTML 4.01 Frameset DTD Translational DTDにフレームを加えたもの。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/frameset.dtd”> 文書型宣言 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> ブラウザごとに、文書型宣言の有無に従って、標準準拠モード、旧バージョン互換モード、準標準モードといった表示モードを備えている。 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
前のスライド通りだと以下のように表示される 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
修正して（要素の属性を変えて）みよう <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <!-- ヘッダ情報をここに書く --> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="author" content="守屋悦朗"> <meta name="keyword" content="情報数学III"> <title> ページタイトル </title> </head> <body background="bg_moriya.gif"> <h1 style="color:blue"> 表題大見出し </h1> メインコンテンツをここに書く <br> <img src="moriya_lab.gif" width="300" style="align:right"> <!-- 画像ファイル（これ自体はコメント）--> <a href=“http://www.edu.waseda.ac.jp/~moriya/”>守屋研究室へのリンク</a> </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
どこがどう変わったか？ 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
どこから発信する？ プロバイダー（ＩＳＰ） Webサーバー 外から見た置き場所（URL） WWWサーバーの提供 Webサーバー WWWサーバー、htmlサーバーともいう ブラウザからのリクエストに応じてhtmlファイルや画像データを送信する（プロトコルはhttp）常駐プログラム 代表的ウェブサーバー Apache, IIS, CERN Http 外から見た置き場所（URL） http://www.edu.waseda.ac.jp/~ﾕｰｻﾞID/ サーバー上の置き場所（ファイルシステム上の或るディレクトリ） /home/student/ﾕｰｻﾞID/public_html/ 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
何を使って書く？ エディタ テキストエディタ ワープロソフト HTMLエディタ htmlまたはhtmファイルとして保存 Emacs, 秀丸, Jedit, メモ帳, SimpleText, ・・・ ワープロソフト ＷＯＲＤ, 一太郎, ワードパッド, ・・・ 癖あり、最適でないソースを生成 HTMLエディタ 専用ソフトなので簡単、高機能 フリーソフト（タグ入力支援ソフト） TTT editor, ez-HTML, ・・・ 市販ソフト（ホームページ作成ソフト） FrontPage 2000, Visual Page 2.0, DreamWeaver 2, ホームページ・ビルダー 2000, HOTALL Ver5.0, Adobe PageMill 3.0 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
書いたらどうする？ ブラウザで見て確認/修正 ウェブサーバーにアップロード 公開前にオフラインでブラウザによりファイルを開く FTP（ファイル転送） サーバー側にはFTPサーバー 送信側にはFTPクライアントソフト FFFTP, WinSCP, NextFTP, 小次郎, ・・・ パーミッションの設定 rwx（読み込み・書き込み・実行） 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
自分のトップページを作ってみよう 今後半年間、この授業で使っていく レポートの提出用として・・・ プログラミングに関連して・・・ 提出＝自分のＨＰへアップロード 他の受講者からも見える → 相互評価 プログラミングに関連して・・・ Javaアプレットによる描画 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
基本タグを使ってみる トップページ メニュー項目 いろんなタグ（要素）を使ってみる レイアウト、タイトル画像 はじめは凝らないシンプルなものを（フレームは使わない） メニュー項目 情報数学Ⅲ（URLを指定する） その他は自由 いろんなタグ（要素）を使ってみる http://www.tagindex.com/ 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
まず、以下のファイルをもとに・・・ 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <title> 山田太郎のホームページ トップページ </title> </head> <body> <hr> <h1 align="center" style="color:#ff8844"> 山田太郎のホームページ</h1> <!-- <div align="left" style="color:black; font-size:medium"> --> <p align="right">2008年6月23日</p> <p align="center" style="background-color: #eeeeff; font-size:xx-large; border:solid"> 山田太郎のページへ ようこそ！ </p> これは<span style="color:blue; font-weight:bold">情報数学Ⅲ</span>用のページです。１行に収まらないくらい長い文章をつづけて書いてみよう。どのように表示されたか？半角スペースと全角スペースを入れてみよう。どのように表示されたか？ <br> ここで改行した。 <p> 別の<span style="color:red">パラグラフ</span>の始まり。パラグラフの前は１行空く。 <!-- </div> --> </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
タグの基礎知識（１） 開始タグと終了タグの組で範囲を指定する <要素名> ・・・要素の内容・・・ </要素名> 要素名等は大文字でも小文字でもよい（HTMLの後継バージョンともいえるXHTMLでは小文字を使う） 属性を指定できる要素もある <div style=“color:・・・; font-size:・・・; font-weight:・・・”> 要素名 属性 属性の値 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
タグの基礎知識（２） コメント タグは入れ子状に書いてよい。 <dvi style=“…”> <span style=“…”> <b> ・・・</b> <p> ・・・ </p> </span> </div> コメント <!-- コメント --> 半角空白文字、改行コード、タブコードは無視される。 強制的に改行するには <br> や <p> を使う。 特殊文字 < → < > → > & → & “ → " 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<html> HTMLファイルであることの宣言 <head> ヘッダー情報の記述 (サーバー等が利用) <title> ページタイトル (headタグの中に記述) <body> ページ内容の指定（背景、文字色、リンク等） background=“背景用画像ファイル名” bgcolor=“背景色(RGB16進数6桁)” text=“文字色(RGB16進数6桁)” link=“リンクの色(RGB16進数6桁)” vlink=“アクセス済みリンク色(RGB16進数6桁)” bgproperties=“fixed” 背景が文字と一緒にスクロールしない （参考）カラーリファレンスサイト http://www.zspc.com/color/index.html <h1> ～ <h6> 見出し 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
こんなタグを使ってみよう <font size=“サイズ” color=“色”> フォントの色、サイズ <a href=“URLやファイル名”> リンクを張る <img src=“ファイル名”> 画像を表示する <ol> <ul> <li> リストとして列挙する <center> <pre> 中央に表示、文字通りに表示 <p> <br> パラグラフ、改行 <u> <sub> <sup> <b> <i> <em> <strike> <s> アンダーライン、上下添え字、太字、イタリック（強調）、消去線 <table> <caption> <tr> <th> <td> 表をつくる を付けたタグはＨＴＭＬ４．０１では非推奨 とされている 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
ブロック要素とインライン要素 ブロック要素 インライン要素 見出しや段落など、文書の骨組みとなる要素 このタイプの要素は横幅いっぱいの領域を持つ 要素の前後には自動的に改行が入る address, blockquote, center, div, dl, form, h1～h6, hr, frame, ol, p, pre, table, ul など インライン要素 文字の色や大きさなど、文章中の一部として扱われる要素 このタイプの要素は行の一部として扱われる 要素の前後に改行は入らない br, em, font, nobr, small, span, strike, strong, sub, sup, u など 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
タグいろいろ（１） <font> フォントの指定（サイズ、色） size=“サイズ（1～7）” color=“背景色(RGB16進数6桁)” 非推奨なので代わりに <span style=“…”> を使う <b> 太字 <i> イタリック <em> 強調文字（イタリック） <u> アンダーライン <s> 削除線付き文字（strike） <sub> 下付き添え字 <sup> 上付き添え字 <tt> タイプライター文字 <blink> 点滅反転文字 （注）ブラウザによってはサポートされていないものあり。 は非推奨タグ。 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
タグいろいろ（２） <div> レイアウト align, color などの属性あり <p> 段落 align=“center/left/right” color=“背景色(RGB16進数6桁)” <div> レイアウト align, color などの属性あり <center> 中央揃え → 非推奨なので代りに <div align=“center”> を使う <br> 改行 <nobr> 改行禁止 <pre> 文字通り（タグと解釈しない）表示 <hr> 水平区切り線 width=“幅” ピクセル数または％ align=“center/left/right” size=“太さ” ピクセル数 noshade 影を付けない 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
align=“top/bottom/middle/center/left/right” alt=“代替文字列” width=“幅” href=“URLまたはﾌｧｲﾙ名” href=“#マーカー名” マーカー名の引用 name=“マーカー名” マーカー名の指定 mailto:メールアドレス <img> 画像の表示 src=“画像ﾌｧｲﾙ名” align=“top/bottom/middle/center/left/right” 画像に対する文字列表示位置 alt=“代替文字列” width=“幅” height=“高さ” border=“境界線の太さ” hspace=“ピクセル数” 水平方向の余白 vspace=“ピクセル数” 垂直方向の余白 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<ul> 行頭記号付きリスト <li> リストの項目 <dl> 定義型リスト <ul> type=“disk/circle/square” 行頭記号 <ul> <li> 項目内用 ・・・ </ul> <ol> 番号付きリスト type=“1/A/a/I/i” 数字のタイプ start=“開始番号” <li> リストの項目 type=“disk/circle/square” 行頭記号（数字のタイプ）の変更 value=“任意の番号” <dl> 定義型リスト <dl> <dt> 見出し <dd> 内容 ・・・ </dl> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
OL と UL 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<table> 表 align=“位置(left/right/center)” background=“背景画像ﾌｧｲﾙ名” border=“枠線の太さ” background=“背景画像ﾌｧｲﾙ名” bordercolor=“枠線の色” cellspacing=“セルの間隔” width=“表全体の横幅” height=“表全体の縦幅” align=“right/left(ﾃｷｽﾄの回りこみ)” <table align=“center” border=“1”> <caption>表のタイトル</caption> <tr> <th>見出し</th> <td>データ</td> ・・・ </tr> ・・・ </table> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<table align="center" border="1" style="color:blue"> <caption> <span style="font-weight:bold; color:red">表のタイトル</span> </caption> <tr> <th>見出し１</th> <td>データ１－１</td> <td>データ１－２</td> <td>データ１－３</td> </tr> <th style="padding-top:10px; padding-left:10px; padding-right:10px; align=center; color:#ff8844">見出し２</th> <td>データ２</td> align=center; width=100">見出し３</th> <td colspan="2" align="center">データ３－１</td> <td align="center" style="color:cyan">データ３－２</td> </table> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
Tableの作成 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<table>に関連するタグ th : table header（見出し名） align=“left/right/center” colspan=“縦にまたがるセル数” rowspan=“横にまたがるセル数” tr : table row (行の定義) td : table data (データエントリー) align=“left/right/center” bgcolor=“セルの背景色” <table> <tr> <th rowspan=“2”>見出し</th> <td align=“center”>データ</td> ・・・ </tr> ・・・ <tr> <th> </th> <td rowspan=“3” bgcolor=“aa8844”>データ</td> ・・・ </table> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
<meta> 文書内の情報の記述 <meta http-equiv=“Expires” content=“8/23/04”> <meta http-equiv=“Reply-to” content=“who@mail.jp”> <meta name=“description” content=“iモード”> <meta http-equiv=“Content-Type” content=“text/html” charset=shift_jis> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
他に、こんなタグも・・・ タグについてはここを見よ： http://www.tagindex.com/ http://heo.jp/tag/ 他に、こんなタグも・・・ タグについてはここを見よ： http://www.tagindex.com/ http://heo.jp/tag/ <applet> <area> <base> <basefont> <big> <blockquote> <button> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dl> <dt> <em> <embed> <filedset> <frame> <frameset> <h1> <ilayer> <ins> <isindex> <kbd> <label> <legend> <link> <listing> <map> <marquee> <menu> <nobr> <noembed> <noframes> <noscript> <object> <optgroup> <param> <plaintext> <q> <rp> <rt> <ruby> <samp> <script> <small> <strong> <tbody> <tfoot> <thead> <tt> <var> <wbr> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
フォーム作成に関するタグ フォームの中身を定義する部分 ・ 入力欄（１行）を作る <input type=“入力のタイプ（text/radio/checkbox/password/reset/submit 入力タイプは左から順に、文字列入力欄/ラジオボックス/チェックボックス/ パスワード入力欄/リセットボタン/送信ボタン）” name=“変数名” value=“初期値” size=“フィールドの幅” maxlength=“最大文字数”> ・ 複数行の入力欄を作る <textarea rows=行数 cols=１行の桁数 name=“変数名” wrap=“改行タイプ(hard/soft)”> </textarea> ・ 選択ボタンを作る <select name=“変数名”> <option value=“値１”> 選択肢１ ・・・ <option value=“値n”> 選択肢n </select> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
フォームの作成例 <form> <span style=“font-weight:bold; color:blue”>フォームの例</span> テキスト入力欄（1行）：<input type=“text” name=“text1”> テキスト入力欄（複数行）： <textarea rows=2 cols=20 name=“text1”> </textarea> パスワード入力欄： <input type=“password” name=“PWD”> ラジオボタン：<input type=“radio” name=“item” value=“1年生”>1年生 <input type=“radio” name=“item” value=“2年生”>2年生 <input type=“radio” name=“item” value=“3年生”>3年生 チェックボックス：<input type=“checkbox” name=“item” value=“1年生”>1年生 <input type=“checkbox” name=“item” value=“2年生”>2年生 リセットボタン：<input type=“reset” value=“リセット”> 選択メニュー： <select name=“性別”> <option value=“男”>男 <option value=“女”>女 </select> </form> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
form要素の表示のされ方 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
スタイルシート ＣＳＳ CSS (Cascading Style Sheet) CSS1 1996, CSSの基本 by W3C スタイルシート ＣＳＳ CSS (Cascading Style Sheet) HTMLからデザイン的な部分を分離して定義する CSS1 1996, CSSの基本 by W3C CSS2 印刷や音声を含む拡張 デザイン統一や変更が容易になる ＨＴＭＬでは記述できないこともできる： オーバーラインを引いたり、ルビを振る 空白を挿入する 背景と文字を重ねたり、背景をぼかす 文字をちぐはぐに並べる etc. 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
CSSの定義方法（その１） 「セレクタ」「属性」「値」の組 セレクタ｛属性：値｝ を次のように１つ以上、；で区切って並べて書く。 セレクタ｛属性：値｝ を次のように１つ以上、；で区切って並べて書く。 例 <h1>タグで書くタイトルを赤色にし、背景色を青色にする： h1 { color: #ff0000; /* 赤色 */ background-color:#0000ff”; /* 青色 */ } /* */ で囲んだ部分はコメントになる 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
CSSの定義方法（その２） class セレクタ 例 ．セレクタ｛属性：値｝ ．セレクタ｛属性：値｝ をのように、セレクタの前に「．」を付けて定義すると、html の中で class=“そのセレクタ名” のように引用して使うことができる（そのような効果が生じる）。 例 .aka-iro { font-color: #ff0000; /* 赤色 */ } と定義しておくと、 <div class=“aka-iro”> この部分の文字は赤色になる </div> のように使える。 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
CSSの属性の例 color 文字の色 background-color 背景色 font, font-family, font-size, font-weight, … フォント修飾 text-align テキスト位置 text-indent テキストの段付け text-decoration (underline, overline, blinkなど) テキストの修飾 white-space 空白 line-height 行の高さ height, width ボックスの高さと幅 margin, margin-top, margin-left, margin-right マージン padding, padding-top, padding-keft, padding-right ボックスの内容と枠までの距離 border, border-color, border-width, … 境界線の修飾 table-layout 表のレイアウト shadow 文字に陰を付ける list-style リストのスタイル など 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
ＣＳＳの定義方法 ＨＴＭＬへの組み込み方(1：ページ内に直接書く) <html> <head> <title>タイトル</title> <style type=“text/css”> <!-- div { background: #f0f0f0; border: #00ff88” 1px solid; div のスタイルの定義 } .ovrln { text-decoration:overline; クラスoverln の定義 --> </style> </head> <body> <div> ここに記述したものは上記divに設定したスタイルに従う </div> これは上に定義したovrlnを使ったオーバーラインのある数式の例です x=<span class=“ovrln”>y+<span class=“oveln”>(z+1)</span></span> 次のように直接タグ（要素）の中に書くこともできる w=<span style=“text-decoration:overline;”>u</span>+v </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
ＣＳＳの定義方法 ＨＴＭＬへの組み込み方(2：外部のファイル内に記述) ﾌｧｲﾙ example.css div { background: #f0f0f0; border: #00ff88” 1px solid; divのスタイルの定義 } .ovrln { text-decoration:overline; クラスoverlnの定義 利用するとき <html> <head> <title>タイトル</title> <link rel=“stylesheet” type=“text/css” href=“example.css”> </head> <body> <div> ここに記述したものは上記divに設定したスタイルに従う </div> これは上に定義したovrlnを使ったオーバーラインのある数式の例です x=<span class=“ovrln”>y+<span class=“oveln”>(z+1)</span></span> 次のように直接タグ（要素）の中に書くこともできる w=<span style=“text-decoration:overline;”>u</span>+v </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ <html> <head> <title>タイトル</title> <style type="text/css"> <!-- div { background: #f0f0f0; border: #00ff88 3px solid; margin-left: 50px; padding-top: 0px; padding-left: 10px; } .ovrln { text-decoration: overline; --> </style> </head> <body> <div> div と /div の間に記述したものは上記 div に設定したスタイルに従う。<p> これは上に定義したovrlnを使ったオーバーラインのある数式の例です。<br> x = <span class="ovrln">y + <span class="oveln">(z+1)</span></span> <p> 次のように直接タグの中に書くこともできる：<br> w = <span style="text-decoration:overline;">u</span> + v </div> </body> </html> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
前シートの記述は次のように見える 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
補足 div 要素と span 要素 例 これらの要素（タグ）で囲まれた内容は、ひとつのグループとして操作することができる <style type=“text/css”> <!- - <div> div { ここの背景色は”#f0f0f0”色で background: #f0f0f0; 境界色は”#00ff88”で、solid(実線) border: #00ff88” 1px solid; とスタイルが定義されていると、 になる } </div> --> </style> 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ
参考サイト http://www.tagindex.com/stylesheet/index.html タグについてはここを見よhttp://www.tagindex.com スタイルシートについても上記サイトの http://www.tagindex.com/stylesheet/index.html を参考にせよ 2018/9/17 Ｉｎｆ．Ｍａｔｈ．ＩＩＩ