Giáo trình thiết kế web đầy đủ
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.29 MB, 254 trang )
-1-
MỤC LỤC
GIỚI THIỆU VỀ MÔ ĐUN
Mã số mô đun: MĐ 20
Thời gian mô đun: 90 giờ;
(Lý thuyết: 30 giờ; Thực hành: 60 giờ)
I. VỊ TRÍ, TÍNH CHẤT CỦA MÔ ĐUN
- Vị trí: Môn học được bố trí sau khi học xong các môn chung và trước các môn
học/mô đun đào tạo nghề chuyên nghiệp.
- Tính chất: Là môn học cơ sở bắt buộc học.
II. MỤC TIÊU MÔ ĐUN
- Xây dựng được các trang chủ, trên đó có các ứng dụng phục vụ các mục tiêu cụ
thể, có khả năng liên kết đến các trang Web khác
- Trình bày trên trang Web hệ thống thông tin tổng hợp bao gồm: văn bản, hình ảnh,
âm thanh với nhiều kiểu định dạng khác nhau
- Ứng dụng một số ngôn ngữ lập trình cơ bản vào trang WEB phục vụ công việc
tính toán, tạo các hiệu ứng trên trang WEB
- Tạo được các trang Web động liên kết đến các hệ CSDL cho truớc hoặc xây dựng
mới phục vụ cho các ứng dụng, cụ thể trong chương trình phát triển CNTT quốc gia.
So sánh sự khác nhau giữa các ngôn ngữ lập trình trên Web từ đó chọn công cụ
phù hợp trong thiết kế và thi công trang WEB bảo đảm kỹ thuật và tính mỹ thuật.
-2-
Chương 1 Ngôn ngữ HTML
-3-
Chương 1 Ngôn ngữ HTML
CHƯƠNG 1
NGÔN NGỮ HTML
MỤC TIÊU
Sau khi đọc xong chương này bạn đọc sẽ có được những kiến thức sau:
-
Trình bày được một văn bản tương tự như trong Microsoft Word như căn lề,
định dạng chữ (gạch chân, bôi đậm, in nghiêng ...), thay đổi font chữ, màu
chữ, đánh dấu danh sách, các thẻ định dạng văn bản trong HTML.
-
Sử dụng thành thạo các thẻ tạo bảng, tạo hàng, tạo cột; cách trộn ô và bước
đầu thiết kế được một trang web sử dụng bảng để chia bố cục.Hình ảnh và siêu
liên kết trong HTML.
-
Chèn được ảnh và các liên kết có đầy đủ thuộc tính theo chuẩn.
-
Tạo được một form đăng nhập hoàn chỉnh với text, password, selectbox.
NỘI DUNG CỦA CHƯƠNG
-
Tổng quan về HTML
-
Thẻ định dạng văn bản
-
Hình ảnh và siêu liên kết
-
Giao tiếp với máy chủ bằng thẻ form
-
Các thành phần nâng cao trong HTML
-
Bài tập và trắc nghiệm
1.1 TỔNG QUAN VỀ HTML
1.1.1 HTML là gì?
HTML viết tắt cho Hyper Text Markup Language có thể dịch là "Ngôn ngữ
đánh dấu siêu văn bản" là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các
trang web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web. Được định
nghĩa như là một ứng dụng đơn giản của SGML - Standard Generalized Markup
Language - một hệ thống tổ chức và gắn thẻ yếu tố của một tài liệu, vốn được sử dụng
-4-
Chương 1 Ngôn ngữ HTML
trong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trở thành
một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) sáng lập và duy
trì. Phiên bản hiện này của nó là HTML 5.
HTML có tác dụng giúp cho trình duyệt web có thể biết cách thể hiện một trang
web như thế nào từ văn bản, hình ảnh cho đến các siêu liêu kết.
HTML không có gì khác ngoài văn bản được đánh dấu theo các thẻ - tag và
thuộc tính của chúng – attribute.
Các loại thẻ đánh dấu cơ bản trong HTML:
•
Đánh dấu Có cấu trúc miêu tả mục đích của phần văn bản. Ví dụ
Giáo
trình HTML
sẽ điều khiển phần mềm đọc hiển thị "HTML" là đề mụccấp một.
•
Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản bất kể
chức năng của nó là gì. Ví dụ, <b>boldface</b> sẽ hiển thị đoạn văn bản
được in đậm: boldface. Cách dùng đánh dấu trình bày này bây giờ không còn
được khuyên dùng mà nó hầu như được thay thế bởi CSS – Cascade Style
Sheet được giới thiệu tại Chương 2 của giáo trình.
•
Đánh dấu siêu liên kết chứa phần liên kết từ trang này đến trang kia, từ webiste
này đến website khác.
Ví dụ:
<a href=" />sẽ hiển thị từ Wikipedia như là một liên kết ngoài đến một trang web khác.
•
Các phần tử thành phần điều khiển tạo ra các đối tượng. Ví dụ như các nút ấn.
1.1.2 Cấu trúc của file HTML
1.1.2.1 Cấu trúc thẻ đánh dấu trong HTML
Một tài liệu HTML bao gồm các thành phần được đánh dấu bởi các thẻ. Dựa
vào các thẻ đó trình duyệt web sẽ biết cách hiển thị nội dung của tài liệu HMTL như
thế nào.
-5-
Chương 1 Ngôn ngữ HTML
Một tag có 3 thành phần chính: start tag – thẻ mở, end tag – thẻ đóng và
attribute – thuộc tính. Thuộc tính của thẻ được đặt trong thẻ mở, giữa thẻ mở và thẻ
đóng là nội dung tương ứng với thẻ đó.
Cấu trúc thông thường của một thẻ là:
<tag attribute1 = “value” attribute2 = “value”>content</tag>
Nếu một thẻ không có nội dung sẽ được gọi là thẻ rỗng và khi đó chúng ta có
thể không cần dùng đến thẻ đóng mà kết thúc thẻ mở với dấu “/”
<tag attribute1 = “value” attribute2 = “value />
Ví dụ với đoạn mã HTML sau:
Tieu de - Heading 3 – Bao gom the dong, the mo va noi
dung
The p voi thuoc tinh text align va noi
dung. Cung co the chua nhung the khac ben trong noi dung.size= “100”/>
Hình 1.1 Cấu trúc của file HTML
1.1.2.2 Cấu trúc file HTML
File HTML bao giờ cũng bắt đầu bằng cặp thẻ <html></html> Cặp thẻ này
báo cho trình duyệt Web biết rằng nó đang đọc một tập tin có chứa các mã HTML.
Bên trong cặp thẻ <html></html> là các cặp thẻ <head></head> và
<body></body>
Trong đó:
-6-
Chương 1 Ngôn ngữ HTML
• Bên trong cặp thẻ <head><head> có thể chứa:
o Cặp thẻ <title> văn bản </title> đánh dấu tiêu đề cho trang web.
o Các thẻ <meta/> quy định một số thông tin cho trang web ví dụ quy định
trang web sử dụng tiếng việt (Unicode).
o Các thẻ <link/> để liên kết với các file khác. Phổ biến nhất là file CSS
o Các cặp thể <script>Mã lập trình</script> để chứ các đoạn mã
lập trình như Vbscript, Javascript sẽ được đề cập tới ở chương III của giáo
trình
• Bên trong thẻ <body></body> Sẽ chứa các đoạn văn bản và các thẻ đánh dấu
toàn bộ nội dung của một trang web và cũng có thể chứa những đoạn mã lập
trình với cặp thẻ <script></script>
Ngoài ra để ghi chú thích, tiện cho việc xem tag HTML hoặc cập nhật một trang
Web, ta có thể sử dụng thẻ ghi chú trong HTML <!-- nội dung ghi chú -->
.Cặp thẻ này chỉ có tác dụng cho người lập trình đánh dấu các đoạn mã trong file
HTML, trình duyệt sẽ không hiện thị nội dung có trong thẻ này.
Chú ý: Một tài liệu HTML sẽ được bỏ qua các dấu xuống dòng. Ví dụ bạn đặt một
đoạn văn như định dạng như sau với cặp thẻ <body></body>
<body>
Giáo trình Thiết kế web gồm 6 chương Chương I: Ngôn ngữ
HTML Chương này cung cấp những kiến thức cơ HMTL cơ sở
của mọi website trên thế giới.
</body>
Thì trên thực tế ta sẽ nhận được là:
-7-
Chương 1 Ngôn ngữ HTML
Hình 1.2 Kết quả mô tả thẻ body
Một file HTML có thể được lưu với phần mở rộng là .html hoặc .htm đều được.
Vậy cấu trúc cơ bản của một file HTML như sau:
<html>
<head>
<title> Tên trang </title>
</head>
<body>
<!-- Văn bản và các thẻ HTML -->
</body>
</html>
1.1.3 XHTML
1.1.3.1 XHTML là gì
XHTML - viết tắt của Extensible HyperText Markup Language được dịch là
Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng - là một ngôn ngữ đánh dấu kế thừa từ
HTML, nhưng có cú pháp chặt chẽ hơn. XHTML 1.0 là Khuyến cáo của World Wide
Web Consortium (W3C) vào ngày 26 tháng 2 năm 2000.
Về phương diện kĩ thuật, XHTML là kiểu tài liệu thâu nạp HTML, tái cấu trúc
lại dưới dạng XML. Các dạng tài liệu thuộc họ XHTML tất cả đều dựa trên XML, và
được thiết kế để làm việc tuyệt đối với các trình đại diện người dùng hiểu XML.
XHTML là thế hệ kế tiếp HTML.
1.1.3.2 Sự khác nhau giữa HTML và XHTML
Các phần tử phải được lồng nhau đúng cách:
-8-
Chương 1 Ngôn ngữ HTML
Trong HTML một số phần tử có thể được lồng vào nhau không đúng cách
<b><i>This text is bold and italic</b></i>
Trong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách, thẻ đóng
và thẻ mở luôn phải đi theo một cặp:
<b><i>This text is bold and italic</i></b>
XHTML phải được đặt ở dạng chuẩn (well-formed)
Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc <html>.
Tất cả các phần tử khác có thể có các phần tử con. Các phần tử con phải đi theo cặp và
phải được đặt lồng nhau đúng cách bên trong phần tử mẹ. Cấu trúc tài liệu cơ bản là:
<html>
<head> ... </head>
<body> ... </body>
</html>
Tên gọi của thẻ đều phải viết thường
Do XHTML kế thừa cú pháp của XML và mỗi trang XHTML đều là các ứng
dụng XML cho nên XHTML có phân biệt chữ hoa chữ thường, điều không có ở
HTML. Với HTML thì các thẻ như
và <BR> là hiểu là giống nhau nhưng một
khi chúng ta đã xác định trang web của mình là XHTML thì trình duyệt sẽ dịch hai thẻ
này là khác nhau.
HTML chấp nhận cách viết dưới:
<BODY>
<P>This is a paragraph</P>
</BODY>
XHTML đòi hỏi phải viết lại phần trên thành:
<body>
This is a paragraph
</body>
Tất cả các thẻ XHTML phải được đóng lại
-9-
Chương 1 Ngôn ngữ HTML
Phần tử không rỗng phải có một thẻ đóng. HTML chấp nhận cách viết dưới:
This is a paragraph
This is another paragraph
XHTML đòi hỏi phải viết lại phần trên thành:
This is a paragraph
This is another paragraph
Các thẻ rỗng cũng phải được đóng lại
Các thẻ rỗng hoặc là phải có thể đóng hoặc là thẻ mở phải được kết thúc bằng
/>. HTML chấp nhận cách viết dưới:
This is a break
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
XHTML đòi hỏi phải viết lại phần trên thành:
This is a break
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face"/>
Chú ý quan trọng:
Để làm cho trang XHTML tương thích với các trình duyệt hiện nay thì nên đặt
một khoảng trắng thêm vào trước kí tự / kiểu như
và <hr />
Các giá trị của thuộc tính phải được đặt trong dấu nháy kép
HTML chấp nhận cách viết dưới:
<table width=100%>
XHTML đòi hỏi phải viết lại phần trên thành:
<table width="100%">
-10-
Chương 1 Ngôn ngữ HTML
1.1.4 Tạo file HTML đầu tiên
Có thể dùng rất nhiều phần mềm để soạn thảo mã nguồn HTML như Notepad,
Visual studio, Dreamweaver, PHP Designer…. Khi bắt đầu học về HTML bạn đọc nên
chọn một phần mềm như notepad++ để soạn thảo HTML. Sử dụng phần mềm
notepad++ không có nhiều tiện ích như Visual Studio hay Dreamweaver nhưng
Notepad++ sẽ giúp bạn nhớ mã nguồn dễ hơn. Tuy nhiên, khi phát triển 1 ứng dụng
web lớn bạn nên chọn một phần mềm có nhiều tiện ích. Trong giáo trình nay, chúng tôi
đã chọn phần mềm Adobe Dreaweaver cs5 để soạn thảo mã nguồn.
Hình 1.3 Màn hình khởi động của Dreamweaver
Sau khi file HTML được tạo, chúng ta có thể xem trang này ở chế độ Design có
nghĩa là nó đã được hiện thị như trên trình duyệt. Ta chọn Tab Code để có thể chuyển
về chế độ lập trình.
Hình 1.4 Cửa sổ tạo file HTML ở chế độ Design
Ta sẽ được màn hình như sau:
-11-
Chương 1 Ngôn ngữ HTML
Hình 1.5 Cửa sổ tạo file HTML ở chế độ Code
Ta có thể thấy Dreamweaver đã tạo ra cấu trúc của một file HTML hay chính xác
hơn là một file XHTML với Doctype là XHTML 1.0 Transitional, thẻ meta định dạng
charset là UTF-8 giúp người sử dụng có thể dùng tiếng Việt cho trang web.
Dưới đây là mã nguồn của một trang HTML cơ bản:
" /><html xmlns=" /><head>
<title>HHT</title>
</head>
<body>
Giáo trình Thiết kế web gồm 6 chương
Chương I: Ngôn ngữ HTML
Chương này cung cấp những kiến thức cơ HMTL cơ sở của mọi
website trên thế giới. Qua đó có thể hiểu được cấu trúc cơ bản
của 1 trang web và các thành phần trên đó. Kết thúc chương này
bạn có thể xây dựng được 1 trang web…
</body>
</html>
Khi lưu file, Dreamweaver sẽ mặc định đuôi mở rộng của file là .html. Ta có thể
xem tran web của mình ở chế độ design Dreamweaver như hình vẽ dưới:
-12-
Chương 1 Ngôn ngữ HTML
Hình 1.6 Cửa sổ tạo file HTML có nội dung ở chế độ Design
Ta có thể mở file vừa lưu bằng trình duyệt Internet Explorer hoặc Firefox hay
bất kỳ trình duyệt web phổ biến nào chạy trên máy tính.
Hình 1.7 File HTML được mở bằng trình duyệt Firefox
1.2 THẺ ĐỊNH DẠNG VĂN BẢN
1.2.1 Thẻ định dạng đoạn văn
Các bài viết trên các website được chia thành nhiều đoạn văn có định dạng giống
như một văn bản word. Với HTML, chúng ta có thể dùng cặp thẻ để phân
chia nội văn bản thành từng đoạn như vậy.
Các thuộc tính của thẻ p:
TT
1.
Tên
Giá trị
Mô tả
Align
left, right,
center,
justify
Căn lề văn bản giống như trên tài liệu word office. Chỉ
được sử dụng trong DTD Transitional và Frameset
-13-
Chương 1 Ngôn ngữ HTML
TT
Tên
Giá trị
2.
Dir
ltr, rtl
Mô tả
Hướng của văn bản từ trái qua phải hay từ phải qua trái
Bảng 1.1 Các thuộc tính của thẻ p
HTML không sử dụng dấu xuống dòng nên nếu muốn xuống dòng sẽ phải sử
dụng thẻ
.
Ví dụ chúng ta có một file HTML như sau:
<body>
Trường Cao đẳng nghề Công nghệ cao Hà Nội - Công trình
trọng điểm chào mừng Đại lễ 1000 năm Thăng Long-Hà Nội là cơ
sở đào tạo công lập trực thuộc UBND TP Hà Nội được thành lập
theo quyết định số 808/QĐ-LĐTBXH ngày 25-6-2009 của Bộ trưởng
Bộ Lao động Thương binh và Xã hội.
Trường được đầu tư xây dựng hiện đại, trang
thiết bị dạy học theo tiêu chuẩn Quốc gia và Thế giới, nhằm
đào tạo nguồn nhân lực chất lượng cao cho Thủ đô Hà Nội và khu
vực kinh tế trọng điểm Bắc Bộ.
Trường là địa điểm tổ chức Hội thi thiết bị
dạy nghề tự làm toàn quốc lần thứ 3, hội thi học sinh giỏi
nghề Quốc gia tháng 7 năm 2010.
</body>
</html>
Chúng ta sẽ nhận được 2 đoạn văn, đoạn văn thứ nhất không có thuộc tính align
sẽ được mặc đính căn trái, đoạn văn thứ 2 được căn bên phải.
-14-
Chương 1 Ngôn ngữ HTML
Hình 1.8 Mở file vừa tạo bằng trình duyệt
1.2.2 Thẻ định dạng kiểu chữ
Khi trình bày một trang Web, có lúc cần nhấn mạnh hay để tạo sự khác biệt, ta
cần phải hiển thị văn bản ở các dạng đậm, nghiêng, gạch chân... HTML có các tag định
dạng kiểu chữ như sau:
TT
HTML
Kết quả
1.
<u>Ðây là tag gạch chân</u>
Ðây là tag gạch chân
2.
<i>Ðây là tag nghiêng </i>
Ðây là tag nghiêng
3.
<tt>Ðây là tag chữ đánh máy</tt>
Ðây là tag chữ đánh máy
4.
<b>Ðây là tag đậm </b>
T là tag đậm
5.
<em>Ðây là tag em</em>
Ðây là tag em
6.
<strong>Ðây là tag strong</strong>
Ðây là tag strong
7.
<strike>Ðây là tag strike</strike>
Ðây là tag strike
Bảng 1.2 Các thẻ định dạng font chữ
Bạn có thể kết hợp các tag này với nhau, miễn là chúng được lồng vào nhau
một cách chính xác. Ví dụ:
<b> <i> .... </i> </b>
-15-
Chương 1 Ngôn ngữ HTML
1.2.3 Thẻ tiêu đề
Với một bài viết đầy đủ trên trang web không thể thiếu một tiêu đề nổi bật. Tiêu
đề không chỉ đơn giản là định dạng cho một dòng nào đó in đậm hay in nghiêng mà có
nhiều tác dụng khác ngay cả với bộ máy tìm kiếm như Google. HTML có một nhóm
thẻ dành cho việc đánh dấu tiêu đề. Đó là nhóm thẻ heading. Có 6 kích cỡ cho tiêu đề
theo thứ tự lớn dần, đó là:
, , , , và .
TT
1.
2.
3.
4.
5.
6.
HTML
Kết quả
Tiêu để H1
Tiêu đề H1
Tiêu để H2
Tiêu đề H2
Tiêu để H3
Tiêu đề H3
Tiêu để H4
Tiêu đề H4
Tiêu để H5
Tiêu đề H5
Tiêu để H6
Tiêu đề H6
Bảng 1.3 Thẻ tiêu đề
1.2.4 Thẻ đánh dấu danh sách
Để tạo ra một danh sách liệt kê kiểu bullet hoặc đánh số trong HTML chúng ta có
thể sử dụng thẻ <ul> cho danh sách kiểu bullet (Unordered Lists) và <ol> cho danh
sách kiểu đánh số (Ordered Lists). Kèm theo đó là một dạng danh sách đặc biệt nữa là
bao gồm các mục mỗi mục sẽ có phần mô tả đi kèm đó là Definition Lists được sử
dụng cặp thẻ <dl></dl>
1.2.4.1 Thẻ UL
Danh sách Unordered List được bắt đầu với thẻ <ul> và kết thúc bằng thẻ </ul>
-16-
Chương 1 Ngôn ngữ HTML
Và mỗi mục của danh sách được đặt trong cặp thẻ <li></li>. Đối với các danh
sách đa cấp chúng ta có thể lồng một danh sách khác trong cặp thẻ <li></li> nghĩa là
đặt cặp thể <ul></ul> vào trong cặp thẻ <li></li>.
Ngoài ra trong cặp thẻ <li></li> chúng ta vẫn có thể kết hợp với các thẻ khác.
Ví dụ với đoạn mã sau:
<ul>
<li> Danh mục 1
<ul>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ul>
</li>
<li> <b>Danh mục 2</b>
<ul>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ul>
</li>
<li>Danh mục 3</li>
</ul>
Ta sẽ được kết quả như sau:
• Danh mục 1
o Danh mục 1.1
o Danh mục 1.2
o Danh mục 1.3
• Danh mục 2
o Danh mục 2.1
o Danh mục 2.2
• Danh mục 3
-17-
Chương 1 Ngôn ngữ HTML
1.2.4.2 Thẻ OL
Tương tự như Unorder List về cấu trúc chỉ khác là Order List bắt đầu với thẻ
<ol> và kết thúc bằng thẻ </ol>. Ngoài ra order list không tự động xếp cấp độ như
unorder list (thể hiện ở dấu bullet) mà các mục trong một danh sách luôn được đánh số
từ 1 hoặc có thể hiểu order list chỉ có tác dụng với một cấp.
Ví dụ với đoạn mã sau:
<ol>
<li>
Danh mục 1
<ol>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ol>
</li>
<li>
<b>Danh mục 2</b>
<ol>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ol>
</li>
<li>Danh mục 3</li>
</ol>
Ta sẽ được kết quả như sau:
1. Danh mục 1
1. Danh mục 1.1
2. Danh mục 1.2
3. Danh mục 1.3
2. Danh mục 2
1. Danh mục 2.1
-18-
Chương 1 Ngôn ngữ HTML
2. Danh mục 2.2
3. Danh mục 3
1.2.4.3 Thẻ DL
Definition Lists có cấu trúc phức tạp hơn và ít sử dụng hơn so với Unordered
Lists và Ordered Lists. Cấu trúc của thẻ <dl> có dạng như sau:
<dl>
<dt>
<dd>
<dt>
<dd>
<dt>
<dd>
Danh mục 1 </dt>
Mô tả cho danh mục 1 </dd>
Danh mục 2 </dt>
Mô tả cho danh mục 2 </dd>
Danh mục 3 </dt>
Mô tả cho danh mục 3 </dd>
</dl>
Trong đó cặp thẻ <dt></dt> là để dánh dấu tiêu đề cho một mục và <dd></dd>
luôn phải đi kèm ngay sau đó nếu muốn có phần mô tả.
Ta sẽ được danh sách có dạng như sau:
Danh mục 1
Mô tả cho danh mục 1
Danh mục 2
Mô tả cho danh mục 2
Danh mục 3
Mô tả cho danh mục 3
1.2.5 Thẻ định dạng font
Từ các phiên bản HTML 4 trở về trước (hiện nay là HTML 5) thẻ font được sử
dụng để định dạng các kiểu font, style chữ khác nhau trên cùng một trang web. Hiện
nay việc định dạng font chữ đã được thay thế hoàn toàn bởi CSS vì vậy đến HTML 5
thẻ font đã được loại bỏ. Tuy nhiên, hầu hết các website hiện nay vẫn sử dụng phiên
bản HTML4 nên thẻ <font> vẫn còn nguyên giá trị.
-19-
Chương 1 Ngôn ngữ HTML
Để định dạng font cho một đoạn văn bản nhất định nào đó bạn đặt nó trong cặp
thẻ <font></font>
Các thuộc tính của thẻ font:
TT
Thuộc tính
1.
color
Giá trị
Mô tả
- rgb(x,y,z)
Đánh dấu mã màu cho font bạn chọn. Có thể là
mã màu RBG với x, y là số nguyên từ 0-255, mã
màu theo thập lục phân hoặc có thể là tên màu
- #xxxxxx
- tên mầu
2.
3.
size
1-7
Cỡ chữ từ 1 – 7 được tính theo đơn vị của
HTML
face
tên font 1,
tên font 2...
Tên các font muốn sử dụng, trình duyệt sẽ hiển
thị font đầu tiên nếu không có sẽ chọn lần lượt.
Ví dụ: face= “tahoma, arial”
Bảng 1.4 Các thuộc tính của thẻ font
1.2.6 Thực hành
Bạn hãy thực thi giao diện sau:
Hình 1.9 Thẻ định dạng font trong HTML
Trong đó:
-
Tiêu đề là sử dụng tiêu đề số 3 có gạch chân.
-20-
Chương 1 Ngôn ngữ HTML
-
Đoạn văn căn lề 2 bên (lưu ý do đoạn văn ngắn nên ta phải thu nhỏ cửa sổ trình
duyệt để có thể thấy rõ hơn).
-
Chữ HTML sử dụng font Arial, size 4 màu đỏ.
1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT
Để một trang web hoàn thiện và có mỹ quan hơn thì chỉ có văn bản thông thường
thôi chưa đủ mà cần phải có sự đóng góp của các mối liên kết và hình ảnh. Chúng
đóng góp một phần rất quan trọng vì vậy tiếp theo đây tôi sẽ giới thiệu tới các bạn 2
thẻ đánh dấu cho hình ảnh và siêu liên kết trong HTML đó là thẻ <img> - Image và
thẻ <a> - Anchor.
1.3.1 Thẻ hình ảnh <img>
Thẻ <img> là một thẻ không có nội dung nên nó là không có thẻ đóng </img>.
Các thuộc tính của thẻ img:
T
T
Thuộc tính
1.
Src
2.
3.
Alt
width,
height
Giá trị
Mô tả
Đường dẫn
Đây là thuộc tính bắt buộc phải có.
ảnh
Text
Trình duyệt sẽ hiện thị đoạn text thay thế nếu ảnh
không tồn tại. Nếu theo chuẩn thì đây là một thuộc
tính bắt buộc. Nhưng nếu không có trình duyệt
vẫn hiển thị ảnh bình thường.
pixel
Đây là độ rộng và cao mà bạn muốn hiển thị ảnh.
Không phải là kích thước thực tế của ảnh. Nếu
không có ảnh sẽ được hiện thị 100%. Nếu chỉ có 1
trong 2 thì chiều còn lại sẽ hiển thị theo tỉ lệ
thuận. Ví dụ một bức ảnh có kích thước là 200px
* 200px bạn có thể hiện thị trên webiste là width =
20px height = 30px hoặc chỉ một trong 2 thuộc
tính này thuộc tính còn lại tự động tính cho bạn.
-21-
Chương 1 Ngôn ngữ HTML
T
T
Thuộc tính
Giá trị
4.
Align
vị trí
Ví trị căn của ảnh so với văn bản
5.
vspace
pixel
Độ rộng khoảng trắng 2 bên trái và phải của ảnh.
6.
hspace
pixel
Độ rộng khoảng trắng 2 bên trên và dưới của ảnh.
Mô tả
Bảng 1.6 Các thuộc tính của thẻ img
Như vậy cấu trúc cơ bản của thẻ img là: <img src= “path” alt= “text”/>
Bây giờ chúng ta sẽ đi chi tiết vào một số thuộc tính của thẻ img.
1.3.1.1 Đường dẫn của ảnh
Với giá trị đường dẫn của ảnh bạn có thể để bất cứ đường dẫn nào kể cả các
đường dẫn trên website như hay đường dẫn local (trên
máy tính). Đối với đường dẫn local thì các bạn phải hiểu được thế nào là đường dẫn
tương tối và đường dẫn tuyệt đối.
Đường dẫn tuyệt đối được bắt đầu từ tên ổ cứng cho đến các thư mục con và đến
tên file. Ví dụ C:\html\picture.jpg. Như vậy chỉ cần file ảnh picture.jpg ở cố định đúng
tại thư mục html thuộc ổ C bạn có thể trỏ tới nó dù file HTML của bạn ở bất kỳ đâu.
Nhưng trong trường hợp bạn để file HTML và ảnh cùng trong thư mục html và
thường là khi làm việc chúng ta luôn gom các file lại. Và bạn sử dụng đường dẫn tuyệt
đối, hãy thử tưởng tượng bạn copy thư mục đó đi cho khác hay chia sẻ cho bạn bè và
họ lưu thư mục đó ở ổ D. Chắc chắn bức ảnh sẽ không hiện lên.
Vì vậy người ta luôn dùng đường dẫn tương đối cho trường hợp này và áp dụng
cho nhiều thứ khác không chỉ riêng HTML. Đường dẫn tương đối là tùy thuộc vào ví
trí của file trỏ tới một file khác.
Ví dụ ta có một cây thư mục như sau:
-22-
Chương 1 Ngôn ngữ HTML
Hình 1.18 Ví dụ cây thư mục
Nguyên tắc của đường dẫn tương đối là tính từ vị trí của file mà trỏ tới file khác với:
-
../tên thư mục/file: cứ mỗi ../ bạn ra đi ra ngoài một cấp thư mục sau đó trỏ tới
file thuộc cấu trúc thư mục được đặ trong đường dẫn
-
tên thư mục/file: tương ứng với bạn bạn trỏ tới file thuộc thư mục nằm cùng
cấp với file của bạn.
Ví dụ:
-
Để hiển thị ảnh picture.jpg trên file baitap1.html bạn có thể dùng đường
dẫn sau: “images/pictuer.jpg” vì thư mục images nằm cùng cấp với file
baitap1.html
-
Để hiển thị ảnh picture.jpg trên file baitap2.html bạn có thể dùng đường
dẫn sau: “../images/pictuer.jpg”. Dấu ../ ứng với bạn đã ra khỏi thư mục
chứ file baitap2.html 1 cấp nghĩ là thư mục html khi đó bạn tiếp tục đi từ
thư mục html vào thư mục images và trỏ tới picture.jpg.
-
Để hiển thị ảnh picture.jpg trên file baitap3.html bạn chỉ cần dùng đường
dẫn sau: “pictuer.jpg” vì file picturer.jpg nằm cùng cấp với file
baitap3.html
Ngoài ra phương pháp sử dụng đường dẫn tương đối cũng được sử dụng với môi
trường internet với URL cũng như đường dẫn của file.
Tuy nhiên điều đặc biệt khi sử dụng đường dẫn ảnh với url có thể sử dụng dạng
đường dẫn tương đối sau: “/path/picture” thì đường dẫn đó sẽ được hiểu là
“domain/part/picture”.
-23-
Chương 1 Ngôn ngữ HTML
Sở dĩ tôi muốn nói kỹ về đường dẫn ảnh như vậy là vì nó rất quan trọng và hơi
trừu tượng đối với các bạn mới bắt đầu mà chưa hiểu rõ về khái niệm đường dẫn tương
đối và đường dẫn tuyệt đối.
1.3.1.2 Căn chỉnh vị trí của ảnh
Khi một bức ảnh đi kèm với một đoạn văn hay thành phần nào đó bạn có thể có
căn chỉnh vị trí của ảnh so với các thành phần đó với thuộc tính align.
Chú ý: Ở đây thuộc tính align của ảnh khác với của thẻ p hay các thẻ khác. Nó có
các giá trị khác và được hiểu là cách các thành phần khác hiển thị thế nào với bức ảnh đó.
Thuộc tính valign text có các giá trị:
-
top: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
middle: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
bottom: Văn bản sẽ hiển thị ngang với phần dưới của bức ảnh.
Hình 1.19 Căn chỉnh vị trí của ảnh với thuộc tính align
1.3.1.3 Thuộc tính alt
Khi trang Web được xem bằng trình duyệt mà người sử dụng tắt việc trình bày
hình ảnh để tiết kiệm thời gian download, hoặc đường dẫn ảnh không chính xác, nó sẽ
không được hiển thị. Thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh một
chuỗi văn bản mô tả nó.
-24-
Chương 1 Ngôn ngữ HTML
Ví dụ: <img src = "vidu.jpg" alt = "Ví dụ"/>
Hình 1.20 Thuộc tính alt của thẻ <im/> trên trình duyệt Internet Explorer
Ta thấy với trình duyệt Internet Explorer, một bức ảnh không tồn tại sẽ được hiển
thị như trên và được thay thể bởi từ “Ví dụ”. Còn với các trình duyệt khác đơn thuần
chỉ là thay thế bằng giá trị của thuộc tính alt.
1.3.1.4 Độ rộng và chiều cao của ảnh
Trong quá trình biên tập website có thể bạn không chuẩn bị được những bức ảnh
có kích thước chuẩn như bạn muốn thể hiện trên webiste vì vậy bạn cần sử dụng thuộc
tính width và height để chỉnh lại kích thước của ảnh dù to hay nhỏ về theo đúng ý
mình để có được bố cục website đẹp mắt.
-25-
, , và .
TT
1.
2.
3.
4.
5.
6.
HTML
Kết quả
Tiêu để H1
Tiêu đề H1
Tiêu để H2
Tiêu đề H2
Tiêu để H3
Tiêu đề H3
Tiêu để H4
Tiêu đề H4
Tiêu để H5
Tiêu đề H5
Tiêu để H6
Tiêu đề H6
Bảng 1.3 Thẻ tiêu đề
1.2.4 Thẻ đánh dấu danh sách
Để tạo ra một danh sách liệt kê kiểu bullet hoặc đánh số trong HTML chúng ta có
thể sử dụng thẻ <ul> cho danh sách kiểu bullet (Unordered Lists) và <ol> cho danh
sách kiểu đánh số (Ordered Lists). Kèm theo đó là một dạng danh sách đặc biệt nữa là
bao gồm các mục mỗi mục sẽ có phần mô tả đi kèm đó là Definition Lists được sử
dụng cặp thẻ <dl></dl>
1.2.4.1 Thẻ UL
Danh sách Unordered List được bắt đầu với thẻ <ul> và kết thúc bằng thẻ </ul>
-16-
Chương 1 Ngôn ngữ HTML
Và mỗi mục của danh sách được đặt trong cặp thẻ <li></li>. Đối với các danh
sách đa cấp chúng ta có thể lồng một danh sách khác trong cặp thẻ <li></li> nghĩa là
đặt cặp thể <ul></ul> vào trong cặp thẻ <li></li>.
Ngoài ra trong cặp thẻ <li></li> chúng ta vẫn có thể kết hợp với các thẻ khác.
Ví dụ với đoạn mã sau:
<ul>
<li> Danh mục 1
<ul>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ul>
</li>
<li> <b>Danh mục 2</b>
<ul>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ul>
</li>
<li>Danh mục 3</li>
</ul>
Ta sẽ được kết quả như sau:
• Danh mục 1
o Danh mục 1.1
o Danh mục 1.2
o Danh mục 1.3
• Danh mục 2
o Danh mục 2.1
o Danh mục 2.2
• Danh mục 3
-17-
Chương 1 Ngôn ngữ HTML
1.2.4.2 Thẻ OL
Tương tự như Unorder List về cấu trúc chỉ khác là Order List bắt đầu với thẻ
<ol> và kết thúc bằng thẻ </ol>. Ngoài ra order list không tự động xếp cấp độ như
unorder list (thể hiện ở dấu bullet) mà các mục trong một danh sách luôn được đánh số
từ 1 hoặc có thể hiểu order list chỉ có tác dụng với một cấp.
Ví dụ với đoạn mã sau:
<ol>
<li>
Danh mục 1
<ol>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ol>
</li>
<li>
<b>Danh mục 2</b>
<ol>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ol>
</li>
<li>Danh mục 3</li>
</ol>
Ta sẽ được kết quả như sau:
1. Danh mục 1
1. Danh mục 1.1
2. Danh mục 1.2
3. Danh mục 1.3
2. Danh mục 2
1. Danh mục 2.1
-18-
Chương 1 Ngôn ngữ HTML
2. Danh mục 2.2
3. Danh mục 3
1.2.4.3 Thẻ DL
Definition Lists có cấu trúc phức tạp hơn và ít sử dụng hơn so với Unordered
Lists và Ordered Lists. Cấu trúc của thẻ <dl> có dạng như sau:
<dl>
<dt>
<dd>
<dt>
<dd>
<dt>
<dd>
Danh mục 1 </dt>
Mô tả cho danh mục 1 </dd>
Danh mục 2 </dt>
Mô tả cho danh mục 2 </dd>
Danh mục 3 </dt>
Mô tả cho danh mục 3 </dd>
</dl>
Trong đó cặp thẻ <dt></dt> là để dánh dấu tiêu đề cho một mục và <dd></dd>
luôn phải đi kèm ngay sau đó nếu muốn có phần mô tả.
Ta sẽ được danh sách có dạng như sau:
Danh mục 1
Mô tả cho danh mục 1
Danh mục 2
Mô tả cho danh mục 2
Danh mục 3
Mô tả cho danh mục 3
1.2.5 Thẻ định dạng font
Từ các phiên bản HTML 4 trở về trước (hiện nay là HTML 5) thẻ font được sử
dụng để định dạng các kiểu font, style chữ khác nhau trên cùng một trang web. Hiện
nay việc định dạng font chữ đã được thay thế hoàn toàn bởi CSS vì vậy đến HTML 5
thẻ font đã được loại bỏ. Tuy nhiên, hầu hết các website hiện nay vẫn sử dụng phiên
bản HTML4 nên thẻ <font> vẫn còn nguyên giá trị.
-19-
Chương 1 Ngôn ngữ HTML
Để định dạng font cho một đoạn văn bản nhất định nào đó bạn đặt nó trong cặp
thẻ <font></font>
Các thuộc tính của thẻ font:
TT
Thuộc tính
1.
color
Giá trị
Mô tả
- rgb(x,y,z)
Đánh dấu mã màu cho font bạn chọn. Có thể là
mã màu RBG với x, y là số nguyên từ 0-255, mã
màu theo thập lục phân hoặc có thể là tên màu
- #xxxxxx
- tên mầu
2.
3.
size
1-7
Cỡ chữ từ 1 – 7 được tính theo đơn vị của
HTML
face
tên font 1,
tên font 2...
Tên các font muốn sử dụng, trình duyệt sẽ hiển
thị font đầu tiên nếu không có sẽ chọn lần lượt.
Ví dụ: face= “tahoma, arial”
Bảng 1.4 Các thuộc tính của thẻ font
1.2.6 Thực hành
Bạn hãy thực thi giao diện sau:
Hình 1.9 Thẻ định dạng font trong HTML
Trong đó:
-
Tiêu đề là sử dụng tiêu đề số 3 có gạch chân.
-20-
Chương 1 Ngôn ngữ HTML
-
Đoạn văn căn lề 2 bên (lưu ý do đoạn văn ngắn nên ta phải thu nhỏ cửa sổ trình
duyệt để có thể thấy rõ hơn).
-
Chữ HTML sử dụng font Arial, size 4 màu đỏ.
1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT
Để một trang web hoàn thiện và có mỹ quan hơn thì chỉ có văn bản thông thường
thôi chưa đủ mà cần phải có sự đóng góp của các mối liên kết và hình ảnh. Chúng
đóng góp một phần rất quan trọng vì vậy tiếp theo đây tôi sẽ giới thiệu tới các bạn 2
thẻ đánh dấu cho hình ảnh và siêu liên kết trong HTML đó là thẻ <img> - Image và
thẻ <a> - Anchor.
1.3.1 Thẻ hình ảnh <img>
Thẻ <img> là một thẻ không có nội dung nên nó là không có thẻ đóng </img>.
Các thuộc tính của thẻ img:
T
T
Thuộc tính
1.
Src
2.
3.
Alt
width,
height
Giá trị
Mô tả
Đường dẫn
Đây là thuộc tính bắt buộc phải có.
ảnh
Text
Trình duyệt sẽ hiện thị đoạn text thay thế nếu ảnh
không tồn tại. Nếu theo chuẩn thì đây là một thuộc
tính bắt buộc. Nhưng nếu không có trình duyệt
vẫn hiển thị ảnh bình thường.
pixel
Đây là độ rộng và cao mà bạn muốn hiển thị ảnh.
Không phải là kích thước thực tế của ảnh. Nếu
không có ảnh sẽ được hiện thị 100%. Nếu chỉ có 1
trong 2 thì chiều còn lại sẽ hiển thị theo tỉ lệ
thuận. Ví dụ một bức ảnh có kích thước là 200px
* 200px bạn có thể hiện thị trên webiste là width =
20px height = 30px hoặc chỉ một trong 2 thuộc
tính này thuộc tính còn lại tự động tính cho bạn.
-21-
Chương 1 Ngôn ngữ HTML
T
T
Thuộc tính
Giá trị
4.
Align
vị trí
Ví trị căn của ảnh so với văn bản
5.
vspace
pixel
Độ rộng khoảng trắng 2 bên trái và phải của ảnh.
6.
hspace
pixel
Độ rộng khoảng trắng 2 bên trên và dưới của ảnh.
Mô tả
Bảng 1.6 Các thuộc tính của thẻ img
Như vậy cấu trúc cơ bản của thẻ img là: <img src= “path” alt= “text”/>
Bây giờ chúng ta sẽ đi chi tiết vào một số thuộc tính của thẻ img.
1.3.1.1 Đường dẫn của ảnh
Với giá trị đường dẫn của ảnh bạn có thể để bất cứ đường dẫn nào kể cả các
đường dẫn trên website như hay đường dẫn local (trên
máy tính). Đối với đường dẫn local thì các bạn phải hiểu được thế nào là đường dẫn
tương tối và đường dẫn tuyệt đối.
Đường dẫn tuyệt đối được bắt đầu từ tên ổ cứng cho đến các thư mục con và đến
tên file. Ví dụ C:\html\picture.jpg. Như vậy chỉ cần file ảnh picture.jpg ở cố định đúng
tại thư mục html thuộc ổ C bạn có thể trỏ tới nó dù file HTML của bạn ở bất kỳ đâu.
Nhưng trong trường hợp bạn để file HTML và ảnh cùng trong thư mục html và
thường là khi làm việc chúng ta luôn gom các file lại. Và bạn sử dụng đường dẫn tuyệt
đối, hãy thử tưởng tượng bạn copy thư mục đó đi cho khác hay chia sẻ cho bạn bè và
họ lưu thư mục đó ở ổ D. Chắc chắn bức ảnh sẽ không hiện lên.
Vì vậy người ta luôn dùng đường dẫn tương đối cho trường hợp này và áp dụng
cho nhiều thứ khác không chỉ riêng HTML. Đường dẫn tương đối là tùy thuộc vào ví
trí của file trỏ tới một file khác.
Ví dụ ta có một cây thư mục như sau:
-22-
Chương 1 Ngôn ngữ HTML
Hình 1.18 Ví dụ cây thư mục
Nguyên tắc của đường dẫn tương đối là tính từ vị trí của file mà trỏ tới file khác với:
-
../tên thư mục/file: cứ mỗi ../ bạn ra đi ra ngoài một cấp thư mục sau đó trỏ tới
file thuộc cấu trúc thư mục được đặ trong đường dẫn
-
tên thư mục/file: tương ứng với bạn bạn trỏ tới file thuộc thư mục nằm cùng
cấp với file của bạn.
Ví dụ:
-
Để hiển thị ảnh picture.jpg trên file baitap1.html bạn có thể dùng đường
dẫn sau: “images/pictuer.jpg” vì thư mục images nằm cùng cấp với file
baitap1.html
-
Để hiển thị ảnh picture.jpg trên file baitap2.html bạn có thể dùng đường
dẫn sau: “../images/pictuer.jpg”. Dấu ../ ứng với bạn đã ra khỏi thư mục
chứ file baitap2.html 1 cấp nghĩ là thư mục html khi đó bạn tiếp tục đi từ
thư mục html vào thư mục images và trỏ tới picture.jpg.
-
Để hiển thị ảnh picture.jpg trên file baitap3.html bạn chỉ cần dùng đường
dẫn sau: “pictuer.jpg” vì file picturer.jpg nằm cùng cấp với file
baitap3.html
Ngoài ra phương pháp sử dụng đường dẫn tương đối cũng được sử dụng với môi
trường internet với URL cũng như đường dẫn của file.
Tuy nhiên điều đặc biệt khi sử dụng đường dẫn ảnh với url có thể sử dụng dạng
đường dẫn tương đối sau: “/path/picture” thì đường dẫn đó sẽ được hiểu là
“domain/part/picture”.
-23-
Chương 1 Ngôn ngữ HTML
Sở dĩ tôi muốn nói kỹ về đường dẫn ảnh như vậy là vì nó rất quan trọng và hơi
trừu tượng đối với các bạn mới bắt đầu mà chưa hiểu rõ về khái niệm đường dẫn tương
đối và đường dẫn tuyệt đối.
1.3.1.2 Căn chỉnh vị trí của ảnh
Khi một bức ảnh đi kèm với một đoạn văn hay thành phần nào đó bạn có thể có
căn chỉnh vị trí của ảnh so với các thành phần đó với thuộc tính align.
Chú ý: Ở đây thuộc tính align của ảnh khác với của thẻ p hay các thẻ khác. Nó có
các giá trị khác và được hiểu là cách các thành phần khác hiển thị thế nào với bức ảnh đó.
Thuộc tính valign text có các giá trị:
-
top: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
middle: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
bottom: Văn bản sẽ hiển thị ngang với phần dưới của bức ảnh.
Hình 1.19 Căn chỉnh vị trí của ảnh với thuộc tính align
1.3.1.3 Thuộc tính alt
Khi trang Web được xem bằng trình duyệt mà người sử dụng tắt việc trình bày
hình ảnh để tiết kiệm thời gian download, hoặc đường dẫn ảnh không chính xác, nó sẽ
không được hiển thị. Thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh một
chuỗi văn bản mô tả nó.
-24-
Chương 1 Ngôn ngữ HTML
Ví dụ: <img src = "vidu.jpg" alt = "Ví dụ"/>
Hình 1.20 Thuộc tính alt của thẻ <im/> trên trình duyệt Internet Explorer
Ta thấy với trình duyệt Internet Explorer, một bức ảnh không tồn tại sẽ được hiển
thị như trên và được thay thể bởi từ “Ví dụ”. Còn với các trình duyệt khác đơn thuần
chỉ là thay thế bằng giá trị của thuộc tính alt.
1.3.1.4 Độ rộng và chiều cao của ảnh
Trong quá trình biên tập website có thể bạn không chuẩn bị được những bức ảnh
có kích thước chuẩn như bạn muốn thể hiện trên webiste vì vậy bạn cần sử dụng thuộc
tính width và height để chỉnh lại kích thước của ảnh dù to hay nhỏ về theo đúng ý
mình để có được bố cục website đẹp mắt.
-25-
và .
TT
1.
2.
3.
4.
5.
6.
HTML
Kết quả
Tiêu để H1
Tiêu đề H1
Tiêu để H2
Tiêu đề H2
Tiêu để H3
Tiêu đề H3
Tiêu để H4
Tiêu đề H4
Tiêu để H5
Tiêu đề H5
Tiêu để H6
Tiêu đề H6
Bảng 1.3 Thẻ tiêu đề
1.2.4 Thẻ đánh dấu danh sách
Để tạo ra một danh sách liệt kê kiểu bullet hoặc đánh số trong HTML chúng ta có
thể sử dụng thẻ <ul> cho danh sách kiểu bullet (Unordered Lists) và <ol> cho danh
sách kiểu đánh số (Ordered Lists). Kèm theo đó là một dạng danh sách đặc biệt nữa là
bao gồm các mục mỗi mục sẽ có phần mô tả đi kèm đó là Definition Lists được sử
dụng cặp thẻ <dl></dl>
1.2.4.1 Thẻ UL
Danh sách Unordered List được bắt đầu với thẻ <ul> và kết thúc bằng thẻ </ul>
-16-
Chương 1 Ngôn ngữ HTML
Và mỗi mục của danh sách được đặt trong cặp thẻ <li></li>. Đối với các danh
sách đa cấp chúng ta có thể lồng một danh sách khác trong cặp thẻ <li></li> nghĩa là
đặt cặp thể <ul></ul> vào trong cặp thẻ <li></li>.
Ngoài ra trong cặp thẻ <li></li> chúng ta vẫn có thể kết hợp với các thẻ khác.
Ví dụ với đoạn mã sau:
<ul>
<li> Danh mục 1
<ul>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ul>
</li>
<li> <b>Danh mục 2</b>
<ul>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ul>
</li>
<li>Danh mục 3</li>
</ul>
Ta sẽ được kết quả như sau:
• Danh mục 1
o Danh mục 1.1
o Danh mục 1.2
o Danh mục 1.3
• Danh mục 2
o Danh mục 2.1
o Danh mục 2.2
• Danh mục 3
-17-
Chương 1 Ngôn ngữ HTML
1.2.4.2 Thẻ OL
Tương tự như Unorder List về cấu trúc chỉ khác là Order List bắt đầu với thẻ
<ol> và kết thúc bằng thẻ </ol>. Ngoài ra order list không tự động xếp cấp độ như
unorder list (thể hiện ở dấu bullet) mà các mục trong một danh sách luôn được đánh số
từ 1 hoặc có thể hiểu order list chỉ có tác dụng với một cấp.
Ví dụ với đoạn mã sau:
<ol>
<li>
Danh mục 1
<ol>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ol>
</li>
<li>
<b>Danh mục 2</b>
<ol>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ol>
</li>
<li>Danh mục 3</li>
</ol>
Ta sẽ được kết quả như sau:
1. Danh mục 1
1. Danh mục 1.1
2. Danh mục 1.2
3. Danh mục 1.3
2. Danh mục 2
1. Danh mục 2.1
-18-
Chương 1 Ngôn ngữ HTML
2. Danh mục 2.2
3. Danh mục 3
1.2.4.3 Thẻ DL
Definition Lists có cấu trúc phức tạp hơn và ít sử dụng hơn so với Unordered
Lists và Ordered Lists. Cấu trúc của thẻ <dl> có dạng như sau:
<dl>
<dt>
<dd>
<dt>
<dd>
<dt>
<dd>
Danh mục 1 </dt>
Mô tả cho danh mục 1 </dd>
Danh mục 2 </dt>
Mô tả cho danh mục 2 </dd>
Danh mục 3 </dt>
Mô tả cho danh mục 3 </dd>
</dl>
Trong đó cặp thẻ <dt></dt> là để dánh dấu tiêu đề cho một mục và <dd></dd>
luôn phải đi kèm ngay sau đó nếu muốn có phần mô tả.
Ta sẽ được danh sách có dạng như sau:
Danh mục 1
Mô tả cho danh mục 1
Danh mục 2
Mô tả cho danh mục 2
Danh mục 3
Mô tả cho danh mục 3
1.2.5 Thẻ định dạng font
Từ các phiên bản HTML 4 trở về trước (hiện nay là HTML 5) thẻ font được sử
dụng để định dạng các kiểu font, style chữ khác nhau trên cùng một trang web. Hiện
nay việc định dạng font chữ đã được thay thế hoàn toàn bởi CSS vì vậy đến HTML 5
thẻ font đã được loại bỏ. Tuy nhiên, hầu hết các website hiện nay vẫn sử dụng phiên
bản HTML4 nên thẻ <font> vẫn còn nguyên giá trị.
-19-
Chương 1 Ngôn ngữ HTML
Để định dạng font cho một đoạn văn bản nhất định nào đó bạn đặt nó trong cặp
thẻ <font></font>
Các thuộc tính của thẻ font:
TT
Thuộc tính
1.
color
Giá trị
Mô tả
- rgb(x,y,z)
Đánh dấu mã màu cho font bạn chọn. Có thể là
mã màu RBG với x, y là số nguyên từ 0-255, mã
màu theo thập lục phân hoặc có thể là tên màu
- #xxxxxx
- tên mầu
2.
3.
size
1-7
Cỡ chữ từ 1 – 7 được tính theo đơn vị của
HTML
face
tên font 1,
tên font 2...
Tên các font muốn sử dụng, trình duyệt sẽ hiển
thị font đầu tiên nếu không có sẽ chọn lần lượt.
Ví dụ: face= “tahoma, arial”
Bảng 1.4 Các thuộc tính của thẻ font
1.2.6 Thực hành
Bạn hãy thực thi giao diện sau:
Hình 1.9 Thẻ định dạng font trong HTML
Trong đó:
-
Tiêu đề là sử dụng tiêu đề số 3 có gạch chân.
-20-
Chương 1 Ngôn ngữ HTML
-
Đoạn văn căn lề 2 bên (lưu ý do đoạn văn ngắn nên ta phải thu nhỏ cửa sổ trình
duyệt để có thể thấy rõ hơn).
-
Chữ HTML sử dụng font Arial, size 4 màu đỏ.
1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT
Để một trang web hoàn thiện và có mỹ quan hơn thì chỉ có văn bản thông thường
thôi chưa đủ mà cần phải có sự đóng góp của các mối liên kết và hình ảnh. Chúng
đóng góp một phần rất quan trọng vì vậy tiếp theo đây tôi sẽ giới thiệu tới các bạn 2
thẻ đánh dấu cho hình ảnh và siêu liên kết trong HTML đó là thẻ <img> - Image và
thẻ <a> - Anchor.
1.3.1 Thẻ hình ảnh <img>
Thẻ <img> là một thẻ không có nội dung nên nó là không có thẻ đóng </img>.
Các thuộc tính của thẻ img:
T
T
Thuộc tính
1.
Src
2.
3.
Alt
width,
height
Giá trị
Mô tả
Đường dẫn
Đây là thuộc tính bắt buộc phải có.
ảnh
Text
Trình duyệt sẽ hiện thị đoạn text thay thế nếu ảnh
không tồn tại. Nếu theo chuẩn thì đây là một thuộc
tính bắt buộc. Nhưng nếu không có trình duyệt
vẫn hiển thị ảnh bình thường.
pixel
Đây là độ rộng và cao mà bạn muốn hiển thị ảnh.
Không phải là kích thước thực tế của ảnh. Nếu
không có ảnh sẽ được hiện thị 100%. Nếu chỉ có 1
trong 2 thì chiều còn lại sẽ hiển thị theo tỉ lệ
thuận. Ví dụ một bức ảnh có kích thước là 200px
* 200px bạn có thể hiện thị trên webiste là width =
20px height = 30px hoặc chỉ một trong 2 thuộc
tính này thuộc tính còn lại tự động tính cho bạn.
-21-
Chương 1 Ngôn ngữ HTML
T
T
Thuộc tính
Giá trị
4.
Align
vị trí
Ví trị căn của ảnh so với văn bản
5.
vspace
pixel
Độ rộng khoảng trắng 2 bên trái và phải của ảnh.
6.
hspace
pixel
Độ rộng khoảng trắng 2 bên trên và dưới của ảnh.
Mô tả
Bảng 1.6 Các thuộc tính của thẻ img
Như vậy cấu trúc cơ bản của thẻ img là: <img src= “path” alt= “text”/>
Bây giờ chúng ta sẽ đi chi tiết vào một số thuộc tính của thẻ img.
1.3.1.1 Đường dẫn của ảnh
Với giá trị đường dẫn của ảnh bạn có thể để bất cứ đường dẫn nào kể cả các
đường dẫn trên website như hay đường dẫn local (trên
máy tính). Đối với đường dẫn local thì các bạn phải hiểu được thế nào là đường dẫn
tương tối và đường dẫn tuyệt đối.
Đường dẫn tuyệt đối được bắt đầu từ tên ổ cứng cho đến các thư mục con và đến
tên file. Ví dụ C:\html\picture.jpg. Như vậy chỉ cần file ảnh picture.jpg ở cố định đúng
tại thư mục html thuộc ổ C bạn có thể trỏ tới nó dù file HTML của bạn ở bất kỳ đâu.
Nhưng trong trường hợp bạn để file HTML và ảnh cùng trong thư mục html và
thường là khi làm việc chúng ta luôn gom các file lại. Và bạn sử dụng đường dẫn tuyệt
đối, hãy thử tưởng tượng bạn copy thư mục đó đi cho khác hay chia sẻ cho bạn bè và
họ lưu thư mục đó ở ổ D. Chắc chắn bức ảnh sẽ không hiện lên.
Vì vậy người ta luôn dùng đường dẫn tương đối cho trường hợp này và áp dụng
cho nhiều thứ khác không chỉ riêng HTML. Đường dẫn tương đối là tùy thuộc vào ví
trí của file trỏ tới một file khác.
Ví dụ ta có một cây thư mục như sau:
-22-
Chương 1 Ngôn ngữ HTML
Hình 1.18 Ví dụ cây thư mục
Nguyên tắc của đường dẫn tương đối là tính từ vị trí của file mà trỏ tới file khác với:
-
../tên thư mục/file: cứ mỗi ../ bạn ra đi ra ngoài một cấp thư mục sau đó trỏ tới
file thuộc cấu trúc thư mục được đặ trong đường dẫn
-
tên thư mục/file: tương ứng với bạn bạn trỏ tới file thuộc thư mục nằm cùng
cấp với file của bạn.
Ví dụ:
-
Để hiển thị ảnh picture.jpg trên file baitap1.html bạn có thể dùng đường
dẫn sau: “images/pictuer.jpg” vì thư mục images nằm cùng cấp với file
baitap1.html
-
Để hiển thị ảnh picture.jpg trên file baitap2.html bạn có thể dùng đường
dẫn sau: “../images/pictuer.jpg”. Dấu ../ ứng với bạn đã ra khỏi thư mục
chứ file baitap2.html 1 cấp nghĩ là thư mục html khi đó bạn tiếp tục đi từ
thư mục html vào thư mục images và trỏ tới picture.jpg.
-
Để hiển thị ảnh picture.jpg trên file baitap3.html bạn chỉ cần dùng đường
dẫn sau: “pictuer.jpg” vì file picturer.jpg nằm cùng cấp với file
baitap3.html
Ngoài ra phương pháp sử dụng đường dẫn tương đối cũng được sử dụng với môi
trường internet với URL cũng như đường dẫn của file.
Tuy nhiên điều đặc biệt khi sử dụng đường dẫn ảnh với url có thể sử dụng dạng
đường dẫn tương đối sau: “/path/picture” thì đường dẫn đó sẽ được hiểu là
“domain/part/picture”.
-23-
Chương 1 Ngôn ngữ HTML
Sở dĩ tôi muốn nói kỹ về đường dẫn ảnh như vậy là vì nó rất quan trọng và hơi
trừu tượng đối với các bạn mới bắt đầu mà chưa hiểu rõ về khái niệm đường dẫn tương
đối và đường dẫn tuyệt đối.
1.3.1.2 Căn chỉnh vị trí của ảnh
Khi một bức ảnh đi kèm với một đoạn văn hay thành phần nào đó bạn có thể có
căn chỉnh vị trí của ảnh so với các thành phần đó với thuộc tính align.
Chú ý: Ở đây thuộc tính align của ảnh khác với của thẻ p hay các thẻ khác. Nó có
các giá trị khác và được hiểu là cách các thành phần khác hiển thị thế nào với bức ảnh đó.
Thuộc tính valign text có các giá trị:
-
top: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
middle: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
bottom: Văn bản sẽ hiển thị ngang với phần dưới của bức ảnh.
Hình 1.19 Căn chỉnh vị trí của ảnh với thuộc tính align
1.3.1.3 Thuộc tính alt
Khi trang Web được xem bằng trình duyệt mà người sử dụng tắt việc trình bày
hình ảnh để tiết kiệm thời gian download, hoặc đường dẫn ảnh không chính xác, nó sẽ
không được hiển thị. Thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh một
chuỗi văn bản mô tả nó.
-24-
Chương 1 Ngôn ngữ HTML
Ví dụ: <img src = "vidu.jpg" alt = "Ví dụ"/>
Hình 1.20 Thuộc tính alt của thẻ <im/> trên trình duyệt Internet Explorer
Ta thấy với trình duyệt Internet Explorer, một bức ảnh không tồn tại sẽ được hiển
thị như trên và được thay thể bởi từ “Ví dụ”. Còn với các trình duyệt khác đơn thuần
chỉ là thay thế bằng giá trị của thuộc tính alt.
1.3.1.4 Độ rộng và chiều cao của ảnh
Trong quá trình biên tập website có thể bạn không chuẩn bị được những bức ảnh
có kích thước chuẩn như bạn muốn thể hiện trên webiste vì vậy bạn cần sử dụng thuộc
tính width và height để chỉnh lại kích thước của ảnh dù to hay nhỏ về theo đúng ý
mình để có được bố cục website đẹp mắt.
-25-
TT
1.
2.
3.
4.
5.
6.
HTML
Kết quả
Tiêu để H1
Tiêu đề H1
Tiêu để H2
Tiêu đề H2
Tiêu để H3
Tiêu đề H3
Tiêu để H4
Tiêu đề H4
Tiêu để H5
Tiêu đề H5
Tiêu để H6
Tiêu đề H6
Bảng 1.3 Thẻ tiêu đề
1.2.4 Thẻ đánh dấu danh sách
Để tạo ra một danh sách liệt kê kiểu bullet hoặc đánh số trong HTML chúng ta có
thể sử dụng thẻ <ul> cho danh sách kiểu bullet (Unordered Lists) và <ol> cho danh
sách kiểu đánh số (Ordered Lists). Kèm theo đó là một dạng danh sách đặc biệt nữa là
bao gồm các mục mỗi mục sẽ có phần mô tả đi kèm đó là Definition Lists được sử
dụng cặp thẻ <dl></dl>
1.2.4.1 Thẻ UL
Danh sách Unordered List được bắt đầu với thẻ <ul> và kết thúc bằng thẻ </ul>
-16-
Chương 1 Ngôn ngữ HTML
Và mỗi mục của danh sách được đặt trong cặp thẻ <li></li>. Đối với các danh
sách đa cấp chúng ta có thể lồng một danh sách khác trong cặp thẻ <li></li> nghĩa là
đặt cặp thể <ul></ul> vào trong cặp thẻ <li></li>.
Ngoài ra trong cặp thẻ <li></li> chúng ta vẫn có thể kết hợp với các thẻ khác.
Ví dụ với đoạn mã sau:
<ul>
<li> Danh mục 1
<ul>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ul>
</li>
<li> <b>Danh mục 2</b>
<ul>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ul>
</li>
<li>Danh mục 3</li>
</ul>
Ta sẽ được kết quả như sau:
• Danh mục 1
o Danh mục 1.1
o Danh mục 1.2
o Danh mục 1.3
• Danh mục 2
o Danh mục 2.1
o Danh mục 2.2
• Danh mục 3
-17-
Chương 1 Ngôn ngữ HTML
1.2.4.2 Thẻ OL
Tương tự như Unorder List về cấu trúc chỉ khác là Order List bắt đầu với thẻ
<ol> và kết thúc bằng thẻ </ol>. Ngoài ra order list không tự động xếp cấp độ như
unorder list (thể hiện ở dấu bullet) mà các mục trong một danh sách luôn được đánh số
từ 1 hoặc có thể hiểu order list chỉ có tác dụng với một cấp.
Ví dụ với đoạn mã sau:
<ol>
<li>
Danh mục 1
<ol>
<li>Danh mục 1.1</li>
<li>Danh mục 1.2</li>
<li>Danh mục 1.3</li>
</ol>
</li>
<li>
<b>Danh mục 2</b>
<ol>
<li><i>Danh mục 2.1</i></li>
<li>Danh mục 2.2</li>
</ol>
</li>
<li>Danh mục 3</li>
</ol>
Ta sẽ được kết quả như sau:
1. Danh mục 1
1. Danh mục 1.1
2. Danh mục 1.2
3. Danh mục 1.3
2. Danh mục 2
1. Danh mục 2.1
-18-
Chương 1 Ngôn ngữ HTML
2. Danh mục 2.2
3. Danh mục 3
1.2.4.3 Thẻ DL
Definition Lists có cấu trúc phức tạp hơn và ít sử dụng hơn so với Unordered
Lists và Ordered Lists. Cấu trúc của thẻ <dl> có dạng như sau:
<dl>
<dt>
<dd>
<dt>
<dd>
<dt>
<dd>
Danh mục 1 </dt>
Mô tả cho danh mục 1 </dd>
Danh mục 2 </dt>
Mô tả cho danh mục 2 </dd>
Danh mục 3 </dt>
Mô tả cho danh mục 3 </dd>
</dl>
Trong đó cặp thẻ <dt></dt> là để dánh dấu tiêu đề cho một mục và <dd></dd>
luôn phải đi kèm ngay sau đó nếu muốn có phần mô tả.
Ta sẽ được danh sách có dạng như sau:
Danh mục 1
Mô tả cho danh mục 1
Danh mục 2
Mô tả cho danh mục 2
Danh mục 3
Mô tả cho danh mục 3
1.2.5 Thẻ định dạng font
Từ các phiên bản HTML 4 trở về trước (hiện nay là HTML 5) thẻ font được sử
dụng để định dạng các kiểu font, style chữ khác nhau trên cùng một trang web. Hiện
nay việc định dạng font chữ đã được thay thế hoàn toàn bởi CSS vì vậy đến HTML 5
thẻ font đã được loại bỏ. Tuy nhiên, hầu hết các website hiện nay vẫn sử dụng phiên
bản HTML4 nên thẻ <font> vẫn còn nguyên giá trị.
-19-
Chương 1 Ngôn ngữ HTML
Để định dạng font cho một đoạn văn bản nhất định nào đó bạn đặt nó trong cặp
thẻ <font></font>
Các thuộc tính của thẻ font:
TT
Thuộc tính
1.
color
Giá trị
Mô tả
- rgb(x,y,z)
Đánh dấu mã màu cho font bạn chọn. Có thể là
mã màu RBG với x, y là số nguyên từ 0-255, mã
màu theo thập lục phân hoặc có thể là tên màu
- #xxxxxx
- tên mầu
2.
3.
size
1-7
Cỡ chữ từ 1 – 7 được tính theo đơn vị của
HTML
face
tên font 1,
tên font 2...
Tên các font muốn sử dụng, trình duyệt sẽ hiển
thị font đầu tiên nếu không có sẽ chọn lần lượt.
Ví dụ: face= “tahoma, arial”
Bảng 1.4 Các thuộc tính của thẻ font
1.2.6 Thực hành
Bạn hãy thực thi giao diện sau:
Hình 1.9 Thẻ định dạng font trong HTML
Trong đó:
-
Tiêu đề là sử dụng tiêu đề số 3 có gạch chân.
-20-
Chương 1 Ngôn ngữ HTML
-
Đoạn văn căn lề 2 bên (lưu ý do đoạn văn ngắn nên ta phải thu nhỏ cửa sổ trình
duyệt để có thể thấy rõ hơn).
-
Chữ HTML sử dụng font Arial, size 4 màu đỏ.
1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT
Để một trang web hoàn thiện và có mỹ quan hơn thì chỉ có văn bản thông thường
thôi chưa đủ mà cần phải có sự đóng góp của các mối liên kết và hình ảnh. Chúng
đóng góp một phần rất quan trọng vì vậy tiếp theo đây tôi sẽ giới thiệu tới các bạn 2
thẻ đánh dấu cho hình ảnh và siêu liên kết trong HTML đó là thẻ <img> - Image và
thẻ <a> - Anchor.
1.3.1 Thẻ hình ảnh <img>
Thẻ <img> là một thẻ không có nội dung nên nó là không có thẻ đóng </img>.
Các thuộc tính của thẻ img:
T
T
Thuộc tính
1.
Src
2.
3.
Alt
width,
height
Giá trị
Mô tả
Đường dẫn
Đây là thuộc tính bắt buộc phải có.
ảnh
Text
Trình duyệt sẽ hiện thị đoạn text thay thế nếu ảnh
không tồn tại. Nếu theo chuẩn thì đây là một thuộc
tính bắt buộc. Nhưng nếu không có trình duyệt
vẫn hiển thị ảnh bình thường.
pixel
Đây là độ rộng và cao mà bạn muốn hiển thị ảnh.
Không phải là kích thước thực tế của ảnh. Nếu
không có ảnh sẽ được hiện thị 100%. Nếu chỉ có 1
trong 2 thì chiều còn lại sẽ hiển thị theo tỉ lệ
thuận. Ví dụ một bức ảnh có kích thước là 200px
* 200px bạn có thể hiện thị trên webiste là width =
20px height = 30px hoặc chỉ một trong 2 thuộc
tính này thuộc tính còn lại tự động tính cho bạn.
-21-
Chương 1 Ngôn ngữ HTML
T
T
Thuộc tính
Giá trị
4.
Align
vị trí
Ví trị căn của ảnh so với văn bản
5.
vspace
pixel
Độ rộng khoảng trắng 2 bên trái và phải của ảnh.
6.
hspace
pixel
Độ rộng khoảng trắng 2 bên trên và dưới của ảnh.
Mô tả
Bảng 1.6 Các thuộc tính của thẻ img
Như vậy cấu trúc cơ bản của thẻ img là: <img src= “path” alt= “text”/>
Bây giờ chúng ta sẽ đi chi tiết vào một số thuộc tính của thẻ img.
1.3.1.1 Đường dẫn của ảnh
Với giá trị đường dẫn của ảnh bạn có thể để bất cứ đường dẫn nào kể cả các
đường dẫn trên website như hay đường dẫn local (trên
máy tính). Đối với đường dẫn local thì các bạn phải hiểu được thế nào là đường dẫn
tương tối và đường dẫn tuyệt đối.
Đường dẫn tuyệt đối được bắt đầu từ tên ổ cứng cho đến các thư mục con và đến
tên file. Ví dụ C:\html\picture.jpg. Như vậy chỉ cần file ảnh picture.jpg ở cố định đúng
tại thư mục html thuộc ổ C bạn có thể trỏ tới nó dù file HTML của bạn ở bất kỳ đâu.
Nhưng trong trường hợp bạn để file HTML và ảnh cùng trong thư mục html và
thường là khi làm việc chúng ta luôn gom các file lại. Và bạn sử dụng đường dẫn tuyệt
đối, hãy thử tưởng tượng bạn copy thư mục đó đi cho khác hay chia sẻ cho bạn bè và
họ lưu thư mục đó ở ổ D. Chắc chắn bức ảnh sẽ không hiện lên.
Vì vậy người ta luôn dùng đường dẫn tương đối cho trường hợp này và áp dụng
cho nhiều thứ khác không chỉ riêng HTML. Đường dẫn tương đối là tùy thuộc vào ví
trí của file trỏ tới một file khác.
Ví dụ ta có một cây thư mục như sau:
-22-
Chương 1 Ngôn ngữ HTML
Hình 1.18 Ví dụ cây thư mục
Nguyên tắc của đường dẫn tương đối là tính từ vị trí của file mà trỏ tới file khác với:
-
../tên thư mục/file: cứ mỗi ../ bạn ra đi ra ngoài một cấp thư mục sau đó trỏ tới
file thuộc cấu trúc thư mục được đặ trong đường dẫn
-
tên thư mục/file: tương ứng với bạn bạn trỏ tới file thuộc thư mục nằm cùng
cấp với file của bạn.
Ví dụ:
-
Để hiển thị ảnh picture.jpg trên file baitap1.html bạn có thể dùng đường
dẫn sau: “images/pictuer.jpg” vì thư mục images nằm cùng cấp với file
baitap1.html
-
Để hiển thị ảnh picture.jpg trên file baitap2.html bạn có thể dùng đường
dẫn sau: “../images/pictuer.jpg”. Dấu ../ ứng với bạn đã ra khỏi thư mục
chứ file baitap2.html 1 cấp nghĩ là thư mục html khi đó bạn tiếp tục đi từ
thư mục html vào thư mục images và trỏ tới picture.jpg.
-
Để hiển thị ảnh picture.jpg trên file baitap3.html bạn chỉ cần dùng đường
dẫn sau: “pictuer.jpg” vì file picturer.jpg nằm cùng cấp với file
baitap3.html
Ngoài ra phương pháp sử dụng đường dẫn tương đối cũng được sử dụng với môi
trường internet với URL cũng như đường dẫn của file.
Tuy nhiên điều đặc biệt khi sử dụng đường dẫn ảnh với url có thể sử dụng dạng
đường dẫn tương đối sau: “/path/picture” thì đường dẫn đó sẽ được hiểu là
“domain/part/picture”.
-23-
Chương 1 Ngôn ngữ HTML
Sở dĩ tôi muốn nói kỹ về đường dẫn ảnh như vậy là vì nó rất quan trọng và hơi
trừu tượng đối với các bạn mới bắt đầu mà chưa hiểu rõ về khái niệm đường dẫn tương
đối và đường dẫn tuyệt đối.
1.3.1.2 Căn chỉnh vị trí của ảnh
Khi một bức ảnh đi kèm với một đoạn văn hay thành phần nào đó bạn có thể có
căn chỉnh vị trí của ảnh so với các thành phần đó với thuộc tính align.
Chú ý: Ở đây thuộc tính align của ảnh khác với của thẻ p hay các thẻ khác. Nó có
các giá trị khác và được hiểu là cách các thành phần khác hiển thị thế nào với bức ảnh đó.
Thuộc tính valign text có các giá trị:
-
top: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
middle: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.
-
bottom: Văn bản sẽ hiển thị ngang với phần dưới của bức ảnh.
Hình 1.19 Căn chỉnh vị trí của ảnh với thuộc tính align
1.3.1.3 Thuộc tính alt
Khi trang Web được xem bằng trình duyệt mà người sử dụng tắt việc trình bày
hình ảnh để tiết kiệm thời gian download, hoặc đường dẫn ảnh không chính xác, nó sẽ
không được hiển thị. Thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh một
chuỗi văn bản mô tả nó.
-24-
Chương 1 Ngôn ngữ HTML
Ví dụ: <img src = "vidu.jpg" alt = "Ví dụ"/>
Hình 1.20 Thuộc tính alt của thẻ <im/> trên trình duyệt Internet Explorer
Ta thấy với trình duyệt Internet Explorer, một bức ảnh không tồn tại sẽ được hiển
thị như trên và được thay thể bởi từ “Ví dụ”. Còn với các trình duyệt khác đơn thuần
chỉ là thay thế bằng giá trị của thuộc tính alt.
1.3.1.4 Độ rộng và chiều cao của ảnh
Trong quá trình biên tập website có thể bạn không chuẩn bị được những bức ảnh
có kích thước chuẩn như bạn muốn thể hiện trên webiste vì vậy bạn cần sử dụng thuộc
tính width và height để chỉnh lại kích thước của ảnh dù to hay nhỏ về theo đúng ý
mình để có được bố cục website đẹp mắt.
-25-
