著作権フリーのweb素材屋・HP素材のおすそわけ。は約7.413点の無料ホームページ素材を配布する個人のHP素材屋です。

ホームページ素材,写真素材,free web graphics,free digital stock | 初めての方へ素材屋ブログ
ホームページ素材のおすそわけ。サイト作成ウェブサイト(HP)用フリーテンプレートマテリアルweb用壁紙と楽天広場用素材素材屋アイコンやプレートなど写真素材著作権フリーの写真素材ホームページ作成,HP作成ホームページ作成のヒント集ですメニューアイコン自動登録型リンク集ホームページ素材管理人との連絡用BBS

 著作権フリーのweb素材屋・HP素材のおすそわけ。HPを作ろう♪→HTML覚書


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

  メニュー ・ 画像を貼る ・ リンクを貼る ・ フォントを指定する ・ ちょっとした補足

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


字(全角)


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=が高さです。
この場合、幅100ピクセル、高さ40ピクセルで指定されています。

▲ページの先頭へ

リンクを貼る

命令は<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>でマークアップして、スタイルを直接指定するか、クラスやID属性を付けて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>
左寄せ
中央寄せ
右寄せ

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

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

total:051195hit! t:017 y:1402
「HP素材のおすそわけ。」トップへ : ▲ページの先頭へ

Copyright©2005-2017 素材屋・HP素材のおすそわけ。 WebMaterials[http://hide.kanari.info/]Some rights reserved. Please feel free to make links to my website.