札幌学院大学社会情報学部 ＡＯ入試課題用テキスト
ＨＴＭＬの基礎知識 （１）
１． はじめに
ホームページ（以下、ＨＰと略す）として文章や画像などをコンピュータで画面表示する基本的な方法として、ＨＴＭＬの約束事に従って文書を作成し、それをブラウザ(代表的なものはInternet Explorer, Netscape
Navigator)に解読･実行させる方法がある。ＨＴＭＬは『Ｈｙｐｅｒ Ｔｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ』の略で、一種の言語である（Ｌａｎｇｕａｇｅ＝言語）。以下ではInternet Explorer（以下ＩＥと略す）を使う場合を想定して説明を行なうことにする。
*************************************************************
２． ＨＴＭＬ文書の作成とブラウザによる表示（基本的な流れ）
細かな説明はその都度行なっていくことにして、まずはＨＴＭＬ文書作成の基本的な流れを見ておこう。Windowsで『すべてのプログラム』⇒『アクセサリ』⇒『メモ帳』の順に操作し、下図のようなメモ帳を起動する。このメモ帳をテキストエディタ（文章を編集するためのソフトウェア）として使う。
（注：ここではWindows XPの画面を使って説明している。Windows2000でも基本的な操作は同じである。）
メモ帳に次のように入力しよう。<html>、<head>などの部分は半角入力である。（空白を入れる場合も半角で入力する。全角で入力しないように注意しよう。）
入力が出来たら、「ファイル」→「名前をつけて保存」を選択し、ファイル名を『練習１.html』と変更してフォルダに保存する。
|
注意事項： 上記のファイル名の「 html
」を拡張子（かくちょうし）と呼ぶ。 拡張子はコンピュータが扱うファイルの種類を区別するためのものである。 拡張子の前に半角のピリオド「
． 」をつける。 拡張子ｈｔｍｌを付けることによって、ブラウザはそのファイルをHTML文書として扱う。（メモ帳のもともとの拡張子は「 txt 」である。） |
ファイルが保存されると、下図左のようなアイコンが表示される。これはＨＴＭＬ文書として保存されたことを意味する。このことを確かめてみよう。このアイコンを右クリックすると、下図右のようなメニューが表示されるので、『プロパティ』を選択する。
この結果、下図のようにファイルの種類が『ＨＴＭＬ Document』と表示される。
今度は、アイコンを『ダブルクリック』してみよう。ブラウザ（ＩＥ）が起動されて、以下のように文章が表示される。これがＨＰ上での表示である。
ここで、ＨＴＭＬ文書のなかで、ブラウザ画面上に表示される部分と、それ以外の部分があることに注意しよう。
<head>と</head>、<body>と</body>のように対（つい）になっている記号は、互いに対になっていることが保証されていれば、文書内でのタグの位置は特に固定されない。
これをＩＥで表示すると以下のようになる。
ＨＰを作成する作業は『ＨＴＭＬ文書作成』⇒『ブラウザによる画面表示の確認』の繰返しである。
ここで表示後に文書を開いて編集する方法を確かめておこう。まず、IEで『表示』⇒『ソース』を選択する。
文書を作成するときに使用したメモ帳のファイルが開かれるので、ここで文章の修正などを行なう。
このメモ帳のファイルを「上書き保存」する。そして、IEの「更新」をクリックする。
この結果、次のように表示される。
ここで、再び「表示」→「ソース」を選択すると、HTML文書が更新されていることがわかる。
*************************************************************
３．
タグとマークアップ
『 < 』や『 > 』で囲まれたマークを『タグ』と呼ぶ。ＨＴＭＬ文書中に含まれる『見出し』、『表』、『イメージ（画像）』、『段落（文章）』は『要素』とよばれ、タグによって文書中の要素が示される。前述のＨＴＭＬ文書で、<p>と</p>は段落と呼ばれる要素を示すためのタグである。以下の例では、｢対になっていればよい｣という文章が段落の要素である。
タグは多くの場合に、対（つい）になって使われ、『開始タグ』と『終了タグ』との間に要素を記入する。
文書にタグをつけていく作業を『マークアップ』と呼ぶ。冒頭で記したように、ＨＴＭＬのＭはＭａｒｋｕｐの意味である。
*************************************************************
３． 簡単なＨＴＭＬ文書の作成
３－１ 見出し
見出し用のタグは、最もレベルの高い見出しの場合、開始タグが<h1>、終了タグが</h1>である。見出しは６段階あり、h1からh6までで区別されている。
ブラウザによる表示結果は以下の通りである。見出しレベルの違いによって文字の大きさが異なっている。
********************************************************************
３－２ 改行
改行したい位置に<br />を記入する。『
ｂｒ 』と『 / 』の間に半角の空白を入れることに注意しよう。
表示結果は次の通りである。
********************************************************************
３－４ リスト
一連の項目を並べるときにはリスト要素を使う。リストは<ul>と</ul>の間に<li>と</li>で囲んだ各項目を書く。
注） <ul>はアルファベットのユーとエル、<li>はエルとアイである。
小文字lを数字の１と間違わないように。
表示結果は以下の通りである。リストで列挙する項目の先頭には●が自動的に表示されている。
********************************************************************
３－５ 見出しと段落の組合せ
上記の見出しに説明文を付け加えてみよう。説明文を書くために段落要素の <p> </p> タグを使う。改行するために空要素を使っている。（以下のリストで次の行の先頭まで続いている部分は、ソースでは１行である。）
<html>
<head>
<title>リスト要素</title>
</head>
<body>
<h3>一連の項目を並べ説明文を入れる</h3>
<p>
担当科目一覧
</p>
<ul>
<li>情報デザイン基礎論（２年次選択）</li>
<p>情報の受け手を意識し情報発信を行なうためのWebページの作り方を習得します</p>
<li>応用コンピュータグラフィックス論（３年次選択）</li>
<p>アプリケーションソフトを使った３ＤＣＧ(３次元コンピュータグラフィックス)制作の講義と<br />実習を行ないます。</p>
<li>専門ゼミナールⅠ・Ⅱ・Ⅲ（３年次必修）</li>
<p>ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ<br />制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
<li>専門ゼミナールⅣ（４年次必修）</li>
<p>３年次の専門ゼミナールで取り組んだ自由課題の自己評価と改善、プレゼンテーション<br />を行ないます。</p>
<li>卒業論文（４年次選択）</li>
<p>学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程<br />を経験します。</p>
</ul>
</body>
</html>
表示結果は次の通りである。
********************************************
練習問題１
「高校生活の思い出に残る出来事ベストスリー」のHPを上記の要領で作成してみよう。
|
私の高校生活の思い出に残る出来事ベストスリー ● 出来事１ 説明文（２００字程度） ● 出来事２ 説明文（２００字程度） ● 出来事３ 説明文（２００字程度） |