Download to read offline
Recommended
More Related Content
Viewers also liked
Similar to Lesson Html 01
Lesson Html 01
- 1.
- 2.今回の内容• HTML とは何か•何ができるのか• その構造は• マークアップをしてみる• CSSとの連携• まとめ
- 3.HTMLとは• Hyper TextMarkup Language 上の略。• WEB上でドキュメントを作成するためのマークアップ言 語※1。• 現在のWEBサイトで最も普及している言語。• 標準化団体W3Cにより、XHTML※2 の勧告も行われている 。※１・・・コンピュータ言語の一種※２・・・Webページを記述するためによく使われるHTMLを、文書やデータの意味や構造を記述するための マークアップ言語の一つ “XML” に適合するように定義し直したマークアップ言語。
- 4.何ができるか• ほかのドキュメント（HTMLなど）へのハイパーリンクを設定できる。• ブラウザを介して、WEBページを表示させる事ができる 。• テキストはもちろん、画像、音声、動画などのデータの表 現が可能。
- 5.その構造は• HTML文書は文書全体を示す <html>～</html>要素が あり、大まかに２つの部分に分けれられる。 ・ヘッダー部 <head>～</head> 要素 ・本体部 <body>～</body> 要素• head部 ・文書のヘッダを示す要素。 ・要素の内容は、ブラウザの画面上には表示されない。 ・主に、title要素、meta要素、link要素などこの要素内に配置。 ・ページ上では現れない情報。• body部 ・文書の本体を示す、肝となる要素。 ・この要素の内容が、ブラウザの画面上に表示されることになる。• ではHTMLをマークアップする、とは。
- 6.マークアップとは• 別名、「コーディング」とも言う。• 表示するテキスト等を、HTMLで用意されている適当なタ グで囲む（タグ付け）作業。 ・例えば、表示したい情報が見出しなら見出し用のタグで括り、段落 なら段落のタグで括っていく作業。• タグとは ・“<”～“>” の部分。 ・ハイパーテキストを作るための目印。• マークアップした文書を「.html」で保存後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を使うことで見栄え制御の管理が簡単になる。
- 11.• 以上が、HTMLの大まかな概要となります。• HTMLはWEBを運営するには必要不可欠なものなので、き ちんと押さるトコ、疎かにせず付き合っていきたいもので す。 終わり