Bài 9: Học HTML, Định dạng các phần tử HTML bằng CSS phần 3

Hôm nay chúng ta sẽ học phần 3 của nội dung Định dạng các phần tử HTML bằng CSS

HTML, CSS

5. Bài tập áp dụng

Bài 1: Tạo một dòng văn bản “Welcome to CSS” có font chữ là Arial, in nghiêng và kích thước font chữ là 16 point.

<HTML>
<HEAD> </HEADS>
<BODY>
<P style=“font-family:arial; font-style:italic; font-size:16pt”>Welcome to </P>
</BODY>
</HTML>

Bài 2: Tạo một textbox với màu nền là màu tím (magenta).

<HTML>
<HEAD> </HEADS>
<BODY>
<input type = text style = “background-color:magenta”>
</BODY>
</HTML>

Bài 3: Đặt 3 file ảnh nền tương ứng vào tài liệu, vào textbox và vào textarea

<HTML>
<HEAD> </HEAD>
<BODY style="background-image:url('anh1.jpg');background-repeat:no-repeat">
<input style = "background-image:url('anh2.jpg');background-repeat:repeat-x; width:100%">
<P>
<textarea style = "background-image:url('anh3.jpg');background-repeat:repeat-y" cols = 80 rows = 25>
</textarea>
</BODY>
</HTML>

*Ghi chú:
-Khi ta đặt là repeat-x thì ta có một dãy ảnh được xếp liên tiếp theo chiều ngang
-Khi ta đặt là repeat-y thì ta có một dãy ảnh được xếp liên tiếp theo chiều dọc

Bài 4: Tạo một dòng văn bản, chứa xâu: "Trang chu cua NIIT-iNET", trong đó từ "Trang chu" có màu xanh (blue) và khi người dùng di chuyển chuột đến chữ "Trang chu" thì chuột chuyển thành hình bàn tay, và khi chuột click lên chữ này thì trang http://www.inet.edu.vn sẽ được mở.

<HTML>
<HEAD> </HEAD>
<BODY>
<TITLE>Tạo liên kết và xử lý sự kiện</TITLE>
<font style ="cursor:hand;color:blue" onclick="window.open('http://www.aptech.ute');">Trang chu </font> cua HY-Aptech
</BODY>
</HTML>

Ghi chú: Khi muốn áp dụng các kiểu cho một số phần tử các bạn chỉ cần viết : style="Tên_Thuộc_tính : Giá_Trị;" trong định nghĩa thẻ. Trong đó cặp "Tên_Thuộc_tính : Giá_Trị;" có thể viết như cột ví dụ đã chỉ ra ở các bảng trên.

Nội dung trang Web của chúng ta bây giờ sẽ là:
<html>
<head>
<title>Su dung bo chon</title>
</head>
<style type = "text/css">
P {font-family:.vntimeH; font-size:20pt; color:red}
</style>
<body>
<P>Know Your desktop </P>
<P>Office 2000 </P>
<P>Access 2000 </P>
<P>Logic Building with C </P>
<P>HTML, DHTML and JavaScript</P>
<P>Dream Weaver</P>
</body>
</html>

Các bạn làm thử các bài tập mình vừa đưa ra nhé!. Chúc các bạn thành công.
Để tham khảo thông tin chi tiết hơn về nội dung này bạn có thể vào Tạo web với HTML 5 & CSS 3.
Hoặc liên hệ: Ms Lâm: 0904 936 399

HTML - Khoa hoc HTML5 + CSS 3

Thứ Tư, 22 tháng 5, 2013