ITコース HTML基礎 009_Hello HTML
HTML とは？
ネットワーク、より具体的には World Wide Web（ワールドワイドウェブ）は、多くのリンクされたドキュメントとリソースで構成されています。これらのドキュメントとリソースは HTML で書かれており、Web ページと呼ばれています。HTML は Web ページの基盤であり、Web ページの構造とコンテンツを定義します。
ブラウザに Web アドレス（例えば、www.zhaojian.net）を入力すると、ブラウザはその Web ページを提供するサーバーにリクエストを送信します。サーバーはこのリクエストに応答し、要求された Web ページ（つまり HTML）をブラウザに送り返します。その後、ブラウザはこの HTML を解析し、通常見る Web ページとして表示します。
HTML（HyperText Markup Language、ハイパーテキストマークアップ言語）は、Web ページの構造を作成・設計するためのマークアップ言語です。HTML は一連の要素（element）で構成されており、これらの要素を使用してコンテンツの異なる部分を囲み、特定の方法で表示または動作させることができます。タグのペアは、テキストや画像にハイパーリンクを追加したり、テキストを斜体、太字、段落、リストなどに設定したりできます。
[!まとめ]
- HTML はプログラミング言語ではなく、マークアップ言語です
- HTML ドキュメントには HTML タグとテキストコンテンツが含まれています（なぜ画像がないのか）
- HTML ドキュメントは Web ページとも呼ばれます
完全な HTML 要素（element）
例：
<p>hello HTML!</p>効果：
構造解析：
[!まとめ]
- 完全な HTML 要素は、開始タグ、コンテンツ、終了タグの3つの部分で構成されます；
- 開始タグ（Opening tag）：要素名（この例では p）を含み、左右の山括弧で囲まれています。開始タグは、要素が始まるか効果を発揮し始める場所を示します；
- コンテンツ（Content）：要素のコンテンツ；
- 終了タグ（Closing tag）：開始タグに似ていますが、要素名の前にスラッシュが含まれています。これは要素の終了を示します。終了タグを含めないことは初心者によくあるミスで、奇妙な結果を生む可能性があります。
完全な HTML ページ
例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>効果：
構造解析：
[!まとめ]
<!DOCTYPE html>— HTML ドキュメントタイプを宣言します。ドキュメントタイプは歴史的な遺物であり、ブラウザにドキュメントのバージョンとタイプを伝えるために使用されます。 HTML4 厳格モード DOCTYPE 宣言：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>—html要素、HTML ページ内のすべてのコンテンツ、ルート要素とも呼ばれます。<head></head>—head要素、その内容はユーザーには見えず、検索エンジン向けの検索キーワード、ページの説明、CSS スタイル、JavaScript ファイル、文字エンコーディング宣言などが含まれます。<meta charset="utf-8">—meta要素、HTML ドキュメントに関するメタデータを提供するために使用されます。charset 属性はドキュメントの文字セットを UTF-8 に設定します。<title></title>—title要素。この要素はページのタイトルを設定し、ブラウザのタブに表示され、ページをブックマークする際の説明テキストとしても使用されます。<body></body>—body要素。この要素には、ユーザーがページを訪問したときに見せたいコンテンツが含まれます。テキスト、画像、ビデオ、ゲーム、再生可能なオーディオトラック、その他のコンテンツが含まれます。<p></p>— 段落要素、テキストの段落を表します。
要素名 | 機能 | 例 |
|---|---|---|
<!DOCTYPE html> | HTML ドキュメントのタイプとバージョンを定義 | <!DOCTYPE html> |
<html> | HTML ドキュメントのルート要素を定義 | <html lang="en"> |
<head> | ドキュメントのメタ情報（タイトル、文字セット宣言、スタイルとスクリプトのリンクなど）を含む | <head>...</head> |
<title> | ドキュメントのタイトルを定義し、ブラウザのタイトルバーまたはタブに表示 | <title>My Web Page</title> |
<meta> | ドキュメントに関するメタ情報（文字セット、ビューポート設定、キーワードなど）を提供 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | 外部リソース（スタイルシートやアイコンなど）を参照 | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | ドキュメントのスタイルを内部で定義 | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | スクリプトを定義または参照、ドキュメントに含めるか外部スクリプトを参照 | <script src="script.js"></script> |
<noscript> | ブラウザがスクリプトをサポートしていない場合に表示するコンテンツを定義 | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | ページ内のすべての相対リンクのベース URL を指定 | <base href="https://www.zhaojian.net/"> |
リンク：
VS Code 拡張機能： Remote - SSH Remote Development