前回の続きからということでブラウザでの確認からしてみます。
TeraPadの場合確認の仕方は簡単です。
上のほうにある赤丸で囲んだインターネットエクスプローラーをクリックしてみましょう。
するとこのような画面が出てきます。
但しこれはあくまでサンプルですのでこのように出るとは限りません。
(バージョンやOSによって)
次にXHTMLファイルを編集するところに入っていきます
XHTMLファイルを続けて編集する場合、メモ帳かTeraPadとブラウザの両方を起動しておくと結果を確認しながら編集できるので効率的ですね。
メモ帳かTeraPadでXHTMLファイルを編集
↓
XHTMLファイルを上書き保存
↓
ブラウザで結果の確認
p要素 ブロックレベル要素
段落を表します
<p>内容</p>
段落内で改行するときはbr要素を使います
br要素 インライン要素
改行を表します
<br/>
XHTMLでは、レベル1からレベル6までの6段階の見出しが用意されています。
レベル1が一番上の見出しとなります。
見出しは h1要素~h6要素を記述して表します。
h1、h2、h3、h4、h5、h6要素 ブロックレベル要素
見出しを表します
<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 マんタ<<<<<<<<<<<<<<<<<