勉強記録 ~プログラマーへのいばら道~ progate:HTML&CSS初級編(5)

プログラマー転職を目指す、progateでのお勉強記録。

今回は、HTML&CSS初級編の復習その5となります。

内容は【HTMLの全体構造、HTMLのバージョン指定、<head>要素と中身】です。

 

1.HTMLの全体構造

 実際のHTMLファイルには、決められた型を書いていく必要がある。

 <html>要素の中に<head>要素と<body>要素が必要である。

 <head>要素にはページに関する情報を、<body>要素には実際に表示したい内容を書

 く。

 これまで勉強した要素は、<body>要素の中に記述していく。

2.HTMLバージョンを指定する

 <!DOCTYPE html>の部分は、DOCTYPE宣言と呼ばれるもので、HTMLのバージョンを

 宣言するためのものである。

 最新バージョンのHTML5を使う際には、<!DOCTYPE html>を使用する。

3.<head>要素

 <head>要素にはWebページの設定に関する情報を書いていく。

 <head>要素内に記述した内容はWebページには表示されない。

 <head>要素には必ず入れる3つの要素が存在する(中級以降で学習)。

4.<head>要素の中身

 <head>要素の中では、①文字コードの指定、②ページのタイトルの設定、③CSSの読

 み込み、などを行っていく。

 ①文字コードを指定する

  文字コードを指定することで、ページの文字化けを防ぐことができる。

  <meta charset="utf-8">とすることで、そのページの文字コードUTF-8に指定する

  ことができる。

  UTF-8は、HTML5で推奨されている文字コードである。

 ②ページのタイトルをつける

  <title>要素は、ページのタイトルを指定する。

  <title>要素で指定されたタイトルは、ブラウザのタブ上に現れる。

 ③CSSの読み込み

  これまでProgate上では「stylesheet.css」で記述したCSSが結果に反映されていた

  が、本来はHTMLの方で読み込む必要がある。

  HTMLからCSSを読み込むためには、<link rel="stylesheet">を用いる。

  <link rel="stylesheet" href="stylesheet.css">のように、herf属性で読み込むCSSファ

  イルを指定する。

 

ということで、本日はここまで。

次回は「HTML&CSS初級編」の6回目の復習を記録します。

 

ご一読を頂きまして、有り難うございました。