議長のHTML講座!!


作成準備/ Webページの構造について/ 文章の書き方について/ 文章のレイアウト/ 色について/ リンク/ 画像の挿入


準備(Windows&Internet Explorerの場合)

  1. メモ帳を開く。
  2. ファイル(F)〜名前を付けて保存(A)をクリック
  3. ファイル名のところに「(ファイル名).html」と書き込んで保存。
  4. するとHTMLファイルができているので、開く。
  5. 表示(V)〜ソース(C)をクリック。
  6. ソースプログラムを作成する。

  ※ソースプログラムを作ってから保存してもよい。

 マックでも同じような感じでやればできるでしょう。


このページのトップへ

Webページの構造について

<html>〜</html>「ここからここまでがHTMLですよ」ということ。HTML文書(ソース)の最初と最後に必ず入れる。
<head>〜</head><html>の直後に書く。この中にタイトルなどのソースプログラムが入る。
<title>〜</title>タイトルの名前をこの中に書き込む。<title>〜</title>は<head>〜</head>の中に書く。
<body>〜</body>「ここからここまでが本文ですよ」ということ。ここまで来てようやく本文が書ける。

<html>
<head>
<title>清水君!HTMLですよ。</title>
</head>
<body>

(ここに本文が入ります)

</body>
</html>





このページは大体こうなっています。





このページのトップへ


文章の書き方について

<h(1〜6の数字)>〜</h(同じ数字)>見出し。数字が小さいほど文字は大きくなる。
<br>改行。Enterを押してもページ上では改行しない。
<p>〜</p>段落を表す。これで改行もする。
<b>〜</b>〜間の文字は太字になる。
<i>〜</i>〜間の文字は斜体になる。
<u>〜</u>〜間の文字にはアンダーラインが付く。


ソースWebページ
<h1>大見出し</h1>
<h3>小見出し</h3>
改行
してみよう<br>
<p>段落を変えて</p>
<b>太字だ</b>
<i>斜体だよ</i>
<u>アンダーライン</u>

大見出し

小見出し

改行 してみよう

段落を変えて

太字だ 斜体だよ アンダーライン
このページのトップへ

文章のレイアウト

<center>〜</center>センタリング。
<div align="right">〜</div>右寄せ。
<div align="left">〜</div>左寄せ。
<div align="center">〜</div>言うまでもなくセンタリング。
<font size=(1〜7)>〜</font>文字のサイズの調整ができる。見出しと違って、数字の大きいほど文字がでかい。規定値は3
<font color=○○>〜</font>ちなみに、こうすれば文字の色を変えられる。色については次。
<hr>横線が引ける。


ソースWebページ
<center>これがセンタリング</center>
<div align="center">これもセンタリング</div>
<div align="right">右寄せ</div>
<div align="left">お次は左寄せ</div><hr>
<font size=7 color="red">大きい赤文字</font><br>
<font size=1 color="blue">小さい青文字</font><br>
<font size=3 color="yellow">普通の黄文字</font>
これがセンタリング
これもセンタリング
右寄せ
お次は左寄せ

大きい赤文字
小さい青文字
普通の黄文字

このページのトップへ

色について

・色の指定の仕方は二通り。

 1.color=#赤赤緑緑青青という感じで指定する方法
  f,e,d,c,b,a,9,8,7,6,5,4,3,2,1,0(濃 〜 薄)の16通りの文字をいれる。例えば白は#000000、黒は#ffffff、青は#0000ff。


 2.color="色の名前"という感じで指定する方法
  red,blue,yellowなど色の名前を入れてもできる。他にもblack,white,green,pink,purple,skyblue,lightgreen等。

<body bgcolor=○○>〜</body>背景の色を変える。bodyについては前項。
<font color=○○>〜</font>文字の色を指定する。


ソースWebページ
<body bgcolor="aqua">
<font color="darkblue">水色(aqua)の背景と、藍色(darkblue)の文字。</font>
</body>
水色(aqua)の背景と、藍色(darkblue)の文字。

このページのトップへ

リンク

<a href=(URL)>〜</a>指定のURLにジャンプ。
<a name=○○>〜</a>ページ内のリンク先を指定するためのキーワードを決める。
<a href=(URL)#○○>〜</a>指定のURL内の<a name=○○>と、キーワードを指定した場所にジャンプ。同じページ内でリンクするときは(URL)を省いてよい。
<a href="mailto:(メールアドレス)">〜</a>メールのリンク。アドレスが指定されたものになる。


このページのトップへ

画像の挿入

<img src="画像ファイル名">指定した画像ファイルを表示。jpegやgif形式が一般的。