｢HTML｣に挑戦！ - BIGLOBEkazama-c/l/text/html.pdfHTML（Hyper Text Markup...

はじめてのホームページ

「HTML」に挑戦！－ 1 －

｢HTML｣に挑戦！

HTML（Hyper Text Markup Language)はインターネット上でホームページや動くメールなど

を表示させるための言葉です。

もともと WWWは、世界中の研究者が最新の研究成果を共有するため、1989年に開発された

仕組みです。ホームページを見るためのソフト（ブラウザ）、また、そのソフトを動かすた

めの基本ソフトOS（Operating System）、プロバイダが使っているサーバーコンピュータな

ど、違った環境で開いても同様に表示されるように工夫された共通語がHTMLです。

アルファベットと記号を組み合わせて書くものなので、テキストエディタ（メモ

帳、Simple Textなど）を使って書きましょう。

どのように表示されるかはブラウザソフト（ Internet Explorerなど）で確かめま

しょう。

HTML文書をつくるためのソフトも発売されています。専用ソフトを使えば、ワープロソフ

ト（Wordなど）と同じような感覚でHTML文書がつくれます。

また、 Wordや Excelで「Webページ」として保存するとHTML文書ができあがり

ます。

でも、基本になるHTMLを理解していると、もっとシンプルに、自由に、オリジナルのペー

ジをつくることができます。

はじめは難しく感じますが、すこしずつ、根気よく、自分のページをつくってみましょう。

目次

準備～テキストエディタに直接入力～········· 2

タグ～命令の開始と終了を宣言～············· 4

タイトル～ページの題名～··················· 5

背景～ページ全体につける～················· 6

色～2桁の16進数であらわす～ ·············· 8

文字～文字列・文章を表示させる～··········· 11

画像～写真やイラストを表示させる～········· 14

レイアウト～配置を変える～················· 17

リンク～他のページやメールをつなぐ～······· 19

応用～もっと楽しむために～················· 20



準備～テキストエディタに直接入力～

ウィンドウズパソコンには標準で「メモ帳」がはいっています。

HTMLを書くには「メモ帳」を使いましょう。

スタート→（すべての）プログラム→アクセサリ→メモ帳

HTMLはアルファベットと記号の組み合わせで書かれています。

必ず直接入力で書きましょう。全角アルファベットでは動いてくれません。

例外もありますが、すべて小文字で構いません。

表示させる文字列は日本語の場合もありますから、「半角/全角キー」を使って切り替えな

がら入力しましょう。

⇔

メモ帳でHTMLを書いたら、名前をつけて保存します。

HTML文書やそこに表示させる画像などは、「新しいフォルダ」をつくってすべてその中に保

存するようにしましょう。フォルダの名前は、「homepage」、「HP」などとし、「デスクトッ

プ」や「マイドキュメント」などわかりやすいところに置きましょう。

×ｈｔｍｌ

○html

○HTML



ファイル→名前をつけて保存

開いたダイヤログボックスで保存先にフォルダを指定します。

ファイルの種類を「すべてのファイル」にします。

ファイルの名前を直接入力して、名前の後に「.htm」または「.html」という拡張子をつけ

ましょう。

フォルダの中に「e」のマークのHTMLファイルができます。

HTMLファイルはダブルクリックすると「エクスプローラー」が起動します。表示の

仕方を確認しましょう。

編集したいときには、アイコンの上で右クリックして、開いたメニューの中の「プログラ

ムから開く」または「アプリケーションの選択」から、「NotePad（メモ帳）」を選

びます。

HTML文書は、「メモ帳」と「Internet Explorer」（ブラウザソフト）の両方で同時に開いて

編集します。

メモ帳でHTMLの一部を書き換えたら、ファイル→上書き保存して、

次にエクスプローラーで、表示→最新の情報に更新をして変更した部分の表示を確かめ

ます。

１つのファイルを同時に２つのアプリケーションで開いています。

⇔



タグ～命令の開始と終了を宣言～

HTMLは「<」と「>」で囲まれた「タグ」を使って命令を書きます。

いろいろな種類のタグがあって、また、新しいタグもつくられています。

そこから命令をはじめることを宣言する「開始タグ」とそこで命令を終了する「終了タグ」

があります。

開始タグを書いたら必ずそれと同じ命令の「/」ではじまる終了タグを組み合わせて書きま

す。

ただし、改行 や水平線<hr>など終了タグが必要ないものもあります。

大文字でも小文字でも構いませんが、開始タグを大文字にしたら、終了タグも大文字にし

ます。

<html>·······HTML文書であることを宣言するタグ

<head>·······ファイルの情報に関することを書いてある部分（ヘッダー）であること

を宣言するタグ

<body>·······実際に表示される文字や画像などが書いてある部分であることを宣言す

るタグ

もちろんそれぞれに終了タグがあって、そこで終了することを宣言します。

メモ帳に直接入力でタグを書いて、「test.html」と名前をつけて保存してみましょう。

同時に、その「test.html」をエクスプローラーで開いてみましょう。まだ何も表示されま

せんが･･･。

⇒



タイトル～ページの題名～

HTMLの「題名」をブラウザのタイトル部分に表示させましょう。

<head> </head>の間に書きます。

⇒

お気に入りに追加される際には、この名前が登録されます。

検索エンジンで紹介されるのもこの名前です。

ページの内容にふさわしい、一度でわかる名前をつけましょう。



背景～ページ全体につける～

背景色や背景画像をページにつけましょう。

表示されるページ全体に反映するので、ふさわしいものを選びましょう。

また、文章が見にくくならないよう、邪魔にならないものを選びましょう。

背景色bgcolor

<body>開始タグに半角空白をいれ、続けて指定します。

色は2桁の16進数でR（赤）G（緑）B（青）をあらわします。

<body bgcolor="CCFFFF"> </body>

ページ全体が指定した色で塗りつぶされます。

"CCFFFF"

⇒

あまり濃い色を選ぶと目が疲れます。文字の色との関係を含め、ブラウザで確かめながら

選びましょう。



背景画像background

<body>開始タグに半角空白をいれ、続けて指定します。

背景にする画像は、あらかじめ名前をつけて保存しておきましょう。

<body background="haikei.gif"> </body>

画像が繰り返してページ全体に表示されます。

" haikei.gif"

⇒

背景用の画像は色合いの薄い、文字の邪魔にならないものを選びましょう。

画像を指定するときには、画像の保存してあるフォルダと、HTMLの保存場所の関係をきち

んと指定しましょう。



色～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色の中の色を使うといいでしょう。



#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



#660000 #663300 #666600 #669900 #66CC00 #66FF00

#660033 #663333 #666633 #669933 #66CC33 #66FF33

#660066 #663366 #666666 #669966 #66CC66 #66FF66

#660099 #663399 #666699 #669999 #66CC99 #66FF99





#990000 #993300 #996600 #999900 #99CC00 #99FF00

#990033 #993333 #996633 #999933 #99CC33 #99FF33

#990066 #993366 #996666 #999966 #99CC66 #99FF66

#990099 #993399 #996699 #999999 #99CC99 #99FF99



#CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00




#CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC

#CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF

#FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00




#FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC

#FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF



文字～文字列・文章を表示させる～

本文になる文字列は<body> </body>の間に書きます。

 の間がひとつの段落（paragraph）になります。

段落の途中で改行(break)するときには を使います。

テキストでする改行は途中に空白がはいるだけでブラウザのには反映されません。

 に終了タグはありません。

↓

標準（何も指定しないということ）では、12ポイントの黒い文字です。



文字の大きさ

文字列

文字の大きさは１～７の数値で表します。

1＝8ポイント、2＝10ポイント、3＝12ポイント、4＝14ポイント、5＝18ポイント、6＝24

ポイント、7＝36ポイント

ディスプレイ表示を「拡大」して見ている人もいるので、この数値の指定と実際の大きさ

は違っている場合もあります。

標準をもとに指定する方法もあります。

1レベル大きな文字にする

文字列

2レベル小さな文字にする

文字列

文字の色

文字列

文字の色はRGB値を指定します。

太字

文字列

太字(ｂold)になります。

斜体

文字列

斜体(italic)になります。

青い太字で斜体のレベル５の文字列は、

はじめてのHTMLです。

書体を指定することもできますが、相手のパソコンに書体が入っていなければすべて標準

（Pゴシック体）になってしまいます。特殊な書体を使いたいときは、画像にして表示させ

る方法をとりましょう。



↓



画像～写真やイラストを表示させる～

画像を表示させるには、表示させる画像をジェイペグ(.jpg)形式やジフ(.gif)形式で準備

しておかなければなりません。

無駄に大きい画像は、ダウンロードに時間がかかるので使ってはいけません。見かけ上の

サイズを小さくするのではなく、あらかじめファイル自体を小さくしておきましょう。

800ピクセル×600ピクセル・・・ブラウザの画面いっぱいに広がります。次頁参照

400ピクセル×300ピクセル・・・サービスサイズの現像写真に近い大きさです。

200ピクセル×150ピクセル

100ピクセル×75ピクセル・・・サムネイル

表示（縮小表示）にむいています。





<img src="○○">

ファイル名は、HTMLファイルと画像ファイルのある場所の位置関係をきちんと指定します。

HTMLファイルと画像ファイルが同じフォルダにある場合、

<img src="Water lilies.jpg">

HTMLファイルと同じフォルダに画像の入っているフォルダ「image」がある場合

<img src="image/Water lilies.jpg">

画像のサイズをあらかじめ指定しておくと表示が速くなります。

幅をwidth、高さをheightで単位はピクセルを使います。

画像の説明文をつけておくとアップに失敗したときや画像を表示させない設定をしてある

ブラウザに親切です。日本語で書いて構いません。

<img src="Water lilies.jpg" alt="蓮池の写真">

↓



レイアウト～配置を変える～

文字や画像を好きなところにレイアウトしましょう。

中央揃え（center）

<center>文字列</center> 文字列を中央に配置します。

段落 段落を中央に配置します。

<div align="center">文字列</div> 複数の文字列や段落をまとめて中央に配置します。

<img src="Water lilies.jpg" align="center"> 画像を中央に配置します。

右揃え（right）、左揃え(left)も同様にします。

画像の文章に対する表示位置を指定しましょう。

<img src="gazo.jpg" align="top">文字列

画像の上端が文字の上端にあわせて表示されます。

<img src="gazo.jpg" align="middle">文字列

画像の中央が文字の下端にあわせて表示されます。

<img src="gazo.jpg" align="bottom">文字列

画像の下端が文字の下端にあわせて表示されます。

↓





リンク～他のページやメールをつなぐ～

<a href="○○.HTML">文字列</a>

文字列をクリックすると指定されたリンク先が開きます。

リンクが張ってある文字列は標準では下線つき青色で表示されます。

文字列の代わりに画像にリンクを貼ることもできます。

縮小サイズの画像を見本に並べておいて、大きな画像にリンクを貼るのは読者に親切です。

<a href="mailto:アドレス"> 文字列</a>

文字列をクリックするとメールソフトが起動して、指定したアドレス宛にメールを出せる

ようになります。

文字列には、メールアドレスを書いたり、受取者の名前を書いたりしておきましょう。

↓



応用～もっと楽しむために～

ポチポチとメモ帳に書くのは面倒です。でも、一度ひな形をつくっておくとそれを少し書

き換えてページをつくることができます。

ホームページ作成ソフトでつくったページでも「HTML編集モード」にして書き換えたほう

が簡単な場合もあります。

何より、ホームページ作成ソフトよりも軽いページができるので、表示にかかる時間を節

約できます。

インターネットを見ていて、面白いページがあったら、どんなHTMLを使っているのか拝見

しましょう。

表示→ソースでメモ帳が開き、そのページのHTMLがみられます。

⇒

Date post:	03-Jun-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

｢HTML｣に挑戦！ - BIGLOBEkazama-c/l/text/html.pdfHTML（Hyper Text Markup...

Documents