勉強記録 ~プログラマーへのいばら道~ 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に指定する
ことができる。
②ページのタイトルをつける
<title>要素は、ページのタイトルを指定する。
<title>要素で指定されたタイトルは、ブラウザのタブ上に現れる。
③CSSの読み込み
これまでProgate上では「stylesheet.css」で記述したCSSが結果に反映されていた
が、本来はHTMLの方で読み込む必要がある。
HTMLからCSSを読み込むためには、<link rel="stylesheet">を用いる。
<link rel="stylesheet" href="stylesheet.css">のように、herf属性で読み込むCSSファ
イルを指定する。
ということで、本日はここまで。
次回は「HTML&CSS初級編」の6回目の復習を記録します。
ご一読を頂きまして、有り難うございました。