無料で作るホームページ作成講座 |
since 2005 7 20 |
 
◆ページの色を設定する
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>○○のホームページ</title>
</head>
<body bgcolor="#CCFFCC" text="#000000" link="#0000FF" vlink="#FF0000" alink="#990066">
ここに本文を書く
</body>
</html> |
bgcolor：背景の色・text：文字の色・link：リンクの色・vlink：訪れたリンクの色・alink：クリックした時の色
 ←クリックで表示します
◆ページに背景画像を設定する
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>○○のホームページ</title>
</head>
<body bgcolor="#CCFFCC" text="#000000" link="#0000FF" vlink="#FF0000" alink="#FFFF00" background="image/back.gif">
ここに本文を書く
</body>
</html> |
background=で背景画像を指定します。
「image/back.gif」は、imageフォルダの中にある、back.gifを背景画像にしますよ、という意味です。
◆本文の文字を装飾する
（１）文字の色を変える。<div style="color:#ffffff">なんとかかんとか</div>「#ffffff」の部分を変更する
（２）強調文字を書く。<strong>なんとかかんとか</strong>
（３）改行する。なんとか<br>かんとか・・・これで２段になります。
（４）文字を真中に。<div style="text-align:center">なんとかかんとか</div>
（５）見出しをつける。<h1>○○のホームページ</h1>
◆写真を載せる
<img src="image/hana.jpg" width="200" height="150" alt="花の写真">
imageフォルダの中にある、hana.jpgという写真を貼り付けますという意味で、写真のサイズも書きます。
※画像の種類は「○○.jpeg」「○○.jpg」「○○.png」「○○.bmp」「○○.gif」などがあります。
◆リンクする
（１）自分のトップページから次のページに移動する
<a href="next.html">次のページへ移動</a>
「index.html」と「next.html」がある場合です
（２）自分のトップページから他のサイトに移動する
<a href="http://www.yahoo.co.jp/">ヤフーのホームページ</a>
自分のページと「ヤフーホームページ」とリンクする場合
◆ここまでのサンプルページを下記よりダウンロードして色々触ってください。
ダウンロード
◆完成したらサーバーにアップロード（転送）
まず、自分のＰＣで「index.html」をダブルクリックして確認し、よければサーバーに転送します。
「homepage」フォルダの中の「index.html」と「next.html」を「image」フォルダはフォルダごと転送してください。
◆自分のホームページにアクセスしてみましょう。
契約プロバイダーまたは無料ＨＰスペースで割り当てられた「http://〜」があなたのＵＲＬです。
転送には「FFFTP」というフリーソフトを使います。下記からダウンロードできます。
 ダウンロード |
FFFTPの使い方 |
|