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


HTMLの基本構文

  1. 基本構文

    「書き出し」と「終わり」の基本的な構成はだいたい次のようになります。 おまじないだと思ってこのまま書いても構いません。

    
    <html>
    <head>
     <title>xxxxxx</title>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
    </head>
    <body bgcolor="#ffffff" text="#ffffff">
    
         本文ハイル
    </body> </html>

  2. あなたが指定する個所
    
    
    • 'xxxxxx'にはホームページのタイトル文字を指定して下さい。 これはブラウザのタイトルバーにだけ表示されるものです。 本文には表示されません。 むやみと長くない限り英文でも漢字でもOKです。 オススメは簡潔な英文タイトルです。

    • 'euc-jp'にはHTMLファイルに使われている文字コードを指定します。 これを指定することで文字化けの発生を抑えることができますので、日本語を用いる場合は指定したほうがよいでしょう。 euc-jpはEUC、Shift_JISはシフトJIS、 iso-2022-jpはJISコードの時に指定します。
      本学の学生用Webサーバ上では「EUCコード(拡張UNIX漢字コード)」が使用されています。 教室PCなどからtelnetし、viでファイル編集を行う場合にはこの例の通りeuc-jpを指定します。 一方、パソコン上でEmEditorやメモ帳などのエディタを使ってHTMLファイルを作成した場合には「シフトJISコード」がコードが使用されます。 この場合にはShift_JISを指定します(ただし、漢字コード変換を行わなかった場合)。

      (指定例)
      <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
      <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
      <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
      

    • '#ffffff'の個所の'ffffff'にはホームページの 背景色を「RGB値」(16進数)で指定して下さい。先頭の'#'は16進数が記されていることを示す記 号です。そのまま記述して下さい。
      例えば'ffffff'は、白色を意味するRGB値です。RGB値とは、Red,Green,Blueのそれぞれの色の強 さを16進数の2桁ずつで指定するものです。ffが一番強く、00が一番弱いことを意味します。 それらの合成色が表示されます。 よって'ff0000'は赤、'00ff00'は緑、'0000ff'は青、'ffffff'はすべての合成なので白になります。 00〜ffを任意に組合わせて指定することができます。
      RGB値とサンプルカラー --->

    • 一方、'#ffffff'の個所に「英文カラー名称」を指定する こともできます。そのときは、lightpink, lightyellow, lavenderblush, 等々の定まった名称を 指定して下さい。先頭に'#'を付ける必要はありません。
      カラー名称とサンプルカラー --->

    • 「本文ハイル」という個所に本文を記述して下さい。 この部分がブラウザのウィンドウ内に表示される個所です。 後であげるようなイロイロなHTMLタグを使ってあなたが記述することになります。

  3. 基本構文の意味
    
    
    • <html>〜</html>は、HTML文書の始まりと終了を意味します。

    • <head>〜</head>は、「ヘッダ部」といい、Webページ全般についての情報を必要に応じて設定する個所です。

    • <title>〜</title>は、Webページのタイトルを記述する個所です。ヘッダ部((<head>〜</head>内)に指定します。

    • <meta>は、ドキュメントの文字コードなどの情報を記述します。ヘッダ部(<head>〜</head>内)に指定します。

    • <body>〜</body>は、Webページの本文を記述する範囲を示しています。


予備知識





参考文献

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


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>

麗澤大学
経済学部
情報リテラシー

左寄せにする

中央揃え (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.png'
があるとき
<img src="rei_smll.png">
と書くと1行の文中にそれが
取込まれる。
</p>

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

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

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

画像ファイル'rei_smll.png'があるとき と書くと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]+「へ」キーで表示する。


< >
以下未完....

以上