HTMLの基本 | 階層とファイル名・ＨＴＭＬの基本構成【インターネット研究会Z】

■ 階層

画像や他のページにリンクを貼る場合、[階層]/[ファイル名].[拡張子]で指定します。これは基本ですので、これを知らないとホームページを作れません。

□ 相対パス
HTML文書で一般的に使われるのは、この絶対パスです。現在自分いるファイルの場所を中心としてそこからの経路を指定します。相互の位置関係を理解しましょう。少し難しく面倒です。

□ 絶対パス
URLを正確に指定する方式です。相対パスの下方向への階層が理解できれば簡単です。http://www.interz.jp/～などです。これは外部呼び出しが出来ないサイトなどでは使えなかったり、サイトを引っ越したときに不便になりますが、逆にどこにhtmlファイルを移動させても画像を呼び出せる魅力があります。

下のフォルダーへ移動
/
上のフォルダーへ移動
../

□相対パス

現在地：index.htm

目的のファイル：同階層：main.htm

main.htm

目的のファイル：下階層：a.jpg

image/a.jpg

目的のファイル：下階層：rpg.htm

game/rpg.htm

目的のファイル：2下階層：save.htm

game/data/save.htm

現在地：rpg.htm

目的のファイル：上階層：index.htm

../index.htm

目的のファイル：他同階層：a.jpg

../image/a.jpg

現在地：save.htm

目的のファイル：2上階層：index.htm

../../index.htm

目的のファイル：他同階層：a.jpg

../../image/a.jpg

■ 絶対パス

URL:http://www.interz.jp/

目的のファイル:main.htm

http://www.interz.jp/main.htm

目的のファイルsave.htm

http://www.interz.jp/game/data/save.htm

■ ファイル名

初心者はファイル名に日本語を使ってしまったり全角英数を使いがちで、サポートに画像が表示されないと質問する事が多いです。

日本語は駄目	×サンプル画像.jpg
全角英数は駄目	×ＳＡＭＰＬＥ.jpg
大文字は好ましくない	△SAMPLE.JPG
ファイル名は8文字以内が好ましい	△samplesamplesample.jpg

○sample.jpg

■ 基本構成

□HEAD
まずページHTMLの最初と終わりは<HTML>～</HTML>で囲みます。
<HEAD>～</HEAD>の中はページ情報で<META>～</META>や<TITLE>～<TITLE>を間に挟みます。メタタグは若干複雑でHP表示には絶対必要ではなく、SEO対策（アクセスアップ）に関して必要となりますので別で扱います。

□TITLE
<TITLE>～<TITLE>はページのタイトルで結構重要です。ブラウザ上部に表示され閲覧者が何のページで何が書かれているか判断するのに使います。検索エンジンで検索したときに一番最初の判断基準にされます。アクセス数が増えてくると主要なページのタイトルが下に表示されるようになります。

□BODY
ブラウザで表示する本分は<BODY>～</BODY>に全て書き込みます。HP制作で主に使い記事を書き込むのはBODY内です。

<HTML>

<HEAD>
<TITLE>
タイトルです。ブラウザーのタイトルバーに表示されます。
</TITLE>
</HEAD>

<BODY>
本文です。
</BODY>

</HTML>

タイトルです。ブラウザーのタイトルバーに表示されます。

本文です。

■ ルール

HTMLのルールーは<>で囲んで、開いて閉じるです。

<center>～</center>
～
～
など開いて「/」で閉じます。

例外として 改行は閉じません

（2002年5月28日記載　2011年11月13日修正・追記）

		殿
		5
		4
		3
		2
		1
		不