BÀI 2
HTML - LÀM QUEN VỚI CSS – ĐỊNH DẠNG STYLE
CHO TRANG WEB & BỐ CỤC TRANG WEB
NHẮC LẠI BÀI TRƯỚC
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 2
MỤC TIÊU BÀI HỌC
Làm quen với HTML:
Khái niệm, cấu trúc
Cách viết mã HTML với môi trường soạn thảo
(notepad, Dreamweaver, …)
Làm việc với những thành phần:
• Văn bản
• Hình ảnh
Cấu trúc thẻ: <từ khóa>
Thường đi theo cặp: <html> … </html>
Nội dung của thẻ có thể là một đoạn ký tự hoặc một
thẻ khác
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 5
Thẻ mở Thẻ đóng
HTML – KHÁI NIỆM – CẤU TRÚC
Cấu trúc trang HTML:
<html >
<head>
<title>tiêu đề website</title>
</head>
<body>
Văn bản và hình ảnh sẽ nằm ở đây …
</body>
</html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 6
<html >
<head>
<title>tiêu đề website</title>
</head>
<body>
Văn bản và hình ảnh sẽ nằm ở đây …
</body>
</html>
HTML – KHÁI NIỆM – CẤU TRÚC
Phân cấp trong HTML
<html> </html>
<head> </head>
<body> </body>
</head>
<body>
<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>
</body>
</html>
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ đoạn văn: <p>nội dung hiển thị</p>
<html >
<head>
<title>Thẻ đoạn văn</title>
</head>
<body>
<h1>Đánh giá chi tiết HTC One
X</h1>
<p>Sau một năm ra nhiều sản
phẩm, HTC bắt đầu thay đổi chiến lược.
</p>
<p>One X bắt đầu có mặt trên
các kệ hàng ở mức giá 16,5 triệu. </p>
</body>
</html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 9
<html >
<head>
<title>Thẻ đoạn văn</title>
của Fpoly></a>
</body>
</html>
HTML – LÀM VIỆC VỚI VĂN BẢN
Tạo danh sách (list) với HTML:
2 loại danh sách: danh sách thứ tự & danh sách
không thứ tự
Trong danh sách có thể chứa danh sách con
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 11
HTML – LÀM VIỆC VỚI VĂN BẢN
<html>
<body>
<h4>Danh sách không thứ tự:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Định nghĩa bởi thẻ <ul>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 12
<html>
<body>
<h4>Danh sách không thứ tự:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
<td>Ô số 3</td>
</tr>
<tr>
<td>Ô số 4</td>
<td>Ô số 5</td>
<td>Ô số 6</td>
</tr>
</table>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 14
<table border="1">
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
<td>Ô số 3</td>
</tr>
<tr>
<td>Ô số 4</td>
<td>Ô số 5</td>
<td>Ô số 6</td>
</tr>
</table>
HTML – LÀM VIỆC VỚI THẺ DIV
Thẻ <div> định nghĩa một bộ phần hoặc một phần
trong tài liệu HTML
Được sử dụng cho nhóm khối thành phần trên web,
để dễ dàng tạo định dạng cho chúng
Được sử dụng thường xuyên với CSS để tạo định
Là những tệp tin/đoạn text, được kết hợp với 1 hoặc
nhiều tệp tin HTML để định nghĩa các quy tắc cho
việc hiển thị trang web
CSS tạo ra định nghĩa cho các thành phần trong
trang web
Định nghĩa cách hiển thị của các thành phần HTML
Có thể được đặt ở 3 vị trí:
Trong cặp thẻ <head>
Nội tuyến (inline): đặt cạnh
tên thẻ
Định nghĩa trong một file .css riêng biệt
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 17
KHÁI NIỆM
Một số quy tắc của CSS:
Quy tắc kế thừa: nếu luật CSS được áp dụng cho thẻ
cha thì cũng được mặc định áp dụng cho các thẻ
con/nội dung trong đó
Quy tắc tầng: nếu có 2 luật CSS, một luật áp dụng
cho thẻ cha và một luật áp dụng cho thẻ con thì luật
thứ 2 sẽ được áp dụng cho thẻ con
Quy tắc dựa trên mức độ: nếu có 2 luật CSS cùng
được áp dụng cho một đối tượng, luật nào có giá trị
weight/specific lớn hơn thì sẽ được áp dụng
Quy tắc !important: nếu luật được thêm từ khóa
"!important" thì nó sẽ được áp dụng, không phụ
thuộc vào các quy tắc khác
Một số quy tắc của CSS:
Quy tắc kế thừa: nếu luật CSS được áp dụng cho thẻ
cha thì cũng được mặc định áp dụng cho các thẻ
con/nội dung trong đó
ID:
• Áp dụng cho một yếu tố duy nhất, không lặp lại
• Bắt đầu bằng ký tự #
<html>
<head>
<style type="text/css">
#para1 { text-align:center; color:red;}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 20
<html>
<head>
<style type="text/css">
#para1 { text-align:center; color:red;}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
KHÁI NIỆM
Class:
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 23
CSS
Sử dụng môi
trường soạn thảo
Code
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Sử dụng môi trường Design với các bảng liên quan:
1. sử dụng bảng INSERT kết hợp với bảng
PROPERTIES, hộp thoại CSS Rule definition
Common:
Layout
Forms
Data
Spry
InContext Edditing
Text
Favorites
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 24
Cung cấp các chức năng cho phép chèn hình ảnh,
form, nội dung đa phương tiện vào web
Common:
Layout
Forms
Data
Spry
InContext Edditing
Text
Favorites
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
Ví dụ: định nghĩa CSS cho thẻ <h1>:
Copyright: Tài liệu đại học ©