|
HTMLはホームページを作成するために必要な言語です。これはCERN（欧州原子核研究機構）で開発されたハイパー・テキスト・システムを起源にしています。HTMLは、コンピュータの種類やOSに依存しない、情報交換手段であり、現在のインターネット世界では必修の言語です。 |
|
【例１-１】 実際にホームページを作成するとき、左のように記述します。これは、ブラウザの見出しにSAMPLEと表示し、ブラウザ画面に「HELLOW SAMPLE」と表示するものです。 |
<html> |
【例1-1】をサンプルにして、HTMLの説明をします。
０．< >で囲まれる文字列をｔａｇ（タグ）といいます。tagは大文字、小文字のどちらで書いてもかまいませんが小文字で書くことを薦めます
１．HTML形式の文章の宣言のしかた
|
HTMLの文は必ず<html>で始まり</html>で終わります |
<html> この部分にhead部、body部を記述 </html> |
２．HTML文書では必ず、最初にヘッド部、その次にボディ部を記述します
| ヘッド部は <head> で始まり </head> で終わります |
<head> </head> |
| ボディ部は <body> で始まり </body> で終わります | <body> </body> |
<html>、<head>、<body>を構造tagといいます。
ＨＴＭＬ文として機能するには、必ず書かなくてはならないタグであるため構造タグといいます
３．ヘッド部にはブラウザの見出し部(タイトルバー）やなどを記述します
|
３．１ ＴＩＴＬＥ（ＨＥＡＤ部に一度しか記述できません） 実際に見出部にSAMPLEという文字を表示するには<TITLE>と</TITLE>との間に表示したいSAMPLEという文字を記述します |
| <head> <title>SAMPLE</title> </head> |
<title> </title>tag は、<head> </head>のtagの中に書かれています
このようなtagを、inside tag（インサイドタグ）といいます
|
３．２ ＭＥＴＡ要素 （終了タグはない）（ＨＥＡＤ部に複数行記述可能）（ＷＥＢに表示されない） メタ情報（ＨＴＭＬ文書に関するデータ）を記述します。次に例示します |
| （１） <META http-equiv="content-type" content="text/html;
charset=ISO-2022-JP"> （２） <META name="keywords" lang="ja" content="岸田ゼミ,簿記,管理会計"> （３） <META name="description" lang="ja" content="ゼミの指導方針"> |
| (1) | content="text/html; は、この文書がHTML文書であることを示します。 charset=ISO-2022-JP"は、使用する文字が日本語であることを示します。 表示する文字が化けやすいとき、指定しておくとトラブルを回避できます。 |
| (2) | YahooやＧｏｏｇｌｅなどの、多くの検索ロボットは、contentで指定した文字をキーワードとして登録します。この機能を利用して作成したホームページなどを多くの人に利用してもらうため、キーワードを登録しておきます。 キーワードはコンマで区切ります。例では、"岸田ゼミ"、"簿記"、"管理会計"がキーワードになります。 ただし、キーワードとして登録するか否かは検索ロボット次第ですので、そのようにならないときもあります。 |
| (3) | 検索ロボットの中には、contentで指定した文字を「サイトの紹介文」として表示します。 |
|
３．３ STYLE 埋め込みスタイルシートがあることを指示します。後に学習するCSSで使用します。 |
| <style> </style> |
|
３．４ SCRIPT JavaScriptなどのスクリプト言語を記述します。後に学習します。 |
| <script type="text/javascript"> function func(){ この部分にプログラムを書きます } </script> |
４．ボディ部にはブラウザに表示する本文を記述します
下の例では HELLOW SAMPLE と画面に表示します
|
<body> HELLOW SAMPLE </body> |
|
なお、HTMLを作成中に、次の例のように半角スペースを続けて空白を作成しても、ブラウザでは空白の表示しません。これは、ブラウザが半角空白文字は１文字分は表示するものの、それ以上は無視するためです。どうしても、文字の間隔を空けたいならば全角スペースを使用します。 |
|
<body> HELLOW SAMPLE </body> |
【練習問題】 実際にHTML文を作成しましょう。
【例１-１】のHTML文を、エディタを使用して作成し、rensyuu1.html と名前を付けて保存します【応用問題】
見出部、本文に表示する文字を、いろいろ変更して表示内容を確認しなさい
【例１-１】の実行例は、ここをクリックすると見ることができます