ホームページ作成|簡単HTMLタグ
このホームページで使っている簡単なHTMLタグを紹介!
当サイトで使っているタグを中心に簡単に説明していきます。
一緒にHTMLタグを勉強していこう!
<項目一覧>
- テキストの意味を表すタグ
- インラインフレーム
- ロールオーバーボタン
- テーブルタグ
- 画像を表示させるタグ
- キーボードのキー操作でフォーカスを移動
- 各ディレクトリの中には、index.htmlファイルを作成してからアップロードしよう!(セキュリティ)
- お気に入りアイコンの設置方法
- リンク <a>
- 編集中:ナビゲーションリンク<rel>
- XHTMLの基本
ページが表示されたら自動的に別のページに移動させるタグ
<meta http-equiv="Refresh" content="0;URL" />
URL部分は移動先のページのURLを記入。上記のタグを<head></head>の間に挿入する。
「content="0;URL"」
URLの左側の数字を「10」にすると10秒後にページが移動する。ブログの引っ越しの際には上記のタグを引っ越し前のブログに挿入しておけば便利です。
テキストの意味を表すタグ
強調を表す<strong>と<em>
<em>よりも<strong>の方が強い強調を表す。 強調の意味が含まれるので、強調された文字は検索エンジンに検索されやすくなる。 <b>タグは見た目は<strong>と同様に太字で表示されるが、このタグは強調の 意味が含まれないので、テキストマッチを 考慮する場合は、<strong>を使うようにする。文字の装飾はスタイルシートで指定するように した方がいい。外部にスタイルシートを指定してファイルを作って、そのページとリンクさせて 文字の装飾をする方がさらにいい。出来るだけページをシンプルにする方が検索エンジンに 検索されやすいページになる。
インラインフレーム
※インラインフレームはアクセスアップを考えてる人は使わない方がいいです。
トップページの最新記事のお知らせは、インラインフレームを使ってます。(以前のホームページです。)下記のタグを貼り付けて、表示したい場所に挿入するだけです。インラインフレームに表示させるファイル名(●●●.html)を指定するだけで、簡単に出来ます。但し、インラインフレームはGoogleなどに検索されにくいページになるので、検索されたい人は使わない方がいいです。
<iframe src="●●●.html" height="300" width="300"> この部分は iframe 対応のブラウザで見てください。 </iframe>
ロールオーバーボタンとは?
マウスのカーソルが画像の上に乗ると画像が変る効果を「ロールオーバー効果」と言います。そのロールオーバー効果を使ったボタンの作成の仕方を紹介します。
↑マウスで矢印をキャラクターの上に重ねてみて!
ロールオーバーボタン(画像)を表示させるタグ
ボタンを表示させたい場所に(<body>~</body>の間に)下記のソースを貼り付けるだけ。
<img src="●" border="0" onMouseOver="this.src='★'"onMouseOut="this.src='■'">
●・・・最初に表示される画像のファイル名
★・・・カーソルが触れた時に表示される画像ファイル名
■・・・カーソルが離れた時に表示される画像ファイル名
ロールオーバーボタンにリンクを挿入する
<a href="ココにリンク先アドレスを入力">
<img src="●" border="0" onMouseOver="this.src='★'" onMouseOut="this.src='■'"> </a>
ロールオーバーボタンを表示させるタグにリンクタグ<a>を囲うだけです。
ロールオーバーボタンを増やす場合のページ全体ソース例
<img src="●" border="0" onmouseover="this.src='★'" onmouseout="this.src='■'">最後にココに矢印をのせて下さい
<img src="●" border="0" onmouseover="this.src='★'" onmouseout="this.src='■'">
<img src="●" border="0" onmouseover="this.src='★'" onmouseout="this.src='■'">
テーブルタグ
テーブルの基本構造
<table border="1">
<caption>テーブルの基本構造</caption>
<thead>
<tr><td>タイトル1</td><td>タイトル2</td></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</tbody> <tfoot>
<tr><td>フッタ1</td><td>フッタ2</td></tr>
</tfoot>
</table>
タイトル1 | タイトル2 |
1-1 | 1-2 |
2-1 | 2-2 |
フッタ1 | フッタ2 |
幅の指定でページの表示スピードをアップ
テーブルタグ<table>に幅<width>を指定しないと、ページを表示する時に幅を計算しないといけなくなるので、できるだけテーブルの幅を指定しよう!
セル内の縦方向の配置を指定する属性(valign属性)
値にはtop(上)、middle(中央)、bottom(下)、baseline(ベースライン)を指定する事が出来ます。
<td valign="値">●●●</td> <th valign="値">●●●</th>
属性なし | top(上) | middle(中央) | bottom(下) | baseline(ベースライン) |
テキストabcd | テキストabcd | テキストabcd | テキストabcd | テキストabcd |
画像を表示させるタグ<img>
<img>タグで画像を表示させるときは、必ず画像のサイズの指定をして下さい。指定しないと画像のサイズをチェックしてから画面に表示されるので体感速度が遅くなります。画像を並べて表示させるには
<img src="画像ファイル名" width="横幅" height="縦幅" alt="画像の説明">
longdesc 属性
この属性は、画像の詳細な説明を掲載したページへのリンクを指定できる属性。まだ新しい属性なので対応しているブラウザが少ない。画像の説明はalt=""を使えばいいと思います。
「この属性なんだたかなぁ?」
なんて、また思うかもしれないので、掲載することにしました。(笑)
<img alt="画像の説明" longdesc="説明ページのURL" src="画像へのURL" width="横幅" height="高さ" />
画像を並べて表示させるには
<vspace>と<hspace> で余白を指定する。
<vspace>・・・左右の余白(空白)のサイズを指定する。
<hspace>・・・上下の余白(空白)のサイズを指定する。
キーボードのキー操作でフォーカスを移動
「alt」+「accesskey属性」で指定したキーを押すと、リンク先に移動します。あまりこのタグを指定してるホームページを見かけないなかなか便利な機能なので紹介。このサイトも<accesskey>で将来的には設定する予定です!
<a href="URL" accesskey="Q">ホームに戻る</a>例)(Q)ホームページに戻る
↑上記のリンクには、「accesskey属性」を設定してるので、試しにキーボードの「alt」キーと「Q」キーを押して見て下さい。 ページのどこを見ていても、キーを押すと上記の「(Q)ホームページに戻る」が選択されている状態になります。
各ディレクトリの中には、index.htmlファイルを作成してからアップロードしよう!(セキュリティ)
各ディレクトリにindex.htmlファイルを作ってアップロードしておかないと、ディレクトリの中にあるファイルをすべて見られてしまいます。アップロードしたファイルで見られたくないファイルがあれば、index.htmlファイルを作成してアップロードしてください。でも、それよりアップロードしないようにする方が安全やと思う。ページのアドレス(ファイル名)がわからないとファイルが覗ぞかれない思い込んでる人は注意です。俺もずっとしらなかった(笑))
お気に入りアイコンの設置方法
お気に入りアイコンを設置して、ブラウザ(IE)のお気に入り一覧から自分のサイトのお気に入りアイコンを見つけやすくしてアクセスアップにつなげよう!アイコンは無料で利用できるアイコンがインターネットでたくさん配布されてるので好きなお気に入りアイコンを見つけてアップロードしておきます。お気に入りアイコンとして使えるアイコンの拡張子は●●●.icoです。「ico」の画像の拡張子のついた画像ファイルをダウンロードしてください。海外のサイトですが、自分の好みの画像を「お気に入りアイコン」にしてくれるサイト(FavIcon from Pics)があります。このサイトで自分の専用のアイコンを作ってみるのもいいかも。FC2ブログは、拡張子が「ico」のファイルのアップロードが出来るので、FC2ブログはお気に入りアイコンの設置が可能です。
お気に入りアイコンをを表示させたいページの<head>タグの間に下記のタグを挿入してください。
<link rel="shortcut icon" href="相対パス・絶対パス(又はURL)">
例:ファイル構造
/home
├index.html(トップページ)
├net_life(ディレクトリ、フォルダ)
└net_life.html(HTMLファイル)
└favicon.ico(お気に入りアイコン)
上記のようなファイル構造の時、「index.html」にお気に入りアイコンを設置する場合は下記のタグを<head></head>の間に挿入する。同じ階層にお気に入りアイコンがあれば、お気に入りアイコンの保存場所の指定が簡単です。
↓ココから
<link rel="shortcut icon" href="favicon.ico" >
↑ココまでを<head></head>の間に挿入
「net_life.html」に表示させたいときは、
↓ココから
<link rel="shortcut icon" href="../favicon.ico">
↑ココまでを<head></head>の間に挿入
お気に入りアイコンの設置ができたら、自分のホームページを簡単に「お気に入り登録」してもらえるようにするために、「お気に入り追加ボタン」の設置もしておこう!当サイトのトップページに「お気に入り追加ボタン」を設置してます。下記のタグを設置したい場所に挿入するだけで、
↓ココから
<Form>
<Input style=" color:#ffffff; border-style:solid; border-color:#ffffff; border-width:0 2;" type="button" value="お気に入りに追加" onClick="javascript: window.external.AddFavorite('あなたのHPのアドレス','HPの名前')">
</Form>
↑ココまで
ナビゲーションリンク<rel>
ヘッダー間に挿入するリンクタグ、Operaなどのブラウザのナビゲーションの指定
上記の画像はOpera*でホームページを表示した時に表示される画面です。これから紹介するリンクを設定をしてないホームページをOperaで表示させても、Operaの画面には、上記の画面が出てきません。結構、便利な機能なので当ホームページも指定していく予定です。
当サイトのトップページに下記のタグを挿入してます。
<link rel="top" href="http://www.boraro.gozaru.jp/" title="トップ">※rel(属性)でリンクのタイプを指定します。
ホーム
index :索引
contents :目次
検索
glossary :用語集
help :ヘルプ
start :最初
prev :前へ
next :次へ
最後
親階層
copyright :著作権
作成者
ニュースフィード
その他属性
alternate :代替バージョンとなる文書
stylesheet :外部スタイルシート
chapter :章
section :節
subsection :項
appendix :付録
bookmark :ブックマーク集
XHTMLの基本
XHTMLでは、基本的に要素、属性は小文字で書かないといけない。大文字と小文字を厳密に区別される。
インライン要素の中にブロック要素をいれたら駄目
リストタグを使ってたけど、リストタグの中に<p>、<div>などのブロック要素のタグを挿入するのは駄目みたい。
っと思ってましたが、文法チェックサイトでチェックしたらエラーが出なかった。この件については、いいのか悪いのかよくわかりません。