導入

XHTMLの基本と概要を説明する．

XHTMLの概要

XHTMLとは

XHTMLとはwebページの構造を記述するための言語である．

XHTMLを記述する際の心得

  • デザインはCSSに任せ，文章内容の構造を意識して記述する．
  • 自分なりのコーディングルールを決める．

XHTMLの標準仕様

XHTMLにはW3Cが定めた規格(標準仕様)があるので，XHTMLファイルを作成する時は，その規格をはじめに宣言しなければならない．

XHTML1.1の場合
(エンコードの値はUTF-8)		 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">

文法の概要

要素と属性

XHTMLの基本となる要素は，そこにしばしば属性を付け加え，<>で囲まれたタグと呼ばれる形で記述する．

終了タグを持つ要素 
<要素名 属性名="属性値"> 要素の内容 </要素名>
終了タグを持たない要素 
<要素名 属性名="属性値" />
要素

要素はほとんどがブロック要素とインライン要素という2つの要素に分けられる．ブロック要素が入れ物のようなものであるのに対し，インライン要素はその一部を構成する．

要素名
XHTMLでは要素名は小文字のアルファベットで記述する．
要素の内容
それぞれの要素に対して，要素の内容として記述できるものが決まっている．基本的にインライン要素の内容にブロック要素を記述することはできない．
親要素と子要素
ある要素xの内容に別の要素yが含まれているとき，xはyの親要素であり，yはxの子要素であるという．
属性

属性は要素の意味を補足したり，要素に機能を追加したいときに用いる．一部の要素には，必須属性と呼ばれる必ず付けなければいけない属性もある．

属性名
XHTMLでは属性名は小文字のアルファベットで記述する．
属性値
属性名ごとに決まったいくつかの属性値がある．

XHTML文書の構成

XHTML文書は大きく分けて，ヘッダー(head)部分と本文(body)部分にわけられる．

例 
 <html>
 <head>
 ヘッダー  
 </head>
 <body>
 本文
 </body>
 </html>
head部分

ヘッダー部分では，タイトルなどwebページに関する情報を記述する．

例 
<head>
<title>タイトル</title>
</head>
body部分

内容には表示したい事柄を記述する．

例 
<body>
<h1>見出し</h1>
<p>文章</p>
</body>

表記上の注意

コメントアウト

HTMLの本文中に，ブラウザには表示されないコメントを付けたい場合は，次の様に記述する．

テンプレート
<!-- コメント -->

特殊文字

XHTMLで文法を記述するための文字である&・<・>・"・&aposを表示したいときは，別の記述で書かなければならない．

表示させたい記号対応するコード
&&amp;
<&lt;
>&gt;
"&quot;
'&apos;

ホームページを公開するまでの流れ

XHTMLファイルの作成

  1. コンテンツの内容を考え，原稿を書いてみる．

  2. コーディングガイドラインを作る．

  3. メモ帳などのテキストエディタを開く．

  4. 必須のソースを記入する．

    必須ソース 
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-quiv="content-type"
content="application/xhtml+xml; charset=UTF-8" />
<title>タイトル名</title>
<link rel="stylesheet" href="CSS.css" type="text/css" />
</head>
<body>

内容

</body>
</html>

  5. 一度ファイル名を指定して保存する．ここで拡張子を.htmlで保存し，文字コードを上記で記述したもの(ここではUTF-8)で保存する．トップページにしたいファイルはファイル名をindexとしてindex.htmlで保存すると後々都合がよい．

  6. 続けてタイトル名や内容を記述していき，区切りのよいところで保存する．

  7. 保存したファイルをブラウザでの確認し，間違い等がないかを確認する．

  8. その後テキストの追加や修正を行う度にブラウザで確認し，ページを完成させていく．

スタイルシートの作成

  1. 作成したページをどのようなデザインにしたいか決める．

  2. メモ帳などのテキストエディタを開く．

  3. XHTMLを記述したファイルとは別の新規ファイルにCSSを記述する．

  4. 拡張子を.cssで保存する．

  5. デザインを施したいXHTMLファイルにCSSファイルをリンクさせる．上の必須ソースで記述したはCSS.cssがそれに当たる．

  6. 適応されているかをブラウザで確認する．

アップロード

  1. webサーバーを用意し，サーバー名・ユーザー名・パスワードを確認する．

  2. FTPソフトを用意し，上のサーバー名・ユーザー名・パスワードを用いて接続設定を行う．

  3. 作成したXHTMLファイルやCSSファイルをwebサーバーへ転送する．

  4. ブラウザでアクセスできるかどうかを確認する．

バリデーション

  1. http://validator.w3.org/でXHTMLの文法をチェックする．

  2. http://jigsaw.w3.org/css-validator/でCSSの文法をチェックする．