0から始めるWebサイト制作

Webサイト制作〜HTML初心者編〜

更新日:

今回使うもの

テキストエディタ

*テキストエディタとは  Webサイト制作〜開発環境準備編〜で紹介している「mi」「サクラエディタ」「Notepad++」のようなもののことです

HTMLファイルを作成する

  1. テキストエディタを起動します(アイコンをダブルクリック)
  2. ファイル→新規作成→HTML で新しいファイルを作成します
  3. 以下グレー部分をコピペして「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」に指定して保存し直します。







-0から始めるWebサイト制作
-

Copyright© めもろぐノート , 2024 All Rights Reserved Powered by STINGER.