BÀI BÁO CÁO-GIÁO TRÌNH THIẾT KẾ WEB

Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị.. Cú pháp: Text to be displayed Thẻ được dùng để tạo một điểm neo anch

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 Kỳ khởi xướng vào năm 1969 ARPA là viết tắt của cụm từ Advanced Research Projects Agency – Cơ quan các Dự án Nghiên cứu Cao cấp, một bộ phận trực thuộc bộ 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 khoa họ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̀nh cá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ột phầ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ến tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên kế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ốn gia 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ới nhau 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́y tí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̣ng riê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ực nhằ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ối cá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 độc lậ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 qua phươ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́ giao diệ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́t triể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ống menu đơ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ới trong việc sử dụng Internet Tim Berners-Lee là người đã phát triển các giao thức nề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̀ng má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ễn thô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ên thế 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́c thẻ để 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ức kế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 bản (HyperText Transfer Protocol - HTTP):

Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên World Wide Web Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi

và nhận các trang HTML Giao thức này cung cấp cách thức để xử lý các yêu cầu

Backbone Network Service (BNS)

Một BNS là một tập hợp các đường cáp rất dài kết nối các máy tính lại vớ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̣c này liên kết các trung tâm siêu máy tính trên khắp thế giới lại với nhau vBNS có băng thông lên đến 2.4 Gbps

Trang 3

và kết quả phản hồi giữa máy khách (client) và máy chủ (server) Giữa máy khách

và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway.Secure HyperText Transfer Protocol (HTTPS hoặc Secure-HTTP) là một phiên bản an toàn hơn của HTTP và giao thức này chỉ cho phép truyền một thông điệp vào một thời điểm HTTPS vẫn được coi là an toàn và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̀nh duyệ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: Trình duyệt Mozilla Firefox

4 Địa chỉ 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ấp dị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́c máy tính cá nhân chỉ 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 chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin trên Internet Khi người dùng gửi 1 yêu cầu đến máy chủ Web, địa chỉ 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 chỉ IP của máy chủ 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 chỉ IP được gửi kèm đó.

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

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

b Phân lớp địa chỉ IP:

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

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

mô tả địa chỉ máy Thành phần subnet mask được chỉ định cùng lúc khi thiết lập địa chỉ 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 chỉ IP, nhưng có điểm khác với địa chỉ IP là subnet mask thường gồm một dãy liên tục các bit 1 và sau đó là một dãy liên tục các bit 0 đặt liên tiếp tiếp nhau tính từ trái sang

Các địa chỉ 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 chỉ mạng

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

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

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

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

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

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

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

- Thể hiện địa chỉ 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 chỉ IP có thể cấp phát được dễ nhận thấy là có giới hạn Việc cấp phát địa chỉ IP trên Internet (thường được gọi là địa chỉ IP thực) vì thế cần được quả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ấp phát địa chỉ 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̣i công ty đó, nó phải được cấp phát một địa chỉ IP thực Trường hợp công ty đó không có máy chủ nào có địa chỉ IP thực, họ sẽ phải thuê chỗ đặt website từ những công ty chuyên cung cấp dịch vụ hosting Những vấn đề cụ thể liên quan đến web hosting 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ết lập cấu hình địa chỉ IP tùy ý cho những máy tính cũng như những thiết bị cần có địa chỉ IP trong mạng đó Tuy nhiên địa chỉ đó chỉ có ý nghĩa trong mạng cục bộ đó mà thôi

Hình 2: Cấu hình địa chỉ 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 chỉ IP khó nhớ và gây nhiều trở ngại trong việc truy 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 chỉ trang web cụ thể hơn là dùng hệ thống địa chỉ IP

Khi sử dụng Domain Name System, người dùng có thể sử dụng một tập hợp các ký tự hay các từ dễ nhớ hơn thay vì gõ địa chỉ 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 chỉ 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 chỉ IP đó để tìm đến trang web mà 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 (Domain Name 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 phé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̀n cầ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̣ chỉ 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́c cươ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ên Internet

Mọi người có đề xuất hoặc ý tưởng liên quan đến quy trình hoạt động hay các giao 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 đưa lê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ực hiệ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̀nh chuẩ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 IETF và 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 đăng ký 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̣i là World Wide Web Consortium, gọi tắt là W3C Tổ chức này ban đầu được dẫn dắt bởi Phòng thí nghiệm về công nghệ máy tính MIT của Tim Berners-Lee (người phát minh ra World Wide Web) và Al Vezza Họ là những người chịu trách nhiệm phát triể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 sáng lập năm 1998, ICANN là một tổ chức phi lợi nhuận quản

lý tên miền Internet và địa chỉ IP

III Một số khái niệm khác:

1 Internet Access Provider (IAP):

Nhà cung cấp cổng truy cập Internet (IAP) quản lý đường truyền và các cổng truy cập Internet và cho các ISP thuê đường truyền này Tại Việt Nam, tập đoàn Bưu chính Viễn thông là đơn vị được giao là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 Internet và 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 chỉ email Nói cách khác, họ cung cấp cho khách hàng những dịch vụ Internet cơ bản nhất

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

 Công ty tin họ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) là tổ chức/cá nhân được cấp phép đưa thông tin lên Internet Những báo điện tử được cấp phép tại Việt Nam chính là các ICP

Trang 9

1 World Wide Web:

Đây là dịch vụ thông dụng nhất trên Internet Cho phép người dùng truy cập và xem thông tin trên các website Người dũng phải có trình duyệt web và biết địa chỉ của website muốn truy cập

Hình 3: Trang chủ của công ty Microsoft

2 Email

Email, gọi đầy đủ là Electronic mail, là một dịch vụ có từ rất lâu trên mạng máy tính toàn cầu Đây là dịch vụ cho phép người dùng gửi thông điệp điện tử cho nhau thông qua mạng viễn thông

Để có thể sử dụng email, người dùng phải có địa chỉ email Địa chỉ này có

dạng name@domainname.

Hình 4 : Yahoo Mail

Trang 10

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 là dịch vụ cho phép người dùng hội thoại trực tiếp trên Internet Sau nhiều năm phát triển, chat đã có thể truyền tải cả văn bản lẫn âm thanh, video, giúp việc kết nối giữa con người với nhau càng trở nên dễ dàng hơn.

Một số chương trình chat thông dụng:

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

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

Hình 7: Yahoo Messenger for Windows Vista

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ô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập

ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML” Khi một trang web được tải

về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị

Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu

là htm hoặc html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web biết cách hiển thị nội dung đó

Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn giản như Notepad hay TextPad

2 Cấu trúc của một tài liệu HTML:

Tài liệu HTML được chia làm 3 phần, cụ thể như sau:

a.HTML section

Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML>

Cặp tag này định nghĩa phạm vi của văn bản HTML

b Header section

Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD>

CHƯƠNG

2

Trang 14

Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, … Những thông tin này không được hiển thị trên trang web.

c.Body section

Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY>

Phần này chứa nội dung của trang web và các tag quy định định dạng của nội dung đó

4 Thuộc tính của tag HTML

Các thẻ HTML có thể có thuộc tính Thuộc tính cung cấp thêm thông tin cho một thành phần HTML

Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table> Với một thuộc tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung :

Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value".

Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML

Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ thường

Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy Thông thường

người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận.III Các tag HTML cơ bản:

Trang 15

Đoạn văn bản được định nghĩa bởi thẻ <p>.

HTML tự động thêm vào các dòng trống trên và dưới đoạn

4 Đường kẻ ngang (Horizontal Rule):

Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web Trong HTML, thẻ <hr> không có thẻ đóng

Dưới đây là những thuộc tính của thẻ này:

leftright

Chỉ định trạng thái canh lề đường kẻ ngang

Trang 16

Thuộc tính Giá trị Ý nghĩa

đường kẻ ngang sẽ được vẽ bằng 1 màu duy nhất Khi không được set, đường kẻ ngang sẽ được phối bằng 2 mà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

Việc sử dụng các thẻ <p> để thêm vào các dòng trống cũng là một thói quen xấu Thay vào đó, hãy dùng thẻ <br>

Thẻ <p> có thể được sử dụng mà không có thẻ kết thúc </p> Tuy nhiên, phiên bản HTML kế tiếp sẽ không cho phép bỏ qua bất kỳ thẻ kết thúc nào

IV.Các tag HTML định dạng:

1 Các tag định dạng văn bản:

Trang 17

Tag Ý nghĩa

<big> Định nghĩa văn bản có size lớn hơn bình thường

<em> Định nghĩa văn bản được nhấn mạnh (emphasized)

<small> Định nghĩa văn bản có size nhỏ hơn bình thường

<strong> Tô đậm văn bản

<sub> Định nghĩa chỉ số dưới

<sup> Định nghĩa chỉ số trên

<ins> Định nghĩa văn bản được “thêm vào”

<del> Định nghĩa văn bản đã bị xóa

<s> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

<strike> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

Ví dụ :

<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> Định nghĩa văn bản được định dạng sẵn

<blockquote> Tạo vùng chú thích dài

It preserves both spaces

and line breaks.

Trang 18

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.

ký tự này vào nội dung trang web như những ký tự thông thường khác

Một ký 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 định trước hoặc dấu # và số hiệu thực thể (cũng được quy định

trước), và cuối cùng là dấu chấm phẩy (;)

Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong

văn bản HTML

Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường.

Trang 19

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

Siêu liên kết thường được dùng để liên kết đến một tài liệu khác trên web

Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này

1 Cú pháp:

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

Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tính href được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bản nằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink

Ví dụ:

<HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

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

Dưới đây là cú pháp để tạo nên một điểm dừng:

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

Với label là tên của điểm dừng muốn tạo Điểm dừng sẽ được tạo tại vị trí đặt tag <a>

Chẳng hạn, để tạo một điểm dừng có tên là Chapter1, ta thực hiện như sau:

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

Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau:

- Trường hợp điểm đặt siêu liên kết nằm trên cù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 khác với trang

web chứa điểm dừng:

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

Với URL là địa chỉ của trang web chứa điểm dừng

Trang 20

4 Liên kết đến địa chỉ email:

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

nghĩa bởi thẻ <td>) Chữ td thay thế cho cụm từ "table data" Một data cell có thể

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

Trang 21

- CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô

- CELLSPACING: khoảng cách giữa các ô trong bảng

- <TR>: dòng, <TD> cột, <TH>: heading

- <CAPTION>: tiêu đề mô tả bảng

Hình 4: Biểu diễn thuộc tính của table

VIII Tạo danh sách:

Trang 22

Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>

Thẻ <img> là một thẻ rỗng Điều này có nghĩa là thẻ <img> chỉ chứa các thuộc tính và không có thẻ kết thúc

Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src Src là

viết tắt của chữ "source" Giá trị của thuộc tính src là URL của hình ảnh chúng ta muốn hiển thị trên trang

Cú pháp chung như sau:

<img src="url">

Trang 23

<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ố dạng frame

1 Thẻ Frameset:

Thẻ <frameset> định nghĩa cách thức chia cửa sổ trình duyệt thành các frame

hợp frame

ngăn cách nhau bằng dấu phẩy Đối số này có thể là pixels, là %, hoặc là độ rộng tương đối

- Độ rộng tương đối được thể hiện dưới dạng i* với i là số nguyên

Trang 25

Chẳng hạn: ROWS="3*,*" (* được hiểu là 1*) sẽ cho kết quả là dòng đầu có

độ cao gấp 3 lần so với dòng thứ hai

- ROWS quy định chiều cao của dòng, tính từ trên xuống

- COLS quy định độ rộng của cột, tính từ trái qua phải

- Nếu ROWS hoặc COLS bị bỏ qua (không khai báo), giá trị mặc định sẽ là 100%

- Nếu cả hai thuộc tính đều được chỉ định, một lưới sẽ được thiết lập từ trái qua phải - và sau đó là từ trên xuống

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

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

- SRC=“URL” : địa chỉ trang web được hiển thị

- TARGET: xác định frame mặc định cho các hyperlink trong frame này

- BORDER=“x” : xác định kích thước đường viền

- SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar

- NORESIZE: không cho phép hiệu chỉnh kích thước frame window

3 Ví dụ chung:

<BODY>

<H1>Table of Contents</H1>

<UL>

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

Trang 26

1 Giới thiệu:

Một HTML form là một vùng trên văn bản HTML có chứa các đối tượng đặc biệt gọi là control (chẳng hạn như checkbox, radio button, menu, ) và nhãn của các control đó Người dùng "hoàn tất" nội dung trên form bằng cách thay đổi giá trị của các control này (nhập văn bản, chọn các mục trình đơn, …) Sau đó, người dùng submit form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạn như 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 Các thuộc tính của form:

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

3 Các thành phần nhập liệu (Control):

Người dùng tương tác với form thông qua các control

Mỗi control có một tên, được xác định bởi thuộc tính name của control đó

Tên của một đối tượng trên form có phạm vi hiệu lực chỉ trong form đó

Mỗi control đều có “giá trị ban đầu” và “giá trị hiện thời” Những giá trị này đều được lưu dưới dạng chuỗi

Ban đầu, giá trị hiện thời của control được thiết lập bằng với giá trị ban đầu Sau đó, giá trị hiện thời có thể sẽ bị thay đổi do chỉnh sửa của người dùng hoặc do các đoạn script

Khi form được “reset”, giá trị của các control lại được set về giá trị ban đầu Nếu một control không có giá trị ban đầu, tác động của việc reset form trên control

đó là không xác định

Trang 27

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

4 Thuộc tính của các thành phần nhập liệu trên form:

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

5 Các thành phần nhập liệu trên form:

Trang 28

Occupation: <select size="1"

The cat was playing in the garden

Ví dụ :

<input type="button" value="Hello

world!">    

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

VALUE="Submit">    

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

<bgsound src="link_đến_file_nhạc" loop="-1">

Thuộc tính loop có giá trị là -1 cho biết bản nhạc sẽ được lặp vô hạn Chấp nhận các định dạng MID, WAV, RAM, RA, AIF, …

2 Chuyển hướng trang web tự động:

Trang 29

Để cho phép tự động chuyển sang trang web khác, đặt dòng code sau ở phần head của văn bản HTML:

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

Với x là số giây delay trước khi chuyển sang trang mới, URL chứa địa chỉ trang web muốn chuyển tới

3 Thiết lập encoding cho trang web:

Để thiết lập encoding dạng Unicode cho trang, đặt dòng code sau ở phần head của văn bả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 vào cuối năm

1996, công nghệ này đã đem đến một vận hội mới cho những người phát triển web CSS cho phép thiết kế trang tinh xảo hơn, đẹp hơn tất cả những gì họ đã từng biết, cũng như giúp cho việc phát triển và bảo trì những site lớn, phức tạp trở nên dễ dàng hơn CSS cũng đơn giản hóa việc làm cho trang web có thể được truy cập bởi càng nhiều người càng tốt, bất kể họ dùng thiết bị gì để đọc trang web, bất kể công nghệ gì họ sử dụng

Kể từ đó, web đã có nhiều thay đổi Trình duyệt web đã được tích hợ vào đện thoại di động, và người ta duyệt web cả từ vô tuyến truyền hình cũng như máy chơi game HTML đã trở thành chuẩn được chấp nhận rộng rãi CSS cũng đã trở thành một công nghệ vững mạnh, được hỗ trợ tốt và dễ sử dụng để tạo lập giao diện cho trang web

Nói một cách ngắn gọn, CSS cung cấp một phương cách hữu hiệu để người

thiết kế web có thể tách biệt giao diện của trang web ra khỏi nội dung của trang

web đó Chúng ta sẽ cùng tìm hiểu cách thức làm điều này như thế nào, và tại sao

Trong style sheet chứa các style rule Mỗi rule chỉ thị cách thức định dạng một

thành phần cụ thể trên văn bản HTML, chẳng hạn paragraph, h1, …

Nhiều file HTML có thể liên kết đến cùng một file CSS

3 Cascading có nghĩa gì?

Có ba dạng style sheet có thể tác động đến việc hiển thị nội dung của văn bản HTML trên trình duyệt Đó là:

• Browser style sheet: Trình duyệt á dụng style sheet lê tất cả văn bản

web Mặc dù những style sheet này có thể có khác biệt nhau tùy theo trình duyệt, chúng vẫncó những điểm chung, chẳng hạn như quy định

CHƯƠNG

3

Trang 31

text có màu đen, siêu liên kết có màu xanh, và liên kết đã được nhấn vào thì có màu tía Tất cả những quy định này được gọi chung là browser style sheet mặc định.

• User style sheet: Người dùng là bất kỳ ai đó ghé thăm web site Hầu

hết trình duyệt hiện nay đều cho phép người dùng thiết lập style sheet của riêng họ trong trình duyệt Những style sheet này sẽ có mức ưu tiên

sử dụng cao hơn browser style sheet mặc định

• Author style sheet: Là style sheet do người phát triển web site tạo lập

Khi chúng ta áp dụng một style sheet lên một trang web, chúng ta đã sử

dụng author style sheet Những style sheet này sẽ có mức ưu tiên sử

dụng cao hơn user style sheet

Việc phân tầng ưu tiên sử dụng style sheet này chính là ý nghĩa của cascading (phân tầng)

4 Ưu điểm của CSS:

Sử dụng CSS có một số lợi điểm sau:

• Dễ bảo trì: Sức mạnh của CSS nằm ở chỗ một file CSS có thể được sử

dụng để điều khiển cách thức hiển thị của nhiều vă bản HTML khác nhau Việc thay đổi gia diện của site giờ đây chỉ đơn giản là sửa đổi một file CSS duy nhất thay vì phả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ế loại bỏ toàn bộ

phần định dạng khỏi văn bản HTML, kể cả layout table, spacer image, nhưng hình ảnh trang trí, font, màu sắc, độ rộng, chiều cao, hình nền Việc hiển thị được điều khiển bới các CSS file Điều này có thể làm giảm rõ rệt kích thước của các tập tin HTML

• Tăng cường khả năng truy cập: CSS buộc người phát triển web phải

chú ý đến cấu trúc, kết quả là trang web sẽ được dịch dễ dàng hơn trên trình duyệt, điều này hiệu quả nhất là đối với những người dùng có thị lực kém Những người dùng như vậy có thể dễ dàng chỉ định style sheet của riêng họ cho cả site, chẳng hạn với size chữ lớn hơn và màu sắc có

độ tương phản cao hơn Thêm vào đó, CSS có thể định nghĩa những style sheet có thể xác định âm lượng và ngữ điệu của văn bản sẽ được đọc cho người mù bằng trình duyệt text-to-speech

browser

style sheet

user style sheet

author style sheet

Web page

Trang 32

• Khả năng định dạng phong phú hơn: CSS cho phép chỉ định nhiều

định dạng văn bản phong phú hơn so với HTML, chẳng ạn độ rộng của lề , khoảng cách giữa các ký tự, chiều cao dòng,

• Hỗ trợ in ấn tốt hơn: CSS có thể được định nghĩa cho nhiều đối tượng

kết xuất khác nhau Chúng ta có thể tạo một bộ CSS rule để người dùng xem trang web online, và một bộ khác để tạo bản dùng để in

5 Style sheet làm việc như thế nào?

Style sheet là một tập hợp các chỉ thị đề nghị cách thức web browser hiển thị

nội dung của trang Lưu ý là "đề nghị" chứ không phải "yêu cầu", vì CSS không bắt buộc trình duyệt phải hiển thị trang web theo một cách cụ thể nào đó, nó chỉ đề nghị trình duyệt cách thức hiển thị nội dung mà thôi

Hình 11: Sử dụng style sheet để tách biệt phần nội dung với phần hiển thị

II Sử dụng style rule

Mỗi Cascading Style Sheet, kể cả dưới dạng css file hay được nhúng trong

văn bản HTML, là một tập hợp các chỉ thị gọi là style rule

1 Cấu trúc của style rule

Mỗi style rule bao gồm:

- Một selector, dùng để xác định các đối tượng được áp dụng

style được quy định bởi style rule

- Một danh sách các thuộc tính (property) và giá trị của thuộc tính đó

2 Khai báo style rule

Một khai báo style rule thường có dạng sau:

Trang 33

Hình 12: Rule set structure

Chúng ta cũng có thể khai báo style rule trên cùng một dòng, ví dụ như sau:

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

Dưới đây là ví dụ về một đoạn CSS có nhiều khai báo:

Lưu ý: Chúng ta có thể thêm các đoạn chú thích vào CSS Phần chú thích phải

được bắt đầu bằng cặp dấu /* và kết thúc bằng cặp dấu */

3 Sử dụng shorthand property:

Shorthand property cho phép giá trị của nhiều thuộc tính có thể được chỉ định trên một thuộc tính duy nhất Shorthand property cũng dễ viết và bảo trì hơn Chúng còn làm cho tập tin CSS ngắn gọn và súc tích hơn

Trang 34

Ví dụ, một thẻ HTML là <h2> có thể được định dạng bằng các thuộc tính

font-style, font-variant, font-weight, font-size, line-height, and font-family Thay vào đó,

chúng ta có thể dùng một shorthand property duy nhất là font.

Hai khai báo dưới đây là tương đương nhau:

Giá trị của shorthand property font bao gồm style, variant,

font-weight, font-size, line-height, và font-family Tuy nhiên, chúng ta không nhất thiết phải chỉ định tất cả các giá trị này khi khai báo style rule

Giả sử, với thẻ <p>, có thể người thiết kế web chỉ muốn chỉ định giá trị

font-size và font-family Trong trường hợp đó, font-style, font-variant, font-weight, và line-height không được chỉ định khi khai báo rule Kết quả là những thuộc tính đó

Trang 35

color: maroon;

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;

Thuộc tính background kết hợp các thuộc tính color,

background-image, background-repeat, background-attachment, và background-position.

Thuộc tính list-style kết hợp các thuộc tính list-style-type, list-style-position, và

Trang 36

Trong ví dụ ở trên, thẻ <div> được dùng để phân chia các vùng nội dung Sau

đó, các vùng này có thể được định dạng bởi CSS

Class selector có thể được sử dụng để chọn bất kỳ HTML element nào có

thuộc tính class và thuộc tính này đã được gán giá trị.

Trong đoạn mã HTML ở trên, có hai HTML element có thuộc tính class: <p

class="intro"> và <a href="#" class="intro">.

Để thiết lập định dạng cho tất cả đối tượng thuộc về class intro, chúng ta sử dụng selector intro trong mã CSS theo phương cách như sau:

<p class="intro"> và <a href="#" class="intro"> riêng rẽ Điều này có thể thưc

hiện được theo cách sau:

ID selector khá giống với class selector có thể được sử dụng để chọn bất kỳ

HTML element nào có thuộc tính id và thuộc tính này đã được gán giá trị Tuy

nhiên, mỗi ID chỉ có thể được sử dụng duy nhất 1 lần trên cùng một văn bản HTML, trong khi có thể có nhiều thành phần thuộc về cùng một class

Trong đoạn mã HTML ở trên, ID được dùng để xác định các phần nội dung,

đó là content, nav (navigation), và footer Có ba ID: <div id="content">, <div

Trang 37

id="nav">, và <div id="footer"> Để chỉ định định dạng cho <div id="nav">,

chúng ta dùng selector #nav như sau:

Chẳng hạn, trong đoạn mã HTML ở trên, có ba thẻ <a> ở mức con của thẻ

<li> Để định dạng chỉ ba thẻ <a> này mà không ảnh hưởng đến tất cả các thẻ <a> còn lại, một descendant selector có thể được sử dụng Selector này nhắm đến tất cả thẻ <a> nằm bê trong thẻ <li>:

p *

{

color: red;

}

Trang 38

6 Một số dạng selector nâng cao:

a.Child selector

Child selector được dùng để chọn những thành phần là con trực tiếp của một

thành phần khác(thành phần cha) Child selector không chọn tất cả thành phần ở các mức con khác nhau mà chỉ chọn những thành phần ở mức con trực tiếp Lấy ví dụ, chúng ta muốn chọn thẻ <em> ở mức con trực tiếp của thẻ <div>, nhưng không chọn những thẻ <em> tuy vẫn là con của <div> nhưng đã phải qua ít nhất một mức trung gian

b Adjacent sibling selector

Adjacent sibling selector sẽ chọn một thành phần ở ngay bên dưới một thành

phần khác trong văn bản HTML Ví dụ, chúng ta muốn định dạng tag <h3>, nhưng chỉ là những tag <h3> nằm ngay dưới một tag <h2> Đây là một ví dụ thường được

sử dụng vì nó có ứng dụng thực tế Thường thì có quá nhiều khoảng cách giữa văn bản dùng tag <h2> với văn bản dùng tag <h3> khi chúng xuất hiện ngay cạnh nhau Selector được khai báo như sau:

IV.Sử dụng style trong thiết kế trang web

Có ba cách để sử dụng style sheet trên một trang HTML:

• Inline styles

• Header styles

• External style sheets

1 Inline styles

Inline styles có thể được áp dụng trực tiếp vào các tag HTML bằng cách dùng

thuộc tính style Tuy nhiên, nên tránh sử dụng inline styles vì những quy định về

style được thêm vào từng thẻ HTML Điều này đi ngược lại mục đích chính của CSS là áp dụng cùng một style cho càng nhiều trang web càng tốt bằng cách sử dụng external style sheets

Dưới đây là một ví dụ về inline styles:

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

Trang 39

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing

Các CSS rule có thể được đặt ở phần <head> của văn bản web bằng cách dùng

thẻ <style> Giống như inline styles, header styles cũng nên được tránh vì quy định

về style được đưa trực tiếp vào văn bản HTML thay vì dùng các tập tin CSS

Tuy vậy, có những trường hợp ngoại lệ với cách áp dụng style này Chẳng hạn một CSS rule chí tác động đến một trang duy nhất trong cả web site Thay vì thêm rule này vào file CSS chung, ta có thể sử dụng header style

Dưới đây là ví dụ 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 cách thứ ba để áp dụng style lên văn bản web là liên kết đến tập tin CSS Style sheet đặt ở bên ngoài văn bản HTML là lựa chọn khả dĩ nhất với những

Trang 40

web site sử dụng style Nếu cần phải thay đổi style, chúng ta chỉ cần sửa đổi trên một file CSS duy nhất thay vì phải thực hiện chỉnh sửa trên từng trang HTML.

File CSS có nội dung là tập hợp các rule có dạng tương tự như rule sau đây:

Giả sử chúng ta tại một file CSS với nội dung như trên và lưu với tên laF

style.css Việc áp dụng style sẽ được thực hiện bằng cách dùng thẻ link trên văn bản

Định dạng
Số trang	134
Dung lượng	2,72 MB