Ver. 15.06 HTML概論 Inf. Math. 5.

ver HTML概論 Inf. Math. 5

Ｗｅｂページ記述用言語ＨＴＭＬ XML （1998年 XML 1.0, 2001年 XHTML 1.1）
HyperText Markup Language タグ（要素とも言う。命令を<　>で括って表す）を使って記述する：　　　　　　　　　　　　　　　　　　<タグ名> 　タグの対象範囲　 </タグ名> W3C (WWW Consotium, 1994)が仕様を認定 1997年　HTML 4.0 1999年　HTML 4.01 2008年　HTML5 仕様草案（2014年公開が目標） 2014年　HTML5.1草案の公開（2016年に勧告の予定） XML　　（1998年 XML 1.0, 　2001年 XHTML 1.1） eXtensible Markup Language ユーザ独自のタグを作れる HTML 4.0 は XHTML 1.0 へリフォーム (HTMLよりは文法が厳密) ブラウザが対応していないとダメだが、現状は混乱状況　　　→　 Inf. Math. 5

Ｗｅｂページ記述用言語ＨＴＭＬ５新しい要素や属性が追加される HTML4 以前に使えたいくつかの要素や属性は廃止される
より明確に文書構造を示すことができるフォームの入力補助やチェック機能などが充実している動画や音声データを簡単に扱える（プラグインが不要になる？） <audio> 要素、 <video> 要素　（マルチメディア） <canvas> 要素（2次元ビットマップ画像） <footer> 要素（作者や著作権） <nav> 要素（ナビゲーション）ＡＰＩが追加される 2008年以降、多くのウェブブラウザが HTML5 に段階的に対応している： Google Chrome 3.0 以降 Safari 3.1 以降 Firefox 3.5 以降 Opera 10.5 Internet Explorer 9 Inf. Math. 5

HTMLファイルの基本構造 <html> <head>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” ” <html> <head> 　　ここにはヘッダ情報(ページタイトル、作者、文字コード、等)を書く　　<title>　ページタイトル　</title> </head> <body> <h1>　表題大見出し　</h1> 　　　メインコンテンツをここに書く <a href=“ <img src=“moriya_lab.gif”> ・・・　画像ファイルの参照 </body> </html> Inf. Math. 5

文書型定義と文書型宣言ＤＴＤ（Document Type Definition）使用する要素や属性の特色や用法を定義する文書型宣言
　使用する要素や属性の特色や用法を定義する HTML 4.01 strict DTD 最も厳密。非推奨の要素や属性は排除。フレームも禁止 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ HTML 4.01 Transitional DTD　非推奨要素・属性を含む。インラインフレームのみ　　将来のバージョン改定への移行用 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ HTML 4.01 Frameset DTD Translational DTDにフレームを加えたもの <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ 文書型宣言 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ 　　ブラウザごとに、文書型宣言の有無に従って、標準準拠モード、旧バージョン互換モード、準標準モードといった表示モードを備えている Inf. Math. 5

前のスライド通りだと以下のように表示される
Inf. Math. 5

修正して（要素の属性を変えて）みよう例えば、ここを EUC-JP に変えてみよう
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="author" content="守屋悦朗"> <meta name="keyword" content="情報数学5"> 　<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=“ </body> </html> 例えば、ここを EUC-JP に変えてみよう Inf. Math. 5

どこがどう変わったか？ Inf. Math. 5

どこから発信する？プロバイダ（ＩＳＰ） Webサーバ外から見た置き場所（URL）
WWWサーバーの提供無料／有料のサーバーのレンタル Webサーバ WWW サーバ、html サーバともいうブラウザからのリクエストに応じて html ファイルや画像データを送信する（プロトコルは http）常駐プログラム代表的ウェブサーバ　Apache（フリーソフト）, IIS（ＭＳ社）, CERN Http 外から見た置き場所（URL）サーバ上の置き場所（ファイルシステム上の或るディレクトリ） /home/student/ﾕｰｻﾞID/public_html/ Inf. Math. 5

何を使って書く？エディタテキストエディタワープロソフト HTMLエディタ
html または htm ファイルとして保存 Emacs, 秀丸, メモ帳, TeraPad, SimpleText, ・・・ワープロソフトＷＯＲＤ, 一太郎, ワードパッド, ・・・癖あり、最適でないソースを生成 HTMLエディタ専用ソフトなので簡単、高機能フリーソフト（タグ入力支援ソフト） TTT editor, ez-HTML, ・・・市販ソフト（ホームページ作成ソフト）　ホームページ・ビルダー 13, Adobe PageMill 3.0, ・・・ Inf. Math. 5

書いたらどうする？ブラウザで見て確認/修正ウェブサーバーにアップロード公開前にオフラインでブラウザによりファイルを開く
FTP（ファイル転送）サーバー側には FTP サーバー送信側には FTP クライアントソフト FFFTP, WinSCP, NextFTP, 小次郎, ・・・パーミッションの設定 rwx（読み込み・書き込み・実行） Inf. Math. 5

自分のトップページを作ってみよう今後、この授業で使っていくレポートの提出用として・・・プログラミングに関連して・・・
提出＝自分のＨＰへアップロード他の受講者からも見える → 相互評価プログラミングに関連して・・・ Java アプレットによる描画 Inf. Math. 5

基本タグを使ってみるトップページメニュー項目いろんなタグ（要素）を使ってみるレイアウト、タイトル画像
はじめは凝らないシンプルなものを（フレームは使わない）メニュー項目情報数学5（URLを指定する）その他は自由いろんなタグ（要素）を使ってみる Inf. Math. 5

まず、以下のファイルをもとに・・・ <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ <html> <head> <title> 山田太郎のホームページ　トップページ </title> </head> <body> <hr> <h1 align="center" style="color:#ff8844"> 山田太郎のホームページ</h1> <p align="right">2015年6月17日</p> <p align="center" style="background-color: #eeeeff; font-size:xx-large; border:solid"> 山田太郎のページへ　ようこそ！ </p> これは<span style="color:blue; font-weight:bold">情報数学5</span>用のページです。１行に収まらないくらい長い文章をつづけて書いてみよう。どのように表示されたか？半角スペースと全角スペースを入れてみよう。どのように表示されたか？ <br> ここで改行した。 <p> 別の<span style="color:red">パラグラフ</span>の始まり。パラグラフの前は１行空く。 </body> </html> Inf. Math. 5

Inf. Math. 5

タグの基礎知識（１）開始タグと終了タグの組で範囲を指定する要素名等は大文字でも小文字でもよい属性を指定できる要素もある
　<要素名>　・・・要素の内容・・・　</要素名> 要素名等は大文字でも小文字でもよい（HTML の後継バージョンともいえる XHTML では小文字を使う）属性を指定できる要素もある <div style=“color:・・・; font-size:・・・; font-weight:・・・”> 要素名　属性　属性の値 Inf. Math. 5

タグの基礎知識（２）コメントタグは入れ子状に書く（同じタグが何重もの入れ子になっていてもよい）：
<dvi style=“…”> <span style=“…”> <b> ・・・</b> <p> ・・・ </p> </span> </div> コメント　  半角空白文字、改行コード、タブコードは無視される　　強制的に改行するには <br> や <p> を使う特殊文字 < → <　 > → > & → &　 “ → " Inf. Math. 5

基本のタグ <html> HTMLファイルであることの宣言 <head> ヘッダー情報の記述 (サーバー等が利用)
<title> 　　ページタイトル (headタグの中に記述) <body>　ページ内容の指定（背景、文字色、リンク等）　　　　　background=“背景用画像ファイル名” 　　　 bgcolor=“背景色(RGB16進数6桁)” text=“文字色(RGB16進数6桁)” link=“リンクの色(RGB16進数6桁)” 　　　　　vlink=“アクセス済みリンク色(RGB16進数6桁)” 　　　　　bgproperties=“fixed” 背景が文字と一緒にスクロールしない（参考）カラーリファレンスサイト <h1> ～ <h6> 見出し Inf. Math. 5

こんなタグを使ってみよう <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> 表をつくる Inf. Math. 5

ブロック要素とインライン要素ブロック要素インライン要素見出しや段落など、文書の骨組みとなる要素
このタイプの要素は横幅いっぱいの領域を持つ要素の前後には自動的に改行が入る 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　など Inf. Math. 5

補足 div 要素と span 要素これらの要素（タグ）で囲まれた内容は、ひとつのグループとして操作することができる。これらの要素（タグ）の違いは、　div　　 …　前後に改行が入る　span　…　前後に改行が入らない、行内組み込みタイプ例 <style type=“text/css”> <!- -　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <div> div { ここの背景色は”#f0f0f0”色で background: #f0f0f0;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　境界色は”#00ff88”で、solid(実線) になる border: #00ff88” 1px solid; とスタイルが定義されていると、 </dvi> }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 --> </style> Inf. Math. 5

タグいろいろ（１） <font> フォントの指定（サイズ、色） size=“サイズ（1～7）”
　　　 color=“背景色(RGB16進数6桁)” 　　　　非推奨なので代わりに <span style=“…”> を使う <b> 太字 <i> イタリック <em> 強調文字（イタリック） <u> アンダーライン <s> 削除線付き文字（strike） <sub> 下付き添え字 <sup> 上付き添え字 <tt> タイプライター文字 <blink> 点滅反転文字（注）ブラウザによってはサポートされていないものあり。　　　　　は非推奨タグ（HTML5 では使わないことを推奨している）。 Inf. Math. 5

タグいろいろ（2） <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 影を付けない Inf. Math. 5

タグいろいろ（3） <a> リンク <img> 画像の表示 src=“画像ﾌｧｲﾙ名”
　　　　　 href=“URLまたはﾌｧｲﾙ名” 　　　 href=“#マーカー名”　　　マーカー名の引用 name=“マーカー名” 　　マーカー名の指定 mailto: メールアドレス <img> 画像の表示 src=“画像ﾌｧｲﾙ名” align=“top/bottom/middle/center/left/right” 画像に対する文字列表示位置 alt=“代替文字列” width=“幅” height=“高さ” border=“境界線の太さ” hspace=“ピクセル数” 　水平方向の余白 vspace=“ピクセル数” 　垂直方向の余白 Inf. Math. 5

タグいろいろ（4） <ul> 行頭記号付きリスト <li> リストの項目 <dl> 定義型リスト
　　　　　 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> Inf. Math. 5

<li> １番 </li> <li> ２番 </li>
<html> <head> <title>リストの例</title> </head> <body> <ol> <li> １番 <li> ２番 <li> ３番 </ol> <ol type="a"> <li> １番 </li> <li> ２番 </li> <li> ３番 </li> <ol type="A"> <li> １番 </li> <li> ２番 </li> <li> ３番 </li> </ol> <ol type="I"> <li> １番 <li> ２番 <li> ３番 </body> </html> Inf. Math. 5

<html> <head> <title>リストの例</title> </head> <body> <p style="color:blue; font-weight:bold"> Unordered List </p> <ul> <li> 項目１ </li> <li> 項目２ </li> </ul> <ul type="circle"> <ul type="square"> </body> </html> Inf. Math. 5

OL と UL Inf. Math. 5

<html> <head> <title>定義型リストの例</title> </head> <body> <p style="color:blue; font-weight:bold"> Definition List </p> <dl> <dt> 項目１ </dt> <dd> 項目１の定義内容 </dd> <dt> 項目２ </dt> <dd> 項目２の定義内容 </dd> <dt> <font color="#0000ff">項目３</font> </dt> <dd> 項目３の定義内容 </dd> </dl> <dt> <b>項目１</b> </dt> <dt> <span style="color:red; font-weight:bold; font-size:12pt">項目２</span> </dt> </body> </html> Inf. Math. 5

Inf. Math. 5

表の作成 <table> align=“位置(left/right/center)” border=“枠線の太さ”
　background=“背景画像ﾌｧｲﾙ名”　　　bordercolor=“枠線の色”　　　cellspacing=“セルの間隔”　　　width=“表全体の横幅”　　　height=“表全体の縦幅”　　　align=“right/left(ﾃｷｽﾄの回りこみ) <table align=“center” border=“1”> <caption>表のタイトル</caption> <tr> <th>見出し</th> <td>データ</td> ・・・ </tr> 　　　　　　　　　　　　・・・ </table> Inf. Math. 5

<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> Inf. Math. 5

Inf. Math. 5

<table>に関連するタグ
　　　　　 th : table header（見出し名） align=“left/right/center” colspan=“縦にまたがるセル数” rowspan=“横にまたがるセル数” 　　　　　 tr : table row (行の定義) td : table data (データエントリー)　　　　　　　　　align=“left/right/center” colspan=“横にまたがるセル数” rowspan=“縦にまたがるセル数” 　　　　　　　 bgcolor=“セルの背景色” <table> 　　　 <tr> <th rowspan=“2”>見出し</th> <td align=“center”>データ</td> ・・・　　　 </tr> 　　　　　　　　　　　　・・・ <tr> <th> </th> <td rowspan=“3” bgcolor=“aa8844”>データ</td> ・・・ </table> Inf. Math. 5

<meta> 文書内の情報の記述
<meta http-equiv=“Expires” content=“8/23/04”> <meta http-equiv=“Reply-to” <meta name=“description” content=“iモード”> <meta http-equiv=“Content-Type” content=“text/html” charset=shift_jis> Inf. Math. 5

他に、こんなタグも・・・タグについてはここを見よ： 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> Inf. Math. 5

フォーム作成に関するタグフォームの中身を定義する部分・入力欄（１行）を作る
<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> Inf. Math. 5

フォームの作成例 <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> Inf. Math. 5

form要素の表示のされ方 Inf. Math. 5

スタイルシートＣＳＳ CSS (Cascading Style Sheet) HTMLからデザイン的な部分を分離して定義する
スタイルシート　ＣＳＳ CSS (Cascading Style Sheet) HTMLからデザイン的な部分を分離して定義する CSS , CSSの基本 by W3C CSS2 印刷や音声を含む拡張デザイン統一や変更が容易になるＨＴＭＬでは記述できないこともできる：オーバーラインを引いたり、ルビを振る空白を挿入する背景と文字を重ねたり、背景をぼかす文字をちぐはぐに並べる　　etc. Inf. Math. 5

CSSの定義方法（その１）「セレクタ」「属性」「値」の組セレクタ｛属性：値｝を次のように１つ以上；で区切って並べて書く。例 <h1>タグで書くタイトルを赤色にし、背景色を青色にする： h1 { color: #ff0000; /* 赤色 */ background-color:#0000ff”; /* 青色 */ } /* */ で囲んだ部分はコメントになる Inf. Math. 5

CSSの定義方法（その２） class セレクタ例．セレクタ｛属性：値｝
　　　　．セレクタ｛属性：値｝のように、セレクタの前に「．」を付けて定義すると、html の中で　　　　class=“そのセレクタ名” のように引用して使うことができる（そのような効果が生じる）。例　　　　.aka-iro { font-color: #ff0000; /* 赤色 */ } と定義しておくと、　　　<div class=“aka-iro”> この部分の文字は赤色になる </div> のように使える。 Inf. Math. 5

CSSの属性の例（１） color 文字の色 (red, blue,…, #ff8844, …) background-color 背景色 (同上) font フォント修飾（使用例 font: italic bold 12pt serif） font-family フォントの指定（serif, sans-serif, monospace, fantasy, cursive） font-size フォントサイズ（15pt, 150%, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger） font-weight フォントを太字に（100,200,300,…, 900, bold） font-style フォントをイタリックに（normal, italic, oblique） text-alig テキスト位置 (left, center, right, justify) text-indent テキストの段付け（20pt, 5em, 20%, -20pt） text-decoration (none, underline, overline, line-through（取り消し線）, blink（点滅）) テキストの修飾 Inf. Math. 5

CSSの属性の例（２） white-space 空白や改行の指示（normal, pre, owrap）
letter-spacing 文字間隔（5pt, -10pt, normal） line-height　行の高さ（150, 60%, ） height, width　ボックスの高さと幅 margin, margin-top, margin-left, margin-right 上下左右のボックスのマージンを指定する（20pt, 30%, auto） padding, padding-top, padding-keft, padding-right　ボックスの内容と枠までの距離（同上） border-syle, border-color, border-width, …　境界線の修飾（solid, red, 20px） table-layout　表のレイアウト shadow　文字に陰を付ける list-style　リストのスタイルなど Inf. Math. 5

ＣＳＳの定義方法ＨＴＭＬへの組み込み方１(ページ内に直接書く)
<html> <head> <title>タイトル</title> <style type=“text/css”> style はコメントとして書く  </style> </head> <body> <div> ここに記述したものは上記 div で設定したスタイルに従う </div> これは上に定義した OVLine を使ったオーバーラインのある数式の例です x=<span class=“OVLine”>y+<span class=“OVLine”>(z+1)</span></span> 次のように直接タグ（要素）の中に書くこともできる w=<span style=“text-decoration:overline;”>u</span>+v </body> </html>

ＣＳＳの定義方法ＨＴＭＬへの組み込み方２(外部のファイル内に記述)
ファイル example.css 内で定義する： div { background: #f0f0f0; border: #00ff88” 1px solid; 　　　　　　 divのスタイルの定義 } .OVLine { text-decoration:overline;　　　　　　　　　　　クラスoverlnの定義利用するとき <html> <head> <title>タイトル</title> <link rel=“stylesheet” type=“text/css” href=“example.css”> </head> <body> <div> ここに記述したものは上記 div に設定したスタイルに従う </div> これは上に定義した OVLine を使ったオーバーラインのある数式の例です x=<span class=“OVLine”>y+<span class=“OVLine”>(z+1)</span></span> 次のように直接タグ（要素）の中に書くこともできる w=<span style=“text-decoration:overline;”>u</span>+v </body> </html> Inf. Math. 5

div と /div の間に記述したものは上記 div に設定したスタイルに従う。 <p>
<html> <head> <title>タイトル</title> <style type="text/css">  </style> </head> <body> <div> div と /div の間に記述したものは上記 div に設定したスタイルに従う。 <p> これは上に定義したovrlnを使ったオーバーラインのある数式の例です。 <br> x = <span class="ovrln">y + <span class="ovrln">(z+1)</span></span> 次のように直接タグの中に書くこともできる： w = <span style="text-decoration:overline;">u</span> + v </div> </body> </html> Inf. Math. 5

前シートの記述は次のように見える Inf. Math. 5

補足（HTML5について）現在は草案状態 2012年に正式な勧告を出す予定だったが、2014年に創案を公開し、
　　 2016年に（移行するように促す）勧告を出す予定ブラウザによっては発表された草案にすでに対応しているものもあるＨＴＭＬ５で追加される予定である要素（タグ） article　記事であることを示す aside　補足情報であることを示す audio 音声を再生する canvas　図形を描く command 操作メニューのコマンドを指定する datalist 入力候補となるデータリストを定義する details 備考等の詳細情報を示す embed　テプラグインデータを埋め込む figcaption　図形のキャプションを示す figure　図形であることを示す Inf. Math. 5

補足（HTML5についてつづき） footer フッターであることを示す header ヘッダーであることを示す hgroup セクションの見出しを表す、見出しのまとめ keygen フォーム発信時にケーを生成する mark 文書内の該当テキストを目立たせる menu 操作メニューを作成する meter 規定範囲内の測定値を示す nav ナビゲーションであることを示す output 計算結果を示す progress タスク完了までの進行状況を示す section １つのセクションであることを示す source 動画や音声などのURLや種類を指定する summary detailsの内容の要約を示す time 日付や時刻を示す video 動画を再生する rp ルビを囲む記号を指定する rt ルビのテキストを指定する ruby ルビをふる rbr 改行してもよい位置を指定する

HTML5で書くと・・・ <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“ <!DOCTYPE html> <html> <head>  <meta charset=“UTF-8"> <meta name="author" content="守屋悦朗"> <meta name="keyword" content="情報数学5"> 　<title>　ページタイトル　</title> </head> <body background="bg_moriya.gif"> <h1 style="color:blue">　表題大見出し　</h1> 　　　メインコンテンツをここに書く </body> </html> Inf. Math. 5

参考サイト http://www.tagindex.com タグについては、例えば以下のサイトを見よ：スタイルシートについても上記サイトの
　　　スタイルシートについても上記サイトのを参考にせよ Inf. Math. 5

Ver. 15.06 HTML概論 Inf. Math. 5.

Similar presentations

Presentation on theme: "Ver. 15.06 HTML概論 Inf. Math. 5."— Presentation transcript:

Similar presentations

About project

フィードバック

ログインする

Auth with social network:

Ver. 15.06 HTML概論 Inf. Math. 5.

Similar presentations

Presentation on theme: "Ver. 15.06 HTML概論 Inf. Math. 5."— Presentation transcript:

Similar presentations

About project

フィードバック