注意事項• このスライドはhtml入門者向けに噛み砕いて説明をしているため、厳密さに欠けます。
• 基本的にhtml5の記法に準拠していますが、一部理解のしやすさを優先しhtml4の記法で説明しています。(インライン要素とブロックレベル要素、など)
• スライド中の例ではDOCTYPE宣言などを省略しています。正しい記述は添付資料を参照ください。
html• WEBページを作成するための言語
• 正式名称は ”Hyper Text Markup Language”
リンク機能を持つ文書
コンピュータの文書 Appleの文書Macの文書
Win Mac
Apple OS X
パスの指定(1/2)相対パス そのファイルの位置からの相対的なパス !
!
!
絶対パス・ルートパス
<img src=” sample1.png ” /> <img src=” img / sample2.png ” /> <img src=” ../ sample3.png ” />
文字コード(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/ (分からないことを検索すれば、なんでも教えてくれる)