HTML toàn tập

1-Thành phần-Element: Mỗi một trang HTML được tạo bởi nhiều thành phần. Thành phần như một hộp chứa từng nội dung của trang Web. Thành phần khai báo các đặc tính mà nội dung trong thành phần sẽ dựa vào đó. Để đi vào chi tiết của thành phần, trước hết bạn cần nắm một số thành phần chính của trang web sau đây: • : Bắt đầu và kết thúc của văn bản (bắt buộc có trong tất cả văn bản HTML). • : Bắt đầu và kết thúc phần lưu trữ các thông tin quan trọng của văn bản. Phần này không hiển thị trên trình duyệt. • : Cặp thẻ này chứa tiêu đề của trang. Tiêu đề này nằm trong trong phần và được hiển thị trên cùng của trình duyệt. Khai báo luôn có để Search Engine tìm trang. • :: Tag thường không cần khóa . Tag này dùng để khai báo các thông tin chi tiết về trang. Các khai báo bày thường bắt đầu như: , hoặc . Các khai báo này cũng được dùng cho Search Engine. (Nên có) • : Cặp Tag này dùng để liên kết tập tin ngòai vào trang Web, thường là tập tin Cascading style sheet với phần mở rộng là css.

Trang 1

BÀI 1 : HTML cơ sở

1-Thành phần-Element: Mỗi một trang HTML được tạo bởi nhiều thành phần Thành phần như một hộp

chứa từng nội dung của trang Web Thành phần khai báo các đặc tính mà nội dung trong thành phần sẽdựa vào đó Để đi vào chi tiết của thành phần, trước hết bạn cần nắm một số thành phần chính của trangweb sau đây:

 <html></html>: Bắt đầu và kết thúc của văn bản (bắt buộc có trong tất cả văn bản HTML)

 <head></head>: Bắt đầu và kết thúc phần lưu trữ các thông tin quan trọng của văn bản Phần này không hiển thị trên trình duyệt

 <title></title>: Cặp thẻ này chứa tiêu đề của trang Tiêu đề này nằm trong trong phần <head></head>

và được hiển thị trên cùng của trình duyệt Khai báo <title></title> luôn có để Search Engine tìm trang

 <meta></meta>:: Tag <meta> thường không cần khóa </meta> Tag này dùng để khai báo các thông

tin chi tiết về trang Các khai báo bày thường bắt đầu như: <meta name="discription" content=" nội dung ">, hoặc <meta name="keywords" content=" nội dung "> Các khai báo này cũng được dùng cho

Search Engine (Nên có)

 <link></link>: Cặp Tag này dùng để liên kết tập tin ngòai vào trang Web, thường là tập tin Cascading style sheet với phần mở rộng là css

Ví dụ:

Khi khai báo như vậy Tag này không cần tag đóng </link>(sẽ đề cập trong phần CSS)

 <style></style>: Cặp Tag này dùng để nhúng phong cách Cascading Style Sheet Có thể đặt trong phần <head></head> hoặc đặt tại nơi phong cách được áp dụng

Ví dụ:

<style>

p {font-family:tahoma;verdana;font-size:14px; color:#000000;}

</style>

 <script></script>: Cặp tag này dùng để nhúng ứng dụng Javascript, có thể đặt trong phần

<head></head> hoặc tại vị trí ứng dụng được gọi (sẽ đề cập trong phần javascript)

 <isindex>: Thông báo trình duyệt rằng trang index có thể tìm được nằm trên server.

 <!doctype>: Mô tả bản HTML mà trang web định dạng theo đó (không bắt buộc)

2-Thẻ-Tag: Thẻ cũng là một thành phần của trang Đây chính là những gì bạn cần nhớ để biên tập trang

HTML Các thẻ thường đi theo cặp và có cấu trúc như thành phần chính, nghĩa là cũng có thẻ mở và đóng.Thẻ mở bắt đầu với dấu nhỏ hơn(<) rồi đến thành phần của thẻ rồi dấu lớn hơn (>) và thẻ đóng cũng tương

tự nhưng có thêm dấu chéo tới (/)

Trang 2

Ví dụ: để khai báo một đọan văn bản trong trang HTML, ta gõ vào: nội dung đọan văn bản.

Trong đó : khai báo đọan văn bản sẽ hiển thị và : đóng khai báo đọan văn bản

Một số thẻ không có tag đóng, ví dụ như dùng để xuống hàng hay <hr> dùng để vẽ một đườngngang

3-Thuộc tính-Attribues và Giá trị-Values:

Thuộc tính là một thành phần quan trọng trong HTML Thuộc tính được sử dụng để định nghĩa đặc tính của thành phần và được đặt trong tag mở của thành phần Giá trị luôn đi kèm với thuộc tính để xác định đặc tính của thành phần Đơn giản là thuộc tính đặt tên cho đặc tính và giá trị mô tả đặc tính đó Như vậy, một thành phần thường có cấu trúc:

• Tag mở thành phần

• Thuộc tính thành phần, dấu "=" và "Giá trị thành phần"

• Tag đóng thành phần

Ví dụ: Để hiển thị chữ màu xanh, ta dùng cặp tag Và ta yêu cầu Browser bằng lệnh sau:

 Chữ ở giữa cặp tag này sẽ có màu xanh

Trong đó: color: là thuộc tính, và giá trị ="blue" là giá trị của thuộc tính màu.

Lưu ý:

• Không phải các thuộc tính và giá trị đều áp dụng cho tất cả các thành phần Ví dụ: nếu ta dùngcolor="blue" trong thẻ , trình duyệt sẽ bỏ qua thuộc tính và giá trị này và lấy mặcnhiên của nó (thường là chữ màu đen)

• Luôn luôn khai báo giá trị trong dấu ngoặc kép (" ") mặc dù HTML, XHTML và XML không yêucầu

• Font chữ và phong cách chọn trong chương trình biên tập HTML không có tác dụng trọngBrowser

• Dùng phím Enter và phím Cách (space) để tạo khỏang cách các chữ cũng không có tác dụng.HTML là ngôn ngữ Markup là vậy Muốn trình diễn kiểu nào, phải khai báo Markup kiểu đó, và đểMarkup phải dùng đến TAG

Ok, trong bài học này bạn cần để ý đến 4 thành phần cơ bản của trang là:

• <html></html>

• <head></head>

• <title></title>.

• <body></body>

Hãy bắt đầu với trang HTML đầu tiên của bạn

II-Trang HTML đầu tiên của bạn:

1-Mở Notepad: Từ Windows, click Start/ chọn All Programs/ chọn Accessories/ Chọn Notepad, chương trình Notepad mở ra như hình dưới:

Trang 3

Trong cửa sổ Notepad, click Format, chọn Word Wrap để chữ không tràn sang biên phải mà tự độngxuống hàng Click Format một lần nữa, chọn Font, trong cửa sổ Font này, tìm chọn Tahoma nếu bạn muốnhiển thị tiếng Việt khi gõ bằng Unikey hay bộ gõ tiếng Việt hỗ trợ Unicode

2-Viết Codes vào NotePad:

Gõ vào Notepad các dòng codes sau đây:

3-Lưu trang Notepad Untilted:

Trước tiên, bạn nên tạo một thư mục để chứa các trang mà bạn tạo ra trong suốt quá trình thực hành, đặt

tên cho thư mục này là html Nên để thư mục này là thư mục gốc C:\html.

Từ cửa sổ Notepad với File Untitled chứa các dòng codes bạn mới gõ vào, click File chọn Save as, cửa sổ Save as mở ra, chọn dĩa chứa thư mục html như hình dưới:

Trang 4

1 Tại ô Filename: gõ vào tên file myfirstpage.html (nhớ rằng phần mở rộng là html)

2 Tại ô Save as type: chọn All files

3 Tại ô Encoding chọn: UTF-8 (Unicode Transformation Format-8)

Xong click Save.

4-Mở trang myfirstpage.html với Internet Explorer:

1 Khởi động Internet Explorer: Trong Windows, click Start/ chọn Internet Explorer Trình duyệt

IE được nạp vào Bạn không cần phải kết nối Internet Bỏ qua lưu ý: The page could not display.

Click trên thực đơn File, chọn Open: Cửa sổ Open mở ra: Xem hình:

2 Click Browse tìm đến thư mục html, file myfirstpage và click Open, bạn thấy trình duyệt tìm đượcfile, chẳng hạn như hình minh họa dưới:

Trang 5

3 Click OK, trang Web của bạn được IE mở như bên dưới: (ở đây chỉ trình bày một phần của trangtrên IE Browser):

Bạn xem lại các dòng codes, rồi bạn xem nội dung hiển thị của trang Bạn thấy rằng dòng tựa đề hiển thịtrên cùng của Browser Dòng này được khai báo trong cặp Tag thành phần <title></title> đặt trong

Chỉ có câu: Đây là trang Web đầu tiên của tôi!!! mà bạn đặt giữa cặp tag <body></body> hiển thị Đó là

chính là nội dung của trang Web

Như vậy, bài thực hành này củng cố lại lý thuyết về các thành phần chính trong mục I của bài học Đểthực hành, bạn hãy tạo một số trang và gõ vào thật nhiều chữ, bạn cũng có thể bấm phím cách để mở rộngkhỏang cách các chữ, nhấn phím Enter để xuống hàng Sau đó lưu file (nhớ rằng phần mở rộng phải là.html) Mở file bằng Browser, bạn xem các khỏang cách và xuống hàng mà bạn đã tạo trong Notepad cóhiển thị trên Browser không? Bài 4 sẽ giúp bạn làm được điều này

Trang 6

BÀI 2 : Tiêu Đề, Đọan Văn, Đọan Trích Dẫn, Xuống Hàng

Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để phân biệt với nội dung của văn bản

Để tạo tiêu đề trong trang HTML sử dụng cặp tags (Thẻ):

I-Cặp Tags tiêu đề: Header (h) tag

Trong một văn bản, tiêu đề (header) thường được viết đậm và lớn để phân biệt với nội dung của văn bản Để tạo tiêu đề trong trang HTML sử dụng cặp tags (Thẻ): <h n > </h n >

1-Cú pháp:

<hn> Tên của tiêu đề </hn>

Trong đó:

• h: dùng để khai báo tag tiêu đề sẽ được dùng

• n: là số nguyên 1 > 6 luôn đi sau h để xác định kích thước chữ tiêu đề Đơn vị tính: pixel Theo thứ tự:

Viết: <h1>Đây là Header

3</h3> Hiển thị: Đây là Header 3

Trang 7

Thực hành: Mở Notepad hoặc coderunner gõ vào đọan code bên dưới:

<html> <head> <title>header</title> </head> <body>

<h1>Đây là Header 1</h1> <h2>Đây là header 2</h2>

<h3>Đây là Header 3</h3> <h4>Đây là Header 4</h4>

<h5>Đây là Header 5</h5> vh6>Đây là Header 6</h6>

</body> </html>

Lưu tập tin trên với tên heading.html Dùng trình duyệt mở để xem kết quả.

2-Thuộc tính và giá trị thuộc tính của h:

Để canh biên trái phải, giữa, cho thẻ h chúng ta dùng thuộc tính đi kèm trong h là align="giá trị".

Cú pháp:&lth n align="giá trị"> nội dung tiêu đề </h n >

Trong đó: "giá trị" được thay thế bằng:

• justify :canh đều 2 biên trái phải Dùng trong trường tiêu đề dài hơn 2 dòng thì 2 biên trái phải đều nhau.

Khác với kiểu đánh máy chữ

• left :canh trái (mặc nhiên, không cần khai báo)

• right :canh phải

• center :canh giữa

Ví dụ: <h2 align="center">Header này được canh giữa</h2>

Header này được canh giữa

<h2 align="right">Header này được canh phải</h2>

Header này được canh phải

<h2>Header này mặc nhiên là canh biên trái</h2>

Header này mặc nhiên canh biên trái

II-Cặp Tags Đọan Văn: Paragraph Tag

Trang 8

Để hiển thị nội dung của một đọan văn bản ta sử dụng cặp tag: Khác với việc nhập nội dung trực tiếp như trong bài 3, ngòai việc tự động xuống hàng, cách một dòng khi bắt đầu một đọan văn bản khác, cặp tags:

còn có thể định dạng canh đều 2 biên, canh phải, canh giữa Mặc nhiên, khỏang cách giữa các dòng trong văn bản đã được thiết lập trong trình duyệt Để định dạng khỏang cách giữa các hàng, các chữ cũng như nhiều thuộc tính khác của chúng ta phải dùng đến Cascading Style Sheet(CSS).

Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

2-Thuộc tính và giá trị thuộc tính của :

Cũng giống như với <h>, thuộc tính của là align= và giá trị của align= là:

• center :canh giữa

• justify:canh đều 2 biên

• left :hoặc không khai báo align: mặc nhiên

• right :canh biên phải

Ví dụ: Đọan văn bản này được canh đều hai biên Viết:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.

Trang 9

Để ý: hai biên trái phải được canh thẳng đều, không lồi lõm theo kiểu đánh máy chữ.

Ví dụ: Đọan văn bản này được canh phải Viết:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở rộng là css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server. Hiển thị trên trình duyệt:

Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng bằng 1 tập tin có phần mở

rộng là css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server III-Cặp Tags Trích Đọan: <blockquote></blockquote>

1-Cú pháp:

<blockquote> Nội dung của trích đọan</blockquote>

Dùng cặp tag này khi muốn trích dẫn một đọan văn bản, và đọan văn bản sẽ thụt lề (indent) tùy theo số lần

<blockquote> mở và đóng Mở bao nhiêu thì đóng bấy nhiêu.

Ví dụ: Viết:

<blockquote><blockquote>Nếu chỉ học HTML mà không nắm cách sử dụng của Cascading Style Sheet thì chưa thể điều khiển được trang web như ý muốn CSS, ngôn ngữ với cú pháp riêng giúp chúng ta trình bày một trang web vững vàng và gọn gàng hơn Trong khi phải lập đi lập lại việc gõ các tag và thuộc tính của chúng để áp dụng vào từng chữ, biểu bảng Với CSS ta có thể gán thuộc tính và giá trị cho từng elements và tags, rồi lưu chúng

Trang 10

bằng 1 tập tin có phần mở rộng là css, dùng tập tin này để định dạng layout một hoặc nhiều trang Web trên Server.</blockquote></blockquote>

2-Thuộc tính và giá trị thuộc tính của <blockquote></blockquote>:

Cặp tag này không có thuộc tính và giá trị trừ việc sử dụng trích dẫn ngay trong dòng bằng cú pháp: <q

xml:lang="xx"></q> Và để ghi rõ trích dẫn từ một trang Web khác bạn dùng cú pháp <blockquote

Họ: Tên: Địa chỉ-email:

Họ: Tên: Địa chỉ e-mail:

2-Tag chống xuống hàng: 

Tag này thường sử dụng trong một câu lệnh hay môt hành động dài của đọan mã Javascript Cú Pháp: .

Bạn sẽ thấy việc sử dụng hữu hiệu tag này trong các đọan Javascript cao cấp.

3-Thuộc tính và giá trị thuộc tính của 

Tag này có một thuộc tính Clear dùng để ngăn việc xuống dòng tự động Cú pháp: 

Tag này thường được dùng trong các đoạn Javascript như Rolling Text hoặc Crossmarque, khi đó lệnh xuống hàng sẽ làm cho đoạn mã hiển thị không đúng.

Trang 11

V-Tạo khỏang trống: none breaking space

1-Cú pháp:

Để tạo khỏang trống giữa các chữ hoặc nội dung ta dùng Không có đóng mở cho lệnh này.

Ví dụ: Viết:

Khi chưa biết CSS, muốn thụt lề tôi phải dùng bao nhiêu là như vậy.

Khi chưa biết CSS CSS, muốn thụt lề tôi phải dùng bao nhiêu là như vậy.

VI-Tag vẽ đường gạch ngang: H orizontal Rule (HR) tag

1-Cú pháp:

Để vẽ một đường ngang trong trang dùng tag: <hr> Đây là một tag đơn và do đó không có Tag đóng 2-Thuộc tính và giá trị thuộc tính của <hr>

Có 5 thuộc tính cho <hr> đó là:

• align= :Canh biên Giá trị là: right,center, left (mặc nhiên)

• noshade :Khi muốn hiển thị đường ngang không có bóng mờ

• size= :Độ dày của đừơng ngang Giá trị: số 1,2 hoặc 3

• width= :Độ rộng(độ dài chiều ngang) Giá trị là px hoặc %

• color= :Màu Dùng tên màu như red, green, blue hoặc hexadecimal như: #0000FF, #FFCC99

Ví dụ: Viết:

<hr align="center" size="3" width="400" color="red">

Hiển thị trên trình duyệt:

VII-Canh giữa nội dung: <center></center> tag

Khi không sử dụng hoặc <blockquote> cho đọan văn bản, bạn có thể dùng cặp Thẻ

<center></center> để canh giữa nội dung

Ví dụ: Viết:

Canh giữa nội dung này

Trang 12

Cặp tag này cũng được dùng để canh ảnh, form vào giữa trang.

Trang 13

BÀI 3 : Định dạng chữ

Trong bài học này chúng ta sẽ nắm cách sử dụng các thẻ định dạng chữ Đậm, Nghiêng, Gạch

dưới trong trang HTML

I-Chữ Đậm: Bold (b) tag Để làm cho chữ đậm ta sử dụng cặp tag: 1-Cú pháp: a-Cặp Tags: : 

 chữ cần làm đậm Trong đó:

• :tag khai báo chữ đậm

• :tag đóng chữ đã được làm đậm Nếu bạn sơ ý không đóng bằng tag này, chữ đậm sẽ ảnh hưởng lên các nội dung khác trong văn bản

Ví dụ:

Viết: Hiển thị trên trình duyệt:

Đọan này sẽ Đậm Đọan này sẽ Đậm

2-Thuộc tính và giá trị thuộc tính của: , Các cặp tag này không có thuộc tính và giá trị.

II-Chữ Nghiêng: Italic (i) tag Để làm cho chữ nghiêng ta sử dụng cặp tag: hoặc 

1-Cú pháp:

a-Cặp Tags: chữ nghiêng

Trong đó:

• :tag khai báo chữ nghiêng

• :tag đóng chữ đã được làm nghiêng Luôn có tag này

Ví dụ:

Đọan này sẽ nghiêng Đọan này sẽ nghiêng

b-Cặp Tags: cũng được dùng để làm chữ nghiêng Cú pháp và ví dụ tương tự, thay thế i bằng em.

Ngòai ra chúng ta cũng có thể dùng cặp tags <address>Chữ nghiêng</address> để làm chữ nghiêng, nhưng nội dung trong cặp tags này tự động xuống hàng

Các cặp tags : <cite>chữ nghiêng</cite>, <dfn> Chữ nghiêng</dfn>, <var>Chữ nghiêng</var>, cũng có

tác dụng làm nghiêng chữ nhưng ít đựơc sử dụng như tags

Trang 14

2-Thuộc tính và giá trị thuộc tính của: ,

Các cặp tag này không có thuộc tính và giá trị

III-Chữ Gạch Dưới: Underline (u) tag

Để làm cho chữ gạch dưới ta sử dụng cặp tag: và <ins> </ins>

1-Cú pháp:

a-Cặp Tags: chữ cần gạch dưới

Trong đó:

• :tag khai báo gạch dưới

• :tag đóng chữ đã được gạch dưới Luôn có

Ví dụ:

I like HTML I like HTMLb-Cặp Tags:<ins> </ins> để chèn một đọan chữ có gạch dưới vào nội dụng: Cú pháp tương tự

Ví dụ:

I like <ins>HTML</ins>

I like HTML2-Thuộc tính và giá trị thuộc tính của: và <ins> </ins>:

IV-Chữ Gạch Giữa: Strike (strike) tag 1-Cú pháp:

Ta có thể viết: <strike>chữ gạch giữa</strike> hoặc <s>chữ gạch giữa</s>

Trong đó:

• <s> :tag khai báo gạch giữa

• </s> :tag đóng chữ đã được gạch giữa

Ví dụ:

Trang 15

<s>Giá cũ: 250.000 đồng</s> Giá cũ: 250.000 đồngV-Chữ to hơn: Big (big) tag

Để làm cho chữ lớn hơn cỡ chữ hiện tại, ta sử dụng cặp tag: <big> </big>

1-Cú pháp:<big>Chữ to hơn</big>

Trong đó:

• <big> :tag khai báo làm chữ to hơn

• </big> :tag đóng chữ đã được làm to

Ví dụ:

<big>Chữ này to hơn</big> Chữ này to hơn2-Thuộc tính và giá trị thuộc tính của: <big> </big>

VI-Chữ nhỏ hơn: Small (small) tag

Để làm cho chữ nhỏ hơn cỡ chữ hiện tại, ta sử dụng cặp tag: 1-Cú pháp:Chữ nhỏ hơn

Trong đó:

• :tag khai báo làm chữ nhỏ hơn

• : tag đóng chữ đã được làm nhỏ

Ví dụ:

Chữ này nhỏ

2-Thuộc tính và giá trị thuộc tính của:

Trang 16

Để thực hành, bạn hãy mở Notepad, sau đó viết các đoạn codes trong các bài ví dụ trên và lưu tập tin

format_text.html

Trang 17

BÀI 4 : Định dạng Font Chữ, Màu chữ, Cỡ chữ

Hướng dẫn định dạng chữ, màu chữ với thẻ

I-Font chữ: tag

tags dùng để khai báo font chữ, màu chữ và cỡ chữ sử dụng trong đọan văn bản hay tiêu đề,hay một đọan trích dẫn Khi khai báo phải kèm theo thuộc tính và giá trị của nó

Cú pháp:

Trong đó:

• :khai báo font tag sẽ được dùng

• Thuộc tính: Có 3 thuộc tính là: color, face và size

• :tag đóng

Ví dụ:

Chữ màu đỏ Chữ màu đỏ

Chữ màu xanh, mức 1

Chữ màu hồng, font

arial Chữ màu hồng, font arial

Chữ màu chanh, fonttahoma, mức -1

Chữ màu chanh, font tahoma, mức -1

II-Giá trị màu, font chữ và kích thước chữ của: tag 1-Giá trị màu:

Có hai cách khai báo màu phổ biến đó là:

a-Sử dụng tên màu: gồm 16 tên Khai báo như sau:

• Màu aqua

• Màu black

• Màu blue

• Màu fuchsia

• Màu gray

• Màu green

• Màu lime

• Màu maroon

• Màu navy

Trang 18

• Màu olive

• Màu purple

• Màu red

• Màu silver

• Màu teal

• Màu white

• Màu yellow

b-Sử dụng giá trị Hexadecimal: Cách khai báo: Luôn bắt đầu bằng dấu #.

Dưới đây là ví dụ biễu diễn 16 tên màu bằng giá trị Hex Để có thêm nhiều màu bạn cần tham khảo Bảng màu 1 trong mục lục Ngòai ra, bạn cũng có thể sử dụng giá trị Hex trong bảng màu 2

Ví dụ:

• Màu aqua

• Màu black

• Màu blue

• Màu fuchsia

• Màu gray

• Màu green

• Màu lime

• Màu maroon

• Màu navy

• Màu olive

• Màu purple

• Màu red

• Màu silver

• Màu teal

• Màu white

• Màu yellow

2-Font chữ:

3 Font chữ Unicode hỗ trợ dấu tiếng Việt cho Web phổ biến là: arial, verdana và tahoma Dùng bộ gõ hỗ trợ Unicode như Unikey và chọn lưu file là Unicode UTF-8 thì trình duyệt sẽ hiển thị dấu Tiếng Việt Khai báo như sau:

• Font tahoma

• Font arial

• Font verdana

• Cỡ policy thẻ tín dụng

• Cỡ policy cho mướn xe

Trang 19

Với

font tags , chúng ta có thể chọn được màu cho chữ, kích thước cho font chữ như chữ rất nhỏ, chữ font face verdana.

</body>

</html>

Trang 20

BÀI 5 : Tạo danh sách (list)

Một vài ví dụ sử dụng thẻ HTML để trình bày Danh mục

I-Danh sách không theo thứ tự: <ul> </ul> (Unordered List)

<ul> </ul> tags dùng để tạo danh sách không theo thứ tự, tag này gồm có thuộc tính và thành phần tạo danh sách

1-Cú pháp:

<li>Mục trong danh sách</li>

 <li> :Thành phần khai báo mục của danh sách Giá trị: type="ký tự"

 </li> :Tag đóng mục (Tag này là tùy chọn, không cần đóng cũng được.)

Trang 21

 <ul type="1"> : Bắt đầu danh sách theo thứ tự 1,2,3.(mặc nhiên)

 <ul type="square"> : Danh sách bắt đầu là các chấm vuông đen

 <ul type="circle"> : Danh sách bắt đầu là vòng tròn rỗng

 <ul type="square"> : Danh sách bắt đầu là 1 vòng tròn đen

 <ul type="I"> :Danh sách bắt đầu số La Mã hoa

 <ul type="i"> : Danh sách bắt đầu số La Mã thường

 <ul type="A"> : Danh sách bắt đầu chữ cái Hoa

 <ul type="A"> : Danh sách bắt đầu chữ thường

Trang 22

<li>Bài Lý thuyết 1 </li>

Trang 23

II-Danh sách thứ tự: < ol> &< ol>(Ordered List)

<ol> </ol> Ordered List để tạo danh sách theo thứ tự số hoặc chữ Cũng giống như khai báo của <ul>

</ul>, nhưng cặp tags này còn có thêm thuộc tính Start và giá trị.

XIII Mục kế tiếp sẽ là XI, XII, XIII

<li>Order List có thể dùng chữ cái.

<li>Dùng chữ A để khai báo.

AA Chữ kế tiếp nó là X,Y,Z, AA

Các giá trị thuộc tính của type=:

 < ol type="1" start="10"> :Bắt đầu bằng 10, kế tiếp là 11, 12, 13

 < ol type="square"> : Danh sách bắt đầu là các chấm vuông đen

 < ol type="circle"> : Danh sách bắt đầu là vòng tròn rỗng

 < ol type="square"> : Danh sách bắt đầu là 1 vòng tròn đen

 < ol type="I" start="5"> :Danh sách bắt đầu số La Mã hoa, kế tiếp là VI, VII, VIII

 < ol type="i"> : Danh sách bắt đầu số La Mã thường, kế tiếp là vi, vii, viii

 < ol type="A" start="3"> : Danh sách bắt đầu chữ cái Hoa, kế tiếp là C, D, E

 < ol type="a"> : Danh sách bắt đầu chữ thường, kế tiếp là b,c,d

Bạn cũng có thể tạo danh sách nhiều tầng sử dụng cặp Tags này hoặc kết hợp với Unodered List Cách tạo tương tự như ví dụ trong mục I

Trang 24

III-Tạo Danh sách Định nghĩa:

Một ứng dụng tạo danh sách quan trọng là tạo danh sách các định nghĩa, giải thích thuật ngữ Chúng ta có

3 cặp tags để làm công việc này như sau:

1 < dl> < /dl> : Tags tạo danh sách định nghĩa (Definition List)

2 < dt> < /dt> : Tags hiển thị thuật ngữ sẽ được định nghĩa (Definition Term)

3 < dd> < /dd>: Tags hiển thị định nghĩa của thuật ngữ (Definition Description)

Trang 25

BÀI 6 : Đặt ảnh lên trang Web

Thẻ <IMG> dùng để đặt ảnh lên trang Web.

Các tập tin ảnh với phần mở rộng jpg và gif được hỗ trợ bởi hầu hết các web Browser Ngòai ra, một số trình duyệt cũng chấp nhận tập tin bmp và png Trong HTML, tag <IMG> không chỉ được dùng để đặt ảnh lên Web mà còn dùng để chèn ảnh thay thế cho đọan chữ minh họa một liên kết Chúng ta sẽ đề cập đến các liên kết và các sử dụng ảnh làm liên kết trong bài sau

1-Cú pháp:

<IMG SRC="imagefile" ALIGN="vị trí" BORDER="Số" WIDTH="số" HEIGHT="số" ALT="text">Trong đó:

• IMG : dùng để khai báo một ảnh sẽ được chèn vào (Viết tắt của Image: ảnh)

• SRC= :Khai báo đường dẫn đến file ảnh với tên của file ảnh cần chèn vào (viết tắt của Source: Nguồn)

• ALIGN= :Dùng để canh vị trí ảnh trong trang (các giá trị là: right, top, left, bottom, và middle)

• BORDER= :Hiển thị viền bao quanh ảnh, giá trị giấu viền là 0

• HEIGHT= :Xác định chiều CAO của ảnh

• ALT= :Đọan chữ thay thế cho ảnh trong trường hợp ảnh không hiển thị trên Web (alt=Alternate: Thay thế)

2-Ví dụ:

Giả sử bạn có một ảnh có tên là mypicture.jpg, Ảnh này có chiều rộng là 200px và chiều cao là 300px Bạn muốn đặt ảnh này lên Web Sử dụng Thẻ <IMG>, bạn viết như sau:

-Nếu ảnh này nằm trong thư mục image và trang Web chứa ảnh của bạn ở ngòai thư mục này Bạn chỉ

đường dẫn đến file ảnh này như sau:

-Nếu ảnh này đặt tại địa chỉ: http://www.thuvien-it.net/image/mypicture.jpg, Bạn chỉ đường dẫn đến

file ảnh này như sau:

Tuy nhiên file ảnh này chỉ hiển thị khi máy tính nơi bạn thực hành có kết nối Internet Do vậy ứng dụng này ít được sử dụng Tốt hơn hết nên Download tập tin ảnh về máy trước

-Trong trường hợp tập tin ảnh không có trong đường dẫn SRC=, dòng Text của ALT sẽ hiển thị thay thế: Xem ví dụ dưới:

Lưu ý: Nên khai báo thuộc tính WIDTH và HEIGHT cho ảnh vì như vậy sẽ giúp trang Web hiển thị

nhanh hơn Bởi vì, Browser sẽ tự động dành một khỏang trống bằng chiều rộng và chiều cao của ảnh trước

rồi tải các nội dung của trang Sau đó sẽ tiếp tục tải ảnh vào Ngòai ra giá trị mà bạn gán cho WIDTH và HEIGHT khác với chiều rộng và chiều cao của ảnh cũng sẽ làm thay đổi hiển thị của ảnh trong trang

Trang 26

Web Các bài thực hành bên dưới sẽ minh họa điều này.

3-Thực hành:

Với ảnh bên dưới đây có chiều rộng là 200px và chiều cao là 150px, lần lượt áp dụng các thuộc tính và giá

trị của thẻ <IMG> cho ảnh này Trước hết bạn cần tải ảnh này về máy tính và đặt trong thư mục html là

thư mục chứa các tập tin Html mà bạn thực hành từ trứơc Các bài thực hành này không đề cập đến các

cặp tag cần thiết để mở và đóng một trang HTML mà chỉ tập trung vào thẻ <IMG> Lưu ý:: để canh ảnh vào giữa, chúng ta dùng cặp thẻ <center> </center> đặt trước và sau thẻ <IMG>

Thực hành 1: tag IMG đơn giản nhất

Viết: <IMG SRC="mypicture.jpg">

Trang 27

Thực hành 2: Dùng ALIGN để định ví trị cho ảnh:

Viết: <IMG SRC="mypicture.jpg" ALIGN="right">Ảnh này được canh

phải so với dòng chữ này, nội dung sẽ nằm bên trái của ảnh Giống như

Wrap ảnh trong Word

Xem kết quả.

Ảnh này được canh phải so với dòng chữ này, nội dung sẽ nằm bên trái

của ảnh Giống như Wrap ảnh trong Word

Viết: <IMG SRC="mypicture.jpg" ALIGN="middle">Dòng chữ này nằm giữa so với vị trí của ảnh.

Dòng chữ này nằm giữa so với vị trí của ảnh

Tương tự, bạn có thể thực hành với các vị trị: left, top, bottom

Thực hành 3: Dùng Border để thêm viền cho ảnh:

Viết: <IMG SRC="mypicture.jpg" BORDER="5">

Thực hành 4: Thu nhỏ ảnh bằng HEIGHT và WIDTH:

Để thu nhỏ ảnh bằngh Height và Width, bạn cần thu nhỏ theo tỉ lệ theo chiều rộng và chiều cao Chẳng hạn, ảnh trong ví dụ này có chiều rộng là 200px và chiều cao là 150px Như vậy khi giảm chiều rộng xuống 1/2 thì chiều cao cũng giảm 1/2 tương ứng Tức là WIDTH="100" VÀ HEIGHT="75"

Viết: <IMG SRC="mypicture.jpg" WIDTH="100" HEIGHT="75">

Bài học này bao trùm cách sử dụng Thẻ <IMG> để chèn ảnh vào trang Web Đây là Thẻ duy nhất dùng để hiển thị ảnh trên trang Web (Trừ ảnh làm nền với thẻ background) Do đó, bạn cần thực hành cách dùng thẻ này thật nhiều lần để hiển thị ảnh trên trang theo ý muốn

Trang 28

BÀI 7 : Hiển thị văn bản định dạng trước-Hiển thị lời giải thích

Đến bài học này bạn đã nắm được một số tag để trình bày một trang HTML Nhưng có thể bạn sẽ hỏi rằng nếu muốn giữ những đọan text đã được định dạng trước và không cần sử dụng các thẻ của HTML thì

có được không? Câu trả lời là Được và bạn có thể sử dụng Thẻ <pre> hoặc <xmp> để làm điều này I-Giữ lại định dạng của văn bản với cặp tags : <pre></pre>

1-Cú pháp:

<pre>Định dạng trước của văn bản <pre>

Trong đó:

• <pre> :khai báo giữ định dạng mặc nhiên của văn bản

• </pre> :Tag đóng khai báo

Ví dụ:

Vậy để hiển thị được các thành phần của trang HTML như <body>, <title>, thì làm sao.? Khi đó bạn phải

sử dụng đến ký tự riêng cho các dấu mở và đóng thành phần Dưới đây là một số ví dụ:

Trang 29

&#38lt;html&#38gt; &#38lt;head&#38gt; &#38lt;titlel&#38gt; I-Giữ lại

định dạng của văn bản với cặp tags : <xmp></xmp>

Cặp tag này hiện không được hỗ trợ rộng rãi bởi Browser nên được khuyến cáo là không nên sử dụng nhiều IE6, FireFox 7.5 hỗ trợ Đặc điểm của tag này là hiển thị bất kỳ cái gì chứa bên trong nó

1-Cú pháp:

<xmp>Định dạng trước của văn bản <xmp>

Trong đó:

• <xmp> :khai báo giữ định dạng mặc nhiên của văn bản

• </xmp> :Tag đóng khai báo

Trang 30

<li>I don't know

<li>I don't care

<li>I don't know

<li>I don't care

<li>What is HTML?

</ul>

Do tính chất không được chấp nhận rộng rãi, Bạn phải cẩn thận khi sử dụng tag này để trình bày bài hướng dẫn sử dụng HTML

III-Hiển thị lời giải thích: <acronym></acronym>

Dùng <acronym></acronym> để hiển thị lời giải thích cho các chữ viết tắt bởi các chữ cái đầu Ví dụ:

WTO= World Trade Organization Bạn thử đưa chuột lên chữ WTO sẽ sẽ thấy hiệu lực của tag này 1-Cú pháp:

Trong đó:

• <acronym> :Đặt ngay trước chữ viết tắt

• title="lời giải thích" : Ghi giải thích của chữ viết tắt

• </acronym> :Tag đóng khai báo sau chữ viết tắt

HTML

CSSVB

Trang 31

ASP

Bạn thử đưa chuột lên từng từ viết tắt ở cửa sổ hiển thị, bạn sẽ thấy được hiệu ứng acronym mới dùng Ngòai ra bạn cũng có thể sử dụng cặp tag <abbr></abbr> để hiển thị lời giải thích Cú pháp tương tự như cặp tag Acronym nhưng chỉ hỗ trợ với Netscape Navigator và không được hỗ trợ bởi IE

BÀI 8 : Thuộc tính cho thành phần BODY-Phần 1

Bài này sẽ giới thiệu 3 thuộc tính dùng cho thành phần BODY đó là chọn màu nền, dùng ảnh để làm nền, màu chữ với các Thẻ: bgcolor=, background= , text=

Mặc nhiên, nếu không khai báo màu nền và màu chữ trong thành phần BODY, Trình duyệt sẽ tự động chọn màu trắng làm nền và màu đen cho chữ Chúng ta có thể sử dụng một số thuộc tính dưới đây để thiết lập màu nền, ảnh nền và màu chữ cho trang Web theo ý muốn

I-Màu nền: bgcolor=

1-Cú pháp:

Trong đó:

• bgcolor= :khai báo màu nền cho Web(viết tắt của background color).

• color :Màu cho nền(dùng tên màu hoặc giá trị Hexadecimal).

Ví dụ: Đọan Code sau đây lấy màu xanh làm nền

Trang Web này dùng màu xanh làm nền và dược khai báo trong

thành phần BODY.

Thay vì sử dụng tên màu, bạn có thể thay thế bằng giá trị Hexadecimal (bạn nên sử dụng) Chẳng hạn,

màu xanh trong ví dụ trên có giá trị Hex là: #0000FF Vậy bạn có thể viết như sau:

Thay vì dùng bgcolor="blue", chúng ta có thể dùng giá trị Hex,

bgcolor="#0000FF" cho màu xanh.

Trang 32

• imgname: nguồn và tên của ảnh nền.

Có 2 định dạng ảnh được hỗ trợ bởi phần lớn các Trình duyệt đó là ảnh GIF và JPG Thông thường để tạo ảnh nền, nên dùng JPG vì định dạng này cho ảnh chất lượng cao Bạn phải khai báo đúng tên đường dẫn đến ngăn lưu trữ file ảnh và đúng tên của tập tin ảnh (để ý tên tập là chữ viết thường hay viết hoa và khai báo cho đúng) Không nhất thiết phải chọn một tập tin ảnh có kích thước lớn làm nền Mặc nhiên, khi chọn một ảnh cho nền, trình duyệt sẽ tự động trải ảnh này cho tòan bộ trang Web Nghĩa là Browser sẽ tạo

ra một ảnh lớn làm nền từ file ảnh nhỏ bằng cách trải và đặt chúng nằm liền nhau Nếu ảnh nền không sử dụng hiệu ứng Seamless Tiding- một kỹ thuật làm liền viền như lót gạch hoa, thì giữa các ảnh dàn trải sẽ xuất hiện các đường viền khiến chúng không liền nhau Để tránh trường hợp này, bạn phải dùng một chương trình xử lý ảnh để tạo ảnh liền viền Xem bài Thực hành số 3-Bài 8 tài liệu hướng dẫn sử dụng Paintshop Pro 8 Dưới đây là 2 đọan code sử dụng ảnh nền cho trang Web Với 2 ảnh mẫu bên dưới: Bạn nên lưu 2 file ảnh này vào thư mục chứa file thực hành

Ảnh 1-Không liền viền Ảnh 2-Liền viền

Ví dụ: Đọan code dưới đây sử dụng ảnh làm nền

Ảnh nền Cho Web không dùng hiệu ứng Seamless Tiding

Bạn dễ dàng nhận ra các đường nối giữa các ảnh nhỏ.

Ảnh nền Cho Web dùng hiệu ứng Seamless Tiding

Bạn khó nhận ra các đường nối giữa các ảnh nhỏ.

Sẽ thừa nếu bạn vừa dùng ảnh làm nền lại vừa dùng màu làm nền Do vậy, chỉ 1 trong 2 chọn lựa nền cho

trang Web nói trên được dùng trong thành phần BODY

III-Màu chữ: text=

Mặc nhiên, Browser sẽ chọn màu đen cho chữ Trong bài 6, chúng ta cũng đã đề cập đến sử dụng Tag để chọn màu cho chữ Ngòai ra để thay đổi màu mặc nhiên của chữ, chúng ta còn có thể dùng thuộc tính text="color"

1-Cú pháp:

Trong đó:

• text= :khai báo chữ cho Web.

• color : Màu cho chữ(dùng tên màu hoặc giá trị Hexadecimal).

Trang 33

Ví dụ: Đọan code dưới đây sử dụng màu đen làm nền và màu trắng cho chữ

Chữ màu trắng và nền màu đen.

Trang 34

BÀI 9 : Thuộc tính cho thành phần BODY-Phần 2

Trong bài 8, chúng ta đã nắm một số thuộc tính (properties) cho thành phần bao gồm: màu nền (bgcolor=),ảnh nền (background=) và màu chữ (text=) Bài này chúng ta đề cập đến các thuộc tính còn lại của bao gồm: Lề của trang Web (margin), màu của các đường liên kết (link)

I-Lề của trang HTML: topmargin= "", leftmargin=""

3-Viết gộp 2 thẻ trong thành phần BODY:

4- Ví dụ: Đọan Code xác định khỏang cách trên cùng, khỏang cách 2 biên của trang Web với trình duyệt bằng 5 pixels

5-a Real World Example: Đọan Codes này xác định khỏang cách trên cùng của trang Web với trình duyệt bằng 0 pixels

<TABLE align="center" width="600" height="50"

border="1" cellpadding="0" cellspacing="0">

Trang 35

Welcome to My First HTML Page!

Đón chào bạn đến với TRang Web đầu tiên của tôi!

</CENTER>

</TD>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện dài</TD>

Trang 36

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện ngắn</TD>

</TR>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện cười</TD>

<TABLE ALIGN="CENTER" Border="1" width="600"

height="20" cellpadding=0 bgcolor="#8DCFF4">

Chép đọan codes này và dán vào Coderunner, Click nút Xem trang Web, bạn thấy rằng bây giờ trang này

phía trên cùng nằm sát với thực đơn trình duyệt Không có khỏang trống nào Với Leftmargin vì chúng ta dùng độ rộng của <TABLE> là 600pixels nên không thấy được khỏang cách

5-b Real World Example: Đọan Codes này xác định khỏang cách trên cùng và hai biên của trang Web với trình duyệt bằng 0 pixels

Đổi lại độ rộng của các bảng (table) trong đọan Codes trên là 100% Chép đọan Codes dưới đây là lưu vào

Notepad với tên tập tin testmargin.html Mở bằng trình duyệt hoặc Coderunner bạn sẽ thấy kết quả:

Trang 37

<TABLE align="center" width="100%" height="50"

border="1" cellpadding="0" cellspacing="0">

Welcome to My First HTML Page!

Đón chào bạn đến với TRang Web đầu tiên của tôi!

Trang 38

</TD>

<TABLE WIDTH="140" border="1" cellspacing="2"

cellpadding="2" bordercolor="#FFFFFF">

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện dài</TD>

</TR>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện ngắn</TD>

</TR>

<TR>

<TD BGCOLOR="#FFCC99" align="right">Truyện cười</TD>

<TABLE ALIGN="CENTER" Border="1" width="100%"

height="20" cellpadding=0 bgcolor="#8DCFF4">

II-Màu của các liên kết trong HTML: link= "", alink="", vlink=""

Cho đến giờ chúng ta chưa học đến lệnh liên kết đến trang hoặc Website trong HTML Tuy vậy, bài học này cung cấp thông tin để bạn sử dụng cho các liên kết mà bạn sẽ học trong bài 18 Như bạn biết, ngòai việc hiển thị thông tin trên trình duyệt, HTML còn cho phép chúng ta liên kết đến các trang HTML khác, hoặc các Website khác Để làm được, chúng ta phải sử dụng Thẻ liên kết(sẽ đề cập đến trong bài 18) Mỗi một liên kết bao gồm màu chữ của Liên kết khi người dùng chưa Click chuột lên liên kết đó (Link color) Màu chữ của Liên kết khi liên kết đã được Click và hiện tại trang liên kết đang mở (active link) Và

Trang 39

màu của liên kết cho biết rằng trang đó chúng ta đã xem(visited link) HTML chỉ cho chúng ta 3 thuộc tính

đó Ngòai ra, để thực sự điều khiển được thuộc tính của Liên kết, bạn phải dùng đến CSS CSS cho phép bạn tất cả các khả năng mà bạn cần để trang web trở nên sinh động hơn

Trong HTML để khai báo màu của Link, bạn phải đặt các thuộc tính này trong thẻ <BODY> Có 3 thuộc

tính mà bạn dùng là:

• link="giá trị màu" :Khai báo màu của chữ đại diện cho Liên kết Giá trị màu có thể là tên màu

hoặc giá trị Hex

• alink="giá trị màu" :Khai báo màu của chữ đại diện cho Liên kết khi liên kết này được click Giá

trị màu có thể là tên màu hoặc giá trị Hex( alink viết tắt của Active Link: Liên kết đang họat động)

• vlink="giá trị màu" :Khai báo màu của chữ đại diện cho Liên kết khi liên kết này được xem Giá

trị màu có thể là tên màu hoặc giá trị Hex( vlink viết tắt của Visited Link: Liên kết đã được xem.)1-Cú pháp:

2-Ví dụ:

Để khai báo màu chữ của liên kết là Xanh, Active Link là màu Đỏ và Vlink là màu Tím, bạn viết như sau:

<BODY LINK="blue" ALINK="red" VLINK="purple">

Hoặc bạn có thể dùng giá trị HEX:

<BODY LINK="#0000FF" ALINK="#FF0000" VLINK="#9900CC">

Tham khảo bảng màu với các giá trị Hex sẵn có

Trong bài kế tiếp, bạn sẽ học cách đặt một liên kết trên trang HTML

Trang 40

BÀI 10 : Thực hành HTML và làm quen với biểu bảng

Bài thực hành này ôn lại một số codes đã học , cách sử dụng màu cho trang Web Qua đó bạn cũng làm quen dần với biểu bảng và cách tạo một biểu bảng trong HTML trước khi chúng ta bắt đầu trong bài 11 Hãy xem biểu bảng bên dưới

Bảng 16 màu cơ bản

Để thực hành, bạn hãy mở Notepad, chọn font chữ verdana hoặc tahoma, và gõ vào các dòng codes bên dưới:

<html>

<head>

</head>

<table align="center" border=1 bordercolor="#0000FF"

cellspacing="0" cellpadding="2" width="500">

<tr>

<td align="center" bgcolor="#FFFFFF">White</td>

<td align="center" bgcolor="#000000"> Black</td>

<td align="center" bgcolor="#C0C0C0"> Silver</td>

</tr>

Tiêu đề	HTML toàn tập
Trường học	Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	tài liệu
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	96
Dung lượng	0,95 MB