ホームページ素材,写真素材,free web graphics,free digital stockお願い｜ブログ
ドラゼミo((=^♀^=))o｜占い ｜ 土地
ホームページ素材のおすそわけ。サイト作成ウェブサイト（HP）用フリーテンプレートマテリアルweb用壁紙と楽天広場用素材素材屋アイコンやプレートなど写真素材著作権フリーの写真素材ホームページ作成,HP作成ホームページ作成のヒント集ですメニューアイコン自動登録型リンク集ホームページ素材管理人との連絡用BBS
 トップ→HPを作ろう♪→HTML覚書

mapチェックマーク素材HPを作ろう　チェックマーク素材HTML覚書　チェックマーク素材webセーフカラー　チェックマーク素材オススメ本　チェックマーク素材アフィリエイト　チェックマーク素材プチ技

　mapチェックマーク素材画像にロールオーバー効果を加えるためのTIPS


 HTMLの覚書。〜ごく基本編〜


↓オマケのテキストエリアの文字数チェック（検索エンジンの登録などに使ってね♪）


字（全角）


ＨＴＭＬとは？

2007/03/07改稿

HTMLとは、「HyperText Markup Language」の略称なんだそうです。
まぁ、そんな事は知らなくてもオッケーなのですが(^▽^;)このページは、あくまでも覚書です。
詳しい内容が知りたい方は、とほほさんの「HTMLリファレンス」をオススメします。

とりあえず、基本的にHTMLは、<命令="対象"　属性="サイズ">で構成されます。

画像を貼る

命令は<img src="">です。

今回は、相対パスで解説しています。対象となるバナーの相対パスは「img/banasetu.gif」とします。
<img src="img/banasetu.gif">と記入します。

画像が表示されました。次は、今のタグの後ろに半角でスペースを開け、属性=サイズを書き足してみます。
<img src="img/banasetu.gif" border="1">

画像に枠が付きました。border=とは枠線のことで、"1"が枠線のサイズになります。
今度は、border="1"の部分をborder="2"に書き換え、「width="100" height="40"」と書き足します。
<img src="img/banasetu.gif" border="2" width="100" height="40">

画像が大きくなり、枠が太くなりました。width=が画像の幅、height=が高さです。
この場合、幅１００ピクセル、高さ４０ピクセルで指定されています。

▲ページの先頭へ

リンクを貼る

命令は<a href=""></a>です。

さっきのバナーにhttp://hide.kanri.info/へのリンクを貼ってみます。
<a href="http://hide.kanari.info/"><img src="img/minibana02.gif"></a>

リンクが貼られました。枠があるのは、リンクはデフォルトで枠が付く設定になっているからです。
画像の指定の後ろを半角スペースで空け、枠が「0ピクセル」と言う指定をします。「border="0"」です。
<a href="http://hide.kanari.info/"><img src="http://hide.kanari.info/img/minibana02.gif"border="0"></a>

バナー

枠は消えました♪今度は、border="0"の後ろに、title=""を書き加えます。title=""は、画像の説明です。
<a href="http://hide.kanari.info/"><img src="http://hide.kanari.info/img/minibana02.gif" title="バナー"border="0"></a>

バナー

バナーの上にカーソルを乗せてみて下さい♪

▲ページの先頭へ

フォントを指定する

命令は<font></font>です。サイズ属性はsize=""で指定します。
<font size="+1">【文字列】</font>と言う記述で、

【文字列】

と表示されます。今度はsize="+1"の後ろに半角スペースを空けcolor="#6666ff"を書き加えます。
<font size="+1" color="#6666ff">【文字列】</font>

【文字列】と表示されました。

この文字を太くしてみましょう。<b></b>で指定します。
<b><font size="+1" color="#6666ff">【文字列】</font></b>

【文字列】となりました♪

▲ページの先頭へ

※ちょっとした補足ですが、<b></b>、<center></center>、<font></font>と言ったは、W3C非推奨タグで、的確なマークアップでは無いようです。将来的には廃止されるかもとの事。
<span></span>、<div></div>、<p></p>でマークアップして、スタイルを直接指定するか、クラスやＩＤ属性を付けてCSSで一斉に制御するのが長い目で見ると良い方法なのかもしれません。

例えば、以下のような感じです。

<span style="font-weight:bold;font-size:120%;color:#6666ff;">【文字列】</span>となります。

【文字列】となります。
↑【文字列】の部分は、改行されずそのまま横に文字が続いています。

<div style="font-weight:bold;font-size:160%;color:#6666ff;">【文字列】</div>となります。

【文字列】
となります。
↑【文字列】以下の文字が改行されました。

<p style="font-weight:bold;font-size:200%;color:#6666ff;">【文字列】</p>となります。

【文字列】

となります。
↑【文字列】以下の文字が改行され、空白が開いています。

あと、<center></senter>タグに代わってセンタリングさせるには、

<div style="text-align:left">左寄せ</div>
<div style="text-align:center">中央寄せ</div>
<div style="text-align:right">右寄せ</div>
左寄せ
中央寄せ
右寄せ
↑文字の表示される位置が変わってますね。text-alignは文字を何処に寄せるか指定するスタイルです。

でも、フォントタグやセンタリングタグって便利ですよね？個人的には嫌いじゃないんだけどなぁ。

この記事をはてなブックマークに追加する。

total:2587922hit! t:1516 y:2368
「ＨＰ素材のおすそわけ。」トップへ : ▲ページの先頭へ

Copyright(c)2005-2006 WebMaterials［http://hide.kanari.info/］Some rights reserved. Pleasefeel free to make links to my website.