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

Size: px

Start display at page:

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

こうしろうとどろき
5 years ago
Views:

1 ホームページを作成しよう! 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 ファイルであることを示すタグの範囲タイトルや特徴などのヘッダ情報を入力するタグの範囲そしてページの本文を入力するタグの範囲ですとで囲まれた範囲にホームページのメインとなる文章などが入りますタイトルとかメインの文章

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

3 2.3.2 文字の色文字の色を変更するには <font color = "????"> ~ </font> を使います???? には色の名前を書きます例えば赤文字にするには以下のようして使います他にもホームページで使える色の名前をテキストの最後に示しておきます好きな色を使ってください文字のサイズ文字のサイズを変えるには <font size = "?"> ~ </font> を使います? には文字のサイズ (1~7) を書きます以下のようにして使います背景の色背景の色を変えるには ~ と書いていたところを <body bgcolor = "????"> ~ と変更して使います???? には背景の色が入り文字の色のところで紹介したものと同じように書くことが出来ます具体的には以下のようにして使います

4 <body bgcolor = "yellow"> 画面内のテキストの位置を決める画面内のテキストの位置を決める ( 行揃え ) には <div align = "????"> ~ </div> を使います???? には left( 左寄せ ) center( 中央 ) right( 右寄せ ) が入ります以下のようにして使います <body bgcolor = "yellow"> <div align = "center"> </div> 区切り線を入れる文章が増えてくるとホームページが見づらくなってきますそんな時に重宝するのが水平線を表示する <hr> タグですこれは終了タグがありません以下のようにして使用します

5 <body bgcolor = "yellow"> <hr> <div align = "center"> </div> もっと自由な表示を HTML では改行やスペースは通常だとホームページの表示に反映されませんしかし <pre> ~ </pre> を使うことで反映されるようになりかなり自由な配置で表示をすることができます <pre> こんな感じで表示されるわけだ </pre> この方法はブラウザの設定によって違って見えますので必ずしも自分の思い通りに表示できるとは限りません最近の主流ではスタイルシートというものを使うことで表示位置や行間を細かく設定する方法が取られていますこの講座では使いませんが興味のある人は調べてみると良いでしょうその他のタグここで紹介したタグは HTML 言語のごく一部です例えば文字の表示一つをとっても以下のようなものもあります <b> ~ </b> <i> ~ </i> 文字を太字にする文字を斜体にする

6 <u> ~ </u> 文字に下線をつける <sup> ~ </sup> 上付文字にする <sub> ~ </sub> 下付文字にするとても全てを紹介できませんがここまで紹介したものを使ってオリジナルのホームページを作成しましょう 2.4 オリジナルのホームページを作成するここまで紹介したものを使ってオリジナルのホームページを作成してください作成する内容は例えば中学校の紹介趣味の紹介部活動の紹介などのテーマがいいでしょう注意!!! ホームページは手軽に情報を発信できる反面公開された時点で日本中世界中のあらゆる人が見ることができますホームページに限らずインターネットを利用する場合には個人を特定するような情報や他人の悪口を書くことは絶対にしないでください作成するホームページに載せる情報には十分注意してください参考文献 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

untitled

untitled Web HTML(Hyper-Text Markup Language) Web HTML () Web / Web -1 Web -2 Web -3 Web -4 Web Web -5 White Black Red Green Blue Yellow Purple Aqua Maroon Navy Olive Teal Gray Silver Lime Fuchsia Snow Linen Bisque