参考：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters
■基本構造
《準備》
- 任意の場所に作成した空フォルダをVisual studio codeで開く。
- 新規で「.html」ファイルを作成する。
《基本構造》
DOCTYPE宣言⇒head⇒body
<!DOCTYPE html>
<html>
<head>
<title>天気予報</title>
<meta name="descriprion" content="毎日の気象情報をお知らせします">
<meta charset="utf-8">
</head>
<body>
<header>
<h1>天気予報</h1>
</header>
<main>
<h2>今日の天気</h2>
<p>よく晴れるでしょう</p>
</main>
<footer>
<p>Copyright IITENKI inc. Copyright all right reserved.</p>
</footer>
</body>
</html>
<head>～</head>
ブラウザには表示されない各種設定。webサイトのタイトルや説明文など。
- title ページのタイトル
- meta name ="descriprion" 検索時に表示される説明文
- meta charset= "文字コード" 文字コードの設定
<body>～</body>
ブラウザに表示させる各種コンテンツ
- header タイトルやロゴ
- main メインのコンテンツ
- footer コピーライトや連絡先などの基本情報
■よく使うタグ
| <!--コメント--> | コメントアウト |
| <p> | 段落 |
| <h1>～<h6> | 見出し |
| <ul>,<ol> | 箇条書き※<li>と組み合わせて使う |
| <hr> | 水平線 |
| <br> | 改行 |
| <div> | グループ化 |
| <table> | 表 |
| ※<tr>,<th>,<td> | 表の行、見出し、セル |
■パス
絶対パス
webサーバー上のどのフォルダにファイルが置かれているかをURLで指定する。
<img src="https://www.～">
※画像はimgタグで表示する
相対パス
現在開いているHTMLファイルを基準にフォルダを指定する。
<img src="../～">
※../は１つ上の階層のフォルダに移動することを示す。
多くの場合は相対パスを使うが、外部のwebサイトの画像やリンク先を指定する場合は、絶対パスを使用する。
imgタグ(画像)
画像を表示するタグ。src属性で表示したい画像ファイルのパスを設定する。
aタグ(ハイパーリンク)
リンク機能をつけるタグ。href属性でパスを指定する。
<a href="パス">
<img src="パス">
</a>
※画像クリックで別ページに飛ぶように指定する例
◎簡易メモ
- 必ず冒頭でDOCTYPE宣言し、ブラウザにHTMLファイルであることを認識させる。
- 各種設定や表示させたい内容はすべてタグの中に記述する。