-本日のアジェンダ-
1限目
学科 HTML基礎①
文字コードについて
2限目
学科 HTML基礎①
HTMLの記述について
3限目
学科 HTML基礎①
headについて
4限目
学科 HTML基礎①
bodyについて
5限目
学科 HTML基礎①
まとめ
本日のテーマ
実際にHTMLを記述してみましょう
ウェブサイトができるまで
00.依頼を頂いた
01.ご提案(企画をまとめる)
02.デザインに必要な素材の作成
03.デザインラフの作成
04.コーディング
– STEP01 素材の確認
– STEP02 マークアップ
– STEP03 CSSでデザインする
– STEP04 サーバにテストアップ
– STEP05 納品
【資料】Webサイト制作の手順の教科書.pdf
Webページの作成ツール
テキストエディタ・・・Terapad（HTMLとCSSを書く）
Atom,Brackets,Dreamweaver,Visual Studio Codeなど
ブラウザ・・・Google Chrome（ページを表示させる）
Safari,Firefox,Microsoft Edge,Microsoft Internet Explorerなど
マークアップとは？
HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。
HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。
Terapadの設定
文字コードUTF-8の設定
①表示＞オプション「文字コード」の設定
②ファイル＞「文字/改行コード指定保存」での設定
HTMLの基本構造
<!doctype html> ・・・DOCTYPE宣言
<html lang="ja">・・・HTML文書であることを示す
<head>・・・文書のヘッダ情報を表す
</head>
<body>・・・文書の本体を表す
</body>
</html> ◆DOCTYPE（ドックタイプ）宣言
どのバージョンで記述するか
この場合はHTML5
◆文書のヘッダ情報
その文書のタイトルや要素、著作権に関する情報など、
ページについての補足情報を記述
◆文書の本体
ブラウザで表示される情報を記述
lang 属性
どのような言語で記述されているかを表す。
jaは日本語を意味する
タグを書く時のルール
半角英数字で！全角は使わない。
特に全角スペースには注意。
大文字と小文字の区別はないが、小文字を推奨。
タグの書き方
<タグ>コンテンツ</タグ>
開始タグ 終了タグhead ヘッダ情報を記述してみましょう
<meta charset="utf-8">
<meta name="description" content="説明文">
<meta name="keywords" content="html,css,見本">
<meta name="author" content="作者情報">
<title>タイトル</title>HTMLファイルを保存
index.htmlの名前で保存
サイトに訪れたときに最初に表示されるトップページのこと
補足：サイトのアドレス(URL)では”index.html”が省略されます。
.htmlをテキストエディタで開く設定にすると作業がしやすい
body 文書の本体を記述していきましょう
<!-- この間にコメントを書く-->
bodyの内容はブラウザに表示されます。コメントアウト
後から見た時にわかりやすいようにメモなどを書いておく
ブラウザには表示されない
文法チェック
文法に間違いがないかチェックしましょう
ブラウザで確認
index.htmlを右クリック＞プログラムから開く＞Chromeを選択
または
index.htmlをChromeへドラッグ&ドロップ
ブラウザ上で右クリック＞ページのソースを表示 でHTMLの記述を見ることができる