HTMLの基礎学習(1)

★[HTML]とは、英語で[Hyper Text Markup Language]と呼ばれ、webページを作成する為に使われる言語の一種　です。要するにホームページは、HTMLが基本として作られているという事です。

★タグという用語が多く出てきますがタグとは、[<>]と[>]でくくられたHTMLの命令です。多くのタグは開始タグと終了タグが対になつていて、この開始タグと終了タグでくくられた部分の文字列がタグの命令に従って表示されます。例外的に終了タグが必要ないものもあります。

★属性とは、タグの内容を更に細かく設定するときに使われます。

タグは、必ず半角英数で書きます。ホームページのフアイル名も必ず半角英数で書きますが、大文字・小文字はどちらでも構いません。又、複数の属性を指定する場合は、半角スペースで区切ることが条件です。

(1)ページの基本設定

■　ページを作成するために必要なタグは次の通りです。

■　<html></html> <head><head> <body></body> この3つのタグがフアイルを構成する基本的なタグです。

<title></title>このタグは、プラウザの上に表示され、画面に表示されません、画面に表示されるタイトルは見出し(h1-h6)です。

<font></font>(size, color) 文字の大きさや色を指定するタグです。

<align>(left,center,right )　配置する場所を指定するタグです。

<p></p><div></div>        段落のタグです。

<br>　　　　　　　　　　 　　改行タグで、終了タグは必要ありません。

文字の修飾

文字の修飾には次の2通りの方法があります。

★文字列の大きさ、色、フオントの指定。

★　見出しの設定、フオントサイズの指定、色の指定、フオントの指定。

★様々な文字修飾の設定、特殊文字の表示。

★　太字、斜体、下線、取消線、特殊文字。

★見出しには<h>を使います。

★見出しには、<h1>から<h6>まであります。

★見出しの文字色を付けるには、<font color="色"></font>>と書きます。

★見出しの位置を設定するには、<h○align="位置"></h○>と書きます。

★位置には[left][center][right]が指定できます。

★フオントの装飾では太字斜体下線などの設定を行います。サイズには基準値相対値
通常は基準値を使います。基準値には１から までの数字を使います。

★サイズの設定には<font size=“数字"</font>

★フオント字体の設定には<fontface=“○○" </font>

★太字、<b></b>斜体、<i></i>下線、><u></u>

★一部の文字列のサイズを、基準のサイズからの相対的な大きさで指定したい場合に
使います。この場合は基準となるフオントサイズを指定します。

記述例

<basefont size=“4”>
<font size=“+3”>旅</font>
<font size=“+2”>のスケッチブック</font>
■　文字列の色を変更するには<font>属性を使います。文字色は、色の名前又はカラーコードで指定します。
例<font color=“#339966”>旅のスケッチブック</font>
■　フオントは<font>の属性て゛指定します。
★　記述例
<font face=“Verdana”>Welcome to my homepage</font>
★　太字<b>文字列</b>
★　斜線<i>文字列</i>
★ 下線<u>文字列</u>
★　取消線<s>文字列</s>
★　特殊文字、上付き、下付きの設定は省略

レイアウトの設定1(段落の位置)

■　文字列の位置を指定する書き方。

★　左ぞろい<p align=“left”></p>

★　中央ぞろい<p align=“center”></p>

★　右ぞろい<p align=“right”></p>

　レイアウトの設定2(複数の段落)

■　複数の段落や、画像、表などを纏めて設定する場合は次のように書きます。

★　左ぞろい <div align=“left”></div>

★　中央ぞろい <div align=“center”></div>

★　右ぞろい <div align=“right”></div>

★　改行の場合は<br>を使います。 　　　　

レイアウトの設定3(中央ぞろえ)


■　複数の文字列や、画像などを中央に揃えるには<center><を使います。

★　単独で中央に配置する場合は<h2 align=“center”＞旅行記</h2>

★　すべてを中央に配置する場合は<center> <h2>旅行記</h2> <p> ○○○○○</p></center>

レイアウトの設定4(pre)


★　文字をHTML文書に入力したとおりの形で表示させるには<pre>文字列</pre>を使います。

レイアウトの設定5(リストの作成)

■　リストの作成には次のように記述します。

目次

<ul>

<li>プロフイール</li>

<li>旅行記</li>

<li>日記</li>

</ul>

★　丸[ｃｉｒｃｌｅ]四角[ｓｑｕａｒｅ]番号[ｏｌ]などがあります。書き方は<ul>の様に書きます。番号つきリストは<ｏｌ >で書きます。

区切り線

■　区切り線を引くには<hr>を使います。

　

★ <hr>には終了タグは必要ありません。

★区切り線の太さを表示するには、<hr size=“○○"と書きます。

★区切り線の色を設定するには、<hr color=“色"と書きます。

★区切り線の長さを設定するには、<hr  ｗｉｄｔｈ>=“○○”>と書きます。

HTMLの基礎学習(2)

1.画像挿入の留意点 画像の挿入はホームページ作りの最大のポイントです。挿入に際しては様々な留意点を考えながら作業を進めてください。画像の挿入、リンクの設定には[絶対パス]と相対パス の２通りの方法がありますが、場所の指定をスムーズに行うには相対パスの方がメリットがあります。 しかし相対パスを見極めるには慣れが必要であり同じフオルダに保存する事が最も効率的な手法です。短期間でＨＴＭＬを習得するためにもこの方法をお奨めします。

参考　　相対パスで使う二つの記号は次の通りです。

[半角のドット.]と[スラッシュ/]。カレントデレクトリー（現在のデレクトリーを表わします。../現在より一つ上の階層のデレクトリーを表わします)。 註 [絶対パス][相対パス]は、特に覚える必要はありません。これが必要になるのは本格的にCSSを を使ったページ作りの時です。上の太字下線の部分は、ホームページ作成時にも通用する事項です。

2.画像の挿入1(>画像を表示するタグ)

画像の挿入には<img src>を使います。[img]は画像の略で[src]はsource(出典)の略です。

★　タグの書き込みは、<img src=“写真.jpg>となり、終了タグは必要ありません。

★　フアイル形式には[GIF(.gif)][JPEG(.jpg)] [ＰＮＧ(. ｐｎｇ)]などがありますが、一般的には[.jｐ]を使います。

3.拡張子について

★フアイルは基本的に[ファイル名]+[ドット]+[拡張子]から構成されています。フアイルはその性質を表わす拡張子によって分類されています。 [GIF]はGraphics Interchange Formatの略でグラフィツクデーターの保存形式。 [JPEG]は(JPG)Joint Photographic Coding Experts Groupの略で、静止画像を1/10~1/100に圧縮する技術。画像の保存に使われます。 [MIDI](mid)はMusical Instrument Digital Interfaceの略で、音声の挿入に使われます。 [gif][jpg][mid]この拡張子を覚えておいてください。

画像の挿入2(画像の大きさ)

★　画像の大きさを指定するには、幅(width),高さ(height)を使います。タグの書き方は次の通りです。<img src=“写真.jpgwidth=“○○" height=“○○">

画像の挿入3(画像枠）

画像枠を設定するには<border>を使います。タグの書き方は次の通りです。 <img src=“写真.jpg" border=“○">.jpg ○にはｐｉｘｅｌ数を入れます。

画像の挿入4(画像名の表示)

★画像名の表示位置を設定します。

★画像の右上 ><img src=“写真.jpg align="top"&gt画像名

★画像の右中<img src=“写真.jpg align="middle"&gt画像名

★画像の右下<img src=“写真.jpg align="bottom"&gt画像名

★この他に<absmiddle>があるが、省略します。

画像の挿入(文字列の回りこみ)

画像の横に説明文を書く場合は<align>を使います。

★画像の右側に説明文を書く場合。<img src=“写真.jpg" width=“○○" height=“○○" border=“○○"align="leftt">

★画像の左側に説明文を書く場合。<img src=“写真.jpg"width=“○○" height=“○○" border=“○○"align="right">

★回り込みを中断して、それ以降の文字列を画像の下に配置したいときは<br ｃｌｅａｒ=“ａｌｌ”>を使います。

★画像を中央に配置するには＜ｃｅｎｔｅｒ＞＜／ｃｅｎｔｅｒ＞を使います。

★画像の説明文を設定するには<alt>を使います。

画像の挿入6(余白の設定)

画像と画像の左右にある文字列や画像との間隔を設定するには次の様に書きます。

<img src=“写真.jpg" hspace=“○○">

画像と画像の上下にある文字列や画像との間隔を設定するには次の様に書きます。

<img src=“写真.jpg" vspace=“○○">○にはＰｉｘｅｌ数を書きます。

音声の挿入

ページを開いたときにＢＧＭなどの音声を再生するには<bgsound>を使います。Ｂｇｓｏｕｎｄで使用できるフアイル形式は沢山ありますが、主として MIDI<.mid>MIDI<.mid&gtを使います。音声を自動的に継続して再生するには次の様に書きます。

<embed src=“音楽.mid autstart="true">

★"true"の代わりに"false"を書くと自動的に再生されません。

HTMLの基礎学習(3)

リンクの設定1(リンクの種類)
リンクとは、ページ内の文字列や画像から、ページ内の特定部分又は他のページを表示するための仕組みです。

★リンクの種類には次の様なものがあります。

リンクの設定2(ページ間のリンク)

リンクの設定には<a href>を使います。ページ間のリンクを設定するには
1.予めリンクするページのアドレスを記録します。
2.トップページのリンク元に次の様に書き込みます。<a href=“リンク先.html”>文字列</a>
(例示) <ahref=”England.html”>>海外編→イギリス</a>

リンクの設定3(ページ内の特定部分ヘのリンク)

長いレイアウトのページを作成した場合、同じページの特定部分が早く表示出来るようにリンクを設定する方法です。
タグの書き方は次の様になります。<a href=“#リンク先”>文字列</a><a name=“#参照名”></a> (例示) <a href=”London”>ロンドン編</a> <a name=”London”>ロンドン編</a>

●ページ内の特定位置へのリンク設定もこれとほぼ同じです。

リンクの設定4(ホームページ)

他のホームページＵＲＬにリンク設定。 <a href=“http://www○.plala.or.jp/○○○○/

リンクの設定5(リンクを示す文字色)

リンクを示す種類としては「未読link][既読vlink][クリック時alink]があります。色を設定するには次の様に書きます。 <body link=“#色" vlink=“#色" alink=“#色#> ■　このタグはは特に覚える必要はありません。

表(Table)の概要

表は[罫線]と内容で構成されています。表は下の三種類のタグから構成されています。

表を作るタグ　<TABLE></TABLE>

行を作るタグ　<TR></TR> ＴＲはTable Row(行の意味">)

区切りを作るタグ　<TD></TD>ＴＤはTable Data(データーの意味)

(註)ホームページビルダーでの表の作成にはタグの書き込みは必要有りません。

表の[罫線]を表示しない場合は、<border>を書き込まない。

表の作成１(表の大きさの指定)

表の横幅を指定するには<width>を使います
表の高さを指定するには<height>を使いますが、表全体の高さを指定すると、行を増やした場合などに変動するので別途の指定となります。

表の作成2(表の位置の指定)表の位置を指定するには<align>を使います。

表の位置も画像の場合と同じく<align>の指定で<left><center><right>の指定が出来ます。

左側に指定する<table align=“left”>

中央に指定する<table align=“center”>

右側に指定する<table align=“right”>

表の作成3(表の見出し・タイトル)

表の見出しには<th></th>を使います。<th>日程</th><th>スケジュール</th>

表のタイトルには<caption></caption>を使います。

<caption>京都旅行のスケジュール</caption>

表の作成4(枠の設定)

表の外枠の太さを指定するには[border]を使います。

表示は<table border=“●●”></table>で、●●には数字をいれます。数字を入れない場合はピクセル で表示されます。表示しない場合は[0]と書き込みます。

外枠の色は通常上と下で色が違います。(上・左)>)<bordercolorlight>(下・右)<bordercolordark>を使います。