HTMLの基本
| HTMLの基本 ↓ |
|
※HTMLの基本構造については「こちら」を参照して下さい。 Webページ（HP）はHTMLというものを使って記述します。このHTMLはタグといわれるものを使ってテキストに 色や形・レイアウトなどの指示を書き込んでコンピュータがその情報を読み込み、ブラウザ（Internet Explorer や Netscape など）で表示するというものです。 このタグを使ってさまざまなデザインを作ります。タグによってはブラウザのメーカーが独自に追加したタグもあるので、注意が必要です。Internet Explorerの<marquee>やNetscapeの<blink>などが一例です。 あまり神経質になる必要はありませんがブラウザによって表示されないので、何種類かのブラウザで確認したりタグについて情報収集などすると良いでしょう。 HTMLの基礎HTMLの基礎構造
HTMLの基本的な構造です。このようにHTMLタグのかたまりを要素といいます。一つの文章で考えるなら、まず最初に見出しがあります。この後に本文となり、本文の中にはリストやテーブルなどを配置するでしょう。 このようにいろいろな要素があつまり、一つの文章が出来上がります。 これをコンピューターに理解させるためにそれぞれの要素に専用のマークをつけます。この要素を示すマークがタグです。 タグは開始タグと終了タグがあり、内容を挟んで記述します。 但し、空要素といって開始タグだけ（<img>・<br>など）のタグもあるので注意しましょう。 特に難しいことを憶えなくても、私のように個人で楽しむホームページならコピー&ペーストで十分でしょう。 大文字小文字HTMLで使われるタグなどは大文字小文字を区別しませんが、URLやJavaScript 、文字コード名などは大文字小文字を区別するので、注意して下さい。 タグは入れ子にできるタグによっては、タグで囲んだ文字列の中に別のタグやテキストを入れて、入れ子にすることが出来ます。たとえば以下のようになります。 <p align="center">T,N,O〜タダでネットで<b>お小遣い</b></p> こんなふうに→→→T,N,O〜タダでネットでお小遣い ページ自体をテーブルなどで入れ子として、またその中にテーブルを配置してテキストやバナーなどを貼り付けると、それぞれの位置がそろってきれいに見えます。
<html> bodyタグの直後に立て一列・横一列のテーブルを配置し、このテーブルの中にページ全体を収めます。 tableの横幅をwidth要素で指定すれば、ページの横幅を一定に保つことができます。ページ内に別のテーブルを配置する場合も、テーブルが入れ子になっていると考えれば問題ありません。 ページ全体を収納するborder要素を「0」に指定すると、ページ全体を囲む枠線が表示されないようになります。デザインとして枠線を表示したい場合は、数字を変えれば好きな太さにできます。 引用符属性の値には引用符というものを付けます。上記のHTMLの基礎構造を見てください。 場合によって省略できますが、引用符はできるだけ省略せずに付けるほうが良いでしょう。 コメントアウトHTMLでは、「<!--」と「-->」で挟まれた部分はブラウザに表示されないので、編集する時の目印になるメモや一時的に隠したい部分などに使用します。 例：<!--ここからテーブル--> 〜 <!--ここまで--> <! と -- （ハイフン2つ）の間には空白をいれない。 色の指定HTMLで色を指定する方法は二つあります。ただし、色の指定はスタイルシートを利用することが推奨されているようです。 基本的な16色
色の指定は16進数か色名で指定します。 例：<font color="#ff0000">赤を指定</font> このように表示→赤を指定 例：<font color="red">赤を指定</font> このように表示→赤を指定 その他の色
色の上にカーソルを合わせて下さい。下の窓に色の値が表示されます。そのままマウスの左をクリックしてカーソルを移動します。 HTMLの作り方必要なもの（ソフトについての詳細は便利ツールを参照）テキストエディタ HTMLはテキストファイルですからWindowsに付属のワードパッドやメモ帳などで作成することができます。 手書きで作成するのが難しい場合は、ホームページ作成ソフトなどがあるので利用すると良いでしょう。 また、作成ソフトはフリーのものでも素晴らしいものもあるので、自分に合うものを探すことをおすすめします。 画像編集ソフト ホームページを作成する時、画像などを上手に使うと、とても素敵なページになることがあります。通常GIF・JPEG・PNG形式となるため、これらの画像を扱える編集ソフトが必要です。 FTPソフト 作成したHTMLファイルや画像などをプロバイダのサーバに転送するときに使います。こちらもフリーで素晴らしいものがあるので、ご自分で使いやすいものを探すと良いでしょう。 プロバイダ・サーバ ホームページを公開するためには接続サービスを提供するプロバイダと、作成したファイルを置くサーバが必要となります。 たいてい、プロバイダがタダでホームページスペースを提供しているので、個人のホームページならこれらで十分でしょう。 ただし、商用の場合はほとんど禁止されているので利用規約をよく読んで利用しましょう。また、スペースの容量や繋がりやすさ・CGIが利用できるかどうかなども検討すると良いでしょう。 ※プロバイダ・サーバの詳細はこちらを参照して下さい。 ファイルを作成するメモ帳などのテキストエディタに、サイト名や内容と、それをブラウザで表示させるためのタグを記述していきます。
<html>
このようにHTMLはそう難しいものではありません。段落や改行、テキストの色や大きさなど、それぞれのタグを記述していけば簡単にホームページを作成することができます。 ファイルを保存する作成したファイルを保存します。ファイル名は半角アルファベットで、拡張子は .html か .htm（各サーバーにて確認） とします。 保存したファイルをブラウザで読み込む（ファイルをダブルクリックでOK）とWebページが表示されます。 サーバに転送するFTPソフトやHTMLエディタのファイル転送機能を使って、作成したファイルをサーバに転送します。 画像などを使用している場合は画像ファイルも転送します。サーバに接続する設定はプロバイダにより違うので、確認が必要です。 確認してみましょうブラウザを使って、サーバに転送したファイルがちゃんと表示されるか確認しましょう。 HTMLのバージョン指定実際にHTMLを作成する場合、どのバージョンで作成するのかを宣言する必要があります。これらは、文書の一番最初に記述します。（ <html> の上） HTML4.01 Strict Dtd推奨しない要素や属性は除かれていて、フレームも使用できません。厳しい制約があるので、文書の作成が難しい。 <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01//EN" HTML4.01 transitional Dtd推奨しない要素や属性（視覚的なものなど）が含まれます。フレームは使用できません。今のところ、こちらを記述してあれば問題ないでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN" HTML4.01 Frameset Dtdフレームを使用する場合。 <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Frameset//EN" ※後半のURLは省略することもできますが、ブラウザなどによっては表示が変わる場合があるので注意。 このように、決まりごとを守り、テキストやテーブルなどを記述すれば誰でも簡単にホームページを作成することができます。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
