|
■ <br>
これは改行で強制的に改行します。使い方は下のようになります。
このタグには閉じるタグはありません。
こんにちは！<br>
ホームページを頑張って作ってみます。<br>
XHTMLでは <br /> と書きます。
■ <a>
これはリンク用のタグです。このタグで囲った文字や画像をクリックすると、
埋め込んであるURLへ飛びます。
<a href="../card/bookmark.html" target="_blank">bookmark+</a>
bookmark+
target 属性について
target="_blank"･･ 新たにwindowを開いて表示させるためのものです。
target="_top"･･ フレームを解除します。。
target="_parent"･･ フレームの中にフレームを入れた時、親フレームに表示。
target="_self"･･ そのページに表示。target 属性を指定しない時と同じ
target="フレームネーム"･･ 表示するフレームを指定します。
<a> タグは name 属性を使用してページにしおりを付けるみたいな事が出来ます。
サイトマップから項目を選んでクリックすると、ページ内のその説明の部分に飛ぶのがそれに当たります。
方法は表示したいところに <a name="名前"></a> を入れておき、リンクの方に #名前 を入れておきます。
<a href="css/align.html#line-height">line-height</a>
<a name="line-height"></a>
例： line-height ここへ戻る時はブラウザの [戻る] で戻って下さい。
お気に入りに追加のリンク。
<a href="javascript:window.external.addFavorite('URL','サイト名')">お気に入りに追加</a>
お気に入りに追加
サイト紹介用メールのリンク。
<a href="mailto:?Subject=ホームページ作成 Body=サイト名 ･･･ URL">友人にサイトを紹介</a>
友人にサイトを紹介
■ <img>
これは画像をHTMLに埋め込むタグです。閉じるタグはありません。
<img src="image/fish1.png" width="95" height="86" alt="魚"> 
width と height 属性で色々なサイズに変更する事も出来ます。
XHTMLでは <img src="image/fish1.png" width="95" height="86" alt="魚" /> と書きます。
また画像をリンクボタンにする場合、border="0" をイメージタグ入れておかないとボーダーが画像の回りに出ます。
画像の使い方次第ではみっともなくなるので、ボーダーを消した方が良い場合が多いです。
画像のボーダーを消す事は border属性でも出来るので多く使われすが、スタイルシートが推奨されています。
<style type="text/css"><!--
img {border:0px;}
--></style>
上のスタイルシートをhead内に記述しておくと、各々のイメージでボーダーを消す必要がなくなります。
画像をリンクにするのは、<img> と <a> の組み合わせになります。
例えばリンク用バナーなどがそれに当たりますね。
<a href="http://www.est.hi-ho.ne.jp/gaia/hp/"><img src="image/bana.png" width="88" height="31" alt="バナー"></a>
■ <div>
これはこの範囲で書かれた文章をひとまとめにするタグで、タグ単体では改行するために使われます。
CSSを使う事でその便利さが出てくるタグです。このタグの前後は強制的に改行されます。
<div>の中にタグが使えます。
<div style="color:ff0000">こんにちは！<br>
ホームページを頑張って作ってみます。</div>
<div style="color:0000ff">強制的に改行されます。</div>
こんにちは！
ホームページを頑張って作ってみます。
強制的に改行されます。
■ <p>
これもこの範囲で書かれた文章をひとまとめにするタグで、タグ単体では改行に使われます。
このタグの前後は強制的に改行され、更に空白が出来ます。
かつては <p> 単体で改行のタグとして使われましたが、現在は閉じるタグが必要です。
<p style="color:ff0000">こんにちは！<br>
ホームページを頑張って作ってみます。</p>
<p style="color:0000ff">強制的に改行され空行が出来ます。</p>
こんにちは！
ホームページを頑張って作ってみます。
強制的に改行され空行が出来ます。
■ <span>
これもこの範囲で書かれた文章をひとまとめにするタグで、タグ単体では意味を持ちません。
CSSを使う事でその便利さが出てくるタグです。
このタグは <div> のように前後で改行されません。
CSS用のfontタグみたいな感じです。
<span style="color:ff0000">こんにちは！</span>
<span style="color:0000ff">ホームページを頑張って作ってみます。</span>
こんにちは！
ホームページを頑張って作ってみます。
■ <table> <tr> <td>
HTMLのデザインの基本になるタグです。<table> タグは <tr> や <td> などと組み合わせて使います。
その組み合わせ方は多種多様で、HTMLデザインの主軸になります。
このタグについては別ページで詳しくやります。
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
組み合わせ方で次第で、色々なデザインが可能になる。
</td>
</tr>
</table>
組み合わせ方で次第で、色々なデザインが可能になるのがテーブル。
|
テーブルの高さを指定しても、行数画増えると自動的にテーブルは伸びます。
幅もテーブルより大きな画像などを入れれば自動的に広がります。
■ <hr>
これは区切りに使うラインです。長さ・太さ・色などを変更できます。
<hr width="95%" color="#0080ff" size="1">
<hr width="300" color="#ff8000" size="3">
<hr width="95%" color="#00aa00" size="5" noshade>
noshade は塗りつぶしですが、IEでは入れなくても塗りつぶしになります。HTMLでは閉じなくて良いです。
XHTML では <hr /> などと書きます。
HRの長さ・太さ・色の変更もスタイルシートが推奨されています。
<hr style="color:#ff8888;width:95%;height:2px;">
■ <h*>
これは見出しのタグ。* の部分に 1 〜 6 の数字を入れます。
これはh1です。
<h1>これはh1です。</h1>
これはh2です。
<h2>これはh2です。</h2>
これはh3です。
<h3>これはh3です。</h3>
これはh4です。
<h4>これはh4です。</h4>
これはh5です。
<h5>これはh5です。</h5>
これはh6です。
<h6>これはh6です。</h6>
<h*> は見出しなので使った方が良いと思うのですが、文字サイズが大きいので現在では使いにくいタグです。
太文字で書かれ、強制改行され、下に1行分のスペースが出来ます。
またサーチエンジンで <h*> を重要視するなどの話しもありますが、現在ではどうか分かりません。
多分かつて程重要なものではないと思います。文字の大きさなどはスタイルシートで変更できます。
■ <ul> <ol> <dl> <li> <dt> <dd>
これは項目を形式的に表示するリストです。
- 使ったタグは <ul><li> です。
- このように表示されます。
<ul>
<li>使ったタグは <ul><li> です。
<li>このように表示されます。
</ul>
- 使ったタグは <ol><li> の番号リストです。
- このように番号が自動的に表示されます。
<ol>
<li>使ったタグは <ol><li> の番号リストです。
<li>このように番号が自動的に表示されます。
</ol>
使うタグ
<dl>使ったタグは <dt><dd> です。
表示項目を<dt>で内容を<dd>とした表示になります。
<dl>
<dt>使うタグ
<dd>使ったタグは <dl><dt><dd> です。
<dt>表示
<dd>項目を<dt>で内容を<dd>とした表示になります。
</dl>
|
