HTML ドキュメント構造
ユーザーがインターネットを通じてウェブを閲覧するとき、彼らは文章、リンク、チャート、画像など、さまざまな形式のコンテンツに出会います。
あなたはこれまで、ブラウザがこのページコンテンツをどのように表示するか疑問に思ったことがありますか? ページのソースコードを表示するには、F12 を押すことができます。以下の図に示すようになります。
上の図から、すべての文字コンテンツが角括弧 <
と >
の中に囲まれていることがわかります。このようなコンテンツは タグ と呼ばれ、<>
は開始タグを表し、</>
は終了タグを表します。
HTML は、要素で構成される言語であり、要素はタグで表されます。
HTML(H yperText M arkup L anguage)は、ウェブページとそのコンテンツの構造を定義するために使用されるコードです。
ハイパー:「ハイパー」は「線形」と対照的です。以前のコンピュータプログラムは主に線形で、上から下に順番に実行する必要がありました。一方、HTML で作成されたウェブページは、ハイパーリンクを通じてページ間を移動できます。
テキスト:C、C++、Java などのコンパイル型のプログラミング言語とは異なり、HTML はテキストベースのスクリプト言語です。そのソースコードは、コンパイルする必要なく、ブラウザで直接解釈されて実行されます。
マークアップ:HTML の基本原理は、マークアップ(角括弧で構成されるタグ)を使用して、ウェブページのコンテンツがブラウザでどのように表示されるかを記述することです。
言語:HTML は言語ですが、解釈型でコンパイル型ではありません。そのすべてのマークアップタグは、ブラウザによって最終的な表示結果に変換されます。
このステップでは、まずウェブページの基本構造を設定します。コマンド touch ~/project/index.html
を使用して、ディレクトリ /home/labex/project
に新しい HTML ファイル index.html
を作成します。好きなテキストエディタでこのファイルを開き、基本的な HTML ドキュメント構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!-- 次のステップでここにコンテンツを追加します -->
</body>
</html>
<!DOCTYPE html>
宣言は、ブラウザに期待されるドキュメントの種類を伝えます。
<html lang="en">
要素は、HTML ドキュメントのルート要素です。
<head>
要素には、タイトルや文字セットなどのメタデータ(ドキュメントに関するデータ)が含まれています。
<title>
要素は、ウェブページのタイトルを指定します。
<meta charset="UTF-8">
要素は、ウェブページの文字エンコーディングを指定します。
<body>
要素には、ウェブページの表示可能なコンテンツが含まれています。
環境の右下隅にある Go Live をクリックしてポート 8080 を開き、環境の左上隅にある Web 8080 をクリックしてページ結果を表示します。
注:現在のページには効果がありません。body は現在空であるため、より多くのタグを学ぶときにページの効果を確認できます。