ホームページ作成講座（中級者編）
ホームページ基礎知識講座「中級編」
|
■ホームページ基礎知識
1章； HTML入門
・基本構成編
・評価の高いサイト
お勧めレンタルサーバー 違うURLサイト複数製作可
□相互リンクでSEO!
|
HTMLとはHTMLはマークアップ言語、つまり形式を指定するための言語です。テキストファイルにHTMLタグを付け加えると、表示用ソフトウェア (Netscape,Internetexploreなどのブラウザ）を使うことにより、ネットワークを介して、あるいはローカルでそのファイルを読むことができます。 ｢タグ｣とは、｢<｣と｢>｣という記号で囲まれたコードのことです。ブラウザはタグを読み取って、HTMLファイルを画面上に構成します。 HTMLファイルは、World Wide Webで見ることができる文書だと思ってください。 HTMLでページを記載する方法は、他のコンピュータ言語とは少し異なります。他のコンピューター言語では、グラフィック要素やページの位置を記述する 必要があります。このような言語では、フォント、文字のポイントサイズ、画面の大きさ、線の幅などの指定が必要です。しかしHTMLでは、テキストや グラフィックの要素の指定や、その位置についての記述はありません。ファイルの内容に、特定の属性をタグとして付けるだけです。それぞれの属性は、 ファイルを見るときに使用するブラウザが解釈します。 HTMLの基本■HTMLはドキュメントの構造を記述するHTMLは｢ドキュメントの構造を作成する言語｣です。ほとんどのドキュメントには共通して使われる要素があります。たとえばタイトル、パラグラフ、箇条書 きなどは多くのドキュメントで使われます。そのため、ドキュメントを書きはじめるまえに、どのような要素を使うか決めておいて、ドキュメントのそれ ぞれの部分にそれはどんな要素かを表すラベルを付けるようにします。 ■HTMLは表示方法を規定しない一般のワープロやMicrosoft Wordなどでは、そのテキストの見た目（どのように表示、印刷されるか）を指定しますが、HTMLでは見た目については何も 規定しません。前者では、各部分に｢見出し｣などというラベルを付けるだけでなく、ラベルごとに固有のフォント、字の大きさ、字下げなどが定まる ようになっています。これに対してHTMLでは、ごく一部の例外を除いて、ドキュメントの外見については記述しません。そのため、HTMLを解釈する ためのブラウザさえ用意すればいいのです。 このブラウザとはWebブラウザのことで、このようなHTMLのフォーマッタの一種で、ネットワーク経由でドキュメントを取り寄せてくる機能を合わせ 持ったものです。HTMLドキュメントをnetscapeやInternetExploreなどのブラウザにロードすると、ブラウザがHTMLで書かれた情報の読み込みと 解析を行い、テキストやイメージを整形（フォーマット）して画面上に表示してくれます。 ここで、最も気を付けなくてはならないのは、同じドキュメントでもブラウザによって外見が異なる事があるということです。そのため、Webの ドキュメントを書く際には、特定のブラウザに、どうドキュメントが表示されるかに頼らずに、読みやすくわかりやすいように内容を論理的に組み立てること が重要です。自分が作ったものが、自分ブラウザではとても見映えよくできたと思っても、違うブラウザで見てみるとまったく違う見え方となることもあります。 ■HTMLファイルの内容HTMLのドキュメントは単純なテキストファイルで、｢ドキュメントの内容そのもの｣と｢HTMLのタグ｣が含まれます。 タグのほとんどは、次のような形式もっています。 <タグ名>タグの対象テキスト</タグ名> タグは < と > の間に書きます。 HTMLではタグの大文字と小文字は区別されません。つまり、タグ名を指定するのに、大文字で書いても、小文字で書いても、あるいは両者を 混ぜてもかまいません。 なお、HTMLのタグに関しては、次の章の主なタグの説明で詳しく紹介していきます。 ■HTMLドキュメントの作成では、実際にHTMLを使ってドキュメントを作成してみましょう。HTMLのドキュメントを書くには、テキストエディタがあれば充分です。これは アクセサリのなかにあるメモ帳を使ってもいいですしテキスト形式で保存できるワープロを使ってもかまいません。そのとき保存するのは 常にテキスト形式でしなくてはいけないことに注意してください。 ■HTMLファイルの保存方法HTMLファイルはテキスト形式で保存しなくてはいけないのは前述しましたが、このときファイル名の最後に.html （.htmでも可）という拡張子（最後のピリオドより後の部分）をつけてください。 そうすれば、HTMLのブラウザの多くは、ファイルの拡張子を見てそれがHTMLのファイルか単純なテキストファイルかを判断します。 ■HTMLの構造HTMLには３種類の｢ドキュメント構造タグ｣があり、これらを使ってドキュメントの全体的な構造を記述します。 １、<HTML>すべてのHTMLドキュメントに表れる最初のドキュメント構造タグは、<HTML>タグです。このタグはこのファイルの内容がHTML言語で 書かれていることを示すものです。HTMLのドキュメントは、次のように<HTML>タグで囲まれていなければなりません。
<HTML> ２、<HEAD><HEAD>タグに囲まれている部分はヘッダ（頭書き）です。 ドキュメントの<HEAD>部分には、ドキュメントのタイトルなど限られたことが書かれるでけです。ヘッダ内には、けっして ドキュメントの本文は書きません。 ３、<BODY>HTMLドキュメントのその他の要素すべて（テキスト、リンク、画像、絵など）は<BODY>タグに囲まれます。 ■タイトルすべてのHTMLドキュメントはタイトル（表題）を持ち、<TITLE>タグを使って指定します。<TITLE>タグはヘッダの中に書きます。 ドキュメントのタイトルを２つ以上書くことはできません。また、タイトルにはテキスト以外のもの（他のタグやリンクなど）を含むことはできません。 ここまでの内容をまとめると以下のようになります。
<HTML> ここまでが基本編です。 主なタグの説明■リンクHTMLでリンクを作成するには、リンクしたいファイルの名前とブラウザで表示されたときに強調表示され、読み手がリンク先を見るための選択 する部分の２つの情報が必要です。 このうち、ドキュメント中に表示されるのはリンクテキストだけです。ドキュメントを読む人がリンクテキストを選択すると、ブラウザはファイル 名やURLを見て、該当するドキュメントにジャンプします。つまり、ローカルなディスクやネットワークからファイルを読み込み、そのドキュメント に書かれているHTMLの構文を解析し、画面に表示します。 リンクタグ-<A>HTMLドキュメントでリンクを作成するにはリンクタグ<A>...</A> を使います。<A>はアンカータグとも呼ばれます （例）<A HREF="../index.html">ホームページ作成講座</A>■相対パスと絶対パスURLは、ファイルのある場所を指定するためのものです。URLを完全に指定するには、プロトコル名、サーバ名およびパス名も含めたファイル名が必要 です。パスの指定方法には２種類あります。
｢絶対パス｣は、最上位レベルのディレクトリから、ファイルの位置を指定するものです。完全なURLを指定するには、絶対パスを使います。すなわち、
プロトコル名(Webページであればhttp:)から始まり、//を書き、その後ろにサーバ名、そしてスラッシュ（/)ではじまる絶対パス指定のファイル名が
続きます。 ｢相対パス｣は、現在の文書の位置を基準としたファイルの位置の指定です。index.htmlのようにファイル名のみを指定していると、相対パスを使って いることになります。（相対パスは、URLのhttp:などを省略したURLと考えられます）。この場合ブラウザは、現在の文書が入っているディレクトリ のなかでファイルを探します。そのディレクトリのなかに指定されたファイルがなければ、ファイルを見つけることはできません。ファイルの前に../../ と記入しておくと（例えば、../../index.html）、現在の文書が入っているディレクトリより２つ上位のディレクトリのなかのファイルということに なります。 WebのURLでは大文字と小文字が区別されますので、注意してください。 ■文字◇スタイルの指定（論理タグ）文字のスタイルを変更する方法には、｢論理タグ｣と｢固定タグ｣という２種類のタグがあります。論理タグには、見出し用タグ（H1からH6まで）や強調 タグなどがあります。 H1からH6までの見出し用スタイルは、数字の小さいものほど大きく強調されて表示され、数字が大きくなるにつれて段々とサイズと強調の度合が小さく なっていきます。H5やH6くらいになると、ブラウザによって全く違う表示になることがあります。自分が思っているのとは違う結果になることがあり えるので、H5やH6の使用は避けたほうがいいでしょう。 ｢アドレス｣は斜体（イタリック体）で表示されることが多く、電子メール、電話番号、住所などに使用します。アドレスのためのタグは<ADDRESS>です。 特定の文字列に対して注意を引き付けたいときには、｢強調タグ｣を使用します。通常は、文字を太字にしたり、斜体にしたりすることになります。 強調のタグには、<EM>と<STRONG>があります。 サンプルコードやキーボードからの入力を示すときには、等幅の書体を使うことになります。HTMLには、<CODE>、<SAMP>、<KBD> というタグが用意されており、それぞれ｢コード｣｢サンプル｣｢キーボード｣を意味しています。また、これらのタグも全て<>..</>の形をとります。 ◇スタイルの指定（固定タグ）
文字のスタイルを変更する方法には、｢論理タグ｣と｢固定タグ｣という２種類のタグがあります。見出しのレベルを決めたり、強調したりするために
使われる論理タグは、ブラウザのプレファレンス設定によって表示が異なります。一方、固定タグは、ブラウザの設定とは関係なく、どのブラウザ
でも同じ書体になります。
ボールド（太字） <B> </B> ◇文字の大きさ<H1>や<H2>などの見出し用タグを使うと、見出しのレベルに応じて、文字の大きさが変わります。ただし、 タグの前後でかならず改行されます。文字の大きさは、<FONT>タグのSIZEオプションでも、変えることができます。この場合、タグ の前後で改行されることはありません。また、<BASEFONT>タグを使うことによってページ全体の文字の大きさを変えることができます。 ◇文字の色文字の色を変えるには、２通りの方法があります。１つは、<FONT>タグのCOLORオプションを使って、特定の範囲だけ、 文字の色を変更する方法です。もう１つの方法は、ページ全体で一括して色を変更する方法です。これは、ページの本文の開始を示す <BODY>タグのオプションで色を指定します。この場合、文字の色だけでなく、リンクテキストの文字色も変更できます。 ここで、色の指定方法について説明します。 色を指定するには、光の3原色である赤、青、緑の強さを指定します。HTMLでは、それぞれの色を混ぜる量を0から255ので256段階で指定します。 実際には、各色に対して2桁の16進数を使います。16進数というのは、0から15までの数値を1桁で表現できるようにしたもので、10から15 まではアルファベットのAからF（小文字も可）までに対応させています。例えば、10進数の12は16進数ではC、16は10、255はFFとなります。 HTMLでは、色を指定するとき、6桁の16進数の前に#をつけることになっています。 よって次のようになります。
特定範囲の文字の色を指定する。
ページ全体の色を指定する。 ■テキストの配置◇改行および段落の区切り改行タグ<BR>を指定すると、その場で改行します。このタグはテキストはもちろん、画像の直後での改行にも使用します。段落区切りタグ <P>は、改行するだけでなく空行を挿入することによって、要素の区切りを分かりやすくします。この２つのタグは両方とも単独で 使用できますが、<P>については、正式には<P>と</P>で対にして使用します。 ◇テキストの行揃え行揃えをしたいテキストを、<DIV>タグで囲みます。テキストの配置は、<DIV>タグのALIGNオプションで 行い、left（左揃え）、center（中央揃え）、right（右揃え）の種類を指定できます。以下は左揃えにするときの例です。 <DIV ALIGN=left>.....</DIV> また、中央揃えをするには単に<center>タグで囲むことによってもできます。 ■引用文特定の文章を他の文章から独立させて目立たせるには、<BLOCKQUOTE>というタグを使用します。このタグを使用すると、テキスト全体 が字下げして表示されます。 ■箇条書き箇条書きには、順番に数字がつくものと、数字がつかずに黒丸がつくものの２種類があります。どちらの形式でも、箇条書きのテキストは、他の文章 よりも字下げされます。数字つきの箇条書きには<OL>タグ、数字がつかない箇条書きには<UL>タグを使います。 どちらの形式も、各項目の始まりは<LI>タグで示します。<OL>タグと<UL>タグは、それぞれ対で 使用し、<LI>タグは単独で使用します。 ■特殊文字と予約文字HTMLには、タグ専用に予約されている文字があります。このような予約文字には、"、&、<、>などがあります。予約文字は文書のなかに 直接タイプ入力することはできません。 ■種類別HTMLタグ一覧◇文章の構成要素
HTML <HTML> ◇タイトルと見出しタイトル <TITLE> ◇段落と罫線
段落 <P> ◇リンク
リンク <A> ◇文字スタイル
アドレス <ADDRESS> ◇スタイル
引用文 <BLOCKQUOTE> ◇画像
画像 <IMG SRC="ファイル名"> ◇箇条書き
数字付きの箇条書き <OL> ◇表組み
表 <TABLE> ◇フレーム
フレームセット <FRAMESET> |
◎1GBの大容量 無料ホームページ（商用利用、アフィリエイト可能） ◎広告収入GETも可能！無料ホームページ作成サービス（携帯・PC対応）
◎ホームページ・ビルダー10 通常版 ◎ホームページ・ビルダー10 プレミアムパック ◎ホームページ・ビルダー10初心者おすすめ解説本
◎初心者におすすめ格安レンタルサーバー ロリポップ（２００MB、２６３円から） ◎ブログの為の格安レンタルサーバー（月額208円 / 500M 〜）
ホームページ作成講座 TOP