1
TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
KHOA KỸ THUẬT - CÔNG NGHỆ
Phone: 0274. 3834930 Website: http://et.tdmu.edu.vn
Chương 2
NGÔN NGỮ HTML
(HyperText Markup Language)
THIẾT KẾ WEB
NỘI DUNG
1.
Khái niệm
2.
Công dụng của HTML
3.
Tập tin định dạng HTML
4.
Căn bản về thẻ
5.
Cấu trúc cơ bản của trang Web
6.
Các thẻ định dạng khối
18/01/2019 Bài giảng Thiết kế Web 2
1. HTML là gì?
HTML là ngôn ngữ để xuất bản siêu văn bản trên
World Wide Web.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
Nó sử dụng một loạt các thẻ và thuộc tính, được dùng
để hiển thị văn bản và các thông tin khác và cung cấp
siêu liên kết tới các tài liệu web khác
18/01/2019 Bài giảng Thiết kế Web 3
2. Công dụng của HTML
Thiết kế được nội dung và hình thức của trang Web.
Xuất bản các tài liệu trực tuyến hay truy xuất các
thông tin trực tuyến bằng cách dùng các liên kết được
chèn vào trang Web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các
thông tin về người dùng, quản lí các giao dịch…
Thêm vào trang Web các đối tượng âm thanh, hình
ảnh, video…
18/01/2019 Bài giảng Thiết kế Web 4
3. Tập tin định dạng HTML
Là tập tin có phần mở rộng là .htm hay .html.
Là tập tin văn bản thuần túy, có chứa các mã đặc biệt
gọi là Tag (thẻ), thường được đặt xung quanh một
khối văn bản nào đó.
Có thể được viết trên trình soạn: Microsoft
Frontpage, Adobe Dreamweaver, Notepad,…
18/01/2019 Bài giảng Thiết kế Web 5
4. Căn bản về thẻ (Tag)
Các lệnh trong HTML được gọi là các thẻ. Các thẻ
này giúp định dạng, điều khiển nội dung và hình thức
trình bày của một trang Web.
Cú pháp tổng quát của 1 thẻ:
<tên_thẻ thuộc_tính_1=giá_trị_1 thuộc_tính_2=
giá_trị_2...>Chuỗi văn bản</tên_thẻ>
•
hoặc đơn giản nhất là: <tên_thẻ>Chuỗi văn
bản</tên_thẻ>
Vd: <title> Trang Web dau tien cua toi </title>
Tên thẻ không phân biệt chữ hoa/thường.
18/01/2019 Bài giảng Thiết kế Web 6
2
5. Cấu trúc cơ bản của trang Web
<html>
<head>
<title>Tiêu đề của tài liệu</title>
</head>
<body các thuộc tính nếu có>
... nội dung của tài liệu
</body>
</html>
18/01/2019 Bài giảng Thiết kế Web 7
5. Cấu trúc cơ bản …
5.1 HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu
HTML, tức là nó có sử dụng các thẻ HTML để trình bày.
Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Cú pháp:
<html>
... Toàn bộ nội của tài liệu được đặt ở đây
</html>
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <html>
như những tệp tin văn bản bình thường.
18/01/2019 Bài giảng Thiết kế Web 8
5. Cấu trúc cơ bản …
5.2 HEAD
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:
<head>
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
</head>
18/01/2019 Bài giảng Thiết kế Web 9
5. Cấu trúc cơ bản …
5.3 TITLE
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài
liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp
thẻ <HEAD>.
Cú pháp:
<title>Tiêu đề của tài liệu</title>
Cặp thẻ: <title> định nghĩa những gì sẽ được thể hiện trên
thanh tiêu đề của trình duyệt.
18/01/2019 Bài giảng Thiết kế Web 10
5. Cấu trúc cơ bản …
5.4 BODY
Thẻ này được sử dụng để xác định phần nội dung chính của
tài liệu - phần thân (body) của tài liệu. Trong phần thân có
thể chứa các thông tin định dạng nhất định để đặt ảnh nền
cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho
trang tài liệu... Những thông tin này được đặt ở phần tham số
của thẻ.
Cú pháp:
<body các thuộc tính nếu có>
.... phần nội dung của tài liệu được đặt ở đây
</body>
18/01/2019 Bài giảng Thiết kế Web 11
5. Cấu trúc cơ bản …
Một số thuộc tính chính:
background= : Đặt một ảnh nào đó làm ảnh nền (background)
cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là
URL của file ảnh.
bgcolor= : Đặt mầu nền cho trang khi hiển thị. Nếu cả hai
tham số background và bgcolor cùng có giá trị 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= : Xác định màu chữ của văn bản, kể cả các đề mục.
alink=,vlink=,link=: Xác định màu sắc cho các siêu liên kết
trong văn bản. Tương ứng, alink là liên kết đang được kích
hoạt - tức là khi đã được kích chuột lên; vlink chỉ liên kết đã
từng được kích hoạt;
18/01/2019 Bài giảng Thiết kế Web 12
3
5. Cấu trúc cơ bản …
Một số thuộc tính chính (tt):
Leftmargin=“n”
Topmargin=“n”
Rightmargin=“n”
Bottommargin=“n”
Thiết lập lề cho trang, với giá trị n có đơn vị tính là pixel
18/01/2019 Bài giảng Thiết kế Web 13
5. Cấu trúc cơ bản …
Ví dụ 1: Mở Notepad và gõ vào nội dung như sau:
Chú ý:
Chọn Font chữ và kiểu gõ Unicode để hiển thị được tiếng việt
18/01/2019 Bài giảng Thiết kế Web 14
5. Cấu trúc cơ bản …
Lưu tập tin này lại với tên Vd1.html
Khi lưu phải chọn mục Unicode ở phần Encoding.
18/01/2019 Bài giảng Thiết kế Web 15
5. Cấu trúc cơ bản …
Ví dụ 1: Chạy file Vd1.html với trình duyệt IE ta được kết
quả như sau:
18/01/2019 Bài giảng Thiết kế Web 16
5. Cấu trúc cơ bản …
Ví dụ 2:
18/01/2019 Bài giảng Thiết kế Web 17
5. Cấu trúc cơ bản …
Ví dụ 3:
18/01/2019 Bài giảng Thiết kế Web 18
4
6. Các thẻ định dạng khối
6.1. Các thẻ định dạng văn bản
Thẻ Ý nghĩa
<b> ... </b> In chữ đậm
<i> ... </i> In chữ nghiêng
<u> ... </u> In chữ gạch chân
<sup> ... </sup> Định dạng chỉ số trên (SuperScript)
<sub> ... </sub> Định dạng chỉ số dưới (SubScript)
<p>...</p> Một đoạn văn
<br> Xuống dòng (không có </br>)
<font size=n face=name
color=color>…</font>
Chỉ định font, size, màu văn bản.
size=n: n từ 1 đến 7 (8,10,14,16,24,36),
mặc định là 3
color=color: màu văn bản
face=name: tên font
<center>…</center> canh giữa
18/01/2019 Bài giảng Thiết kế Web 19
6.1. Các thẻ định dạng văn bản
Để ngắt dòng tạo đoạn mới, tạo dòng trống:
Đặt văn bản trong cặp thẻ <p>...</p>
Để ngắt dòng không tạo đoạn mới:
Chèn thẻ <br /> tại vị trí muốn ngắt dòng.
Đặt câu ghi chú vào cặp thẻ
<!-- Câu chú thích-->
Nội dung câu chú thích không hiển thị trên trình duyệt
18/01/2019 Bài giảng Thiết kế Web 20
6.1. Các thẻ định dạng văn bản
Ví dụ:
<html>
<head><title>Thu dinh dang van ban</title></head>
<Body>
<p><font size=4 color=red> ĐOẠN NÀY CÓ CÁC DÒNG:<BR>
<b>Dòng này đậm</b> <br />
<i>Dòng này nghiêng</i> <br />
<u>Dòng này gạch dưới</u><br />
<b><i>Dòng này vừa đậm vừa nghiêng</i></b> </font></p>
<p>Giải và biện luận PT: aX<sup>2</sup>+bX+c=0 <br />
Công thức hoá học: H<sub>2</sub>SO<sub>4</sub></p>
<p><font size=7> Đoạn này chữ lớn quá</font></p>
</Body> </html>
18/01/2019 Bài giảng Thiết kế Web 21
6.1. Các thẻ định dạng văn bản
Ví dụ:
18/01/2019 Bài giảng Thiết kế Web 22
6.2. Các thẻ định dạng danh sách
Danh sách không đánh số thứ tự
<ul>
<li> Mục 1 của danh sách </li>
<li> Mục 2 của danh sách </li>
.......
<li> Mục n của danh sách </li>
</ul>
Thay đổi kiểu dáng cho chỉ mục
<ul Type=Trị thuộc tính>: Áp dụng cho tất cả các mục
<li Type= Trị thuộc tính>: Áp dụng cho 1 mục chỉ định
Các trị thuộc tính: Disc: Dấu tròn đen (Mặc định), square:
Hình vuông đen đặc, Circle: Hình tròn rỗng
18/01/2019 Bài giảng Thiết kế Web 23
6.2. Các thẻ định dạng danh sách
Danh sách có đánh số thứ tự
<ol>
<li> Mục 1 của danh sách </li>
<li> Mục 2 của danh sách </li>
. . . . . . .
<li> Mục n của danh sách </li>
</ol>
Thay đổi kiểu dáng cho chỉ mục
<ol Type=Trị> Kiểu STT cho toàn văn bản danh sách
<li Type= Trị> Kiểu STT cho 1 mục
Trị: 1,a,A,i,I tương ứng 1,2,3...; a,b,c...; A,B,C...; i,ii,iii...; hoặc
I,II,III...
18/01/2019 Bài giảng Thiết kế Web 24
5
6.2. Các thẻ định dạng danh sách
Danh sách có đánh số thứ tự (tt)
Chỉ định giá trị khởi đầu
<ol Start=Trị>: Tác động tất cả các mục
trong danh sách trừ khi mục trong dánh
sách chỉ định khác
<li Value = Trị>: Tác động mục chỉ
định và các mục sau đó nếu các mục này
không chỉ định khác.
18/01/2019 Bài giảng Thiết kế Web 25
6.2. Các thẻ định dạng danh sách
Danh sách có đánh số thứ tự (tt)
<h3>CHƯƠNG TRÌNH ĐÀO TẠO NGÀNH WEBSITE</h3>
<ol type="I">
<li><b> THIẾT KẾ WEBSITE </b>
<ol type = “1">
<li> Ngôn ngữ HTML và CSS </li>
<li> Ngôn ngữ kịch bản JavaScript </li>
<li> Thiết kế giao diện PhotoShop </li>
<li> Thiết kế WebSite Dreamweaver </li>
</ol>
<li><b> LẬP TRÌNH WEBSITE </b>
<ol type = "1">
<li> Phân tích và Thiết kế
CSDL </li>
<li> Lập trình CSDL
ASP.NET và SQL Sever </li>
<li> Quản trị Website </li>
</ol>
</ol>
18/01/2019 Bài giảng Thiết kế Web 26
6.2. Các thẻ định dạng danh sách
18/01/2019 Bài giảng Thiết kế Web 27
6.2. Các thẻ định dạng danh sách
Thẻ xác định danh sách (có đề mục và mô tả đề mục) là
một bộ gồm 3 thẻ:
<dl></dl> viết tắt của chữ "definition list" có nghĩa là sự
xác định (hay định nghĩa) danh sách.
<dt></dt> viết tắt của chữ "defines an item" có nghĩa là
xác định (hay định nghĩa) một mục.
<dd></dd> viết tắt của chữ "defines describe an item" có
nghĩa là xác định (hay định nghĩa) một mô tả của một mục.
18/01/2019 Bài giảng Thiết kế Web 28
6.2. Các thẻ định dạng danh sách
Danh sách (có đề mục và mô tả đề mục)
18/01/2019 Bài giảng Thiết kế Web 29
6.3. Các thẻ định dạng đề mục
Văn bản nằm trong các thẻ đề mục sẽ có cỡ chữ từ lớn
đến nhỏ giảm dần từ đề mục 1 đến đề mục 6
18/01/2019 Bài giảng Thiết kế Web 30
<h1> ... </h1> Định dạng đề mục cấp 1
<h2> ... </h2> Định dạng đề mục cấp 2
<h3> ... </h3> Định dạng đề mục cấp 3
<h4> ... </h4> Định dạng đề mục cấp 4
<h5> ... </h5> Định dạng đề mục cấp 5
<h6> ... </h6> Định dạng đề mục cấp 6