2012年5月18日金曜日

WEB(月・金)の提出課題(提出方法)
↑終わってない(提出していない)課題のある人は、課題を完成して提出。


●番号名前にリンク　＝　契約スペースが表示できている

●番号名前　URL ?　＝　URLは提出されているが契約スペースが表示されない

●番号名前にリンク無し
＝ 自己紹介の紙が出てないのでURL不明　or　出ているがURL不明等

★　○
黄色の人は　cidgd2@gmail.com　へ
契約している正しいURLを送ってください

<WEB提出状況> test.html ／ sample2 ／契約
WEB提出状況


全て完了している人は、
教科書P.276の「付録A●テーブルの作成とデザイン」をやってみましょう。
簡単なCSSとHTMLの関係性を理解しよう。 
(コレは応用です。提出は必須ではない。)

<<HTMLの基本>>
基本的にHTMLは「」(カギかっこ)のように
"ここから(「 開始タグ)ここまで(」終了タグ)が○○にあたる内容である"
という意味をさす書き方でできています。
 ただし、<img〜>=画像　<br>＝改行　のように閉じかっこ(終了タグ)が無いものもあります。

基本的な構造
---------------------------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>ここに書いてある内容がページのタイトルとなります</TITLE>
</HEAD>
<BODY>
　ここ(<BODY>~</BODY>)に書かれている内容がブラウザに表示されます

 　　<a href="リンク先のURL(htmlファイル名など)">ここにリンクをはる文字などをいれる</a>
 　  <img src="ここに画像のURLを入れる">

  
　</BODY>
</HTML>
---------------------------------------------------------------------------------------------------
「付録A●テーブルの作成とデザイン」 ではテーブルが出てきます。
テーブル
　　　<table>　←表の最初の部分
　　　<tr> ←この部分は行の始まり
　　　<td>　←この部分は列の始まり
　　　ここに文字
　　　</td> ←この部分は列の終わり
　　　</tr> ←この部分は行の終わり
　　　</table>  ←この部分は必ずテーブルの最後に来ます！

上記のテーブルの表示はこのようになります。
ここに文字

<<CSSの基本>>

(例)
<table class="test" >
<tr><th>コンテンツ</th><th>人気度</th><th>コメント</th></tr>
<tr><td>初心者の館</td><td>３５％</td><td>コンスタントな需要</td></tr>
<tr><td>CSSテクニック</td><td>４５％</td><td>CSSプルダウンが話題沸騰</td></tr>
<tr><td>私的デザイン論</td><td>１０％</td><td>最近放置気味</td></tr>
</table>

↑をブラウザで表示すると↓のようになります
コンテンツ人気度コメント
初心者の館３５％コンスタントな需要
CSSテクニック４５％CSSプルダウンが話題沸騰
私的デザイン論１０％最近放置気味

これに↓のようなCSSを適用すると
table.test{
border:1px solid #663300; background-color:#ffffff;
} 
.test th{
    border:1px solid #663300;
    background-color:#996633;
    text-align:center;
}  
.test td{
    border:1px solid #663300;
}

このように↓ブラウザで表示されます


・border　＝輪郭の線　(solid ＝実線)
・background-color　＝背景色
・text-align:center;　＝文字の中央揃え

CSSはheadの終了タグの直前に入れます。

---------------------------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>ここに書いてある内容がページのタイトルとなります</TITLE>
 
<style type="text/css">
<!--CSSの内容(上のピンクの四角の中の内容)-->
</style>

</HEAD>
<BODY>
　<table class="test" >
<tr><th>コンテンツ</th><th>人気度</th><th>コメント</th></tr>
<tr><td>初心者の館</td><td>３５％</td><td>コンスタントな需要</td></tr>
<tr><td>CSSテクニック</td><td>４５％</td><td>CSSプルダウンが話題沸騰</td></tr>
<tr><td>私的デザイン論</td><td>１０％</td><td>最近放置気味</td></tr>
</table>
</BODY>
</HTML>
---------------------------------------------------------------------------------------------------