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