Slide2

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

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
Thẻ mở Thẻ đóng

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>
<html >
<head>
</head>
<body>
Văn bản và hình ảnh sẽ nằm ở đây …
</body>
</html>

Phân cấp trong HTML
<html>...</html>
<head>...</head> <body>...</body>
<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>
</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
<html >
<head>
<title>Làm việc với tiêu đề</title>
</head>
<body>
</body>
</html>

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>
<html >
<head>
</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>

Thẻ link (liên kết):
Được định nghĩa thông qua thẻ <a>…</a>
<html >
<head>
</head>
<body>
<a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web
của Fpoly></a>
</body>
</html>
<html >
<head>
</head>
<body>
<a href=“http://www.poly.edu.vn/”>Nhấn vào đây để chuyển tới trang web
của Fpoly></a>
</body>
</html>

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

<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>
<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ị
<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>
<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
<html >
<head>
</head>
<body>
<div>nội dung …</div>
<div>nội dung …</div>
</body>
</html>

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

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

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, ….

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>
<html>
<head>
#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>
.text_red {color:#F00; font-variant:small-caps}
</style>
</head>
<body>
<p class="text_red">minh họa cho class</p>
</body>
</html>
<html>
<head>
.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

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
CSS
Sử dụng môi
trường soạn thảo
Code

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

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ỳ

Bước 2: nhấn nút Edit Rule trên bảng PROPERTIES để
chỉnh sửa style (CSS) cho thẻ <h1>

Bước 3: đặt giá trị cho các thuộc tính trong hộp thoại
CSS Rule definition
Cột phân loại các
thuộc tính
Giá trị của các thuộc
tính

Thiết lập các giá trị
liên quan

Kết quả:
Chỉnh sửa style với bảng CSS STYLES:
• Đây là bảng hiển thị toàn bộ
thuộc tính của các thành phần
trên web
Kết quả:
Chỉnh sửa style với bảng CSS STYLES:
• Đây là bảng hiển thị toàn bộ
thuộc tính của các thành phần
trên web

• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tính
và giá trị style của thẻ sẽ được hiển thị trên bảng CSS
STYLES
Vùng hiển thị thuộc tính và giá trị
• Ví dụ: nhấn chuột chọn nội dung thẻ <h1>, thuộc tính
và giá trị style của thẻ sẽ được hiển thị trên bảng CSS
STYLES
Vùng chỉnh sửa giá trị của các thuộc
tính

Sử dụng môi trường soạn thảo mã Code:
Viết trong cặp
thẻ <head> ở
HTML
Viết mã CSS Nội tuyến (inline)
Viết trong một
file .css riêng biệt

Viết CSS trong cặp thẻ <head>…</head>

Viết CSS Inline
<html>
<body>
<h1 style="font-family:Tahoma, Geneva, sans-serif; font-size:24px; font-
style:italic; color:#F00">thực hành với thẻ <h1></h1>
</body>
</html>

Viết trong một file .css riêng biệt:
• Bước 1: khởi tạo một file .css bằng cách lựa chọn File >
New … lựa chọn CSS trong hộp thoại New Document

• Bước 2: soạn thảo mã CSS cho thẻ <h1>, sau đó lưu
file tại thư mục web (thư mục có chứa file .html)

• Bước 3: trong file .html, viết lệnh để gọi file .css
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB101- Thiết kế web</title>
<link href=“common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>thực hành với thẻ <h1></h1>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB101- Thiết kế web</title>
<link href=“common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>thực hành với thẻ <h1></h1>
</body>

BỐ CỤC WEBSITE VỚI CSS
Layout là bố cục trình bày sắp xếp các thành phần
của một trang web
Layout website thường chia theo dạng cột
website
header
contentv.v…
của một trang web
Layout website thường chia theo dạng cột
Navigator
(điều
hướng)
footer

BỐ CỤC WEBSITE VỚI CSS

TỔNG KẾT
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn
ngữ tạo nên các trang web thông qua các thẻ đánh
dấu
Thẻ là thành phần đánh dấu văn bản. Nội dung
trong thẻ sẽ được trình duyệt xử lý dựa trên thẻ
chứa nó
CSS là ngôn ngữ đơn giản, hoạt động cùng với
HTML để định dạng về mặt hình thức cho trang web
Có 3 vị trí để đặt CSS: trong thẻ <head>, cùng
dòng với thẻ (inline), ở một file .css bên ngoài
của một trang web, thường được chia theo dạng cột
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn
ngữ tạo nên các trang web thông qua các thẻ đánh
dấu
Thẻ là thành phần đánh dấu văn bản. Nội dung
trong thẻ sẽ được trình duyệt xử lý dựa trên thẻ
chứa nó
CSS là ngôn ngữ đơn giản, hoạt động cùng với
HTML để định dạng về mặt hình thức cho trang web
Có 3 vị trí để đặt CSS: trong thẻ <head>, cùng
dòng với thẻ (inline), ở một file .css bên ngoài
của một trang web, thường được chia theo dạng cột

Slide2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Slide2

Similar to Slide2 (20)

More from tuanduongcntt

More from tuanduongcntt (20)

Slide2