本当は誰にでもできる!HP作成の入門講座。HPの作り方・はじめの一歩

HPの作り方・はじめの一歩

HOME

HTMLタグ帳

非っ常に多くの種類がある(初心者が見るとほとんど無限に思えてくる・・・)HTMLタグ。その中でも基本となるものと「あると便利」な機能を付加してくれるものを収録しました。これまた管理人自身分かっていないものは乗せられないので、まだまだ収録語数は少ないですが、コレから随時増えていきますので、末永く見守ってやってください。


タイトルと本文
<!doctype> HTMLのバージョンを宣言
<html></html> html文書であることを示す
<head></head> ヘッダー
<title></title> タイトル
<body></body> 本文
<!--    --> 画面に表示されないコメント
<address></address> 問い合わせ先の表示
<meta name=” ” content=” ”> ドキュメント情報の表示
<br> 改行
<nobr></nobr> 改行なし
<h数字></h> 1〜6の数字の値の大きさで見出しを表示 
<align=”center”> 表示位置を中央に配置
<align=”left”> 表示位置を左付け配置
<align=”right”> 表示位置を右付け配置
<p></p> 段落の設定
<p align=”配置”></p> 段落中の文章の配置を指定
<div align=”配置”></div> まとめて位置を指定
<center></center> 絵や文章を画面の中央に配置
<pre></pre> ソース画面のイメージのまま表示
<blockquote></blockquote> インデント
<ul></ul> 文章を右にずらして表示


文字の装飾
<font size=”数字”></font> 1〜7の数字の大きさが文字の大きさ
<body text=”#チャート番号”> 標準の文字の色を指定
<body link=”#チャート番号”> リンク設定した部分の文字の色
<body alink=”#チャート番号”> 読み込み中のリンク部分の文字の色
<body vlink=”#チャート番号”> 訪問済みのリンク部分の文字の色
<font face=”フォント名”></font> フォントの種類を指定
<b></b> 太字
<i></i> 斜体
<u></u> 下線
<tt></tt> 等間隔
<s></s> 取り消し線
<sub></sub> 下付き文字表示
<sup></sup> 上付き文字表示
<big></big> 大きめの文字で表示
<small></small> 小さめの文字で表示
<em></em> 文字を強調する
<strong></strong> 文字をより強く強調する
<marquee></marquee> スクロール文字
<marquee behavior=”scroll”></marquee> 画面の外までスクロール(規定値)
<marquee behavior=”alternate”></marquee> 左右を行き来
<marquee behavior=”slide”></marquee> 画面の端で停止
<marquee direction=”right”></marquee> 右へ流れる
<scrollamount=”移動数”> 一回の移動するドット数を指定
<scrolldelay=”速度”> 移動速度を秒数で指定
<loop=”回数”> 流れる回数を指定
<ol><li></li></ol> 番号付きリスト表示
<ol><li type=T></li></ol> T. U. V.
<ol><li type=1></li></ol> 1. 2. 3.
<ul><li></li></ul> 番号なしリスト表示
<ul><li type=disc></li></ul>
<ul><li type=circle></li></ul>
<font color=”#チャート番号”></font> チャート番号が文字の色
<body text=”#チャート番号”></body> テキスト全体の文字がチャート番号の色 


壁紙とライン
<body bgcolor=”#チャート番号”> チャート番号が壁紙の色
<body background=”画像ファイル名”> 指定した画像ファイルが壁紙に
<hr> 水平ライン
<hr size=数字> 数字がラインの太さ
<hr width=長さ> ラインの長さをドット数か%で指定 
<hr align=”center”> ラインを真中に配置
<hr color=”#チャート番号”> チャート番号がラインの色に
<hr noshade> グレーに塗りつぶされたライン


画像表示
<img src=”画像ファイル名”> 指定した画像ファイルを表示
<img src=”画像ファイル名” width=”数字”> 数字の値で画像の横の大きさを指定
<img src=”画像ファイル名” height=”数字”> 数字の値で画像の縦の大きさを指定
<img src=”画像ファイル名” border=”数字”> 画像の周りにできる枠の幅を指定(0なら枠なし) 
<img src=”画像ファイル名” alt=”コメント”> カーソルを画像に持っていくとコメントが表示
<img src=”画像ファイル名” align=top> 画像の上部とテキストの上部を揃える
<img src=”画像ファイル名” align=bottom> 画像の下部とテキストのベースラインを揃える
<img src=”画像ファイル名” align=middle> 画像の中央とテキストのベースラインを揃える
<img src=”画像ファイル名” vspace=間隔> 画像と上下の文章との間隔を指定
<img src=”画像ファイル名” hspace=間隔> 画像と左右の文章との間隔を指定
<a href=”小さな画像ファイル名”>
<img src=”大きな画像ファイル名”></a>
小さな画像をクリックすると大きな画像が表示


サウンド
<bgsound src=”サウンドファイル名”> サウンドファイルを演奏
<loop=”数字”> 演奏回数を指定
<loop=”infinite”> ページが開いている間中演奏する
<embed src=”サウンドファイル名” width=”数字” height=”数字”> プラグインの呼び出し、数字はプラグインの横幅と高さを指定 
<autostart=true> 自動的に演奏スタート
<noembed></noembed> プラグインが利用できない場合に、代わりに表示させたい内容を書く


表の作成
<table></table> テーブル指定
<table border=”数字”></table> 数字の値の太さで枠を表示
<tr></tr> 一行の指定
<th></th> 項目
<td></td> データ
<td><br></td> 空欄で表示
<caption></caption> 表に名前をつける
<table width=”数字”></table> 表の横幅を指定
<table height=”数字”></table> 表の高さを指定
<th width=”数字”></th> 項目欄の横幅を指定
<th height=”数字”></th> 項目欄の高さを指定
<td width=”数字”></td> データ欄の横幅を指定
<td height=”数字”></td> データ欄の高さを指定
<table cellspacing=”数字”></table> 罫線の太さを指定
<table cellpadding=”数字”></table> 罫線と表中のテキストの間隔を指定 
<align=”center”> 枠内の横の表示位置を中央に配置
<align=”left”> 枠内の横の表示位置を左に配置
<align=”right”> 枠内の横の表示位置を右に配置
<valign=”middle”> 枠内の縦の表示位置を中央に配置
<valign=”top”> 枠内の縦の表示位置を上に配置
<valign=”bottom”> 枠内の縦の表示位置を下に配置
<table border bordercolor=”#チャート番号”></table> 表の線の色を指定
<table bgcolor=”#チャート番号”></table> 表全体の背景色を指定
<tr bgcolor=”#チャート番号”></tr> 行の背景色を指定
<th bgcolor=”#チャート番号”></th> 項目の背景色を指定
<td bgcolor=”#チャート番号”></td> データの背景色を指定
<table background=”画像ファイル名”></table> 表全体の背景に画像を指定
<tr background=”画像ファイル名”></tr> 行の背景に画像を指定
<th background=”画像ファイル名”></th> 項目の背景に画像を指定
<td background=”画像ファイル名”></td> データの背景に画像を指定
<th nowrap></th> 項目内の文字を自動改行しないようにする
<td nowrap></td> データ内の文字を自動改行しないようにする
<td rowspan=”連結する行数”></td> データ行を縦方向に連結する
<td colspan=”連結する列数”></td> データ列を横方向に連結する


フレームの作成
<frameset raws=”分割方法”></frameset> 画面を上下に分割
<frameset cols=”分割方法”></frameset> 画面を左右に分割
”数字,*” ドット数で分割
”80%,20%” パーセントで分割
”1*,2*” 割合で分割
<frameset framedorder=”0”></frameset> フレームの境界線を表示しない
<frameset border=”数字”></frameset> フレームの幅を指定
<frameset bordercolor=”#チャート番号”></frameset> フレームの境界線の色を指定
<frame src=”ファイル名”> 分割されたフレームに表示されるファイル名を指定
<frame src=”ファイル名” noresize> フレームのサイズ変更を禁止する
<noframes></noframes> フレーム表示できないブラウザでの本文を書く 
<frame src=”ファイル名” marginwidth=”数字”> フレーム枠とコンテンツとの左右の余白をピクセル指定
<frame src=”ファイル名” marginheight=”数字”> フレーム枠とコンテンツとの上下の余白をピクセル指定
<frame src=”ファイル名” scrolling=”auto”> フレーム内のスクロールバーを自動的に表示
<frame src=”ファイル名” scrolling=”yes”> フレーム内のスクロールバーを表示し、スクロールできるようにする
<frame src=”ファイル名” scrolling=”no”> フレーム内のスクロールバーを表示せず、スクロールできないようにする
<frameset cols=”分割方法”>
<frame src=”ファイル名” name”左側フレーム名”>
<frame src=”ファイル名” name”右側フレーム名”>
</frameset>
左右にフレームを分割し、
左側でリンクしたページを右側のフレームに表示させる場合の為に、
予めそれぞれのフレームに名前をつける
<a href=”ファイル名” target=”右側フレーム名”></a> 左のフレームに表示されるファイル内でリンクする文字等に、
そのページが右側フレームに表示されるように指定


リンクとページ移動
<a href=”http://別ホームページのリンク先”></a> 別のホームページへのリンク先を指定
<a href=”リンク先のファイル名”></a> 同じディレクトリー内のファイルへのリンク先を指定
<a href=”リンク先のファイル名#リンクしたい部分”> 別ファイル内の特定の部分を指定
<a name=”リンクしたい部分”></a> リンク指定された別ファイルの特定部分側
<a href=”http://別ホームページのリンク先” target=”_blank”></a> 別ウインドウでリンク先を表示
<a href=”リンク先”><img src=”画像ファイル名”></a> 画像ファイルをリンクボタンにする
<img src=”画像ファイル名” border=0> 画像をリンクボタンにした時の画像ファイルの枠を無くす 
<a href=”mailto:メールアドレス”></a> 電子メール
<link=”#チャート番号”></font> リンク部分の文字がチャート番号の色
<vlink=”#チャート番号”></font> 一度読み込んだリンク先の文字がチャート番号の色
<alink=”#チャート番号”></font> 読み込み中のリンク先の文字がチャート番号の色


ファイル管理
index.html 最初のページ
.html WEBページ用ファイル 
.gif 画像ファイル
.bmp 画像ファイル
.jpg 画像ファイル
.wav サウンドファイル
.mid サウンドファイル








メインメニュー

HOME
HPって、なんなの?
HP作成用文書
 「HTML」とは?
メモ帳で出来ること
ファイル形式???
実際に作ってみよう
実際に作ってみようA
サーバーあれこれ
FFFTP・アップロードとは?
スタイルシートデザイン
あると便利なソフト(無料)
ネットでお小遣い稼ぎ?
ネットショップあれこれ
おすすめ参考書籍
HTMLタグ帳
ページランク?SEO?

おすすめ情報

初心者向けのHTML本といえばコレ!元祖「できるシリーズ」の「できる ホームページHTML入門」ここでは紹介しきれない有用な情報が簡単便利にフルカラー写真つきで紹介されています。
管理人もひたすらコレにかじりついて戦ったものです