Submit Search
Upload
html5講座 (初心者向け)
•
0 likes
•
483 views
K
Kohki Nakaji
Follow
部活動で制作した資料です。html5講座とありますが、あまり新しい概念には触れていません。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 20
Download now
Download to read offline
Recommended
html講座
html講座
nitmic
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Htmlの基礎
Htmlの基礎
SD Labo
Htmlの書き方入門編
Htmlの書き方入門編
touhou
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
Html
Html
Minoru Uchida
電技研Web講習
電技研Web講習
So Murata
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
Recommended
html講座
html講座
nitmic
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Htmlの基礎
Htmlの基礎
SD Labo
Htmlの書き方入門編
Htmlの書き方入門編
touhou
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
Html
Html
Minoru Uchida
電技研Web講習
電技研Web講習
So Murata
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
H T M L5 入門編
H T M L5 入門編
ngi group.
HTML5など社内勉強会 Vol.3 - 入門JavaScript
HTML5など社内勉強会 Vol.3 - 入門JavaScript
George Harada
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
最近のHTML5はどうなってるのか
最近のHTML5はどうなってるのか
Shumpei Shiraishi
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
HTML5/Web標準オーバービュー
HTML5/Web標準オーバービュー
Shumpei Shiraishi
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
圭輔 大曽根
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5の今とこれから
HTML5の今とこれから
Takuya Yamamoto
HTML5 のお話
HTML5 のお話
tomo_masakura
HTML5 入門
HTML5 入門
NOAN
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
You_Kinjoh
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
VRの現在と未来
VRの現在と未来
Kohki Nakaji
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
Kohki Nakaji
自宅でできる人体3Dスキャンの検討
自宅でできる人体3Dスキャンの検討
Kohki Nakaji
More Related Content
Viewers also liked
H T M L5 入門編
H T M L5 入門編
ngi group.
HTML5など社内勉強会 Vol.3 - 入門JavaScript
HTML5など社内勉強会 Vol.3 - 入門JavaScript
George Harada
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
最近のHTML5はどうなってるのか
最近のHTML5はどうなってるのか
Shumpei Shiraishi
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
HTML5/Web標準オーバービュー
HTML5/Web標準オーバービュー
Shumpei Shiraishi
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
圭輔 大曽根
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5の今とこれから
HTML5の今とこれから
Takuya Yamamoto
HTML5 のお話
HTML5 のお話
tomo_masakura
HTML5 入門
HTML5 入門
NOAN
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
You_Kinjoh
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
Viewers also liked
(19)
H T M L5 入門編
H T M L5 入門編
HTML5など社内勉強会 Vol.3 - 入門JavaScript
HTML5など社内勉強会 Vol.3 - 入門JavaScript
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
最近のHTML5はどうなってるのか
最近のHTML5はどうなってるのか
HTML5開発最前線
HTML5開発最前線
HTML5/Web標準オーバービュー
HTML5/Web標準オーバービュー
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
2015/08/24 第15回 HTML5+JS 勉強会【TechBuzz】資料「HTML5とデータ可視化とExcel」
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
HTML5の今とこれから
HTML5の今とこれから
HTML5 のお話
HTML5 のお話
HTML5 入門
HTML5 入門
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
HTML5時代のWebデザイン
HTML5時代のWebデザイン
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
More from Kohki Nakaji
VRの現在と未来
VRの現在と未来
Kohki Nakaji
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
Kohki Nakaji
自宅でできる人体3Dスキャンの検討
自宅でできる人体3Dスキャンの検討
Kohki Nakaji
至近距離ガールVR 開発事例
至近距離ガールVR 開発事例
Kohki Nakaji
php+smarty (初心者向け)
php+smarty (初心者向け)
Kohki Nakaji
sql講座 (初心者向け)
sql講座 (初心者向け)
Kohki Nakaji
css3講座 (初心者向け)
css3講座 (初心者向け)
Kohki Nakaji
More from Kohki Nakaji
(7)
VRの現在と未来
VRの現在と未来
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
自宅でできる人体3Dスキャンの検討
自宅でできる人体3Dスキャンの検討
至近距離ガールVR 開発事例
至近距離ガールVR 開発事例
php+smarty (初心者向け)
php+smarty (初心者向け)
sql講座 (初心者向け)
sql講座 (初心者向け)
css3講座 (初心者向け)
css3講座 (初心者向け)
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 /> ) 開始タグ 終了タグ
5.
タグ(2/3) <h1>内容を記述</h1> 要素名:タグが持つ意味を決定する 要素名 要素名
6.
タグ(3/3) <img src= sample.png
/> 属性名:タグに情報を付加する 属性値:具体的な情報の指定 属性名 属性値
7.
構造(1/2) <html> <head> /*ページのメタ情報*/ </head> <body> <h1>タイトル</h1> <p>本文</p> </body> </html> 入れ子構造
8.
構造(2/2) html要素 head要素 body要素 (ページのメタ情報) タイトル 本文 h1要素 p要素
9.
ファイルの保存 index.html テキストエディタで記述 ! ! ! ファイルの拡張子を .html にする
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
12.
文字コード(1/2) htmlファイル Shift_JIS? Unicode? Unicodeだよ charset ブラウザ どの規格で書かれているか ブラウザでは判断出来ない
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/ (分からないことを検索すれば、なんでも教えてくれる)
Download now