HTMLってなに??
HTML[HypyerTextMarkupLanguageの略 ]
ホームページを作る為の記述言語です
インターネット上で閲覧できる殆どのファイルはHTMLで書かれています
言語と言うとC言語のような難しい物を想像してしまいますが
中身はタグと呼ばれる文章の表示の仕方や役割を命令する記号の集まりです
基本的なタグさえ覚えてしまえばそう難しい物ではありません。

タグってなに??
ためしにこのページの上で右クリック→「ソースの表示」を選ぶと
以下のようなメモ帳が開いたはずです・・・

これを見て「アチャ〜!ダメだこりゃ!」なんて思わないで下さい
<>で囲まれたローマ字が入っているのがタグです
基本的には表示させたい文字を<>〜〜</>ではさみます
</>は「タグの命令がここまでですよ」と言う意味です
例)<font>フォントの指定</font>
<b>(文字を太字にする)や<hr>(水平線を引く)<br>(改行する)など
</>は使わずに単独で使用する物もあります。

タグの書き方
タグは要素名属性、属性値から成り
要素名は命令そのもの、属性はその命令を具体的に表したもの、属性値はその値です
文章ではわかりにくいと思いますので<table>というタグを例にとってみます

<table width="80%" bgcolor="yellow">


先頭のtableが要素で「テーブルを作れ」という指定
widthが属性で幅を・・・・
80%が属性値で80%に・・・
bgcolorが属性で背景色を・・・
yellowが属性値でイエローに・・・といった感じです。


HTMLの基本構造
どんなにカッコイイホームページでも基本的な構造は全て同じです
<html>→「このファイルがHTMLですよ〜」と宣言!
<head>→ヘッダーと呼ばれる部分でページに関する情報を入れる部分
</head>→ヘッダーの終了
<body>→ページとして実際に表示される部分
</body>→ボディタグの終了
</html>→HTMLの終了

タグのお約束
1,ファイルの全体は<html>〜〜</html>で囲んでね
これでブラウザは読み込んだファイルがHTMLで書かれている事を認識します

2,タグは半角英数で!
タグを記述する時の入力モードは英数字入力モード(ローマ字入力)で行います

ローマ字入力であれば大文字でも小文字でもどちらでもかまいませんが混乱を避ける
為どちらかに統一したほうがいいでしょう(私は極力小文字で統一しています)

3,単独で使われるタグ以外は開始タグと終了タグは一対で
終了タグ</>は忘れる事がある(閉じ忘れ)ので要注意!

4,複数の属性
属性を複数指定する場合は
半角スペースをあけて記述。
<font size="4" color="#3366CC"></font>
5,ファイルの拡張子
HTMLファイルを保存する時は拡張子を必ずhtmlかhtm
テキストファイルとして保存してください

6,終了タグは正しい位置に
種類の異なるタグを同じテキストに使う時それぞれのタグの位置関係は
正しい入れ子の関係である事が必要です
ブラウザ側では厳密に解釈せず終了タグさえあれば表示されますが
正しい記述を心がけましょう
○正しい例
<font size="5"><b>タグは正しく書こう</b></font>
×悪い例
<font size="5"><b>タグは正しく書こう</font></b>

拡張子って??

エクセルやワードでファイルを作り名前をつけて保存すると付けた名前の最後に
共通のローマ字が現れます。
それが拡張子と呼ばれるもので、ファイルの形式を表しています
エクセルなら.xls ワードなら.doc という拡張子が付きます
(パソコンの種類や設定によっては拡張子が表示されない場合もあります)

ホームページ作成時のリンクの指定や画像の表示などで
拡張子を使う機会は多いです、以下の表を参考にしてください
インターネット上で使用される主な拡張子
ファイル形式拡張子内容
HTML.html(.htm)インターネットファイル
GIF.gif画像ファイル
JPEG.jpg画像ファイル
BMP.bmp画像ファイル
PNG.png画像ファイル
MIDI.midMIDIサウンドファイル
Flash Player.swfフラッシュムービーファイル
Shockwave.dcrムービーファイル
QuickTime.movムービーファイル
LZH.lzh圧縮ファイル
ZIP.zip圧縮ファイル

拡張子の表示設定
拡張子はデフォルト(初期)状態では非表示となっています
ホームページ作成において「画像」「音楽」「CSS」「javascript」等など
多くの種類のファイルを扱う機会があり、拡張子は表示させておくほうが
編集上わかり易いうえ、リンクミス等を防ぐ事ができます

拡張子非表示の場合


拡張子表示の場合


設定方法(WinXPの場合)
1)先ず、適当なフォルダを開いて、メニューバーから「ツール」「フォルダオプション」
を選択して下さい


2)フォルダオプション画面の「表示タブ」をクリック


3)「詳細」の登録されている拡張子は表示しないのチェックを外す

以上で設定は完了です。全てのファイルの拡張子が表示されている事を確認してください


HTMLファイルを作ってみよう
それでは簡単なHTMLファイルを作ってみましょう!
先ずはメモ帳を起動します。ウィンドウズメニューの
【スタート】-【プログラム】WindowsXpの場合は全てのプログラム-【アクセサリー】
からメモ帳を選びます

次にローマ字入力モードで以下のHTMLファイルの骨組みのタグを入力します
<html>
<head>
<title>テストのページ</title>
</head>
<body>ようこそタグタグワールドへ! </body>
</html>

入力が出来たらファイルメニューから【名前をつけて保存】を選び
ファイルの種類を「すべてのファイル」
ファイル名をtest.htmまたはtest.htmlに 保存先はデスクトップがわかりやすいでしょう。
重要なのはファイル名の次にカンマを打ち拡張子をhtml(htm)とする事です

うまく保存されるとデスクトップにtestというHTMLファイルが保存され

ダブルクリックで開くと「ようこそタグタグワールドへ!」と表示されているはずです
注)実際のホームページ作成では先ず
ホームページファイルを一まとめに入れるフォルダを作り
新しく作ったファイルはそこに保存します
    新規フォルダ作成方法(デスクトップに作成の場合)
  1. デスクトップ上で「右クリック」「新規作成」から「フォルダ」を選択
  2. フォルダ名を付けます、仮にhome_pageとします
  3. ファイル保存時は「保存する場所」を「デスクトップ」から「home_page」に!
このようにメモ帳でタグを編集してブラウザ(インターネットエキスプローラや
ネットスケープといったインターネット閲覧ソフト) の更新ボタンを押せば
すぐに結果を確認しながら作業できます。

HTMLファイルの編集
HTMLファイルの作成や編集はウィンドウズ付属のメモ帳でも充分なのですが
JavaScript等を組み入れてソースが複雑になってくると
テキストエディタ(ソース編集用ソフト)が便利です
フリー(無料)で高機能なソフトも沢山あるようですからタグ編集に慣れてきたら
是非使ってみて下さい

ダウンロードサイト Vector窓の杜でダウンロードが可能です
秀丸シェアウエアWin用定番テキストエディタです
TeraPadフリーウエア初心者から上級者まで使えるフリーで多機能なエディタ
MKEditorフリーウエアタブ切り替え型テキストエディター
ez-HTMLフリーウエア次世代対応HTMLエディタ XHTMLにも完全対応
EmEditorシェアウエア軽快に使える多機能テキストエディター

for inqures and comments, email tagudeasobo@hotmail.com
Copyright © 2001 ★HTMLタグであそぼう★. All Rights Reserved.