Lesson Html 01

433 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
433
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson Html 01

  1. 1. 第1章 HTMLについて
  2. 2. 今回の内容 • HTML とは何か • 何ができるのか • その構造は • マークアップをしてみる • CSSとの連携 • まとめ
  3. 3. HTMLとは • Hyper Text Markup Language 上の略。 • WEB上でドキュメントを作成するためのマークアップ言 語※1。 • 現在のWEBサイトで最も普及している言語。 • 標準化団体W3Cにより、XHTML※2 の勧告も行われている 。 ※1・・・コンピュータ言語の一種 ※2・・・Webページを記述するためによく使われるHTMLを、文書やデータの意味や構造を記述するための      マークアップ言語の一つ “XML” に適合するように定義し直したマークアップ言語。
  4. 4. 何ができるか • ほかのドキュメント(HTMLなど)へのハイパーリンクを 設定できる。 • ブラウザを介して、WEBページを表示させる事ができる 。 • テキストはもちろん、画像、音声、動画などのデータの表 現が可能。
  5. 5. その構造は • HTML文書は文書全体を示す <html>~</html> 要素が あり、大まかに2つの部分に分けれられる。 ・ヘッダー部 <head>~</head> 要素 ・本体部 <body>~</body> 要素 • head部 ・文書のヘッダを示す要素。 ・要素の内容は、ブラウザの画面上には表示されない。 ・主に、title要素、meta要素、link要素などこの要素内に配置。 ・ページ上では現れない情報。 • body部 ・文書の本体を示す、肝となる要素。 ・この要素の内容が、ブラウザの画面上に表示されることになる。 • ではHTMLをマークアップする、とは。
  6. 6. マークアップとは • 別名、「コーディング」とも言う。 • 表示するテキスト等を、HTMLで用意されている適当なタ グで囲む(タグ付け)作業。 ・例えば、表示したい情報が見出しなら見出し用のタグで括り、段落  なら段落のタグで括っていく作業。 • タグとは ・“<”~“>” の部分。 ・ハイパーテキストを作るための目印。 • マークアップした文書を「.html」で保存後HTMLファイル と認識されるようになり、ブラウザで表示できるようにな る。
  7. 7. マークアップしてみる • テキストをマークアップすると、ソース上ではこのような 感じになる。 <h1>大見出し(タイトル等)</h1>  <h2>中見出し</h2>   <h3>小見出し</h3>    <p>テキスト(内容等)</p>   <h3>小見出し</h3>    <p>テキスト(内容等)<img src=“***” /></p>  <h2>中見出し</h2>   <h3>小見出し</h3>      ・      ・
  8. 8. ブラウザで表示すると・・・ • マークアップしたHTMLはこのように表 示できるようになる。 • デフォルトだと各タグで見え方が違う。 • CSSを使用することで文字など見え方を 変更する。
  9. 9. 今と昔の違い 【以前は・・・ 】 • 表を表示するためのテーブルタグを使ってのレイアウトや 、フォントタグを使っての文字装飾など、HTMLだけで見 た目等をあれこれする傾向が強かった。 • HTMLのソースコードの巨大・複雑化。 【現在は・・・ 】 • CSSの普及と、各ブラウザの対応により、情報の装飾に CSSが使われるようになった。 • CSSとの連携でHTML自体のソースコードのシンプル化。 • 「マークアップは物理的なレイアウトではなく論理的な 構造を持つ」という理念に限りなく近くなっている
  10. 10. CSSとの連携 • HTMLを表示する際、見栄えを制御することができ、その 制御する技術をスタイルシートと言う。 • 「本来、HTMLは文書の意味だけを定義するもので、見栄 えを定義するものでない」という主張から、HTMLは文書 、デザインはデザインでCSSが用いられるようになった。 • 一般的なWebページに用いられるスタイルシートのこと を、CSS(Cascading Style Sheets)という。 • CSSを使うことで見栄え制御の管理が簡単になる。
  11. 11. • 以上が、HTMLの大まかな概要となります。 • HTMLはWEBを運営するには必要不可欠なものなので、き ちんと押さるトコ、疎かにせず付き合っていきたいもので す。 終わり

×