html5講座 (初心者向け)
TRANSCRIPT
html5 講座Presented by boomerang
注意事項• このスライドはhtml入門者向けに噛み砕いて説明をしているため、厳密さに欠けます。
• 基本的にhtml5の記法に準拠していますが、一部理解のしやすさを優先しhtml4の記法で説明しています。(インライン要素とブロックレベル要素、など)
• スライド中の例ではDOCTYPE宣言などを省略しています。正しい記述は添付資料を参照ください。
html• WEBページを作成するための言語
• 正式名称は ”Hyper Text Markup Language”
リンク機能を持つ文書
コンピュータの文書 Appleの文書Macの文書
Win Mac
Apple OS X
タグ(1/3)
<h1>内容を記述</h1>
タグ：”<“と”>”で囲まれたもの
※終了タグがないものもある (例: <br /> )
開始タグ 終了タグ
タグ(2/3)
<h1>内容を記述</h1>
要素名：タグが持つ意味を決定する
要素名 要素名
タグ(3/3)
<img src=“sample.png” />
属性名：タグに情報を付加する
属性値：具体的な情報の指定
属性名 属性値
構造(1/2)<html> <head> /*ページのメタ情報*/ </head> <body> <h1>タイトル</h1> <p>本文</p> </body> </html> 入れ子構造
構造(2/2)html要素
head要素
body要素
(ページのメタ情報)
タイトル
本文
h1要素p要素
ファイルの保存
index.html
テキストエディタで記述 !
!
!
ファイルの拡張子を “ .html ”にする
パスの指定(1/2)相対パス そのファイルの位置からの相対的なパス !
!
!
絶対パス・ルートパス
<img src=” sample1.png ” /> <img src=” img / sample2.png ” /> <img src=” ../ sample3.png ” />
パスの指定(2/2) ├ hp/ │ ├ img/ │ │ └ a sample2.png │ ├ index.html │ └ sample1.png └ sample3.png
文字コード(1/2)
htmlファイル
Shift_JIS? Unicode?
Unicodeだよ
charsetブラウザ
どの規格で書かれているか ブラウザでは判断出来ない
文字コード(2/2)<head> <meta charset=“utf-8”> <title>ページ名</title> </head> !
・エンコーディングは文字コードを一致させる。
・Unicode (utf-8) が推奨されている。
タグの分類(1/2)ブロックレベル要素
・ページの構造を構成するタグ ・インライン要素とブロックレベル要素を含める
ブロックレベル要素の例 グループ化(div), 見出し(h1, h2, …), 段落(p), リスト(ul, ol, li), テーブル(table, td, th, tr)
タグの分類(2/2)インライン要素
・テキストに意味付けをするタグ ・インライン要素と文字を含める
インライン要素の例 ハイパーリンク(a), 改行(br), 画像(img), グループ化(span), 強調(em, strong)
コンテンツ・モデル
• html5からの概念
• インライン要素とブロックレベル要素の概念を細分化したイメージ
コンテンツ・モデルについて (TAG index) http://www.tagindex.com/html5/basic/contentmodel.html
非推奨タグ詳細は以下参照。 廃止された要素と属性 (TAG index) http://www.tagindex.com/html5/basic/abolished.html
使いがちな非推奨タグの例 フォント(font), センタリング(center), フレーム(frame), 大きい文字(big)
コーディング課題(1/2)• 添付資料 kadai01.txt の内容をhtmlを用いてコーディングせよ。ただし以下の条件を満たすこと。
• 資料中のコメントに準拠すること(テーブル、リストの実装)
• 資料中下部のアウトラインを満たすよう見出しタグを使うこと
コーディング課題(2/2)左図のように構成されるディレクトリ内で、 ファイル間をリンクを 用いて行き来出来るよう コーディングせよ。 !
ただし、相対パスを 用いた指定をすること。
hp/ ├ game/ │ ├ sushi.html │ └ yakitori.html ├ index.html └ game.html
参考TAG index - HTML5リファレンス http://www.tagindex.com/html5/ (タグの意味や属性、使用例などがまとめられている) !
Google https://www.google.co.jp/ (分からないことを検索すれば、なんでも教えてくれる)