WWW

HTMLとは

HTMLは、文書をタグと呼ばれる装飾子で囲んだ表現法です。



彼はそれゆえに<font color="red">赤い彗星</font>として恐れられた。

と書くと、

彼はそれゆえに赤い彗星として恐れられた。

と表示される。
これは、”<font color="red">、</font>で囲まれた部分を赤で表示しろ”ということを指定している。


HTMLで書いた文章は、Webサーバに置くと一般に公開されるが、自分のコンピュータで見るだけなら、IEの

ファイル→開く→参照

で、自分の作ったHTML文章を見ることが出来ます。

基本構造

HTMLの最も基本となる書き方です。

<html>←お約束
  <head>←ヘッド部(ヘッダー)開始
 ここは、このページ全体に関する情報が入ります。
内容は表示されません
  </head>←ヘッド部終了
  <body>←本文開始
 ここは、本文です。
この領域に書かれたものが表示されます。
  </body>←本文終了
</html>←お約束
注意

HTMLは、年々使える機能が増えてきました。
そういった中で、一つ問題になったのが、タグが、文章の内容表現なのか、レイアウト表現なのか、という混乱です。
たとえば<head></head>は、これにはさまれた部分がヘッド部であることを示す”内容表現"のタグです。
一方、<center></center>などは、これにはさまれた部分を、画面中央に配置せよという"レイアウト”のタグです。
しかし、たとえば<p></p>などは、本来は、これにはさまれた部分が段落であることを示す”内容表現"のタグだったにもかかわらず、実際は”一行あけた改行”と、レイアウト表現のために使われることが多いです。
また、<blockquote></blockquote>は、本来は、これにはさまれた部分が、他からの引用分であることを示 す”内容表現"のタグだったにもかかわらず、実際は”この部分を少し下げる”と、レイアウト表現のために使われることが多いです。

最近では、タグは内容表現に用いて、レイアウトはcss(カスケーディング・スタイル・シート)という技で表現するのが主流ですが、ここでは簡単のため、ここでは少し古いやりかたを説明しています

ヘッド部の書き方

ヘッド部の標準的な書き方です。

<head>←ヘッド部(ヘッダー)開始

<metaここは文章全体の設定です。
漢字コードの種類や、cssなどの拡張機能を使うかなど、いろいろなことを宣言します。
なくても問題ありませんがなるべくつけましょう。
>←metaは</meta>なし
 
<title>ここは文章全体の表題です。ブラウザーの上部に表示されたり、お気に入り登録に使います。
なくても問題ありませんがなるべくつけましょう。
</title>←タイトル終了
 
<style>もし、cssを使うなら、ここにレイアウト設定をします。</style>←スタイル終了
 
<script>もし、スクリプトを使うなら、ここにスクリプトを書きます。</script>←スクリプト終了

</head>←ヘッド部終了

例1(最小限。これでも動くが、もう少し書きましょう)

<head>
</head>

例2(これぐらい書いてあると、かっこいい)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>情報処理入門</title>
</head>

例3(cssを使うときは、こんなふうに書く)

<head>
<meta http-equiv="Content-Type" content="text/css; charset=shift_jis">
<title>情報処理入門</title>
<style type="text/css">
<!--
div{
margin-left: 20pt;
font-size:12pt
}
-->
</style>
</head>

本文

画面全体やレイアウト関連

画面の背景色を変える <body bgcolor="">
 
<body bgcolor="yellow">
 
表示 <body bgcolor="yellow">


背景色を画像にする <body background="画像ファイル名">
 
<body background="back-a.jpg">
 
表示 <body background="back.jpg">


改行する。 <br>


一行あけて改行する <p>
 
(本当は、<p>は<p></p>ではさんで、段落を表すものであるが、このような使いかたをすることがある。)


一行あけて改行する。 <br><br>


画面の中央に配置 <center>
 
<center>
この部分を中央に配置
</center>
 
この使い方は、最近ではあまり推奨されない


画面の中央に配置 <p align="center">
 
<p align="center">
この部分を中央に配置
</p>


文頭を下げて配置 <blockquote>
 
<blockquote>
この部分を下げて配置
</blockquote>


文頭を下げて配置 <p style="margin-left:下げる量">
 
<p style="margin-left:40pt">
この部分を下げて配置
</p>


複雑なレイアウト <table>の項を参照
 
  表の枠線をかかないで、そこにはめ込む。


仕切り線 <hr>
 


仕切り線(細かい設定つき) <hr size="線の太さ" color="線の色" width="線の長さ align="線の位置"">
 
例1 <hr size="5" color="blue" width="80%">
例2 <hr size="3" color="#aa8855" width="300" align="right">

文字の装飾

見出し <h 文字の大きさ(1〜6を指定)>
 
<h1>これがh1の文字です</h1>
 
表示

これがh1の文字です

 
これで見出しに限らず、文字の大きさを変えられるが、本来の意味は「見出し」である。
本文中では次の<font>タグを使う


凝った見出し <h 文字の大きさ(1〜6を指定) align="文字の位置" style="color:文字色;background-color:背景色>
 
<h1 align="right" style="color:white;background-color:black">これがh3の文字です</h1>
 
表示

これがh3の文字です

 
これで見出しに限らず、文字の大きさを変えられるが、本来の意味は「見出し」である。
本文中では次の<font>タグを使う


文字装飾 <font size="文字の大きさ(1〜7)" color="文字の色" face="フォントの種類">
 
 size=、color=、face=などはすべて書く必要はありません。必要なものだけ選んで書くことが出来ます。
 
例1 <font size="5" color="blue" face="MS 明朝">明朝体の文字</font>
 
表示1 明朝体の文字
 
例2 <font size="7" color="green" face="HGP行書体">行書体の文字</font>
 
表示2 行書体の文字


太字 <b>
 
<b>太字</b>
 
表示 太字


斜体 <i>
 
<i>斜体</i>
 
表示 斜体


下線 <u>
 
<u>下線</u>
 
表示 下線


上付き文字 <sup>
 
m<sup>2</sup>
 
表示 m2


下付き文字 <sub>
 
H<sub>2</sub>O
 
表示 H2O

表開始、表終了 <table border="線の幅> </table>
 
 線の幅は、省略した場合は0。(表示しない)


段開始、段終了 <tr> </tr>


箱開始、箱終了 <td> </td>


書き方

<table border=1>
<tr><td>箱1</td><td>箱2</td><td>箱3</td> </tr>
<tr><td>箱4</td><td>箱5</td><td>箱6</td> </tr>
</table>

表示

箱1箱2箱3
箱4箱5箱6



凝った表

箱開始、箱終了 <td width="箱の幅 height=箱の高さ align="文字の水平位置 valign="文字の垂直位置 bgcolor="背景色> </td>




書き方

<table border=1>
<tr><td width=200 align="center">箱1</td><td width=100 align="right">箱2</td><td bgcolor="yellow">箱3</td> </tr>
<tr><td height=100>箱4</td><td align="right" valign="bottom">箱5</td><td valign="top">箱6</td> </tr>
</table>

箱1箱2箱3
箱4箱5箱6



表を使ったレイアウト

例えば、こんなレイアウトは

第一期入会 中澤裕子、石黒彩、飯田圭織、安倍なつみ、福田明日香
第二期入会 保田圭、市井紗耶香、矢口真里
脱退 福田明日香
第三期入会 後藤真希
卒業 石黒彩
第四期入会 吉澤ひとみ、石川梨華、加護亜依、辻希美
脱退 市井紗耶香
卒業 中澤裕子
第五期入会 高橋愛、紺野あさ美、小川麻琴、新垣里沙
卒業 後藤真希
第六期入会 藤本美貴、亀井絵里、田中麗奈、道重さゆみ
卒業 保田圭
卒業 安倍なつみ
卒業 辻希美
卒業 加護亜依
卒業 飯田圭織
脱退 矢口真里
第七期入会 久住小春
卒業 石川梨華
卒業 紺野あさ美
卒業 小川麻琴
第八期入会 光井愛佳、ジュンジュン、リンリン
卒業 吉澤ひとみ
脱退 藤本美貴
卒業 久住小春


こんなふうに、表を使って、枠線を消すことで表現できる。

第一期入会 中澤裕子、石黒彩、飯田圭織、安倍なつみ、福田明日香
第二期入会 保田圭、市井紗耶香、矢口真里
卒業 福田明日香
第三期入会 後藤真希
卒業 石黒彩
第四期入会 吉澤ひとみ、石川梨華、加護亜依、辻希美
卒業 市井紗耶香
卒業 中澤裕子
第五期入会 高橋愛、紺野あさ美、小川麻琴、新垣里沙
卒業 後藤真希
第六期入会 藤本美貴、亀井絵里、田中麗奈、道重さゆみ
卒業 保田圭
卒業 安倍なつみ
卒業 辻希美
卒業 加護亜依
卒業 飯田圭織
卒業 矢口真里
第七期入会 久住小春
卒業 石川梨華
卒業 紺野あさ美
卒業 小川麻琴
第八期入会 光井愛佳、ジュンジュン、リンリン
卒業 吉澤ひとみ
脱退 藤本美貴
卒業 久住小春

画像の挿入

画像を挿入する <img src="画像ファイル名">
 
<img src="girl.gif">
 
表示結果


凝った画像の挿入 <img src="画像ファイル名" width="画像の幅 height="画像の高さ">
 
<img src="girl.jpg" height=80 width=70 >
表示結果


(注)ブラウザーで表示する画像ファイルは、原則、jpeg(jpg)、gif、png形式だけである。
実際はbmp(ビットマップ)、tiff、pictなども表示されてしまうことがあるが、これらがうまく表示されるか否かはWindows、 Macintosh、UNIX、LinuxなどのOS、あるいはIE、Netscape Mozillaなどのブラウザーに依存するので、好ましくない。

リンク

リンクを張る <a href="リンク先">クリックする場所</a>
 
例(同じサーバにあるばあい) <a href="header.html">ヘッダー情報</a>
例(違うサーバにあるばあい) <a href="http://www.chubu.ac.jp/">中部大学</a>
例(文字ではなく、画像をクリックするばあい) <a href="http://www.chubu.ac.jp/"><img src="logo.gif"></a>


リスト

リスト開始、終了 <ul> </ul>
 
項目開始、終了 <li> </li>
 
書き方 <ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<ul>
 
表示
  • 項目1
  • 項目2
  • 項目3



番号付きリスト開始、終了 <ol> </ol>
 
項目開始、終了 <li> </li>
 
書き方 <ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<ol>
 
表示
  1. 項目1
  2. 項目2
  3. 項目3


凝った書き方
<ol start="開始番号" type="表示タイプ">

type="1"アラビア数字
type="a"小文字アルファベット
type="A"大文字アルファベット
type="i"小文字ローマ数字
type="I"大文字ローマ数字


次へ