今回使うもの
テキストエディタ
*テキストエディタとは Webサイト制作〜開発環境準備編〜で紹介している「mi」「サクラエディタ」「Notepad++」のようなもののことです
HTMLファイルを作成する
- テキストエディタを起動します(アイコンをダブルクリック)
- ファイル→新規作成→HTML で新しいファイルを作成します
- 以下グレー部分をコピペして「test.html」として保存します(デスクトップなどわかりやすい場所へ保存)
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
こんにちは
</body>
</html>
作成したHTMLファイルを「chrome」で開く
作成した「test.html」を開きます
・Macの場合 右クリック→このアプリケーションで開く
・Windowsの場合 右クリック→プログラムから開く
から「chrome」を選択します
*chrome(クローム)はGoogleが提供しているWebブラウザ(Webページを見るための閲覧ソフトウェア)です
「chrome」で開いた結果を確認する
こんにちは
とだけ表示されていればOKです。
HTMLの解読
<!doctype html> <html lang="ja">
このファイルはhtmlで、
内容は日本語で書かれてますよ の意味
<head>
ここからヘッダですよ の意味
*ヘッダは「このファイルを読み解くにあたっての前提条件」が書かれる場所です
<meta charset="UTF-8">
文字コードは「UTF-8」ですよ の意味
*コンピューターに対して「どのようなルールで文字を読めばいいか」を指定しています
「UTF-8」のほか「Shift_JIS」などがあります
*ここを間違えると文字化けの原因になります
</head>
ヘッダーはここまでですよ の意味
<body>
ここから本文ですよ の意味
</body>
本文はここまで の意味
</html>
htmlはここまで の意味
文字化けしてしまったら
もし、「test.html」の表示がおかしくなってしまっている場合
ファイル内で指定した文字コードと、htmlを保存したときの文字コードが一致していない可能性があります。
その場合は、文字コード(テキストエンコーディング)を「UTF-8」に指定して保存し直します。