Soumettre la recherche
Mettre en ligne
Htmlの書き方入門編
•
2 j'aime
•
2,926 vues
T
touhou
Suivre
HTML4のチュートリアルです。
Lire moins
Lire la suite
Développement personnel
Signaler
Partager
Signaler
Partager
1 sur 26
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Html
Html
Minoru Uchida
html講座
html講座
nitmic
Html s3
Html s3
Jun Chiba
Html s2
Html s2
Jun Chiba
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
Html s1
Html s1
Jun Chiba
Htmlの基礎
Htmlの基礎
SD Labo
Recommandé
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Html
Html
Minoru Uchida
html講座
html講座
nitmic
Html s3
Html s3
Jun Chiba
Html s2
Html s2
Jun Chiba
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
Html s1
Html s1
Jun Chiba
Htmlの基礎
Htmlの基礎
SD Labo
Html入門
Html入門
GIG inc.
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
電技研Web講習
電技研Web講習
So Murata
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
Web講座 第1回
Web講座 第1回
nanametown
.インストールをやってみよう
.インストールをやってみよう
ohotech
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
hharita
Html1
Html1
Jun Chiba
Html noise reduction
Html noise reduction
Koji Sekiguchi
Html&cssの書き方入門編
Html&cssの書き方入門編
touhou
Html part1
Html part1
job one
HTML
HTML
Jun Chiba
Html03
Html03
TENTO_slide
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML/CSS
HTML/CSS
Yoshinaga Kazutaka
Html:css
Html:css
Yuuki Tazawa
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
Html講習会資料
Html講習会資料
竹島 泉
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Contenu connexe
Tendances
Html入門
Html入門
GIG inc.
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
電技研Web講習
電技研Web講習
So Murata
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
Web講座 第1回
Web講座 第1回
nanametown
.インストールをやってみよう
.インストールをやってみよう
ohotech
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
hharita
Html1
Html1
Jun Chiba
Html noise reduction
Html noise reduction
Koji Sekiguchi
Tendances
(9)
Html入門
Html入門
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
電技研Web講習
電技研Web講習
JavaScript&Firebug入門
JavaScript&Firebug入門
Web講座 第1回
Web講座 第1回
.インストールをやってみよう
.インストールをやってみよう
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
Html1
Html1
Html noise reduction
Html noise reduction
Similaire à Htmlの書き方入門編
Html&cssの書き方入門編
Html&cssの書き方入門編
touhou
Html part1
Html part1
job one
HTML
HTML
Jun Chiba
Html03
Html03
TENTO_slide
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML/CSS
HTML/CSS
Yoshinaga Kazutaka
Html:css
Html:css
Yuuki Tazawa
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
Html講習会資料
Html講習会資料
竹島 泉
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
京都 IT講座 9月
京都 IT講座 9月
annulus
Texteditor - Ohotech 並盛 #5
Texteditor - Ohotech 並盛 #5
NISHIHARA Shota
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
HTML5の話
HTML5の話
Hiroyuki Nozaki
webを飾る技術
webを飾る技術
ina job
Similaire à Htmlの書き方入門編
(20)
Html&cssの書き方入門編
Html&cssの書き方入門編
Html part1
Html part1
HTML
HTML
Html03
Html03
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
HTML/CSS
HTML/CSS
Html:css
Html:css
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Oktopartial Introduction
Oktopartial Introduction
Html講習会資料
Html講習会資料
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
京都 IT講座 9月
京都 IT講座 9月
Texteditor - Ohotech 並盛 #5
Texteditor - Ohotech 並盛 #5
Webapp startup example_to_dolist
Webapp startup example_to_dolist
GDG Women DevfestW
GDG Women DevfestW
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML5の話
HTML5の話
webを飾る技術
webを飾る技術
Plus de touhou
第3回東放学園2012後期 cssの基礎
第3回東放学園2012後期 cssの基礎
touhou
東放学園2012後期スライド
東放学園2012後期スライド
touhou
2012 09-27第1回目講義
2012 09-27第1回目講義
touhou
Cssの書き方入門編
Cssの書き方入門編
touhou
Photoshopの基礎
Photoshopの基礎
touhou
webコンテンツ制作・企画2
webコンテンツ制作・企画2
touhou
Webサイト入門
Webサイト入門
touhou
Plus de touhou
(7)
第3回東放学園2012後期 cssの基礎
第3回東放学園2012後期 cssの基礎
東放学園2012後期スライド
東放学園2012後期スライド
2012 09-27第1回目講義
2012 09-27第1回目講義
Cssの書き方入門編
Cssの書き方入門編
Photoshopの基礎
Photoshopの基礎
webコンテンツ制作・企画2
webコンテンツ制作・企画2
Webサイト入門
Webサイト入門
Htmlの書き方入門編
1.
HTMLの書き方(入門編)
HTML4を使ったページ制作 Thursday, May 17, 12
2.
アジェンダ
HTMLページのつくりかた HTMLとは何か? ページに意味を与える「HTMLタグ」 基本的なマークアップについて 実習:Webページをつくってみよう Webサイトのつくりかた WebサイトとはWebページがまとまったもの 基本的なWebサイト構造 Thursday, May 17, 12
3.
HTMLとは
文書に意味付けをするための言語 Thursday, May 17, 12
4.
HTMLとは
例えばビートルズを紹介するページの場合 Thursday, May 17, 12
5.
HTMLとは
人間は見た目で文書の構造を理解します 大見出し 中見出し 文字の位置や大きさ、レ 小見出し イアウトなどで文書の構 小見出し 造を把握し、内容を理解 する。 大見出し 中見出し 子見出し 子見出し2 Thursday, May 17, 12
6.
HTMLとは
しかし機械は見た目で理解できません ? ? ? ? ? 例えばGoogleはページの ? 見た目だけでは何が書か れているのかを理解する ? ことができません ? Thursday, May 17, 12
7.
文書をマークアップする
文書にタグをつけることをマークアップという 大見出し <h1></h1> 中見出し <h2></h2> 小見出し <h3></h3> 小見出し <h3></h3> 大見出し <h2></h2> 中見出し <h3></h3> 子見出し <h3></h3> 子見出し2 <h4></h4> Thursday, May 17, 12
8.
文書をマークアップする
文書にタグをつけることをマークアップという <h1></h1> <h2></h2> <h3></h3> このようにマークアップさ <h3></h3> れているものであれば、 Googleも内容を理解し、 <h2></h2> 検索された時の表示を正 <h3></h3> しくすることができます。 <h3></h3> <h4></h4> Thursday, May 17, 12
9.
ふたたびHTMLとは
HTMLとは機械でも判断できるように文書をマー クアップするためのもの 機械が自動処理できるようにするためにHTMLはある Googleのような検索エンジンは内容をタグで理解する タグに気をつけてかかないと適切な検索結果として反映されない HTMLは見た目を整えるための言語ではなく「意味付け」のための言語 Thursday, May 17, 12
10.
HTMLの基本構造
HTMLの基本的な構造を理解しよう! Thursday, May 17, 12
11.
HTMLの基本構造
何はともあれ、HTMLは以下を必ず書く <html> ! <head> ! ! ヘッダ ! </head> HTML文書 ! <body> ! ! ボディー ! </body> </html> Thursday, May 17, 12
12.
ヘッダ部分
タイトルや概要などを記述する <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> ヘッダ ! </head> ! <body> ! ! ブラウザでは見えない部分。ペー ! </body> ジのタイトルや概要などを記述す </html> る。Googleなど検索エンジンはこ の部分を重要視する。 Thursday, May 17, 12
13.
ボディ部分
本文を記述する <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ボディ ! </body> </html> ブラウザで見える部分。 ここに本文を記述し、それをマー クアップする。 Thursday, May 17, 12
14.
基本的なHTMLタグ
基本的なタグの書き方と使い方 Thursday, May 17, 12
15.
ツールと記述のルール Thursday, May 17,
12
16.
ツールと記述のルール
HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー(無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 記述方法 HTMLタグはすべて小文字… <title></title><head></head> 保存ファイル名の拡張子はhtml… index.html, shop.html この.htmlが拡張子 Thursday, May 17, 12
17.
ツール
HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー(無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 有料なら選択肢はたくさん WebデザイナーならAdobeから販売されているDreamweaverがスタン ダート。 Thursday, May 17, 12
18.
タイトルタグとメタタグ Thursday, May 17,
12
19.
<title></title>タイトルタグ
ページのタイトルを記述する ヘッダーの中に記述し、そのページを表すようなタイトル名にする。 <html> ! <head> ! ! <title>ページのタイトル</title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Thursday, May 17, 12
20.
<meta></meta>メタタグ
ページの情報を記述する ヘッダーの中に記述し、そのページの概要を記述する <html> ! <head> ! ! <title>ページのタイトル</title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Thursday, May 17, 12
21.
タイトルタグとメタタグは重要
検索結果に反映される クリックするかしないかはこの文言で決まるといっていい。 <html> ! <head> ! <title>人気の商品から選ぶ - 母の日2012 - Yahoo!ショッピング</title> <meta name=”description” content=”ショッピングの「母の日2012」…”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Thursday, May 17, 12
22.
文書に意味付けするタグ Thursday, May 17,
12
23.
その1
hタグ(見出しタグ) <h1></h1>から<h6></h6>まである。h1が一番大きな見出し。 <h1>大見出しにする文字</h1> pタグ(段落タグ) 文章のかたまり=段落を囲む時に使用する <p>文章のかたまり</p> strongタグ(強調タグ) 協調したい部分を囲むタグ <strong>強調したい文字</strong> Thursday, May 17, 12
24.
その2
listタグ(リストタグ) 箇条書きの時に使用する <ul>文章のかたまり <li>箇条書きの項目1</li> <li>箇条書きの項目2</li> </ul> imgタグ(画像タグ) HTML文書内に画像を挿入するときに使用する。 <img src=”ファイル名” alt=”画像を表す言葉”> aタグ(リンクタグ) 文書同士をリンクでつなぐ場合に使用される <a href=”リンクさせたいファイル名”>クリックする文字</a> Thursday, May 17, 12
25.
その3
brタグとhrタグ(改行タグ, 水平線タグ) 改行したい場合は<br>を使用し、区切り線を入れたい場合には<hr>使用 する もじもじ<br>もじもじ もじもじ<hr>もじもじ blockquoteタグ(引用タグ) 文章を引用する場合に使用する <blockquote> 引用したい文章</blockquote> Thursday, May 17, 12
26.
課題
架空のヨーロッパ最大の動物園Zooroppa(ズーロッパ)のトップページ と動物ページを2ページ作りましょう。 ZOOROPPA ライオン 大見出し 画像を挿入 ライオンの習性 ZOOROPPA □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ Welcome to ZOOROPPA ・トップ ・ぞう 中見出し 中見出し ZOOROPPA ZOOROPPA とは 各ページ相互にリンクする ぞう □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ リストとリンク □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・ライオン ・ぞう ぞうの習性 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・トップ ・ライオン Thursday, May 17, 12
Télécharger maintenant