入力練習の準備
- 管理フォルダーを作成（このとき、日本語使用不可）
- Cドライブ直下に「myName（自分の名前を英字で）」フォルダーを作り管理する
- その中に「日付フォルダー」を作り、データを管理します（最初の段階では日付、後にプロジェクト名で管理します）
ブラウザに情報を表示するためにはHTMLで記述する
- ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります
- ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります
正しいHTMLを書く必要がある
- セマンティックWeb（semantic web）：1998年にティム・バーナーズ・リー氏によって提唱された技術であり、「情報リソースに意味（セマンティック）を付与することで、人を介さずに、コンピュータが自律的に処理できるようにするための技術」と定義されている
HTML：HyperText Markup Language
- Webページを記述するためのマークアップ言語
- Webサイトの作成において、コンピューターが理解できる言語を用いて伝える必要があります
「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。
ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。
正確な意味を理解するには、「仕様書」と呼ばれるW3C（World Wide Web Consortium）が策定したルールを読むことが必須です。
HTMLの目的
- HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています
- コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします
HTMLの基本ルール
- 日本語で入力した文字はそのまま表示されない（他国語も同様）
- マークアップという意味付けをすると表示できる
- HTMLでは、大きさ・色のなどの修飾は直接記述しない
Markupとは
- 文章に、目印（荷札：タグ）をつけていくこと
HTMLタグ
- コンピューターに対しWebサイトの構成要素を教えてあげるために使われます
- マークアップ：HTMLタグを付ける
タグ
- 「開始タグ」と「終了タグ」で囲む
属性
- 開始タグの中に<タグ名 属性=”値”>という形で「属性」を書くこともあります
記述する内容は3つ
- どこから = 開始タグ
- どこまで = 終了タグ
- 要素の種類 = 要素タイプ
開始タグ
- 「<」と「>」の間に「要素名」を書く。
終了タグ
- 「」の間に「要素名」を書く。
一般的な呼び方
- 「 < 」「 > 」：アングルブラケット
- 「 [ 」「 [ 」：ブラケット
- 「 { 」「 } 」：カールブラケット（ブレース）
- 「 ( 」「 ) 」：パーレン
HTMLの入力の仕方
１行目の「<html>」の入力の仕方を順序で説明すると以下のようになります。
まず、開始タグを入力。
- 「<」左アングル・ブラケット：小なり（less than）
- 「html」と入力
- 「>」右アングル・ブラケット：大なり（greater than）
続いて、
- 「enter(return)」キーを２回押し、１行空ける
続いて、終了タグを入力。
- 「<」左アングル・ブラケット：小なり（less than）
- 「/」スラッシュを入力
- 「html」と入力
- 「>」右アングル・ブラケット：大なり（greater than）
その結果、以下のような「開始タグと終了タグ」のセットができます。
<html> </html>
使用するキーは、
要素（Element）
- 開始タグと終了タグに囲まれた範囲のことを「要素」と呼びます
HTMLの記述内容
html要素
- HTML文書の最上位の要素であり、文書全体を包括する要素となります
- 一般的に「lang属性（文書の言語コード）」を記述するのが慣例となっています
<html lang="ja"> </html>
meta要素
- metaphor
- ブラウザー画面には表示されないけれど、文書の情報として必要なものを記述します
- charset属性のみ、日本語の表示が文字化けしないようにtitle要素の上に記述子ます
<meta charset="UTF-8"> <title>ページタイトル</title> <meta name="description" content="文書の概要が入ります">
雛形のコードサンプル
- descriptionは、サバー上にアップロードする前に記述します
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> </body> </html>
HTML記述
- <!DOCTYPE html>でHTMLの宣言をする
- htmlタグで「headタグ」と「bodyタグ」を囲む
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
headタグ内にWebサイトの内部情報を書く
bodyタグ内にWebサイトの構造を記述する
- bodyタグの中に記述するものは、主にWebサイトの目に見える部分となります
実務でよく使用するタグ
- h1〜h6 タグ
- p タグ
- a タグ
- ul / ol / li / dl / dt / dd タグ
- imgタグ
- table / tr / th / td タグ
- div タグ
- headerタグ
- navタグ
- mainタグ
- section タグ
- article タグ
- asideタグ
- footerタグ
- spanタグ
