Giáo trình về môn thiết kế web

NSFNET đã dần thay thế cho ARPANET.Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độclập với nhau kết nối vào nó, các mạng này có t

Trang 1

GIỚI THIỆU VỀ INTERNET

I Lịch sử:

Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Kykhởi xướng vào năm 1969 ARPA là viết tắt của cụm từ Advanced ResearchProjects Agency – Cơ quan các Dự án Nghiên cứu Cao cấp, một bộ phận trực thuộcbộ Quốc phòng Hoa Ky phụ trách việc cấp phát tiền tài trợ Mạng ARPANET khởiđầu là mạng kết nối giữa Bộ Quốc phòng Hoa Ky với các nhà thầu nghiên cứu khoahọc và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hànhcác nghiên cứu khoa học được tài trợ

Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi mộtphần của nó bị phá hủy Nếu một trong những liên kết mạng bị phá hủy do chiếntranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liênkết khác

ARPANET thành công vang dội và mọi trường đại học tại Hoa Ky đều muốngia nhập vào mạng này Với việc mở rộng đối tượng tham gia vào mạng,ARPANET bắt đầu trở nên khó quản lý hơn Do đó nó đã được chia làm hai mạng:MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn,dành cho các mục đích phi quân sự Tuy vậy, hai mạng này vẫn có thể liên lạc vớinhau qua một giao thức gọi là giao thức Internet (IP: Internet Protocol)

ARPANET nhanh chóng trở nên ọp ẹp do sự phát triển của số lượng các máytính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi Hộiđồng Khoa học Quốc gia Hoa Ky (NSF) đã lập nên mạng NSFNET, một mạngriêng và nhanh hơn nhiều của mình NSF đã thiết lập một chuỗi các mạng khu vựcnhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nốicác mạng khu vực này với NSFNET NSFNET đã dần thay thế cho ARPANET.Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độclập với nhau kết nối vào nó, các mạng này có thể truyền thông với nhau thông quaphương thức truyền gói dữ liệu (packet switching) và qua kiến trúc mạng mở (open-architecture networking) Kiến trúc mạng mở nghĩa là các mạng con có thể có giaodiện, cấu trúc của riêng nó; điều này giải thích tại sao ngày nay chúng ta đều có thểkết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì

Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà pháttriển nhận thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọiđối tượng người dùng Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thốngmenu đơn giản để truy cập đến các tập tin

CHƯƠNG

1

Trang 2

Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mớitrong việc sử dụng Internet Tim Berners-Lee là người đã phát triển các giao thứcnền tảng cho World Wide Web (WWW) vào năm 1992 Ông cũng chính là người đãtạo ra ngôn ngữ đánh dấu siêu văn bản (HTML: Hypertext Markup Language) –ngôn ngữ để viết nên các trang Web Từ đây, với dịch vụ World Wide Web,Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người dùngmáy tính – từ người mới bắt đầu làm quen với máy tính đến những người dùng cótrình độ tin học cao.

Về mặt vật lý, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễnthông hiện có Về mặt kỹ thuật, Internet sử

dụng tập giao thức nền tảng gọi là TCP/IP

(Transmission Control Protocol / Internet

Protocol) Một đặc điểm lý thú của TCP

là trước đây, khi định nghĩa về Internet, IP

không phải là một bộ phận trong thiết kế

Trong quá trình phát triển, Denny Cohen ở

USC cho rằng các chức năng hướng kết

nối của TCP là không cần thiết đối với

một số kiểu truyền dữ liệu và chúng tạo ra

phí tổn phát sinh Ông đề nghị tách TCP ra

để thỏa mãn yêu cầu “đúng giờ hơn là

chính xác” Điều cần thiết là tìm cách lấy dữ liệu nhanh chóng để chuyển sang hệthống khác Như vậy, TCP trở thành TCP và IP

Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trênthế giới Internet, cùng với những mặt tốt hoặc xấu của nó mà người ta đang sửdụng hoặc phải đối mặt, đã trở thành một phần quan trọng của đời sống con người

II Những khái niệm nền tảng liên quan đến mạng Internet:

1 Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language) :

Là ngôn ngữ cơ bản để tạo ra các trang web Ngôn ngữ HTML định nghĩa cácthẻ để người dùng định dạng hiển thị trang web lên trình duyệt cũng như cách thứckết nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, …)

Văn bản HTML là các tập tin có phần mở rộng “HTML” hay “HTM” Ta cóthể tạo các file HTML bằng bất ky bộ xử lý văn bản nào

Sẽ có một phần riêng nói về HTML

2 Giao thức truyền siêu văn bản (HyperText Transfer Protocol - HTTP):

Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trênWorld Wide Web Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửivà nhận các trang HTML Giao thức này cung cấp cách thức để xử lý các yêu cầu

Backbone Network Service (BNS)

Một BNS là một tập hợp các đườngcáp rất dài kết nối các máy tính lạivới nhau Very high-speed Backbone Network Service (vBNS) đóng vai trò là đường kết

nối chính cho hệ thống Internet màchúng ta biết ngày nay Đường trụcnày liên kết các trung tâm siêu máytính trên khắp thế giới lại với nhau.vBNS có băng thông lên đến 2.4Gbps

Trang 3

và kết quả phản hồi giữa máy khách (client) và máy chủ (server) Giữa máy kháchvà máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway.Secure HyperText Transfer Protocol (HTTPS hoặc Secure-HTTP) là mộtphiên bản an toàn hơn của HTTP và giao thức này chỉ cho phép truyền một thôngđiệp vào một thời điểm HTTPS vẫn được coi là an toàn vào thời điểm hiện nay.

3 Trình duyệt (Web Browser):

Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng.Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web Thông qua trìnhduyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web Máy chủ dịch vụ web sẽgửi kết quả trả về trình duyệt để hiển thị cho người dùng

Các trình duyệt thông dụng hiện nay:

 Microsoft Internet Explorer

 Mozilla Firefox

 Opera

 Netscape

 Safari

Hình 1: Trình duyệt Mozilla Firefox

4 Địa chỉ IP (IP Address):

a Khái niệm:

Bất ky máy tính nào kết nối Internet, từ nhỏ nhất đến lớn nhất đều được coi làcác máy chủ (host) Một số máy chủ là các mainframe hoặc những server cung cấpdịch vụ cho nhiều nghìn người sử dụng Một số khác là các trạm làm việc hoặc cácmáy tính cá nhân chỉ có một người sử dụng Theo quan điểm của Internet, tất cảđược gọi chung là máy chủ (host)

Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tintrên Internet Khi người dùng gửi 1 yêu cầu đến máy chủ Web, địa chỉ IP của người

Trang 4

dùng đó sẽ được gửi kèm cùng các gói tin chứa yêu cầu đó đến địa chỉ IP của máychủ Web đó Máy chủ Web sẽ gửi kết quả của việc đáp ứng yêu cầu về địa chỉ IPđược gửi kèm đó.

Để làm cho địa chỉ IP dễ nhớ hơn, nó được chia thành 4 nhóm 8 bit và rồi mỗinhóm được chuyển thành số thập phân tương đương Các nhóm sẽ được phân cáchnhau bằng các dấu chấm (.)

Chẳng hạn địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu thành 140.186.81.1

b Phân lớp địa chỉ IP:

Địa chỉ IP được chia làm hai phần, phần mô tả địa chỉ mạng mà máy tính cóđịa chỉ IP đó thuộc về và phần mô tả máy

Địa chỉ IP tự thân nó không chỉ rõ phần nào sẽ mô tả địa chỉ mạng, phần nào

mô tả địa chỉ máy Thành phần subnet mask được chỉ định cùng lúc khi thiết lập địachỉ IP sẽ giúp xác định điều này Subnet mask cũng là 4 nhóm số nhị phân 8 bit nhưđịa chỉ IP, nhưng có điểm khác với địa chỉ IP là subnet mask thường gồm một dãyliên tục các bit 1 và sau đó là một dãy liên tục các bit 0 đặt liên tiếp tiếp nhau tính từtrái sang

Các địa chỉ IP được phân thành 3 lớp A, B, C theo quy tắc như sau:

 Lớp A: 1 byte đầu tiên là địa chỉ mạng

 Lớp B: 2 byte đầu tiên là địa chỉ mạng

 Lớp C: 3 byte đầu tiên là địa chỉ mạng

- Thể hiện địa chỉ theo từng bit:

 Lớp A: 0-7 bit địa chỉ mạng-24 bit địa chỉ host

 Lớp B: 10-14 bit địa chỉ mạng-16 bit địa chỉ host

 Lớp C: 110-21 bit địa chỉ mạng-8 bit địa chỉ host

Các số được in đậm là những bit đầu tiên trong địa chỉ IP

- Thể hiện địa chỉ theo hệ thập phân:

 Lớp A: 1-125.host.host.host

 Lớp B: 128-191.network.host.host

 Lớp C: 192-223.network.network.host

Có thể tổng hợp những điều trên trong bảng sau:

Default Subnet Mask

Trang 5

Số lượng địa chỉ IP có thể cấp phát được dễ nhận thấy là có giới hạn Việc cấpphát địa chỉ IP trên Internet (thường được gọi là địa chỉ IP thực) vì thế cần đượcquản lý chặt chẽ Trên thế giới, tổ chức quốc tế được trao nhiệm vụ quản lý việc cấpphát địa chỉ IP là ICANN.

Đặt trường hợp một công ty có một Website và cần đưa nó lên 1 máy chủ đểmọi người trên Internet đều có thể truy cập được Nếu máy chủ này đặt ngay tạicông ty đó, nó phải được cấp phát một địa chỉ IP thực Trường hợp công ty đókhông có máy chủ nào có địa chỉ IP thực, họ sẽ phải thuê chỗ đặt website từ nhữngcông ty chuyên cung cấp dịch vụ hosting Những vấn đề cụ thể liên quan đến webhosting sẽ được đề cập ở phụ lục 2

Trường hợp ta đang thiết lập một mạng cục bộ (LAN), ta hoàn toàn có thể thiếtlập cấu hình địa chỉ IP tùy ý cho những máy tính cũng như những thiết bị cần có địachỉ IP trong mạng đó Tuy nhiên địa chỉ đó chỉ có ý nghĩa trong mạng cục bộ đó màthôi

Hình 2: Cấu hình địa chỉ IP

5 Tên miền (Domain Name) và URL (Uniform Resource Locator):

Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việctruy cập đến các tài nguyên trên mạng

Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System) đểkhắc phục trở ngại này Domain Name System lưu trữ cơ sở dữ liệu các tên miền(domain name) để giúp người sử dụng dễ dàng hơn trong việc tìm kiếm một địa chỉtrang web cụ thể hơn là dùng hệ thống địa chỉ IP

Khi sử dụng Domain Name System, người dùng có thể sử dụng một tập hợpcác ký tự hay các từ dễ nhớ hơn thay vì gõ địa chỉ IP để truy cập đến một Web site

nào đó Những từ/cụm từ đó được gọi là Uniform Resource Locator, hoặc viết tắt

là URL Dịch vụ tên miền (Domain Name Service) tìm kiếm địa chỉ IP tương ứng

Trang 6

với URL mà người sử dụng nhập vào và sử dụng địa chỉ IP đó để tìm đến trang webmà người sử dụng mong muốn.

Những máy chủ chạy dịch vụ tên miền được gọi là máy chủ tên miền (DomainName Server)

a Các quy định liên quan dến tên miền (Domain Name):

Phân cấp tên miền :

Các dạng tên miền cấp 1 dùng chung:

 COM (commercial): thương mại

 EDU (education): liên quan đến giáo dục

 GOV (government): các tổ chức chính phủ

 ORG (organization): các tổ chức khác

 NET (network): các mạng

 INT (International treaty organizations): các tổ chức quốc tế (hiện chủyếu gồm NATO)

 MIL (US military organizations): các tổ chức quân sự

 Tên miền quốc gia (us, vn, uk, …)

Hệ thống tên miền cấp 1 này không phải là bất biến Hiện nay ngày càng cóthêm nhiều tên miền cấp 1 được thông qua và cho phép sử dụng

b Các quy định liên quan dến URL:

Cấu trúc của URL:

protocol://host_name[:port_num][/path][/file_name]

Trong đó:

- Protocol: một trong các giao thức trên Internet, chẳng hạn http, ftp, …

- Host name: tên máy chủ

- Port num: cổng giao tiếp Mặc nhiên với dịch vụ WWW là cổng 80

- Path và filename: đường dẫn đến tập tin

6 Các tổ chức trên Internet:

a Internet Society (ISOC):

Second level domain

Top level domain

Sub domain

Trang 7

ISOC là tổ chức quốc tế vô chính phủ có mục tiêu đẩy mạnh sự hợp tác toàncầu và phối hợp Internet với các công nghệ và ứng dụng làm việc trên Internet.Web site của ISOC ở điạ chỉ http://www.isoc.org.

b Internet Architecture Board (IAB):

IAB là ban cố vấn kỹ thuật của ISOC Nhiệm vụ của họ là đề cử cho cáccương vị của IETF và các ứng cử viên IESG

Web site của IAB là ở http://www.iab.org/iab

c Internet Engineering Task Force (IETF):

Là tổ chức chịu trách nhiệm sưu liệu và lập nên các chuẩn và giao thức trênInternet

Mọi người có đề xuất hoặc ý tưởng liên quan đến quy trình hoạt động hay cácgiao thức trên Internet đều có quyền đề đạt một Request For Comments, gọi tắt làRFC lên IETF Người ta gọi nó là Request for Comments vì khi RFC này được đưalên, mọi người đều có quyền trao đổi, tranh luận về đề tài này Mỗi RFC sẽ đượcđánh một số định danh riêng biệt, và sau đó sẽ được quyết định có triển khai thựchiện hay không Một vài RFC rất nổi tiếng hoặc tốt đến mức chúng đã trở thànhchuẩn được công nhận và góp phần quy định cách thức Internet vận hành

Website của IETF: http://www.ietf.org

d Internet Engineering Steering Group (IESG):

IESG được ủy quyền bởi ISOC để điều hành kỹ thuật cho các hoạt động IETFvà các quá trình tiêu chuẩn hoá Internet

Web site của IESG là http://www.ietf.org/iesg.htm

e Internet Network Information Center (InterNIC):

InterNIC là kết quả của sự hợp tác giữa NSF (National Science Foundation),công ty AT&T và công ty Network Solutions, Inc Tổ chức này cung cấp việc đăngký tên miền trên Internet

Web site của InterNIC : http://www.internic.net

f World Wide Web Consortium (W3C):

World Wide Web có một tổ chức làm công việc bảo đảm rằng mọi thứ vẫnđang diễn ra trôi chảy và các chuẩn vẫn đang được tôn trọng Tổ chức này được gọilà World Wide Web Consortium, gọi tắt là W3C Tổ chức này ban đầu được dẫn dắtbởi Phòng thí nghiệm về công nghệ máy tính MIT của Tim Berners-Lee (người phátminh ra World Wide Web) và Al Vezza Họ là những người chịu trách nhiệm pháttriển các giao thức chung cho việc cải tiến World Wide Web

Web site: http://www.w3c.org

g Internet Corporation of Assigned Names and Numbers (ICANN):

Trang 8

Được Joe Postel sáng lập năm 1998, ICANN là một tổ chức phi lợi nhuận quảnlý tên miền Internet và địa chỉ IP.

III Một số khái niệm khác:

1 Internet Access Provider (IAP):

Nhà cung cấp cổng truy cập Internet (IAP) quản lý đường truyền và các cổngtruy cập Internet và cho các ISP thuê đường truyền này Tại Việt Nam, tập đoànBưu chính Viễn thông là đơn vị được giao làm IAP

2 Internet Service Provider (ISP):

Một nhà cung cấp dịch vụ Internet (ISP) quản lý một phân vùng trên Internetvà bán kết nối Internet cho khách hàng Họ cũng cấp cho khách hàng một địa chỉemail Nói cách khác, họ cung cấp cho khách hàng những dịch vụ Internet cơ bảnnhất

Một số ISP tại Việt Nam:

 Công ty tin học Bưu điện: http://www.netsoft.com.vn

 FPT: http://www.fpt.vn

 Viettel: http://www.viettel.vn

3 Internet Content Provider (ICP):

Nhà cung cấp thông tin lên Internet (ICP) là tổ chức/cá nhân được cấp phépđưa thông tin lên Internet Những báo điện tử được cấp phép tại Việt Nam chính làcác ICP

7 Search engine:

Cơ chế tìm kiếm Là những site trên Internet hỗ trợ người sử dụng tìm kiếmcác trang web theo từ khóa

IV Một số dịch vụ trên Internet:

1 World Wide Web:

Trang 9

Đây là dịch vụ thông dụng nhất trên Internet Cho phép người dùng truy cập vàxem thông tin trên các website Người dũng phải có trình duyệt web và biết địa chỉcủa website muốn truy cập.

Hình 3: Trang chủ của công ty Microsoft

2 Email

Email, gọi đầy đủ là Electronic mail, là một dịch vụ có từ rất lâu trên mạngmáy tính toàn cầu Đây là dịch vụ cho phép người dùng gửi thông điệp điện tử chonhau thông qua mạng viễn thông

Để có thể sử dụng email, người dùng phải có địa chỉ email Địa chỉ này có

dạng name@domainname.

Hình 4 : Yahoo Mail

Trang 10

Hình 5: Gmail

Hình 6: Outlook Express

3 Dịch vụ truyền file (FTP)

FTP, gọi đầy đủ là File Transfer Protocol, là một dịch vụ cho phép truyền tảifile giữa những máy tính trên Internet với nhau Người dùng sử dụng trình duyệthoặc các chương trình chuyên biệt để kết nối vào FTP server

Một số chương trình thường dùng:

- CuteFTP (http://www.cuteftp.com)

- FTP Explorer (http://www.winsite.com)

4 Chat

Trang 11

Chat là dịch vụ cho phép người dùng hội thoại trực tiếp trên Internet Saunhiều năm phát triển, chat đã có thể truyền tải cả văn bản lẫn âm thanh, video, giúpviệc kết nối giữa con người với nhau càng trở nên dễ dàng hơn.

Một số chương trình chat thông dụng:

- AOL Instant Messenger (http://www.aol.com)

- Yahoo Messenger (http://messenger.yahoo.com)

Hình 7: Yahoo Messenger for Windows Vista

5 Blog

Xuất hiện năm 1997, blog là một dạng nhật ký điện tử do từng cá nhân lập nêntrên mạng Chủ blog viết các blog entry và những người dùng khác comment, chiasẻ Các blogger đang tạo thành các cộng đồng xã hội có tầm ảnh hướng lớn trênmạng

Một số trang web cho phép tạo blog:

Trang 12

Hình 8: Một trang blog trên Blogger.com

Hình 9: Một trang blog trên http://my.opera.com

Trang 13

HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập

ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML” Khi một trang web được tải

về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiểnthị

Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơngiản như Notepad hay TextPad

2 Cấu trúc của một tài liệu HTML:

Tài liệu HTML được chia làm 3 phần, cụ thể như sau:

a HTML section

Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML>

Cặp tag này định nghĩa phạm vi của văn bản HTML

b Header section

Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD>

CHƯƠNG

2

Trang 14

Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web,các từ khóa dùng để tìm kiếm và nhận diện trang web, … Những thông tin nàykhông được hiển thị trên trang web.

c Body section

Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY>

Phần này chứa nội dung của trang web và các tag quy định định dạng của nộidung đó

3 Thành phần HTML (HTML elements):

Hầu hết các thành phần HTML đều có tag bắt đầu và tag kết thúc tương ứng.Dưới đây là cấu trúc chung của một thành phần HTML:

4 Thuộc tính của tag HTML

Các thẻ HTML có thể có thuộc tính Thuộc tính cung cấp thêm thông tin chomột thành phần HTML

Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table> Với một thuộctính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung :

Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value".

Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML

Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữthường

Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy Thông thường

người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận.III Các tag HTML cơ bản:

Trang 15

Đoạn văn bản được định nghĩa bởi thẻ <p>.

HTML tự động thêm vào các dòng trống trên và dưới đoạn

3 Ngắt dòng (line break):

Thẻ <br> được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắtđầu một đoạn mới Thẻ <br> sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML

<br> là một thẻ rỗng Nó không có thẻ đóng

4 Đường kẻ ngang (Horizontal Rule):

Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web.Trong HTML, thẻ <hr> không có thẻ đóng

Dưới đây là những thuộc tính của thẻ này:

leftright

Chỉ định trạng thái canh lề đường kẻ

ngang

Trang 16

Thuộc tính Giá trị Ý nghĩa

noshade noshade Khi được set, thuộc tính này quy định

đường kẻ ngang sẽ được vẽ bằng 1 màu duy nhất Khi không được set, đường kẻ ngang sẽ được phối bằng 2 màu

<H3>My first HTML document</H3>

<HR noshade size = 5 align = center width =

50%>

<P>This is going to be real fun

<H2>Using another heading</H2>

<P ALIGN=center> Another paragraph element

</BODY>

</HTML>

5 Chú thích trong HTML

Chúng ta dùng thẻ comment để thêm các đoạn chú thích vào HTML sourcecode Trình duyệt web sẽ bỏ qua dòng chú thích này

Cú pháp:

<! This is a comment >

6 Một số lưu ý

Khi viết văn bản HTML, chúng ta không thể đoan chắc văn bản đó sẽ đượchiển thị thế nào trong một trình duyệt khác Mặt khác, văn bản sẽ được định dạnglại mỗi khi người dùng thay đổi kích thước cửa sổ trình duyệt Đừng định dạng vănbản bằng cách thêm vào các khoảng trắng hoặc những dòng trống vào văn bản web.HTML sẽ xóa bớt những khoảng trắng được nó coi là dư Một dãy khoảngtrắng liên tiếp bất ky sẽ được coi là một khoảng trắng duy nhất Ngoài ra, trongHTML, một dòng mới sẽ được coi là một khoảng trắng

Việc sử dụng các thẻ <p> để thêm vào các dòng trống cũng là một thói quenxấu Thay vào đó, hãy dùng thẻ <br>

Thẻ <p> có thể được sử dụng mà không có thẻ kết thúc </p> Tuy nhiên, phiênbản HTML kế tiếp sẽ không cho phép bỏ qua bất ky thẻ kết thúc nào

IV Các tag HTML định dạng:

1 Các tag định dạng văn bản:

Trang 17

Tag Ý nghĩa

<big> Định nghĩa văn bản có size lớn hơn bình thường

<em> Định nghĩa văn bản được nhấn mạnh (emphasized)

<small> Định nghĩa văn bản có size nhỏ hơn bình thường

<strong> Tô đậm văn bản

<sub> Định nghĩa chỉ số dưới

<sup> Định nghĩa chỉ số trên

<ins> Định nghĩa văn bản được “thêm vào”

<del> Định nghĩa văn bản đã bị xóa

<s> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

<strike> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

<u> Gạch dưới văn bản

Ví dụ :

<html>

<body>

<strong>This text is strong</strong><br>

<em>This text is emphasized</em><br>

<i>This text is italic</i><br>

<small>This text is small</small><br>

This text contains<sub>subscript</sub><br>

This text contains<sup>superscript</sup><br>

This text contains <ins>inserted</ins>

text<br>

This text contains <del>deleted</del>

text<br>

This text contains <s>deleted</s> text<br>

This text contains <strike>deleted</strike>

<pre> Định nghĩa văn bản được định dạng sẵn

<blockquote> Tạo vùng chú thích dài

<q> Tạo vùng chú thích ngắn

It preserves both spaces

and line breaks.

Trang 18

<body>

Here comes a long quotation:

This is a long quotation This is a

long quotation This is a long

quotation This is a long quotation

This is a long quotation.

With the block quote element, the

browser inserts line breaks and

margins, but the q element does not

render as anything special.

</p>

</body>

</html>

Kết quả:

V Các ký tự đặc biệt:

Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn (<)cho biết điểm bắt đầu của một thẻ HTML Phần dưới đây trình bày cách chèn nhữngký tự này vào nội dung trang web như những ký tự thông thường khác

Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand (&), phần tên

thực thể được quy định trước hoặc dấu # và số hiệu thực thể (cũng được quy định

trước), và cuối cùng là dấu chấm phẩy (;)

Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong

văn bản HTML

Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường.

VI Siêu liên kết (hyperlink):

Trang 19

Siêu liên kết thường được dùng để liên kết đến một tài liệu khác trên web.

Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này

1 Cú pháp:

<a href="url">Text to be displayed</a>

Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tínhhref được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bảnnằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink

Ví dụ:

<HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

<a href="http://www.w3c.org/">Visit World Wide Web Consortium!</a>

</BODY>

</HTML>

2 Thuộc tính target:

Thuộc tính target xác định liên kết sẽ được mở ra ở đâu Ví dụ sau đây sẽ mởtrang Vietnamnet trong một cửa sổ trình duyệt mới

<a href="http://www.vnn.vn/" target="_blank">Visit Vietnamnet!</a>

3 Thuộc tính name:

Thuộc tính name được sử dụng để tạo một điểm dừng trong trang web Khi sửdụng điểm dừng chúng ta có thể nhảy tới một vị trí cụ thể trên trang web thay vì đểngười dùng phải cuộn trang và tìm nội dung mình muốn xem

Dưới đây là cú pháp để tạo nên một điểm dừng:

<a name="label">Text to be displayed</a>

Với label là tên của điểm dừng muốn tạo Điểm dừng sẽ được tạo tại vị trí đặttag <a>

Chẳng hạn, để tạo một điểm dừng có tên là Chapter1, ta thực hiện như sau:

<A NAME=“Chapter1”> Chapter 1</A>

Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau:

- Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa

điểm dừng:

<A HREF=“#Chapter1”> Go to Chapter 1</A>

- Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang

web chứa điểm dừng:

<A HREF=“URL#Chapter1”> Go to Chapter 1</A>

Với URL là địa chỉ của trang web chứa điểm dừng

4 Liên kết đến địa chỉ email:

Ví dụ:

Trang 20

<b>Note:</b> Spaces between words should be replaced by %20 to

<b>ensure</b> that the browser will display your text properly.

%20party!">Send mail!</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to

<b>ensure</b> that the browser will display your text properly.

</p>

</body>

</html>

VII Bảng biểu:

1 Quy định chung:

Bảng trong HTML được định nghĩa bởi thẻ <table> Một bảng được chia thànhcác dòng (với thẻ <tr>), và mỗi dòng lại được chia thành các data cell (được định

nghĩa bởi thẻ <td>) Chữ td thay thế cho cụm từ "table data" Một data cell có thể

chứa text, image, list, paragraph, form, horizontal rule, table, …

Trang 21

- BORDER=“x” : kích thước viền

- CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô

- CELLSPACING: khoảng cách giữa các ô trong bảng

- ROWSPAN, COLSPAN: trộn các dòng hoặc cột

- <TR>: dòng, <TD> cột, <TH>: heading

- <CAPTION>: tiêu đề mô tả bảng

Hình 4: Biểu diễn thuộc tính của table

VIII Tạo danh sách:

</UL>

Trang 22

Dưới đây là kết quả của đoạn code trên:

IX Chèn hình ảnh:

1 Quy định chung:

Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>

Thẻ <img> là một thẻ rỗng Điều này có nghĩa là thẻ <img> chỉ chứa các thuộctính và không có thẻ kết thúc

Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src Src là

viết tắt của chữ "source" Giá trị của thuộc tính src là URL của hình ảnh chúng tamuốn hiển thị trên trang

Cú pháp chung như sau:

<img src="url">

2 Thuộc tính ALT:

Thuộc tính "alt" báo cho người đọc trang web biết nội dung của hình ảnh trongtrường hợp trình duyệt không thể hiển thị hình ảnh đó Trình duyệt sẽ hiển thị

“alternate text” tha vì hiển thị hình ảnh

Trang 23

Cú pháp chung:

<img src="url" alt=”alternate text”>

<p>If the image is smaller

than the page, the image will

Trang 24

</map>

<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or

"name" (browser dependant) attribute in

the map element, therefore we have added both the "id" and "name" attributes to the map element.</p>

Hình 10: Một số dạng frame

1 Thẻ Frameset:

Thẻ <frameset> định nghĩa cách thức chia cửa sổ trình duyệt thành các frame

- Thuộc tính ROWS và COLS quy định kích cỡ các frame trong tậphợp frame

- Mỗi thuộc tính chứa một danh sách các đối số quy định độ rộngngăn cách nhau bằng dấu phẩy Đối số này có thể là pixels, là %, hoặc là độrộng tương đối

- Độ rộng tương đối được thể hiện dưới dạng i* với i là số nguyênChẳng hạn: ROWS="3*,*" (* được hiểu là 1*) sẽ cho kết quả là dòng đầu cóđộ cao gấp 3 lần so với dòng thứ hai

- ROWS quy định chiều cao của dòng, tính từ trên xuống

- COLS quy định độ rộng của cột, tính từ trái qua phải

Trang 25

- Nếu ROWS hoặc COLS bị bỏ qua (không khai báo), giá trị mặc định sẽ là100%

- Nếu cả hai thuộc tính đều được chỉ định, một lưới sẽ được thiết lập từ tráiqua phải - và sau đó là từ trên xuống

Thuộc tính của <FRAME …>:

- NAME=“tên_frame”: đặt tên cho frame

- SRC=“URL” : địa chỉ trang web được hiển thị

- TARGET: xác định frame mặc định cho các hyperlink trong frame này

- BORDER=“x” : xác định kích thước đường viền

- SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar

- NORESIZE: không cho phép hiệu chỉnh kích thước frame window

3 Ví dụ chung:

<BODY>

<H1>Table of Contents</H1>

<UL>

<LI> <A HREF="Row1_Column1.html">Photo 1</A></LI>

Trang 26

submit form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạnnhư một Web server, mail server, ).

Mọi form phải được bắt đầu bằng 1 tag <form> Tag <form> có thể được đặt ởbất ky đâu trong phần body của văn bản HTML Form phải được kết thúc bằng tag

<LABEL for="firstname">First name: </LABEL>

<LABEL for="email">email: </LABEL>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

</P>

</FORM>

2 Các thuộc tính của form:

- METHOD: phương thức truyền dữ liệu (GET/POST)

- ACTION: chương trình/trang web xử lý dữ liệu của form

3 Các thành phần nhập liệu (Control):

Người dùng tương tác với form thông qua các control

Mỗi control có một tên, được xác định bởi thuộc tính name của control đó.

Tên của một đối tượng trên form có phạm vi hiệu lực chỉ trong form đó

Mỗi control đều có “giá trị ban đầu” và “giá trị hiện thời” Những giá trị nàyđều được lưu dưới dạng chuỗi

Ban đầu, giá trị hiện thời của control được thiết lập bằng với giá trị ban đầu.Sau đó, giá trị hiện thời có thể sẽ bị thay đổi do chỉnh sửa của người dùng hoặc docác đoạn script

Khi form được “reset”, giá trị của các control lại được set về giá trị ban đầu.Nếu một control không có giá trị ban đầu, tác động của việc reset form trên controlđó là không xác định

Để yêu cầu người dùng nhập liệu trên form, ta sử dụng tag <input… />

4 Thuộc tính của các thành phần nhập liệu trên form:

- VALUE: giá trị của INPUT

Trang 27

- MAXLENGTH: độ dài tối đa của chuỗi được nhập vào

5 Các thành phần nhập liệu trên form:

a Text và Password:

Trang 28

e Text Area:

Ví dụ :

<form>

The cat was playing in the garden

Ví dụ :

<input type="button" value="Hello

world!">    

<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"

VALUE="Submit">    

<INPUT TYPE="RESET" NAME="BTNRESET"

<bgsound src="link_đến_file_nhạc" loop="-1">

Thuộc tính loop có giá trị là -1 cho biết bản nhạc sẽ được lặp vô hạn Chấpnhận các định dạng MID, WAV, RAM, RA, AIF, …

2 Chuyển hướng trang web tự động:

Để cho phép tự động chuyển sang trang web khác, đặt dòng code sau ở phầnhead của văn bản HTML:

<META HTTP-EQUIV=“refresh” CONTENT=“x”; URL=“file.htm”>

Với x là số giây delay trước khi chuyển sang trang mới, URL chứa địa chỉtrang web muốn chuyển tới

3 Thiết lập encoding cho trang web:

Để thiết lập encoding dạng Unicode cho trang, đặt dòng code sau ở phần headcủa văn bản HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Trang 30

CASCADING STYLE SHEETS

I Giới thiệu:

1 Giới thiệu chung

Khi Cascading Style Sheets (CSS) được giới thiệu lần đầu tiên vào cuối năm

1996, công nghệ này đã đem đến một vận hội mới cho những người phát triển web.CSS cho phép thiết kế trang tinh xảo hơn, đẹp hơn tất cả những gì họ đã từng biết,cũng như giúp cho việc phát triển và bảo trì những site lớn, phức tạp trở nên dễdàng hơn CSS cũng đơn giản hóa việc làm cho trang web có thể được truy cập bởicàng nhiều người càng tốt, bất kể họ dùng thiết bị gì để đọc trang web, bất kể côngnghệ gì họ sử dụng

Kể từ đó, web đã có nhiều thay đổi Trình duyệt web đã được tích hợ vào đệnthoại di động, và người ta duyệt web cả từ vô tuyến truyền hình cũng như máy chơigame HTML đã trở thành chuẩn được chấp nhận rộng rãi CSS cũng đã trở thànhmột công nghệ vững mạnh, được hỗ trợ tốt và dễ sử dụng để tạo lập giao diện chotrang web

Nói một cách ngắn gọn, CSS cung cấp một phương cách hữu hiệu để người

thiết kế web có thể tách biệt giao diện của trang web ra khỏi nội dung của trang

web đó Chúng ta sẽ cùng tìm hiểu cách thức làm điều này như thế nào, và tại sao

nên làm như thế

Trong style sheet chứa các style rule Mỗi rule chỉ thị cách thức định dạng một

thành phần cụ thể trên văn bản HTML, chẳng hạn paragraph, h1, …

Nhiều file HTML có thể liên kết đến cùng một file CSS

3 Cascading có nghĩa gì?

Có ba dạng style sheet có thể tác động đến việc hiển thị nội dung của văn bảnHTML trên trình duyệt Đó là:

• Browser style sheet: Trình duyệt á dụng style sheet lê tất cả văn bản

web Mặc dù những style sheet này có thể có khác biệt nhau tùy theotrình duyệt, chúng vẫncó những điểm chung, chẳng hạn như quy định

CHƯƠNG

3

Trang 31

text có màu đen, siêu liên kết có màu xanh, và liên kết đã được nhấnvào thì có màu tía Tất cả những quy định này được gọi chung làbrowser style sheet mặc định.

• User style sheet: Người dùng là bất ky ai đó ghé thăm web site Hầu

hết trình duyệt hiện nay đều cho phép người dùng thiết lập style sheetcủa riêng họ trong trình duyệt Những style sheet này sẽ có mức ưu tiênsử dụng cao hơn browser style sheet mặc định

• Author style sheet: Là style sheet do người phát triển web site tạo lập.

Khi chúng ta áp dụng một style sheet lên một trang web, chúng ta đã sử

dụng author style sheet Những style sheet này sẽ có mức ưu tiên sử

dụng cao hơn user style sheet

Việc phân tầng ưu tiên sử dụng style sheet này chính là ý nghĩa của cascading(phân tầng)

4 Ưu điểm của CSS:

Sử dụng CSS có một số lợi điểm sau:

• Dễ bảo trì: Sức mạnh của CSS nằm ở chỗ một file CSS có thể được sử

dụng để điều khiển cách thức hiển thị của nhiều vă bản HTML khácnhau Việc thay đổi gia diện của site giờ đây chỉ đơn giản là sửa đổimột file CSS duy nhất thay vì phải chỉnh sửa nhiều file HTML nhưtrước kia

• Kích cỡ file nhỏ hơn: CSS cho phép người thiết kế loại bỏ toàn bộ

phần định dạng khỏi văn bản HTML, kể cả layout table, spacer image,nhưng hình ảnh trang trí, font, màu sắc, độ rộng, chiều cao, hình nền.Việc hiển thị được điều khiển bới các CSS file Điều này có thể làmgiảm rõ rệt kích thước của các tập tin HTML

• Tăng cường khả năng truy cập: CSS buộc người phát triển web phải

chú ý đến cấu trúc, kết quả là trang web sẽ được dịch dễ dàng hơn trêntrình duyệt, điều này hiệu quả nhất là đối với những người dùng có thịlực kém Những người dùng như vậy có thể dễ dàng chỉ định style sheetcủa riêng họ cho cả site, chẳng hạn với size chữ lớn hơn và màu sắc cóđộ tương phản cao hơn Thêm vào đó, CSS có thể định nghĩa nhữngstyle sheet có thể xác định âm lượng và ngữ điệu của văn bản sẽ đượcđọc cho người mù bằng trình duyệt text-to-speech

browser

style sheet

user style sheet

author style sheet

Web page

Trang 32

• Khả năng định dạng phong phú hơn: CSS cho phép chỉ định nhiều

định dạng văn bản phong phú hơn so với HTML, chẳng ạn độ rộngcủa lề , khoảng cách giữa các ký tự, chiều cao dòng,

• Hỗ trợ in ấn tốt hơn: CSS có thể được định nghĩa cho nhiều đối tượng

kết xuất khác nhau Chúng ta có thể tạo một bộ CSS rule để người dùngxem trang web online, và một bộ khác để tạo bản dùng để in

5 Style sheet làm việc như thế nào?

Style sheet là một tập hợp các chỉ thị đề nghị cách thức web browser hiển thị

nội dung của trang Lưu ý là "đề nghị" chứ không phải "yêu cầu", vì CSS không bắtbuộc trình duyệt phải hiển thị trang web theo một cách cụ thể nào đó, nó chỉ đề nghịtrình duyệt cách thức hiển thị nội dung mà thôi

Hình 11: Sử dụng style sheet để tách biệt phần nội dung với phần hiển thị

II Sử dụng style rule

Mỗi Cascading Style Sheet, kể cả dưới dạng css file hay được nhúng trong

văn bản HTML, là một tập hợp các chỉ thị gọi là style rule

1 Cấu trúc của style rule

Mỗi style rule bao gồm:

- Một selector, dùng để xác định các đối tượng được áp dụng style được

quy định bởi style rule

- Một danh sách các thuộc tính (property) và giá trị của thuộc tính đó

2 Khai báo style rule

Một khai báo style rule thường có dạng sau:

Trang 33

Hình 12: Rule set structure

Chúng ta cũng có thể khai báo style rule trên cùng một dòng, ví dụ như sau:

h2 { font-style: italic; text-align: center; color: navy; }

Dưới đây là ví dụ về một đoạn CSS có nhiều khai báo:

Lưu ý: Chúng ta có thể thêm các đoạn chú thích vào CSS Phần chú thích phải

được bắt đầu bằng cặp dấu /* và kết thúc bằng cặp dấu */

3 Sử dụng shorthand property:

Shorthand property cho phép giá trị của nhiều thuộc tính có thể được chỉ địnhtrên một thuộc tính duy nhất Shorthand property cũng dễ viết và bảo trì hơn Chúngcòn làm cho tập tin CSS ngắn gọn và súc tích hơn

Ví dụ, một thẻ HTML là <h2> có thể được định dạng bằng các thuộc tính

font-style, font-variant, font-weight, font-size, line-height, and font-family Thay vào đó,

chúng ta có thể dùng một shorthand property duy nhất là font.

Hai khai báo dưới đây là tương đương nhau:

Trang 34

Giá trị của shorthand property font bao gồm style, variant,

font-weight, font-size, line-height, và font-family Tuy nhiên, chúng ta không nhất thiếtphải chỉ định tất cả các giá trị này khi khai báo style rule

Giả sử, với thẻ <p>, có thể người thiết kế web chỉ muốn chỉ định giá trị

font-size và font-family Trong trường hợp đó, font-style, font-variant, font-weight, vàline-height không được chỉ định khi khai báo rule Kết quả là những thuộc tính đósẽ được gán giá trị mặc định

font: 80% arial, helvetica, sans-serif;

padding: 1em 2em 3em 4em;

}

Ví dụ:

h1

{

border: 1px solid gray;

background: yellow url(tint.jpg) repeat-y 100% 0;

h1 { border: 1px solid gray; }

Trang 35

Thuộc tính background kết hợp các thuộc tính color,

background-image, background-repeat, background-attachment, và background-position.

Thuộc tính list-style kết hợp các thuộc tính list-style-type, list-style-position, và

list-style-image.

III Sử dụng selector

Selector là một trong những thành phần quan trọng nhất của CSS vì nó đượcdùng để "select" các tag HTML trên trang, từ đó tiến hành định dạng trang

Chúng ta cùng tìm hiểu về selector qua đoạn mã HTML sau:

vào định dạng của đối tượng nằm trong nó

Trong ví dụ ở trên, thẻ <div> được dùng để phân chia các vùng nội dung Sau

đó, các vùng này có thể được định dạng bởi CSS

Trang 36

Chẳng hạn, để chọn tất cả tag <li> trên trang, chúng ta sử dụng selector <li>trong CSS như trong đoạn mã CSS dưới đây:

li { color: blue;}

2 Class Selectors:

Class selector có thể được sử dụng để chọn bất ky HTML element nào có

thuộc tính class và thuộc tính này đã được gán giá trị.

Trong đoạn mã HTML ở trên, có hai HTML element có thuộc tính class: <p

class="intro"> và <a href="#" class="intro">.

Để thiết lập định dạng cho tất cả đối tượng thuộc về class intro, chúng ta sử dụng selector intro trong mã CSS theo phương cách như sau:

<p class="intro"> và <a href="#" class="intro"> riêng rẽ Điều này có thể thưc

hiện được theo cách sau:

ID selector khá giống với class selector có thể được sử dụng để chọn bất ky

HTML element nào có thuộc tính id và thuộc tính này đã được gán giá trị Tuy

nhiên, mỗi ID chỉ có thể được sử dụng duy nhất 1 lần trên cùng một văn bảnHTML, trong khi có thể có nhiều thành phần thuộc về cùng một class

Trong đoạn mã HTML ở trên, ID được dùng để xác định các phần nội dung,

đó là content, nav (navigation), và footer Có ba ID: <div id="content">, <div

id="nav">, và <div id="footer"> Để chỉ định định dạng cho <div id="nav">,

chúng ta dùng selector #nav như sau:

Trang 37

Chẳng hạn, trong đoạn mã HTML ở trên, có ba thẻ <a> ở mức con của thẻ

<li> Để định dạng chỉ ba thẻ <a> này mà không ảnh hưởng đến tất cả các thẻ <a>còn lại, một descendant selector có thể được sử dụng Selector này nhắm đến tất cảthẻ <a> nằm bê trong thẻ <li>:

Child selector được dùng để chọn những thành phần là con trực tiếp của một

thành phần khác(thành phần cha) Child selector không chọn tất cả thành phần ở cácmức con khác nhau mà chỉ chọn những thành phần ở mức con trực tiếp Lấy ví dụ,chúng ta muốn chọn thẻ <em> ở mức con trực tiếp của thẻ <div>, nhưng khôngchọn những thẻ <em> tuy vẫn là con của <div> nhưng đã phải qua ít nhất một mứctrung gian

Trang 38

b Adjacent sibling selector

Adjacent sibling selector sẽ chọn một thành phần ở ngay bên dưới một thành

phần khác trong văn bản HTML Ví dụ, chúng ta muốn định dạng tag <h3>, nhưngchỉ là những tag <h3> nằm ngay dưới một tag <h2> Đây là một ví dụ thường đượcsử dụng vì nó có ứng dụng thực tế Thường thì có quá nhiều khoảng cách giữa vănbản dùng tag <h2> với văn bản dùng tag <h3> khi chúng xuất hiện ngay cạnh nhau.Selector được khai báo như sau:

IV Sử dụng style trong thiết kế trang web

Có ba cách để sử dụng style sheet trên một trang HTML:

• Inline styles

• Header styles

• External style sheets

1 Inline styles

Inline styles có thể được áp dụng trực tiếp vào các tag HTML bằng cách dùng

thuộc tính style Tuy nhiên, nên tránh sử dụng inline styles vì những quy định về

style được thêm vào từng thẻ HTML Điều này đi ngược lại mục đích chính củaCSS là áp dụng cùng một style cho càng nhiều trang web càng tốt bằng cách sửdụng external style sheets

Dưới đây là một ví dụ về inline styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<p style="font-family: arial, helvetica, sans-serif; margin:

1em;padding: 1em; background-color: gray; width: 10em;">

Lorem ipsum dolor sit amet, consectetuer adipiscing

elit

</p>

</body>

</html>

Trang 39

2 Header styles

Các CSS rule có thể được đặt ở phần <head> của văn bản web bằng cách dùng

thẻ <style> Giống như inline styles, header styles cũng nên được tránh vì quy định

về style được đưa trực tiếp vào văn bản HTML thay vì dùng các tập tin CSS

Tuy vậy, có những trường hợp ngoại lệ với cách áp dụng style này Chẳng hạnmột CSS rule chí tác động đến một trang duy nhất trong cả web site Thay vì thêmrule này vào file CSS chung, ta có thể sử dụng header style

Dưới đây là ví dụ về header styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<title>Lesson 4 - listing 2</title>

<style type="text/css" media="screen">

3 External Style Sheets

Phương cách thứ ba để áp dụng style lên văn bản web là liên kết đến tập tinCSS Style sheet đặt ở bên ngoài văn bản HTML là lựa chọn khả dĩ nhất với nhữngweb site sử dụng style Nếu cần phải thay đổi style, chúng ta chỉ cần sửa đổi trênmột file CSS duy nhất thay vì phải thực hiện chỉnh sửa trên từng trang HTML.File CSS có nội dung là tập hợp các rule có dạng tương tự như rule sau đây:

Trang 40

Giả sử chúng ta tại một file CSS với nội dung như trên và lưu với tên laF

style.css Việc áp dụng style sẽ được thực hiện bằng cách dùng thẻ link trên văn bản

1 Inline Element và Block Level Element

Block level element thường được hiển thị như những khối với những ký tự ngắt

dòng ở bên trên và bên dưới khối đó Một số ví dụ về block level element làparagraph, heading, div, và block quote

Inline element không được hiển thị như một khối Nội dung được hiển thị trên

các dòng và không có dấu ngắt dòng Điển hình cho những thành phần loại này làcác tag <em>, <strong>, và <a>

Định dạng
Số trang	133
Dung lượng	4,31 MB