まずは以下の文章をテキストエディタで作成してみましょうテキストエディタの使用方法は別紙のテキストエディタ (gedit) の使用方法についてを参考にしてくださいホームページ作成の練習ファイル名を index.html として保存ができましたらサーバーにアップロードしますアップロード方法

(1)

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

１．最初に最近ですと、皆さんもインターネットを利用する機会も増えてきているかと思いますが、本日は情報を与える側の立場に立ってもらい、ホームページを作成するための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>

(2)

まずは以下の文章をテキストエディタで作成してみましょう。テキストエディタの使用方法は別紙の「テキストエディタ（gedit）の使用方法について」を参考にしてください。 <html> <head> <title>ホームページを作成しよう！</title> </head> <body> ホームページ作成の練習 </body> </html> ファイル名を「index.html」として保存ができましたら、サーバーにアップロードします。アップロード方法については別紙を参照してください。作成したファイルをブラウザで確認をし、図１のような表示がでればOK です。図１ホームページの表示例２．３いろいろなタグ以下にホームページのデザインを変えるためのいろいろなタグを紹介します。順に試していってください。２．３．１改行通常ですと、HTML では改行を使ってファイルを作成しても、ホームページの表示には反映されません。HTML で文章の改行を行うには タグを使います。これには終了タグがありませんので、注意してください。 <html> <head> <title>ホームページを作成しよう！</title> </head> <body> ホームページ作成の練習 こっちは改行されるけど、これは改行されない。 </body> </html> タイトルメインの文章

(3)

２．３．２文字の色

文字の色を変更するには ～ を使います。????には色の名前を書きます。例えば、赤文字にするには以下のようして使います。 <html> <head> <title>ホームページを作成しよう！</title> </head> <body>

ホームページ作成の練習 こっちは改行されるけど、これは改行されない。 </body> </html> 他にもホームページで使える色の名前をテキストの最後に示しておきます。好きな色を使ってください。２．３．３文字のサイズ

文字のサイズを変えるには ～ を使います。?には文字のサイズ（1～7）を書きます。以下のようにして使います。 <html> <head> <title>ホームページを作成しよう！</title> </head> <body>

ホームページ作成の練習 こっちは改行されるけど、

これは改行されない。

３段階小さいサイズ ２段階小さいサイズ １段階小さいサイズ これが標準のサイズ １段階大きいサイズ ２段階大きいサイズ ３段階大きいサイズ </body>

</html>

２．３．４背景の色

背景の色を変えるには<body> ～ </body>と書いていたところを<body bgcolor = "????"> ～ </body>と変更して使います。????には背景の色が入り、文字の色のところで紹介したものと同じように書くことが出来ます。具体的には、以下のようにして使います。

(4)

<title>ホームページを作成しよう！</title> </head>

３段階小さいサイズ ２段階小さいサイズ １段階小さいサイズ これが標準のサイズ １段階大きいサイズ ２段階大きいサイズ ３段階大きいサイズ </body>

</html>

２．３．５画面内のテキストの位置を決める

画面内のテキストの位置を決める（行揃え）には<div align = "????"> ～ </div>を使います。 ????には、left（左寄せ）、center（中央）、right（右寄せ）が入ります。以下のようにして使います。 <html> <head> <title>ホームページを作成しよう！</title> </head>

３段階小さいサイズ ２段階小さいサイズ １段階小さいサイズ これが標準のサイズ １段階大きいサイズ ２段階大きいサイズ ３段階大きいサイズ </div> </body> </html> ２．３．６区切り線を入れる文章が増えてくると、ホームページが見づらくなってきます。そんな時に重宝するのが、水平線を表示する<hr>タグです。これは終了タグがありません。以下のようにして使用します。

(5)

<title>ホームページを作成しよう！</title> </head>

<hr>

３段階小さいサイズ ２段階小さいサイズ １段階小さいサイズ これが標準のサイズ １段階大きいサイズ ２段階大きいサイズ ３段階大きいサイズ </div> </body> </html> ２．３．７もっと自由な表示を HTML では改行やスペースは通常だとホームページの表示に反映されません。しかし<pre> ～ </pre>を使うことで反映されるようになり、かなり自由な配置で表示をすることができます。 <html> <head> <title>ホームページを作成しよう！</title> </head> <body> <pre> こんな感じで表示されるわけだ </pre> </body> </html> この方法はブラウザの設定によって違って見えますので、必ずしも自分の思い通りに表示できるとは限りません。最近の主流ではスタイルシートというものを使うことで表示位置や行間を細かく設定する方法が取られています。この講座では使いませんが、興味のある人は調べてみると良いでしょう。２．３．８その他のタグここで紹介したタグはHTML 言語のごく一部です。例えば、文字の表示一つをとっても以下のようなものもあります。 ～ 文字を太字にする ～ 文字を斜体にする

(6)

～ 文字に下線をつける ～ 上付文字にする ～ 下付文字にするとても全てを紹介できませんが、ここまで紹介したものを使って、オリジナルのホームページを作成しましょう。２．４オリジナルのホームページを作成するここまで紹介したものを使って、オリジナルのホームページを作成してください。作成する内容は例えば、・中学校の紹介・趣味の紹介・部活動の紹介などのテーマがいいでしょう。参考文献 HTML ポケットリファレンスシーズ著技術評論社注意！！！ホームページは手軽に情報を発信できる反面、公開された時点で日本中、世界中のあらゆる人が見ることができます。ホームページに限らず、インターネットを利用する場合には個人を特定するような情報や他人の悪口を書くことは絶対にしないでください。作成するホームページに載せる情報には十分注意してください。

(7)

ホームページに使える色の名前の一覧

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 32 darkolivegreen

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