#概要
HTMLの基本の書き方です。すごく初心者向けです。
タグの使い方、基本的な構造を記述しています。
#HTMLの基本の構造
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落１</p>
</body>
</html>
-
< !doctype html >
ドクタイプ宣言といい、そのページがHTMLで、その使用に合わせて作られているのかを示す。 -
< HTML > ~ < /HTML >
Doctype宣言のすぐ後に記述する。これはHTMLの文章だということを表している。 -
< head > ~ < /head >
ページのタイトルや使用する外部ファイルのリンク(cssやリセットcssなど)、ページの情報を表している。※実際にページには表示されない。 -
< meta charset="UTF-8" >
文字のコードを表している。これを正しく記述することによって文字化けを防ぐことができるので、必ず記載する。 -
< body > ~ < /body >
HTMLの本体部分。この部分に記述したコードが実際にWebページに表示される。 -
< title > ~ < /title >
Webページのタイトルとして表示される部分。
ここまでをテキストエディタに記述してファイルを保存し、開くと真っ白なページが出来上がっています。
#HTMLの基本の記述方法
上記で説明し、作成したページに文字や画像を表示する方法をこちらで詳しく解説します。
実際にWebページに反映されるのは< body >の中なので、< body > ~ < /body >の間に記述します。
- タグ
HTMLでは基本的にこのタグ<>で文字列を囲んで記述する。
開始タグ<>と終了タグ>で囲う、そのひとつのかたまりを要素と呼ぶ。
※タグには全角文字を使うことはできませんので注意してください。
<body>
<h1>見出しをここにインプット</h1>
<p>ここに文章をインプット</p>
</body>
-
< h1 >
ページの見出しを表すタグ。hはHeadingを表しており、< h1 > ~ < h6 >まである。
h1が一番大きな見出し、h6が一番小さな見出しとなる。h1から順番に使う決まりがある。 -
< p >
文章の段落を表すタグ。pはParagraphを表している。< p >タグを使うと囲まれた文章がひとつの段落として表示される。 -
< img >
画像を表示するタグ。通常のように終了タブがない。文字列を囲まずに使う。
例： < img src="image.jpg" alt="画像">
src属性は画像の場所を示す。alt属性は画像が何らかの原因で表示されない場合に代わりに表示される文字列を表す。
その他にも様々なタグがありますが、基本的な記述方法がわかると他のタグも使いやすくなると思います。