| ひとつ前に戻る |
やはり、気は進まないが、基本的なＨＴＭＬのことは触れねばならないでしょう。
以下、順に基礎の超基礎のみ、書き出します。 |
| ここで表記されている内容は、ウィンドウズユーザーを念頭に置いています。 |
| <html> |
まずはこれ。これから書き出すファイルがhtml属性であることを宣言します |
<html>は、ホームページのソースをごらんになると分るように、ページの頭と終わりについています。
|
極端な表現をすれば、
<html>
〜
</html> |
左のタグ表現で、<html>と</html>の間で記述された内容が、ホームページの内容ということになります |
|
| 次に、ヘッダーの記述です。これは説明すると長くなるのですが、最も簡単なヘッダー表現だと以下のようになります。 |
<head>
<title></title>
</head> |
<tiltle></title>の間に入ったテキストが、ＩＥならブラウザ左上端にタイトルとして表示されます。実際の表示は、以下のようになるはずです。また<head>と</head>の間の記述は、基本的にはページ本文には書き出されません。
これは、ちょっと極端な言い方になりますが、これを憶えている段階では、そのように捉えた方がいいと思います。
|
 |
画像解像度が低いのでわかりにくいかもしれませんが、ヘッダーで記述されたタイトルは本文中での表記にはなりません。ただ、第３者がそのページを「お気に入り」登録した場合などには、このページタイトルが貴方の作成したＨＰのタイトルとして登録されます。 |
|
次に本文の記述です。本文は、これも単純な記述を選びますが、
<body>
〜
</body> |
左の記述のうち、<body>と</body>の間に記述された内容が、ホームページ本文の内容となります。 |
| いままでの内容を簡単にまとめると、以下のようになります |
<html>
<head>
<title></title>
</head>
<body>
</body>
</html> |
いささか、極端な言い方になりますが、これがもっとも基本的なＨＰの形です。左の記述では、タイトルも、本文も記述されていない為、これでファイルを作成しても、何も表記されないはずです。 |
|
では、もっとも単純なＨＰをひとつ作ります。
本文に「サル」と書き出され、ページタイトルは「赤いお尻」としてみましょう（私の趣味です^_^;）
まず、ウィンドウズなら付属しているメモ帳、もしくはテキストエディタを起動します。
メモ帳を起動させたら、記述を開始しますが、ページタイトルと本文テキスト以外は、半角英数にて記述します。 |
<html>
<head>
<title>赤いお尻</title>
</head>
<body>
さる
</body>
</html> |
|
記述し終えたら、「名前をつけて保存」します。ファイル名は任意で結構ですが、必ず半角英数でお願いします。また、記号のうち,/@,：；などは使用できません。保存の場所は、任意でかまいませんが、分らなければ、デスクトップかマイドキュメントに保存。また、保存の際ファイル名の後に拡張子として「.html」とも記述してください。これで作成したファイルは、htmlファイルとして保存されました。
また、テキストファイルとして保存した方は、ファイルを右クリックしてからメニューから「名前の変更」を選択してもファイルのhtml化は可能です。その際、ウィンドウズの設定上、拡張子が表示されていることが前提です。デフォルトの設定から変更されていない方は、「コントロールパネル」→「フォルダオプション」を選び、「ファイルの表示」にある「登録されている拡張子は表示しない」に入っているチェックを外すことをお奨めします。 |
さて、以上の作業を実行したら、作成したファイルを開いてみます。きちんと本文とタイトルが表示されたでしょうか？されたなら、次に、このファイルを少し編集してみます。編集する場合には、ファイルを右クリック。メニューから「プログラムから開く」を選択し、リストの中から「メモ帳（Note
Pad）」を選択します。「メモ帳」の編集画面に、さきほど入力したＨＴＭＬが表示されます。この編集画面を使って、今度は、先ほど入力した「さる」というテキストに手を加えてみます。
「さる」と単純な単語表記から、 |
|
|
| と、段落をつけた文章にします。ワードなどを扱うように、改行してまずは文章をいれます。そして |
さるは<br>
去る |
左の表記のように、改行する部分に<br>というタグを挿入します |
|
| いまのタグを入れたhtmlファイルは、以下のような表記になります |
<html>
<head>
<title>赤いお尻</title>
</head>
<body>
さるは<br>
去る
</body>
</html>
|
この記述が終わりましたら、上書き保存をしてから、ファイルを閉じ、作成したフィルを開いてみてください。きちんと改行した文章になっているでしょうか |
|
一応、ここはテキスト系ＨＰと言うこと建前もあるので、文字の表現をもう少しだけ説明します。
今度は、さるという字を大きく
さる
としたり、色をつけて
さる
と表記したりします。この表現には、<font>というタグを用います。
大きさを変えたい時には、<font size=> 色を変えたい時には、<font
color=> というタグを挿入します。まず、サイズの変更は |
| <font size="+2">さる</font> |
標準文字サイズを"0"として、サイズを決定し、</font>でくくります。
大きくしたい時には、”+*” 逆に小さくしたい時には”-1” "-2"という表記になります。
|
|
| 次に色の変更です。先ほどの<font color=>の後に、カラーコードを入れて、ダブルフォーテーション（”）でくくります。例えば、赤ならからーコードは、#FF0000となります。ですから、色を赤くしたい時には |
| <font color="#FF0000">さる</font> |
|
| さらに、色と大きさ、両方を指定することも出来ます。 |
| <font size="+2" color="#FF0000">さる</font> |
|
i色、サイズと属性の異なるタグを入れる場合、上記の記述のように、半角スペースで区切ります。
また、色、サイズとともに書体を変えることも出来ます。その場合には、<face=>という記述が入り、表現したい書体をダブルフォーテーション（"）でくくります。例えば、サイズがプラス２、色は赤、書体は、ＨＧ創英角ポップ体としたい時には、以下のような記述です。 |
| <font size="+2" color="#FF0000" face="HG創英角ﾎﾟｯﾌﾟ体">さる</font> |
|
| もうひとつ、この書体をさらに太字にしたい場合には、 |
| <font size="+2" color="#FF0000" face="HG創英角ﾎﾟｯﾌﾟ体"><b>さる</font></b> |
|
| と<b>と</b>で文字列をくくります。以上のこと、試してみてはいかがでしょう？ |
|
さて、少しは参考になりましたでしょうか？
なにぶん、私自身も色々と勉強中の身ですし、実際には、アプリケーションを使うことの方が多いのですが、多少なりともタグを知っていると、アプリケーションの使い勝手もいくらかは、違ってくるのではないかと思います。また、インターネットでは、親切な入門サイトがたくさんありますし、これ以上の説明については、むしろそういったサイトを参考にされた方がよろしいかと思います。 |
|
| 最後に、こちらのコーナーでは、タグ編集の際、テキストエディタを使用しています。このテキストエディタに関しては、タグの編集だけなら、ウィンドウズなら「メモ帳」。マックなら「シンプルテキスト」で十分ことは足りるのですが、世の中には様々な高機能テキストエディタがあります。ＨＴＭＬ編集だけに囚われず、色々な用途に使用できそうな高機能テキストエディタを２つほど紹介しておきたいと思います。 |
|
ＲＩＭ ＡＲＴ
|
私が使用しているテキストエディタ「ＤＡＮＡ」を提供する RIM ART のサイト。但し、シェアウェアです。無料ソフトではありませんので、ご注意を！！ |
| TERA PAD |
フリーソフトじゃないとイヤだ！という方にお奨め。
非常に使いやすいテキストエディタです。とても、フリーとは思えない内容。窓の杜のダウンロードサイトです。 |
|
| 他にも有名な秀丸エディタなどがありますが、あくまでも自分が実際に使ったものだけをセレクトしてみました。 |
|
| ひとつ前に戻る |