HTMLのちょっとした勉強
HTMLがどんなものか体験してみたい方は読んでくださいね。
ホームページ作成ソフトを使われる方も、基本だけでも少し知っておくと作成しやすいのではないかと思います。
下記の枠中のコードをメモ帳等のテキストエディタに入力して、ファイル名は自由で拡張子を .html にして保存してみてください。
そしてそのファイルをIEなどのブラウザで表示させてみてくださいね。
例１
<html>
<head><title>はじめてのホームページ作成</title></head>
<body><p>きゃー私にもできる！！</p></body>
</html>
|
↓↓↓↓
firstHp.html ← こんな風になりますよね。(別ウィンドウが開きます)
- <html>～</html>
HTMLファイルはここからここまでですよという指示。
- <head>～</head>
HTMLの表示される以外の情報(文書に関する情報)はここからここまでですよという指示。
その中にはタイトルなどの情報が入ります。
(タイトルはお気に入りに保存する場合に表示されます。)
- <body>～</body>
ブラウザで表示する文字、画像等はここからここまでですよという指示。
- <p>～</p>
この範囲はひとつの段落ですよという指示。
エクセルなどのソフトとは違い、文字を表示させるだけでも少し技術がいるんですね(∵)
例２ 表になっているものもできます。
<html>
<head><title>はじめてのホームページ作成</title></head>
<body>
<p>きゃー私にもできる！！</p>
<table border=1>
<tr><td>第一歩</td><td>第二歩</td><td>第三歩</td></tr>
<tr><td>HTML</td><td>表</td><td>リンク</td></tr>
</table>
</body>
</html>
|
↓↓↓↓
secondHp.html ← こんな風になります。(別ウィンドウが開きます)
- <table>～</table>
この範囲は表(テーブル)ですよという指示。
- border
枠線の幅を指定します。borderの指定がない場合、あるいはborder=0と指定した場合、枠線は表示されません。
- <tr>～</tr>
この範囲は横一列分のデータですよという指示。
- <td>～</td>
この範囲は1つのセルですよという指示。(エクセルのセルの様なイメージです)
例３ 指定したページへのジャンプもできます。
<html>
<head><title>はじめてのホームページ作成</title></head>
<body>
<a href=firstHp.html>はじめのHTMLファイルへジャンプ</a> ← クリック
</body>
</html>
|
↓↓↓↓
thirdHp.html ← こんな風になります。(別ウィンドウが開きます)
- <a>～</a>
この範囲の文字をクリックすると href=ファイル名 で指定したファイルへジャンプしますよという指示。
ここで thirdHp.html と firstHp.htmlのファイルは同じ階層(同じフォルダー)に入っている場合の設定です。
例４ 画像はこうやって表示できます！
<html>
<head><title>はじめてのホームページ作成</title></head>
<body>
<img src=sakura.gif>
</body>
</html>
|
↓↓↓↓
fourthHp.html ← こんな風になります。(別ウィンドウが開きます)
- <img>
imgのあとにsrc=画像ファイル名 とすると画像が表示されます。
ここで fourthHp.html と画像ファイル sakura.gif は同じ階層(同じフォルダー)に入っている場合の設定です。
参考サイトに とほほのＷＷＷ入門 などがあります！(HTMLリファレンスの章)
画面上へ
|
