HTML
LINEでログイン
Googleでログイン
Twitterでログイン
headタグとは
headタグとは、サイトのタイトルや説明文、外部ファイルなどを読み込む処理などを定義する場所のことです。
headタグで囲まれた内容は、titleタグを除いてブラウザの画面上には表示されません。titleタグの内容はブラウザ上部のタイトルバーに表示されます。
headタグの中身は、titleタグ、metaタグ、linkタグなど作成するWebページに関する情報を記述していきます。また、CSSやJavaScriptを外部ファイル化した場合、headタグの中で読み込ませることもあります。
bodyタグとは
bodyタグとは、文章や画像などの実際にサイトに表示するコンテンツを定義するためのタグです。
bodyタグで囲まれたテキストや画像などはブラウザに表示されていきます。
HTMLの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。
問題3：headタグとbodyタグを理解しよう
以下の指定内容をheadとbodyの適切な場所に書いていきましょう。
記述が終わったら念のためブラウザを開いて確認してみましょう。
VSCODEで作成している場合はファイル名の書いたタブをブラウザにドラッグ＆ドロップすれば確認できます。
・metaタグを使って文字コードを「UTF-8」で指定する
・titleタグを使ってタイトル(タブ部分)を「忍者CODE」とする
・h1タグを使って「忍者CODE」というテキストをブラウザで表示する
・metaタグを使ってディスクリプションを「忍者CODEはプログラミング学習サービスです。」と設定する
・linkタグを使って外部ファイル(CSSファイル)「style.css」を参照できるように指定する
・pタグを使って「忍者CODEで学習をはじめる」というテキストをブラウザで表示する
記述が終わったら念のためブラウザを開いて確認してみましょう。
VSCODEで作成している場合はファイル名の書いたタブをブラウザにドラッグ＆ドロップすれば確認できます。
・metaタグを使って文字コードを「UTF-8」で指定する
・titleタグを使ってタイトル(タブ部分)を「忍者CODE」とする
・h1タグを使って「忍者CODE」というテキストをブラウザで表示する
・metaタグを使ってディスクリプションを「忍者CODEはプログラミング学習サービスです。」と設定する
・linkタグを使って外部ファイル(CSSファイル)「style.css」を参照できるように指定する
・pタグを使って「忍者CODEで学習をはじめる」というテキストをブラウザで表示する
期待する画面
解答ソースコード
<head>
<meta charset="UTF-8">
<title>忍者CODE</title>
<meta name="description" content="忍者CODEはプログラミング学習サービスです。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>忍者CODE</h1>
<p>忍者CODEで学習をはじめる</p>
</body>
¥HTML¥
完了にする！
活動記録をTweetする
UTF-8は世界的にも最もポピュラーな文字コードです。
文字コードの設定はブラウザに表示するべきではない情報なので、headに書きます。
タイトルの設定はtitleタグの間に設定したタイトル名を書くだけでOKです。
Googlechromeなどの検索画面に表示される内容もここで設定したタイトルが表示されます。
こちらはタブや検索結果などのページコンテンツ外で表示する内容なのでheadに書きましょう。
ディスクリプションは検索画面でタイトルの下に表示される説明文です。
指定するにはmetaタグにname属性を指定しdescriptionとします。
表示するテキスト情報はcontent属性で指定します。こちらもheadに書きましょう。
外部ファイルの設定はlinkタグを用いてrel属性を指定します。
CSSを参照する場合は値をstylesheetを指定しhref属性でファイルの場所とファイル名を指定します。
今回は同じ階層にある設定なのでstyle.cssとします。こちらもheadの中に書きましょう。
最後にh1とpタグで書いた内容は、ブラウザに表示すべき内容になるのでbodyに書けばOKです。