ヘッド要素を学ぼう

知識課題

知識課題１

<head>タグに含まれる以下の要素について、それぞれの役割と使用例を説明してください。
- <style>
- <link>
- <meta>
- <script>
- <base>

知識課題２

<style>タグと<link>タグの違いを説明し、それぞれのタグが適切に使用される場面について、具体例を交えて述べてください。
外部スタイルシートを使用する利点、およびHTML文書内で直接スタイルを記述する場合の利点と欠点について、それぞれを詳しく考察してください。

知識課題３

<meta>要素で設定可能な以下の属性について調べ、それぞれの属性が必要になる具体的な場面について詳細に説明してください。
- charset
- keywords
- description
- author
- http-equiv="refresh”
- viewport
<meta>要素がSEOに及ぼす影響について考察してください。

知識課題４

具体例を挙げながら、内部スクリプトと外部スクリプトの違いについて詳細に述べてください。

実践課題

<head>タグ内に以下の情報を<meta>タグを用いて追加してください。
- charset: ページの文字エンコーディング
- keywords: ページ内容に関連する検索キーワード
- description: ページの概要
- author: 作成者の名前
- viewport: レスポンシブデザイン対応の設定
styles.cssという名前でCSSファイルを作成し、以下のCSSコードを追加してください。
css
```
body {
  background-color: lightblue;
}
```
- 作成したstyles.cssをHTMLファイルにリンクさせ、背景色がlightblueになるように設定してください。
script.jsという名前でJavaScriptファイルを作成し、以下のコードを追加してください。
jsx
```
// ページが読み込まれたことをコンソールに表示します
console.log("ページが読み込まれました");
```
- 作成したscript.jsをHTMLファイルにリンクし、ページ読み込み時にコンソールに「ページが読み込まれました」と表示されることを確認してください。