Th uc tính color và Background ộ

1 .T ng qua nổ

2.5.2.8 Th uc 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 >ị

 Ki u ể SMALL-CAPS l n h n ch thớ ơ ữ ường 1 chút và nh h n ch vi t 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  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ụ

Mã ngu n:ồ

finish_css.html

</head> <body>

<table border="1" width="100%" id="table2"> <tr> <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>

<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>

<li>Thành Ph Hu </li>ố ế <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;

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>

<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:ồ

<body>

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

</script>

<tr>

<td width="143">H tên</td>ọ

<tr>

<td width="143">Đ a ch </td>ị ỉ

</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 :ụ

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