準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準でメモ帳がはいっています HTML を書くにはメモ帳を使いましょうスタート ( すべての ) プログラムアクセサリメモ帳 HTML はアルファベットと記号の組み合わせで書かれています必ず直接入力で書きましょう全角

Size: px

Start display at page:

Download "準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準でメモ帳がはいっています HTML を書くにはメモ帳を使いましょうスタート ( すべての ) プログラムアクセサリメモ帳 HTML はアルファベットと記号の組み合わせで書かれています必ず直接入力で書きましょう全角"

きよあつかつま
7 years ago
Views:

1 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-

2 準備 ~ テキストエディタに直接入力 ~ ウィンドウズパソコンには標準でメモ帳がはいっています HTML を書くにはメモ帳を使いましょうスタート ( すべての ) プログラムアクセサリメモ帳 HTML はアルファベットと記号の組み合わせで書かれています必ず直接入力で書きましょう全角アルファベットでは動いてくれません例外もありますがすべて小文字で構いません html html HTML 表示させる文字列は日本語の場合もありますから半角 / 全角キーを使って切り替えながら入力しましょうメモ帳で HTML を書いたら名前をつけて保存します HTML 文書やそこに表示させる画像などは新しいフォルダをつくってすべてその中に保存するようにしましょうフォルダの名前は homepage HP などとしデスクトップやマイドキュメントなどわかりやすいところに置きましょう HTML に挑戦! - 2-

3 ファイル名前をつけて保存開いたダイヤログボックスで保存先にフォルダを指定しますファイルの種類をすべてのファイルにしますファイルの名前を直接入力して名前の後に.htm または.html という拡張子をつけましょうフォルダの中に e のマークの HTML ファイルができます HTML ファイルはダブルクリックするとエクスプローラーが起動します表示の仕方を確認しましょう編集したいときにはアイコンの上で右クリックして開いたメニューの中のプログラムから開くまたはアプリケーションの選択から NotePad( メモ帳 ) を選びます HTML 文書はメモ帳と InternetExplorer ( ブラウザソフト ) の両方で同時に開いて編集しますメモ帳で HTML の一部を書き換えたらファイル上書き保存して次にエクスプローラーで表示最新の情報に更新をして変更した部分の表示を確かめます 1つのファイルを同時に2つのアプリケーションで開いています HTML に挑戦! - 3-

4 タグ ~ 命令の開始と終了を宣言 ~ HTML は < と > で囲まれたタグを使って命令を書きますいろいろな種類のタグがあってまた新しいタグもつくられていますそこから命令をはじめることを宣言する開始タグとそこで命令を終了する終了タグがあります開始タグを書いたら必ずそれと同じ命令の / ではじまる終了タグを組み合わせて書きますただし改行 や水平線 <hr> など終了タグが必要ないものもあります大文字でも小文字でも構いませんが開始タグを大文字にしたら終了タグも大文字にします <html> HTML 文書であることを宣言するタグ <head> ファイルの情報に関することを書いてある部分 ( ヘッダー ) であることを宣言するタグ <body> 実際に表示される文字や画像などが書いてある部分であることを宣言するタグもちろんそれぞれに終了タグがあってそこで終了することを宣言しますメモ帳に直接入力でタグを書いて test.html と名前をつけて保存してみましょう同時にその test.html をエクスプローラーで開いてみましょうまだ何も表示されませんが HTML に挑戦! - 4-

5 タイトル ~ ページの題名 ~ HTML の題名をブラウザのタイトル部分に表示させましょう <head> </head> の間に書きますお気に入りに追加される際にはこの名前が登録されます検索エンジンで紹介されるのもこの名前ですページの内容にふさわしい一度でわかる名前をつけましょう HTML に挑戦! - 5-

6 背景 ~ページ全体につける~ 背景色や背景画像をページにつけましょう表示されるページ全体に反映するのでふさわしいものを選びましょうまた文章が見にくくならないよう邪魔にならないものを選びましょう背景色 bgcolor <body> 開始タグに半角空白をいれ続けて指定します色は 2 桁の 16 進数で R( 赤 )G( 緑 )B( 青 ) をあらわします <bodybgcolor="ccffff"> </body> ページ全体が指定した色で塗りつぶされます "CCFFFF" あまり濃い色を選ぶと目が疲れます文字の色との関係を含めブラウザで確かめながら選びましょう HTML に挑戦! - 6-

7 背景画像 background <body> 開始タグに半角空白をいれ続けて指定します背景にする画像はあらかじめ名前をつけて保存しておきましょう <bodybackground="haikei.gif"> </body> 画像が繰り返してページ全体に表示されます "haikei.gif" 背景用の画像は色合いの薄い文字の邪魔にならないものを選びましょう画像を指定するときには画像の保存してあるフォルダと HTML の保存場所の関係をきちんと指定しましょう HTML に挑戦! - 7-

8 色 ~2 桁の 16 進数であらわす~ 光の 3 原色は赤 (R) 緑(G) 青(B) です # のあとに赤緑青の順にそれぞれの強さを 2 桁の 16 進数であらわします 16 進数は 0~9 までの数字と a~f の 6つのアルファベットを使います a b c d e f RGB の 3 色のそれぞれに 2 桁の 16 種類全部で (16 16) (16 16) (16 16)=16,777,216 例えば # だと黒 #FF0000 だと赤 #FFFFFF だと白基本 16 色はどんな初期のブラウザでも表示できます RGB の値で指定するほかに色名を指定することもできます # Black #FF0000 Red # Maroon # Gray #FFFF00 Yellow # Olive #C0C0C0 Silver #00FF00 Lime # Green #FFFFFF White #00FFFF Aqua # Teal #0000FF Blue # Navy #FF00FF Fuchsia # Purple 216 色を Web セーフカラーといいます 256 色のディスプレイでも表示することができます RGB それぞれの強さを 6 段階 ( CC FF) に固定して組み合わせます 6 6 6=216 文字の色や背景色には基本 16 色と Web セーフカラー 216 色の中の色を使うといいでしょう HTML に挑戦! - 8-

9 # # # # #00CC00 #00FF00 # # # # #00CC33 #00FF33 # # # # #00CC66 #00FF66 # # # # #00CC99 #00FF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF # # # # #33CC00 #33FF00 # # # # #33CC33 #33FF33 # # # # #33CC66 #33FF66 # # # # #33CC99 #33FF99 #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF # # # # #66CC00 #66FF00 # # # # #66CC33 #66FF33 # # # # #66CC66 #66FF66 # # # # #66CC99 #66FF99 #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF HTML に挑戦! - 9-

10 # # # # #99CC00 #99FF00 # # # # #99CC33 #99FF33 # # # # #99CC66 #99FF66 # # # # #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-

11 文字 ~ 文字列文章を表示させる~ 本文になる文字列は <body> </body> の間に書きます の間がひとつの段落 (paragraph) になります段落の途中で改行 (break) するときには を使いますテキストでする改行は途中に空白がはいるだけでブラウザのには反映されません に終了タグはありません標準 ( 何も指定しないということ ) では 12 ポイントの黒い文字です HTML に挑戦! - 11-

12 文字の大きさ <fontsize=" "> 文字列 文字の大きさは1~7の数値で表します 1=8 ポイント 2=10 ポイント 3=12 ポイント 4=14 ポイント 5=18 ポイント 6=24 ポイント 7=36 ポイントディスプレイ表示を拡大して見ている人もいるのでこの数値の指定と実際の大きさは違っている場合もあります標準をもとに指定する方法もあります 1レベル大きな文字にする <fontsize="+1"> 文字列 2レベル小さな文字にする <fontsize="-2"> 文字列 文字の色 <fontcolor=" "> 文字列 文字の色は RGB 値を指定します太字 文字列 太字 (bold) になります斜体 文字列 斜体 (italic) になります青い太字で斜体のレベル 5 の文字列は <fontcolor="#0000ff"size="5"> はじめての HTML です 書体を指定することもできますが相手のパソコンに書体が入っていなければすべて標準 (P ゴシック体 ) になってしまいます特殊な書体を使いたいときは画像にして表示させる方法をとりましょう HTML に挑戦! - 12-

13 HTML に挑戦! - 13-

14 画像 ~ 写真やイラストを表示させる~ 画像を表示させるには表示させる画像をジェイペグ (.jpg) 形式やジフ (.gif) 形式で準備しておかなければなりません無駄に大きい画像はダウンロードに時間がかかるので使ってはいけません見かけ上のサイズを小さくするのではなくあらかじめファイル自体を小さくしておきましょう 800 ピクセル 600 ピクセルブラウザの画面いっぱいに広がります次頁参照 400 ピクセル 300 ピクセルサービスサイズの現像写真に近い大きさです 200 ピクセル 150 ピクセル 100 ピクセル 75 ピクセルサムネイル表示 ( 縮小表示 ) にむいています HTML に挑戦! - 14-

15 HTML に挑戦! - 15-

16 <imgsrc=" "> ファイル名は HTML ファイルと画像ファイルのある場所の位置関係をきちんと指定します HTML ファイルと画像ファイルが同じフォルダにある場合 <imgsrc="waterlilies.jpg"> HTML ファイルと同じフォルダに画像の入っているフォルダ image がある場合 <imgsrc="image/waterlilies.jpg"> 画像のサイズをあらかじめ指定しておくと表示が速くなります幅を width 高さを height で単位はピクセルを使います画像の説明文をつけておくとアップに失敗したときや画像を表示させない設定をしてあるブラウザに親切です日本語で書いて構いません <imgsrc="waterlilies.jpg"alt=" 蓮池の写真 "> HTML に挑戦! - 16-

17 レイアウト ~ 配置を変える ~ 文字や画像を好きなところにレイアウトしましょう中央揃え (center) <center> 文字列 </center> 文字列を中央に配置します <palign="center"> 段落 段落を中央に配置します <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-

18 HTML に挑戦! - 18-

19 リンク ~ 他のページやメールをつなぐ~ <ahref=".html"> 文字列 </a> 文字列をクリックすると指定されたリンク先が開きますリンクが張ってある文字列は標準では下線つき青色で表示されます文字列の代わりに画像にリンクを貼ることもできます縮小サイズの画像を見本に並べておいて大きな画像にリンクを貼るのは読者に親切です <ahref="mailto: アドレス "> 文字列 </a> 文字列をクリックするとメールソフトが起動して指定したアドレス宛にメールを出せるようになります文字列にはメールアドレスを書いたり受取者の名前を書いたりしておきましょう HTML に挑戦! - 19-

20 応用 ~もっと楽しむために~ ポチポチとメモ帳に書くのは面倒ですでも一度ひな形をつくっておくとそれを少し書き換えてページをつくることができますホームページ作成ソフトでつくったページでも HTML 編集モードにして書き換えたほうが簡単な場合もあります何よりホームページ作成ソフトよりも軽いページができるので表示にかかる時間を節約できますインターネットを見ていて面白いページがあったらどんな HTML を使っているのか拝見しましょう表示ソースでメモ帳が開きそのページの HTML がみられます HTML に挑戦! - 20-

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ 1. はじめの準備 (1) フォルダの作成ホームページ作成の基礎これから作るホームページのデータをホームページ用として保存 ( 保管 ) するフォルダを作成しますホームページで使う作成したファイル画像写真音楽などファイルはすべて同じフォルダに保存しますデスクトップやマイドキュメントの中 ( 任意 ) で右クリック新規作成 (N) フォルダ (F) で新しいフォルダができます (