HTML はウェブページのバックボーンです。このユニットでは、ウェブページの堅牢で意味のある構造を構築する方法について説明します。
重要ポイント
- 生徒は HTML ファイルの構造を理解します。
- 生徒は一般的なタグを使用してウェブページを作成する方法を理解している。
HTML とは
HTML は HyperText Markup Language の略です。これは、次の目的で使用するコードです。
- ワールド ワイド ウェブに保存され、ブラウザに表示されるドキュメントを作成します。
- ウェブページの基本的な構造（ウェブページの骨格）を提供します。
- ブラウザで表示するテキストと画像を適切に読み込む。
HTML を使用するケース
ワールド ワイド ウェブで表示されるすべてのウェブページは、HTML コードを使用して記述されています。ボタン、画像、フォーム、テキストのセクションはすべて、HTML で作成された要素です。
ウェブページを人体にたとえると、HTML は骨格です。CSS を使用して、骨格構造が整った後に、体型や服装を追加できます。
HTML In Action
HTML の中心となるのは要素です。要素はタグで作成されます。
ほとんどの要素には、開始タグと終了タグがあります。
<!-- opening tag -->
<p>
<!-- closing tag -->
</p>ウェブページに表示したいコンテンツ（テキストやその他の HTML 要素など）は、これらのタグの間に配置できます。サンドイッチの層を重ねるようなイメージです。
<p>The content that you write here will be seen on the web page</p>
<section>
<p>This text is inside a paragraph within a section.</p>
</section>HTML コンテンツの中には、追加の閉じタグを必要としない自己終了タグで作成されるものがあります。
<img />
<link />この要素の役割はドキュメント内の場所を保持することなので、このタグ 1 つで十分です。他のほとんどの HTML 要素とは異なり、これらの自己終了要素内に他の要素や情報をネストすることはできません。
HTML 要素の構成要素
HTML の例
このコードはブラウザに表示され、下の画像のようになります。
このコード...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML Example</title>
</head>
<body>
<h1>My Day In The Garden</h1>
<section>
<h2>Flora</h2>
<p>I spent the morning drawing some of the daffodils that
are inbloom.</p>
<p>I picked a few tulips to put in a vase in the dining
room.</p>
</section>
<section>
<h2>Fauna</h2>
<p>Today I spotted that hummingbird again, buzzing around
the newly blooming tree.</p>
<img
src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
alt="hummingbird"/>
</section>
</body>... Makes This Web Page
HTML リファレンス
フレーム処理
コンテキストと目的
HTML は Hyper Text Markup Language の略です。テキストに構造的な意味を与える方法です。これにより、コンピュータやプログラマーは、テキストのチャンクの目的を簡単に判断できます。
HTML はウェブページの骨格のようなものです。構造とコンテンツを提供し、JavaScript と CSS はインタラクティブ性とスタイルを提供します。
学習目標
生徒は次のことができるようになります
- HTML ファイルを作成し、エディタとブラウザで開く
- 適切な構造の HTML ファイルを設定する
- 一般的なタグを一覧表示して使用し、ウェブサイトに構造とコンテンツを追加する
スタートガイド
セクションの構成と目的
- HTML は、拡張子が
.htmlのファイル内に記述されます。 - HTML ファイルには任意の名前を付けることができますが、デベロッパーがサーバーを別の方法で構成する理由がない限り、ランディング ページには
index.htmlという名前が最も一般的に使用されます。
# creating an html file on the command line
touch index.html# opening your html file in your browser
open index.htmlミニチャレンジ
- 任意の名前で 3 つの HTML ファイルを追加で作成します。
- テキスト エディタとブラウザでいずれかのファイルを開きます。
HTML ページの構造
セクションの構成と目的
HTML ドキュメントは常に同じ構造で始まる必要があります。
DOCTYPEタグは特殊で、閉じられません。また、英数字以外の値（文字/数字）を含めることができる唯一のタグでもあります。<head>にはウェブサイトに関する情報が含まれますが、ページに表示される実際のコンテンツは含まれません。<body>には、実際に画面に表示されるページのすべてのコンテンツが含まれます。- ページの構造を作成するために使用するタグは、
<body>タグの間に配置する必要があります。 - 開始タグと終了タグの間に、要素のテキストまたは「コンテンツ」を挿入します。最終的な結果は次のようになります。
<example-tag>Content Goes in here</example-tag>タグは他のタグ内に配置することもできます。 - タグを別のタグの中に配置する場合は、新しいタグをインデントして、親タグの子であることを示す必要があります。
語彙
- 要素 - HTML コードで作成されたアイテム（画像、段落、見出しなど）。
- タグ - 特定の要素の開始位置と終了位置を示すコードの一部。
- child - 他の要素の内部に含まれる要素。
- parent - 他の要素を含む要素。
HTML の例
注: 以下は参考用の例です。すぐにすべてを理解する必要はありませんが、適切にフォーマットされた HTML がどのようなものかを確認しておくとよいでしょう。
<!-- Standard tag setup of an HTML document -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my
interests.</p>
</section>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body><!-- Nested elements -->
<section>
<p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->ミニチャレンジ
- 作成したファイルのいずれかを開き、基本的な HTML タグ構造を追加します。
- 家系図（または他の人の家系図）を表示するように HTML の本文を設定します。
sectionタグを使用してファミリー グループを保持します。pタグを使用してファミリー メンバーを保持します。家族は複雑ですが、たとえば次のような場合があります。
<section>Jetson Family
<div>George and Jane
<p>Judy</p>
<p>Elroy</p>
</div>
<p>Rosie the robot</p>
<p>Astro the dog</p>
</section>
<!-- In this example, Judy and Elroy are the children of Jane and George. -->共通のタグ
セクションの構成と目的
一般的に、独自の要素タイプは作成しません。代わりに、機能がすでに関連付けられている一連の事前定義された要素があります。
コードブロックの例については、HTML リファレンスをご覧ください
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<br>
<img
src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
alt="kitten with blue background">
<hr>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my interests.</p>
<h3>My favorite websites</h3>
<ul>
<li><a href="www.google.com">Google</a></li>
</ul>
<h3>My favorite books</h3>
<section>
<h4>Non-Fiction</h4>
<ol>
<li>Eloquent Javascript</li>
</ol>
</section>
<section>
<h4>Fiction</h4>
<ol>
<li>Hitchhiker's Guide to the Galaxy</li>
</ol>
</section>
</section>
<hr>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body>ミニチャレンジ
- 上記のすべてのコンテンツを、あなたの興味関心に合わせて修正してください。
- レッスン開始時に作成した別の空の HTML ファイルの 1 つで、タイトル、見出し、小見出しを含むニュース記事を作成するふりをします（コンテンツが思いつかない場合は、旅行中のある一日について書いてください。（小旅行、訪れた場所、食べたものなどを思い出してください）。
- 関連するタグを使用してコンテンツを追加すると、ニュース記事がウェブサイトに表示されます。
- コンテンツがブラウザに表示されていることを確認します。
- 発展: 記事に関するコメントを送信できるフォームを作成します。まだ動作しませんが（JavaScript に接続されていないため）、このフォームを HTML で作成することで、動作するフォームを作成する最初の手順を確認できます。
コンテキスト
HTML は、ワールド ワイド ウェブ上のコンテンツの言語です。
HTML ファイルに移動して開くには、コマンドラインを使用します。HTML ファイルは、さまざまな関数で構成される JavaScript スクリプトを使用して記述された CSS スタイルと動作で拡張されます。HTML ファイルは、Google App Engine で使用されるテンプレートでもあり、データベースから入力されます。
HTML In Action
HTML スタートガイド
HTML は、拡張子が .html のファイル内に記述されます。
ページを表示する
Mac で HTML ファイルをプレビューするには: コマンドラインで、HTML ページを含むフォルダに移動し、「filename」を HTML ファイルの名前に置き換えて「open filename」と入力します。
一般的な構文
<tag>
Content
</tag>要素がネストされている
HTML 要素は他の要素内に配置できます。
<parent>
<child>
This content is inside of the child tag, which is inside of
the parent tag. Keep an eye on indentation to see which is
the parent and which is the child!
</child>
</parent>HTML ページの構造
すべてのウェブページには、同じ基本構造があります。たとえば、次のようになります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><head>には、ウェブサイトに関する情報が含まれていますが、ページに表示される実際のコンテンツは含まれていません（ウェブページの「頭脳」のようなものと考えてください）。<body>には、実際に画面に表示されるページのすべてのコンテンツが含まれます。
一般的な要素
<body> タグと </body> タグ内でこれらの共通要素を使用して、ページにコンテンツを追加します。
段落
段落を作成するには、p の開始タグと終了タグを使用します。
<p>
This is a paragraph about how great polar bears are. Aren't they just the best?
</p>コメント
コメントを使用すると、最終的にレンダリングされる HTML に影響を与えることなく、コードを読みやすくすることができます。
<!-- This is a comment. It lives in the code as a note to yourself or
to other developers, but is hidden when the HTML is rendered in the
browser. -->見出し
<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>汎用の <div>
<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>リスト
リストアイテムのリスト <li> は、順序なしリストタグ <ul> または順序付きリストタグ <ol> のいずれかでラップされます。
<!-- An unordered list - this will default to a bulleted list. -->
<ul>
<li>first list item</li>
<li>second list item</li>
</ul><!-- An ordered list - this will default to a numbered list. -->
<ol>
<li>first list item</li>
<li>second list item</li>
</ol>画像
<img> タグでは、src 属性を使用して画像のアドレスを指定する必要があります。オプションの alt 属性は、スクリーン リーダーなどのユーザー補助機能で使用されます。
<!-- Image hosted elsewhere on the web -->
<img
src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
alt="kitten with blue background">
<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">アンカー（多くの人が「リンク」と呼んでいるもの）
ハイパーリンクの場合、<a> タグでは、href 属性を使用してハイパーリンクのリンク先のアドレスを指定する必要があります。
<!-- External link -->
<a href="https://www.google.com"></a>
<!-- Local link -->
<a href="footer.html"></a>水平罫線
<!-- This self-closing tag creates a line across your web page. -->
<hr>休憩
<!-- This self-closing tag creates a line break between elements. -->
<br>フォーム
<form> は、ユーザーから情報を収集するために使用されます。<form> が機能するには、収集したデータを処理または処理するためにどこかに送信する必要があります。そのため、<form> には追加の属性が必要になることがよくあります。
action- フォームの送信時にフォームデータの送信先method-GETまたはPOSTタイプのいずれかのリクエストを使用してデータを処理するかどうかを示します。
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">
</form>入力
<input> は、<form> が情報を収集するために使用する要素です。
通常、<input> 要素には、送信されたデータが属するフィールドをデータベースが識別するために使用する name 属性もあります。
<form>
<!-- a text box with the helper text "Full Name" -->
<input type="text" name="fullName" placeholder="Full Name">
</form><input> 要素は非常に汎用性が高く、type 属性を指定することで、テキスト フィールド、カレンダー スタイルの日付選択ツール、ラジオボタン、プルダウンなどとしてレンダリングできます。より完全なリストについては、外部ドキュメントをご覧ください。
ヒントとアドバイス
- ウェブページのコードを調べて、他のデベロッパーがウェブページに何かを追加するために使用したタグを確認することで、使用可能な HTML タグを把握できます。
- 追加したいものが見つからない場合は、デベロッパー向けドキュメントをご確認ください。HTML 要素の一覧については、https://www.w3schools.com/Tags/、https://developer.mozilla.org/en-US/docs/Web/HTML/Element、http://html-css-js.com/html/tags/ をご覧ください。
- HTML を記述する際は、開始タグと終了タグが必要な要素については、タグの間にコンテンツを追加する前に、まずタグを開いて閉じることをおすすめします。これにより、ぶら下がりタグが残ることはありません。
- コード内の HTML 要素のネスト構造をわかりやすく表示するには、他の要素内にある要素をインデントします。これにより、HTML コンテンツの構造をすばやく認識できます。
- コメントをたくさん使用しましょう。これらは、ご自身のコードのトラブルシューティングに役立ち、他のユーザーにコードのレビューを依頼する際にも役立ちます。
- html5boilerplate.com などのウェブ上のリソースは、HTML の記述をすばやく開始するのに役立ちます。
ベスト プラクティスの概要
- ウェブページに関する情報は、HTML ドキュメントの
<head>に記述します。タイトル、メタデータ、スタイルへのリンクなどです。 - ウェブページの情報は HTML ドキュメントの
<body>に入ります。 - HTML ドキュメントのコンテンツを構築するために、デベロッパーが使用できる要素は多数あります。たとえば、
<p>、<h1>～<h6>、<div>、<li>、<img>、<a>、<hr>、<br>、<!-- -->などです。 - 一部の要素には、開始タグと終了タグ（
<p></p>）が必要です。 - 他の要素は自己完結型なので、開始タグ
<img>のみが必要です。 - タグには、要素の動作に関する詳細情報を提供する属性（
src、alt、idなど）を含めることができます。<img src="filename.png" alt="description">。 - コメント
<!-- -->は、ウェブページのどのセクションが何をするのかを理解するのに役立つメモをデベロッパーに提供します。 - ブラウザに組み込まれているデベロッパー ツールを使用して、ウェブページの HTML コードを検査し、ページがどのように構築されているかを確認します。
問題 1
次のうち、子要素はどれですか？（この演習では body 要素と html 要素は無視します）。
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>- h1
- p
- a
- h1 と p
問題 2
HTML ドキュメントでは、__ は <head> 要素に、__ は <body> 要素に入ります。
- 構造、メタデータ
- メタデータ、構造
- 見出し、小さいコンテンツ
- サイトのヘッダー、サイトのメイン コンテンツ
問題 3
次のうち、ネストされた要素をインデントする理由として適切でないものはどれですか？
- インデントを使用すると、どの要素が他の要素に含まれているかを簡単に確認できます
- インデントを使用すると、ウェブページの構造を人間が読みやすくなります。
- インデントにより、ボットや検索エンジンがウェブページの構造を読み取りやすくなります。
- インデントすると、兄弟要素を簡単に識別できます
問題 4
次のうち、HTML 要素の属性はどれですか？
<div class="sidebar">Sidebar goes here!</div>divclass- サイドバー
- ここにサイドバーを配置します。
問題 5
次の HTML 要素にはいくつの属性がありますか？
<input type="text" placeholder="username" name="username" />- 0
- 1
- 2
- 3
問題 6
次の関係を示す HTML スニペットで、親要素はどれですか？
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p><b><i>
問題 7
次の HTML スニペットに含まれる要素のうち、親要素の子要素である要素の数はいくつですか？
（ラップする <body> 要素または <html> 要素はカウントしません）
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>- 1
- 2
- 3
- 4
問題 8
一部のブラウザでは次の HTML スニペットが正しくレンダリングされますが、このスニペットのどこが間違っていますか？
<img src=puppies.png width=400 />- 終了タグがない
- 属性の値は引用符で囲む必要があります
width属性を指定する場合は、height属性も指定する必要があります- 必須属性が指定されていない
問題 1
次のうち、子要素はどれですか？（この演習では body 要素と html 要素は無視します）。
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>a 要素は、別の要素に含まれているため、子要素です。
問題 2
HTML ドキュメントでは、__ は <head> 要素に、__ は <body> 要素に入ります。
メタデータは <head> 要素に、構造は <body> 要素に入ります。<head> 要素の内容は、ウェブページ自体には表示されません。
問題 3
次のうち、ネストされた要素をインデントする理由として適切でないものはどれですか？
インデントは、ボットや検索エンジンがウェブページの構造を読み取りやすくするものではありません。ボットがウェブサイトを読み取る場合、HTML コードが 1 行にすべて記述されていても読み取ることができます。
問題 4
次のうち、HTML 要素の属性はどれですか？
<div class="sidebar">Sidebar goes here!</div>class は属性です。属性は HTML 要素内にあり、通常は値を持っています（必ずしも持つ必要はありません）。
問題 5
次の HTML 要素にはいくつの属性がありますか？
<input type="text" placeholder="username" name="username" />上記の input 要素には、type、placeholder、name の 3 つの属性があります。
問題 6
次の関係を示す HTML スニペットで、親要素はどれですか？
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p> は他の要素を含むため、親要素です。
問題 7
次の HTML スニペットに含まれる要素のうち、親要素の子要素である要素の数はいくつですか？
（ラップする <body> 要素または <html> 要素はカウントしません）
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>スニペットには 4 つの子要素があります。基本的には、親要素を持つ要素（<div> 要素を除く）です。<h1>、<p>、<i>、<a> です。
問題 8
一部のブラウザでは次の HTML スニペットが正しくレンダリングされますが、このスニペットのどこが間違っていますか？
<img src=puppies.png width=400 />属性の値は引用符で囲む必要があります。<img /> は自己終了タグであり、必須属性はありません。height なしで width を指定しても、その逆でも構いません。