bài 2 html - làm quen với css – định dạng style cho trang web và bố cục trang web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.94 MB, 40 trang )
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
Làm quen với CSS
Khởi tạo CSS với Dreamweaver CS4
Bố cục trang web với CSS
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
Làm quen với CSS
Khởi tạo CSS với Dreamweaver CS4
Bố cục trang web với CSS
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 3
HTML
HTML – KHÁI NIỆM – CẤU TRÚC
HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ
lập trình) - Hyper Text Markup Language
Sử dụng cấu trúc thẻ để mô tả trang web
(webpage: *.html)
Thẻ HTML:
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
HTML là ngôn ngữ đánh dấu (không phải ngôn ngữ
lập trình) - Hyper Text Markup Language
Sử dụng cấu trúc thẻ để mô tả trang web
(webpage: *.html)
Thẻ HTML:
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>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 7
<title> </title> <p> </p> <br> <table> </table>
Ví dụ: “Hello world”
Ví dụ: “Hi!”
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ tiêu đề: h1 h6
<hn>nội dung hiển thị</hn>
n là số nguyên từ 1-6
Giống như định dạng Bullets trong word
<html >
<head>
<title>Làm việc với tiêu đề</title>
</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>
Thẻ tiêu đề: h1 h6
<hn>nội dung hiển thị</hn>
n là số nguyên từ 1-6
Giống như định dạng Bullets trong word
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 8
<html >
<head>
<title>Làm việc với tiêu đề</title>
</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>
</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>
HTML – LÀM VIỆC VỚI VĂN BẢN
Thẻ link (liên kết):
Được định nghĩa thông qua thẻ <a>…</a>
<html >
<head>
<title>Thẻ đoạn văn</title>
</head>
<body>
<a href=“ vào đây để chuyển tới trang web
của Fpoly></a>
</body>
</html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 10
<html >
<head>
<title>Thẻ đoạn văn</title>
</head>
<body>
<a href=“ vào đây để chuyển tới trang web
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>
</body>
</html>
<h4>Danh sách theo thứ tự:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Định nghĩa bởi thẻ <ul>
Định nghĩa bởi thẻ <ol>
HTML – LÀM VIỆC VỚI HÌNH ẢNH
Chèn hình ảnh vào trang web:
<img src="đường dẫn tới ảnh" alt="…."/>
Đường dẫn tới ảnh:
-Đường dẫn tuyệt đối
- Đường dẫn tương đối
- Dạng link
Xác định văn bản thay thế,
nếu hình ảnh không hiển thị
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 13
<h4>Hình minh họa:</h4>
<img src="html-code.jpg" alt="Hình
minh họa" border="0" width="320"
height="319"/>
HTML – LÀM VIỆC VỚI TABLE
Sử dụng thẻ <table></table> để định dạng bảng
trong HTML:
Được chia thành nhiều hàng: <tr>…</tr>
Mỗi hàng được chia thành ngăn dữ liệu: <td>…</td>
<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>
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
dạng
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
dạng
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 15
<html >
<head>
<title>tiêu đề website</title>
</head>
<body>
<div>nội dung …</div>
<div>nội dung …</div>
</body>
</html>
CASCADING STYLE SHEETS (CSS)
KHÁI NIỆM
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
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 đó
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
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 18
KHÁI NIỆM
4 loại thẻ chọn trong CSS:
Tags: Đối tượng áp dụng luật là thẻ HTML
Classes: Đối tượng áp dụng luật là các thẻ div thuộc
class tương ứng
IDs: Đối tượng áp dụng luật thẻ thẻ div có id tương
ứng
Pseudo-class: Đối tượng áp dụng luật là các lớp giả
đã được định nghĩa sẵn như: link, active, hover, ….
4 loại thẻ chọn trong CSS:
Tags: Đối tượng áp dụng luật là thẻ HTML
Classes: Đối tượng áp dụng luật là các thẻ div thuộc
class tương ứng
IDs: Đối tượng áp dụng luật thẻ thẻ div có id tương
ứng
Pseudo-class: Đối tượng áp dụng luật là các lớp giả
đã được định nghĩa sẵn như: link, active, hover, ….
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 19
KHÁI NIỆM
Class và ID trong CSS:
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:
• Được sử dụng để áp dụng triệt để tính kế thừa
• Bắt đầu bằng ký tự .
<html>
<head>
<style type="text/css">
.text_red {color:#F00; font-variant:small-caps}
</style>
</head>
<body>
<p class="text_red">minh họa cho class</p>
</body>
</html>
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 21
<html>
<head>
<style type="text/css">
.text_red {color:#F00; font-variant:small-caps}
</style>
</head>
<body>
<p class="text_red">minh họa cho class</p>
</body>
</html>
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
KHỞI TẠO CSS VỚI DREAMWEAVER CS4
2 cách tạo CSS trong Dreamweaver:
CSS
Sử dụng môi
trường Design với
các bảng liên quan
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>:
Bước 1: sử dụng bảng INSERT chèn thẻ <h1>, nhập
nội dung bất kỳ
Slide 2 - HTML - Làm quen với CSS - Định dạng style cho web & bố cục web 25
