演武・壱

タグを使ったホームページ作成の方法・基礎の基礎〜実践編〜


ホームページの基本構造 

まずは「スタート」→「アクセサリ」→「メモ帳」の順にクリックしメモ帳を起動します。
そうしたら左下のように入力してみましょう。
入力が終わったら「ファイル」→「名前を付けて保存」をクリックし､
ファイル名を「top.html」、保存場所を「デスクトップ」と入力して「保存」をクリックします｡
そしてデスクトップにできた「top.html」を開くと右下のようになります。
※必ず拡張子が表示できる状態にしておくこと　拡張子の表示方法
<html>
<head>
<title>トップページ</title>
</head>
<body>
私のホームページへようこそ
</body>
</html>
 		→
小さすぎてよくわからなかった､という人のために拡大図

<title>タグではさんだ文字列はタイトルバーに表示され､
<body>タグではさんだものがホームページの本文となります｡

文字（フォント）の編集 

文字の色や大きさを変更するときは<font>タグを使います｡
複数の属性を使うときは半角スペースで属性の間を区切ります｡
具体的には下の通り。
文字の色を変える
<font color="red">あか</font>
<font color="blue">あお</font>
<font color="green">みどり</font>
 		→ あか
あお
みどり
文字の大きさを変える
<font size="1">いちばん小さい</font>
<font size="7">いちばん大きい</font>
 		→ いちばん小さい
いちばん大きい
文字の色と大きさを変える
<font size="5" color="red">あわせて使ってみる</font>
↓
あわせて使ってみる

文字や画像などの配置 

文字や画像などの配置を変更するときは<div align>タグを使います｡
<div align="left">ひだり</div>
<div align="center">まんなか</div>
<div align="right">みぎ</div>
 		→
ひだり

まんなか

みぎ


画像の挿入 

画像を挿入するときは<img src="ファイル名">タグを使います｡
「../」は「一つ前のフォルダに戻る」という意味で、下の場合は
「ふたつ前のフォルダに戻り､そこにある『img』という名のフォルダから
『bana.jpg』という名前のファイルを探し出して表示しなさい」という意味になる｡
<img src="../../img/bana.jpg"> →

リンクの挿入 

リンクを挿入するときは<A href="リンク先">タグを使います｡
下の場合は
「『tag.html』という名のファイルの内容を探し出して表示しなさい」という意味になる｡
<A href="tag.html">前の画面に戻る</A> → 前の画面に戻る




戻る