ホームページの基礎知識

HTMLの基本

HTML を記述するツール

HTMLのドキュメントを書くには、Windowsに付属しているメモ帳やワードパッド、MacintoshならばSimpleTextなどのテキストエディタでも十分です。 WYSIWYG (What You See Is What You Get の頭文字をとったもので、プレビュー画面で確認・編集が可能)ソフトで代表的なものには、Microsoft の FrontPage、ホームページビルダー、Macromedia の Dreamweaverなどがあります。

ホームページを構成する3つの代表的なHTMLタグ

<HTML></HTML>
HTML ファイルの先頭には、必ず <HTML> が、末尾には必ず </HTML> があります。 このタグは、このファイルの内容がHTML言語で書かれていることを示しています。つまり、ホームページのファイルであることをあらわしています。
<HTML> タグは、開始タグと終了タグで挟み込んで使います。
<HEAD></HEAD>
<HTML> タグの次にあるのが<HEAD>タグです。同様に、<HEAD> と </HEAD>で囲む形式になっています。 <HTML> タグで囲まれている部分は、ヘッダ(頭書き)です。 ここに書き込まれた情報は、原則的にブラウザでホームページとして表示させた場合、ページには表示されません。 ページのタイトル、内容、キーワードなどを書き込むことができます。
<BODY></BODY>
<BODY> と </BODY> で囲まれた部分が、実際にホームページをブラウザで表示させたときに表示される本体となります。
ここにブラウザで表示させたい文章を書いたり、画像や絵などを配置します。テキストの色や大きさを変えたり、ページの背景色を変更することも可能です。

以上をまとめると、次のようになります。

<HTML>
<HEAD>
<TITLE>ページのタイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

これらのタグは、ペアで使用し、タグの順序が入れ替わったりすることはありません。



→こちらにもホムページ制作の基本知識を掲載しています!

その他の代表的なタグ

※ 以下の部分はスタイルシートで制御することを推奨しております。
シークフロントの制作するホームページは全てスタイルシートをしようしています。


[ BODY ]

  • <BODY BGCOLOR="#○○○○○○">
    ○○○の部分に16進数を用いて色を指定すると、ホームページ表示画面全体の色を変えられます。
  • <BODY TEXT="#○○○○○○">
    やはり16進数を用いて色を指定すると、<BODY> 内で表示される文字の色を指定できます。
  • <BODY LINK="#○○○○○○">
    リンク色(「他のページへジャンプしますよ」というタグで囲まれた文字)の指定ができます。
  • <BODY VLINK="#○○○○○○">
    訪問したことのある(見たことのある)リンク色の指定ができます。
  • <BODY ALINK="#○○○○○○">
    リンク文字をクリックしたときに一瞬だけ色を変えることができます。その色の指定ができます。
  • <BODY BACKGROUND="背景に使用する画像の名前(gif,jpgなど)">
    ページ全体の背景に画像を表示させたい場合、画像ファイル名を指定の指定をすると、表示画面全体がその指定した画像になります。



[ FONT ]

  • <FONT SIZE="#">〜</FONT>
    "#" 部分に、1〜7までの数字を入れることによって、フォントのサイズの指定ができます。
  • <FONT SIZE=+#>〜</FONT>
    基準となるフォントサイズから、+−で相対的にフォントサイズの指定ができます。
    例) <FONT SIZE="3">〜</FONT> 内で <FONT SIZE=+2>〜</FONT> とすると、SIZE3のフォントから二段階大きな文字が表示されます。
  • <FONT COLOR="#○○○○○○">〜</FONT>
    このタグで囲まれた部分のフォントの色指定ができます。



[ 物理スタイルタグ ]

  • ■ <B>〜</B>    太字(Bold)にする
    太字(Bold)にする
  • ■ <I>〜</I>    斜体(Italic)にする
    斜体(Italic)にする
  • ■ <TT>〜</TT>    等幅(Typewriter)にする
    等幅(Typewriter)にする
  • ■ <U>〜</U>    下線付き(Underline)にする
    下線付き(Underline)にする
  • ■ <STRIKE>〜</STRIKE>    取消線(Strike through)付きにする
    取消線(Strike through)付きにする
  • ■ <S>〜</S>    二重取消線(Strike through)付きにする
    二重取消線(Strike through)付きにする
  • ■ <SUP>〜</SUP>    上付添(Supurscript)にする
    上付添 (Supurscript) にする
  • ■ <SUB>〜</SUB>    下付添(Subscript)にする
    下付添 (Subscript) にする



その他、見出しタグ、論理スタイルタグ、罫線タグ、改行関係タグ、 位置やサイズ指定などがあります。後々掲載していきます。