Thuộc tính color và Background

2. Các thẻ HTML

2.5.2.8 Thuộc tính color và Background

Gồm các thuộc tính sau: • Corlor • Background • Background-attachment • Background-color • Background-image • Background-position • Background-repeat Cú pháp : corlor : <giá trị>

Chức năng Quy định màu cho các phần tử được áp dụng

Các giá trị có thể : Các mầu theo bảng mầu

Áp dụng với : tất cả các phần tử

Ví dụ : P { color : red } H1 { color : #ffffff }

Cú pháp : Background : <giá trị>

Chức năng Quy định nền của các phần tử như body, bảng, …được áp dụng

Các giá trị có thể :<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>

- <background-color>: màu nền - <background-image>: ảnh nền

- <background-repeat>: quy định chế độ lặp lại ảnh

- <background-attachment>: quy định chế độ hiển thị ảnh nền khi cuộn chuột

Áp dụng với : Tất cả các phần tử

Ví dụ : body {background: #ffffff url(“/ANH/banner.gif”) ; margin: 0} TABLE { background: red url(“/ANH/Left-Corner.gif”) no-repeat bottom } 2.5.2.9 Các thuộc tính về font  Font  Font-family  Font-size  Font-style  Font-variant  Font-weight

Cú pháp font : <giá trị>

Chức năng Thiết lập các thuộc tính cho font chữ như tên font, kích thước font,….

 1 Số Font thông dụng (cài sẵn trong Windows nên ko bị lỗi font) : Arial, tahoma, verdana, Times new roman.

Áp dụng với : Tất cả các phần tử

Ví dụ : P { font : tahoma, 12pt, normal, bold }

Cú pháp font-family : <tên font>

Chức năng Thiết lập danh sách font cho khối chọn hoặc trang Web, nên chọn các font thông dụng được cài đặt sẵn như Arial, Veranda, Tahoma, Times new roman

Các giá trị có thể <tên font>

Áp dụng với Tất cả các phần tử

Ví dụ Table, tr, td { font-family : arial, tahoma, verdana ; font-size : 13}

Cú pháp : font-size : <kíck cỡ tuyệt đối> | <kíck cỡ tương đối> | <độ dài> | <tỉ lệ phần trăm>

Chức năng Thay đổi kích thước font, nên sử dụng kiểu định dạng px,

Các giá trị có thể : - < kíck cỡ tuyệt đối >

smaller | larger - < độ dài>

- < tỉ lệ phần trăm>

Áp dụng với : tất cả các phần tử

Ví dụ : H1 { font-size: large } P { font-size: 12pt }

LI { font-size: 90% }

STRONG { font-size: larger}

Cú pháp : font-style : <giá trị> Chức năng Thiết lập kiểu font Các giá trị có thể : normal | ilatic | oblique Áp dụng với : tất cả các phần tử Ví dụ : P { font-style : italic }

H1 { font-style : normal }

Cú pháp font-variant : <giá trị>

Chức năng Thiết lập các biến thể của font

hoa, ta hãy thử so sánh : SMALL-CAPS--SMALL-CAPS

Các giá trị có thể normal | SMALL-CAPS

Áp dụng với Tất cả các phần tử

Ví dụ Span { font-variant : small-caps ; font-size : 12pt}

Cú pháp font-weight : <giá trị>

Chức năng Thiết lập độ nét của chữ

Các giá trị có thể normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |

700 | 800 | 900 Áp dụng với tất cả các phần tử

Ví dụ p { font-weight : bold }

H1 { font-weight : normal }

 Chú ý không cần để ý đến giá trị : 100,200..900 làm gì, thường thì nó thể hiện việc đậm nhạt hơn của chữ !

2.5.2.10 Các thuộc tính Text  Letter-spacing  Letter-spacing  Line-height  Text-align  Text-decoration  Vertical-align  Word-spacing Cú pháp letter-spacing : <giá trị>

Chức năng  letter-spacing xác định khoảng cách giữa các kí tự được thể hiện

Các giá trị có thể normal | <độ dài>

Áp dụng với Tất cả các phần tử

Ví dụ k h o ả n g c á c h n à y l à 4 p x

p {letter-spacing : 1px}: Khoảng cách giữa các kí tự của đoạn là 1px

Cú pháp Line-height : <giá trị>

Chức năng Quy định chiều cao vùng chứa đoạn văn bản

Các giá trị có thể normal | <number> | <tỉ lệ phần trăm> | <độ dài>

Áp dụng với Tất cả các phần tử

Ví dụ . vd {line-height:20px }

Cú pháp Text-align : <giá trị>

Chức năng Cho phép canh lề đoạn văn bản (tương tự thẻ DIV)

Các giá trị có thể : left | right | center | justify - left: Canh trái - Right: Canh phải - Center: Canh giữa

- Justify: Canh đều

Áp dụng với : Tất cả các phần tử

Ví dụ : .vd { text-align: center }

Cú pháp : text-decoration : <giá trị>

Chức năng Thiết lập các hiệu ứng lên văn bản

Các giá trị có thể : none | underline | overline | line-through | blink - None: Không

- Underline: chữ gạch dưới - Overline: chữ cao hơn dòng - Line through: gạch xuyên chữ - Blink: Chữ nhấp nháy

Áp dụng với : Tất cả các phần tử

Ví dụ : a {corlor: #ffffff ; text-decoration: none }

a :visited {corlor: red ; text-decoration: underline }

Cú pháp : vertical-align : <giá trị>

Chức năng: Canh văn bản theo chiều dọc

Áp dụng với : Tất cả các phần tử

Ví dụ : .vd { vertical-align: super }

Cú pháp word-spacing : <giá trị>

Chức năng Xác định khoảng cách giữa các từ

Các giá trị có thể Normal | <độ dài>

Áp dụng với Tất cả các phần tử

Ví dụ p {word-spacing : 12px}

<P class= “p”> Chào các bạn </P> //khoảng cách giữa các từ này là 12px

2.5.3 Tạo file CSS với công cụ Rapid CSS 2008 (HS nghiên cứu)Ví dụ: Xem ví dụ finish_css Ví dụ: Xem ví dụ finish_css

Mã nguồn:

finish_css.html

</head> <body>

collapse: collapse" bordercolor="#FF915D"> <tr> <td colspan="2" class="banner"></td> </tr> <tr> <td width="145" valign="top">

<td class="MenuHeader">Danh mục địa phương</td> </tr> <tr> <td class="SubMenu">Thành Phố Huế</td> </tr> <tr> <td class="SubMenu">Hương Thủy</td> </tr> <tr> <td class="SubMenu">Phú Vang</td> </tr> <tr> <td class="SubMenu">Phú Mậu</td> </tr> <tr> <td class="SubMenu">Hương Sơ</td> </tr> <tr> <td class="SubMenu">Bình Điền</td> </tr> <tr> <td class="SubMenu">Hương Văn</td> </tr> <tr> <td class="SubMenu">Kim Long</td> </tr> <tr> <td class="SubMenu">Hương Vinh</td> </tr> </table> </td>

<td valign="top" class="noidungtin> Đây là Website giới thiệu một số địa phương trên địa bàn tỉnh thừa thiên huế.<p>Tỉnh thừa thiên huế bao gồm một số các địa phương sau:</p>

<ol>

<li>Hương Thủy</li> <li>Phú Vang</li> <li>Phú Mậu</li> <li>Hương Sơ</li> <li>Bình Điền</li> <li>Hương Văn</li> <li>Kim Long</li> <li>Hương Vinh</li> </ol> </td> </tr> <tr> <td colspan="2" class="footer"></td> </tr> </table> </body> </html>

Tạo file skin.css lưu vào thư mục Skin với mã nguồn như sau: /*mau nen cho toan trang*/

/*trang hien dai*/ body { /*background:#cccccc; background-image:url(../images/skins/hiendai/bg.gif);*/ text-align:center; margin-bottom:5px; margin-left:5px; margin-right:5px; margin-top:5px; /*---chữ nó có gạch để thế---*/ SCROLLBAR-FACE-COLOR: #dedfde; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: #dedfde; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: black; SCROLLBAR-TRACK-COLOR: #dedfde; SCROLLBAR-DARKSHADOW-COLOR: #424142; } td {

font-family:Arial,Times New Roman, Tahoma; font-size:10pt;

} a {

text-decoration:none; color:#000000; } a:hover { color:#e30000; text-decoration:none; } .a:Visited { color:#000000; } .Banner { height:100px; background-image:url(../images/banner.jpg);*/ }

/*Áp dụng cho nền của submenu trái thông thường */ .SubMenu {

/*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px;

FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #000000;

PADDING-TOP: 2px;

BACKGROUND-COLOR: #ffffff; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: none;

height:20px; }

/*Áp dụng cho nền của submenu trái khi chọn */ .SubMenuSelect

{

PADDING-LEFT: 20px;

FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #770000;

PADDING-TOP: 2px;

BACKGROUND-COLOR: #D9D9FF; BORDER-BOTTOM: #aaa 1px dashed; /*BORDER-TOP:solid 1px white;*/ FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: underline;

cursor:hand; height:20px;

}

/*Áp dụng cho nền của submenu trái khi di chuyển */ .SubMenuOver

{

/*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px;

FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR:#990000; PADDING-TOP: 2px;

BACKGROUND-COLOR: #FAD570; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma;

TEXT-DECORATION: none; CURSOR: hand; height:20px; /*background-image: url(../Images/menu.gif);*/ } /*---*/ .MenuHeader { FONT-WEIGHT: bold; FONT-SIZE: 10px; text-align:right; padding-right:5px; padding-left:5px; COLOR: blue; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .MenuHeader:hover { FONT-WEIGHT: bold; FONT-SIZE: 10px; padding-right:5px; padding-left:5px; COLOR:#ffff00; cursor:hand; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .Footer {

/*background:red;63,8A,DE */

font-family:Verdana,arial,tahoma,time Times New Roman; font-size:8pt; font-weight:normal; color:#ffffff; text-align:left; padding-left:10px; background-image:url(../images/footer_bg.jpg); height:27px; } .noidungtin { padding-left:5px; padding-bottom:2px; padding-top:2px; padding-right:5px; text-align:justify; } .tinlienket { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#333333; padding-top:2px; padding-bottom:2px; padding-left:5px; padding-right:2px; width:auto; cursor:hand; } .tinlienket:hover { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#800000; padding-left:5px; padding-top:2px; padding-bottom:2px; padding-right:2px; text-decoration:underline; cursor:hand; width:auto; }

Chú ý:

Ghi chú không được đặt trong cặp thẻ <- và -> như ghi chú trong file HTML. Cú pháp của JavaScript tương tự cú pháp của C nên có thể sử dụng // hay /* ... */. Chương 3: JavaScript

2.1 Giới thiệu chung

- JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó không được biên dịch mà được trình duyệt diễn dịch.

- Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện.

2.2 Cách thức nhúng JavaScript vào file HTML

Chúng ta có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:  Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>

 Sử dụng các file nguồn JavaScript

 Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML  Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả.

2.3 Sử dụng thẻ SCRIPT

Script được đưa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và </SCRIPT>. Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của file HTML. Nếu đặt trong phần <HEAD>, nó sẽ được tải và sẵn sàng trước khi phần còn lại của văn bản được tải.

Thuộc tính duy nhất được định nghĩa hiện thời cho thẻ <SCRIPT> là “LANGUAGE=“ dùng để xác định ngôn ngữ script được sử dụng. Có hai giá trị được định nghĩa là "JavaScript" và "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”> //Viết mã JavaScript ở đây

…..

</SCRIPT>

2.4 Sử dụng một file nguồn JavaScript

Thuộc tính SRC của thẻ <SCRIPT> cho phép bạn chỉ rõ file nguồn JavaScript được sử dụng.

Cú pháp:

<SCRIPT SRC=”path/file_name.js” language=”javascript” type=”text/javascript”> ...

</SCRIPT>

Chú ý:

- Thuộc tính này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khác nhau.

- Có thể đưa thêm các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT> có chứa thuộc tinh SRC.

- Các file JavaScript bên ngoài không được chứa bất kỳ thẻ HTML nào, chúng chỉ được chứa các câu lệnh JavaScript và các định nghĩa hàm.

2.5 Hiển thị một dòng Text trên Website

Đối tượng document trong JavaScript được thiết kế sẵn hai cách thức để xuất một dòng text ra màn hình của client: write() và writeln(). Cách gọi một cách thức của một đối tượng như sau:

object_name.property_name

Dữ liệu mà cách thức dùng để thực hiện công việc của nó được đưa vào dòng tham số,

Ví dụ:

document.write("Test"); document.writeln('Test');

Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động có khoảng trắng ở cuối dòng. Hai cách thức này đều cho phép xuất ra thẻ HTML.

Ví dụ: Xem ví dụ Document.html Mã nguồn:

<TITLE>Design Simple Website</TITLE> </HEAD>

<BODY>

<p>Đây là dòng văn bản bình thường.<BR> <B>

<SCRIPT LANGUAGE="JavaScript" type=”text/javascript”> document.write("Đây là dòng văn bản in đậm!.</B>");

</SCRIPT>

</BODY></HTML>

2.6 Giao tiếp với người sử dụng thông qua hộp thoại

2.6.1 Hàm Alert

Chức năng: Thông báo một hộp thoại đến người sử dụng.

Cú pháp: alert(“dòng văn bản”);

Thông thường, hàm alert() được sử dụng trong các trường hợp:  Thông tin đưa vào form không hợp lệ.

 Kết quả sau khi tính toán không hợp lệ.

 Khi dịch vụ chưa sẵn sàng để truy nhập dữ liệu.

Ví dụ: Xem ví dụ alert.html Mã nguồn:

</head> <body>

alert("Vui lòng nhập vào dữ liệu!"); }

</script>

<tr>

</tr> <tr>

</tr> </table>

<input type="submit" onclick="kiemtradulieu();"

value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>

</form> </body> </html>

2.6.2 Hàm Prompt

Chức năng: Thông báo một hộp thoại đến người sử dụng và yêu cầu người sử dụng nhập vào

một giá trị nào đó.

Cú pháp:

Prompt(“Đoạn văn bản”, “Giá trị mặc định được gán”);

Ví dụ:

<TITLE>Design Simple Website</TITLE>

<SCRIPT LANGUAGE= “JavaScript” type=”text/javascript”> var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);

</HEAD> <BODY> </BODY> </HTML>

2.6.3 Hàm Comfirm

Chức năng: Thông báo một câu hỏi Yes/No cho người sử dụng lựa chọn.

Cú pháp: Confirm(“Câu hỏi?”);

Ví dụ:

<title>Design Simple Website</title> </head>

<body>

if(ans){

document.write("Tôi cho bạn 2$"); }

else{

document.write("Bạn cho tôi 20$"); }

</script> </body> </html>

2.7 Biến trong JavaScript

2.7.1 Biến và phân loại biến

Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch ngang dưới. Các chữ số không được sử dụng để mở đầu tên một biến nhưng có thể sử dụng sau ký tự đầu tiên.

Phạm vi của biến có thể là một trong hai kiểu sau:

 Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng. được khai báo như sau :

x = 0;

 Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình mà nó khai báo. Biến cục bộ được khai báo trong một hàm với từ khoá var như sau:

var x = 0;

Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết.

2.7.2 Kiểu dữ liệu

Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Điều này có nghĩa là không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu được tự động chuyển thành kiểu phù hợp khi cần thiết.

<title>Design Simple Website</title> </head>

<body>

//num += 20; num = num + 20;

var temp ="There are " + num + " apples on the table."; document.write(temp);

</script> </body> </html>

Trình diễn dịch JavaScript sẽ xem biến num có kiểu nguyên khi cộng với 20 và có kiểu chuỗi khi kết hợp với biển temp.

Trong JavaScript, có bốn kiểu dữ liệu cơ bản sau: kiểu số nguyên, kiểu dấu phẩy động,

kiểu logic và kiểu chuỗi.

2.8 Xây dựng các biểu thức trong JavaScript

2.8.1 Định nghĩa và phân loại biểu thức

Về cơ bản có ba kiểu biểu thức trong JavaScript:

 Số học: Nhằm để lượng giá giá trị số. Ví dụ (3+4) được đánh giá bằng 7.

Cài đặt ASP trên máy tính

Ngôn ngữ kịch bản VBScript