Weitere ähnliche Inhalte
Ähnlich wie Lesson Html 01
Ähnlich wie Lesson Html 01 (20)
Lesson Html 01
- 3. HTMLとは
• Hyper Text Markup Language 上の略。
• WEB上でドキュメントを作成するためのマークアップ言
語※1。
• 現在のWEBサイトで最も普及している言語。
• 標準化団体W3Cにより、XHTML※2 の勧告も行われている
。
※１・・・コンピュータ言語の一種
※２・・・Webページを記述するためによく使われるHTMLを、文書やデータの意味や構造を記述するための
マークアップ言語の一つ “XML” に適合するように定義し直したマークアップ言語。
- 5. その構造は
• HTML文書は文書全体を示す <html>～</html> 要素が
あり、大まかに２つの部分に分けれられる。
・ヘッダー部 <head>～</head> 要素
・本体部 <body>～</body> 要素
• head部
・文書のヘッダを示す要素。
・要素の内容は、ブラウザの画面上には表示されない。
・主に、title要素、meta要素、link要素などこの要素内に配置。
・ページ上では現れない情報。
• body部
・文書の本体を示す、肝となる要素。
・この要素の内容が、ブラウザの画面上に表示されることになる。
• ではHTMLをマークアップする、とは。
- 7. マークアップしてみる
• テキストをマークアップすると、ソース上ではこのような
感じになる。
<h1>大見出し（タイトル等）</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>テキスト（内容等）</p>
<h3>小見出し</h3>
<p>テキスト（内容等）<img src=“***” /></p>
<h2>中見出し</h2>
<h3>小見出し</h3>
・
・
- 8. ブラウザで表示すると・・・
• マークアップしたHTMLはこのように表
示できるようになる。
• デフォルトだと各タグで見え方が違う。
• CSSを使用することで文字など見え方を
変更する。
- 9. 今と昔の違い
【以前は・・・ 】
• 表を表示するためのテーブルタグを使ってのレイアウトや
、フォントタグを使っての文字装飾など、HTMLだけで見
た目等をあれこれする傾向が強かった。
• HTMLのソースコードの巨大・複雑化。
【現在は・・・ 】
• CSSの普及と、各ブラウザの対応により、情報の装飾に
CSSが使われるようになった。
• CSSとの連携でHTML自体のソースコードのシンプル化。
• 「マークアップは物理的なレイアウトではなく論理的な
構造を持つ」という理念に限りなく近くなっている
- 10. CSSとの連携
• HTMLを表示する際、見栄えを制御することができ、その
制御する技術をスタイルシートと言う。
• 「本来、HTMLは文書の意味だけを定義するもので、見栄
えを定義するものでない」という主張から、HTMLは文書
、デザインはデザインでCSSが用いられるようになった。
• 一般的なWebページに用いられるスタイルシートのこと
を、CSS（Cascading Style Sheets）という。
• CSSを使うことで見栄え制御の管理が簡単になる。
