Form là thành phần giao tiếp cơ bản giữa người duyệt Web với người tạo Web. Dữ liệu được nhập vào Form thông qua các hộp điều khiển.
Cú pháp: <FORM>…</FORM>
• Tạo Textbox
o Cú pháp: <input type = “text” name=” name” value = “value” size = n maxlength = n>
o Trong đó: “name” là chuỗi kí tự nhận diễn dữ liệu nhập vào, “value” là dữ liệu đầu tiên hiển thị trong Textbox và được gửi đến máy chủ khi người duyệt không gõ thông tin gì, size định kích thước của Textbox, maxlength giới hạn số kí tự nhập vào Textbox
o Cú pháp: <textarea name = “name” rows = “n”, cols = “m” wrap><textarea>
o Trong đó “name” là chuỗi kí tự nhận diện dữ liệu nhập vào, n là chiều cao của vùng văn bản tính bằng dòng (mặc định = 4), m là chiều rộng của vùng văn bản tính bằng kí tự (mặc định = 40).
• Tạo nút Radio button: Radio là nút chì được họn một trong số đó, không thể chọn lựa hai nút cùng lúc
o Cú pháp <input type = “radio name = “name” value = “data” checked>
• Tạo ô chọn (checkbox): khác với Radio, checkbox cho phép chọn nhiều nút trong một nhóm.
o Cú pháp <input type = “checkbox” name = “set” value = “value” checked>
• Tạo nút Push button (nút nhấn)
o Cú pháp<input type = “button” value = “nhãn”>
o Để tạo nút nhấn khi người dùng nhấn vào, dữ liệu của các điều khiển khác đều được đặt giá trị mặc định lúc khởi tạo, có thể chỉ định thuộc tính type =”reset” trong tag <input>. Tạo nút nhấn đề kết thục việc nhập dữ liệu của một Form, ta chỉ định thuộc tính type = “submit” trong thẻ <input>
• Tạo Dropdown Listbox: là danh sách chứa nhiều mục
Chương III Cascading style sheets 2.1 Căn bản về CSS (Cascading style sheets)
CSS là một chuẩn để định dạng các trang Web. CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML.Với CSS, các nhà lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ.
Ví dụ:
<html>
<span style=”cursor:hand;”> Chuyển con trỏ thành bàn tay </span>
</html>
2.2 Cú pháp CSS
Cú pháp của CSS được tạo nên bởi 3 thành phần: - Phần tử chọn (thường là một thẻ HTML) (Selector) - Thuộc tính (Property)
- Giá trị (Value)
Cú pháp của CSS được thể hiện như sau: Selector { Thuộc tính 1: giá trị; Thuộc tính 2: giá trị; …… Thuộc tính n: giá trị; }
Selector thường là các thẻ HTML mà bạn muốn định nghĩa thêm. Property là thuộc tính mà bạn muốn thay đổi; mỗi một thuộc tính cần phải có một giá trị. Một thuộc tính và giá trị của nó được phân cách nhau bởi dấu hai chấm (:). Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu chấm phảy (;). Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML được đặt trong cặp dấu ngoặc nhọn ({}).
2.2.1 Phần tử chọn – Seclector
a. Dùng các phần tử HTML làm phần tử chọn: là cách tuyệt vời để áp dụng CSS nếu muốn tất cả các phần tử thuộc một kiểu nào đó xuất hiện với cùng một định dạng. Cách làm này là cứng nhắc nhất trong 3 cách nhưng nó là cách tốt nhất để đảm bảo tính nhất quán của việc định dạng suốt tài liệu. Một trong những cách dùng HTML làm phần từ chọn thường đuợc dùng là định dang các siêu liên kết trong tài liệu.
<STYLE TYPE=”text/css”> <!--
A {text-decoration:none;} -->
Ví dụ
body{color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/ hay:
p {text-align: center} /*tất cả các thẻ <P> trong trang HTML sẽ được canh giữa.*/ hay định nghĩa nhiều thuộc tính:
p { text-align: center; color: red; font-family: arial }
Style sheet giới thiệu một số tùy chọn để các nhà thiết kế có thêm quyền điều khiển style cho các phần tử
a. Dùng CLASS làm phần tử chọn
Bằng việc tạo ra các lớp, có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web. Có 2 cách thức dùng CLASS:
Các CLASS gắn với 1 thẻ cụ thể
Ví dụ: Trên trang web có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như sau:
p.trai {text-align: left} p.phai {text-align: right} p.giua {text-align: center}
Tiếp theo, trong trang HTML sử dụng như sau:
<p class="trai">Đoạn văn này được canh lề trái.</p> <p class="phai">Đoạn văn này được canh lề phải.</p> <p class="giua">Đoạn văn này được canh lề giữa.</p>
Chú ý:
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết cần phải cẩn thận trong việc sử dụng chữ hoa, chữ thường.
- Trong trang HTML, chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được.
Ví dụ về sử dụng lớp sai:
<p class="trai" class="phai">Đây là đoạn định nghĩa sai</p>
Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là không sử dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt động:
<td class="trai">Ví dụ này không hoạt động</td>
Các CLASS không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ):
cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)
Ví dụ:
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào .giua{text-align="center"}
và trong trang HTML ta sử dụng như sau:
<p class="giua">Đoạn văn này được canh lề giữa.</p> <td class="giua">Câu này cũng được canh lề giữa.</p>
b. Dùng ID làm phần tử chọn
Tương tự như các lớp, các định danh cũng cho phép chia các thẻ thành nhiều loại khác nhau. Tuy nhiên trên thực tế thì Định danh khác với lớp!!! Một lớp có thể áp dụng nhiều lần ở nhiều vị trí trên trang web, tuy nhiên 1 định danh chỉ có thể áp dụng được duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên 1 trang web. Qui tắc cho Style dùng ID làm phần tử chọn bắt đầu bằng dấu thăng (#)
Các ví dụ:
1. Đoạn mã dưới đây có thể áp dụng cho thẻ <P> có ID là para1 p#para1
{
text-align: center; color: red
}
Khi sử dụng như sau:
<P id="para1">Đoạn văn bản</p>
2. Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz: *#xyz {color: green}
Khi sử dụng:
<p id="xyz">Đoạn văn bản</P>
3. Đoạn mã dưới đây chỉ có thể áp dụng cho thẻ <P> đầu tiên: p#wer345 {color: green}
Khi sử dụng:
<p id="wer345">Đoạn văn bản</p> Và đoạn dưới đây không có hiệu lực:
c. Các phần tử chọn theo ngữ cảnh
Nếu chúng ta muốn tìm kiếm ví dụ về mỗi quan hệ cha-con giữa một đoạn paragraph cùng với phần tử em bên trong paragraph, chúng ta xem các phần tử chọn con làm việc như thế nào. Trong ví dụ này, phần tử em và nội dụng của nó thừa kế các chức năng luật từ cha nó – phần tử p
Nếu chúng ta muốn gán luật kiểu khác cho phần tử con, chúng ta có thể sử dụng cú pháp cung cấp bởi phần từ con. Đặt phần tử cha trước, sau đó là phần tử con, cùng với khoảng trống giữa 2 phần tử:
p em
Sau đó, có thể viết bất kì thứ gì trong khối miêu tả sẽ được áp dụng đối với các phần tử con.
d. Các phần tử chọn CLASS giả (Pseudo Class Selectors)
Được sử dụng đối với các kiểu liên kết, ngoài ra còn được sử dụng cho các mục đích khác như bổ sung hiệu ứng cho các thẻ. Sức mạnh của loại phần tử này sẽ được phát huy đối với các liên kết đó là sự kết hợp của các phần tử với phần tử lớp để tạo ra các kiểu đa liên kết mà có thể áp dụng cho một trang.
Phần tử lớp giả lập liên kết bắt đầu bằng mấu neo (anchor), tiếp theo là dấu “:”, cuối cùng là tên lớp giả lập. Một số phần tử lựa chọn lớp giả lập liên kết qui ước như sau:
a:link a:visited a:hover a:active
Có thể viết các luật cho mỗi phần tử chọn lớp và chúng có thể ứng dụng đến toàn bộ các liên kết
Chúng ta có thể kết hợp các phần tử chọn trong một lớp, lớp này cho phép tạo ra kiểu đa liên kết. Để thực hiện điều này, chúng ta bắt đầu bằng anchor, tiếp theo là dấu “.”, sau đó là tên lớp, dấu “:”, và lớp giả lập. Ví dụ
a.main:link a.subnav:link a.footer:link
Trong ví dụ này, các liên kết trong các lớp của main, subnav, và footer có thẻ có các qui tắc luật khác nhau tạo cho chúng
e. Các phần tử chọn phần tử giả lập (Pseudo Element Selectors)
Các phần tử chọn giả lập trong CSS2
Phần tử chọn Mục đích
:first-line Để lựa chọn và áp dụng tới dòng đầu tiển trong phần tử đã định sẵn
:first-letter Để lựa chọn và áp dụng kiểu đến kí tự đầu tiên trong phần tử
:before Cho phép xác định nội dụng trong tờ kiểu dáng được chèn phía trước phần tử định sẵn
:after Cho phép xác định nội dung trong tờ kiểu dáng được chèn sau phần tử định sẵn
Để áp dụng kiểu khác nhau đến dòng đầu tiên trong paragraph, sử dụng cú pháp phần tử giả lập:
p:first-line
Nếu muốn bổ sung nội dung sau hoặc trược một phần tử, cần phải định nghĩ nội dung trong tờ kiểu dáng.
Để sinh ra nội dung sử dụng phần lựa lựa chọn giả lập trước và sau, chúng ta định nghĩa phần tử đến luật sẽ được áp dụng, phần tử giả lập trứoc, sau, thuộc tính nội dung, và nội dung trong dấu nháy kép
h1:after {
content: "header note" }
Kết quả: Câu “hearder note” xuất hiện sau h1
f. Nhóm các phần tử lựa chọn - Selector Groups
Nhóm phần tử lựa chọn cho phép người dùng nhóm các phần tử lựa chọn với nhau khi muốn gán các phần tử lựa chọn này những thuộc tính giống nhau. . Ví dụ dưới đây sẽ nhóm tất cả các thẻ Header lại, định nghĩa chúng sẽ có màu xanh, và sử dụng font arial hoặc sans-serif:
h1, h2, h3 {font-family: Arial, sans-serif; color: green }
2.2.2 Các phần tử lựa chọn lớp giả động
Cho phép bổ sung phần tử lựa chọn giả thông minh đối với bất kì thẻ nào hơn là các liên kết. Bảng dưới đây sẽ chỉ ra 3 phần tử lớp giả lập động và chức năng của chúng
Phần tử chọn Mục đích
Phần tử chọn Mục đích
:active Áp dụng kiểu khi một phân tử được nhấp chuột
:focus Áp dụng kiểu khi một phần tử có focus bàn phím (khi con trỏ được đặt trong hộp text box của form)
Các phần tử lựa chọn con
Các phần tử ngữ cảnh cho phép tạo mẫu phần tử con tách biệt với phần tử cha. Phần tử này áp dụng khi cần lồng ghép các phần tử. Ví dụ, chúng ta có nhiều phần tử em trong phần tử division, div và paragraph trong division này có thể có các phần tử strong.
Ví dụ: nếu viết phần lựa ngữ cảnh sau: div strong
tất cả các phần tử strong trong div – thậm trí trong các phần tử paragraph (cháu)-sẽ bị ảnh hưởng bởi tính thừa kế
Các phần tử con chỉ cho phép lựa chọn con. Điều này có nghĩa là, chúng ta có thể được đảm bảo rằng chỉ có các phần tử em bên trong div,chứ không phải trong các cấu trúc khác lồng bên trong div sẽ bị ảnh hưởng. Để làm được điều này, chúng ta bắt đầu bằng việc sử dụng phần tử, ở bên phải dấu > và phần tử con trong vấn đề:
div>em
Chúng ta có thể nhận thấy sự phúc tạp. Nếu chúng ta muốn lựa chon phần tử em trong phần tử paragraph bên trong phần tử div, thì viết như sau:
div>p>em
Tất cả phần tử con trong phần tử paragraph, không được nằm bên ngoài, sẽ đuwocj định dạng trong quí tắc kế tiếp theo
Các phần tử con First
Một phần tử con first cho phép …. Kiểu phần tử lựa chọn này chỉ áp dụng đốiv ứoi con đầu tiên của phần tử định sẵn. Để áp dụng kiểu này đến con đầu tiển, cung cấp phần tử cha cộng với cú pháp phần tử lựa chọn con đầu tiên
p:first-child
Bất kì qui tắc nào chúng ta viết cho phần từ lựa chọn này sẽ được áp dụng đến phần tử con đầu tiển của tất cả paragraph
Phần tử lụa chọn kề cận
Phần tử này trợ giúp định dạng các phần từ cùng một cha. Các phần tử cùng một cha là các phần tử nằm trong cùng một mức của cây tà liệu và chia sẽ một cha chung. Ví dụ
to be the quintessential escapist experience. A good mystery and a <a href="http://www.adagioteas.com/">cup of tea</a> on a rainy day is true relaxation.</p>
Phần tử lựa chọn thuộc tính
Kiểu phần tử lựa chọn thuốc cho phép lựa chọn các phần tự dựa vò thuộc tính mà các phần tử có. Ví dụ, nếu chúng ta có một liên kết trong URL, có thể tạo bởi phần tử này thay vì phần tử anchor của chính no. Mội thực thể của URL được định dạng theo qui tắc kết hợp với phần tử lựa chọn thuộc tính
Có bốn kiểu dáng có sẵn cho phần tử như miểu tả ở bảng dưới đây
Các mức điều khiển có thể dành được bởi kiểu phần tử lựa chọn này ít gây ngạc nhiên. Table 2.3: Attribute Matching
Cú pháp Mục đích
[att] Áp dụng kiểu đốiv ứoi thuộc tính đưa ra, không quan tâm tới giá trị
[att=val] Áp dụng kểu đối với thuộc tính đưa xa trong giá trị xác định
[att~=val] Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu cách
[att|=val] Áp dụng kiểu đến bất kì thuộc này nào trong giá trị phần cách bởi dấu |
2.2.3 Thuộc tính, miêu tả, qui tắc
Các thuộc tính trong CSS thuộc ba danh mục:
• Visual bất kì thuộc tính nào ảnh hưởng đến sự biểu diển trực quan của tài liệu như font, nền và màu
• Aural Các thuộc tính liên quan tới kiểu tai, như chức năng âm thanh.
• Paged Các thuộc tính liên quan đến trang media như in và màn hình Ví dụ:
font-family: Arial, sans-serif color: blue
Các thuộc tính tốc kí
Các thuộc tính này còn có tên khác là nhóm là cách thức viết tắt các quy tắc kiểu. Cso một vài thuộc tính tốc kí khi so sánh với các thuộc tính đầy đủ. Thuộc tính rút gọn, thuộc tính có thể thay thế nhau và nhóm media thuộc vào được miêu tả như sau
Tốc kí Các thuộc tính Nhóm media background background-attachment background-color background-image background-position background-repeat visual border border-color border-style border-width visual border-bottom border-bottom-color border-bottom-style border-bottom-width visual border-left border-left-color border-left-style border-left-width visual border-right border-right-color border-right-style border-right-width visual border-top border-top-color border-top-style border-top-width visual cue cue-before cue-after aural font font-family font-size font-style font-weight font-variant line-height visual
Tốc kí Các thuộc tính Nhóm media list-style list-style-image list-style-position list-style-type visual margin margin-top margin-right margin-bottom margin-left visual outline outline-color outline-style outline-width visual, interactive padding padding-top padding-right padding-bottom padding-left visual pause pause-after pause-before aural
Chúng ta đã từng viết kiểu tốc kí khi nhóm các phần tử lựa chọn lại ví dụ:
h1 h2 h3
Ví dụ: chúng ta thương miêu tả phần tử paragraph như sau:
p {
font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; font-style: normal; line-height: 15px; color: black; }
Chúng ta có thể lựa chọn sử dụng thuộc tính font, thay thế bằng thuộc tính tốc kí
p {
font: bold normal 16px/15px Arial, sans-serif; }
Mối quan tâm hàng đầu khi nhóm đó là thứ tự của giá trị. Một ví dụ cho điều này đó là khi làm