Tự học lập trình web với PHP

Bài 8 - CSS (CB) CLASS, ID VÀ ĐIỀU KHIỂN HOVER

Xem chi tiết hướng dẫn buổi 8 qua video

A – LÝ THUYẾT

I – THUỘC TÍNH CLASS TRONG CSS

1 – Ý nghĩa của việc sử dụng Class trong CSS

Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần

2 – Làm việc với Class trong CSS

Để làm việc với Class trong CSS chúng ta thường trài qua 2 bước sau:

a) Bước 1: Tìm những thẻ HTML nào mà chúng ta muốn áp dụng cho chúng cùng một kiểu Style và cho chúng một thuộc tính chung đó là class=”class_name” với class_name là tên của Class mà chúng ta muốn đặt tùy thích

b) Bước 2: Gọi tới tên của Class mà chúng ta đã khởi tạo để tiến hành áp dụng Style thay vì gọi từng thẻ HTML một như chúng ta thường làm trong các bài trước với cách thức như sau

.class_name{

Áp dụng Style cho nhóm thẻ HTML được đặt tên class_name

}

Chú ý: Nên đặt tên của Class liên quan đến vấn đề mà Class đang giải quyết

II – THUỘC TÍNH ID TRONG CSS

1 – Ý nghĩa của việc sử dụng ID trong CSS

ID dùng để nhận dạng một đối tượng đặc trưng và duy nhất. Trong một văn bản HTML thì mỗi một đối tượng chỉ có duy nhất một ID. Đây là đặc điểm chính để phân biệt cũng như cách thức sử dụng giữa ID và Class

2 – Làm việc với ID trong CSS

Để làm việc với ID trong CSS chúng ta thường trài qua 2 bước sau:

a) Bước 1: Tìm thẻ HTML mà chúng ta muốn áp dụng Style cho nó khác với tất cả các đối tượng còn lại và cho nó một thuộc tính id=”id_name” với id_name là tên của ID mà chúng ta muốn đặt tùy thích

b) Bước 2: Gọi tới tên của ID mà chúng ta vừa khởi tạo trên để áp dụng Style

#id_name{

Áp dụng Style cho thẻ HTML được đặt tên id_name

}

Chú ý: Nên đặt tên của ID liên quan đến vấn đề mà ID đang giải quyết

III – ĐIỀU KHIỂN HOVER

1 – Điều khiển Hover dành cho link

Điều khiển này xác định trạng thái khi con trỏ chuột được đưa tới liên kết. Điều khiển này chạy được trên tất cả các trình duyệt.

2 – Điều khiển Hover dành cho thẻ các thẻ HTML khác

Điều khiển này xác định trạng thái khi con trỏ chuột được đưa tới một thẻ HTML bất kỳ. Điều khiển này không thể thực hiện được trên các phiên bản của trình duyệt IE, nếu muốn sử dụng điều khiển này cho IE thì chúng ta cần phải can thiệp bằng một số biện pháp khác nữa

B – THỰC HÀNH

I – BÀI TẬP THỰC HÀNH

Bài 1:

Sử dụng tối đa các kiến thức về CSS đã học cùng với các kiến thức khác về HTML để thiết kế một biểu mẫu “thăm dò ý kiến” như hình dưới.

Bảng có độ rộng 220px
Các thuộc tính Border, Cellpadding, Cellspacing có giá trị 0px
Độ cao của TR chứa tiêu đề là 26px
Độ cao của TR chứa câu hỏi là 40px
Độ cao của các TR chứa các câu trả lời là 30px
Độ cao của TR chứa Button là 30px

II – BÀI TẬP LÀM THÊM

Bài 2:

Hoàn thành giao diện website như hình dưới đây với các yêu cầu về thiết kế như sau:

Phần Menu bên Trái và bên Phải

Font chứ arial

Phần Intro (Giới thiệu)

Phần nội dung hiển thị vắn tắt bài viết

Phần Footer

(FILE ẢNH CẦN THIẾT LẤY Ở BÀI HỌC SỐ 4)

>>Xem bài trước: Bài 7 - CSS (CB) LÀM VIỆC VỚI CÁC THUỘC TÍNH VỀ FONT CHỮ VÀ TEXT

>>Xem bài tiếp theo: Bài 9 - CSS (CB) CÁC THUỘC TÍNH CỦA BOX MODEL NHƯ: BORDER – MARGIN – PADDING

Bài 7 - CSS (CB) LÀM VIỆC VỚI CÁC THUỘC TÍNH VỀ FONT CHỮ VÀ TEXT

Xem chi tiết hướng dẫn buổi 7 qua video

A – LÝ THUYẾT

I – CÁC THUỘC TÍNH VỀ FONT CHỮ

1 – Thuộc tính font-family

a) Khái niệm

Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp

b) Cách sử dụng

font-fmily: value;

value là tên của font chữ như Arial, Tahoma, “Times New Roman”,…

Chú ý: Giá trị của thuộc tính font-family có thể có nhiều loại Font, và mỗi loại Font đó cách nhau bởi “dấu phẩy”;

2 – Thuộc tính font-style

a) Khái niệm

Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web

b) Cách sử dụng

fon-style: value;

value là một trong các giá trị sau:

Normal: Kiểu in thường
Italic: Kiểu in nghiêng
Oblique: Kiểu hay xiên

3 – Thuộc tính font-variant

a) Khái niệm

Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ

Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế

b) Cách sử dụng

font-variant: small-caps

4 – Thuộc tính font-weight

a) Khái niệm

Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900

b) Cách sử dụng

font-weight: value;

value là một trong các giá trị sau:

Normal: Chữ thường
Bold: Chữ in đậm
100 – 900: Độ đậm của chữ được tăng dần từ giá trị 100 đến giá trị 900

5 – Thuộc tính font-size

a) Khái niệm

Kích thước của một font được định bởi thuộc tính font-size

Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của website bạn có thể lựa chon những đơn vị phù hợp. Ví dụ trang web của bạn phục vụ chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn hình máy tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị qui đổi như em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của bạn luôn ở kích thước phù hợp

b) Cách sử dụng

font-size: value;

value là giá trị được tính bằng đơn vị chiều dài

Chú ý: Thông thường chúng ta sử nên dụng đơn vị là Pixels

II – CÁC THUỘC TÍNH VỀ TEXT

1 – Thuộc tính color (Mầu chữ)

a) Định nghĩa

Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ

b) Cách sử dụng

color: value;

value là tên mầu hoặc mã mầu

2 – Thuộc tính text-indent

a) Định nghĩa

Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS

b) Cách sử dụng

text-indent: value;

value là giá trị tính theo đơn vị độ dài để tạo ra khoảng thụt đầu dòng

3 – Thuộc tính text-align

a) Khái niệm

Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web

Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều)

b) Cách sử dụng

text-align: value;

value là một trong 4 giá trị sau:

Left: Canh trái (Mặc định)
Right Canh phải
Center: Canh giữa
Justify: Canh đều

4 – Thuộc tính letter-spacing

a) Khái niệm

Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản

b) Cách sử dụng

letter-spacing: value;

value là giá trị được tính theo đơn vị độ dài thể hiện khoảng cách giữa các ký tự trong văn bản

5 – Thuộc tính text-decoration

a) Khái niệm

Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink)

b) Cách sử dụng

text-decoration: value;

value là một trong 4 giá trị sau:

· Underline: Gạch chân

· Line-through: Gạch xiên

· Overline: Gạch đầu

· Blink: Nhấp nháy

6 – Thuộc tính text-transform

a) Khái niệm

Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML

Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định)

b) Cách sử dụng

text-transform: value;

value là một trong 4 giá trị sau:

Uppercase: In hoa
Lowercase: In thường
Capitalize: In hoa ở ký tự đầu tiên trong mỗi từ
None: Không áp dụng hiệu ứng (Mặc định)

B – THỰC HÀNH

I – BÀI TẬP THỰC HÀNH

1 – Bài tập

Bài 1:

Sử dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu trái (Left Sidebar Menu) như hình 1 dưới đây, cho biết các thông số sau:

Bborder:0px, Cellpading:0px, Cellspacing:0px

Độ rộng của Menu là 220px
Độ cao của thẻ TR chứa Menu Tile là 26px, font: arial, size: 12px
Độ cao của các thẻ TR chứa các Menu Item là 30px, size:11px

Đáp án:

<html>

font-family:arial;

font-size:11px;

font-weight:bold;

color:#000000;

text-decoration:none;

text-transform:none;

}

</style>

<body>

<td>danh mục chính</td>

</tr>

<td><a style="text-decoration:underline; color:#FF6600;" href="#">• Trang chủ</a></td>

</tr>

</tr>

</tr>

<td><a href="#">• Thông báo chung của công ty</a></td>

</tr>

<td><a href="#">• Tuyển dụng việc làm</a></td>

</tr>

</table>

</body>

</html>

II – BÀI TẬP LÀM THÊM

1 – Bài tập

Sử dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu ngang (Navbar Menu) như hình dưới đây. Cho biết các thông số thiết kế như sau:

Bborder:0px, Cellpading:0px, Cellspacing:0px

Độ rộng của Menu là 500px
Độ cao là 32px;
Font:arial, size:11px

Đáp án:

<html>

table{

background:url(images/navbar.gif) top left repeat-x;

}

td{

background:url(images/navbar_line.gif) top right no-repeat;

text-align:center;

}

td a{

font-family:arial;

font-size:11px;

font-weight:bold;

color:#FFFFFF;

text-decoration:none;

text-transform:capitalize;

}

</style>

<body>

<tr>

<td><a style="color:#FF6600;" href="#">trang chủ</a></td>

<td><a href="#">giới thiệu</a></td>

</tr>

</table>

</body>

</html>

>>Xem bài trước: Bài 6 - CSS LÀ GÌ – CÁC QUY ƯỚC TRONG CSS VÀ MỘT SỐ THUỘC TÍNH ĐƠN GIẢN VỀ FONT NỀN

>>Xem bài tiếp theo: Bài 8 - CSS (CB) CLASS, ID VÀ ĐIỀU KHIỂN HOVER

Bài 6 - CSS LÀ GÌ – CÁC QUY ƯỚC TRONG CSS VÀ MỘT SỐ THUỘC TÍNH ĐƠN GIẢN VỀ FONT NỀN

A – LÝ THUYẾT

I – GIỚI THIỆU VỀ CSS

1 – CSS là gì

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. Đây chỉ là một cách định nghĩa giàu hình ảnh mà thôi. Còn CSS là từ viết tắt của cụm từ sau (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… Mà ở đây, cụ thể là chúng ta dùng CSS để làm việc với HTML

2 – CSS dùng để làm gì

Trong khuôn khổ làm việc với CSS cơ bản này thì CSS mang lại cho chúng ta những tiện ích như sau:

a) CSS dùng để hỗ trợ, bổ sung và hoàn thiện những điểm còn thiếu trong các văn bản HTML

b) CSS có thể tạo ra các khuôn mẫu bên ngoài giúp chúng ta dễ dàng sử dụng lại mã và tiết kiệm được phần lớn thời gian và chi phí

c) Ngoài ra CSS còn giúp chúng ta dễ dàng trình bầy các nội dung một cách phức tạp và tinh vi nhất

3 – Các kiến thức cũng như phần mềm liên quan khi học CSS

a) Để bắt đầu làm việc với CSS trước tiên các bạn phải có chút kiến thức về ngôn ngữ HTML

b) Tiếp theo, để dễ dàng hơn khi làm việc với CSS và kết hợp CSS với HTML trong quá trình thiết kế, chúng ta cần sử dụng một số Add on của Firefox như

· Web Developer: Thấy ngay được sự thay đổi khi chúng ta viết mã hay chỉnh sửa mã CSS ngay trên trình duyệt

· ColorZilla: Công cụ kiểm mầu và lấy mầu

· MeasureIt: Công cụ thước đo

II – MỘT SỐ QUY ƯỚC TRONG KHI LÀM VIỆC VỚI CSS

1 – Vùng làm việc của CSS và sự ưu tiên đối với các vùng đó

Chúng ta có 3 cách khác nhau để nhúng mã CSS vào một tài liệu HTML

a) Cách 1: Nội tuyến (Kiểu thuộc tính)

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần Selector trong cú pháp (Selector sẽ được học sau).

Cú pháp cơ bản đó là:

style = “…Vùng viết mã CSS…”

b) Cách 2: Bên trong (Thẻ Style)

Đây được xem là một cách tương đối phổ biến với những ai mới bắt đầu làm việc với CSS

Cú pháp của nó như sau: Khai báo một vùng làm việc bởi cặp thẻ <STYLE TYPE = “TEXT/CSS”>…Vùng viết mã CSS…</STYLE>. Cặp thẻ này được đặt dưới thẻ <HEAD> và trên thẻ </TITLE>

c) Cách 3: Bên ngoài (Liên kết với một File CSS bên ngoài)

Tạo một File .CSS bên ngoài để viết mã CSS mà không cần bỏ phần mã đó vào trong cặp thẻ <STYLE TYPE = “TEXT/CSS”></STYLE> như ở cách 2

Sử dụng một đoạn mã đặt dưới thẻ <HEAD> và trên thẻ </TITLE> trong tài liệu HTML để gọi File CSS vào: <LINK REL = “STYLESHEET” TYPE = “TEXT/CSS” HREF = “URL”>

Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các CSS nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận). Theo nguyên tắc đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

2 – Cú pháp làm việc với CSS

Cú pháp cơ bản của CSS như sau:

Selector{Property: Value;}

Trong đó

a) Selector: Là các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bầy như:

· Các thẻ HTML

· Class hoặc Id (sẽ học ở những bài sau)

b) Property: Chính là các thuộc tính quy định cách trình bầy. Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector.

c) Value: Giá trị của thuộc tính

VD:

Ngoài ra cũng giống như HTML ta cũng có thể chú thích cho đoạn mã CSS của chúng ta bằng cú pháp sau:

/* Nội dung cần chú thích */

3 – Một số đơn vị và ý nghĩa sử dụng của chúng trong CSS

a) Đơn vị chiều dài

Dưới đây là bảng một số đơn vị chiều dài mà các bnaj có thể dùng khi làm việc vơi CSS

Đơn vị	Mô tả
%	Phần trăm
in	Inch (1 inch = 2.54 cm)
cm	Centimeter
mm	Milimeter
em	1 em tương đương với kích thước font hiện hành
ex	1 ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó đơn vị này không những phụ thuộc vào kích cỡ của font chữ mà còn phụ thuộc vào loại font chữ
pt	Point (1 pt = 1/72 inch)
pc	Pica (1 pc = 12 pt)
px	Pixels (Điểm ảnh trên màn hình máy tính)

Chú ý: Thường chúng ta chỉ sử dụng đơn vị là Pixels (px) để việc thiết kế được chuẩn xác

b) Đơn vị mầu sắc

Trong CSS cho chúng ta thao tác vơi mầu sắc qua 2 đơn vị đó là:

· Tên mầu

· Mã mầu

Chú ý: Thường chúng ta nên sử dụng đơn vị là mã mầu để các mầu của chúng ta được hiển thị chuẩn và đa dạng

III – MỘT SỐ THUỘC TÍNH VỀ FONT NỀN

1 – Thuộc tính Background-color

a) Khái niệm

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị Transparent để tạo nền trong suốt.

b) Cách sử dụng

background-color: Tên mầu hoặc mã mầu;

2 – Thuộc tính Background-image

a) Khái niệm

Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image

b) Cách sử dụng

background-image:url(Đường dẫn ảnh);

VD:

3 – Thuộc tính Background-repeat

a) Khái niệm

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền

b) Cách sử dụng

background-repeat: Value;

Value là một trong bốn giá trị sau dây

Repeat-x: Chỉ lặp lại ảnh theo phương ngang
Repeat-y: Chỉ lặp lại ảnh theo phương dọc
Repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định
No-repeat: Không lặp lại ảnh

4 – Thuộc tính Background-attachment

a) Khái niệm

Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web

b) Cách sử dụng

background-attachment: Value;

Value là một trong các giá trị sau:

Scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định

· Fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web

5 – Thuộc tính Background-position

a) Khái niệm

Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền)

Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right

b) Cách sử dụng

background-position: Value_1 Value_2;

Value_1: là đơn vị chiều dài canh lề bên trái
Value_2: là đơn vị chiều dài canh lề bên trên
Hoặc Value_1, Value_2: Nhận một trong các giá trị (Top, Left, Right, Bottom)

B – THỰC HÀNH

I – BÀI TẬP THỰC HÀNH

1 – Bài tập

Bài 1

Sử dụng tối đa các kiến thức về CSS để thiết kế mẫu Layout như hình dưới đây.

· Độ rộng của website là 800px

· Độ cao của banner là 80px

· Độ rộng của menu trái là 200px

· Độ cao của footer là 60px

Đáp án:

<html>

<head>

body{

background-image:url(images/background.jpeg);

background-attachment:fixed;

}

color:#000000;

}

</style>

</head>

<body>

<tr>

<td style="background-color:#FF6600" height="80" colspan="2" align="center" valign="middle"><font size="+1" color="#FFFFFF"><b>TRUNG TÂM ĐÀO TẠO TRỰC TUYẾN LẬP TRÌNH - THIẾT KẾ - ĐỒ HỌA - WEB</b></font></td>

</tr>

<tr>

<td style="background-color:#FFFFFF" height="30" colspan="2"><a href="#">Trang Chủ</a> | <a href="#">Giới Thiệu</a> | <a href="#">Tin Tức</a> | <a href="#">Liên Hệ</a> | <a href="#">Diễn Đàn</a></td>

</tr>

<tr>

<tr>

<td height="26" align="center"><b style="color:#FFFFFF">Danh Mục Chính</b></td>

</tr>

<tr>

</tr>

<tr>

<td height="25"><a href="#">Tư vấn kinh doanh</a></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<p>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

</p>

</td>

<td width="600" align="justify"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer interdum sem ac magna. Integer in lectus sed ligula commodo commodo. In molestie, neque et porta lobortis, ligula sem auctor mauris, a luctus lacus quam sit amet augue. Aliquam eu felis. Nullam vel erat. Phasellus erat nibh, nonummy sit amet, lobortis quis, imperdiet ornare, dolor. Nunc odio. Nulla eros neque, egestas ut, auctor eu, luctus vitae, nisi. Aenean malesuada leo a nunc. Etiam fermentum neque in justo. Aliquam erat volutpat. Aenean tellus eros, consectetuer ut, hendrerit ut, rutrum at, nunc. Integer dolor odio, posuere nec, molestie at, tincidunt at, lacus. Maecenas at nibh. </p>

<p>Nullam tellus pede, eleifend posuere, dignissim id, euismod vitae, tortor. Pellentesque vel mauris. Phasellus dictum rutrum lectus. Vestibulum a risus at orci egestas condimentum. Morbi in turpis vel ante feugiat placerat. Vestibulum justo lacus, pulvinar at, gravida quis, condimentum et, pede. Suspendisse sit amet turpis in mauris porttitor pulvinar. Phasellus odio lacus, volutpat at, ullamcorper sit amet, elementum nec, sapien. Fusce orci sem, venenatis a, pellentesque sit amet, elementum quis, orci. Ut vulputate dolor id lectus. Curabitur non neque. Quisque libero. </p>

<p>Integer molestie, mi tincidunt rutrum convallis, tellus justo fringilla orci, vitae iaculis turpis nunc a lorem. Sed tortor dui, imperdiet eu, volutpat vestibulum, posuere vel, urna. Cras sed pede in arcu consequat vehicula. Nunc eget neque et diam rutrum egestas. Nam interdum justo quis ligula. Vestibulum fringilla placerat leo. Proin rutrum. Nunc ullamcorper lectus sit amet diam. Duis congue ligula a mauris. Etiam nonummy odio ut leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi rhoncus, erat ut accumsan euismod, erat diam egestas lacus, pulvinar placerat justo augue eget augue. Etiam dui elit, elementum facilisis, auctor in, feugiat non, nibh. Donec diam ipsum, interdum eget, auctor in, bibendum id, turpis. Cras dapibus, diam sit amet mattis interdum, turpis neque pellentesque turpis, et rhoncus velit mi in nisi. Ut ullamcorper convallis turpis. Donec ligula risus, imperdiet vel, auctor quis, dapibus at, orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>

<p>Nunc eleifend nulla vel orci. Donec sollicitudin. Phasellus urna. Sed sit amet nisi tincidunt quam porta placerat. Phasellus sit amet metus et neque tincidunt porta. Mauris lorem lorem, faucibus sit amet, lobortis non, eleifend eget, massa. Duis odio massa, condimentum sed, fringilla quis, tincidunt quis, mi. Proin et diam. Fusce tortor metus, imperdiet at, vestibulum sed, feugiat et, erat. Cras in tortor. Integer a dui. </p>

<p>Donec nibh leo, tristique vel, vehicula vitae, commodo sed, augue. Suspendisse mi libero, egestas at, faucibus at, eleifend nec, eros. Aliquam posuere ipsum sit amet nunc. Pellentesque orci lacus, commodo tincidunt, eleifend ut, egestas in, ligula. Suspendisse lacus nibh, congue et, auctor accumsan, porta non, metus. Integer tempus ligula ut mauris. Donec sollicitudin, sapien in luctus adipiscing, risus urna pharetra nisl, in vehicula dui mauris in lectus. Sed eget nunc. Nulla a tellus. Proin tristique viverra urna. Donec ac velit. Vestibulum ipsum ligula, placerat mollis, fermentum vitae, consectetuer id, libero. Vivamus orci. Donec lacus leo, lacinia a, sodales egestas, rutrum sed, elit. Suspendisse adipiscing. Nulla facilisi. Quisque in libero vel turpis semper consequat. </p>

</td>

</tr>

<tr>

<td style="background-color:#333333; color:#FFFFFF;" height="60" colspan="2" align="center" valign="middle"><font size="-1">footer</font></td>

</tr>

</table>

</body>

</html>

>>Xem bài trước: Bài 5 - LÀM VIỆC VỚI FORM VÀ CÁC ĐỐI TƯỢNG TRONG FORM

>>Xem bài tiếp theo: Bài 7 - CSS (CB) LÀM VIỆC VỚI CÁC THUỘC TÍNH VỀ FONT CHỮ VÀ TEXT