![]() |
|||
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
HP作成
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
見出しの書き方
見出しを指定するタグは、
<h*> </h*> を使います。
*には、1から6までの数字が入ります。
<h1>見出し1</h1>
<h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> それぞれ見出しの大きさは次のようになります。 実際に見出しを書いて見ましょう
先ほど作ったファイルを開いてください。
<例題1で保存したファイル>
<html>
<head> <title>タイトル</title> </head> 本文 <body> </body>
まず、<title> と </title>、<body> と </body> の「本文」の文字を 「MY
HOMEPAGE」 に書き換えます。
<例題2>
すると、以下のようになります。 (MY HOMEPAGE の部分は何でもかまいません。好きな題名をつけてください。) ソース内の半角スペース及びタブ、改行は無視されますので、適当に改行をして見やすくしてください。
<html>
<head> <title>MY HOMEPAGE</title> </head> <body> MY HOMEPAGE </body>
では、ブラウザで確かめて見ましょう。
<例題3>
ファイルを上書き保存して、閉じてからファイルをダブルクリックしてみてください。下の図のようになりましたか?
上記のように表示出来たら、「MY HOMEPAGE」の部分をh1タグで囲んで見ましょう。 フラウザは閉じずにそのまま、ブラウザのメニューバーの表示から「ソース」を選択してソースを表示してください。
すると、メモ帳でソースが開きます。 では次に、「MY HOMEPAGE」を <h1> </h1>タグではさんでください。
<html>
<head> <title>MY HOMEPAGE</title> </head> <body> <h1>MY HOMEPAGE</h1> </body>
上記のように書き込んで上書き保存をしたら、ブラウザの更新ボタンを押します。
すると、情報が更新されて以下のように表示されます。
どうですか?
表示位置を変えてみましょう
では次に、見出しを真中に移動させましょう。(センタリングと言います)
<例題4>
センタリングするためには、 <center> </center> ではさむと、タグではさまれた部分がすべてセンタリングされます。 では、先ほどの <h1>MY HOMEPAGAE</h1>を<center> </center>ではさんでみましょう。
<html>
<head> <title>MY HOMEPAGE</title> </head> <body> <center><h1>MY HOMEPAGE</h1> </center> </body>
そして、ファイルを上書き保存したあとブラウザの更新ボタンを押すと、
以下のように題名がセンタリングされました。
段落・改行をする
画像をタイトルの下に表示させるために段落を入れます。
段落を入れるには、
<p>
と書くと一段下がって、段落を入れることができます。
HTMLの場合、段落に終了タグがなくても表示には問題ありません。
<br>
と書くと改行をすることができます。
改行タグには終了タグはありません。
画像を表示させてみよう
では、画像を貼り付けてみましょう。
画像を表示させるには、次のように書くと画像を表示させることができます。
<img src="ファイル名">
ファイル名には拡張子まで書きます。( .jpg や .gif などです)
見本画像の写真のファイル名は「cake.jpg」なので、ソースには
<img src="cake.jpg">
と書きます。
もしも、画像のファイルを別のフォルダにおいている場合は、
<img src="フォルダ名/cake.jpg">
となります。
<例題5>
では、先ほどのソースにタイトルで改行をして、画像を追加してみましょう。
<html>
<head> <title>MY HOMEPAGE</title> </head> <body> <center> </body>
ファイルを保存してブラウザを更新してください。
下のように表示できましたか? ![]()
Tips
タグは「入れ子」にならないように気をつけましょう! <入れ子の状態> <正しい記述> どうです。わかりましたか? |