Html講義

アウトライン
 HTMLとは
 タグ概説
 ブロックレベル要素とインライン要素とその中間
 CSS
 ブラウザ依存問題

HTMLとは（１）
 HyperText Markup Language の頭字語
HyperTextとは、ハイパーリンクを備えた文書のこと
当初の目的は、論文を掲載すること
 国際研究機関の中で、各研究者が論文を書く
にあたり、参照や引用ができるように作られ
た

HTMLとは（２）
 仕組み
クライアント（依頼者）はサーバ（提供者）
に文書を請求する。ブラウザ（閲覧ソフト）
が構造を解析し、ディスプレイに表示する

タグ概説（１）
 HTMLは、文の中に、”<“,”>”で区切られた
タグを設置することで、表現する
 タグは、始まりと終わりを持つものと、
一個づつ独特に使うものがある
始まりと終わりがある <html> <head> <body>
<div> <p> <font> <a>
一個づつ使う <br> <hr> <meta> <link>
<img> <input> <col>

タグ概説（２）
 HTMLの構造
<html>
<head>
<title>HTMLへようこそ</title>
</head>
<body>
<div>
<h1>HTMLへようこそ</h1>
<p>HTMLは、
<a href=“http://ja.wikipedia.org/wiki/SGML”>SGML</a>
アプリケーションの一つで、ハイパーテキストを利用してワールド
ワイドウェブ上で情報を発信するために作られ、ワールドワイド
ウェブの<strong>基幹的役割</strong>をなしている。情報を
発信するための文書構造を定義するために使われ、ある程度機械が
理解可能な言語で、写真の埋め込みや、フォームの作成、
ハイパーテキストによるHTML間の連携が可能である。</p>
</div>
</body>
</html>
<html>
タ
グ
ル
ー
ト
要
素
<head>タグヘッダー
<body>タグ本文

タグ概説（３）ーヘッダー要素
 このHTML文書のタイトルと、
文書にまつわるメタ情報を記載する箇所
記述できる代表的要素
一個づつ使う
title 文書のタイトル
link 参考参照先
meta 文書で使用する文字コードや文書に関する要約文、
キーワード、作者情報など
object ページ上で動作させる外部アプリケーション
script この文書のみに有効なスクリプトなど
style この文書のみに有効なデザイン設定など

タグ概説（４）－本文
 ユーザーが実際に目にする内容を記述する
<body>
<div>
<h1>HTMLへようこそ</h1>
<p>HTMLは、
<a href=“http://ja.wikipedia.org/wiki/SGML”>SGML</a>
アプリケーションの一つで、ハイパーテキストを利用してワールド
ワイドウェブ上で情報を発信するために作られ、ワールドワイド
ウェブの<strong>基幹的役割</strong>をなしている。情報を
発信するための文書構造を定義するために使われ、ある程度機械が
理解可能な言語で、写真の埋め込みや、フォームの作成、
ハイパーテキストによるHTML間の連携が可能である。</p>
</div>
</body>

ブロックレベル要素と
インライン要素とその中間（１）
 本文の中でタグは２つの要素に分けられる
ブロックレベル要素 <p> <div> <table> <dl>
<ul> <ol> <form>
<address> <blockquote>
<h1> <h2> <h3> <h4>
<h5> <h6> <fieldset> <hr>
<pre>
インライン要素 <a> <font> <small>
<strong> <i> <b> <span>
インラインブロック要素 <button> <img> <input>
<object> <select>

インライン要素とその中間（２）
ブロックレベル要素文中の塊を表す要素
本文の中で矩形領域（四角形）を持つ
指定がなければ前要素から改行される
インライン要素文中の一部分に意味づけする要素
改行は位置は、親要素の大きさによる
インラインブロック要素インライン要素のように改行は伴わない
のですが、幅や高さを持つ
見た目に関する決まり事はブロックレベ
ル要素、文法上はインライン要素
 それぞれの違い

インライン要素とその中間（３）
 親子関係
親要素
子要素（孫にとっての親要素）
孫要素
ブロックレベルの中のインライン要素の間でも、
親子関係になる場合がある
水平 <i>イタリック</i> <b>ボールド</b>
親子 <i>イタリック<b>ボールド</b> </i>

CSS（１）－ CSS前史
 HTMLは論文を記述することに特化した言語
↓
ウェブ向けのデザイン要件を追加
↓
文書の構造とデザインの設定が混在
↓
大混乱
↓
文書の構造とデザインを分けよう！
↓
CSSの導入

CSS（２）ーCSSとは
 Cascading Style Sheets
カスケーディング・スタイル・シート
ヘッダー要素の中で、使用するCSSへのリン
クを掲示し、
ウェブサイトの中のデザインを集中管理

CSS（３）ーCSSの書き方
 セレクタ、プロパティ、値
例えば、bodyタグ内の領域で、文字のサイズを指定し
たい場合、以下のように設定する。
セレクタ {
プロパティ:値;
}
セレクタはスタイルを適用したい範囲、
tagやid、classなどを指定できる
body {
font-size:14px;
}

ブラウザ依存問題
 以上のように、HTMLやCSSには決まり(仕様)
があるが、必ずしもすべてのブラウザで同じ
ようにみえるわけではない。
バグの場合もあるし、仕様の場合もある。
 その原因は（主に）レンダリングエンジン
（下表の右側）が異なるため
最低でも、IE(Win),Safari(Mac),Chromeは確認したい
Internet Explorer Trident
Safari Webkit
Google Chrome、Opera Blink
Firefox Gecko

ありがとうございました
 HTMLとは
 タグ概説
 ブロックレベル要素とインライン要素とその中間
 CSS
 ブラウザ依存問題
小城順哉
shunzai3@gmail.com

Html講義

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Html講義

Semelhante a Html講義 (20)

Último

Último (12)

Html講義