HTMLの書き始め、基本

sample

タグをつかうと
<a href="http://d-lover.com">
リンクが貼れたり</a> <font size="5">文字の大きさ</font> <font color="ff0000"></a>をつけたりできるんです。

preview

タグをつかうとリンクが貼れたり
文字の大きさを変えたり をつけたりできるんです。

解説

タグは < >で囲い、半角小文字で。

大文字で<HTML>など記載しているサイトもありますが、xhtmlではNGなので小文字が無難と考えています。

構造を定義する

sample

<html>
<head>
<title>
HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>

<body>
本文
</body>

</html>

preview

explan

これは最低限必要なタグです。最低これだけあればページはできちゃいます。

DOCTYPE宣言言語設定meta情報など必要に応じて入れましょう。

文章情報

sample

<html>
<head>

 

<meta name="keyword" content="HTML,CSS,タグ,辞書">
<meta name="description" content="HTMLやCSSのタグ辞書です">

 

<title>HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>

<body>
本文
</body>

</html>

 

preview

画面上には表示されません。

explan

<head>~<link rel="shortcut icon" href="/favicon.ico"> </head>の間に記載すればOK。だいたいのサイトが<head>の間、かつ<title>の前に記載しています。

"keyword"へは検索ロボットにひろってもらいたいキーワードを半角のカンマ【,】で区切って並べ、"description"へは検索結果の部分に載せたいページの概要、説明を記載します。

検索ロボット制御

sample

<html>
<head>

<meta name="keyword" content="HTML,CSS,タグ,辞書">
<meta name="description" content="HTMLやCSSのタグ辞書です">


<meta name="robot" content="noindex,nofollow">

 

<title>HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>

<body>
本文
</body>

</html>

preview

画面上には表示されません。

explan

検索ロボットのスパイダーを制御する為の記述。

noindexは、そのページの登録を拒否。(indexは「許可」)

nofollowは、そのページからのリンク先巡回を拒否。(followは「許可」)

ただし100%ではないので、各日に検索ロボットに拾ってもらいたくないときは、.htaccessをつかってアクセス制限した方がいいです。

別ページへの自動ジャンプ

sample

<html>
<head>
<meta name="keyword" content="HTML,CSS,タグ,辞書">
<meta name="description" content="HTMLやCSSのタグ辞書です">

 

<meta http-equiv="refresh" content="5;http://d-lover.com">

 

<title>HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>
<body>
本文
</body>
</html>

preview

explain

「5秒後にhttp://d-lover.comへ自動でジャンプする」
という指示です。

見る人の環境によっては動作しない場合もあるので、リンク先URLもページ上に記載したほうがよいです。

ページの自動リロード

sample

<html>
<head>
<meta name="keyword" content="HTML,CSS,タグ,辞書">
<meta name="description" content="HTMLやCSSのタグ辞書です">
<meta http-equiv="refresh" content="5;http://d-lover.com">

<meta http-equiv="refresh" content="5">

 

<title>HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>
<body>

本文
</body>
</html>

preview

explain

「5秒後にページをリロード(更新、再読み込み)する」
という指示です。

見る側にとって結構うざったい機能だったりします・・・。

文字コード

sample

<html>
<head>
<meta name="keyword" content="HTML,CSS,タグ,辞書">
<meta name="description" content="HTMLやCSSのタグ辞書です">

<meta http-equiv="Content-Type" content="text/html; charset="shift_jis">

 

<title>HTML│CSSタグ辞書</title>
<link rel="shortcut icon" href="/favicon.ico"> </head>
<body>

本文
</body>
</html>

preview

画面上には表示されません。

explain

文字化け防止。 指定しておいたほうが無難です。

Shift_JIS・・・Windows、Macで作られたページで使われる主な文字コード
EUC-JP・・・UNIX系OSで主に使われる文字コード
iso-2022-jp・・・電子メールで使用される標準文字コード