ボディ部分の構造

（問　1/17）
ページの本体の仕組み



本体はヘッダーと本体とフッターでできています。

ページはヘッダーと本体とフッターと3つの部分に分けて作ることが多いのです。
図のようになっています。
ボディに中に、３つに分けて書くのです。

ヘッダーには、ロゴやリンクを書きます。
フッターには連絡先などを書きます。
例えばアメリカ合衆国のネットメディア、ハフポストのページを見てみましょう。
画像がうまく使ってあって、タイトルが簡潔で、見ようかなって感じがするページ。
これで売ってるんだから当たり前かもしれないけど、良くできている。
ネットに興味のある人に文章を書かせるアルバイトがあり、そこからも採用があるみたいです。
そういう採用のある時代なんですね。
ハフポストへの外部リンク

ヘッダーと本体とフッターを書こう

これまでに、HTMLが書けているものとします。
ここを開いて、右クリック、ソースを表示して、コピーして、エディタにはりつけ、index.htmlとなまえをつけて保存して下さい。
保存場所は、ディスクトップに「main」 というフォルダを作ってその中に保存しましょう。
これまでに作ったもの：コピー用
そして、<body>と<body>の間に
  <header>
   </header>
   <footer>
   </footer>
と書き込みましょう。
　　　　　　<body>
ヘッダー <header></headre>
本体
フッター <footer> </footer>
　　　　　　</body>

これがボディ部分の基本ですが、これでは何もおきません 。

見出しとCSSへのリンク

次の準備です。
本体部分に、見出しとして
<h1>赤いトマト</h1>
と書きます。
これを
index.html名で上書き保存して次に進みましょう。

これがHTML

  <!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="，で切って、キーワードを並べる">
<meta name="description" content="ページの内容を短く書く">
<title>赤いトマト</title>
</head>
<body>
    <header>
    </header> 
    <h1>赤いトマト</h1>
    <footer>
    </footer>
</body>
</html>

CSSはまだ何もありませんん、

次の問題へ進む