このページは、JavaScript機能を使用しています。
htmlの基本
htmlの基本を知っておかないと、作業を進めていく上で、つまずいた場合に大変時間がかかってしまいます。また、基本を知っておくことで、知らない人との間で大きな差となります。そこで必要最低限の技術を学びましょう。
（１）htmlでは<>でかこまれたものをタグと呼びます。タグは基本的に<>で始まり</>で閉じます。
（２）htmlでは必ずタグ<html>で始まり、最後は</html>で閉じます。
（３）さらに<html></html>の間には<head></head>と<body></body>があります。
まず下記のタグをメモ帳にコピーし、htmlで保存してみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="ここにホームページの紹介文を記述します">
<meta name="keywords" content="キーワード,キーワード,キーワード">
<title>神田はな子のホームページ</title>
</head>
<body>
<h1>神田はな子のホームページ</h1>
ただいま工事中です。
</body>
</html>
（４）<head></head>内の<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">と<meta http-equiv="Content-Style-Type" content="text/css">は基本的にいじりません。
（５）<meta name="description" content="ここにホームページの紹介文を記述します">文字数の制約にはいろいろな説がありますが、あまり気にすることなく２００文字以内であれば構いません。
（６）<meta name="keywords" content="キーワード, キーワード,">ここにキーワードを記述します。キーワードとキーワードの間にカンマを入れます。キーワード数の制約にもいろいろな説がありますが、３０以内であれば構いません。
（７）<title>ホームページのタイトルを記述します</title>このタイトルタグは最重要です。必ず一番重要なキーワードを含ませてください。
（８）<body></body>の間にhtmlの本文が入ります。
(９) 半角の英数字で名前を付けて保存（hanako.html)
●ピンク色の<ｈｔｍｌ></html>の部分をメモ帳にコピーし、
日本語の部分を自分なりに変えてからｈｔｍｌで保存してください。
TOPページの場合は「index.html」
●保存するフォルダ名は半角英数字
●フォルダ内には表示させるに必要なもの全て入っていること。
（画像、ｈｔｍｌファイル）
中央に表示させたい場合は下記のように<div align="center"></div>を入れます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="ここにホームページの紹介文を記述します">
<meta name="keywords" content="キーワード,キーワード,キーワード">
<title>神田はな子のホームページ</title>
</head>
<body>
<div align="center">
<h1>神田はな子のホームページ</h1><br><br>
ただいま工事中です。</div>
</body>
</html>
スタイルの指定
文章の一部分の色を変えるには <span style="color: 色名"> ... </span> です。
たとえば「工事中」という部分だけ赤にしてみましょう。
ただいま <span style="color: FF0000">工事中</span> です。
■ある部分を中央揃えにするには
<div align="center">ただいま工事中です。</div>
色見本は下記を参照
http://www.tokaido.co.jp/html/colorlist.htm
画像を貼る
<img src="hanako.jpg" alt="神田はな子の自画像">
■中央に表示させたいときは
<div align="center">
<img crc="hanako.jpg" alt="神田はな子の自画像"></div>
■画像を回り込ませたいときは
<img src="hanako.jpg" alt="神田はな子の自画像" style="float: right">
<img src="hanako.jpg" alt="神田はな子の自画像" align=left>
画像のまわりにたとえば 30 ピクセルのマージン（余白）をとる場合は次のように指定します。 <img src="hanako.jpg" alt="神田はな子の自画像" style="float: right; margin: 30px"> 上・右・下・左のマージンをそれぞれ margin-top，margin-right，margin-bottom，margin-left で別々に指定することもできます。
また，margin: 10px 20px 30px 40px のようにして上右下左のマージンを一括指定することもできます。
リンクの貼り方
完成したら，ホームページからリンクを張ってみましょう。 index.html を開き，その中の適当なところに次のように書きます。 <a href="tabi.html">旅の記録</a>
「旅の記録」のページからトップページに「戻る」リンクを張るには，
<a href="./">ＴＯＰに戻る</a>
<a href="index.html">ＨＯＭＥに戻る</a>
その他のタグ
<h2>…</h2> は， <h1>…</h1> より少し小さい見出しです。 以下同様に，<h6>…</h6> まであります。 <hr> は画面の幅いっぱいに横線（horizontal rule）を入れます。
電脳道場TOP
背景色を変える
サバーへ転送する