HTMLの基本構造とかタグとか|ゼロからのWeb制作 Vol.2

資料1

こんにちは、鈴木です。

今回はHTMLの基本について書いていこうと思います。

1.テキストエディタついて

まず、HTML/CSSコーティングをするためには、テキストエディタが必要です。

Windowsの「メモ帳」、Macの「テキストエディット」でもコードを書くことはできますが、HTML/CSSコーティングを考慮したソフトではないので、初心者の方には使いにくいかもしれません。なので、はじめのうちは無料のテキストエディタを使うことをお勧めします。

無料で使えるテキストエディタには、Windows用の「サクラエディタ」、Mac用の「CotEditor」があります。私は普段Windowsを使っているので、「サクラエディタ」を使って説明してきます。

資料29

 

 

 

 

URL:http://sakura-editor.sourceforge.net/

2.HTMLの基本構造

以下が、HTML文書の基本構造です。

資料3

<html>~</html>は、HTML文書であることを示します。
lang=”ja”は言語が日本語であることを示します。英語の場合は、lang=”en”になります。

<head>~</head>は、ページの設定情報を記述します。(ブラウザ画面には表示されません。)
<meta>~</meta>は、HTML文書に関する情報を示します。
<title>~</title>は、ページのタイトルを示します。

<body>~</body>は、ページのコンテンツを示します。(ブラウザ画面に表示されます。)

 

*HTMLの最初に記述してあるdoctype宣言”<!DOCTYPE html>”は、HTMLのバージョンとDTD(Document Type Definition:文書型定義)と呼ばれる種類を示しています。

*文字コードとは、コンヒュータ上で文字を表示させるための規格に準じたコードです。世界中のコンヒュータですべての文字が扱えるように標準化しようとする動きから、Unicodeが作られました。
現在は、Unicodeを表現した文字コードの一つであるUTF-8を利用することが一般的です。
また、HTML文書に指定した文字コードとファイルの保存時に指定した文字コードが一致していないと文字化けしてしまいます。

3.タグのルール

HTMLは、基本的に開始タグ~終了タグ(<○○○○>~</○○○○>)の囲まれた形になっています。
ただし、<○○○○>のように終了タグを記述しない単独のタグもあります。

タグは基本的に<要素名 属性名=”属性値”>の形で記述します。
<html lang=”ja”>~</html>で説明すると<html>~</html>までが要素名、lang=”ja”が属性名、”ja”が属性値となります。

属性はスペースで区切ることで何個でも指定することができます。
例えば、<fontcolor=”red” size=”5”>のように色だけでなく文字の大きさも一緒に変えることができます。

 

上図のHTML基本構造をブラウザで表すと下図のようになります。

資料30

 

 

次回はページにコンテンツを増やし、どのように装飾していくかを説明したいと思います。

鈴木君、さっそくhtml修正の軽作業を頼んだら、遅いながらもキッチリこなしてくれました。
その調子で頑張っておくれ〜

オカベ