最初のHTMLページ
すべてのHTMLドキュメントは同じ小さな骨組みを共有しています。ドキュメントタイプを宣言する行、すべてをラップするルート要素、ページに関する情報のための head、人々が見るコンテンツのための body です。この章ではその骨組みを1行ずつ分解し、ブラウザで開けるファイルに保存します。
ドキュメント骨組み
すべてのページが始まる骨組みはこれです。正確にコピーして、body 内の部分を変更できます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>最初の行の <!DOCTYPE html> は、これが最新のHTMLページであることをブラウザに伝えます。その後に ルート要素 である <html> が続き、ページ上のすべてを包みます。その中には2つのボックスがあります。<head> は舞台裏の情報用で、<body> は訪問者が見る言葉と画像用です。見出しと段落は body に入ります。body がショーの部分だからです。
全体をラベル付きの小包だと考えてください。doctype は使う郵便制度を示す切手で、<html> が箱、head が外側のラベル、body が中に詰まっているものです。
<!DOCTYPE html>、次に <head> と <body> をラップする <html>。ボディに独自の言葉を入れてそのままコピーします。まだこれを暗記する必要はありません。何度も入力すれば自動的に身につきます。 head と body に何が入るか
<html> 内の2つのボックスには異なる役割があります。<head> はブラウザが知る必要があるがページで訪問者が読まないことを保持しています。<body> は訪問者が見るすべてを保持しています。
<head>
<title>My recipe notes</title>
</head>
<body>
<h1>Banana bread</h1>
<p>Mix, pour, bake for an hour.</p>
</body><title> は head に座り、ページの名前です。ブラウザタブに表示されますが、ページの真ん中には表示されません。見出しと段落は body に座るので、ページ自体に表示されます。始めるシンプルなルール。訪問者が読むべきものなら、body に入ります。
<title> は head に生活してブラウザタブに名前を付けます。見出しと段落は人々が読む body に生活しています。訪問者がそれを見るべきなら、body に入ります。その1つの質問がほぼすべてを分類します。 文字セットとビューポート
ほぼすべてのページの head に2つ以上の行が入ります。そのままコピーできます。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first page</title>
</head>最初の行は、テキストの読み方をブラウザに伝えます。アクセント付き文字、カーリークォート、絵文字が奇妙なシンボルに変わる代わりに正しく出ます。2番目の行は、ページをスクリーン幅に合わせるようブラウザに伝えます。これにより、デスクトップページの小さなズームアウト版ではなく、電話で見栄えが良くなります。まだすべての単語を理解する必要はありません。head の上部近くに両方を置き、ページが動作します。
.htmlファイルの保存と開き方
HTMLページはプレーンテキストファイルなので、任意のテキストエディタで作成できます。重要なことは名前です。.html で終了するように保存します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is my first web page.</p>
</body>
</html>それを index.html として保存してください。次にコンピュータのファイルを見つけてダブルクリックしてください。ブラウザで開き、見出しと段落を表示します。サーバーを起動するものも、インストールするものもありません。.html の終わりは、ドットやコードの壁ではなく、Webページとして開くようにコンピュータに信号を送ります。言葉を変更して保存し、ブラウザタブを更新して更新を確認してください。
<code>.html</code> で名前が終わるテキストファイルです。<code>index.html</code> として保存し、ダブルクリックすれば、セットアップがまったくなく、ブラウザがすぐに開きます。変更を確認するには、ファイルを保存してタブを更新します。その保存と更新のループがページ構築のリズム全体です。