JamesPCSchool: HTML5 & CSS3 Part 1

1.HTML5 & CSS 3
a.CSS3 參考網站 (Reference website)
CSS Zen Garden

b. style

不使用 <center>，而改用 <body style="text-align:center"> 或嵌入其他標籤。因為<center>不是容器(container)。

b. style

Use <body style="text-align:center"> in stead of <center> or other tags because <center> is not container.

c. 用 Dreamweamer CS5 練習 "onclick"
c. Use Dreamweamer CS5 practise "onclick"

<p id="p2" style="text-align:center;cursor:pointer;" onclick="alert('你好')"><你 好></p>
<input name="" type="button" value="Click Me" onclick="alert('Hello');" />

d. title
<img src="../../../My Pictures/java2.JPG" width="134" height="183" title="Java2" />

這裡的 title 是在標籤裡面，所以是指滑鼠移到該照片時，滑鼠下方會出現 title 裡定義的文字。
The title here is inside the tag, so when the mouse hovers on the photo, the text defined in the title appears.

2. Meta
用在 <head> 與 </head> 之間，可以有很多個，例如：
Its is used between <head> and </head>,  there can be many, for example:

Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  //設定字元格式
// define charecter format
<meta http-equiv="cache-control" content="no-cache" />
//設定禁用瀏覽器暫存
// Disabel browser cache
<meta http-equiv="Refresh" content="60; url=http://new.htm" />
  //設定60秒後自動轉到 new.htm
//Automatically go to new.htm after 60 seconds
</head>

3. Paragraph and text (段落與文字)
a. 一般換行用<br>
a. use <br> tag to enter line breaks, not to separate paragraphs.

b. 可以使用 <pre> 來讓網頁所呈現的格式，與程式碼中的格式一模一樣。
b. You can use <pre> tag to make the page be rendered in the same format as the code.

Example 1: no <br> tag

<body>
AA
BB
CC
</body>

Result:

Example 2: use <pre> tag

<body>
<pre>
AA
BB
CC
</pre>
</body>

Result:

4. Create List (建立列表)

Example：<ol>、<li>、<ul>
1. 設二個區塊<ol>，各給一個 ID <ol id="ol1"> 以及 <ol id="ol2">
2. 設定<ol id="ol1"> 的特殊CSS格式：打開CSS後選"複合"，然後依喜好設定

<style type="text/css">
#ol1 li {
background-color: #F66;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
</style>
</head>

<body>
<ol id="ol1">
<li>AA
<li>BB
<li>CC
</ol>

<ol id="ol2">
<li>DD
<li>EE
<li>FF
</ol>
</body>
</html>

HTML5 & CSS3 Part 1

No comments: