MAJIDEKA.COM -Lesson 01-

初心者にもわかりやすいWEBサイト作成お助けサイトです。

はじめに
準備すること
(X)HTMLの構造
『title要素』
『meta要素』
『link要素』
文字コード
特殊文字

はじめに: これから(X)HTML((Extensible) Hyper Text Markup Language)というコンピュータ言語によってWEBサイトを作成するための準備に入りたいと思いますが、その前に少しだけHTMLについて簡単に注意点だけ書いておきたいと思います。

(X)HTMLを記述するうえでの注意点

(X)HTMLは半角英数文字でできた“タグ”と呼ばれるものを使用するのですが、その際、半角英数文字の大文字で記述するのか小文字で記述するのかを決めて、どちらかで統一してください(このサイトでは小文字で記述しております)。それから、タグはブラウザには表示されません。

また、タグは入れ子構造で記述してください。入れ子構造とは、例えば<p><b>太字</b></p>のような構造のことです。いくつかのタグは入れ子構造をしていなくても効果が得られますが、必ず入れ子構造で記述してください。

準備すること: これから(X)HTMLを記述していくわけですが、何に記述していくのか？そして、何によって記述したものを確認するのか？が問題になります。

制作ツール: プロの現場でも採用されていて有名なものにAdobe社のDreamweaverというものがあります。また、無料で配布されているテキストエディタにTeraPadなどがあります。Windowsのメモ帳やMacintoshのSimple Textでも構いません。

WEBブラウザ: WEBブラウザとはMicrosoft社のInternet Explorer、Mozilla社のFirefox、Apple社のSafari、Google社のGoogle Chrome、Opera Software社のOperaなどのコンピュータ上の情報を表示し閲覧に供するソフトウェア一般のことです。

FTP: FTP(File Transfer Protocol)とはインターネットやイントラネットなどのTCP/IPネットワークでファイルを転送するときに使われるプロトコルのことで、ウェブページ用各種データファイル（(X)HTMLソース、CSSファイル、画像など）をWEBサーバーへアップロードするものです。これがないとせっかく記述した(X)HTMLソースなどを公開することができません。レンタルサーバーを借りたなら、そのWEBサイトのFTPでアップロードすることもできますし、FFFTPという無償のソフトウェアを使用することでアップロードすることもできます。

フォルダ(ディレクトリ)の作成

制作ツールとWEBブラウザ用意ができたら、フォルダ(ディレクトリ)を作成しましょう！フォルダとは、これから作成するHTMLファイルを格納しておくところです。

それではフォルダを作成してみましょう。

C:ドライブでもD:ドライブでもマイドキュメントでもいいので作成する場所を決めましょう！
作成する場所が決まったら、ウィンドウのツールバーから[ファイル]を選択してください。
[ファイル]を選択したら、[新規作成]→[フォルダ]を選択してください。
何でもいいので好きな名前でフォルダを作成してください。ただし、記号はドット(.)、ハイフン(-)、アンダーバー(_)ぐらいしか使用できません。また、スペース(空白)も使用できません。
新しくフォルダが作成されたら、それでOKです。

これからは、このフォルダにHTML文書や画像を保存していきます。もちろん、その他のフォルダ同様にサブフォルダ(フォルダの中にあるフォルダのこと)を作ることも可能です。

拡張子の表示をオンにする(Windows)

拡張子とは、ファイル名のあとの.txtや.htmlなどのことです。拡張子の表示をオンにしていないと、メモ帳やTeraPadで記述したテキストは全て.txtで保存されてしまいます。

それでは拡張子の表示をオンにしてみましょう。

コンピュータを開いてください。
開いたらウィンドウのツールバーから[ツール]を選択してください。
[ツール]を選択したら、[フォルダオプション]を選択して、[表示]タブを選択してください。
詳細設定の中の「登録されているファイルの拡張子は表示しない」のチェックを外してください。
チェックをはずして[適用]→[OK]ボタンをクリックしたらOKです。

これで拡張子が表示されるようになります。

(X)HTMLの構造: まず(X)HTMLの全体像を把握しましょう。(X)HTMLは『XML宣言』、『文書型宣言』、『html要素』の3つのブロックで構成されており、さらに『html要素』は『head要素』、『body要素』に分けられます。

『XML宣言』

(X)HTMLがXML(Extensible Markup Language)の一種であることを示すための指定で、必ず文書の先頭に記述します。

<?xml version="1.0" encording="UTF-8"?>

『文書型宣言』

そのページが(X)HTMLのどのバージョンに基づいて構成されているものかを示すもので、<!DOCTYPE>を使用して宣言するものです。また、文書型宣言にはいくつかのバージョン(Strict、Transitional、Frameset)があり、バージョンごとにそれぞれ異なるためどの宣言が適しているか(準拠されているか)をきちんと把握したうえで宣言しなければなりません。

もっとも厳格で見栄えに関する要素や属性を基本的に認めていないのが"Strict"です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

これまで利用されてきた見栄えに関する要素や属性を基本的に認めているのが"Transitional"です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

フレームレイアウト向けの要素や属性を認めているのが"Frameset"です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

『html要素』

ページ内において全ての基点となる最上位要素で、子要素に『head要素』と『body要素』置き、これらの要素の中に具体的な内容を記述することになります。なお、『html要素』には、"xmlns属性"、"xml:lang属性"、"lang"を指定しておきましょう

『head要素』

『head要素』の範囲にはページの基本情報を記述しますが、ブラウザでは表示・表現されません。なお、『head要素』には、ページのタイトルを指定する『title要素』、ページ全体に関わる基本データを指定する『meta要素』、文書間関係を指定する『link要素』などを含みます。

<head>

</head>

『body要素』

『body要素』の範囲にはページの本文を記述し、ブラウザで表示・表現される部分であり、具体的なコンテンツを含みます。なお、『body要素』には、見出しを意味する『h1～h6要素』、コンテンツの大まかな範囲を示す『div要素』、段落である『p要素』、リストを定義する『ul要素』や『ol要素』、表を示す『table要素』、フォームを定義する『form要素』など本文を構成する様々な要素を含みます。

<body>

<div>

<ul>

<li>

</ul>

<table>

<tr>

</tr>

</table>

</div>

</body>

『title要素』

ページのタイトルを指定します。『head要素』の中で必ず1度だけ指定し、指定しなかったり、複数指定することは認められません。タイトルはブラウザのタイトルバーに表示されるほか、音声ブラウザで最初に読み上げられたり、検索サービスで検索結果ページに表示されるので、具体的でわかりやすい内容にすることが望ましいです。

<title>オリジナルTシャツショップ Helios(ヘリオス)</title>

『meta要素』

ページ全体に関わる基本データを指定します。http-equiv属性またはname属性を指定し、content属性で具体的な値を指定します。多くの要素では開始タグと終了タグで内容を囲みますが、『meta要素』のように内容を持たない要素は、簡略終了タグを用いて記述します(<meta />)。

http-equiv属性では、そのページの種類(text/html)、スタイルシートの種類(text/css)、スクリプトの種類(text/javascript)などを指定しておくのが一般的です。これらは通常『title要素』よりも前に指定します。

name属性では、ページの概要文(description)やキーワード(keyword)、制作者(author)、著作権保有者(copyright)などの制作者側が指定したいデータを定義します。これらは通常『title要素』よりも後に指定します。

『link要素』

そのページから見て、他のページやファイルがどのような役割かを定義します。『meta要素』同様に簡略終了タグを用いて記述します(<link />)。

rel属性で関係を、href属性でURLを、type属性でMIMEタイプを、media属性でメディアタイプをそれぞれ指定します。

文字コード

『meta要素』のcontent属性で指定する文字コードには日本語に対応したものや各国に対応したもの、アメリカに対応したもの、西欧に対応したものなどがあります。

コード名	意味
Shift-JIS	日本語コードで、WindowsやMacintoshで使用されている文字コード。
EUC-JP	日本語コードで、UNIXで使用されている文字コード。
iso2022-jp	日本語コードで、日本語コードの基本となるもの。
utf-8	各国の文字やアクセント記号、漢字の利用可能。
ASCII	アメリカ標準の文字コードで、全てのコードの基本となるアルファベットや記号が含まれる。
ISO-8859-1	西欧諸語コードで、Latin1と呼ばれるコード。

特殊文字

タグで使用される<や>、その他&や"、半角スペースなどはそのまま記述しても表示されません。そのため&と;の間にその内容を表すキーワードを記述することで表示させます。

記号	文字参照	意味
<	<	小なり(Less Than)
>	>	大なり(Greater Than)
&	&	アンド記号(AMPersand)
"	"	二重引用符(double QOUTation)
		改行禁止スペース(No-Break SPace)
±	±	プラスマイナス(PLUS or MiNus)
©	©	著作権マーク(COPYright)
®	®	登録商標(REGistered trademark)
™	™	商標(TRADEmark)

<<HOME || Lesson 02>>

▲PageTop