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・・・電子メールで使用される標準文字コード
薄毛・抜け毛の解消｜植毛・自毛植毛のヨコ美クリニック
