ホーム‎ > ‎

HTML入門

1.HTMLとは何か?


HTML は web page を作成するための言語で,HyperText Markup Language の略語です.
Browser 上で page をどうような配置で何を表示するのかを記述するための programming 言語です.

"tag" といわれる手段を使ってテキストに構造や修飾情報などを追加し,computer が情報を読めるようにする働きを持っています,


HTMLは,主に文章の論理的な構成を書くための言語である一方で,
色,font size や layout は後半で紹介するスタイルシートを用いて browser に読み込ませます.
HTML 内の tag で.layout を指定することはできますが.スタイルシートを用いることをW3C (World Wide Web の規格・技術の標準化を目的とした団体) は推奨しています.
文章構造と,designを記述する file が異なるというのが画期的な点です.

昔は自分で HTML コードを書いて, web page を作成していましたが,最近は HTML を知らなくても簡易に web page や blog を作成するための tool が用意されています.
(現にこの site も google site を用いて作成されています.)
既存の tool で blog を作成しても,凝った変更を加えるには HTML を知っている必要があります.必ずしも役に立つとは限りませんが,
HTML について勉強したことはいつか役に立つかもしれません.

2.この実習の目的


HTMLの簡単な command を理解して,普段 web page を見たときに背後にある構造を想像できるようになることを

目標としています.

Program の初心者を想定して作成していますので,HTMLに触れたことのある人はこの page は読まずに各自勉強してください.


この実習は,HTML を用いて個人 page を作成することを課題にしています

数理の先生方にも個人 page をもっていらっしゃる方がいるので,検索してみましょう.


Browser には web page の HTML の source code を表示させる機能を持っています.

他の page でどのような code を使っているか見て真似していくのが,学習の早道だと思います.


本来 web page は読み手にとって読みやすくつくられるべきで,あまり派手な装飾はしない方がいいのですが.

ここでは勉強のためにいろいろな tag を積極的に使用してみましょう.

3.実際に作ってみましょう


まずは,windows ならばメモ帳,mac ならば mi などの text editor を開き, 次の code を書き,.html形式で保存します




上の例の code について説明します.

<html>は,file がHTMLファイルであることを宣言するための code で,source の最初と最後に書きます.


<head>と</head>の間には,文章に関する情報を記述します,例えば,文章のタイトル,著者などです.ここに書かれたことは,<title>と</title>に挟まれた部分以外はブラウザには表示されません.ここでは,title を"Hello"としました.


<body>〜</body>で挟まれた部分が,browser上で表示されます.


さっそく作成した HTML file を browser で表示してみましょう.次のように表示されるはずです.



4.課題①

個人の紹介 page をつくること.

すでにある他の web page を参考にして,自分なりに いくつもの tag を使ってみましょう.
これから,3節において HTML の解説を行います.予め,個人 page のdesign を考えて,必要な tag を見つけましょう.

5.基本的なコマンド



HTML を書く上で基本的な code について紹介していきます.


改行・段落

HTML 文章において改行をいれても,ブラウザ上には反映されません. 

ブラウザ上で改行させたいときは,改行したい位置に<br>タグを記述します.

 <p>〜</p> で,挟まれた文章は一つの段落として認識されます.

見出しの設定

<h>タグは,見出しを指定します.6段階の見出しがあり,h1が一番上の,h6が一番下の見出しであることを表します.

横罫線

<hr>タグで横罫線を表示できます.

罫線の太さ,長さなどを指定したいときは,<hr *>コードを使います.

*の部分には

  • size="太さ" (ピクセル)
  • width="長さ" (ピクセルまたは%)
  • align="left","center","right"
  • noshade
が入ります.
<hr>

と入力すると,下のように横線が入ります.
 



また,この横罫線の,size,width, 位置を指定するすることができます.
<hr align="center" size="8" width="50%">
上のように入力すると,下のような横罫線が browser 上で表示されます.



リスト作成

<ur>〜</ur>コードで挟まれた部分がリストであることを表します.
リストの項目は,<li>〜</li>コードで挟んで並べます.

例えば,
<ul>
<li>英字</li>
<li>ひらがな</li>
<li>カタカナ</li>
</ul>

と入力すると,ブラウザでは
  • 英字
  • ひらがな
  • カタカナ
と表示されます.
リストのマークを変更するコードも用意されています.

番号付きのリストを作成するには,<ol><li>〜<\li><ol>コードを用います.

画像の埋め込み

画像の埋め込みを与えるコードは,<img>〜</img>で与えられます.

例えば,


<img src="sample.jpg">


サイズや枠を指定するには,

  • width="幅"
  • height="高さ"
  • border="枠線の太さ "

を挿入します.

さらに写真にリンクを貼ることができます.写真全体にリンクを貼る方法と写真の一部にリンクを貼る方法があります.

"sample.jpg"というjpgをこのpageの最後に貼り付けておいたので,このfileを用いて画像の埋め込みをしてみましょう.


表(テーブル)作成

<table>〜</table>を用いることで,表を作成することができます.
<tr>〜</tr>で囲まれた範囲で,横一列をあらわし,この列に並べたい書くcellは
<td>〜</td>を用いて記述します.

<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>あ</td><td>い</td><td>う</td></tr>
</table>

A B C
a b c


<table>の代わりに,<table boder=" ">を用いると表に枠を付けることができます.

<table border="2">
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>あ</td><td>い</td><td>う</td></tr>
</table>

A B C
a b c


次のpageで,linkの貼り方,背景の設定などについて解説します.


参考文献

アンク, "ホームページ辞典  第3版 " 翔泳社,(2002/10)


サブページ (1): HTML入門 その2
Comments