HTML に挑戦! HTML(HyperTextMarkupLanguage) はインターネット上でホームページや動くメールなどを表示させるための言葉です もともと WWW は 世界中の研究者が最新の研究成果を共有するため 1989 年に開発された仕組みです ホームページを見るためのソフト ( ブラウザ ) また そのソフトを動かすための基本ソフト OS(OperatingSystem) プロバイダが使っているサーバーコンピュータなど 違った環境で開いても同様に表示されるように工夫された共通語が HTML です アルファベットと記号を組み合わせて書くものなので テキストエディタ ( メモ 帳 SimpleText など ) を使って書きましょう どのように表示されるかはブラウザソフト ( InternetExplorer など ) で確かめま しょう HTML 文書をつくるためのソフトも発売されています 専用ソフトを使えば ワープロソフ ト (Word など ) と同じような感覚で HTML 文書がつくれます また Word や Excel で Web ページ として保存すると HTML 文書ができあがり ます でも 基本になる HTML を理解していると もっとシンプルに 自由に オリジナルのペー ジをつくることができます はじめは難しく感じますが すこしずつ 根気よく 自分のページをつくってみましょう 目次 準備 ~テキストエディタに直接入力 ~ 2 タグ~ 命令の開始と終了を宣言 ~ 4 タイトル~ページの題名 ~ 5 背景 ~ページ全体につける~ 6 色 ~2 桁の 16 進数であらわす~ 8 文字 ~ 文字列 文章を表示させる~ 11 画像 ~ 写真やイラストを表示させる~ 14 レイアウト~ 配置を変える~ 17 リンク~ 他のページやメールをつなぐ~ 19 応用 ~もっと楽しむために~ 20 HTML に挑戦! - 1-
準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準で メモ帳 がはいっています HTML を書くには メモ帳 を使いましょう スタート ( すべての ) プログラム アクセサリ メモ帳 HTML はアルファベットと記号の組み合わせで書かれています 必ず直接入力で書きましょう 全角アルファベットでは動いてくれません 例外もありますが すべて小文字で構いません html html HTML 表示させる文字列は日本語の場合もありますから 半角 / 全角キー を使って切り替えな がら入力しましょう メモ帳で HTML を書いたら 名前をつけて保存します HTML 文書やそこに表示させる画像などは 新しいフォルダ をつくってすべてその中に保存するようにしましょう フォルダの名前は homepage HP などとし デスクトップ や マイドキュメント などわかりやすいところに置きましょう HTML に挑戦! - 2-
ファイル 名前をつけて保存 開いたダイヤログボックスで保存先に フォルダを指定します ファイルの種類を すべてのファイル にします ファイルの名前を直接入力して 名前の後に.htm または.html という拡張子をつけ ましょう フォルダの中に e のマークの HTML ファイル ができます HTML ファイルはダブルクリックすると エクスプローラー が起動します 表示の 仕方を確認しましょう 編集したいときには アイコンの上で右クリックして 開いたメニューの中の プログラ ムから開く または アプリケーションの選択 から NotePad( メモ帳 ) を選 びます HTML 文書は メモ帳 と InternetExplorer ( ブラウザソフト ) の両方で同時に開いて編集します メモ帳で HTML の一部を書き換えたら ファイル 上書き保存して 次にエクスプローラーで 表示 最新の情報に更新をして変更した部分の表示を確かめます 1つのファイルを同時に2つのアプリケーションで開いています HTML に挑戦! - 3-
タグ ~ 命令の開始と終了を宣言 ~ HTML は < と > で囲まれた タグ を使って命令を書きます いろいろな種類のタグがあって また 新しいタグもつくられています そこから命令をはじめることを宣言する 開始タグ とそこで命令を終了する 終了タグ があります 開始タグを書いたら必ずそれと同じ命令の / ではじまる終了タグを組み合わせて書きます ただし 改行 <br> や水平線 <hr> など終了タグが必要ないものもあります 大文字でも小文字でも構いませんが 開始タグを大文字にしたら 終了タグも大文字にします <html> HTML 文書であることを宣言するタグ <head> ファイルの情報に関することを書いてある部分 ( ヘッダー ) であることを宣言するタグ <body> 実際に表示される文字や画像などが書いてある部分であることを宣言するタグもちろんそれぞれに終了タグがあって そこで終了することを宣言します メモ帳に直接入力でタグを書いて test.html と名前をつけて保存してみましょう 同時に その test.html をエクスプローラーで開いてみましょう まだ何も表示されま せんが HTML に挑戦! - 4-
タイトル ~ ページの題名 ~ HTML の 題名 をブラウザのタイトル部分に表示させましょう <head> </head> の間に書きます お気に入りに追加される際には この名前が登録されます 検索エンジンで紹介されるのもこの名前です ページの内容にふさわしい 一度でわかる名前をつけましょう HTML に挑戦! - 5-
背景 ~ページ全体につける~ 背景色や背景画像をページにつけましょう 表示されるページ全体に反映するので ふさわしいものを選びましょう また 文章が見にくくならないよう 邪魔にならないものを選びましょう 背景色 bgcolor <body> 開始タグに半角空白をいれ 続けて指定します 色は 2 桁の 16 進数で R( 赤 )G( 緑 )B( 青 ) をあらわします <bodybgcolor="ccffff"> </body> ページ全体が指定した色で塗りつぶされます "CCFFFF" あまり濃い色を選ぶと目が疲れます 文字の色との関係を含め ブラウザで確かめながら 選びましょう HTML に挑戦! - 6-
背景画像 background <body> 開始タグに半角空白をいれ 続けて指定します 背景にする画像は あらかじめ名前をつけて保存しておきましょう <bodybackground="haikei.gif"> </body> 画像が繰り返してページ全体に表示されます "haikei.gif" 背景用の画像は色合いの薄い 文字の邪魔にならないものを選びましょう 画像を指定するときには 画像の保存してあるフォルダと HTML の保存場所の関係をきち んと指定しましょう HTML に挑戦! - 7-
色 ~2 桁の 16 進数であらわす~ 光の 3 原色は赤 (R) 緑(G) 青(B) です # のあとに赤 緑 青の順にそれぞれの強さを 2 桁の 16 進数であらわします 16 進数は 0~9 までの数字と a~f の 6つのアルファベットを使います 0 1 2 3 4 5 6 7 8 9 a b c d e f RGB の 3 色のそれぞれに 2 桁の 16 種類 全部で (16 16) (16 16) (16 16)=16,777,216 例えば #000000 だと 黒 #FF0000 だと 赤 #FFFFFF だと 白 基本 16 色は どんな初期のブラウザでも表示できます RGB の値で指定するほかに色名を指定することもできます #000000 Black #FF0000 Red #800000 Maroon #808080 Gray #FFFF00 Yellow #808000 Olive #C0C0C0 Silver #00FF00 Lime #008000 Green #FFFFFF White #00FFFF Aqua #008080 Teal #0000FF Blue #000080 Navy #FF00FF Fuchsia #800080 Purple 216 色を Web セーフカラー といいます 256 色のディスプレイでも表示することができます RGB それぞれの強さを 6 段階 (00 33 66 99 CC FF) に固定して 組み合わせます 6 6 6=216 文字の色や背景色には基本 16 色と Web セーフカラー 216 色の中の色を使うといいでしょう HTML に挑戦! - 8-
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #330000 #333300 #336600 #339900 #33CC00 #33FF00 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #660000 #663300 #666600 #669900 #66CC00 #66FF00 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF HTML に挑戦! - 9-
#990000 #993300 #996600 #999900 #99CC00 #99FF00 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF HTML に挑戦! - 10-
文字 ~ 文字列 文章を表示させる~ 本文になる文字列は <body> </body> の間に書きます <p> </p> の間がひとつの段落 (paragraph) になります 段落の途中で改行 (break) するときには <br> を使います テキストでする改行は途中に空白がはいるだけでブラウザのには反映されません <br> に終了タグはありません 標準 ( 何も指定しないということ ) では 12 ポイントの黒い文字です HTML に挑戦! - 11-
文字の大きさ <fontsize=" "> 文字列 </font> 文字の大きさは1~7の数値で表します 1=8 ポイント 2=10 ポイント 3=12 ポイント 4=14 ポイント 5=18 ポイント 6=24 ポイント 7=36 ポイントディスプレイ表示を 拡大 して見ている人もいるので この数値の指定と実際の大きさは違っている場合もあります 標準をもとに指定する方法もあります 1レベル大きな文字にする <fontsize="+1"> 文字列 </font> 2レベル小さな文字にする <fontsize="-2"> 文字列 </font> 文字の色 <fontcolor=" "> 文字列 </font> 文字の色は RGB 値を指定します 太字 <b> 文字列 </b> 太字 (bold) になります 斜体 <i> 文字列 </i> 斜体 (italic) になります 青い太字で斜体のレベル 5 の文字列は <i><b><fontcolor="#0000ff"size="5"> はじめての HTML です </font></b></i> 書体を指定することもできますが 相手のパソコンに書体が入っていなければすべて標準 (P ゴシック体 ) になってしまいます 特殊な書体を使いたいときは 画像にして表示させ る方法をとりましょう HTML に挑戦! - 12-
HTML に挑戦! - 13-
画像 ~ 写真やイラストを表示させる~ 画像を表示させるには 表示させる画像をジェイペグ (.jpg) 形式やジフ (.gif) 形式で準備しておかなければなりません 無駄に大きい画像は ダウンロードに時間がかかるので使ってはいけません 見かけ上のサイズを小さくするのではなく あらかじめファイル自体を小さくしておきましょう 800 ピクセル 600 ピクセル ブラウザの画面いっぱいに広がります 次頁参照 400 ピクセル 300 ピクセル サービスサイズの現像写真に近い大きさです 200 ピクセル 150 ピクセル 100 ピクセル 75 ピクセル サムネイル 表示 ( 縮小表示 ) にむいています HTML に挑戦! - 14-
HTML に挑戦! - 15-
<imgsrc=" "> ファイル名は HTML ファイルと画像ファイルのある場所の位置関係をきちんと指定します HTML ファイルと画像ファイルが同じフォルダにある場合 <imgsrc="waterlilies.jpg"> HTML ファイルと同じフォルダに画像の入っているフォルダ image がある場合 <imgsrc="image/waterlilies.jpg"> 画像のサイズをあらかじめ指定しておくと表示が速くなります 幅を width 高さを height で単位はピクセルを使います 画像の説明文をつけておくとアップに失敗したときや画像を表示させない設定をしてあるブラウザに親切です 日本語で書いて構いません <imgsrc="waterlilies.jpg"alt=" 蓮池の写真 "> HTML に挑戦! - 16-
レイアウト ~ 配置を変える ~ 文字や画像を好きなところにレイアウトしましょう 中央揃え (center) <center> 文字列 </center> 文字列を中央に配置します <palign="center"> 段落 </p> 段落を中央に配置します <divalign="center"> 文字列 </div> 複数の文字列や段落をまとめて中央に配置します <imgsrc="waterlilies.jpg"align="center"> 画像を中央に配置します 右揃え (right) 左揃え (left) も同様にします 画像の文章に対する表示位置を指定しましょう <imgsrc="gazo.jpg"align="top"> 文字列画像の上端が文字の上端にあわせて表示されます <imgsrc="gazo.jpg"align="middle"> 文字列画像の中央が文字の下端にあわせて表示されます <imgsrc="gazo.jpg"align="bottom"> 文字列画像の下端が文字の下端にあわせて表示されます HTML に挑戦! - 17-
HTML に挑戦! - 18-
リンク ~ 他のページやメールをつなぐ~ <ahref=".html"> 文字列 </a> 文字列をクリックすると指定されたリンク先が開きます リンクが張ってある文字列は標準では下線つき青色で表示されます 文字列の代わりに画像にリンクを貼ることもできます 縮小サイズの画像を見本に並べておいて 大きな画像にリンクを貼るのは読者に親切です <ahref="mailto: アドレス "> 文字列 </a> 文字列をクリックするとメールソフトが起動して 指定したアドレス宛にメールを出せるようになります 文字列には メールアドレスを書いたり 受取者の名前を書いたりしておきましょう HTML に挑戦! - 19-
応用 ~もっと楽しむために~ ポチポチとメモ帳に書くのは面倒です でも 一度ひな形をつくっておくとそれを少し書き換えてページをつくることができます ホームページ作成ソフトでつくったページでも HTML 編集モード にして書き換えたほうが簡単な場合もあります 何より ホームページ作成ソフトよりも軽いページができるので 表示にかかる時間を節約できます インターネットを見ていて 面白いページがあったら どんな HTML を使っているのか拝見 しましょう 表示 ソースでメモ帳が開き そのページの HTML がみられます HTML に挑戦! - 20-