Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
html5 講座
Presented by boomerang
注意事項
• このスライドはhtml入門者向けに噛み砕いて説明
をしているため、厳密さに欠けます。
• 基本的にhtml5の記法に準拠していますが、一部理
解のしやすさを優先しhtml4の記法で説明していま
す。(インライン要素とブロックレベル...
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= ../ ...
パスの指定(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),...
タグの分類(2/2)
インライン要素
・テキストに意味付けをするタグ
・インライン要素と文字を含める
インライン要素の例
ハイパーリンク(a), 改行(br), 画像(img),
グループ化(span), 強調(em, strong)
コンテンツ・モデル
• html5からの概念
• インライン要素とブロックレベル要素の概念を
細分化したイメージ
コンテンツ・モデルについて (TAG index)
http://www.tagindex.com/html5/basic/con...
非推奨タグ
詳細は以下参照。
廃止された要素と属性 (TAG index)
http://www.tagindex.com/html5/basic/abolished.html
使いがちな非推奨タグの例
フォント(font), センタリング(c...
コーディング課題(1/2)
• 添付資料 kadai01.txt の内容をhtmlを用いて
コーディングせよ。ただし以下の条件を満たす
こと。
• 資料中のコメントに準拠すること(テーブル、リ
ストの実装)
• 資料中下部のアウトラインを満たす...
コーディング課題(2/2)
左図のように構成される
ディレクトリ内で、
ファイル間をリンクを
用いて行き来出来るよう
コーディングせよ。
!
ただし、相対パスを
用いた指定をすること。
hp/
├ game/
│ ├  sushi.html
│...
参考
TAG index - HTML5リファレンス
http://www.tagindex.com/html5/
(タグの意味や属性、使用例などがまとめられている)
!
Google
https://www.google.co.jp/
(分か...
Upcoming SlideShare
Loading in …5
×

html講座

2,772 views

Published on

htmlの入門用スライドです。

Published in: Technology
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

html講座

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

×