HTMLの基礎 Last Update : 2013/09/05 09:09:17

 Webページ作成の為のHTMLを解説しています。

はじめに
■機能索引
HTMLとは
タイトルや背景
文字
レイアウト
リンク
画像
表(テーブル)
フォーム
フレーム
拡張子
カラーチャート
CSS辞典
相対・絶対パス
特殊文字
■主なタグ索引
meta
body
p
br
hr
h
font
b
i
sup
sub
acronym
marquee
div
pre
ul
ol
blockquote
q
dl
img
a
table
frameset
iframe
form
input
textarea
select
button
リンクしてね☆
HTMLの基礎-タグを覚えてウェブページを作ろう!
バナーはダウンロードしてお使い下さい。
タイトルや背景
■タイトルや背景などについて

ここでは、タイトルの設定の仕方や背景の色や画像・コメントの入れ方などについて説明します。 このページに掲載しているタグは以下の通りです。
<html>と<head>は説明する必要もないと思います。

■ドキュメントタイプの宣言 <!DOCTYPE~

HTML文書を作成する際、文書の先頭でドキュメントタイプを宣言します。

ドキュメントタイプでは、HTML文書がどのHTMLのバージョンに基づき 記述されているのかを表しています。

ドキュメントタイプを宣言せずにウェブページを作成しても、ブラウザに内容を表示する事はできます が、W3Cでは宣言する事を必須としています。しかし、ネット上に沢山あるウェブページのなかには ドキュメントタイプを宣言していない所は沢山あります。それでも表示することは 可能ですが、正確なHTMLの記述方法ではありません。

HTML 4.01
Strict DTD
HTML4.01の仕様に厳密に従う場合に使用します。
HTML 4.01
Transitional DTD
HTML4.01以前のバージョンを利用した場合でも互換性を保つ事が出来ます。
HTML 4.01
Flameset DTD
ページ内にフレームを設定する場合に利用します

使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http:www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

ドキュメントタイプとURLの間には1つ以上の空白を挿入します。
また、通常はスペースの前で改行します。




■タイトルの設定 <title>

使用例
<title>この部分がブラウザのタイトルバーに表示されます</title>

<title> </title>は必ず<head> </head>の間に記述して下さい。




■メタ情報の設定 <meta~

使用例
<meta name="下記参照" content="下記参照">
<meta http-equiv="下記参照" content="下記参照">

name属性 content属性 解説
author ページ作成者 ページの作成者の情報を記述
description ページの説明 ページの説明を記述します
keywords ページキーワード 検索を行う際のキーワードを記述します
generator ページ作成ソフト 作成に使用した作成ソフトの記述

http-equiv属性 content属性 解説
content-type text/html;
charset=shift-jis
ページ表示の際の文字コードを記述
content-script-type text/javascript ページの記述言語を記述
refresh 数値 指定した数秒後にページを再読込み
refresh 数値;URL= 指定した数秒後に指定した
URLへページが移動

上記の値の中のキーワード属性などは、検索エンジン対策に使われていましたが、 検索エンジンに上位表示させるためにそれを悪用したスパム行為が増加したため 今ではほとんど記述する事の意味があまり無くなってしまいました。(一部検索エンジンを除き) 参考程度に見ておいて下さい。




■コメントの挿入

使用例
<!--   ここに作成日や覚え書きなどの情報を挿入   -->

コメントはブラウザには表示されません




■ページの背景や基本的な文字の色など <body>

使用例
<body background="値" bgcolor="値" text="値" link="値" alink="値" vlink="値" topmargin="値" leftmargin="値" rightmargin="値" bottommargin="値"> </body>

属性 属性の値 解説
background 画像ファイルのパス 背景の設定
bgcolor 色の名前または
カラーコード
背景色の設定
text 色の名前または
カラーコード
基本文字色の設定
link 色の名前または
カラーコード
リンクが貼られている文字の色
alink 色の名前または
カラーコード
リンク部分を選択している時の色
vlink 色の名前または
カラーコード
アクセス済みのリンクの文字の色
topmargin ピクセル数 ページの上余白を設定
bottommargin ピクセル数 ページの下余白を設定
leftmargin ピクセル数 ページの左余白を設定
rightmargin ピクセル数 ページの右余白を設定




■段落の設定 <p>

使用例
<p>文字列</p>

<p> </p>の間は、1つの段落として認識されるので文字列の上下に 1行ずつスペースが入った状態で表示されます。




■改行の設定 <br>

使用例
改行したい場所に入れます<br>ここから改行されて表示されます。

上記の文字列をブラウザで見ると

改行したい場所にいれます
ここから改行されて表示されます。

と見えます。<br>を一回挿入するごとに1行の空行が入ります。




■区切り線の挿入 <hr>

使用例
<hr>
<hr size="値" width="値" align="値" noshade>

属性 属性の値 解説
size ピクセル数 線の太さ
width ピクセル数、比率(%) 線の長さ
align left center right 位置
noshade なし 線に影が付かない


メール

質問メールがとても多くなった為、現在返信が遅れております。 お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。 申し訳ございませんが、その事をご理解いただいた上でご送信下さい。 また、ここではHTMLの質問に関してのみ受け付けております。


サイト検索
制作便利アイテム

カラーチャート
Color fan

色相・明度・彩度順カラーチャート。CMYK、RGB、慣用色名、配色事典付き。DTP、Web(HTML)で使えます。収録色の全てに、CMYK値、RGB値、そしてHTML用16進数を併記。
WEB関連リンク

Copyright © 2003 - ykr414. All Rights Reserved.