一週間でマスターするホームページの作り方
毎日コミュニケーションズ (2000/10)
松本都
専門学校の教科書にもなっていてい、
非常にわかりやすい。
本書に書かれているHTMLの練習は、
HTML練習帳 でどうぞ。http://www.amzak.net/files/tool/html.html
ウエブページに触れる
- ホームページの基礎
- ウエブサイト公開までの流れ
- HTMLの仕組みを見る
html
head
body
title
div
HTMLを使ってみる
- HTMLの基礎を学ぶ
div
p
見出しエレメント h1～h6
属性
属性値
align（アライン）属性
左 レフト ： * align="left"
中央 センター ： * align="center"
右 ライト ： * align="right"
em（エム）エレメント・・・斜体 しゃたい 「しゃたい」「/えむ」で登録
i ITARIC（斜体）・・・em と同じ
strong ストロング・・・太字 ふとじ 「ふとじ」「/ふとじ」で登録
b BOLD（太字）・・・strong と同じ
u underline（下線）・・・ 「かせん」「/かせん」で登録
s strike-through （打ち消し）・・・
ブロックエレメント・・・文章など大きなかたまり：h1~h6、pエレメント、hrエレメント、divエレメント
インラインエレメント・・・文字などの小さなかたまり：font、em、storongエレメントなど
font 文字の大きさを指定
＜ font size="7"＞１番大きくしたい文字＜/font＞
- ウエブページをアップロードする
- HTMLを使ったページ作成
- ウエブページに色をつける
1.HTMLを付ける・・・最初に４つのエレメントを付ける
html head title body
２．見出しエレメントを付ける
３．各ブロックにpエレメントをつける・・・編集がしやすくなる
４．divエレメントをつける・・・pエレメントは空白がつくが、divは空白がない
５．align属性で見出しや文章の位置を決める
６．文字の大きさを変える
７．文字列の装飾・・・太字、斜体、下線、打ち消し
・文字の色を記号で指定する
＜font color＝"指定する色の記号"＞色をつけたい文字＜/font＞
「font color」＝「span style」
・文字の色を式名で指定する
「あかにする」「/ふぉんと」で登録
・背景に色をつける
＜body bgcolor="指定する色"＞内容＜/body＞
・文字をマーカーで塗るように色を付けるには？
→文字の背景に色をつける
| ■ 文字の背景に色をつける |
| タグのソース | ブラウザ表示 |
|---|---|
| <font style="background-color:#ffff00;">文字</font> | 文字 |
※あらかじめテーマ別に使う色を決めておく
よく使う色を登録しておく 好きな色を集める 虹
きいろにぬる #ffff33;
きいろにぬる
むらさきにぬる #ccccff;
むらさきにぬる
ぴんくにぬる #ffccff;
ぴんくにぬる
みどりにぬる #99ff99;
みどりにぬる
みずいろにぬる #99ffff;
みずいろにぬる
あかにぬる
画像をページに貼り付ける
- 画像ファイルの保存形式
- GIX Proで画想を交換する
- ウエブページに画像を貼る
- 文章と画像を組み合わせる
ファイルをリンクさせる
- 簡単なろリンクを作る
- 相対リンクと絶対リンクについて
- ページの途中にリンクさせる
- リストにして表示する
| ♪ HTMLファイルを作ってみよう |
| ■ リンクの色を指定する |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>HPのタイトルを入れる</title>
</head>
<body bgcolor="色指定" text="色指定" link="色指定" alink="色指定" vlink="色指定">
この場所に、リンクの指定をしてください。
</body>
</html>
| bgcolor="色指定" | 背景色の指定になります |
| text="色指定" | 文字色の指定になります |
| link="色指定" | 通常のリンク文字の色 |
| alink="色指定" | マウスでクリックした時のリンク文字の色 |
| vlink="色指定" | 訪問済みリンク文字の色 |
| ■ リンクタグのソース |
リンク先のアドレスは、ファイル名を入れてください。
たとえばa.htmlからb.htmlにリンクする場合のリンク先のアドレスはb.htmlになります。
掲示板とかブログなんかはアドレスを入れます。
| 文字でリンクします |
| <a href="リンク先のアドレス">文字</a> |
| サンプル |
| 画像でリンクします |
| <a href="リンク先のアドレス"><img src="画像ファイルの名前" border="0"></a> |
 |
| フレームを解除して、リンク先のページをウィンドウ全体に表示します(文字の場合) |
| <a href="リンク先アドレス" target="_top">文字</a> |
| サンプル |
| フレームを解除して、リンク先のページをウィンドウ全体に表示します(画像の場合) |
| <a href="リンク先アドレス" target="_top"><img src="画像ファイルの名前" border="0"></a> |
|
| 新しいウィンドウを開いて、リンク先のページをそのウィンドウに表示します(文字の場合) |
| <a href="リンク先アドレス" target="_blank">文字</a> |
| サンプル |
| 新しいウィンドウを開いて、リンク先のページをそのウィンドウに表示します(画像の場合) |
| <a href="リンク先アドレス" target="_blank"><img src="画像ファイルの名前" border="0"></a> |
|
| 画像にマウスを乗せると画像を変えてリンクします |
| <a href="リンク先アドレス"><img src="最初の画像名" border="0" onmouseover="this .src='マウスを乗せたときの画像名'"onmouseout="this .src='最初の画像名'"></a> |
 |
| リンク文字にマウスを乗せたとき説明を表示します |
| <a href="リンク先アドレス" target="_blank" title="説明">文字</a> |
| サンプル |
| 文字をクリックで、メール画面を出します |
| <a href="mailto:メールアドレス">文字</a> |
| サンプル |
| 画像をクリックで、メール画面を出します |
| <a href="mailto:メールアドレス"><img src="画像ファイルの名前" border="0"></a> |
|
| 同じページ内でのリンクの場合、文字を変更して、ページの上段でリンクします タイトル部分を同じに指定すれば、下に指定したname="タイトル"部分が開きます |
| <a href="#タイトル">文字</a> |
| 同じページ内の、表示したい場所に下のを入れてください |
| <a name="タイトル"> |
オブジェクトを取り入れる
- 水平線を取り入れる
- テーブルを取り入れる
- テーブルを使ってレイアウトする
フレームを使ったサイトを作る
- ページをフレームで分割する
- フレームを利用してリンクさせる
- 細かい手直しと仕上げをする
- ウエブサイトをアップロードする
フォームを使って返事をもらう
- フォームを作る
- ウエブサイトを更新する
- アニメGIFを作る
0 件のコメント:
コメントを投稿