ＨＴＭＬ講座　基本


1.はじめに



　　○ホームページはHTMLタグを用いて書きます。

　　　　HTMLタグとは<>で囲まれた、情報の始まりと終わりを示すものです。



　　　　HTMLタグの注意点　

　　　　・HTMLタグは必ず半角英数字を使う！

　　　　・HTMLタグは大文字、小文字どちらを使ってもＯＫ！



　　○Textファイルを使ってホームページを作るには

　　　　メモ帳などのテキストエディターを使います。

　　　　Textファイルの拡張子はtxtです。このtxtをhtmlに書き換えるだけ　

　　　（例）ファイル名　abc.txt　→　abc.html


2.基本の形



  最も基本のタグたち



 

    

      　　　　　　　　　　　　　　

　　　　<html>　　　

　　　　<head>　　　

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

　　　　</head>　　

　　　　<body>

　　　　ホームページの内容

　　　　</body>　　

　　　　</html>

      

      




　基本タグの簡単な説明


　　<html>　　ホームページ文書であることを宣言。

　　<head>　　ヘッダー部であることを宣言。　

　　<title>　 タイトルを記述。　　

　　<body>　　ホームページの内容であることを宣言。



　　　/はタグの終わりを表します。

　　（例）　</body>はホームページの内容が終わりますと言う意味になります。


3.背景



<body bgcolor="色">　背景に色を入れる時　　　　

<body background="絵のファイル名">  背景に画像を入れる時 



背景に色や画像を入れる。

基本タグで説明したbodyタグにbgcolorまたはbackgroundのオプションを追加する

色についてはここを見てください



bgproperties=fixed   背景画像を固定する場合に、backgroundと組み合わせて使用 

                            

（例）

<body background="back.gif">　back.gifの画像が背景として表示

<body bgcolor="#F0F0F0">　背景色が"#F0F0F0"に


4.文字



<font size=数値>文字</font>　

文字の大きさを変える　

文字の大きさは数値(1から７まで）を変えると変わります

1～7の数字ではなく、-3～+3でも指定可能です



<font color="色">文字</font>

文字の色を変える　　

色についてはここを見てください



<font face="フォント名">文字</font>

文字(フォント)の種類を変える

フォントの種類についてはここを見てください



（例）

　　　<font size=1 color="glay" >文字１</font>

　　　<font size=3 color="navy" >文字３</font>

　　　<font size=4 color="#ff00ff" >文字４</font>

　　　<font size=5 color="red" face="ＭＳ 明朝" >文字５</font>

　　　<font size=7 color="yellow">文字７</font>

　　　<font size=-2 color="#00ffff" >文字-２</font>

　　　<font size=+2 face="HG正楷書体-PRO">文字＋２</font>

（結果）

      文字１

　　　文字３

　　　文字４

　　　文字５

　　　文字７

　　　文字-２　　　

　　　文字＋２


5.見出し

　　　　　　　　　　　　

<h数値>見出し</h数値>　　

見出しにはいろいろな大きさが有ります

大きさは数値（１から６まで）を変えると変わります

上下に1行空白が入ります

オプションとしてcolorやalignなどが利用できます



（例）<h1>見出し１</h1>

　　　<h2>見出し２</h2>

　　　<h3>見出し３</h3>

　　　<h4>見出し４</h4>

　　　<h5>見出し５</h5>

　　　<h6>見出し６</h6>

（結果）

　　　  見出し１

　　　  見出し２

　　　  見出し３

　　　  見出し４

　　　  見出し５

　　　  見出し６


6.改行、段落　



<br> 改行することができます

　　

（例）

あいうえお<br>かきくけこ

（結果）
あいうえお
かきくけこ

　　　　　　　　

<p>　段落を変えることができます

　　

（例）

あいうえお<p>かきくけこ

（結果）
あいうえお

かきくけこ


<br>と<p>の違いは、

<br>は改行するだけですが、<p>は改行され空白が1行入ります

<br>は連続して入力すれば入力した数改行、<p>は連続で何個入れても変わらない



<pre>　書いた通りに表示できます



（例）<pre>

　　　　　あい

　　　　　うえお

　　　　　かきくけ

　　　　　こ

　　　</pre>

（結果）


　　　　　あい

　　　　　うえお

　　　　　かきくけ

　　　　　こ


<nobr>　改行しない



<wbr>　改行候補

ウィンドウの幅が足りないときだけ改行する


7.イメージ(絵)



<img src="イメージファイル名">

絵(イメージ)を入れる。



オプション

 alt=テキスト

 width=横サイズ　(ピクセル数または割合％)

 height=縦サイズ　(ピクセル数または割合％)

 border=枠線　（数値　0:なし）



（例）

<img src="image01.gif" width="102" height="45" alt="絵です！" >

（結果）







回り込みオプション　［イメージの周りにテキストを配置するときに利用する］

 align=イメージとテキストの並び　（top、middle、bottom、left、right)

　top(上)、middle(真ん中)、bottom(下)は1行のみ、

　left(左)、right(右)複数行、回り込み可



align=left、rightの回り込みを終えるときに

<br clear="all">回り込みをカット



（例）

<img src="image01.gif" border="3" align="top">えんぴつ<br>えんぴつ

（結果）

えんぴつ
えんぴつ 



（例）

<img src="image01.gif" align="left">えんぴつ<br>えんぴつ

（結果）

えんぴつ
えんぴつ






 hspace=イメージとテキストの上下の間に余白　（ピクセル数）

 vspace=イメージとテキストの左右の間に余白　（ピクセル数）



（例）

<img src="image01.gif" hspace="50">えんぴつ<br>えんぴつ



（結果）

えんぴつ
えんぴつ


8.文字の位置



<div align="方向">～</div>　　　

方向：left　：左揃え　

　　　center：中央揃え　

　　　right ：右揃え

文字の位置を変えたいときに利用します。

<div align="方向">と</div>の間に

文字の変わりにimgタグを使うことで絵の位置も変えれます。



（例）

<div align="left">あいうえお</div>

（結果）

あいうえお　

（例）

<div align="center">あいうえお</div>

（結果）

あいうえお

（例）

<div align="right">あいうえお</div>

（結果）

あいうえお



<center>～</center> 中央揃え


9.リンク



<a href="リンク先のURL">～</a>

リンクをはります。

クリックすることで別のページに移動することができます。



<a href="リンク先のURL" target="_blank">～</a>

新しいウィンドウにページを表示する



（例）

<a href="http://yahoo.co.jp">Yahooへ</a>

（結果）　

Yahooへ



（例）

<a href="http://yahoo.co.jp"  target="_blank">Yahooへ</a>

（結果）　

Yahooへ



名前をつけて、その場所に移動する

<a name="keyword">　リンク先

<a href="#keyword">　リンクボタン



（例）

<a name="top">｛ページのトップにこのタグを書く｝

<a href="top">ページのトップへ</a>

（結果）

ページのトップへ



リンクを示す部分の色を指定します。bodyタグのオプションとして指定します。

<body text ="色">　　標準のテキストの色

<body link ="色">　　リンク部分の色

<body alink ="色">　 データを読み込んでいる時のリンク部分の色

<body vlink ="色">　 すでに読み込んだリンク部分の色　　



（例）

<body link="blue" alink="red" vlink="purple" >


10.メールを発信



<a href="mailto:メルアド">

リンクボタンを選択すると、メール発信用のウィンドウが表示される。



<a href="mailto:メルアド?subject=件名">　

件名をあらかじめ入力。



（例）

<a href="mailto:test@_test.com?subject=例なので送らないでね。">メール</a>

（結果）

メール


11.コメント

　　　　　　　　　　　　

<!--コメント-->　　

  ソースにコメントを書くことができます。ブラウザには表示されません。

（例）

<!--　ここにコメントを書きます。 -->



title="タグのコメント"

いろいろなタグのオプションとして使え、タグにコメントをつけます。

戻る