XHTML　

前回の続きからということでブラウザでの確認からしてみます。

TeraPadの場合確認の仕方は簡単です。

上のほうにある赤丸で囲んだインターネットエクスプローラーをクリックしてみましょう。

するとこのような画面が出てきます。

但しこれはあくまでサンプルですのでこのように出るとは限りません。

（バージョンやOSによって）

次にXHTMLファイルを編集するところに入っていきます

XHTMLファイルを続けて編集する場合、メモ帳かTeraPadとブラウザの両方を起動しておくと結果を確認しながら編集できるので効率的ですね。

メモ帳かTeraPadでXHTMLファイルを編集

　　　　　　　↓

XHTMLファイルを上書き保存

　　　　　　　↓

ブラウザで結果の確認

段落

ｐ要素　　　　　　　　　　ブロックレベル要素

段落を表します

<p>内容</p>

改行

段落内で改行するときはbr要素を使います

br要素　　　　　　　　　　　インライン要素

改行を表します

<br/>

見出し

XHTMLでは、レベル1からレベル6までの6段階の見出しが用意されています。

レベル1が一番上の見出しとなります。

見出しは　ｈ1要素~ｈ6要素を記述して表します。

ｈ1、ｈ2、ｈ3、ｈ4、ｈ5、ｈ6要素　ブロックレベル要素

見出しを表します

<h1>内容</h1>

<h2>内容</h2>

<h3>内容</h3>

<h4>内容</h4>

<h5>内容</h5>

<h6>内容</h6>

強調

語句を強調する場合em要素を記述します。

em要素　　　　　　　　　　　インライン要素　　

強調を表します

<em>内容</em>

より強い強調をする場合は strong要素を記述

 strong要素　　　　　　　　インライン要素

より強い強調を表します。

 < strong>内容</ strong>

署名

Webページを見る人のために、署名にあたる会社名(作成者）、著作権表示、問い合わせ先などの情報を　address要素として記述します。

一般的なブラウザでは　address要素は斜体で表示されます。

address要素　　　　　　　　　　ブロックレベル要素

署名を表します

<address>内容</ address>

画像

写真やイラスト、アニメーション（動画）などのデジタルデータを画像または画像ファイルといいます。

画像にはいろいろありますね。GIF,JPG,PNG等・・・・・

インターネットで扱う画像について

インターネット上では、ファイルサイズを小さくして保存できるGIF,JPG,PNG等の画像が一般的に使われます。

あまりサイズが大きいとインターネット上で送受信するときに時間がかかったり表示がされなかったりします。

Webページに使用する画像はファイルサイズをできるだけ小さくする必要がありますねwww

画像について・・・

GIF形式

色数を256色まで表現できるファイル形式です。

同じ部分をまとめることでファイルサイズを小さくします。

色数の少ないイラストなどで使用するると効果的です。

特定の色を透明にできる。　拡張子は　gif　です。

JPG形式

色数を約1670万色まで表現できるファイル形式です。

画質を調整することでファイルサイズを小さくします。

写真やグラデーションのあるイラストなどで使用すると効果的です。

拡張子は　jpg または jpeg です。

PNG形式

色数を最大約280兆色まで表現できるファイル形式です。

比較的新しいファイル形式。GIFと同じ特徴を持ちGIFより多くの色を表現できます。

画質を下げずにファイルサイズを小さくできます。拡張子は、pngです。

画像の表示

Webページに画像を表示するには　img要素　を記述して、src属性　で画像ファイル

alt属性　で代替テキストを指定します。

img要素は空要素のため />で閉じ/>の前には一つの半角空白を挿入します。

img要素　　　　　　インライン要素

画像を表します

<img/>

src属性

画像ファイルを指定します

src="ファイルのパス"

alt属性

代替テキストを指定します

alt="代替テキスト"

画像サイズの指定

今回は最後に画像の幅と高さについて。

width属性

幅を指定します。

width="幅"

height属性

高さを指定します

height="高さ"

次回はCSSの基本に入っていきます。

明々後日ぐらいに公開する予定です。

ここまでご覧いただきありがとうございました。

コロナが怖いけどね(´;ω;｀)

>>>>>>>>>>>>>>>>>>>> BY マんタ＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜