ソース表示（HTML）について知りたい！
ホームページの基本はHTMLです。まず、HTMLについて知っておかないとうまく作ることはできません。必ず目を通しておいてください。
HTMLとは？
HTMLは、Hypertext Markup Languageの略です。
ホームページをブラウザで表示するための言語ですね。とにかくたくさんHTMLタグの種類があります。
私でもまだまだすべてを把握したわけではありませんが。 まず、初心者でつまづくところは、アクセスカウンタの設置です。
プロバイダから提供されている任意のアクセスカウンタの記述は、実はHTMLなのです。
HTMLファイルでは、不等号記号でくくられたタグを用います。
しかし、WordでのWebページモードで直接記述してはいけないという点に注意してください。 ホームページ開設した方たちの中では、直接Webページモードに貼り付けているために、アクセスカウンタが表示せずに、ブラウザでソースそのまま表示されるといった不具合が生じています。 では、どうすればいいのでしょうか？
ソース表示させるには？
まず、メニューバーから、[表示(I)]→[ソース表示(M)]を選択してください。
すると、複雑なタグの集まりがずらりと記述された画面に切り替わりますよね？
そう、これがHTMLの正体なのです。
終了するには、[ソースの終了(M)]ボタンをクリックしてください。
HTMLの基本的構造について
HTMLの構造は基本的に以下のようになっています。
| <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> 本文 </BODY> </HTML> | <HTML> →これからしゃべる言葉はHTML言語ですよ、と冒頭で宣言しています。 <HEAD> →つまり、頭の部分です。 <TITLE>タイトル</TITLE>→ここでタイトル名を設定します。 </HEAD> →頭の部分はここで終了します、という意味。 <BODY> →本文がここから始まりますよ！という意味 本文 </BODY> →これで本文は終了します、という意味。 </HTML> →これでHTML言語は終わりますよ、と締めくくります。 |
これから紹介するのは、基本的なタグの一部です。ぜひ目を通しておいてください。
いちばん勉強しやすい方法は、まず、ソース表示させてどのようになっているか自分なりに分析してみること。
たくさんのタグの集まりでとても複雑ですが、そのうちに分かってきます。
簡単にアクセスカウンタを設置する方法
アクセスカウンタの設置方法はソース編集で行うことができますが、初心者にとっては本当に訳がわからない世界で、下手するとタグアレルギーになる人もいます(ｰｰ;)
しかし！ Wordではソース編集モードに切り替えずに、思い通りにアクセスカウンタの設置をすることができるんです(^^)
まず、好きな場所に任意のアクセスカウンタのソースを記述（入力）してください。
そして、その記述をマウスで範囲選択します。
書式設定ツールバーの一番左端にある「フォントスタイル」の右横の▼をクリックして、
リストの中から「HTML Markup」を選択してください。これでOKです！
※フォントスタイルによって設定できるタグを詳しく紹介しています。→こちら！
HTMLのこれだけは知っておこう！
HTMLソースを編集しているときに、これだけ知っていると、実際にどのようにレイアウトされているかがわかります。
覚えておくとよいでしょう。
<TABLE> </TABLE>
Word文書でレイアウトを整える方法のひとつに、表、罫線がありますね？
それがHTMLでいう<TABLE>タグです！
<TABLE>と</TABLE>の中に記述されるタグが、<TR></TR>、<TH></TH>、<TD></TD>の3種類あります。
<TR>タグ ： 行の始まりのタグになります。
<TH>タグ ： 見出しとなるセルの始まりのタグになります。</TH>で囲まれた文字は強調されます。
<TD>タグ ： セルの始まりのタグになります。
表に罫線を引きたい場合は、<TABLE>タグの中に <TABLE BORDER>と記述します。これで2ピクセルの罫線が引かれました。
罫線の幅を細くしたい場合は、 BORDER=1と記述すると、1ピクセル幅の罫線を引くことが出来ます。罫線を引かない場合は、<TABLE BORDER=0>です。
その他、<TABLE>タグ内の記述の種類として、
CELLSPACING=0 ： セルとセルとの間隔が0ピクセル
CELLPADDING=6 ： セルとセル内の文字列等との間隔が6ピクセル
という意味になるのかな？ 罫線が引かれていない表の場合は、Wordではたいていこのように記述されます。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=6 WIDTH=***>
WIDTHは表の横幅の数字ですね(^^) 単位はピクセルです。 ちなみにHEIGHTは高さになります！
罫線の中にも、セルが結合されている場合がありますね？
縦方向に2つのセルが結合されている場合は、<TD ROWSPAN=2>
横方向に3つのセルが結合されている場合は、<TD COLSPAN=3>
となります。
セル内の文字列等の配置について
<TD VALIGIN="TOP"> ：上寄せ <TD VALIGIN="MIDDLE">：上下中央揃え
<TD VALIGIN="BOTTOM">：下揃え
文字の配置（中央揃え、右寄せ）について
中央揃え ：<P style="text-align:center">または<CENTER>
右寄せ ：<P style="text-align:right">または<RIGHT>
両端揃え ：<P ALIGN="JUSTIFY">
<HR>
水平線を引くタグになります。(標準ツールバーの右から２つ目の
をクリックすると水平線を引くことができますよ！)
<A HREF="ファイル名やＵＲＬ"> </A>
ハイパーリンクを設定するタグになります。
ブックマーク名がつけられている場合 <A NAME="ブックマーク名"> </A>となります。
ブックマーク名「index」がつけられている場合は、<A NAME="index"> </A>となります。
ちなみに、「★もくじへもどる★」という文字列にブックマーク名「index」がつけられている場所へリンク設定する場合は、
<A HREF="#index">★もくじへもどる★</A>
もし、画像にハイパーリンクの設定されている場合、このようになります。
Japanese Homeのトップページ(ひとつ上の階層のindex.html)にもどるアイコン(ふたつ上の階層にあるgifフォルダにあるhome1.gif→この場合、Japaneseフォルダとgifフォルダは同じ階層に位置しますね)にハイパーリンクが設定の場合
<A HREF="../index.html"><IMG SRC="../../gif/home1.gif" BORDER=0 WIDTH=107 HEIGHT=84 ALT="HOME"></A>
となります。
～BORDER=0を入れると、ハイパーリンク設定されている画像のまわりに枠が表示されなくなります～
コメント
このページに関する技術的なご質問には一切お答え致しません。フリーソフトになったExpression Web 4に移行してください！