[Lab] Codecademy HTML Basics II 教學筆記

接續上一篇

繼續來打怪囉～

---- Build Your Own Webpage ----

1 / 6
恩目前code都是上一次的範圍

繼續 ~
2 / 6
這關是簡單的蓋房子

3 / 6
在body內寫h1大小的標題

4 / 6

5 / 6

6 / 6

--- HTML Basics II ---

1 / 16
Introduction

2 / 16
Indentation is your friend

3 / 16
Ordered lists
有順序的列表list <li> 語法
<ol>
     <li> ... </li>
     <li> ... </li>
     ...
</ol>

4 / 16
One more ordered list

5 / 16
Unordered lists
沒順序(不排序)的列表清單list
語法
<ul>
     <li> ... </li>
     <li> ... </li>
     ...
</ul>

6 / 16
Lists inside a list

7 / 16
Making comments

註解的語法

<!-- 註解內容  -->

8 / 16
Font size
tags 裡面可以寫 attributes 像是<img> 裡面的src，或是 <a> 裡面的 href
設定字體大小用 style 這個關鍵字 attribute，px為一種單位
用在<p>裡面的話長這樣 <p style = "font-size: 12px">

9 / 16
Font color
設定字體顏色 style="color: 想要的顏色"
例：<h2 style="color:red">
同時設定顏色與大小
例：<h2 style="color: green; font-size:12px">

10 / 16
Font family
設定字形，使用 style="font-family:想要的字形"
例：<h1 style="font-family: Arial">Title</h1>
例：<li style="font-family: Arial">Hello!</li>
查閱字形：http://www.w3.org/TR/CSS21/fonts.html#font-family-prop

11 / 16
Recap
設定字體大小，顏色，字形
例：<p style = "font-size:14px; color: orange; font-family: Bodoni">

12 / 16
Background color
設定背景顏色，使用 style="background-color: 想要的顏色"
例：<p style="background-color: red;">Hello!</p>

13 / 16
Aligning the text
對齊文字！ 置左使用 style="text-align:left"
另有置中center，置右right
例：<h1 style="text-align:center">

14 / 16
Strong words!
加粗文字讓它變bold，使用<strong></strong> 包夾它即可做到

15 / 16
Emphasize words!
強調文字讓它變斜體italicize，使用<em></em>包夾它即可！

16 / 16
Summary

1. 目前為止練習的內容範圍：
2. Make ordered and unordered lists
3. Change the color, size and type of font
4. Add comments to our HTML file
5. Change the page's background color
6. Align text
7. Bold and italicize text