はじめてのHTML 改定版 ver.1.2

HTMLの基本構文

予備知識







参考文献

HTMLについて書かれた書籍はたくさんあります。本格的にWebページを作成するためには、
いわゆる「HTMLタグ辞典」のような書籍を手元に置いておくとよいでしょう。
どのようなものでもよいのですが「タグが小文字で書かれているもの」が内容が
新しいようです。実際に本屋さんで手にとって探してみてください。
また、インターネットを使って検索してみれば参考になるページが探せます。
いくつか紹介しておきます。

参考：
外国語学部情報科学A授業ホームページ by 千葉庄寿先生






HTMLタグと効果


ブラウザを少し広げて見て下さい








HTMLタグ
こう書くと
こうなる








<body
 bgcolor="white"
 text="black"
 link="blue"
 vlink="darkblue">

本文ハイル

</body>

背景色
本文の文字の色
リンク文字の色
クリック後の色



<body bgcolor="navy" text="white"
 link="aqua" vlink="dodgerblue">


とすると、
ホームページの背景色がnavy、
本文の文字の色がwhite、
リンクを張ってある文字の
クリック前の色がaqua、
クリック後の色がdodgerblue
になります。

bgcolor="...",text="...", のように、
色などを指定する部分が属性です。
タグの種類によって指定できる属性が
決まっています。




ホームページの背景色がnavy、

本文の文字の色がwhite、

リンクを張ってある文字の

クリック前の色がaqua、

クリック後の色がdodgerblue

になります。









<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

章節の見出し



<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>




見出し1


見出し2


見出し3


見出し4


見出し5


見出し6










<p>...</p>

段落(paragraph)



<p>
このタグは最もポピュラーな
タグです。文章をこのタグで
サンドイッチすることで一つ
の段落を意味します。
段落の区切りには1行分の空行
が入ります。
</p>
<p>
文章の途中でEnterキーで
改行しても、また空白を作っ
ても表示されるときは無視さ
れます。
<p>
align属性を使って行揃えの
指定ができます。
</p>





このタグは最もポピュラーなタグです。文章をこのタグでサンドイッチすることで一つの段落を意味します。
段落の区切りには1行分の空行が入ります。




文章の途中でEnterキーで改行しても、
また空白を作っても表示されるときは無視されます。




align属性を使って行揃えの指定ができます。











<div>...</div>

区分(division)



<div>
このタグは文章をブロックと
して扱います。使い方は<p>
タグと似ています。指定され
た前後には改行が入りますが、
<p>タグのように空行は入り
ません。
</div>
<div>
文章の途中でEnterキーで
改行しても、また空白を作っ
ても表示されるときは無視さ
れます。
</div>
<div>
align属性を使って行揃えの
指定ができます。
</div>





このタグは文章をブロックとして扱います。使い方は<p>タグと似ています。
指定された前後には改行が入りますが、<p>タグのように空行は入りません。




文章の途中でEnterキーで改行しても、
また空白を作っても表示されるときは無視されます。




align属性を使って行揃えの指定ができます。











<br>

強制改行



文章の途中で<br>強制的に
改行したいとき<br>使います。



文章の途中で
強制的に改行したいとき
使います。









<center>...
     </center>
<p align="left">
  ...</p>
<p align="center">
  ...</p>
<p align="right">
  ...</p>
<div align="left">
  ...</div>
<div align="center">
  ...</div>
<div align="right">
  ...</div>

左寄せ
中央揃え
右寄せ



<center>
麗澤大学<br>国際経済学部<br>
OS基礎演習
</center>

<p align="left">左寄せにする</p>
<p align="center">中央揃え
(centerタグと同じ)</p>
<p align="right">右寄せにする</p>

<div align="left">左寄せにする</div>
<div align="center">中央揃え
(centerタグと同じ)</div>
<div align="right">右寄せにする</div>






麗澤大学
国際経済学部

OS基礎演習




左寄せにする


中央揃え
(centerタグと同じ)


右寄せにする



左寄せにする


中央揃え(centerタグと同じ)


右寄せにする










<hr>

横罫線



<center>
普通に指定すると罫線は横幅一杯に引かれます。
<hr>
罫線の長さ(width)はwidth属性で設定します。
<hr width="200">
単位はピクセル(pixel)。1ピクセルは画素1ドット。
<hr width="100">
罫線の幅(size)はsize属性で設定します。
<hr width="100" size="10">
色もつけられます。
<hr width="100" size="10" color="red">
</center>





普通に指定すると罫線は横幅一杯に引かれます。


罫線の長さ(width)はwidth属性で設定します。


単位はピクセル(pixel)。1ピクセルは画素1ドット。


罫線の幅(size)はsize属性で設定します。


色もつけられます。













<pre>...</pre>

整形済みテキスト



<pre>
  ---------------
       人口(千人)
       ---------
     　 男   女
       ---- ----
  1990  123  124
  1991  125  127
  1992  127  129
  ---------------
</pre>

上の表を次のように書くと、
<p>
  ---------------
       人口(千人)
       ---------
     　 男   女
       ---- ----
  1990  123  124
  1991  125  127
  1992  127  129
  ---------------
</p>
こうなる。




  ---------------
       人口(千人)
       ---------
     　 男   女
       ---- ----
  1990  123  124
  1991  125  127
  1992  127  129
  ---------------



上の表を次のように書くと、


  ---------------
       人口(千人)
       ---------
     　 男   女
       ---- ----
  1990  123  124
  1991  125  127
  1992  127  129
  ---------------


こうなる。









<blockquote>
..</blockquote>

引用文
両側インデント



<p>現代文といってもその範囲は
相当に広い。例えば、</p>
<blockquote>
隴西の李徴は博学才頴、天宝
の末年、若くして名を虎榜に
連ね、ついで江南尉に補せら
れたが、性、狷介、自ら恃む
所すこぶる厚く、賤吏に甘ん
ずるを.....<br>
(中島敦「山月記」)
</blockquote>
<p>というものから、あるいは、</p>
<blockquote>
んでねェ、やっぱしねェ、何
をやりたかったのかっつうと、
俺、自分の子供の時の話って
いうのが一番したかったのね。
なんかもう、....<br>
（橋本治「ぼくたちの近代史」）
</blockquote>
<p>というものまである。
ホームページもまた思想を表現し
記録する手段である以上、
多様な表現形式があってよい。</p>




現代文といってもその範囲は相当に広い。例えば、



隴西の李徴は博学才頴、天宝の末年、若くして名を虎榜に連ね、ついで江南尉に補せられたが、性、狷介、自ら恃む所すこぶる厚く、賤吏に甘んずるを.....

(中島敦「山月記」)



というものから、あるいは、



んでねェ、やっぱしねェ、何をやりたかったのかっつうと、俺、自分の子供の時の話っていうのが一番したかったのね。なんかもう、....

（橋本治「ぼくたちの近代史」）



というものまである。
ホームページもまた思想を表現し記録する手段である以上、多様な表現形式があってよい。











<ol>
<li>...
<li>...
<li>...
</ol>

自動番号付き
箇条書き(リスト)



次の問いに答えなさい。
<ol>
<li>インターネットとは
<li>TCP/IPとは
<li>FTPとは
</ol>
解答はホームページで提出しなさい。




次の問いに答えなさい。

    

  1. インターネットとは

  2. TCP/IPとは

  3. FTPとは


解答はホームページで提出しなさい。









<ul>
<li>...
<li>...
<li>...
</ul>

番号なし
箇条書き(リスト)



次の問いに答えなさい。
<ul>
<li>インターネットとは
<li>TCP/IPとは
<li>FTPとは
</ul>
解答はホームページで提出しなさい。




次の問いに答えなさい。

    

  • インターネットとは

  • TCP/IPとは

  • FTPとは


解答はホームページで提出しなさい。









<ol>
<li>...
  <ul>
  <li>...
  <li>...
  </ul>
<li>...
<li>...
<li>...
</ol>

入れ子(ネスト)
にした箇条書き



次の問いに答えなさい。
<ol>
<li>基礎的な問題
  <ul>
  <li>インターネットとは
  <li>TCP/IPとは
  <li>FTPとは
  </ul>
<li>やや難しい問題
  <ul>
  <li>IPアドレスの構成について
述べよ
  <li>ルーターの役割について
述べよ
  </ul>
<li>OSI参照モデルについて
知るところを記せ
</ol>
解答はホームページで提出しなさい。




次の問いに答えなさい。

    

  1. 基礎的な問題
  
      
  
    • インターネットとは
  
    • TCP/IPとは
  
    • FTPとは
  
    

  2. やや難しい問題
  
      
  
    • IPアドレスの構成について述べよ
  
    • ルーターの役割について述べよ
  
    

  3. OSI参照モデルについて知るところを記せ


解答はホームページで提出しなさい。









<dl>
<dt>...<dd>...
<dt>...<dd>...
</dl>

用語の定義や
インデント



下記のことがらについて
認識を新たにしなさい。
<dl>
<dt>著作物<dd>思想や感情を創作的
に表現したもの。
ホームページや
プログラムも含まれる。
<dt>麗澤<dd>象に曰く、麗ける澤は
兌びなり。
君子以て朋友と講習す。
<dt>麗澤大学<dd>語学教育や
コンピュータ教育で有名。
学生1人当りのコンピュータの
台数は私学中でも群を抜くが、
学生自身はそれを知らない。
</dl>




下記のことがらについて認識を新たにしなさい。



著作物
思想や感情を創作的に表現したもの。ホームページやプログラムも含まれる。

麗澤
象に曰く、麗ける澤は兌びなり。君子以て朋友と講習す。

麗澤大学
語学教育やコンピュータ教育で有名。学生1人当りのコンピュータの台数は私学中でも群を抜くが、学生自身はそれを知らない。











<font size="1">
   ...</font>
<font size="2">
   ...</font>
<font size="3">
   ...</font>
<font size="4">
   ...</font>
<font size="5">
   ...</font>
<font size="6">
   ...</font>
<font size="7">
   ...</font>

フォントサイズ



一部の<font size="1">文字
</font>だけサイズ指定1<br>
一部の<font size="2">文字
</font>だけサイズ指定2<br>
一部の<font size="3">文字
</font>だけサイズ指定3<br>
一部の<font size="4">文字
</font>だけサイズ指定4<br>
一部の<font size="5">文字
</font>だけサイズ指定5<br>
一部の<font size="6">文字
</font>だけサイズ指定6<br>
一部の<font size="7">文字
</font>だけサイズ指定7
標準は'size="3"'になっている。



一部の文字
だけサイズ指定1

一部の文字
だけサイズ指定2

一部の文字
だけサイズ指定3

一部の文字
だけサイズ指定4

一部の文字
だけサイズ指定5

一部の文字
だけサイズ指定6

一部の文字
だけサイズ指定7

標準は'size="3"'になっている。









<font color="red">
  ....</font>

文字カラー



いろいろな
<font color="red">カラー</font>
<font color="orange">カラー</font>
<font color="blue">カラー</font>
<font color="pink">カラー</font>
<font color="green">カラー</font>



いろいろな
カラー
カラー
カラー
カラー
カラー









<b>...</b>
<i>...</i>
<sup>...</sup>
<sub>...</sub>
<em>...</em>
<strong>...
     </strong>
<cite>...
     </cite>
<kbd>...</kbd>
<samp>...
     </samp>
<var>...</var>
<dfn>...</dfn>
<code>...
     </code>
<big>...</big>
<small>...
     </small>
<address>...
     </address>
文字修飾



<pre>
これが普通の文字だとすると

<b>太字</b>
<i>斜体</i>
5<sup>2</sup>=25
X<sub>1</sub>+X<sub>2</sub>
<em>強調斜体</em>
<strong>もっと強調</strong>
<cite>引用文に使う斜体</cite>
<kbd>KEYBOARD CHAR</kbd>
<samp>Information Sci</samp>
変数<var>xyz</var>を斜体で
<dfn>定義語太字</dfn>
<code>for(i=0;i<n;i++)</code>
<big>大き目の文字</big>
<small>小さ目の文字</small>
<address>foo@cs.reitaku-u.ac.jp
</address>
</pre>




これが普通の文字だとすると

太字
斜体
52=25
X1+X2
強調斜体
もっと強調
引用文に使う斜体
KEYBOARD CHAR
Information Sci
変数xyzを斜体で
定義語太字
for(i=0;i<n;i++)
大き目の文字
小さ目の文字

foo@cs.reitaku-u.ac.jp













&lt;
&gt;
&amp;
&quot;

特殊文字



次の記号はタグに使用される
ため通常なら見えない。そこで....

  < は、&lt; と書く。
  > は、&gt; と書く。
  & は、&amp; と書く。
  " は、&quot; と書く。










<img src="xxxx">

画像ファイル
取り込み



<p>
画像ファイル'rei_smll.gif'
があるとき
<img src="rei_smll.gif">
と書くと1行の文中にそれが
取込まれる。
</p>

<p>
<img src="rei_smll.gif"
align=left>
画像を左寄せにして、その右に
文字を回り込ませるには、
このように書く。
</p>

<p>
<img src="rei_smll.gif"
align=right>
画像を右寄せにして、その左に
文字を回り込ませるには、
このように書く。
</p>

回り込みを強制的に解除するには、
<br clear=all>と書く。





画像ファイル'rei_smll.gif'があるとき
と書くと1行の文中にそれが取込まれる。





画像を左寄せにして、その右に文字を回り込ませるには、
このように書く。





画像を右寄せにして、その左に文字を回り込ませるには、
このように書く。




回り込みを強制的に解除するには、

と書く。










<a href="xxxx">
   ...</a>

リンク





◆リンクを張るときは、

  <a href="http://www.reitaku-u.ac.jp/">麗澤大学</a>
  <a href="http://www.cs.reitaku-u.ac.jp/infosci/index.html">授業教材集</a>

のようにURL(Uniform Resource Locator)を書く。

◆麗澤大学のユーザ（学生）でログイン名がfooさんのホームページの場合、

  <a href="http://www.cs.reitaku-u.ac.jp/~foo/index.html">foo</a>

のようになる。
これは、fooさんのwwwディレクトリの下の'index.html'を指している。
'~foo'がfooさんの'www'を意味している。

なお、URLがディレクトリ名で終わっている場合、'index.html'や'index.htm'が自動的に補填される。
従って、上記の例は、

  <a href="http://www.cs.reitaku-u.ac.jp/~foo/">foo</a>

と記述しても同義である（最後の / をちゃんと書こう）。

◆fooさんのwwwディレクトリの下のwww2ディレクトリの下の'hoge.html'を指すときは、

  <a href="http://www.cs.reitaku-u.ac.jp/~foo/www2/hoge.html">hoge</a>

とする。

◆リンク元のhtmlファイルと同じディレクトリにある別のhtmlファイル'hoge2.html'をリンクするなら、

  <a href="./hoge2.html">hoge2</a>

のようにリンク元ファイルからの相対パス名で指定してもよい。

◆リンク先である'hoge2.html'を別ウィンドウで表示したい場合は、

  <a href="./hoge2.html" target="_blank">hoge2</a>

のように、target="xxxxx"の属性を付ける。
xxxxxは何でもよいが、ここで指定するターゲット名が他のフレーム等で参照されていないものにする。
詳細は省略するが、上記の例のように「_blank」という名前にしておけばよいだろう。



~をチルダ(tilde)記号という。[Shift]+「へ」キーで表示する。
[Shift]+「を」キーではない。











< >
以下未完....














以上