[Lab] Codecademy HTML Basics III 教學筆記
首先來複習一下
1 / 7
2 / 7
3 / 7
4 / 7
5 / 7
6 / 7
7 / 7
--- HTML Basics III ---
1 / 15
Introduction
2 / 15
What are tables?
加入table的語法:
<table> </table>
3 / 15
Rows of information
We use the
<table> </table>裡面加入table row語法: <tr> </tr>
4 / 15
A single column
在table row裡面增加 table data 會產生出table column
語法 : <td> data </td>
5 / 15
Adding a second column
6 / 15
Head of the table
"To make our table look a little more like a table, we'll use the
table body語法: <tbody> </tbody>
7 / 15
Table Heads
table head 語法 <thead> </thead>
" a
<thead> </thead>裡面裝 <tr> <th> </th> </tr>
比較:
table head 內用 <th> </th>
<thead>
<tr>
<th> ... ... </th>
<th> ... ... </th>
</tr>
</thead>
table body 內用 <td> </td>
<tbody>
<tr>
<td> ... ... </td>
<td> ... ... </td>
</tr>
</tbody>
8 / 15
Naming your table
在<th>中使用colspan attribute 預設為"1"，要更改就要寫:
<th colspan="3">3 columns across!</th>
這樣就可以使得column span變成擴大到3個欄位這麼長!
9 / 15
Style that head!
If you want to add more than one style, you just separate your styles with a semicolon, EX:
<th style="font-size:12px; color:red"></th>
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2"; style="color:red">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
10 / 15
Recap
11 / 15
'Div'ide and conquer
使用<div></div>，div 意即 division，allow divide your page to containers 可將頁面分成很多的區塊
可利用width 與 height 屬性來設定寬、高，利用background-color屬性來設定背景顏色
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow">
</body>
</html>
12 / 15
Link it!
把<div></div>區塊變成超連結!! 想當然就用<a></a>包圍它囉
13 / 15
Spantastic
<span> </span> 區段可對於細部小範圍作調整
像是把字改成紅色用 <span style="color:red"> 紅色的字 </span>
14 / 15
Span is the man
除了改顏色之外，當然還可以改字型，改字體大小等
15 / 15
Recap
1 / 7
3 / 7
--- HTML Basics III ---
1 / 15
Introduction
調整字型 <style="font-family : Arial ">
加入圖片 <img src="...">
What are tables?
加入table的語法:
<table> </table>
Rows of information
We use the
<tr> tag to create a table row.<table> </table>裡面加入table row語法: <tr> </tr>
A single column
在table row裡面增加 table data 會產生出table column
語法 : <td> data </td>
Adding a second column
Head of the table
"To make our table look a little more like a table, we'll use the
<thead> and<tbody> tags. These go within the <table> tag and stand fortable head and table body, respectively." - from Codecademytable body語法: <tbody> </tbody>
Table Heads
table head 語法 <thead> </thead>
" a
<th></th> cell for the Name column heading. Notice that we use <th></th> for the table heading cells instead of<td></td>."<thead> </thead>裡面裝 <tr> <th> </th> </tr>
比較:
table head 內用 <th> </th>
<thead>
<tr>
<th> ... ... </th>
<th> ... ... </th>
</tr>
</thead>
table body 內用 <td> </td>
<tbody>
<tr>
<td> ... ... </td>
<td> ... ... </td>
</tr>
</tbody>
Naming your table
在<th>中使用colspan attribute 預設為"1"，要更改就要寫:
<th colspan="3">3 columns across!</th>
這樣就可以使得column span變成擴大到3個欄位這麼長!
Style that head!
If you want to add more than one style, you just separate your styles with a semicolon, EX:
<th style="font-size:12px; color:red"></th>
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2"; style="color:red">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
10 / 15
Recap
What can you do now?
- Write an HTML comment
- Create a list (ordered and unordered)
- Make text stand out using
<em>and<strong> - Change the color, size, and alignment of text using the
styleattribute - Create HTML tables
'Div'ide and conquer
使用<div></div>，div 意即 division，allow divide your page to containers 可將頁面分成很多的區塊
可利用width 與 height 屬性來設定寬、高，利用background-color屬性來設定背景顏色
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px; height:50px; background-color:yellow">
</body>
</html>
12 / 15
Link it!
把<div></div>區塊變成超連結!! 想當然就用<a></a>包圍它囉
Spantastic
<span> </span> 區段可對於細部小範圍作調整
<span>allows you to control styling for smaller parts of your page, such as text像是把字改成紅色用 <span style="color:red"> 紅色的字 </span>
Span is the man
除了改顏色之外，當然還可以改字型，改字體大小等
Recap
In addition to what you've already learned, you now know how to:
- Divide up your webpage for easy styling with
<div>tags - Select pieces of text and change their properties using
<span>tags
留言
張貼留言