1.テキストエディタ (メモ帳、TeraPadなど) でHTMLファイルを作成する

【メモ帳の起動】 → [スタート]-[プログラム]-[テキストエディタ]-[TeraPad] をクリック。

【入力サンプル】

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>ホームページの練習</title>
</head>

<body>
Welcome to My Homepage
</body>

</html>



2.HTMLファイルを保存する

テキストエディタの[ファイル]-[名前を付けて保存]

【保存する場所】    → 保存したいフォルダを選ぶ
【保存するファイル名】 → たとえば myweb.html
【文字コード】 → UTF-8

注1.ファイル名は半角英数字とし、そのあとにピリオド(.)と拡張子(html)を付ける。
注2.トップページに付ける名前は index.html のようにするとよい。

3.ブラウザの表示とHTMLの更新

【ホームページの表示】

保存したフォルダを開き、「myweb.html」をダブルクリックする。 

【ホームページの更新手順】

(1)テキストエディタを開き、HTMLを修正する
(2)「上書き保存」する
(3)ブラウザの「更新」ボタンをクリックする


4.タグの基礎知識

(1)HTMLの基本構成

<!DOCTYPE html>
<html>

→ HTML5の文書型宣言
   HTMLの開始
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>

→ ヘッダ部
   文字コードやタイトルの指定
<body>

・・・ 本文 ・・・

</body>

→ ボディ部
   ホームページの本文
</html> → HTMLファイルの終了

(2)タグの基本ルール

<html>、<head>、<body>などをタグと呼ぶ。

a.必ず半角で書く。ただし大文字と小文字の区別はない。

<HTML> と <html> はどちらでもOK。

b.開始タグと終了タグ

スラッシュ(/)付きのタグを終了タグという。開始タグから終了タグまでが1つのまとまり。
<head> ~ </head> など。

c.複数のタグの包含関係

タグの中に別のタグを書くときは、完全に内側に含めるように書く。

○ <b> ・・・ <i> ~ </i> ・・・ </b>
× <b> ・・・ <i> ~ </b> ・・・ </i>

d.単独タグ

一部のタグには終了タグがないため、タグを単独で用いる。

改行タグ <br>
水平線  <hr>
画像タグ <img> など

e.改行の意味

テキストエディタの中で改行しても、ブラウザ画面では改行されない。

HTMLの指定
ブラウザの画面表示

文字を<i>一部だけ斜体に</i>します

文字を
<i>一部だけ斜体に</i>
します


文字を一部だけ斜体にします


文字を 一部だけ斜体に します

(少しだけ隙間が空いたようになる)


ホームページ上の文字を改行したい場合は、<br>タグを入れる。

HTMLの指定
ブラウザの画面表示

文字を<i>一部だけ<br>斜体に</i>します

文字を<br>
<i>一部だけ<br>斜体に</i>
します


文字を一部だけ
斜体に
します

文字を
一部だけ
斜体に
します