一応、ノートにも勉強した内容を書いていますので、ブログに書き込むときは2度目だったりするんですが、実際にキーボードを使っての入力なので、練習になるんじゃないかと思います。
まだ今は、ブログを誰かに読まれることを意識した書き方とか、編集をしてないんですが、もう少し余裕ができてきて、実際に構造やデザイン的な部分が頭に入ってきたら、練習がてら、このブログで色々やっていきたいとは思っています。
ＸＨＴＭＬのバージョンには1.0と1.1があり、さらに1.0に「Strict」、「Transitional」、「Frameset」という３つの文書型がある。
●Ｓｔｒｉｃｔ ・・・・・・ 最も厳格で見栄えに関する、要素、属性を認めない。
●Ｔｒａｎｓｉｔｉｏｎａｌ・・・ 移行型、これまでのＨＴＭＬで利用されてきた、見栄えにに関する要素、属性を認める。
●Frameset ・・・・・ フレームアウト向けの要素、属性までも認める。
実務的には「XHTML1.0 Transitionｌ」を採用するのが一般的。
文書型宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org
/TR/xhtml1/DTD/xhtml-transitional.dtd">
XHTML全体像(本に載っていたのをそのまま使うのはよくなさそうなので、同じような図を描いて貼り付けました）
（XMLはXHTMLだけではなく、RSSやAtomなど様々な言語の上位に位置するメタ言語）
<?xml version="1.0 encoding="UFT-8?> 。。イマイチ理解できてない。。
●文書型宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
●html要素・・xmlns属性 xml:lang属性 lang属性を指定。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
XHTMLではひとつの文書の中で、他のマークアップ言語を複合的に利用することが出来るため、それぞれの言語で同じ名前の要素や属性が使用されていた場合に衝突を避けるため、どの文書型の要素と属性を参照するかを指定するのが、xmlns属性。
XHTMLの場合は「http://www.w3.org/1999/xhtml」という値がきまっている。
xml:ｌang属性とlang属性ではページ全体で利用する言語コードを指定。日本語は「ja」英語は「en」
フランス語は「fr」、ドイツ語「de」、韓国語「ko」
●head要素・・htmlの子要素。「そのページの基本情報」ブラウザでは基本的に表示、表現されない部分。ページタイトルを指定する title要素、メタ情報（そのページ全体に関わる基本データ）を指定する meta要素、文書間関係を指定する link要素などを含める。
●body要素・・「ページ本文」ブラウザで表示、表現される部分。具体的なコンテンツはここに含まれる。見出しを意味する h1 ～ h6要素、コンテンツの大まかな範囲を示す div要素、段落を示す
p要素、リストを定義する ulやol要素、表を示す table要素、フォームを定義する form要素など。
ページタイトル（title要素）
head要素の中で必ず一度だけ指定。
通常、トップページではサイト名とともに「-」（ハイフン）で繋ぎ、キャッチコピーなどを含めておく。
カテゴリートップでは「カテゴリー名とサイト名」個別ページでは「ページ名、カテゴリー名、サイト名」を含めて「｜」（パイプ）で繋いでおく。
例）トップページ <title>スイートレシピ - ケーキやクッキーなどのレシピ紹介</title>
カテゴリートップ <title>クッキーのレシピ|スイートレシピ</title>
個別ページ <title>チョコチップクッキーの作り方|クッキーのレシピ|スイートのレシピ</title>
メタ情報(meta要素）
そのページに関するメタ情報は meta要素で指定。 http-equiv属性、または name属性を指定し、 content属性で具体的な値を指定。
多くの要素では、開始タグと終了タグで内容を囲むが、meta要素のように内容を持たない要素
（空要素）は簡略終了タグを用いて、「<meta />」と記述。
http-equiv属性では、そのページの種類(text/html）スタイルシートの種類（text/css）スクリプトの種類（text/javascript）などを指定、title要素よりも先に指定する。
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type"content="text/css" />
<meta http-equiv="Content-Script-Type"content="text/javascript" />
name属性を指定した場合、ページ概要文（description）やキーワード（keywords）製作者（author）
著作権保有者（copyright）など製作者側が指定したいデータをメタ情報として定義 tite要素よりも後
<meta name="description" content="ページの概要文" />
<meta name="keywords" content="キーワード１、キーワード２、キーワード３" />
<meta name="author" content="株式会社～～" />
<meta name="copyright" content="Copyright &Copy;～～Inc." />
なお、http-equiv属性で指定するページの種類では（text/html）文字コードを一緒に指定しておくのが一般的で、日本語のページの場合は「ＵＴＦ-８」「Shift_JIS」「EUC-JP」などの文字コードが利用される。
文書間関係（link要素）
そのページから見て、他のページやファイルがどのような役割かを定義する。空要素。
例えば、スタイルシートやRSSファイル、目次やヘルプにあたるページ、日本語以外で作成したページなどを指定。
rel属性で関係、href属性でURL、type属性でMIMEタイプ、media属性でメディアタイプを指定。
※MIMEタイプ・・「text/html」といったクライアントとサーバー間のやりとりのフォーマットを、メディアタイプはCSSなどの適用メディアを指す。 。。いまいちわからず。。。
スタイルファイルシートの指定
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" />
RSSファイルの指定
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="feed.xml" />
トップページやヘルプページの指定
<link rel="contents" href="index.html" title="ホーム" />
<link rel="help" href="guide/help.html" title="ヘルプ" />
日本語以外の言語で製作したページの指定
<link rel="alternate" type="text/html" href="index-en.html" hreflang="en" />
スタイルシート(style要素）は、ソースコードを直接XHTMLに記述してしまうと、構造に無関係な情報がXHTMLに含まれることになるので、link要素を使って外部ファイルから読み込むほうが望ましい。
CSSはstyle要素や、style属性でも適用できるが、構造と見た目の分離が徹底できない、CSSを外部ファイルで一括管理できないといったデメリットがあるので、style要素、style属性は利用せず、CSSは外部ファイルにまとめておくのが原則。
javascriptも記述せず、外部から読み込む。
今日はここまで、あんまり理解できてない部分もかなり多い。。。
0 件のコメント:
コメントを投稿