ホームページを作成しよう! 1. 最初に最近ですと 皆さんもインターネットを利用する機会も増えてきているかと思いますが 本日は情報を与える側の立場に立ってもらい ホームページを作成するための HTML 形式と呼ばれるファイルの作成方法を学んでもらおうと思います HTML とは タグと呼ばれるキーワードを文章中に入れることで 様々な文章スタイルを表現することができる言語です HTML ファイルを作成するときは 特別なソフトウェアは必要ありません テキストエディタ ( ワープロソフトのようなもの ) の機能があり テキストファイルとして保存できれば どのようなソフトウェアを使っても作成することができます 本日のおおまかな作業の流れとしては 1 gedit と呼ばれるテキストエディタを利用して HTML ファイルを作成し 2 秋田高専で用意したサーバー ( サービスを提供するパソコン ) に保存 ( アップロード ) し 3 ブラウザ ( ホームページを見るソフト ) で自分のホームページを確認 することになります 2.HTML ファイルの作成 2.1 タグについて HTML ファイルで使うタグなのですが < > 記号で囲まれているキーワードのことをいいます < タグ名 > タグの機能を影響させる文章 </ タグ名 > 基本的にタグは 開始タグと終了タグがあり タグの機能を影響させたい文章をそれらのタグで挟んだ構造をとっています 終了タグはタグ名の先頭に / ( スラッシュ ) をつけます 例えば 太字 (Bold) にするには <B> 太字にする文章 </B> とすれば良いわけです 終了タグを付け忘れると これ以降の文字列は全て影響が及ぶことになります ただし 一部のタグには開始タグだけで終了タグがないものもあります また タグとして入力する文字には大文字と小文字の区別がありません 例えば 文字列を中央揃えにするタグの <CENTER> も <Center> も <center> も同じ機能になります 2.2 とにかく HTML ファイルを作成してみる HTML ファイルは基本的に 3 つの部分で構成されています HTML ファイルであることを示す タグの範囲 タイトルや特徴などのヘッダ情報を入力する タグの範囲 そしてページの本文を入力する タグの範囲です と で囲まれた範囲に ホームページのメインとなる文章などが入ります タイトルとか メインの文章
まずは以下の文章をテキストエディタで作成してみましょう テキストエディタの使用方法は別紙の テキストエディタ (gedit) の使用方法について を参考にしてください ホームページ作成の練習 ファイル名を index.html として保存ができましたら サーバーにアップロードします アップロード方法については別紙を参照してください 作成したファイルをブラウザで確認をし 図 1 のような表示がでれば OK です タイトル メインの文章 図 1 ホームページの表示例 2.3 いろいろなタグ以下にホームページのデザインを変えるためのいろいろなタグを紹介します 順に試していってください 2.3.1 改行通常ですと HTML では改行を使ってファイルを作成しても ホームページの表示には反映されません HTML で文章の改行を行うには タグを使います これには終了タグがありませんので 注意してください ホームページ作成の練習
2.3.2 文字の色文字の色を変更するには <font color = "????"> ~ </font> を使います???? には色の名前を書きます 例えば 赤文字にするには以下のようして使います 他にもホームページで使える色の名前をテキストの最後に示しておきます 好きな色を使ってください 2.3.3 文字のサイズ文字のサイズを変えるには <font size = "?"> ~ </font> を使います? には文字のサイズ (1~7) を書きます 以下のようにして使います 2.3.4 背景の色背景の色を変えるには ~ と書いていたところを <body bgcolor = "????"> ~ と変更して使います???? には背景の色が入り 文字の色のところで紹介したものと同じように書くことが出来ます 具体的には 以下のようにして使います
<body bgcolor = "yellow"> 2.3.5 画面内のテキストの位置を決める画面内のテキストの位置を決める ( 行揃え ) には <div align = "????"> ~ </div> を使います???? には left( 左寄せ ) center( 中央 ) right( 右寄せ ) が入ります 以下のようにして使います <body bgcolor = "yellow"> <div align = "center"> </div> 2.3.6 区切り線を入れる文章が増えてくると ホームページが見づらくなってきます そんな時に重宝するのが 水平線を表示する <hr> タグです これは終了タグがありません 以下のようにして使用します
<body bgcolor = "yellow"> <hr> <div align = "center"> </div> 2.3.7 もっと自由な表示を HTML では改行やスペースは通常だとホームページの表示に反映されません しかし <pre> ~ </pre> を使うことで反映されるようになり かなり自由な配置で表示をすることができます <pre> こんな感じで表示されるわけだ </pre> この方法はブラウザの設定によって違って見えますので 必ずしも自分の思い通りに表示できるとは限りません 最近の主流ではスタイルシートというものを使うことで表示位置や行間を細かく設定する方法が取られています この講座では使いませんが 興味のある人は調べてみると良いでしょう 2.3.8 その他のタグここで紹介したタグは HTML 言語のごく一部です 例えば 文字の表示一つをとっても以下のようなものもあります <b> ~ </b> <i> ~ </i> 文字を太字にする文字を斜体にする
<u> ~ </u> 文字に下線をつける <sup> ~ </sup> 上付文字にする <sub> ~ </sub> 下付文字にする とても全てを紹介できませんが ここまで紹介したものを使って オリジナルのホームページを作成しましょう 2.4 オリジナルのホームページを作成するここまで紹介したものを使って オリジナルのホームページを作成してください 作成する内容は例えば 中学校の紹介 趣味の紹介 部活動の紹介 などのテーマがいいでしょう 注意!!! ホームページは手軽に情報を発信できる反面 公開された時点で日本中 世界中のあらゆる人が見ることができます ホームページに限らず インターネットを利用する場合には個人を特定するような情報や他人の悪口を書くことは絶対にしないでください 作成するホームページに載せる情報には十分注意してください 参考文献 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 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