|
|
| テーブルタグ |
いよいよテーブルタグの紹介。HTMLファイルがアップ出来たとはなぁ〜
圧縮ファイルもアップ出来れば最高なんだが。
テーブルタグは背景タグ同様、コピペでどういう性質かを覚えるのが一番。
<table width="大きさ" style="border:outset 数字px カラーコード;" align=寄せる方向 background="画像ファイル"><td>
これは通常のテーブルの役割を果たすテーブルタグ。
widthは大体200でサイドバー程度の大きさとなり、650でメインテーブルの大きさになる。
数字pxの部分に関しては２〜４が標準。大体２か３が主流。
alignの部分に関しては左寄せか中央寄せか右寄せにするかを指定するもの。
左寄せはleft、中央寄せはcenter、右寄せはright
<div align=方向>文章等</div>とすれば、文章等の部分が指定した方向に寄せられる。
backgroundに関しては、背景色タグで説明したものと同じ。
中に入力したい文章とＨＴＭＬタグを入力したら</table>を入力。
例：<table width="700" style="border:outset 3px #aaddff;" align=center bgcolor="#C71585"><td>
このように表示される。
<table width="大きさ">
透明テーブル。最も重要なテーブルタグ。HPビルダーがあれば、大量に設置出来る。
手動入力ではテーブルとテーブルの間をあけるぐらいの役割しか果たさない。
これである程度、透明テーブルを使いこなせるようになったらHPビルダーを使おう。
<td></td>
セルタグ。<table border="数字"></table>の間に入力することによってセルを作ることが出来る。
セルの大きさや枠の色、セルの中の背景色等は上記で紹介しているのと同様、
テーブルタグの中に入力することによって指定出来る。
<td></td>の数だけセルが増える。
borderに関してはどんな数字でもほとんど変化がないが、0だと線がなくなる。
例：<table style="border:outset 3px #aaddff;" border="1">
<td>あいうえお</td>
<td>かきくけこ</td>
<td>さしすせそ</td>
</table>
<tr></tr>
二列目以降のセルを構成するタグ。<tr></tr>の間に上記で紹介したタグを入力し、
これを繰り返すことによって無限に行を増やすことが出来る。
例：<table style="border:outset 3px #aaddff;" border="1">
<td>メニュー１</td>
<td>メニュー２</td>
<td>メニュー３</td>
<tr>
<td>メニュー４</td>
<td>メニュー５</td>
<td>メニュー６</td>
</tr><tr>
<td>メニュー７</td>
<td>メニュー８</td>
<td>メニュー９</td>
</tr></table>
| メニュー１ | メニュー２ | メニュー３ | | メニュー４ | メニュー５ | メニュー６ | | メニュー７ | メニュー８ | メニュー９ |
他にも中央寄せや強調タグがあるが、これは文字タグで紹介したタグを、
<td></td>の間に入力すれば同様になるので、覚える必要はない。
例：<table style="border:outset 3px #aaddff;" border="1">
<td><B><div align=center>あいうえお</B></div></td>
<td>かきくけこ</td>
<td>さしすせそ</td>
</table>
中央寄せについては分かりにくいかも知れないが、
<div align=center>によってしっかり中央寄せになっている。
セルタグはともかく、純粋なテーブルタグはやはり覚えにくいところがあるかも知れない。
これはコピペして実践してみればすぐに身につく。
|
HTMLタグ | 固定リンク
| トラックバック：0 | レス：0
(2007/03/26(月) 21:33) |
|
| 実践編 |
テーブルタグを除けば、とりあえず今まで紹介したタグでHPは作成出来きます。
と、言う訳で今回はメモ帳を使った実践編。
特にこだわりがなければ、案外にパパッと作成出来る。
まずはメモ帳を起動。
次に背景タグで紹介したタグをコピペし、自分なりに編集。
このコピペするという作業がポイント。丸暗記による手打ちは、
ブログ作りの段階だけで、HP作成となるとこういった点が極めて重要となる。
あとは、テーブルタグと今まで紹介したタグを駆使すれば、
センスさえあればこれだけでもそこそこのページを作ることができる。
完成またはとりあえず一段落ついたら名前をつけて保存。
見ても分かるとおり、「ファイル名.htm」と保存する。
.htmまたは.htmlと保存しないとテキストファイルとして保存されてしまう。
anyagi.htm
右クリック→ソース表示でHTMLタグも見ることができる。
・・・このブログってHTMLファイルもアップ出来たんだねぇｗ（ぇ
じゃあ予定を変更して次回テーブルタグも紹介したいと思います。
HTMLファイルがアップ出来るなら普通に解説しやすいので。
|
HTMLタグ | 固定リンク
| トラックバック：0 | レス：0
(2007/03/25(日) 20:02) |
|
| 背景タグ |
今回はTITLEなどの背景タグ類を紹介。
その上でコピペ用のも用意。全サイト共通のタグ。
タイトルタグ
<TITLE>HPのタイトル</TITLE>
ほとんどのブラウザ左上に表示される文字
例：<TITLE>知って得する！何でも情報屋</TITLE>
（このブログのタイトルとしてブラウザ左上に表示されている）
スタイルタグ
<Style Type="text/css">
<!--
A:link { text-decoration:none; color:カラーコード; }
A:visited { text-decoration:none; color:カラーコード; }
A:active { text-decoration:underline; color:カラーコード; }
A:hover { text-decoration:underline; color:カラーコード; }
//-->
</Style>
リンクの形式や色を指定するタグ。
このタグを入れると、リンクされてる文字に＿＿＿が表示されなくなる。
A:link
クッキーに保存されてない未アクセスのページの文字色
A:visited
クッキーに保存されている既アクセスのページの文字色
A:active
リンクされてる文字をクリックした時の文字色。あまり見ることはない。
A:hover
マウスカーソルをリンクされてる文字に載せたときの文字色
※これの例はありません。
背景色タグ
<BODY bgcolor="カラーコード">
または
<body background="画像ファイル">
ページの背景色を指定するタグ。
このbgcolorやbackgroundはBodyタグだけではなく、tableタグにも有効なので覚えておこう。
テーブルタグに使った場合、そのテーブルだけ指定した背景色が加わる。
詳しくはホームページ開設後、テーブルタグ編で紹介します。
メタタグ
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Keywords" content="キーワードその１,キーワードその２,...">
<meta name="Description" content="サイトの説明文">
<meta name="Robots" content="このページの検索対象の可否,このページにリンクされたページの検索対象の可否 ">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
キーワードは語尾に,をつければ何個でも追加出来る。
検索対象の可否については以下の通り。
このページの検索対象の可否
可：index
否：noindex
このページにリンクされたページの検索対象の可否
可：follow
否：nofollow
つまり、全面的に自分のホームページをアピールしたいなら、
<meta name="Robots" content="index,follow">
となる。ほとんどのサイトはこれなので、実質これをコピーすればよい。
逆に人に知られたくない、一部の人達だけのプレイベート的なサイトなら、
<meta name="Robots" content="noindex,nofollow">
となる。
コピペ用
<HTML>
<HEAD>
<TITLE>HPのタイトル</TITLE>
<Style Type="text/css">
<!--
A:link { text-decoration:none; color:カラーコード; }
A:visited { text-decoration:none; color:カラーコード; }
A:active { text-decoration:underline; color:カラーコード; }
A:hover { text-decoration:underline; color:カラーコード; }
//-->
</Style>
<body background="画像ファイル">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Keywords" content="キーワードその１,キーワードその２,...">
<meta name="Description" content="サイトの説明文">
<meta name="Robots" content="index,follow">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
※１ここで使われている背景色タグは画像ファイル用なので、
画像ファイルを使わず、カラーコード用のを使う人は上記からコピーして下さい。
※２自分のホームページを検索対象外にしたいならnoindex,nofollowに変更して下さい。
あとがき
METAタグにホームページビルダーの表記があるのは、
過去ホームページビルダーで作成したサイトのHTMLタグをコピーしたからです。
|
HTMLタグ | 固定リンク
| トラックバック：0 | レス：0
(2007/03/22(木) 19:17) |
|
| 画像タグ |
今回は画像タグを紹介。
・・・これで事前に用意したコピペ文章なくなったｗ（何
<img src="画像のファイル名">
画像を貼り付けるタグ。</>の入力も必要ないため分かりやすい。
例：<img src="http://blog-imgs-11.fc2.com/a/n/y/anyagi/sample.png">
<img src="画像のファイル名" width="横の長さ" height="縦の長さ">
画像の大きさを調整するタグ。画像が大きすぎた時に有効。
逆に小さすぎたときの場合、画像が惚けるのであまり使えない。
例：<img src="http://blog-imgs-11.fc2.com/a/n/y/anyagi/sample.png" width="300" height="60">
<a href="ＨＰアドレス"><img src="画像のファイル名" border="数字"></a>
画像ファイルを飛ばしたいページへリンクするために使うタグ。
リンクタグを画像タグに囲むだけの仕組み。<a href="ファイル名.htm">文章等</a>の、
文章等と言う部分が画像に変わっただけ。
borderの部分は0だと見栄えがよい。0と3の二つの例をあげてみた。
例：<a href="index.html" target="_blank"><img src="http://blog-imgs-11.fc2.com/a/n/y/anyagi/sample.png" border="0"></a>
<a href="index.html" target="_blank"><img src="http://blog-imgs-11.fc2.com/a/n/y/anyagi/sample.png" border="3"></a>
なおborderを指定しないでリンクするとこれくらいの太さになる。
<img src="画像のファイル名" alt="説明文">
画像にマウスポインタを置くと説明文を表示させることが出来る。
例：<img src="http://blog-imgs-11.fc2.com/a/n/y/anyagi/sample.png" alt="サンプル画像">
他にも画像の隣に文章などを表示させるタグがあり、
主にセルタグの類ものだが、これよりテーブルタグを使った方がよい。
テーブルタグはブログだと紹介しにくいので、
新しい通常のホームページが出来たら公開します。
セルタグもテーブルタグの一種だけどねｗ
|
HTMLタグ | 固定リンク
| トラックバック：0 | レス：1
(2007/03/20(火) 01:20) |
|
| リンクタグ |
今日は文字タグの次に重要なリンクタグを紹介。
これもブログを作成する上でも重要な知識です。
<a href="貼り付けたいページのアドレス">好きな名前を入力</a>
通常のリンクタグ。クリックするとリンクされているページに飛ぶ。
なお同サーバー同フォルダならファイル名だけの入力で飛ぶことが出来る。
例：<a href="http://anyagi.blog97.fc2.com/">ＴＯＰ</a>
ＴＯＰ
<a href="貼り付けたいページのアドレス" target="_blank">好きな文字を入力</a>
貼り付けたページを新しいウインドウで開く。
例：<a href="index.html" target="_blank">ＴＯＰ</a>
ＴＯＰ
<a href="mailto:メールアドレス"></a>
クリックするとブラウザ付属のメーラーが出てきて、貼り付けたメールアドレスが表示される。
例：<a href="mailto:メールアドレス">メールを送る</a>
メールを送る
<a name="#好きな名前">好きな文字を入力</a>
<a href=""></a>タグのhref=""の部分を#好きな名前と打ち込むと、
このタグが入力されている行に飛ぶ。説明だと分かりにくいので例で。
例：<a href="#1">上に移動</a>
<a name="#1">今日は文字タグの次に重要なリンクタグを紹介。</a>
（※nameタグの方は上の方に貼ってます。）
上に移動
IMGタグと組み合わせると画像にもリンクを貼り付けることが出来る。
詳しくは後日画像タグ編で公開します。
|
HTMLタグ | 固定リンク
| トラックバック：0 | レス：1
(2007/03/19(月) 00:49) |
|
|
| 次のページ |
|
欲しい商品を探す
amazonで探す
Aladdinで探す
リンク集
財産作り！内職・副業で頑張る！
カテゴリー
ブログ内検索
RSSフィード
By FC2ブログ
ブログやるならFC2ブログ
|
