2章 XHTMLの基本
今日はいよいよXHTMLの基本に入っていきます。
XHTMLの基礎知識
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
XMLは、HTMLとおなじようにWebページを作成するときに記述する言語のひとつ
XHTMLはXMLをもとにHTMLを改良した言語です。
要素・タグ・属性
段落や表などWebページを構成する単位を要素といいます。
要素は要素名を ＜＞(タグ）で囲み＜/＞（スラッシュタグ）で終わります。
開始位置のタグは 開始タグ 終了位置のタグは 終了タグ といいます。
また、要素に追加できる詳細設定を属性といい属性は値を伴い
属性＝”値” のように記述します。
説明はここまでにしてちょっと作っていきましょう。
開くとこんな感じですねｗｗｗ
TeraPadでやります
XML宣言
verson属性
XMLのバージョンを指定
verson="バージョン"
encoding属性
XMLファイルに使われている文字コードを指定します
encoding="文字コード"
次に基本要素を見ていきます
html要素
XHTML記述部分であることを示します
＜html＞内容＜/html＞
head要素
XHTMLファイル自身に関する情報を表します
<head>内容</head>
body要素
XHTMLファイルの本文を表します
＜body>内容</body>
名前の空間の指定
XHTMLファイルでは、行頭でXML宣言を記述するため名前の空間の指定が必要になります。
名前の空間は次のようにします。
<html xmlns="http://www.w3.org/1999/xhtml">
言語の指定
Webページは、世界中で表示されるため、XHTMLファイルがどの言語で記述されているのか指定します。
言語指定の仕方は次のようにします
xml:lang属性
言語を指定します
xml:lang="ja" lang="ja"
文字コードの指定
mata要素
文章の情報を表します
<meta/>
title要素
Webページのタイトルを表します
<title>内容</title>
ファイルの保存方法について説明をしようと思います。
保存方法は2通りあります。
名前を付けて保存
ファイルをクリックして名前を付けて保存ダイアログボックスが出てくるので
ファイル名にfail.htmlみたいな感じに名前を付けて保存してみましょう。
上書き保存
既存の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 おこ助 ( ^)o(^ )
コロナが怖いけどね(´;ω;｀)
この記事が気に入ったらサポートをしてみませんか？