HTMLの基礎
前回の記事に書いたように、サーバに上げるHPを作る為、HTMLの基礎を学習しました。今までなんとなくでやってきてしまっていたので、基礎の基礎からまとめようと思います。
*基本的なタグ
・<html>
HTML文書の要素はすべて、HTMLの開始を示す<html>と、終了を示す</html>の間に挟む。
・<head>
ヘッダ情報エリア。タイトルや概要など、ページについての補足情報を記述する。また、CSSの読み込みなどもここに記述する。
・<body>
本文エリア。文章や画像などを記述する。
・<title>
ブラウザのタイトルバー(タブ)に表示される部分。お気に入りに登録する際などは、ここの名前がそのまま記録されるので、わかりやすく記述する必要がある。
*お約束について
・<DOCTYPE html>
HTMLのバージョンによって記述方法が異なり、上記はHTML5のものになる。これを記述することで、そのファイルがどのバージョンなのかをブラウザが判断する。
・<meta charset="●●●">
・<meta name="author" content="●●●”>
ページの作者。
・<meta name-"descriprion" content="●●●">
ページの概要文。
・<meta name="keywords" content="●●●,●●●">
ページに関するキーワード。複数入力する場合、半角カンマ「,」で繋ぐ。
これらを並べると、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
という形になる。!DOCTYPEに関しては、大文字でも小文字でも構わない。
*見出しタグ
<h1>～<h6>
上記のように1～6のレベルがあり、数字が小さい程大見出し、大きいほど小見出し、ということになる。また、通常<h1>は1回、<h2～6>は何度でも使ってよい。記述方法としては、他のタグ同様<h1></h1>で囲む形になる。
*段落タグ
・<p>
<p>から</p>で囲まれた部分は、段落を表す。
*改行タグ
・<br>
<br>は今まで書いたタグとは違い、囲まなくても単体で機能する。
*箇条書きのタグ
・<li>
箇条書きにしたい項目を、ひとつひとつ<li>で囲む。
・<ul>
その上で、すべての項目を<ul>で囲むことによって、箇条書きと認識される。
*画像の埋め込みタグ
・<img src="●●●">
埋め込みたい画像がHTMLファイルと同じ階層にある場合、このように記述する。
・<img src="../●●●">
画像がHTMLファイルより1つ上の階層にある場合、「../」をファイル名の前に記述する。また、2つ上の場合は「../../」と追加していく。
・<img src="フォルダ名/●●●">
画像がHTMLファイルと同じ階層のフォルダ内の場合、ファイル名の前に「フォルダ名/」を記述する。
・<img src="../フォルダ名/●●●">
画像がHTMLファイルより1つ上の階層にあるフォルダ内の場合、「../」と「フォルダ名」を組み合わせ、このように記述する。また、2つ上の場合は「../../」と追加していく。
・<img src="●●●" alt="●●●">
閲覧環境的に画像が表示されない場合、このaltの後ろに入力された文字が表示される。
