tài liệu giảng dạy môn thiết kế web

Tài liệu giảng dạy Môn Thiết kế Web

4

CHƯƠNG 1
NGÔN NGỮ HTML


BÀI 1
TỔNG QUAN VỀ NGÔN NGỮ HTML







1.1.1 Các khái niệm cơ bản về Internet và Web
Tiền thân của Internet là ARPANET, mạng máy tính được xây dựng bởi Bộ Quốc
phòng Mỹ (DOD) vào năm 1969 dùng để kiểm thử độ tin cậy của mạng và nhằm kết nối
những cơ sở nghiên cứu với mục đích quân sự, bao gồm một số lượng lớn các trường đại học,
viện nghiên cứu. ARPANET khởi đầu với quy mô nhỏ nhưng đã nhanh chóng bành trướng ra
khắp nước Mỹ.
Thành công của ARPANET được nhân lên gấp bội, ngày càng nhiều trường đại học
đăng ký tham gia. Tuy nhiên, quy mô lớn của mạng đã gây khó khăn trong vấn đề quản lý.
Từ đó ARPANET được chia thành hai phần: MILNET là hệ thống mạng dành cho quân sự và
ARPANET mới nhỏ hơn, không thuộc DOD. Tuy nhiên hai mạng vẫn liên kết với nhau nhờ
giải pháp kỹ thuật gọi là IP (Internet Protocol – Giao thức Internet), cho phép thông tin truyền
từ mạng này sang mạng khác khi cần thiết. Tất cả các mạng được nối vào Internet đều sử
dụng IP.
Năm 1989, Tim Berners Lee tại viện Kỹ thuật hạt nhân Châu Âu – CERN (Conseil
Européen pour la Recherche Nucléaire) phát minh ra giao thức World Wide Web – viết tắt là
WWW hay gọi ngắn gọn là Web, sau đó là ngôn ngữ HTML (HyperText Markup Language).
Có thể nói đây là một cuộc cách mạng trên Internet vì người ta có thể truy cập và trao đổi
thông tin một cách dễ dàng.
Tuy nhiên Web lúc bấy giờ không có bất kỳ điểm nào giống như Web mà chúng ta
biết ngày nay. Trình duyệt Web đầu tiên không thể điều khiển bằng chuột và không hỗ trợ đồ

 Mục tiêu học tập: Sau khi học xong bài này, người học có thể:
- Trình bày tổng quan về ngôn ngữ HTML



Tài liệu giảng dạy Môn Thiết kế Web

5
họa. Nhưng người dùng Internet lúc đó đã nhanh chóng cảm nhận được sức mạnh tiềm năng
của Web
Web trưởng thành rất nhanh. Trong vài năm ngắn ngủi đã có những cải tiến lớn. Ý
nghĩa nhất là các trình duyệt Web dùng chuột và khả năng hỗ trợ đa phương tiện:
ViolaWWW (1992), NCSA Mosaic 1.0 (1993), Netscape Navigator 1.0 (1994), Microsoft
Internet Explorer 1.0 (1995), …
Trong thực tế, ứng dụng Web luôn tồn tại hai loại là trang Web tĩnh và trang Web
động. Trang Web tĩnh là trang HTML không kết nối cơ sở dữ liệu. Ngược lại, trang Web
động là trang Web có kết nối cơ sở dữ liệu. Điều này có nghĩa là mỗi khi trang Web động
được làm tươi, dữ liệu trình bày trên trang Web đó được đọc từ cơ sở dữ liệu.
Nói cách khác, cho dù đó là trang Web tĩnh hay động, nếu bạn muốn trình bày dữ liệu
trên trình duyệt Web, bạn cần phải khai báo các thẻ HTML bên trong theo một quy luật nhất
định.
Mỗi trang Web được gọi là Webpage. Tập hợp nhiều trang Web được liên kết với
nhau theo một cấu trúc nào đó do tổ chức hoặc cá nhân xây dựng nên được gọi là một
Website. Mỗi Website sẽ có một trang Web được hiển thị đầu tiên khi người dùng truy cập
vào Website đó, trang Web đầu tiên này được gọi là Homepage. Homepage cung cấp cái nhìn
tổng quan về Website.
Một Website muốn cung cấp thông tin cho toàn thế giới cần được đưa lên một trình
phục vụ Web (Web Server) và cần được đăng ký một tên miền, một địa chỉ URL (Uniform
Resource Locator – Địa chỉ định vị nguồn tài nguyên trên Internet) để truy cập đến với cú
pháp:

Ví dụ: http://joomlaviet.org/forum/index.php
Địa chỉ định vị nguồn tài nguyên phân ra là hai loại: địa chỉ tuyệt đối và địa chỉ tương
đối. Địa chỉ tuyệt đối là một địa chỉ có cú pháp đầy đủ gồm giao thức, tên miền, tên đường
dẫn (nếu có) và tên tập tin Web đang hiển thị. Địa chỉ tương đối chỉ gồm đường dẫn (nếu có)
và tên tập tin. Trình duyệt sẽ tự động xác định địa chỉ tuyệt đối bằng cách lấy phần thông tin
bị khuyết từ URL của trang Web hiện hành kết hợp với URL tương đối.
<Giao thức>://<Tên miền>/<Đường dẫn>/<Tên file>

Tài liệu giảng dạy Môn Thiết kế Web

6
1.1.2 Cách hoạt động của một trang Web
Cách hoạt động của một trang Web thông qua mô hình sau:

Hình 1-1-1: Mô hình hoạt động của dịch vụ Web
Giải thích mô hình: Khi người sử dụng Internet mở một trình duyệt (Web Browser)
trên máy tính, gõ vào thanh địa chỉ của trình duyệt một địa chỉ của một trang Web và nhấn
phím enter để xác nhận lệnh. Điều đó có nghĩa là một yêu cầu về dịch vụ HTTP đã phát sinh
và được gửi đến trình phục vụ Web . Trình phục vụ Web khi nhận được yêu cầu sẽ tiến
hành tìm kiếm trên hệ thống mà Web Server đang lưu trữ địa chỉ của trang đang được yêu cầu
. Kết quả tìm kiếm sẽ được gửi về cho máy tính mà người sử dụng đã gửi yêu cầu . Nếu
tìm thấy, trình duyệt Web trên máy tính của người sử dụng sẽ có nhiệm vụ hiển thị nội dung
trang Web theo ý định của người thiết kế trang Web đó.
1.1.3 Cấu trúc trang HTML
Như đã trình bày ở trên, muốn trình bày và định dạng dữ liệu trên trình duyệt phải
theo cấu trúc HTML. Đây là một ngôn ngữ thông dụng dùng để thiết kế Web tĩnh. Một trang
HTML sẽ được đánh dấu bắt đầu bằng thẻ <HTML> và kết thúc bởi thẻ </HTML>. Như vậy,
các nội dung đặt ngoài cặp thẻ này đều không hợp lệ. Thẻ <HTML> được gọi là thẻ mở, thẻ
</HTML> được gọi là thẻ đóng. Bên trong hai thẻ này, bạn có thể khai báo và sử dụng hầu
hết các thẻ HTML. Tuy nhiên có một vài thẻ HTML không được hỗ trợ bởi trình duyệt này
nhưng lại được hỗ trợ bởi trình duyệt khác. Những trường hợp đặc biệt đó, nhóm biên soạn
tài liệu chúng tôi sẽ giới thiệu đến bạn khi chúng ta tìm hiểu từng thẻ HTML cụ thể.
Trang Web tĩnh sẽ có tên mở rộng là .html hoặc .htm. Có thể soạn thảo mã HTML

Tài liệu giảng dạy Môn Thiết kế Web

7
bằng bất kỳ chương trình soạn thảo văn bản nào. Ví dụ, bạn có thể soạn bằng Microsoft
Office Word, Notepad, WordPad, FrontPage, Dreamweaver, …
Ngôn ngữ HTML không phân biệt ký tự HOA / thường khi khai báo tên thẻ. Ví dụ:
khi bạn gõ <html> hay <Html> hay <HTML> đều mang ý nghĩa như nhau là khai báo bắt
đầu trang HTML. Và khi bạn khai báo một thẻ đánh dấu phần đầu trang HTML là <head> thì
các thẻ </head> hay </Head> hay </HEAD> đều là thẻ đóng của nó.
Các thẻ HTML đã được định nghĩa sẵn, bạn chỉ cần nhớ tên thẻ và ý nghĩa của nó để
sử dụng mà không cần tự định nghĩa cho bất kỳ thẻ nào cả. Điều quan trọng là bạn cần nhớ
các thuộc tính đi kèm bên trong thẻ để tùy chỉnh cho phần nội dụng mà bạn muốn hiển thị lên
trình duyệt sao cho linh hoạt và đúng ý định hiển thị của bạn. Một điều lưu ý nữa là bạn cần
gõ chính xác tên thẻ và không có bất kỳ dấu cách nào trong tên các thẻ HTML đã được định
nghĩa sẵn. Ví dụ: các cách viết tên thẻ sau đây đều sai: < head>, <h ead>, <he ad>, <hea d>.
Nếu bạn muốn thêm thuộc tính cho thẻ thì sau tên thẻ, bạn nhấn phím khoảng cách sau đó xác
định thuộc tính cho thẻ.
Thẻ HTML có hai loại: thẻ kép và thẻ đơn. Thẻ kép là loại thẻ có thẻ mở và thẻ đóng.
Thẻ mở được viết như sau: <tênthẻmở>. Thẻ đóng phải được khai báo khi đã có thẻ mở.
Cách viết thẻ đóng như sau: </tênthẻmở>. Nội dung cần hiển thị lên Web, bạn đặt giữa cặp
thẻ mở và thẻ đóng để có được định dạng của thẻ đã khai báo. Thẻ đơn là loại thẻ chỉ có thẻ
mở mà không có thẻ đóng.
Nếu sử dụng nhiều thẻ HTML để định dạng cho cùng một nội dung thì các thẻ đó phải
lồng nhau. Tức là thẻ HTML tuân theo quy luật mở trước thì đóng sau.






Hình 1-1-2: Cấu trúc trang HTML
Để soạn thảo mã HTML, ta Notepad gõ và lưu nội dung trang HTML trong Hình 1-
<html>
<head>
<title>Tiêu đề trang Web</title>
</head>

<body>
<b>Đây là trang Web đầu
tiên</b>
</body>
</html>
Phần đầu: chứa
các mô tả về
trang Web
Phần thân:
chứa nội dung
trang Web
Định
nghĩa
một
trang
HTML

Tài liệu giảng dạy Môn Thiết kế Web

8
1-2 với tên Vidu1-1-1.html. Lưu ý: để hiển thị được tiếng Việt lên trình duyệt, trong quá
trình lưu tập tin, bạn cần chọn Encoding: Unicode hoặc Encoding: UTF-8. Sau đó mở tập
tin này bằng trình duyệt Web, ta sẽ thấy giao diện của trang như sau:

Hình 1-1-3: Trang Vidu1-1-1.html trên trình duyệt Firefox
Bạn có thể thêm thuộc tính định dạng cho thẻ HTML với cấu trúc:

















 Câu hỏi (bài tập) củng cố:
1. Khi một trang Web có sử dụng rất nhiều hình ảnh động trên giao diện. Vậy có thể
khẳng định đó là một trang Web động không? Tại sao?
2. Trình bày sơ lược lịch sử phát triển của www.
3. Trình bày chức năng của Web Browser và Web Server.
<tênthẻ thuộctính_1=“giátrị_1” thuộctính_2=“giátrị_2” … thuộctính_n=“giátrị_n” >

Tài liệu giảng dạy Môn Thiết kế Web

9

BÀI 2
CÁC THẺ HTML CƠ BẢN




1.2.1 Thẻ <body>, chú thích và các ký hiệu đặc biệt
Trong cặp thẻ <body> … </body> chúng ta có thể dùng các thuộc tính định dạng cho
toàn nội dung của trang như:
Background=“URL” với URL là đường dẫn đến tập tin hình ảnh dùng làm
ảnh nền cho phần nội dung của trang.
Bgcolor= “color” với color là mã màu ở hệ thập lục phân hoặc các từ khóa
tên màu bằng tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá),
white (màu trắng), …. để định dạng màu nền trang.
Text=“color” với color là mã màu ở hệ thập lục phân hoặc các từ khóa tên
màu bằng tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white
(màu trắng), …. để định dạng màu chữ cho toàn trang.
Để ghi chú một đoạn mã HTML, ta đặt nội dung chú thích trong cặp thẻ <! và >.
Khi dịch trang Web, trình duyệt sẽ bỏ qua phần nội dung nằm trong cặp thẻ này.
Trong ngôn ngữ HTML, một số ký tự đặc biệt bạn không thể gõ từ bàn phím. Ví dụ
nếu chỉ gõ khoảng cách giữa các từ là một ký tự khoảng trắng hay nhiều ký tự khoảng trắng
thì kết quả hiển thị lên trình duyệt là như nhau. Vì vậy, nếu bạn muốn có nhiều khoảng trắng
liên tục thì phải thực hiện gọi mã HTML cho ký hiệu đặc biệt. Sau đây là bảng liệt kê một số
ký hiệu đặc biệt thường dùng:
Mã HTML Ý nghĩa Mã HTML Ý nghĩa
&nbsp; Khoảng trắng &trade;
TM

&lt; < &copy; ©

 Mục tiêu học tập: Sau khi học xong bài này, người học có thể:
- Vận dụng các thẻ HTML cơ bản


Tài liệu giảng dạy Môn Thiết kế Web

10
Mã HTML Ý nghĩa Mã HTML Ý nghĩa
&gt; > &reg; ®
&amp; & &yen; ¥
&quot; “ &euro; €
&sum;

&frac12; ½
1.2.2 Thẻ định dạng văn bản
1.2.2.1 Thẻ <div> … </div>
Cặp thẻ này cho phép bạn định dạng cho đoạn văn bằng các thuộc tính bên trong thẻ.
Tuy nhiên, cặp thẻ này không kèm theo ký tự xuống dòng cho đoạn văn. Ví dụ, bạn muốn
canh lề cho đoạn văn, bạn có thể sử dụng thuộc tính align của thẻ <div>. Giá trị của thuộc
tính align có bốn giá trị: center/justify/left/right.
Ví dụ 1-2-1: Canh lề cho đoạn văn bằng thẻ <div>







Giải thích: Một cách khác để hiển thị được tiếng Việt lên trình duyệt, ta dùng thẻ
<meta> với các thuộc tính như trong ví dụ 1-2-1. Lưu ví dụ trên với tên Vidu1-2-1.html và
mở tập tin bằng trình duyệt, ta được:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Ví dụ 1-2-1</title>
</head>

<body>
<div align="justify">Đây là đoạn văn ví dụ về cách sử
dụng các ký hiệu đặc biệt trong HTML và được canh lề bằng
thuộc tính align của thẻ &lt;div&gt;</div>
</body>
</html>

Tài liệu giảng dạy Môn Thiết kế Web

11

Hình 1-2-1: Ví dụ về canh lề đoạn văn bằng thẻ <div>
1.2.2.2 Thẻ <p> … </p>
Tương tự thẻ <div>, thẻ <p> cũng được dùng để định dạng đoạn văn. Nhưng khác
với thẻ <div>, thẻ <p> ngoài cho phép canh chỉnh lề cho đoạn văn, khi kết thúc đoạn được
đánh dấu bằng thẻ </p> dữ liệu trình bày sẽ tự động xuống dòng. Thẻ đoạn <p> cũng có
thuộc tính align với bốn giá trị center/justify/left/right.
Ví dụ 1-2-2: Thẻ định dạng đoạn <p>









<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Ví dụ 1-2-2</title>
</head>
<body>
<p align="justify">Đây là đoạn văn thứ nhất ví dụ về
cách sử dụng các ký hiệu đặc biệt trong HTML và được canh lề
bằng thuộc tính align của thẻ &lt;p&gt;</p>
<p align="right">Đây là đoạn văn thứ hai ví dụ về cách sử
dụng các ký hiệu đặc biệt trong HTML &copy; và được canh lề
bằng thuộc tính align của thẻ &lt;p&gt;</p>
</body>
</html>

Tài liệu giảng dạy Môn Thiết kế Web

12

Hình 1-2-2: Trang Vidu1-2-2.html định dạng đoạn bằng thẻ <p>
1.2.2.3 Các thẻ định dạng tiêu đề
HTML định nghĩa sẵn sáu cấp độ của tiêu đề: <h1> … </h1>, <h2> … </h2>, … ,
<h6> … </h6> với độ lớn giảm dần từ h1 đến h6. Kết thúc thẻ tiêu đề, nội dung trình bày
cũng tự động xuống dòng. Chúng ta có thể tham khảo ví dụ 1-2-3 bên dưới để hiểu rõ hơn về
các thẻ tiêu đề.
Ví dụ 1-2-3: Ví dụ về các thẻ Heading








<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Ví dụ 1-2-3</title>
</head>
<body>
<H1> HEADING 1 </H1>
<H2> HEADING 2 </H2>
<H3> HEADING 3 </H3>
<H4> HEADING 4 </H4>
<H5> HEADING 5 </H5>
<H6> HEADING 6 </H6>
</body>
</html>

Tài liệu giảng dạy Môn Thiết kế Web

13

Dùng Notepad soạn thảo ví dụ trên và mở tập tin bằng trình duyệt, ta sẽ được giao
diện như sau:

Hình 1-2-3: Trang Vidu1-2-3.html định dạng tiêu đề bằng các thẻ Heading
1.2.2.4 Thẻ định dạng chữ
Có rất nhiều thẻ định dạng chữ tùy theo ý định của người thiết kế Web mà vận dụng
các thẻ này một cách linh hoạt.
Khi hiển thị nội dung lên Web, phím enter sẽ không có tác dụng. Vì vậy bạn có thể
dùng thẻ <br> để xuống hàng. Đây là một thẻ đơn và không có thuộc tính bên trong.
Nếu bạn muốn kẽ một đường ngang trên giao diện Web, HTML hỗ trợ cho bạn thẻ
<hr>. Đây cũng là một thẻ đơn. Bạn có thể trang trí cho đường kẻ này một số thuộc tính như:
màu sắc (dùng thuộc tính color), độ rộng cho đường kẽ nếu trường hợp bạn không muốn kẽ
đường ngang hết trang hãy sử dụng thuộc tính width, độ dày của đường kẻ được chỉ định
trong thuộc tính size và cuối cùng là canh lề cho đường ngang với thuộc tính align.
Khi muốn hiển thị lên Web phần văn bản in đậm, bạn dùng cặp thẻ <b> … </b>.

Xem chi tiết: tài liệu giảng dạy môn thiết kế web