HTML実践学習1 ヘッダー(header)

ITリテラシー学習
ITリテラシー学習

HTMLタグのひとつ、headerタグについて説明します。

*HTMLを作成~編集する際にはHTML作成に対応したメモ帳をダウンロードする必要があります。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。

#推奨ツール1. Sublime Text
https://www.sublimetext.com/3
#推奨ツール2. Tera Pad

https://tera-net.com/library/tpad.html

WEBサイトを制作してみましょう。

実際に流れに沿ってポートフォリオサイトを制作してみましょう。このような完成形を目指します。

(1)テキストエディタを開いて、下記を入力してください。<html>要素内に、<head>要素と<body>要素を入れます。この形が基本となります。ファイル名はindex.htmlにしてください。

<html>

<head>
</head>

<body>
</body>

</html>

(2)DOCTYPE宣言をしましょう。下記のように<!DOCTYPE html>を一番上に追加してください。これはhtml5の文書ということを示しています。

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

(3)<title>、<description>、<keywords>を<head>要素内に記述しましょう。

<!DOCTYPE html>
<html>

<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
</head>

<body>
</body>

</html>

(4)文字コードをKewyordsの下に記述しましょう。<meta charset=”utf-8″>はUTF-8の文字コードを指定することを示しています。

<!DOCTYPE html>
<html>

<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
</head>

<body>
</body>

</html>

(5)<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>を文字コードの下に記述してください。これはInternet Explorerの互換モードの記述となります。IEの古いバージョンで見た場合にページが崩れる可能性があるため、content=”IE=edgeと記述し、「IEの最新バージョンで見てください」ということを促す対策となります。

<!DOCTYPE html>
<html>

<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>
</body>

</html>

(6)<header>要素を<body>要素内に記述してください。<header>要素はページの上部に表示されているタイトルやナビゲーションであることを示す要素となります。

<!DOCTYPE html>
<html>

<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>
 
<header>
</header>

</body>
 
</html>

(7)タイトルとサブタイトルを記述しましょう。タイトルは<h1>要素、サブタイトルは<p>要素で記述しています。タイトルは<h1>要素が望ましいですが、サブタイトルは必ずしも<p>要素である必要はなく、<h2>要素でも問題ありません。

<!DOCTYPE html>
<html>

<head>
<title>Web Design, Web Director, Marketer | Menter</title>
<meta name="description" content="Menterのポートフォリオサイトです。">
<meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>

<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>
</header>

</body>

</html>

POINT

<header>要素は、サイトの一番上にくるタイトルやナビゲーションを示す大切な要素となります。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました