ホームページを作成しよう！

ホームページを作成しよう！
１．最初に
最近ですと、皆さんもインターネットを利用する機会も増えてきているかと思いますが、本日は情報
を与える側の立場に立ってもらい、ホームページを作成するための HTML 形式と呼ばれるファイルの作
成方法を学んでもらおうと思います。
HTML とは、タグと呼ばれるキーワードを文章中に入れることで、様々な文章スタイルを表現するこ
とができる言語です。HTML ファイルを作成するときは、特別なソフトウェアは必要ありません。テキ
ストエディタ（ワープロソフトのようなもの）の機能があり、テキストファイルとして保存できれば、
どのようなソフトウェアを使っても作成することができます。
本日のおおまかな作業の流れとしては
①「gedit」と呼ばれるテキストエディタを利用して HTML ファイルを作成し、
②秋田高専で用意したサーバー（サービスを提供するパソコン）に保存（アップロード）し、
③ブラウザ（ホームページを見るソフト）で自分のホームページを確認
することになります。
２．HTML ファイルの作成
２．１タグについて
HTML ファイルで使うタグなのですが、< >記号で囲まれているキーワードのことをいいます。
<タグ名>タグの機能を影響させる文章</タグ名>
基本的にタグは、開始タグと終了タグがあり、タグの機能を影響させたい文章をそれらのタグで挟ん
だ構造をとっています。終了タグはタグ名の先頭に / (スラッシュ)をつけます。例えば、太字(Bold)に
するには
太字にする文章
とすれば良いわけです。終了タグを付け忘れると、これ以降の文字列は全て影響が及ぶことになります。
ただし、一部のタグには開始タグだけで終了タグがないものもあります。
また、タグとして入力する文字には大文字と小文字の区別がありません、例えば、文字列を中央揃え
にするタグの<CENTER>も<Center>も<center>も同じ機能になります。
２．２とにかく HTML ファイルを作成してみる
HTML ファイルは基本的に 3 つの部分で構成されています。HTML ファイルであることを示す<html>
タグの範囲、タイトルや特徴などのヘッダ情報を入力する<head>タグの範囲、そしてページの本文を入
力する<body>タグの範囲です。
<body>と</body>で囲まれた範囲に、ホームページのメインとなる文章などが入ります。
<html>
<head>
タイトルとか
</head>
<body>
メインの文章
</body>
</html>
まずは以下の文章をテキストエディタで作成してみましょう。テキストエディタの使用方法は別紙の
「テキストエディタ（gedit）の使用方法について」を参考にしてください。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body>
ホームページ作成の練習
</body>
</html>
ファイル名を「index.html」として保存ができましたら、サーバーにアップロードします。アップロ
ード方法については別紙を参照してください。作成したファイルをブラウザで確認をし、図１のような
表示がでれば OK です。
タイトル
メインの
文章
図１ホームページの表示例
２．３いろいろなタグ
以下にホームページのデザインを変えるためのいろいろなタグを紹介します。順に試していってくだ
さい。
２．３．１改行
通常ですと、HTML では改行を使ってファイルを作成しても、ホームページの表示には反映されませ
ん。HTML で文章の改行を行うには タグを使います。これには終了タグがありませんので、注意し
てください。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body>
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
</body>
</html>
２．３．２文字の色
文字の色を変更するには ～ を使います。????には色の名前を書き
ます。例えば、赤文字にするには以下のようして使います。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body>
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
</body>
</html>
他にもホームページで使える色の名前をテキストの最後に示しておきます。好きな色を使ってくださ
い。
２．３．３文字のサイズ
文字のサイズを変えるには ～
を書きます。以下のようにして使います。
を使います。?には文字のサイズ（1～7）
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body>
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
 
３段階小さいサイズ 
２段階小さいサイズ 
１段階小さいサイズ 
これが標準のサイズ 
１段階大きいサイズ 
２段階大きいサイズ 
３段階大きいサイズ 
</body>
</html>
２．３．４背景の色
背景の色を変えるには<body> ～ </body>と書いていたところを<body bgcolor = "????"> ～
</body>と変更して使います。????には背景の色が入り、文字の色のところで紹介したものと同じよう
に書くことが出来ます。具体的には、以下のようにして使います。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body bgcolor = "yellow">
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
 
３段階小さいサイズ 
２段階小さいサイズ 
１段階小さいサイズ 
これが標準のサイズ 
１段階大きいサイズ 
２段階大きいサイズ 
３段階大きいサイズ 
</body>
</html>
２．３．５画面内のテキストの位置を決める
画面内のテキストの位置を決める（行揃え）には<div align = "????"> ～ </div>を使います。
????には、left（左寄せ）、center（中央）、right（右寄せ）が入ります。以下のようにして使い
ます。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body bgcolor = "yellow">
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
 
<div align = "center">
３段階小さいサイズ 
２段階小さいサイズ 
１段階小さいサイズ 
これが標準のサイズ 
１段階大きいサイズ 
２段階大きいサイズ 
３段階大きいサイズ 
</div>
</body>
</html>
２．３．６区切り線を入れる
文章が増えてくると、ホームページが見づらくなってきます。そんな時に重宝するのが、水平線を表
示する<hr>タグです。これは終了タグがありません。以下のようにして使用します。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body bgcolor = "yellow">
ホームページ作成の練習 
こっちは改行されるけど、
これは改行されない。
 
<hr>
<div align = "center">
３段階小さいサイズ 
２段階小さいサイズ 
１段階小さいサイズ 
これが標準のサイズ 
１段階大きいサイズ 
２段階大きいサイズ 
３段階大きいサイズ 
</div>
</body>
</html>
２．３．７もっと自由な表示を
HTML では改行やスペースは通常だとホームページの表示に反映されません。しかし<pre> ～
</pre>を使うことで反映されるようになり、かなり自由な配置で表示をすることができます。
<html>
<head>
<title>ホームページを作成しよう！</title>
</head>
<body>
<pre>
こんな
感じで
表示されるわけだ
</pre>
</body>
</html>
この方法はブラウザの設定によって違って見えますので、必ずしも自分の思い通りに表示できるとは
限りません。最近の主流ではスタイルシートというものを使うことで表示位置や行間を細かく設定する
方法が取られています。この講座では使いませんが、興味のある人は調べてみると良いでしょう。
２．３．８その他のタグ
ここで紹介したタグは HTML 言語のごく一部です。例えば、文字の表示一つをとっても以下のよう
なものもあります。
 ～
 ～


文字を太字にする
文字を斜体にする
 ～ 
 ～ 
 ～ 
文字に下線をつける
上付文字にする
下付文字にする
とても全てを紹介できませんが、ここまで紹介したものを使って、オリジナルのホームページを作成
しましょう。
２．４オリジナルのホームページを作成する
ここまで紹介したものを使って、オリジナルのホームページを作成してください。作成する内容は例
えば、
・中学校の紹介
・趣味の紹介
・部活動の紹介
などのテーマがいいでしょう。
注意！！！
ホームページは手軽に情報を発信できる反面、公開された時点で日本中、世
界中のあらゆる人が見ることができます。ホームページに限らず、インターネ
ットを利用する場合には個人を特定するような情報や他人の悪口を書くこと
は絶対にしないでください。
作成するホームページに載せる情報には十分注意してください。
参考文献 HTML ポケットリファレンスシーズ著技術評論社
ホームページに使える色の名前の一覧
1 black
2 navy
3 darkblue
4 mediumblue
5 blue
6 darkgreen
7 green
8 teal
9 darkcyan
10 deepskyblue
11 darkturquoise
12 honeydewtab
13 mediumspringgreen 14 lime
15 springgreen
16 aqua
17 cyan
18 midnightblue
19 dodgerblue
20 lightseagreen
21 forestgreen
22 seagreen
23 darkslategray
24 limegreen
25 mediumseagreen
26 turquoise
27 royalblue
28 steelblue
29 darkslateblue
30 mediumturquoise 31 indigo
33 cadetblue
34 cornflowerblue
35 mediumaquamarine 36 dimgray
37 slateblue
38 olivedrab
39 slategray
40 lightslategray
41 mediumslateblue
42 lawngreen
43 chartreuse
44 aquamarine
45 maroon
46 purple
47 olive
48 gray
49 skyblue
50 lightskyblue
51 blueviolet
52 darkred
53 darkmagenta
54 saddlebrown
55 darkseagreen
56 lightgreen
57 mediumpurple
58 darkviolet
59 palegreen
60 darkorchid
61 yellowgreen
62 sienna
63 brown
64 darkgray
65 lightblue
66 greenyellow
67 paleturquoise
68 lightsteelblue
69 powderblue
70 firebrick
71 darkgoldenrod
72 mediumorchid
73 rosybrown
74 darkkhaki
75 silver
76 mediumvioletred
77 indianred
78 peru
79 chocolate
80 tan
81 lightgrey
82 thistle
83 orchid
84 goldenrod
85 palevioletred
86 crimson
87 gainsboro
88 plum
89 burlywood
90 lightcyan
91 lavender
92 darksalmon
93 violet
94 palegoldenrod
95 lightcoral
96 khaki
97 aliceblue
98 honeydew
99 azure
100 sandybrown
101 wheat
102 beige
103 whitesmoke
104 mintcream
105 ghostwhite
106 salmon
107 antiquewhite
108 linen
109 lightgoldenrodyellow 110 oldlace
111 red
112 fuchsia
113 magenta
114 deeppink
115 orangered
116 tomato
117 hotpink
118 coral
119 darkorange
120 lightsalmon
121 orange
122 lightpink
123 pink
124 gold
125 peachpuff
126 navajowhite
127 moccasin
128 bisque
129 mistyrose
130 blanchedalmond 131 papayawhip
132 lavenderblush
133 seashell
134 cornsilk
135 lemonchiffon
136 floralwhite
137 snow
138 yellow
139 lightyellow
140 ivory
141 white
32 darkolivegreen

Download Report