使用タグの説明No2

画面表示される部分

ここからは、画面表示される部分の使用タグの説明No2です。

画面表示される部分とは、皆さんが今見ているブラウザに表示される使用タグの説明になります。

  • 16.<body style="background-color:#d2b48c"> ⇒ 背景色の指定
  • 17.<div align="center"> ⇒ 中央揃え 50.</div> ⇒ 17の終了タグ
  • 18.<h1>Welcome to Homepage</h1> ⇒ 見出し
  • 19.<p>~</p> ⇒ 前後に1行文のスペースが空き改行
  • <span style="font-size:x-large">~</span> ⇒ 文字の大きさ設定
  • 20.<br> ⇒ 強制改行

21.~27. ⇒ 1つのテーブルを表します。原形は下の形です。<td>~</td>が1つのセルを表し、<tr>~</tr>が行(横一列)を表します。

<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

index.htmlでテーブルを作成

先ほど作成した、index.html使用タグでテーブルを作成してみましょう。ソースを表示してお試しコードNo2をコピーしてみてください。

ソースの表示方法 ⇒ index.htmlアイコンダブルクリック、表示 ⇒ ソース

<body></body>部分にお試しコードNo2を貼り付けます。貼り付け後、上書き保存 ⇒ ブラウザの更新ボタンクリック。

◇ 詳細手順

  1. お試しコードNo2をコピー ⇒ マーク状態でマウス右クリック ⇒ コピー
  2. アイコンをダブルクリック ⇒ 表示(メニューバー左上) ⇒ ソース
  3. <body>~</body>~部分で左クリック ⇒ マウス右クリック ⇒ 貼り付け
  4. ファイル(メニューバー左上) ⇒ 上書き保存
  5. ブラウザ更新ボタンクリック(ブラウザ左上の方にある緑ボタン)

◇ お試しコードNo2

<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>

後の28.~49.は、21.~27.の形を変更して使用しただけです。

思ったより簡単そうではないでしょうか。楽しくなってきたところで、ホームページを完成していきましょう。

HTMLコードNo1をコピーする場合の注意点

お試しコードのindex.htmlを、先に任意のフォルダに移動するか削除してからコピーしてください。使用タグの説明のHTMLには番号が付いています。

コピーはこちら >> HTMLコードNo1


01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html lang="ja">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
05.<meta http-equiv="Content-Style-Type" content="text/css">
06.<title>~</title>
07.<style type="text/css">
08.<!--
09.a:link { color: #0000cd }
10.a:visited { color: #800080 }
11.a:hover { color: #fffacd; background-color: #d2b48c }
12.a:active { color: #ffffff }
13.-->
14.</style>
15.</head>
16.<body style="background-color:#d2b48c">
17.<div align="center">
18.<h1>Welcome to Homepage</h1>
19.<p>ソースの表示方法はブラウザ左上 <span style="font-size:x-large">表示 ⇒ ソース</span></p>
20.<br>
21.<table border="1" cellspacing="1" cellpadding="5" width="550">
22.<tr style="background:#deb887" align="center">
23.<td>無料ホームページhp作成</td>
24.<td>★★★★★</td></tr>
25.<tr><td style="background:#f5deb3" height="150" colspan="2">
26.内容変更は全てソースから変更します。<br>
解説は https://www.syousai.com/txt/foundations.html を参考にして下さい。</td></tr>
27.</table>
28.<br>
29.<table border="1" cellspacing="1" cellpadding="5" width="550">
30.<tr><td>セル1</td><td>セル2</td></tr>
31.<tr><td>セル3</td><td>セル4</td></tr>
32.</table>
33.<br>
34.<table border="0" cellspacing="3" cellpadding="5" width="550">
35.<tr style="background:#deb887" align="center">
36.<td rowspan="2">
37.無料ホームページhp作成</td>
38.<td>★★★★★</td>
39.<td>★★★★</td>
40.<td>★★★</td></tr>
41.<tr style="background:#f5deb3" align="center">
42.<td>☆☆☆</td>
43.<td>☆☆</td>
44.<td>☆</td></tr>
45.<tr>
46.<td style="background:#f5deb3" height="150" colspan="4">
47.無料ホームページhp作成<br>
48.https://www.syousai.com/web.html 【Home】</td></tr>
49.</table>
50.</div>
51.</body>
52.</html>

使用タグの説明No2、画面表示される部分。パソコン付属のテキストエディタを利用した、初心者向け無料ホームページ作成方法の解説。無料hp作成の参考に!

ページTopヘ

Top >> 無料 ホームページ作成

Access Ranking!

  1. 無料 求人 派遣 土日のみ 単発
  2. 無料 海外旅行保険 クレジットカード 傷害
  3. 無料 アンケート
  4. 無料 クレジットカード 審査 甘い
  5. 無料 ホームページ作成 無料hp作成
  6. 無料 クレジットカード 初心者
  7. 無料 オリックスカード 審査
Copyright©2017 www.syousai.com.All rights reserved. XTML, CSS,