*HTML実践応用*
HTMLを使いこなす
これまでの４日間で、HTMLの基礎は大体ご理解いただけたかと思います。
しかし、まだまだ
「身についた」というレベルではないはずです。
そこで今日は基礎固めのために、作り残してある「日記のページ」を作ってみます！
↑この例はあくまでも例です。
HTMLの基礎がわかっているみなさんなら、もっとバラエティに富んだデザインができるはずです(^-^)
ですから、ご自分の好きなように作っていただいてかまいません！
（ただしここでは、サンプルページの作り方を解説していきます。）
- (1)必要な画像を用意します。
- ・「diary」タイトルロゴ
・晴れマーク、雨マーク、雲マーク、雪マーク
・ライン用細長画像
- (2)テキストエディタを起動し、基本骨格を書きます。
- (3)<BODY>の中身を書いていきます。
-
- <CENTER>と<IMG src="">で、タイトルロゴを配置。
- <TABLE>で日記１日分の骨格を作る。
【重要ポイント】
・<TABLE width=400>・・・表の横幅を「400」pxに固定
・<TD colspan=2>・・・横隣のセル「2」個をつなげる
- セル内に必要事項を書いていきます。
・日付（200x/xx/xx）※文字の色「#3CB371」
・天気マーク
・日記
- 中身が埋まった<TABLE>の下に、ライン用画像を配置。
縦幅が小さすぎる場合は、<BR>で補う。
- 「diary.html」として保存し、ブラウザで確認。
- あとは、日記を追加するたびにコピー&ペーストし、中身だけ書き換えればＯＫ。
サンプルページのソースも載せておきますので、自分のと見比べてみてください(^-^)
Copyright (C) 7tag project dv
日記サンプルページへGO!!