P. 1
chuong 1

chuong 1

|Views: 13|Likes:
Published by tdat00

More info:

Published by: tdat00 on May 09, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/24/2010

pdf

text

original

Chương 1: Internet – Web – HTML

1

Chương 1. Internet – Web – HTML
I. Giới thiệu Internet và Web
Trước khi đi vào phần thiết kế Web, ta hãy cùng xem xét các khái niệm cơ bản về Web như Internet, dịch vụ World Wide Web, mô hình client/server, thế nào là script, trình duyệt là gì, …

I. 1. Giới thiệu về Internet – World Wide Web
I.1.1. Internet
Để có thể trao đổi thông tin và chia sẻ các nguồn tài nguyên với nhau (máy in, máy scan, tập tin hình ảnh, tập tin dữ liệu, … ) các máy tính được kết nối với nhau dựa trên một giao thức xác định và hình thành nên mạng máy tính. Internet là mạng máy tính toàn cầu, trong đó các máy tính truyền thông với nhau theo bộ giao thức rất thông dụng hiện nay là TCP/IP. Bản thân Internet không chứa dữ liệu, nó chỉ là phương tiện trung chuyển thông tin giữa các máy tính. Thông qua mạng Internet, các máy tính kết nối vào mạng này có thể chia sẻ dữ liệu và thông tin với nhau. Lịch sử Internet: Internet ra đời vào cuối thập niên 60 trong một cuộc thử nghiệm xây dựng hệ thống các mạng máy tính có năng lực mạnh. Mục tiêu của Internet là xây dựng mạng máy tính hoạt động ổn định, không bị ảnh hưởng nhiều bởi các máy tính tạm ngừng hay không còn hoạt động trong mạng máy tính. Mạng máy tính kết quả là một thành công vượt bật về mặt kỹ thuật, mặc dù vẫn còn giới hạn về kích thước và phạm vi. Tuy nhiên, vào thời điểm này, chỉ có Bộ quốc phòng và một số Viện nghiên cứu tại USA được phép truy xuất mạng ARPAnet (Advanced Research Projects Agency network of the Department of Defense). Sau đó, với sự xuất hiện của các modem tốc độ cao cộng với khả năng truyền nhận thông tin qua đường dây điện thoại, mặc dù không có kết nối trực tiếp với đường truyền chính, một số cá nhân và tổ chức mới có thể kết nối đến mạng máy tính này và liên lạc toàn cầu. Các máy tính trên Internet có thể sử dụng các dịch vụ Internet sau: o o Electronic mail (e-mail): cho phép ta gửi và nhận mail. Telnet hay đăng nhập từ xa (remote login): cho phép ta đăng nhập vào máy tính khác và sử dụng nó như thể ta đang trực tiếp làm việc trên máy tính này. Thời gian gần đây SSH (security shell) được giới thiệu để thay thế Telnet vì dữ liệu được mã hoá trên đường truyền nên có mức độ bảo mật cao hơn. FTP (File Transfer protocol): giao thức truyền nhận file, giúp truy xuất nhanh các tập tin nằm trong máy tính khác.

o

Chương 1: Internet – Web – HTML o

2

Chatting: người dùng có thể trao đổi thông tin qua các thông điệp trực tiếp (message) hay có thể nói chuyện thông qua một phần mềm, ví dụ Yahoo Messenger, GTalk, Skype, … World Wide Web (www): rất thông dụng hiện nay, …

o

I.1.2. World Wide Web (www)
Dịch vụ World Wide Web (www hay gọi tắt là dịch vụ web) là dịch vụ phổ biến nhất hiện nay trên Internet, www cung cấp khả năng truy xuất các tài liệu hypertext (các trang HTML – Hyper Text Markup Language) dựa trên giao thức HTTP. Mỗi trang tài liệu có một địa chỉ URL (uniform resource locator) duy nhất. Địa chỉ URL bao gồm các thông tin sau: tên giao thức, địa chỉ IP hay tên máy chứa tài liệu, thư mục chứa tài liệu nằm bên trong máy và tên của tập tin tài liệu này. Để truy xuất đến một trang tài liệu, ta phải biết địa chỉ URL của tài liệu đó. Địa chỉ URL có dạng như sau:
http://địa_chỉ_server[:port]/[thư_mục_chứa_trang_web][/tên_ tập_tin_web]

Các trang tài liệu này, hay còn gọi là trang Web (Web page), được lưu trữ trong máy tính gọi là Web Server. Còn Web client là những máy tính truy cập, xem nội dung trang Web. Để người dùng có thể xem nội dung trang web, trên máy client phải cài đặt một phần mềm chuyên dụng, gọi là trình duyệt (web browser). Các trình duyệt thông dụng hiện nay là Mozilla Firefox, Microsoft Internet Explorer, Netscape, Opera, Avant Browser, ...

I. 2. Mô hình client – server và giao thức HTTP
Mạng toàn cầu Internet kết nối các máy tính có thể được tạm chia thành 2 loại: server và client.

Hình 1.1. Hoạt động của giao thức HTTP.

Chương 1: Internet – Web – HTML

3

Địa chỉ URL của trang Web truy cập trong trình duyệt

Hình 1.2. Trình duyệt web miễn phí Opera. o o Máy server: là nơi lưu trữ các trang web, phục vụ các yêu cầu đến từ máy client. Máy Client: gửi yêu cầu truy xuất tài liệu đến máy server và hiển thị tài liệu cho người dùng thông qua trình duyệt web browser. Do đó, trên máy client phải cài đặt một trình duyệt web. Chú ý là sự phân chia này có tính tương đối vì có thể trên cùng một máy tính có cả phần mềm server lẫn phần mềm client.

HTTP (HyperText Transfer Protocol) là giao thức hoạt động theo cơ chế truyền nhận yêu cầu/đáp ứng (request/response) đơn giản. Theo giao thức này, khi trình duyệt web browser ở máy client yêu cầu một tài liệu, web server sẽ xác định vị trí của tài liệu được yêu cầu và trả về nội dung của tài liệu này cho máy client. Sau đó, trình duyệt web browser trên máy client hiển thị tài liệu này cho người dùng xem.

I. 3. Một số khái niệm liên quan đến ứng dụng web
I.3.1. Ứng dụng web
Ứng dụng web, thường được gọi đơn giản là Web site - gồm một tập các trang web có liên quan với nhau, trình bày những nội dung liên quan đến một chủ đề, một công ty hay một tổ chức nào đó, ... Trong một ứng dụng web, có rất nhiều trang web. Có thể tạm chia làm 2 loại trang web là trang web động (nói chính xác hơn là trang web do server phát

Chương 1: Internet – Web – HTML

4

sinh động để gởi về client, loại này sẽ được đề cập trong giáo trình kế tiếp) Trang web tĩnh là một tập tin văn bản được lưu với đuôi mở rộng là .htm hoặc .html. File văn bản này chứa các thẻ (tag) HTML hay những đoạn mã đặc biệt (script). Do đó, để xem thông tin trong trang web, ta phải sử dụng trình duyệt web. Nhiệm vụ của trình duyệt web là thông dịch và hiển thị trang web. Ngoài ra, trong ứng dụng web, ta còn có khái niệm home page (trang chủ). Home page là trang chính của một ứng dụng web, thường là trang mặc định của website, thể hiện nội dung tổng quát của website. Khi ta vào một website, trang đầu tiên hiển thị sẽ là homepage (thường được gọi là trang chủ).

I.3.2. HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language) là ngôn ngữ trình bày tài liệu (document-layout) và chỉ định siêu liên kết (hyperlink-specification). Ngôn ngữ này sử dụng tập mã chuẩn để định dạng nội dung trong trang web và liên kết thông tin. Các mã này không được hiển thị trên trình duyệt web, chúng chỉ có tác dụng thông báo cho trình duyệt (web browser) cách định dạng và hiển thị nội dung của trang web.

I.3.3. CSS (Cascading Style Sheets)
CSS được viết tắt từ Cascading Style Sheets, định nghĩa cách hiển thị của các phần tử HTML. CSS giúp việc thiết kế web tốt hơn trong việc thống nhất cách hiển thị các phần tử trong tài liệu HTML.

I.3.4. Scripting
Script là những đoạn chương trình thực thi trên trang Web từng bước một như kịch bản đã quy định. Có hai dạng script: client-side scripting và server-side scripting. o Client-side scripting: là quá trình thực thi những đoạn script thực thi ở phía client, thực thi các hoạt động đơn giản ở phía client như thêm một số hiệu ứng cho trang web, kiểm tra dữ liệu form, … Server-side scripting: là quá trình thực thi tại phía server, thay đổi động nội dung trang web, ví dụ như ASP, PHP, JSP, JSF, …

o

I.3.5. Web Hosting và Publish Website
Khái niệm Web Hosting và Publish Website thể hiện quá trình đưa website lên web server công cộng, để mọi người dùng kết nối vào Internet có thể xem website của ta. Cách thông dụng nhất là ta liên hệ với các nhà cung cấp dịch vụ Internet – ISP (Internet Service Provider). Web Hosting là một dịch vụ thông dụng mà ISP cung cấp. Thuật ngữ Web Hosting mang ý nghĩa lưu trữ website trên một server công cộng. Khi đó, địa chỉ website của ta sẽ gắn với một tên miền nhất định và có thể được cung cấp kèm thêm dịch vụ email.

I. 4. Các trình soạn thảo trang web
Các trình thiết kế trang web phổ biến hiện nay là Macromedia Dreamweaver và Microsoft FrontPage (với Office 2007, công cụ FrontPage được

Chương 1: Internet – Web – HTML

5

thay thế bằng SharePoint Designer). Tuy nhiên, nếu ta không có chương trình thiết kế chuyên dụng, thì ta cũng có thể tạo trang web bằng những phần mềm soạn thảo văn bản bình thường như Notepad, Editplus hay những phần mềm miễn phí như PSPAD, Coffee Cup HTML, … Với những phần mềm này, đương nhiên là ta sẽ mất nhiều công sức hơn cho công việc soạn thảo những trang web.

II. Giới thiệu HTML
II. 1. HTML là gì?
Năm 1980, nhà vật lý Tim Berners-Lee đề xuất và xây dựng một bản mẫu (prototype) cho dự án ENQUIRE. Đây là một hệ thống hỗ trợ khả năng chia sẻ tài liệu cho các nhà nghiên cứu của CERN. Sau đó, vào năm 1989, Berners-Lee và Robert Cailliau – một kỹ sư về dữ liệu của CERN – cùng đề xuất hệ thống siêu liên kết (hypertext) dựa trên Internet, với tính năng tương tự nhau. Những năm sau đó, họ cùng cộng tác xây dựng hệ thống World Wide Web. Cuối năm 1991, Berners-Lee lần đầu tiên giới thiệu ngôn ngữ HTML trên nền Internet. Đây là bản thiết kế tương đối đơn giản của ngôn ngữ HTML, bao gồm 22 thành phần. Tuy nhiên, mãi đến giữa năm 1993, đặc tả đầu tiên của ngôn ngữ này mới được xuất bản. Thế nhưng, đây vẫn chưa phải là bản đặc tả chuẩn của ngôn ngữ. Vào tháng 11 năm 1995, đặc tả HTML 2.0 được hoàn thiện, và trở thành bản đặc tả chuẩn cho các thể hiện trong tương lai của ngôn ngữ này. Hiện tại, W3C đã hoàn chỉnh bản đặc tả của ngôn ngữ HTML 4.01 và công bố ngày 24/12/1999. Đặc tả nháp của ngôn ngữ HTML 5 được công bố ngày 22/01/2008 và đang được hoàn thiện. HTML là từ viết tắt của cụm từ Hypertext markup language. HTML là ngôn ngữ: Ÿ trình bày tài liệu (document-layout) Ÿ chỉ định siêu liên kết (hyperlink-specification) HTML dùng để tạo trang web. Ngôn ngữ này sử dụng tập mã chuẩn để định dạng nội dung trong trang web và liên kết thông tin. Các mã này không được hiển thị trên trình duyệt web, chúng chỉ có tác dụng thông báo cho web browser cách định dạng nội dung của trang web. Trong thuật ngữ Hypertext Markup Language, o Hypertext là từ viết tắt của Hypertext link – Siêu liên kết. Siêu liên kết là một liên kết được định trước giữa hai tài liệu HTML. Siêu liên kết cho phép truy cập các tài liệu mà không cần quan tâm đến vị trí của chúng. Khi ta nhấn chuột vào siêu liên kết, trình duyệt web chuyển sang hiển thị một trang web khác hay một vị trí khác trong trang web. Markup: là cách định dạng văn bản. Ví dụ ta có thể định dạng đoạn văn bản in đậm, in nghiêng, có màu đỏ ... Language: HTML không phải là một ngôn ngữ lập trình, ta dùng ngôn ngữ HTML để đánh dấu tài liệu dạng văn bản, nhằm chỉ định cách trình bày, định dạng cho văn bản này.

o o

Chương 1: Internet – Web – HTML o

6

Các tập tin HTML được lưu với đuôi mở rộng là .htm hoặc .html. Tùy theo trình soạn thảo trang HTML mả phần mở rộng tương ứng được sử dụng. Môi trường Microsoft thường dùng .htm và môi trường Unix thường dùng .html.

II. 2. Thẻ HTML (HTML tag)
II.2.1. Thẻ HTML
Tập tin HTML khác biệt với các tập tin văn bản khác ở chỗ chúng chứa đựng các mã đặc biệt, gọi là thẻ HTML (HTML tag). Các thẻ này làm nhiệm vụ xác định cách hiển thị cho nội dung trong trang web. Thẻ HTML không phân biệt dạng chữ hoa – thường. Dạng chung của một thẻ HTML thường gồm ba phần:
<tên-thẻ> nội dung </tên-thẻ>

Thẻ mở o o

Thẻ đóng

Thẻ mở (opening tag) xác định vị trí bắt đầu có hiệu lực của thẻ. Thẻ mở được kí hiệu bằng cặp móc nhọn <tên thẻ> bao quanh tên thẻ. Ngược lại, thẻ đóng (closing tag) chỉ định vị trí kết thúc hiệu lực của thẻ, kí hiệu là </tên_thẻ>.

II.2.2. Phân loại thẻ
Thẻ HTML thường được phân thành hai loại: Ÿ Thẻ chứa (container tag) Ÿ Thẻ rỗng (empty tag) II. 2. 2. a. Thẻ chứa (container tag) Mỗi thẻ chứa gồm đầy đủ cặp thẻ đóng và thẻ mở, bao bọc khối văn bản cần định dạng. Ví dụ 1.1:
<B> Khoa Tin Học Quản Lý </B> - Trường Đại Học Kinh Tế

Ví dụ này sử dụng thẻ <B> là thẻ đánh dấu chỉ định đoạn văn bản được in đậm. Trong đó <B> là thẻ mở, chỉ định vị trí bắt đầu đoạn văn bản in đậm, còn </B> là thẻ đóng chỉ định nơi kết thúc của văn bản được in đậm. Như vậy, câu ví dụ này khi hiển thị trên trang web sẽ là:
Khoa Tin Học Quản Lý - Trường Đại Học Kinh Tế

II. 2. 2. b. Thẻ rỗng (empty tag) Bên cạnh những thẻ có cả phần thẻ mở và thẻ đóng là những thẻ chỉ gồm duy nhất phần thẻ mở, không có thẻ đóng. Các thẻ này được gọi là thẻ rỗng. Do nhiệm vụ của thẻ đóng là thông báo cho trình duyệt Web vị trí kết thúc hiệu lực của thẻ, nhưng trong một số trường hợp, trình duyệt có thể tự nhận biết điều này,

Chương 1: Internet – Web – HTML

7

nên thẻ đóng không còn cần thiết nữa. Ví dụ thẻ <HR> là thẻ có nhiệm vụ vẽ một đường ngang theo chiều rộng của tài liệu. Như thế, thẻ không tác dụng lên khối văn bản, vì vậy cũng không cần phải có thẻ đóng cho biết vị trí kết thúc hiệu lực của thẻ.

II.2.3. Thuộc tính của thẻ
Khi sử dụng thẻ HTML, trong phần thẻ mở ta có thể sử dụng các thuộc tính thẻ để bổ sung thêm hiệu quả định dạng.
<tên_thẻ thuộc_tính_1=giá_trị thuộc_tính_2=giá_trị … >

Các thuộc tính ngăn cách nhau bởi khoảng trắng. Đồng thời, trị của thuộc tính phải nằm trong cặp nháy kép hay cặp nháy đơn. Ví dụ 1.2:
<font color="BLUE" size="5">Khoa Tin Học</font>

Ví dụ trên sử dụng thẻ <font> kèm theo hai thuộc tính color và size nhằm định dạng font chữ của chuỗi văn bản Khoa Tin Học có màu xanh và kích thước 5.

II. 3. Cấu trúc của tài liệu HTML
Tài liệu HTML bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng
</html>: <html> ………… </html>

Thẻ <html> báo cho trình duyệt biết nội dung nằm giữa thẻ mở <html> và thẻ đóng </html> là một tài liệu HTML. Phần nội dung được chia thành hai phần: Ÿ Phần đầu – header Ÿ Phần thân – body

II.3.1. Phần đầu tập tin HTML (header)
Phần đầu chứa thông tin về tài liệu, bắt đầu với thẻ <head> và kết thúc bởi thẻ đóng </head>. Trong phần này, ta khai báo tiêu đề của trang bằng thẻ <title>. Tiêu đề không liên quan gì đến tên tập tin. Ta đặt tiêu đề cho trang web nhằm thể hiện chủ đề của trang. Khi hiển thị trong trình duyệt, phần tiêu đề đã khai báo sẽ xuất hiện trên thanh tiêu đề của cửa sổ trình duyệt. Ví dụ 1.3:
<head> <title> Tiêu đề trang web

Chương 1: Internet – Web – HTML
</title> </head>

8

II.3.2. Phần thân body
Phần thân là phần chủ yếu của trang web, chứa nội dung hiển thị trong trình duyệt gồm cả văn bản và hình ảnh. Phần này được bao bọc bởi cặp thẻ <body> và </body>. Nội dung giữa hai thẻ mở và đóng của thẻ <body> là những gì ta muốn hiển thị trong trình duyệt. Thẻ <body> gồm một số thuộc tính như sau:
background

Chỉ định một ảnh làm ảnh nền (background) cho văn bản. Giá trị của thuộc tính này là đường dẫn đến tập tin ảnh. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì ảnh nền này sẽ được lặp nhiều lần để lấp đầy cửa sổ trình duyệt.

bgcolor

Đặt màu nền cho trang khi hiển thị. Nếu cả hai thuộc tính BACKGROUND và BGCOLOR cùng được chỉ định thì trình duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên.

text alink vlink link

Chỉ định màu chữ của văn bản. Chỉ định màu sắc cho các siêu liên kết trong văn bản: alink (active link) là liên kết đang được kích hoạt. vlink (visited link) là liên kết đã được kích hoạt. link là liên kết chưa được kích hoạt.

Như vậy, ta có phần khung định dạng một tài liệu HTML như sau:

<html> <head> <title>Tiêu đề trang web</title> </head> <body> Đây là phần nội dung trang web. </body> </html>

Chương 1: Internet – Web – HTML Ví dụ 1.4:
<html> <head> <title> Hello Page with background image </head> <body bgcolor='yellow' link='red' vlink='blue' background="bgImages/bg1.gif"> Hello page </body> </html> </title>

9

II. 4. Màu sắc trong thiết kế trang Web
Trong thiết kế Web, màu sắc hiển thị được tổng hợp từ ba thành phần màu chính: Ÿ Đỏ (Red) Ÿ Xanh lá cây (Green) Ÿ Xanh biển (Blue) Mỗi màu có 256 giá trị, được biểu diễn từ 0 – FF (0 - 255). Trong đó trị 0 thể hiện mức độ màu thấp nhất, còn FF thể hiện mức độ màu cao nhất. Như vậy, kết hợp giá trị của ba màu, ta nhận được một màu sắc cụ thể, được biểu diễn dưới dạng hexa với định dạng như sau: #RRGGBB. Trong đó, Ÿ Ÿ Ÿ RR - là giá trị màu Đỏ (0 – FF) GG - là giá trị màu Xanh lá cây (0 – FF) BB - là giá trị màu Xanh nước biển (0 – FF)

Trong HTML, màu sắc thường được xác định qua các thuộc tính bgcolor hay color. Giá trị của các thuộc tính này có thể là: Ÿ Giá trị RGB: #RRGGBB Ÿ Tên tiếng Anh của màu. Tên tiếng Anh chỉ có thể biểu diễn 16 màu, ít hơn nhiều so với số lượng màu biểu diễn bằng giá trị RGB. Sau đây là giá trị của một số màu cơ bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Xanh lá cây Xanh biển Trắng Đen #00FF00 #0000FF #FFFFFF #000000 GREEN BLUE WHITE BLACK

Chương 1: Internet – Web – HTML

10

III. Một số thẻ HTML cơ bản
III. 1. Phân loại thẻ định dạng
Thẻ định dạng gồm 2 loại sau: Ÿ Thẻ định dạng mức khối Ÿ Thẻ định dạng mức văn bản hay trong dòng

III.1.1. Thẻ định dạng mức khối
Đây là các phần tử xuất hiện ở phần thân văn bản. Các phần tử mức khối có tác dụng thể hiện cấu trúc của tài liệu. Khi các phần tử mức khối bắt đầu ở một dòng mới, ta không cần ghi thẻ kết thúc. Một số phần tử mức khối thông thường: Ÿ Tiêu đề (H1 đến H6) Ÿ Đoạn văn bản (P) Ÿ Phần tử trong danh sách (LI)

III.1.2. Thẻ định dạng mức văn bản hay trong dòng
Sau khi đã phân tài liệu thành những đoạn văn bản, định dạng các đề mục của tài liệu. Ta đã có một tài liệu tương đối hoàn chỉnh về mặt cấu trúc. Tuy nhiên, để cho văn bản HTML khi hiển thị trên trình duyệt bớt đơn điệu, ta sử dụng thêm một số thẻ định dạng kí tự như in đậm, in nghiêng, chỉ định font, kích thước chữ trong tài liệu, … Các thẻ này được gọi là thẻ định dạng mức văn bản hay trong dòng. Một số phần tử mức văn bản thường sử dụng: Ÿ EM, I, B và FONT (nhấn mạnh ký tự) Ÿ A (liên kết) Ÿ IMG ( hình ảnh) Ÿ BR (ngắt dòng)

III. 2. Phân đoạn văn bản
Nếu ta không sử dụng các thẻ HTML để bắt đầu một dòng mới hoặc một đoạn mới, thì khi hiển thị trên trình duyệt, văn bản sẽ xuất hiện thành một khối duy nhất, dù ta có nhấn Enter để xuống dòng trong lúc soạn thảo tập tin HTML. ² Thẻ <br> Thẻ <br> được dùng để khai báo một ngắt dòng, chèn một ký tự xuống dòng. Như thế, nội dung nằm phía sau thẻ này sẽ bắt đầu ở lề trái của màn hình và trên dòng mới. Thẻ <br> là thẻ rỗng nên không cần thẻ đóng đi kèm. Tuy nhiên hiện nay chuẩn XHTML khá thông dụng trong các trình soạn thảo HTML mới nên có thể dùng thẻ <br/> để thích hợp hơn. ² Thẻ <p>

Chương 1: Internet – Web – HTML

11

Trong tài liệu, những nội dung thuộc cùng một nhóm ý tưởng được gom thành một đoạn. Thẻ <p> được sử dụng để đánh dấu sự bắt đầu của một đoạn mới. Do đó, ta có thể không cần chỉ định thẻ đóng </p>.
<p align="left | center | right"> nội dung </p>

Để canh lề cho đoạn văn bản, ta sử dụng thuộc tính align với các giá trị center/right/left. Ví dụ 1.5:
<p align="left"> Quê hương là gì hở mẹ <br> Mà cô giáo dạy phải yêu <br> Quê hương là gì hở mẹ <br> Ai đi xa cũng nhớ nhiều </p> <p align="center"> Quê hương là chùm khế ngọt <br> Cho con trèo hái mỗi ngày </p>

III. 3. Tạo đề mục
Để tài liệu HTML được rõ ràng, ta có thể thêm đề mục (tiêu đề) cho từng phần của tài liệu. HTML hỗ trợ 6 mức đề mục phân cấp khối văn bản. Mỗi cấp đề mục có cách định dạng riêng, tùy thuộc vào ngữ nghĩa của tài liệu, mà ta sử dụng cấp đề mục phù hợp. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản bình thường. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
<h1 align="giá-trị"> tiêu đề cấp 1 </h1> <h2 align="giá-trị"> tiêu đề cấp 2 </h2> <h3 align="giá-trị"> tiêu đề cấp 3 </h3> <h4 align="giá-trị"> tiêu đề cấp 4 </h4> <h5 align="giá-trị"> tiêu đề cấp 5 </h5> <h6 align="giá-trị"> tiêu đề cấp 6 </h6>

Thuộc tính canh lề align của các thẻ tiêu đề cũng có các trị center | left | right giống như thẻ <p>. Ví dụ 1.6:
<H1> Tieu de 1 </H1> <H2> Tieu de 2 </H2> <H3> Tieu de 3 </H3> <H4> Tieu de 4 </H4>

Chương 1: Internet – Web – HTML
<H5> Tieu de 5 </H5> <H6> Tieu de 6</H6>

12

III. 4. Định dạng kiểu chữ
Sau đây là các thẻ qui định tính chất in nghiêng, in đậm, gạch dưới … của văn bản khi hiển thị trên trình duyệt. ² In đậm
<b> nội dung in đậm </b> <strong> nội dung in đậm </strong>

² In nghiêng
<i> nội dung in nghiêng </i> <em> nội dung in nghiêng </em>

² Gạch dưới
<u> nội dung được gạch dưới </u>

² Gạch ngang
<s> nội dung bị gạch ngang </s> <strike> nội dung bị gạch ngang </strike>

² Định dạng chỉ số trên (x2)
<sup> nội dung định dạng chỉ số trên </sup>

² Định dạng chỉ số dưới (x2)
<sub> nội dung định dạng chỉ số dưới </sub>

III. 5. Định dạng font chữ
Để thay đổi font chữ, kích thước và màu của văn bản, ta sử dụng thẻ <font> với các thuộc tính face, size và color:
<font face="tên-font" size="kích-thước" color="màu-chữ"> nội dung </font>

Ta có thể định dạng font chữ cho toàn bộ tài liệu bằng cách đặt thẻ <font> trong thẻ <body> và bao bọc hết những nội dung của tài liệu. Ngoài ra, thẻ <font> còn có thể áp dụng cho từng từ, từng khối văn bản cụ thể trong trang. Ý nghĩa các thuộc tính: o Thuộc tính face chỉ định font chữ hiển thị, giá trị của thuộc tính này là tên font chữ muốn định dạng.

<font face="arial"> Đây là font arial </font> <font face="verdana", "arial"> Nếu không có font Verdana thì hiển thị font Arial </font>

Chương 1: Internet – Web – HTML o

13

Thuộc tính size chỉ định kích thước của kí tự. Giá trị của thuộc tính có thể là: Ÿ Trị số nguyên chỉ kích thước chính xác. Ÿ Trị tương đối (+/- giá trị số) chỉ mức gia giảm kích thước.

<font size=4> Kích thước là 4 </font> <font size=+2> Tăng kích thước thêm 2 đơn vị </font>

² Thuộc tính color xác định màu của kí tự trong đoạn văn bản. Thuộc tính này có thể nhận trị hexa RGB hay các tên màu chuẩn.
<font color="#FF0000"> Khối VB màu đỏ </font> <font color="green"> Khối VB màu xanh lá </font>

III. 6. Đường kẻ ngang – Thẻ <HR>
Thẻ <hr> cho phép tạo một đường kẻ ngang trên trang. Thẻ <hr> là thẻ rỗng, nên không có thẻ đóng đi kèm. Sau đây là một số thuộc tính của thẻ <hr>: Ÿ align: canh chỉnh vị trí đường kẻ, nhận các trị sau: left, right, center. Ÿ width: xác định chiều rộng của đường kẻ, là số điểm px hay trị phần trăm % (VD: 200px, 30%). Trị mặc định của thuộc tính là 100%, nghĩa là toàn bộ bề ngang của tài liệu. Ÿ size: chỉ định bề dày của đường kẻ và được xác định bằng số điểm px. Ÿ noshade: không có bóng mờ. Ví dụ 1.7:
<hr> <hr size="15" align="left" width="100" > <hr noshade size="5" align="center" width="50%" >

III. 7. Trích dẫn
Với những khối văn bản là nội dung trích dẫn, ta có thể dùng thẻ <blockquote> và thẻ <cite> để định dạng. ² Với thẻ <blockquote>, khối văn bản trích dẫn thụt vào một đoạn so với những nội dung khác.
<blockquote> nội dung trích dẫn </blockquote>

² Thẻ <cite> định dạng in nghiêng khối văn bản trích dẫn.
<cite> nội dung trích dẫn </cite>

Chương 1: Internet – Web – HTML Ví dụ 1.8:
<blockquote> ASP.NET is the web development technology of Microsoft's .NET development platform. </blockquote> <cite> Công cha như núi Thái Sơn <br> Nghĩa mẹ như nước trong nguồn chảy ra <br> Một lòng thờ mẹ kính cha <br> Cho tròn chữ hiếu mới là đạo con <br> </cite>

14

III. 8. Văn bản đã định dạng trước
Nếu ta muốn hiển thị văn bản đã được định dạng trước, thì sử dụng thẻ <pre> bao quanh khối văn bản đó.
<pre> Văn bản đã được định dạng </pre>

Ví dụ 1.9:
<pre> Quê hương là gì hở mẹ Mà cô giáo dạy phải yêu Quê hương là gì hở mẹ Ai đi xa cũng nhớ nhiều Quê hương là chùm khế ngọt Cho con trèo hái mỗi ngày </pre>

III. 9. Thẻ <div> và <span>
Hầu hết các thẻ HTML đều được xây dựng với một mục đích cụ thể, ví dụ, thẻ <p> để tạo đoạn văn bản, thẻ <h1> để định dạng tiêu đề cấp 1, … Tuy nhiên, thẻ <div> và <span> thì không mang một ý nghĩa cụ thể nào cả, mà mục đích chính của chúng là phân chia nội dung trang Web thành những khối thông tin logic và kết hợp với định dạng CSS – (Cascading Style Sheets). ² Thẻ <div>, có phần gần giống thẻ <p>, là phần tử định dạng mức khối, nhưng không chèn thêm dòng trống phía trước và sau đoạn văn bản.
<div align="left/right/center" style="giá-trị" class="giá-trị" id="giá-trị" > nội dung trong khối div </div>

² Thẻ <span> là phần tử định dạng trong dòng.

Chương 1: Internet – Web – HTML
<span style="giá-trị" class="giá-trị" id="giá-trị" > nội dung trong khối span </ span >

15

Với hai thẻ này, các thuộc tính style, class và id thường được dùng trong định dạng CSS (nội dung này sẽ được trình bày ở phần CSS). Ví dụ 1.10:
<html><head><title>vi du div –span </title></head> <body> <p align="center"> Đây là đoạn văn bản được định dạng bằng thẻ p </p> <div align="right"> Còn đây là đoạn văn bản dùng thẻ div, chỉ khác đoạn trên ở chỗ không có dòng trống phía trước và phía sau. Trong đoạn div này có <span style="color:blue"> phần tử span định dạng màu xanh </span> </div> </body></html>

III. 10. Hình ảnh
Để chèn hình ảnh vào trang web, ta sử dụng thẻ <img>:
<img src="đường-dẫn-đến-file-ảnh" alt="văn-bản" width="trị-số" height="trị-số" border="trị-số" align="left/right/center" />

Các thuộc tính của thẻ <img>: Ÿ src: xác định đường dẫn đến file ảnh, có thể chỉ định đường dẫn tuyệt đối đến ảnh hay dùng đường dẫn tương đối. Ÿ alt: là phần văn bản xuất hiện trong trường hợp không hiển thị được hình ảnh. Văn bản này cũng được hiển thị ở dạng tooltip khi ta đưa chuột đến hình. Ÿ width: xác định chiều rộng ảnh. Ÿ height: xác định chiều cao ảnh. Ÿ border: xác định độ dày đường viền ảnh. Ÿ align: canh chỉnh hình ảnh theo lề trái, lề phải hay canh giữa. Ví dụ 1.11:
<img src=../images/logo.gif alt="logo trường DHKT" width="107" height="104" />

Chương 1: Internet – Web – HTML

16

III. 11. Âm thanh
Thẻ <bgsound> cung cấp khả năng chèn âm thanh (đoạn nhạc) vào trang Web. Âm thanh này sẽ khởi động mỗi khi người dùng mở trang Web.
<bgsound src="file-âm-thanh" loop=value />

Các thuộc tính: Ÿ src: xác định đường dẫn đến file âm thanh (.mp3, mdi, wma,…) Ÿ loop: số lần lặp lại file âm thanh loop = -1 : lặp vô hạn lần loop = n : lặp n lần rồi tự động tắt Ví dụ 1.12:
<bgsound src="../sound/song1.mp3" loop=-1 />

III. 12. Đối tượng di chuyển
Để tạo đối tượng chạy tự động trên trang web, ta dùng thẻ <marquee>:
<marquee> chuỗi kí tự hay đối tượng </marquee>

Các thuộc tính: Ÿ direction=up/down/left/right: điều khiển hướng chạy. Ÿ behavior=scroll/slide/alternate: kiểu chạy Ÿ bgcolor=giá-trị-màu: màu nền cho chữ/đối tượng. Ví dụ 1.13:
<marquee direction="right" behavior="slide" > <img src=../images/flower.gif width="107" height="104"> </marquee>

è ở ví dụ này, hình flower.gif sẽ chạy từ trái sang phải.
<marquee direction="left" behavior="scroll" bgcolor="#FFFF00" > Chào ta đến trang web trường ĐHKT TPHCM. </marquee>

è Trong ví dụ trên, dòng chữ "chào ta đến trang web trường ĐHKT TPHCM" sẽ chạy từ phải sang trái màn hình trên một nền màu vàng.

III. 13. Chú thích
Trong soạn thảo trang Web, để việc đọc hiểu và chỉnh sửa các đoạn mã HTML được dễ dàng, thuận tiện, ta nên thêm chú thích vào trang thông qua thẻ chú thích:

Chương 1: Internet – Web – HTML
<!-- nội dung chú thích -->

17

Trình duyệt sẽ bỏ qua, không hiển thị phần nội dung chú thích.

III. 14. Các ký tự đặc biệt
Để hiển thị các kí tự đặc biệt (dấu <, >, ", …), ta dùng các mã sau: Ký tự đặc biệt Lớn hơn (>) Mã tương ứng &gt; Ví dụ If A &gt; B <br/> Then <br/> A = A + 1 <p> The above statement used

special chararacters </p> Nhỏ hơn (<) &lt; If A &lt; B <br/> Then <br/> A = A + 1 <p> The above statement used

special chararacters </p> Trích dẫn(") &quot; <body> &quot; To be or not to be? &quot; That is the question </body> Ký tự & &amp; <p> William &amp; Graham went to the fair </p>

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->