かっこいいウェブサイトのできるまで

　ちょこっとHTMLを知っておく

かっこいいホームページを作った人の中に、HTMLをまったくわからないという人はまずいません。
ホームページビルダーで作るにしろ、DREAMWEAVERで作るにしろ、
多少のHTMLの知識はあったほうが便利。
ビルダーなどのソフトを使ってホームページを作るとき、
最初はツールを使いこなせなかったり、 使い方がわからなかったりするからです。

そのときにHTMLが少しでもわかればHTMLを直接書き換えたりして編集ができます。
ちょっと難しいかもしれませんが、一度ソフトを使ってつくったHTMLの不要なタグを削除したり、
HTMLを編集することで検索エンジン対策もより効果的にできます。

ちょこっとHTMLを知っておくと役立つこと

■検索エンジンでのアクセスアップ。
■細かいソースのカスタマイズ。
■ブログなどの編集。
■レイアウトの編集。
■ホームページ作成時間短縮。

などなど。。
ここで紹介するHTMLは覚えておくと後で楽です。

まずはHTMLソースというものを見てみましょう。
1、ソースを開きます。
ご自身がかっこいいと思っているサイトを開いてみてください。ページが表示されたら左画面と同じように表示をクリック、さらにその中のソースをクリックしてください。

注：フラッシュのサイトやJava、CSSを使用しているサイトはHTMLソースを他のファイルで保存していて表示されないことがあります。
2、ソースを読んでみる。
情報量の多いサイト、文字数やリンク先が多いサイトほどこのHTMLソースは長くなります。まずはHTMLソースを開いてみましょう。はじめは何のことかわからないこのソースもわかるようになると面白いです。

注：データが大きすぎるサイトだとメモ帳で開けません。そういう時はソフトのHTMLソースのページに貼り付けるといいでしょう

ソースを開けましたか？？
ここでちょこっと知っておくHTMLを紹介しますので、
開いたソースのどこにあるか探してみてください。

<HTML>（→タグはこのHTMLから始まります。）
<HEAD></HEAD>（→ここにサイトの情報を書きます。）
<TITLE></TITLE>（→サイトのタイトルを記述します。）
<BODY>（→ここからブラウザに表示されるHTMLを書きます。）
<TABLE><TR><TD></TD></TR>
</TABLE>
</BODY>（→ここまでがブラウザに表示されます。）
</HTML>（→最後に必ず/HTMLで閉じます。）


上記タグはどんなサイトでも殆ど必ずあるタグです。
ここタグはとにかくをおぼえておきましょう。

真ん中のタグはテーブルタグです。
これはサイトのレイアウトをするうえで必ずぶつかるポイントです。
テーブルタグの調整ができるとできないのとでは時間のロスがだいぶ変わってきます。
このテーブルタグが主語なら修飾語となるタグがあります。
それが　align（位置）　 height（高さ）　width（幅）　border（枠）
これが調整できると本当に楽。

height="96"など""に入る数字でテーブルや画像のサイズを指定することができます。
ちょっと計算の苦手な人には頭の痛いことですが、
ウェブデザイナーはレイアウトをする際全体の構成などを考え、
この""に入る数字を細かく計算しています。

大抵ビルダーやDREAMWEAVERでテーブルを作ると勝手に計算してくれて
適当な数字を表示してくれるのですが、後ほど微調整したい場合、
<TABLE><TR><TD>に書かれた数字を修正しないと
思うように調整できないことも度々あるのです。
テーブルの列や行を削除したり、追加したりという編集を繰り返す時によくあります。

レイアウトをするときに上手くいかないときはたいていテーブルタグに問題があります。
ビルダーなどのソフトを使って作っているときプレビューでは表示されなくても、
消したはずのテーブルのタグが残っていたりして、編集の邪魔をすることがあります。
そういう時は余分なタグがないかみてみるか、
<TABLE><TR><TD>に書いてある数字がおかしくないか確認するといいでしょう。

最初はタグが理解できずにイライラすることもあると思いますが、
タグがわかるようになるとソースを見るのが楽しいです。

かっこいいサイトのソースをみてレイアウトがどんな形でされているかわかったら、
それ（ソース）を真似たりコピーして編集したりしてみるとタグも早く覚えられます。


まずはテーブルタグ、テーブルタグの修飾語となる　
align（位置）　 height（高さ）　width（幅）　border（枠）
などを理解できるようになりましょう。

あとわかっておくと便利なタグは文字の修飾タグ。
<FONT>タグ文字のサイズ、カラーなどを指定します。
例：<font size="2" font color="#333333">

<B>タグは文字を強調したいときに使います。Bタグで囲った文字は太くなります。
<STRONG>タグも同じく文字が太くなります。

<BR>は改行<P>は段落としての改行に使います。
<A　HREF="">タグはリンク先、ページジャンプのタグ。
例：<A　HREF="http://website.girlzside.com">

以上、上記のタグは編集できるようになっておくと楽です。
HTMLについて詳しく書いてあるサイトも山ほどあるので参考にしてください。

お勧めのサイトは下記のとおり。　
Webページ作りのお勉強
HTMLやホームページの基本的なことから小技まで
かなり細かく丁寧で簡単に教えてくれるホームページです。
一番よく見るサイト。一通り目を通しておくとかなりいろんなことがわかります。
http://masaboo.cside.com/
７日で作る！タグ打ちホームページ
とりあえず基本からガッツリHTMLを身に着けたいなら「７日で作る！タグ打ちホームページ」
でタグ打ちでホームページを作ってみるのもいいかも。
写真がふんだんに使われているのでわかりやすいです。
http://mia.mods.jp/7tag/
ホームページビルダーの達人
とにかくHTMLよりビルダーを使いこなして編集したいという人にはここのサイトをおすすめ。
細かい設定方法がかなり参考になります。
http://www.homepagebuilder.org/


簡単にホームページを作るには


Top | Column | GILRzSIDE.COM | 利用規約
©GIRLzSIDE.COM All rights reserved.