◆ページ作成に必要な基本的な[タグ]は次の通りです。

 <html>
ページの最初に記述
 します。
 <head>HTML
文書に関する
 様々な情報を記述します。
 <title>
文書のタイトルを指定します。
 </title>
タイトルの終了タグ。
 </head>
 <body>
ここから本文が始まります。
 </body>
本文の終了タグ。
 </html>
ページの最後に記述します。

文字の装飾(見出し)

[見出し]にはH1からH6まであります。見出しの文字色や見出しの位置の指定もタグの書き込みで出来ます。
 一番上からh1 h2 h3 h4
 h5 h6
のサイズで表示しています。

・見出しに色をつけるには、<font color=””></font>

    見出しの位置を設定するには <h1 align=”位置”</h1>

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

    区切り線

<hr size=”1”>  </hr>は必要なし。

区切り線に色は <hr color=””>

区切り線の長さは <hr width=”00%”>

区切り線は10px 5px 2px のサイズです。

長さの表示では上から90% 70% 50%です。

    文字の大きさ

  [フオント]のサイズは1から7迄あり、

[1]が最小、[7]が最大です。
一般的には文字の大きさの基準値は[3]で設定されています。
従って<font size="+1">は、
<font size="4">
と同じ事です

  <font size=”3”></font>

 フォントの字体の設定には <p><font face="HGP行書体">ああああ</font></p>

 <p><b><font color="#000000" size="3" face="DHP行書体">あ</font></b></p>

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

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

左揃い:<p align=”left”></p> 

  中央揃い:<p align=”center”></p>

右揃い:<p align=”right”></p>

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

複数の段落や画像、表などを纏めて設定する場合。

左揃い:<div align=”left”></div> 

  中央揃い:<div align=”center”></div>

右揃い:<div align=”right”></div>

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

    目次

<ul>

<li>ニューヨーク編</li>

<li>アフリカ    </li>

<li>ロンドン  編</li>

◆文字の頭に付く記号には、 通常は黒丸「●」がつきます。

 これ以外では白丸「circle」四角「square」番号「o1」などがあります。

 書き方:<ul type=”circle”>

    画面の設定(背景色)

<body bgcolor=””></body>を使います。

色の指定には「色名」「色コード」があります。

例、<body bgcolor=”green”></body>

  <body bgcolor=”#008000”></body>

  画面の設定(タイトル)

ページにタイトルを付ける。

<title>タイトルの名前</title>

このタイトルはブラウザのタイトルバーに表示されます。

    トップページの作成

・タイトル、背景、文字の色、見出し、

・説明文、目次、などなど。

   HTML記述(bodyの例)
 <BODY>
 <p class=MsoNormal><b style='mso-bidi-font-weight:normal'>
 <spanstyle='font-size:14.0pt;font-family:"MS 明朝";mso-ascii-font-family:Century;mso-hansi-font-family:Century'>
 ◎ホームページ作成の手順</span></b>
 <b style='mso-bidi-font-weight:normal'><span lang=EN-US style='font-size:12.0pt'></span></b></p>
 <p class=MsoNormal style='margin-left:11.5pt;mso-para-margin-left:1.15gd'>
 <spanstyle='font-size:12.0pt;font-family:"MS 明朝";mso-ascii-font-family:Century;mso-hansi-font-family:Century'>
 ホームページを作る目的は、「自己表現」です。</span>

◆画像の挿入

 HTMLでフアイル名を指定する方法には[絶対パス]と、[相対パス]の二通りの方法があります。
 [
パス]とは英語のPathの事で[道筋]又は[通り道]等の意味で、フアイルが有る場所への道筋という意味合いです。
 [
絶対パス]は、URLを指定する方法です。
 [
相対パス]は、自分のフオルダにあるフアイルを指定する場合に使いますが、指定しているフアイルと、指定されて いるフアイルの[相対的な位置関係]によって変化しますので、出来るだけ[参照元]のフアイルと、[参照先フアイル] を同じフオルダに保存しておくと、フアイル名を書くだけで指定できますのでこの方法がベターだと思います。


 画像の挿入には<img scr>を使います。

Imgimages(画像の略)で、「scr」はsource(出典)の略です。

タグの書き込みは <img scr=”写真.jpg”>となり、終了タグは必要なしです。

ファイル形式には、「.gif .jpg .pngなどがあります。

ファイルの指定方法には「絶対パス」と「相対パス」があります。

絶対パスはhttp://から始まります

画像の大きさを指定するには

<img src=”写真.jpg” width=”00” height=”00”>

画像枠<border>

<img src=”写真.jpg” border=”0”>

(0にはpixel数を入れます。)

 枠線を引かない場合は”0”とします。

画像名の表示

画像の右上 <img src=”写真.jpg” align=”left”>画像名

画像の右中 <img src=”写真.jpg” align=”middle”>画像名

画像の右下 <img src=”写真.jpg” align=”bottom”>画像名

画像への文字列の回り込み

画像の右側に説明文を書く

<img src=”写真.jpg” width=”00” height”00” border=”0” align=”left”

  画像の左側に説明文を書く

<img src=”写真.jpg” width=”00” height”00” border=”0” align=”right”

 周り込みを中断して、それ以降の文字列を画像の下に配置するときは

 <br clear=”all”>を使います。

画像と画像の左右にある文字列や画像との間隔を設定するには、

<img src=”写真.jpg” hspace=”00”>

  画像と画像の上下にある文字列や画像との間隔を設定するには、

 <img src=”写真.jpg” vhspace=”00”  (00にはpixel数を書きます)

音声の挿入

音声には<bgsound>を使います。

音声を自動的に継続して再生するには、

<embed src=”音楽.mid autstart=”true”>

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

リンクの設定(リンクの種類)

ページリンク

ページ内の特定部分へのリンク

ページ内の特定部位へのリンク

電子メールアドレスへのリンク

他のホームページへのリンク

ページ内の特定部分へのリンク(特定部分が早く表示するため)

<a name=”#リンク先”>文字列</a>

<a name=”#参照名”>文字列</a>

 電子メール・ホームページのリンク

電子メール <a href=mailto:アドレス>こちら</a> (掲載は避けた方がよい)

ホームページ <a href=”ホームページのURL”></a>

リンクを示す文字色

<body link=”#” vlink=” alink=”#”>

◆Webページの演習(HTMLの記述)

 <html>

 <head>

 <title>タイトル</title>

 </head>

 <body bgcolor=”” text=”#カラーコード”>

 <h1 align=”center”>見出し名</h1>

 <p>簡単な内容の説明</p>

 <img src=”写真.jpg” width=”” heght=”高さ” border=”” align=”位置” hspace=””>

 あとは写真を数枚挿入してみる。

 名前を付けて保存する。

 保存場所はホームページのフォルダにする。

 参考

 HTMLでフアイル名を指定する方法には[絶対パス]と、[相対パス]の二通りの方法があります。
 [
パス]とは英語のPathの事で[道筋]又は[通り道]等の意味で、フアイルが有る場所への道筋という意味合いです。
 [
絶対パス]は、URLを指定する方法です。
 [
相対パス]は、自分のフオルダにあるフアイルを指定する場合に使いますが、指定しているフアイルと、指定されて いるフアイルの[相対的な位置関係]によって変化しますので、出来るだけ[参照元]のフアイルと、[参照先フアイル] を同じフオルダに保存しておくと、フアイル名を書くだけで指定できますのでこの方法がベターだと思います。

 画像の挿入では次のような
 [
タグ]を使います。
 画像に関する[タグ]
 src="
画像"
 alt="文字列"
 align="top" "middle" "bottom"
 align="left" "right"
 border="
ピクセル数"
 width="
ピクセル数"
 height="
ピクセル数"
 hspace="
ピクセル数"
 vspace="
ピクセル数"

表の基本的記述

<table border>

一行目<tr><td>内容</td></tr>

二行目<tr><td>内容</td></tr>

</table>

表の見出し・タイトル

<html>

<head>

<title>表の見出し</title>

</head>

<body>

<table border>

<caption align=”top”>旅行のしおり</caption>

<tr.<th>日程</th><th>スケジュール</th></tr>

<tr><td>一日目</td><td>ロンドン</td></tr>

<tr><td>2日目</td><td>パリ</td></tr>

</table>

</body>

</html>

セルの高さ、縦の結合、横の結合、余白の設定

高さの指定<td height></td>

縦の結合<td rowspan></td>

横の結合<td colspan></td>

余白 <table cellpadding></table>

背景色<td bgcolor=””></td>

表の枠の設定

<table border=”1”></table> (枠の太さの数字)

表示しない場合 <table border=”0”></table>

表を使って表紙のなどを、タイトル、説明文、画像挿入、などに
  
  枠を入れるとデザインが出来ます。

フレームの利用

ブラウザのウインドウを幾つかに分割し、それぞれの枠に別々の
HTMLを表示して、全体として一つのページにします。
フレームを定義するページとそれぞれのフレームに表示させる
ページが必要です。

フレームファイル

 ページを3分割する

 <html>
 <head><title>
 ページを3分割する</title>
 </head>
 <frameset rows="80%.20%">
 <frame src="bottom.html">
 <frameset cols="50%. 50%">
 <frame src="left.html">
 <frame src="top.html">
 </frameset>
 </frameset>
 </html>

フレームの境界線・サイズ固定

境界線の表示/非表示を設定するには

<frameset frameborder>を使います。

非表示の場合は、

<frameset frameborder=”0”

サイズを固定するには、

<noresize>を使い、

例、<frame src=”toraberu-left.html noresize>

クロスバーの設定

フレームとフレームの間に「スクロールバー」を表示するには

scrolling」を使います。

,frame src=”toraberu-left.html” scrolling=”yes”>

  yesnoにするとスクロールバーは表示されません。

 

参考

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

 行を作るタグ <tr></tr> (trtable row行の意味)

 区切りを付けるタグ <td></td> (tdtable dataデーターの意味)

 以上です。

 自分のメモ用として掲載しています。                              


memoコーナーへ