[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

Word などで作成する文書は、GUIを用いて視覚的に文書内の情報を表現する。

インターネットは、様々なOS環境が混在し、プレーンテキストである方が都合がよい。

このプレーンテキストをHTMLで意味づけし、ホームページの情報を人間やコンピュータに解り易くさせる。

マークアップとは?

ただのテキスト文書では、ブラウザは、そのテキストのそれぞれが、どういう意味なのか、どうやって表示すべきなのか、判断できない。

そこで、Webページとして意味を持った表示をさせるために、どこが見出しで、どこが段落なのかといった文書の構造を、HTMLでマークアップし、意味づけすることで、ブラウザにも理解できる形にさせる。

HTML文書の構造

HTML文書の基本構造

HTML文書は、文書型宣言(DOCTYPE宣言)とhtmlの2つのブロックで成り立っている。

HTML文書全体は、ツリー状の構造になっている。

HTMLの基本構造

文書型宣言(DOCTYPE宣言)

HTML文書のバージョンと文書型を示すブロック。

どのバージョンのHTML言語(ドキュメントタイプ)で作成されているのかを明示する。

html要素

HTML文書の最上位ルート要素。

head要素とbody要素がある。

head要素

文書タイトル、文字コード、キーワード、説明文、関連ファイルなどのHTML文書のメタ情報を記述する部分。

ヘッダ情報のほとんどは、ブラウザ上に表示されないが、検索エンジンやブラウザに、どのような情報が書かれているかを知らせるために必要である。

body要素

コンテンツを記述する部分。

この部分に書かれた内容が、ブラウザ上に表示される。

HTML5の基本ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>基本テンプレート</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>

</body>
</html>

 <!DOCTYPE html>

HTML5およびHTML5.1で記述していることを宣言。

1行目に記述すること。

<html lang=”ja”>

ルート要素と呼ばれ、lang 属性で、コンテンツの内容が日本語であることを明示。

<head>

各種設定を記述。

ブラウザに表示されない。

<meta charset=”UTF-8″>

エンコードの種類が、UTF-8であることを明示。

<title>

ページのタイトルを指定。

<link rel=”stylesheet”>

CSS を読み込む設定。

<body>

ブラウザに表示するコンテンツを記述。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="description" content="">
 <title>基本テンプレート</title>
 <link rel="stylesheet" href="style/style.css">
</head>
<body>

<h1>HTML文書の基本構造</h1>


<h2>マークアップとは?</h2>



ただのテキスト文書では、ブラウザは、そのテキストのそれぞれが、どういう意味なのか、どうやって表示すべきなのか、判断できない。・・・・


<h2>HTML文書の基本構造</h2>

<img src="images/" alt="HTML文書の基本構造">


HTML文書は、文書型宣言(DOCTYPE宣言)とhtmlの2つのブロックで成り立っている。</P>



HTML文書全体は、ツリー状の構造になっている。

<img src="images/" alt="HTMLの基本構造">
  
<h3>文書型宣言(DOCTYPE宣言)</h3>


<h3>html要素</h3>


<h4>head要素</h4>


<h4>body要素</h4>


<h2>HTML5の基本ソースコード</h2>

</body>
</html>
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す