見出し画像

2章 XHTMLの基本


今日はいよいよXHTMLの基本に入っていきます。

XHTMLの基礎知識
HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

XMLは、HTMLとおなじようにWebページを作成するときに記述する言語のひとつ

XHTMLはXMLをもとにHTMLを改良した言語です。

要素・タグ・属性
段落や表などWebページを構成する単位を要素といいます。

要素は要素名を <>(タグ)で囲み</>(スラッシュタグ)で終わります。

開始位置のタグは 開始タグ 終了位置のタグは 終了タグ といいます。

また、要素に追加できる詳細設定を属性といい属性は値を伴い 

属性=”値” のように記述します。

説明はここまでにしてちょっと作っていきましょう。

開くとこんな感じですねwww

スクリーンショット 2020-04-28 16.18.34


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の場合確認の仕方は簡単です。

画像2


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

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

画像3

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

(バージョンや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 おこ助 ( ^)o(^ )

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございますwww
1
7月も週1で記事を書いていく予定なのでよかったらご覧ください。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。