HTML toàn tập

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 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.Ví dụ:Khi khai báo như vậy Tag này không cần tag đóng (sẽ đề cập trong phần CSS).· : Cặp Tag này dùng để nhúng phong cách Cascading Style Sheet. Có thể đặt trong phần hoặc đặt tại nơi phong cách được áp dụng.Ví dụ:p {font-family:tahoma;verdana;font-size:14px; color:#000000;}· : Cặp tag này dùng để nhúng ứng dụng Javascript, có thể đặt trong phần hoặc tại vị trí ứng dụng được gọi. (sẽ đề cập trong phần javascript).Ví dụ:for(x=0; x · : Đây là cặp tag chứa đựng nội dung của trang Web. Những gì hiển thị trên Browser nằm trong cặp tag này. (Riêng với Frameset không cần khai báo)· : Được đặt ngay dưới cặp Tags: . Với Frameset không cần cặp Tags: . Ví dụ tài liệu HTML này được trình bày theo kiểu Frame. (sẽ đề cập trong các bài học)· : Thông báo trình duyệt rằng trang index có thể tìm được nằm trên server. · : 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() và thẻ đóng cũng tương tự nhưng có thêm dấu chéo tới (/). 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 dùng để vẽ một đường ngang. 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 xanhTrong đó: 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ùng color="blue" trong thẻ , trình duyệt sẽ bỏ qua thuộc tính và giá trị này và lấy mặc nhiê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êu cầ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ọng Browser. 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à: . . . . 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: Trong cửa sổ Notepad, click Format, chọn Word Wrap để chữ không tràn sang biên phải mà tự động xuố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ốn hiể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: My first webpageĐây là trang Web đầu tiên của tôi!!!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: Tại ô Filename: gõ vào tên file myfirstpage.html (nhớ rằng phần mở rộng là .html) Tại ô Save as type: chọn All files Tại ô Encoding chọn: UTF-8 (Unicode Transformation Format-8). Xong click Save. 4-Mở trang myfirstpage.html với Internet Explorer: 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: Click Browse tìm đến thư mục html, file myfirstpage và click Open, bạn thấy trình duyệt tìm được file, chẳng hạn như hình minh họa dưới: 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 trang trê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 đặ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 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ộng khỏ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. 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ẻ): 1-Cú pháp: Tên của tiêu đề 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ự: h1: 20px h2: 18px h3:16px h4: 14px h5:12px h6: 10px Lưu ý: Các giá trị trên chỉ tượng trưng cho khả năng của HTML. Với CSS, bạn có thể định dạng thẻ và cho giá trị độ lớn (pixels) tùy ý. Tag đóng tiêu đề tương ứng với tag mở nhưng phải có thêm dấu /: Xem ví dụ: Viết: Đây là Header 1 Hiển thị: Đây là Header 1 Viết: Đây là Header 2 Hiển thị: Đây là Header 2 Viết: Đây là Header 3 Hiển thị: Đây là Header 3 Viết: Đây là Header 4 Hiển thị: Đây là Header 4 Viết: Đây là Header 5 Hiển thị: Đây là Header 5 Viết: Đây là Header 6 Hiển thị: Đây là Header 6 Thực hành: Mở Notepad hoặc coderunner gõ vào đọan code bên dưới: header Đây là Header 1 Đây là header 2 Đây là Header 3 Đây là Header 4 Đây là Header 5 vh6>Đây là Header 6 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: <hn align="giá trị">nội dung tiêu đề 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ụ: Header này được canh giữa Header này được canh giữa Header này được canh phải Header này được canh phải Header này mặc nhiên là canh biên trái Header này mặc nhiên canh biên trái II-Cặp Tags Đọan Văn: Paragraph Tag Để 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). 1-Cú pháp: Nội dung của đọan văn bản Ví dụ: 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à 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, bạn chỉ việc gán thuộc tính và giá trị rồi dùng chúng để định dạng cho tòan bộ trang web hoặc nhiều trang Web trên cùng một 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. 2-Thuộc tính và giá trị thuộc tính của : Cũng giống như với , 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. 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. Để ý: 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: 1-Cú pháp: Nội dung của trích đọan 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 mở và đóng. Mở bao nhiêu thì đóng bấy nhiêu. Ví dụ: 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. 2-Thuộc tính và giá trị thuộc tính của : 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: . Và để ghi rõ trích dẫn từ một trang Web khác bạn dùng cú pháp IV-Tag Xuống Hàng: Break a line tag và chống xuống hàng . 1-Tag xuống hàng: Khi viết thẳng vào HTML không cần sử dụng Paragraph tag (p tag), bạn có thể sử dụng Tag: để xuống hàng. Tag này không có tag đóng.. Ví dụ: Viết: Họ: Tên: Địa chỉ-email: Hiển thị trên trình duyệt: 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. 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. Hiển thị trên trình duyệt: 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: . Đâ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 Có 5 thuộc tính cho đó 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: Hiển thị trên trình duyệt: VII-Canh giữa nội dung: tag Khi không sử dụng hoặc cho đọan văn bản, bạn có thể dùng cặp Thẻ để canh giữa nội dung Ví dụ: Viết: Canh giữa nội dung này Hiển thị trên trình duyệt: Canh giữa nội dung này Cặp tag này cũng được dùng để canh ảnh, form vào giữa trang. 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ụ: Viết: Hiển thị trên trình duyệt: Đọ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 Chữ nghiêng để 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 : chữ nghiêng, Chữ nghiêng, Chữ nghiêng, cũng có tác dụng làm nghiêng chữ nhưng ít đựơc sử dụng như tags 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à 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ụ: Viết: Hiển thị trên trình duyệt: I like HTML I like HTML b-Cặp Tags: để 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ụ: Viết: Hiển thị trên trình duyệt: I like HTML I like HTML 2-Thuộc tính và giá trị thuộc tính của: và : Các cặp tag này không có thuộc tính và giá trị. IV-Chữ Gạch Giữa: Strike (strike) tag 1-Cú pháp: Ta có thể viết: chữ gạch giữa hoặc chữ gạch giữa Trong đó: :tag khai báo gạch giữa. :tag đóng chữ đã được gạch giữa. Ví dụ: Viết: Hiển thị trên trình duyệt: Giá cũ: 250.000 đồng Giá cũ: 250.000 đồng V-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: 1-Cú pháp:Chữ to hơn Trong đó: :tag khai báo làm chữ to hơn. :tag đóng chữ đã được làm to. Ví dụ: Viết: Hiển thị trên trình duyệt: Chữ này to hơn Chữ này to hơn 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ị. 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ụ: Viết: Hiển thị trên trình duyệt: Chữ này nhỏ hơn Chữ này nhỏ hơn 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ị. Để 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 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ụ: Viết: Hiển thị trên trình duyệt: Chữ màu đỏ Chữ màu đỏ Chữ màu xanh, mức 1 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, font tahoma, 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 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 3-Cỡ chữ: Cỡ rất lớn Cỡ lớn Cỡ vừa Cỡ nhỏ Cỡ policy thẻ tín dụng Cỡ policy cho mướn xe III-Bài thực hành: Mở Notepad và gõ vào bài thực hành sau: Fotmat_font Bài thực hành số 2 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. 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) 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:Mục trong danh sáchMục trong danh sách</li>............................Trong đó: · :khai báo một danh sách sẽ được dùng. · Thuộc tính: type= · :Thành phần khai báo mục của danh sách. Giá trị: type="ký tự" · :Tag đóng mục. (Tag này là tùy chọn, không cần đóng cũng được.) · :Tag đóng.Ví dụ: Viết: Hiển thị trên trình duyệt: Mục 1 Mục 2 Mục 3 Mục 1 Mục 2 Mục 3 Mục 1 Mục 2 Mục 5 Mục 6 Mục 7 Mục 1 Mục 2 Mục 5 Mục 6 Mục 7 Mặc nhiên, khi một danh sách được khai báo thì mục đầu tiên sẽ tự động xuống 1 hàng vào thụt lề.2-Giá trị thuộc tính của Tag:  · : Bắt đầu danh sách theo thứ tự 1,2,3.(mặc nhiên) · : Danh sách bắt đầu là các chấm vuông đen. · : Danh sách bắt đầu là vòng tròn rỗng. · : Danh sách bắt đầu là 1 vòng tròn đen. · :Danh sách bắt đầu số La Mã hoa. · : Danh sách bắt đầu số La Mã thường. · : Danh sách bắt đầu chữ cái Hoa. · : Danh sách bắt đầu chữ thường. Xem ví dụ: Viết: Hiển thị trên trình duyệt: Mục thứ tự 1 Mục thứ tự 2 Mục thứ tự 3 Mục thứ tự 1 Mục thứ tự 2 Mục thứ tự 3 Mục với ô vuông đen. Mục với ô vuông đen. Mục với ô tròn rỗng. Mục với ô tròn rỗng Mục với ô tròn đen. Mục với ô tròn đen 3-Tạo danh sách nhiều tầng: Để tạo danh sách nhiều tầng, bạn có thể lồng một danh sách vào trong một danh sách. Xem ví dụ: Viết: Hiển thị trên trình duyệt: Chương 1: Bài Lý thuyết 1. Bài Lý thuyết 2. Bài Lý thuyết 3. </li> Chương 2: Bài Thực Hành 1. Bài Thực Hành 2. Bài Thực Hành 3. Chương 1: Bài Lý thuyết 1. Bài Lý thuyết 2. Bài Lý thuyết 3. Chương 2: Bài Thực Hành 1. Bài Thực Hành 2. Bài Thực Hành 3. II-Danh sách thứ tự: &(Ordered List) Ordered List để tạo danh sách theo thứ tự số hoặc chữ. Cũng giống như khai báo của , nhưng cặp tags này còn có thêm thuộc tính Start và giá trị.Ví dụ: Viết: Hiển thị trên trình duyệt: Order List hiễn thị mục với số thứ tự. HTML không xếp thứ tự các mục. Nó chỉ thêm số thứ tự vào mỗi mục Bạn phải tự xếp thứ tự. Order List hiển thị mục với số thứ tự. HTML không xếp thứ tự các mục. Nó chỉ thêm số thứ tự vào mỗi mục Bạn phải tự xếp thứ tự. Order List có thể dùng số La Mã. Order List có thể dùng chữ cái. Bạn bắt đầu bằng 10. Mục kế tiếp sẽ là XI. Order List có thể dùng số La Mã. Order List có thể dùng chữ cái. Bạn bắt đầu bằng 10. Mục kế tiếp sẽ là XI, XII, XIII. Order List có thể dùng chữ cái. Dùng chữ A để khai báo. Bắt đầu bằng chữ thứ 24. Chữ kế tiếp nó là X,Y,Z, AA. Order List có thể dùng chữ cái. Dùng chữ A để khai báo. Bắt đầu bằng chữ thứ 24. Chữ kế tiếp nó là X,Y,Z, AA. Các giá trị thuộc tính của type=: :Bắt đầu bằng 10, kế tiếp là 11, 12, 13... : Danh sách bắt đầu là các chấm vuông đen. : Danh sách bắt đầu là vòng tròn rỗng. : Danh sách bắt đầu là 1 vòng tròn đen. :Danh sách bắt đầu số La Mã hoa, kế tiếp là VI, VII, VIII... : Danh sách bắt đầu số La Mã thường, kế tiếp là vi, vii, viii... : Danh sách bắt đầu chữ cái Hoa, kế tiếp là C, D, E.... : 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.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: : Tags tạo danh sách định nghĩa. (Definition List) : Tags hiển thị thuật ngữ sẽ được định nghĩa. (Definition Term) : Tags hiển thị định nghĩa của thuật ngữ. (Definition Description) Ví dụ: Viết: Hiển thị trên trình duyệt: HTML Hypertext Markup Language. CSS Cascading Style Sheet. DHTML Damamic Hypertext Markup Language. Element Element được tạo bởi 2 Thẻ. Attribute Attribute mô tả đặc tính của Element. Value Value xác định một giá trị của Attribute. HTML Hypertext Markup Language. CSS Cascading Style Sheet. DHTML Dymamic Hypertext Markup Language. Element Element được tạo bởi 2 Thẻ. Attribute Attribute mô tả đặc tính của Element. Value Value xác định một đặc tính của Attribute. BÀI 6 : Đặt ảnh lên trang Web Thẻ 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 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: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. WIDTH= :Xác định chiều RỘNG của ảnh. 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ẻ , 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ỉ: 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 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ẻ 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ẻ Lưu ý:: để canh ảnh vào giữa, chúng ta dùng cặp thẻ đặt trước và sau thẻ Thực hành 1: tag IMG đơn giản nhất Viết: Xem kết quả. Để đặt một ảnh vào giữa trang Web, khi ảnh không nằm trong một TD (sẽ đề cập trong bài 12), dùng cặp thẻ: Viết: Xem kết quả. Thực hành 2: Dùng ALIGN để định ví trị cho ảnh: Viết: Ả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: Dòng chữ này nằm giữa so với vị trí của ảnh. Xem kết quả. 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: Xem kết quả.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: Xem kết quả. Bài học này bao trùm cách sử dụng Thẻ để 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. 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ẻ hoặc để làm điều này. I-Giữ lại định dạng của văn bản với cặp tags : 1-Cú pháp: Định dạng trước của văn bản Trong đó: :khai báo giữ định dạng mặc nhiên của văn bản. :Tag đóng khai báo. Ví dụ: Vậy để hiển thị được các thành phần của trang HTML như , , 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ụ: Xem ví dụ: Viết: Hiển thị trên trình duyệt: <html> <head> <title> <body> </p> ® © ™ ® © ™ Việc đưa tất cả các ký hiệu riêng cho HTML là một công việc mất rất nhiều thời gian và công sức nếu không sử dụng công cụ hỗ trợ. Chẳng hạn để hiển thị ví dụ trên, trong Notepad, chúng ta phải viết phải viết như sau: &lt;html&gt; &lt;head&gt; &lt;titlel&gt; ........................................... I-Giữ lại định dạng của văn bản với cặp tags : 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: Định dạng trước của văn bản Trong đó: :khai báo giữ định dạng mặc nhiên của văn bản. :Tag đóng khai báo. Xem ví dụ: Viết: Hiển thị trên trình duyệt: Hello Hi How are you? I don't know I don't care What is HTML? Hello Hi How are you? I don't know I don't care What is HTML? 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: Dùng để 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: Chữ viết tắt Trong đó: :Đặ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. :Tag đóng khai báo sau chữ viết tắt. Ví dụ: Viết: Hiển thị: HTML CSS VB ASP HTML CSS VB 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 để 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. II-Dùng ảnh làm nền: Để dùng ảnh làm nền cho thành phần , chúng ta có thể thay thế thuộc tính bgcolor bằng thuộc tính: background= 1-Cú pháp: Trong đó: background= :khai báo ảnh nền cho thành phần Body. 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). 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. 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=""1-topmargin:Cú pháp Trong đó: topmargin= :Khai báo khỏang cách trên cùng của trang Web so với trình duyệt. Giá trị là số Pixels 2-leftmargin:Cú pháp Trong đó: leftmargin= :Khai báo khỏang cách trái phải của trang Web so với hai biên của trình duyệt. Giá trị là số Pixels 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. TEST MARGINBanner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập:Đặt Script ngày tháng nămTrang ChínhGiới thiệuTinhọcÂm nhạcTiếng AnhKiến ThứcWelcome to My First HTML Page!Đón chào bạn đến với TRang Web đầu tiên của tôi!Truyện dàiTruyện ngắnTruyện cườiThơLiên lạcĐăng ký All rights reserved-Copyrighted by Me. 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 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ả: TEST MARGINBanner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập:Đặt Script ngày tháng nămTrang ChínhGiới thiệuTinhọcÂm nhạcTiếng AnhKiến ThứcWelcome to My First HTML Page!Đón chào bạn đến với TRang Web đầu tiên của tôi!Truyện dàiTruyện ngắnTruyện cườiThơLiên lạcĐăng ký All rights reserved-Copyrighted by Me. 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à 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ẻ . 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: Hoặc bạn có thể dùng giá trị HEX: 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 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 White Black Gray Silver Aqua Navy Yellow Green Red Fuchsia Blue Teal Lime Olive Maroon Purple Để 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: Tạo bảng màu 16 màu cơ bảnBảng 16 màu cơ bảnWhite Black Gray SilverAqua Navy Yellow GreenRed Fuchsia Blue TealLime Olive Maroon PurpleĐể sử dụng màu bạn chỉ việc khai báo thuộc tính màu trong thành phần theo sau bởi dấu = "tên màu. Lưu tập tin này vào thư mục html với tên colorchart.html. Kết quả của bạn giống như tập tin html này, click vào đây BÀI 11 : Tạo biểu bảng trong HTML-Phần 1 Nếu bạn đã dùng chương trình bảng tính (Excel) hoặc sử dụng bảng (table) trong MS Word thì bạn dễ dàng hiểu khái niệm về bảng và hình thức của chúng. Bảng là tập hợp của hàng và cột.... Giao tiếp giữa hàng và cột tạo ra các ô (cell). Dữ liệu chứa trong ô gọi là dữ liệu của bảng (table data). Bảng được phát triển và đưa vào sử dụng trong HTML để hiển thị các thông tin theo cấu trúc. Cho đến nay bảng đã được sử dụng rộng rãi trong thiết kế Web. Bảng dùng để định dạng bố cục của một trang, chia các phần của trang ra thành từng khu vực nhỏ. Bạn thử truy cập một trang bất kỳ nào, rồi dùng lệnh View/Source của trình duyệt để xem Source code của trang .Rõ ràng, bạn thấy trong trang này sử dụng nhiều thành phần bắt đầu bằng và trong thành phần này có nhiều thuộc tính và giá trị của thuộc tính dùng để định dạng cho Thẻ đó . Mỗi một bảng (table) gồm một hoặc nhiều hàng (tr= table row), trong một hàng gồm một hoặc nhiều ô (td =table data). Một bảng chỉ có một hàng và một ô thường được dùng làm bảng chính bao quanh nội dung của trang Web. Khi thiết kế bảng phức tạp, trong một ô có thể thêm vào các bảng nhỏ và các ô trong bảng nhỏ này có thể thêm vào bảng nữa... Hoặc có thể hàng trên trong bảng chỉ 1 ô và hàng dưới là 2 ô, hàng dưới nữa là 3 ô...Hoặc hàng bên trái gồm 4 hàng và hàng bên phải là một hàng... Việc sử dụng tag mở và đóng phải theo đúng trình tự nếu không ô trong bảng sẽ không hiển thị như mong muốn. I-Các thành phần để tạo một bảng: Trước hết, trong HTML, để tạo một bảng, cần các cặp Thẻ thành phần sau đây: : Mở và đóng một bảng. : Mở và đóng một hàng. : Mở và đóng một ô. Nhớ rằng giữa các thuộc tính trong bảng phải cách nhau bằng một khỏang cách( nhấn phím cách) và theo sau chúng là dấu "=" 1-Các thuộc tính của bảng () gồm: align= background= bgcolor= width= height= border= bordercolor = bordercolordark= bordercolorlight= cellpadding= cellspacing= frame= rules= 2-Các thuộc tính của hàng () gồm: align= valign bgcolor= background= 3-Các thuộc tính của ô () gồm: align= valign= bgcolor= background= char= colspan= rowspan= nowrap= height = width= Chúng ta sẽ lần lượt tìm hiểu cách dùng các thuộc tính và giá trị đi kèm chúng cho mỗi thành phần trong bảng trong bài này và các bài kế tiếp về bảng. II-Bắt đầu tạo một bảng đơn giản: Trước tiên, để làm quen với bảng chúng ta thực hành tạo một số bảng đơn giản. Sau đó, chúng ta sẽ lồng các thuộc tính cho từng thành phần như đã nêu trên. 1-Bảng đơn giản: Một bảng đơn giản gồm các bước: -Bắt đầu bảng gõ vào Thẻ -Bắt đầu một hàng đầu tiên trong bảng gõ vào: -Bắt đầu một ô dữ liệu đầu tiên trong bảng gõ vào: -Nhập vào nội dụng của ô dữ liệu. -Đóng ô dữ liệu này bằng Thẻ -Đóng hàng đầu tiên bằng Thẻ: -Đóng bảng này bằng Thẻ: Lưu ý: Thẻ là bắt buộc nếu bạn muốn trang Web hiển thị bảng trong Netscape Navigator. a-Ví dụ 1: Bang dau tienĐây là bảng đầu tiên, bảng này chỉ có một hàng và một cột. Tìm hiểu cách viết của bảng trên: 1- 2- 3-Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột. 4- 5- 6- Dòng 1: Bắt đầu một bảng Dòng 2: Bắt đầu 1 hàng. Dòng 3: Bắt đầu một ô, và trong ô phải chứa một nội dung nào đó. Nội dung có thể là Text, hoặc hình ảnh. (trong ví dụ này là Text : Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột Dòng 4: Đóng ô dữ liệu Dòng 5: Đóng hàng trong bảng Dòng 6: Đóng bảng. Cú pháp trên đây giúp bạn dễ theo dõi việc tạo một bảng. Khi đã quen với viết codes, các tag có thể nằm trên cùng một hàng mà không cần phải xuống hàng như cách viết trên. Đọan codes trên đây có thể viết lại như sau: Bang dau tienĐây là bảng đầu tiên, bảng này chỉ có một hàng và một cột. Khi bạn xem ví dụ trên, bạn không thấy gì ngòai dòng: Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột.. Vậy, bảng nằm ở đâu?. Nguyên nhân là với HTML, khi bạn không khai báo border= cho bảng thì trình duyệt hiểu rằng, bảng đó sử dụng border=0. Vậy cũng với đọan code trên chúng ta hãy thêm border="5" vào bảng xem sao. (5 pixels) Ví dụ 2: Tạo viền cho bảng với thuộc tính border="số pixel" Bang dau tienBảng này có viền lớn bằng 5 pixel. Rõ ràng, bây giờ bao quanh bảng là 1 khung màu xám. Bạn có thể cho khung này một chút màu được không? Câu trả lời là bạn chỉ cần thêm bordercolor="màu" vào trong thành phần Cũng với ví dụ trên bạn viết lại như sau: Ví dụ 3: Thêm màu cho viền với thuộc tính bordercolor="màu" Bang dau tienBảng này có viền = 5px và màu viền là vàng. Bạn đã tạo được một bảng có độ rộng của viền bằng 5px và màu của viền là vàng. Bạn có thể thực hành với các giá trị màu và pixel khác nhau để quen dần. Đến đây chắc bạn nghĩ rằng, có thể thêm màu cho viền thì cũng có thể thêm màu cho nền. Được mà, chỉ cần bạn thêm thuộc tính bgcolor="màu" vào thành phần bảng (thuộc tính này bạn đã quen trong bài 9). Dùng ví dụ trên, hãy thêm thuộc tính bgcolor="red" vào bảng. Như đọan codes bên dưới: Ví dụ 4: Thêm màu màu nền cho bảng với thuộc tính bgcolor="màu" Bang dau tienBảng này có viền = 5px và màu viền là vàng, màu nền đỏ. Nếu thêm màu nền, hẳn cũng có thể sử dụng ảnh nền cho bảng. Không sai, bạn có thể thay thế thuộc tính bgcolor="màu" bằng thuộc tính background="taptinanh.gif". (Xem bài 9- Ảnh nền cho thành phần body). Khi đó bạn phải có tập tin ảnh nền có phần mở rộng là .jpg hoặc gif). Đến đây, bạn thấy rằng thuộc tính background= "", bgcolor="" ngòai xác định màu nền và ảnh nền cho thành phần body của trang, nó còn được dùng cho cả bảng, hàng( chỉ dùng bgcolor), và cột...Đây là mối quan hệ của thuộc tính với thành phần, không chỉ trong HTML mà cả Javascript, CSS và nhiều ngôn ngữ khác có dùng ngôn ngữ HTML. Và bạn càng ngạc nhiên khi thấy được sự giống nhau trong quan hệ của Thành phần-Thuộc tính hay Đối tượng-Thuộc tính hay Đối tượng-Phương pháp trong nhiều ngôn ngữ lập trình. Cái cơ bản là chúng ta nhớ, hình dung và sắp xếp chúng theo trật tự hợp lý. Phần 1 đã giới thiệu những cơ bản nhất về bảng. Để khám phá tiếp cách dùng các thuộc tính còn lại và tạo những bảng phức tạp, chúng ta sẽ tiếp tục với phần 13, 14, 15, 16. BÀI 12 : Tạo biểu bảng trong HTML-Phần 2 Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng bắt đầu bằng , bên trong là , bên trong là . Trong phần 1, bạn đã nắm được cách tạo một bảng đơn giản, thêm viền, màu viền, màu nền, ảnh nền cho bảng. Bạn cũng biết được bố cục một bảng bắt đầu bằng , bên trong là , bên trong là . Để đóng dùng Thẻ , để đóng một hàng chứa , dùng Tag đóng . Và để kết thúc bảng dùng tag đóng . Giải sử muốn tạo bảng có 2 hay nhiều hàng thì làm sao? I-Tạo bảng đơn giản với nhiều hàng, nhiều cột: Cũng như tạo bảng đơn giản với 1 hàng, để tạo nhiều hàng, ngay khi đóng hàng đầu tiên của bảng, bạn tiếp tục mở một hàng mới bằng Tag , rồi cũng khai báo dữ liệu bằng các tag mở và đóng . 1-Bảng nhiều hàng:a-Ví dụ 1: Tạo bảng nhiều hàng. Xem minh họa: Dưới đây là đọan mã HTML cho minh họa trên. Bạn nên thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html hơn là chép rồi dán. Bang nhieu hang Đây là hàng 1 chữ màu vàng.  Đây là hàng 2 chữ màu đỏ. Đây là hàng 3 chữ màu xanh. Đây là hàng 4 chữ màu lá chanh. Bạn đừng bận tậm tại sao bảng thu hẹp chiều ngang. Đơn giản là chúng ta chưa khai báo độ rộng cho bảng nên Trình duyệt tự động mở rộng hay thu hẹp bảng tùy theo nội dung chứa trong . Trong ví dụ trên, mỗi một hàng mới được khai báo với Thẻ , và đóng bằng .Bạn có thể thêm màu nền vào trong mỗi hàng( bằng cách chèn thuộc tính dùng thuộc tính bgcolor="tên màu" như bạn dùng trong Thẻ hoặc . Cũng với ví dụ trên, ví dụ dưới đây là thêm màu nền vào . b-Ví dụ 2: Thêm màu nền vào Thẻ Xem minh họa: Đoạn mã HTML bên dưới: Bang nhieu hang Đây là hàng 1 chữ màu vàng, nền màu đen.  Đây là hàng 2 chữ màu đỏ, nền màu xanh. Đây là hàng 3 chữ màu xanh, nền màu lá chanh. Đây là hàng 4 chữ màu lá chanh, nền màu nước biển. Dù bạn đã khai báo màu nền trong Thẻ , bạn vẫn có thể thay đổi màu nền trong thẻ bằng cách thêm thuộc tính bgcolor="tên màu" trong thẻ đó. Tóm lại, bạn có thể thay đổi màu nền và ảnh nền cho Thẻ , , bằng thuộc tính: bgcolor="tên màu" và background="taptinanh". Lưu ý: Chỉ dùng thuộc tính bgcolor cho thẻ .2-Tạo bảng nhiều cột: Như đã nói, trong một hàng gồm một hoặc nhiều cột dữ liệu ( ). Do vậy chúng ta có thể tạo một bảng với nhiều cột dữ liệu bằng cách chia với nhiều . Ví dụ 1: Tạo bảng nhiều cột. Lưu ý: Những ví dụ này không đề cập đến màu nền, màu chữ hay màu viền. Xem minh họa: Mã HTML cho ví dụ trên. Bang nhieu hang, nhieu cot.  Qúy I Tháng giêng Tháng 2 Tháng 3  Tổng thu 000000 000000 000000  Chi 000000 000000 000000  Còn lại 000000 000000 000000  Lưu ý: Với cách tạo bảng này số cột trong mỗi hàng đều bằng nhau, trường hơp bạn bỏ sót một trong một hàng, bạn sẽ có kết quả như hình dưới: II-Một số thuộc tính khác trong bảng:Ví dụ 1: Đặt tiêu đề cho bảng: Bạn có thể sử dụng Thẻ , đểa đặt tiêu đề cho bảng. Dòng code này phải đặt đầu tiên ngay sau khi thẻ được mở. Trong ví dụ dưới đây dùng tbody align="center" vừa đặt tiêu đề vừa canh giữa các thành phần trong bảng. Xem minh họa: Đọan mã HTML cho minh họa trên. Nhớ là thực hành gõ vào Notepad và lưu bằng tập tin mở rộng .htm hoặc .html để quen. Bang nhieu hang, nhieu cot. Doanh Thu Qúy I năm 2005 Qúy I Tháng giêng Tháng 2 Tháng 3  Tổng thu 000000 000000 000000  Chi 000000 000000 000000  Còn lại 000000 000000 000000  Ví dụ 2: Che viền trong ngòai của bảng: Thuộc tính Frame="vị trí" có thể dùng để che viền ngòai của Table: Thuộc tính này được đặt trong Thẻ .Các giá trị vị trí của Thuộc tính Frame là: void: che dấu viền quanh bảng above: Chỉ hiển thị viền trên và trong below: Chỉ hiển thị viền dưới và trong hsides : Hiển thị viền trên và dưới vsides: Hiển thị viền 2 bên trái phải rhs: Hiển thị viền bên phải và trong lhs: Hiển thị viền bên trái và trong box, border: hiển thị viền trong tòan bảng. Xem minh họa: Ví dụ này sử dụng Frame="void" trong Ví dụ 3: Che viền trong của bảng: Thuộc tính rules="vị trí" có thể dùng để che viền trong của Table: Thuộc tính này được đặt trong Thẻ Table.Các giá trị vị trí của Thuộc tính rules là: none: che viền trong của bảng. rows: Chỉ hiển thị viền ngang cols: Chỉ hiển thị viền đứng Phần kế tiếp sẽ giới thiệu một số thuộc tính của bảng về độ rộng, chiều cao, canh biên... Kết thúc bài học về bảng, bạn có thể sử dụng bảng để Layout một trang HTML hòan chỉnh. BÀI 13 : Định chiều rộng và chiều cao cho bảng Khi nói đến độ rộng Width= và chiều cao Height= của bảng, chúng ta phải lưu ý đến độ phân giải màn hình. Có 2 giá trị để gán cho thuộc tính độ rộng và chiều cao trong thẻ: đó là Số Pixel và %. Nếu bạn sử dụng Pixel cho bảng, tùy theo độ phân giải của màn hình mà trang Web của bạn được trải đều ra hai biên hay có khuynh hướng bị thu hẹp lại vào giữa khi hiển thị trên màn hình có độ phân giải cao. Thống kê cho thấy hiện có khỏang 50% mà hình máy tính vẫn sử dụng độ phân giải 800x600 pixels. Cũng có nhiều màn hình hỗ trợ tốt 1024x768 pixels nhưng do người dùng đã quen thuộc với độ phân giải thấp nên ngại thay đổi. Khi tăng độ phân giải, đối tượng trên màn hình có khuynh hướng thu nhỏ lại. Ngược lại, khi giảm độ phân giải, đối tượng có khuynh hướng dãn ra. Do vậy, chọn Số pixels hay % cho bảng chính bao tòan trang là tùy thuộc vào sự lựa chọn của bạn. Hiện có rất nhiều trang Web sử dụng pixels và giới hạn chiều rộng của bảng là 770. Tất cả các trang của Thư viện IT sử dụng 100% chiều rộng cho bảng chính. Khi dùng phần trăm và thiết kế trên màn hình 1024x768, trang có thể đẹp mắt với bạn, nhưng nếu hiển thị trên màn hình độ phân giải thấp, các đối tượng có thể hiển thị không theo như mong muốn.I-Định chiều rộng và chiều cao cho bảng: Width= "", Height=""Cú pháp: hoặc: Trong đó: width= :Khai báo độ rộng cho bảng (giá trị là số Pixels hoặc %). height= :Khai báo chiều cao cho bảng (Giá trị là số Pixels hoặc %). Ví dụ: Đọan code sau đây tạo một bảng có chiều rộng 500pxels và chiều cao 200pixels. Table 1Ô này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng tương ứng Ô này rộng tương ứng  Kết quả như hình dưới: này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng tương ứng Ô này rộng tương ứng II-Định vị trí cho bảng và các dữ liệu trong ô:1-Định vị trí cho bảng: Để xác định vị trí của bảng, chúng ta dùng thuộc tính align= với các giá trị: left, center và right. Mặc nhiên vị trí của hầu hết các thành phần là bên trái. Để canh bảng vào giữa, cũng với ví dụ trên, chúng ta thêm align="center" vào trong thẻ , như sau: Kết quả: này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng tương ứng Ô này rộng tương ứng Khi ta định dạng bảng sang phải, chúng ta có thể viết nội dung ở bên trái giống như Wrap trong Word. Thay Align="right" trong ví dụ trên chúng ta được bảng và nội dung như sau: này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng 200 pixels Ô này rộng 300 pixels Ô này rộng tương ứng Ô này rộng tương ứng Bạn để ý nếu chúng ta dùng Thẻ <p để viết thì nội dung sẽ hiện thị vào phần trống bên trái của bảng này như bạn đang thấy. 2-Định vị trí dữ liệu: Trong 3 ví dụ trên, dữ liệu trong ô nằm về bên trái và mặc nhiên được đưa xuống giữa dòng. Để xác định vị tri của dữ liệu trong ô, chúng ta sử dụng 2 thuộc tính cho ô đó là: align= giá trị cho align mặc nhiên là Left (trái). Để canh giữ dùng "center", canh phải dùng "right". valign= giá trị cho valign là "top" (trên cùng), "bottom" (dưới cùng") và "middle" (giữa). (v viết tắt của vertical: đứng). Ngòai ra còn có baseline, nhưng giá trị này ít được dùng. Bây giờ, dùng lại đọan code trên nhưng chúng ta thêm vào align và valign cho các ô: Table 1Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới  Xem kết quả: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới III-Khỏang cách các ô dữ liệu:1-Khỏang cách giữa các ô dữ liệu: cellspacing= Thuộc tính cellspacing="số pixels" được dùnng để các định khỏang các giữa các ô dữ liệu trong bảng. Thuộc tính này được đặt trong Thẻ khi một bảng được khai báo. Ví dụ, để xác định khỏang cách giữa các ô là 10px, ta khai báo như sau:Chèn đọan codes này vào đọan codes mẫu trong ví dụ trên, thêm màu nền cho từng ô dữ liệu để dễ phân biệt (dùng bgcolor="yellow" chẳng hạn), Chạy đọan codes này (trong Code Runner) ta thấy kết quả như bên dưới: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới Để ý rằng, giữa các ô dữ liệu giờ đây đã có một khỏang cách là 10 pixels. Hiển thị bằng một viền rộng 10pixels màu trắng. 2-Khỏang cách từ ô dữ liệu đến viền xung quanh: cellpadding= Nếu bạn từng gói hàng, hẳn bạn phải dùng giấy mềm hoặc mút chèn xung quanh món hàng để bảo vệ khỏi bị vỡ. Những gì bạn chèn xung quanh món hàng đến hộp bọc bên ngòai, trong HTML gọi đó là padding: đệm, lót . Như vậy, cellpadding= là khỏang cách từ dữ liệu đến các viền xung quanh nó. Các viền này được xác định trong Thẻ table. Cũng như cellspacing=, cellpadding= cũng được khai báo trong thẻ Table. Để thấy được kết quả của Cellpadding, chúng ta dùng đọan code bên dưới: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới Chạy đọan codes này (trong Code Runner), chúng ta có bảng sau: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới Bây giờ, chèn thêm Cellpadding=20 vào Thẻ Table: Thay thế đọan codes này cho đọan khai báo Table ở trên ví dụ trên và chạy lại (trong Code Runner), ta có kết quả như sau: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới Rõ ràng, dữ liệu trong ô đã được đệm 20pixels cho trái, phải, trên dưới, khiến cho độ cao của ô được nới ra. Còn hai biên trái phải thì dữ liệu được đẩy thụt vào. Tuy nhiên, khi dùng Cellpadding thì phần đệm sẽ được chèn vào 4 phía: trên, trái, dưới, phải. Và bạn không thích như vậy. Bạn chỉ thích có thể điều khiển khỏang cách cho từng phía. Cascading Style Sheet (CSS) sẽ giúp bạn làm điều này với thuộc tính padding-top, padding-left, padding-bottom, padding-right; Đây là một ví dụ Inline Embeded CSS trong một .Dữ liệu trong ô Hoặc viết gọn:Dử liệu trong ôCác bài học về CSS sẽ trình bày chi tiết về định dạng Layout một trang Web. IV-Sử dụng giá trị phần trăm cho bảng: Lấy một đọan codes mẫu ở trên và thay đổi các giá trị Pixel cho Width= và Height= bằng số phần trăm. Chẳng hạn, bạn muốn trang Web của bạn rộng bằng 70% của màn hình 1024x768 và cao 100%, bạn khai báo như sau:Bạn cũng có thể vừa dùng Pixels vừa dùng phần trăm cho độ rộng và chiều cao của bảng. Xem đọan codes bên dưới: Canh giữa Canh biên phải Canh giữa và trên Canh giữa và giữa Canh giữa và dưới Canh phải và dưới Đến đây về cơ bản, bạn đã nắm được cách sử dụng bảng. Với ham muốn nắm vững, nắm chắc, nắm kỹ kiến thức đã học, bạn nên thực hành nhiều và thật nhiều lần. Bạn cũng có thể hình dung đến việc sắp xếp các nội dung của trang Web thành một trật tự bằng cách sử dụng bảng. Trước khi bắt đầu Layout một bảng hòan chỉnh, chúng ta còn một phần quan trọng trong thiết kế bảng phức tạp đó là Colspan và Rowspan. Sẽ được đề cập trong bài 15. Những thuộc tính như name=, id= không được đề cập trong đây vì chúng dùng cho các Scripting Language. Cũng không mấy khó để dùng khi bạn đã nhuần nhuyễn HTML rồi đi tiếp qua CSS, Javascript trước khi vào Server-Side Scripting và Advanced Programming. BÀI 14 : Tạo biểu bảng trong HTML-Phần 4 Thuộc tính COLSPAN="" dùng để mở rộng một ô dữ liệu trong một cột bằng với số ô dữ liệu trong cột đó. Thuộc tính ROWSPAN ="" dùng để mở rộng 1 ô dữ liệu trong một hàng bằng với với số hàng chứa các ô còn lại. Hãy xem bảng bên dưới-Ví Dụ 1: BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 METHOD OF PAYMENT. Click here to see Monthly transaction statement. Visa 000000 000000 000000 MasterCard 000000 000000 000000 Others 000000 000000 000000 Total 000000 000000 000000 Click here to see checks deposited. Personal check 000000 000000 000000 Business check 000000 000000 000000 Others 00000 00000 00000 Total 00000 00000 00000 EMPLOYEE PAYROLL. Click here for issued checks. EMP 1 000000 000000 000000 EMP 2 000000 000000 000000 EMP 3 000000 000000 000000 Total 000000 000000 000000 TAXABLE INTEREST Net business Interest. 000000 000000 000000 Và đây là một ví dụ khác- Ví dụ 2: BẢNG GIÁ THÁNG 3 NĂM 2006 Tên thiết bị Số lượng Giá Thành tiền 000115 Dĩa cứng 10 $120 $1200 000116 RAM 15 $50 $750 000117 CPU 5 $180 $900 Total $2850 I-Thuộc tính Colspan: Colspan="số ô trong cột"Thuộc tính này được đặt trong Thẻ .1-Cú pháp:Trong đó: Colspan= :Khai báo sẽ mở rộng bao nhiêu cột so với số ô còn lại trong cột đó undefinedgiá trị là số). Ví dụ: Chúng ta hãy xem ví dụ số 2:Trong ví dụ 2 chúng ta dùng một bảng có độ rộng =500pixels, align="center", cellspacing="2", cellpadding="3", border="1". Chúng ta viết như sau: Bắt đầu một hàng, viết:Đến đây, như ví dụ minh họa 2, bạn thấy rằng hàng này chỉ chứa một ô dữ liệu, BẢNG GIÁ THÁNG 3 NĂM 2006. Như vậy có thể xem đây là một cột. Đếm số cột trong các hàng còn lại và lấy hàng có số cột nhiều nhất. Trong ví dụ này là 5 cột. Như vậy để ô này trải rộng bằng 5 cột so với hàng đó, ta viết như sau: BẢNG GIÁ THÁNG 3 NĂM 2006Đóng hàng này, viết:Như vậy, chúng ta có đọan Codes cho hàng đầu tiên như sau:BẢNG GIÁ THÁNG 3 NĂM 2006Trong hàng thứ 2, cột đầu tiên Tên thiết bị có độ rộng bằng 2 ô dữ liệu ở hàng dưới là ô mã số và thiết bị(cùng trong một cột). Do đó chúng ta viết, bắt đầu một hàng mới: Bắt đầu một ô, ô này mở rộng bằng 2 ô nhỏ trong cùng một cột so với hàng dưới: Tên thiết bịChúng ta viết tiếp các ô còn lại và đóng hàng này:Số lượngGiáThành tiềnĐến đây chúng ta đã làm xong được 2 hàng trong bảng  BẢNG GIÁ THÁNG 3 NĂM 2006Tên thiết bịSố lượngGiáThành tiềnChúng ta tiếp tục với hàng thứ 3, 4, 5: Vì các hàng này có tổng số cột là 5 nên không có ô nào mở rộng. Do đó chúng ta không dùng Colspan mà viết như sau: Hàng thứ 3:000115Dĩa cứng10$120$1200Viết tương tự cho hàng thứ 4 và 5 nhưng thay thế nội dung dữ liệu trong Ô. Hàng thứ 6: Total Hàng này có 2 ô dữ liệu. Ô đầu tiên là Total có độ rộng bằng 4 ô hàng trên, canh bên phải. Do vậy, ô này phải dùng Colspan=4. Ô thứ 2 bằng với số ô trong cột- chỉ có 1 ô, nên không dùng Colspan. Và ta viết hàng này như sau: Total$2850Cuối cùng để đóng bảng, ta dùng thẻ Và đây là Codes cho bảng của ví dụ 2: BẢNG GIÁ THÁNG 3 NĂM 2006Tên thiết bịSố lượngGiáThành tiền000115Dĩa cứng10$120$1200000116RAM15$50$750000117CPU5$180$900Total$2850 II-Thuộc tính Rowspan: Rowspan="số hàng chứa ô"Thuộc tính Rowspan ="" dùng để mở rộng 1 ô dữ liệu trong một hàng theo chiều cao bằng với với số hàng chứa các ô còn lại. Thuộc tính này được đặt trong Thẻ . Để nắm được cách dùng Rowspan=, chúng ta xem lại ví dụ 1. Ví dụ 1 là một kết hợp sử dụng COLSPAN và ROWSPAN. Bảng này sử dụng các thuộc tính và giá trị như bên dưới: Hãy để ý hàng nhiều ô dữ liệu nhất trong bảng VD 1 là 5 ô, tức bảng này có số cột cao nhất là 5 cột. hàng đầu tiên của bảng:BUSINESS 2ND QUARTER SALES SUMMARY là hàng chỉ có một cột dữ liệu. Và để cột này trải bằng 5 ô dữ liệu trong hàng có số ô dữ liệu nhiều nhất ta viết:BUSINESS 2ND QUARTER SALES SUMMARY.Như vậy chúng ta có được hàng đầu tiên.Trong hàng thứ 2, ô dữ liệu đầu tiên ( Click here to see detailed sales.) có chiều cao bằng 4 hàng gồm chứa ô Month, Gross Sales, Expenses, Total và các ô kế tiếp qua phải... Để mở rộng ô này có chiều cao bằng 4 hàng ta viết như sau: Click here to see detailed sales. Chúng ta tiếp tục viết cho 4 ô còn lại trong hàng này: MonthAPRMAYJUNCho 3 hàng còn lại (Mỗi hàng chỉ có 4 cột) chúng ta viết như sau:Gross Sales000000000000000000Expenses000000000000000000Total000000000000000 Như vậy đến chúng ta được bảng với hàng sử dụng ROWSPAN: BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales.MonthAPRMAYJUNGross Sales000000000000000000Expenses000000000000000000Total000000000000000 Và nếu đến đây bạn đóng bảng bằng cách thêm vào thì bạn có được bảng như minh họa dưới: BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 Nhưng chúng ta phải hòan tất bảng VD 1, vì vậy bạn chưa thể đóng bảng tại đây mà sử dụng cấu trúc viết trong hàng: Click here to see detailed sales.để viết cho hàng METHOD OF PAYEMENT , EMPLOYEE PAYROLL và hàng TAXABLE INTEREST.Hàng cuối cùng dưới TAXABLE INTEREST, chúng ta dùng COLSPAN để mở rộng cột Net business Interest.Cấu trúc như sau:Net business Interest.000000000000000000 Xong, chúng ta đóng bảng này bằng thẻ Và đây là Source Codes cho bảng ví dụ 1: BUSINESS 2ND QUARTER SALES SUMMARY.Click here to see detailed sales.MonthAPRMAYJUNGross Sales000000000000000000Expenses000000000000000000Total000000000000000METHOD OF PAYMENT.Click here to see Monthly TRansaction statement.Visa000000000000000000MasterCard000000000000000000Others000000000000000000Total000000000000000000Click here to see checks deposited.Personal check000000000000000000Business check000000000000000000Others000000000000000Total000000000000000EMPLOYEE PAYROLL.Click here for issued checks.EMP 1000000000000000000EMP 2000000000000000000EMP 3000000000000000000Total000000000000000000TAXABLE INTERESTNet business Interest.000000000000000000 Phần cuối cùng của các bài học về sử dụng bảng là một minh họa sử dụng bảng để Layout một trang WEB. BÀI 15 : Sử dụng Bảng Layout một trang Web Qua bài 12,13,14,15, bạn đã nắm phần lớn các yêu cầu để tạo một bảng và thuộc tính để định dạng bảng. Tuy nhiên, HTML vẫn chưa cho bạn đầy đủ những gì bạn muốn. Để thật sự định dạng bảng theo ý muốn, bạn cần biết cách dùng Ngôn ngữ CSS... Cascading Style Sheet cũng là một ngôn ngữ lập trình Web bởi vì nó cũng có những cú pháp riêng. Phần minh họa dưới đây chủ yếu giúp bạn về cấu trúc, còn về phong cách, cần phải có CSS hỗ trợ (Sẽ đề cập đầy đủ trong giáo trình CSS) và khả năng sáng tạo và thẩm mỹ của bạn.Dưới đây là một bảng minh họa cấu trúc của trang Web theo Phong cách cân đối-Symmetrical style:(truyền thống) Banner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập: Đặt Script ngày tháng năm Trang Chính Giới thiệu Tinhọc Âm nhạc Tiếng Anh Kiến Thức Welcome to My First HTML Page!Đón chào bạn đến với TRang Web đầu tiên của tôi! Truyện dài Truyện ngắn Truyện cười Thơ Liên lạc Đăng ký All rights reserved-Copyrighted by Me. Và đây là Source Codes để tạo bảng trên: My First PageBanner 1 Banner 2 Banner 3 Đặt Script giờ đăng nhập:Đặt Script ngày tháng năm  Trang Chính Giới thiệu Tinhọc Âm nhạc Tiếng Anh Kiến ThứcWelcome to My First HTML Page!Đón chào bạn đến với TRang Web đầu tiên của tôi! Truyện dài Truyện ngắn Truyện cười Thơ Liên lạc Đăng ký All rights reserved-Copyrighted by Me. Đến đây, bạn đã nắm được cơ bản cách dùng bảng để định dạng một trang Web. Bạn có thể thay đổi độ rộng của bảng =100%. Bạn cũng có thể thêm nhiều thành phần khác để trang thật sự theo ý muốn. Bạn thực hành thật nhiều lần để nắm cách sử dụng. Sau đó bạn chạy đọan Code mới trong trình duyệt, bạn thấy có một khỏang cách giữa các thực đơn của trình duyệt WEB (IE chẳng hạn) và trang web của bạn. Lý do là chúng ta chưa xác định khỏang cách của trang với biên trình duyệt. Trong bài 17, chúng ta sẽ học định dạng cho thành phần BODY(phần 2) để xác định khỏang cách này. Bài 18, chúng ta học các liên kết đến các tập tin html khác hoặc trang Web khác và kích họat chương trình gửi mail. Đây chỉ là những phần đơn giản của HTML. Ngòai ra, sử dụng Iframe, Frame và tạo Form trong HTML là những phần quan trọng mà chúng ta cũng sẽ lần lượt khám phá. HTML Tags Bài này giới thiệu một số HTML Tags và các thuộc tính của chúng . TAGS ATTRIBUTES DESCRIPTION: MÔ TẢ Để tạo liên kết hoặc chỉ mục liên kết(anchor) href= Chỉ định đến một địa chỉ URL hoặc một chỉ mục liên kết(anchor) hoặc địa chỉ e-mail... name= Đánh dấu một vùng mà liên kết chỉ mục sẽ nhảy đến (thường là trong 1 trang). target= Chỉ định 1 cửa sổ hoặc một khung để nội dung trang liên kết sẽ hiển thị. (sử dụng nhiều với frameset) accesskey= Thêm phím bấm nhanh cho liên kết đến chỉ mục. event Dùng để kích 1 script. tabindex Xác định thứ tự phím tab đi qua trong liên kết hoặc thành phần của form. Giải thích nghĩa của các ký tự viết tắt. title= Nội dung giải thích. Giải thích nghĩa của các ký tự viết tắt bắt đầu bằng chữ đầu: Ví dụ NATO, WHO, WTO. title= Nội dung giải thích. Định dạng địa chỉ mail của người thiết kế Web, thường cho chữ nghiêng, xuống dòng tự động. Chèn chương trình Java Applets. code Xác định địa chỉ URL của mã applets width, height Xác định chiều rộng và cao của Applets. area Xác định tọa độ của bản đồ ảnh.. accesskey= Thêm phím bấm nhanh đến một vùng riêng biệt trên bản đồ. alt= Cung cấp thông tin về một vùng. coords= Cung cấp tọa độ của một vùng trên bản đồ. href= Link đến một địa chỉ URL từ một vùng trong bản đồ ảnh. nohref= Đánh dấu một vùng trên bản đồ không có liên kết đến địa chỉ URL shape= Xác định hình dạng của một vùng trên bản đồ (circle, rect và poly). target= xác định cửa sổ hay khung mà file liên kết sẽ hiển thị trong đó. Làm chữ đậm lên. base Xác định địa chỉ URL liên quan trọng frame. href= Xác định địa chỉ URL sẽ được dùng để truy cập các địa chỉ URL liên quan. target= Xác định đích cho các liên kết trên trang hiện tại. basefont Xác định chuẩn font cố định cho chữ. color= Xác định màu cố định cho chữ. face= Xác định font cố định cho chữ. size= Xác định kích thước cố định cho chữ. bgsound Lồng nhạc nền vào trang. loop= Xác định số lần mà bản nhạc sẽ lặp lại. src= Xác định địa chỉ nguồn của bản nhạc. Làm cho chữ lớn hơn so với chữ xung quanh. Làm cho chữ ẩn hiện, nhấp nháy. Tạo một đọan trích dẫn thụt lề. Khỏang cách thụt lề tùy vào số tag mở/đóng blockquote. cite= Ghi địa chỉ nguồn trích dẫn (nếu có). Khai báo phần nội dung chính(phần thân) của trang web. Những gì nằm giữa tag mở/đóng body sẽ hiển thị trên trình duyệt. alink= Xác định màu của một link đang tham khảo đến, đang họat động(active link). link= Xác định màu của một link chưa được kích họat.(new link). vlink= Xác định màu của một link đã được viếng thăm (visited link). background= Xác định ảnh nền cho tòan trang. bgcolor= Xác định màu nền cho tòan trang. leftmargin= Xác định lề trái (là khỏang cách từ biên trái màn hình đến lề trái của trang web) toptmargin= Xác định lề trên (là khỏang cách từ biên trên màn hình đến lề trên của trang web). text= Xác định màu của chữ. br Dùng để xuống hàng (break a line) clear Ngừng việc xuống hàng tự động. button Dùng để tạo nút bấm (button). Được sử dụng nhiều trong Form-rất quan trọng. accesskey= Thêm phím bấm nhanh cho nút. disabled Làm cho button có màu xám cho đến khi một sự kiện khác xuất hiện . event Liên kết button với một script. (Event handler) name= Xác định tên của button để tham khảo sự kiện trong button (trong một hàm javascript). type= Dùng button như một thành phần của Form. Thường trong input type=button value= value= Giá trị hiển thị của button. Ví dụ: caption Dùng để tạo phụ đề (chú thích) cho bảng align= Dùng để xác định vị trí của caption trên hay dưới bảng. Dùng canh giữa chữ, ảnh và các thành phần khác Đánh dấu chữ là trích dẫn. Làm chữ nghiêng. Nếu là giá trị, cite dùng để chỉ đường link đến nguồn trích dẫn. Xem <code</code Đánh dấu chữ là mã máy tính. col Kết hợp các cột trong một bảng thành một nhóm không có cấu trúc align= Xác định sự ngay hàng của cột trong nhóm cột. valign= Xác định sự ngay hàng(theo chiều dọc) của cột trong nhóm cột span= Xác định số cột trong một nhóm cột. width= Xác định độ rộng của cột. colgroup Để kết hợp các cột trong một bảng thành một bảng có cấu trúc align= Xác định sự ngay hàng của cột trong nhóm cột.. valign= Xác định sự ngay hàng(theo chiều dọc) của cột trong nhóm cột span= Xác định số cột trong một nhóm cột. width= Xác định độ rộng mặc định cho các thành phần col đi kèm.. dd Đánh dấu một định nghĩa trong danh sách Hiển thị chữ với một đường gạch giữa như xóa. Như strike hoặc s. Chia trang thành các vùng hợp lý. Dùng nhiều trong DHTML và CSS. align= Canh biên trái, phải, giữa một vùng được chia . class= Cấp một tên cho mỗi class của các vùng phân chia. id= Cấp 1 tên duy nhất cho một vùng phân chia riêng biệt. dl Tạo một danh sách định nghĩa. dt Đánh dấu một thuật ngữ sẽ được định nghĩa trong danh sách. Làm cho chữ nghiêng.Tương tự i. embed Chèn file phim, nhạc và trang web. align= Canh lề bộ điều khiển. autostart= Khởi động file nhạc, hay phim tự động khi được nạp vào. Giá trị: True hoặc False controls= Dùng để hiển thị các nút điều khiển trên bộ điều khiển. loop= Xác định số lần mà file phim hay nhạc sẽ lặp. src= Xác định nguồn (địa chỉ URL) của file phim hay nhạc. width=          height= Xác định kích thước của bộ điều khiển. fieldset Nhóm một tập hợp các thành phần của form lại với nhau. font Dùng để thay đổi kích thước chữ, font chữ và màu chữ. color= Xác định màu chữ. face Xác định lọai font chữ. size Xác định kích thước chữ. Dùng để tạo một đơn với các ô trống để người dùng điền vào nội dung cần thiết. action= Cung cấp địa chỉ URL của file xử lý đơn. (CGI Scripts chẳng hạn) enctype Để upload các tập tin theo định dạng cho phép. method= Xác định phương pháp mà đơn sẽ được xử lý. frame Để tạo khung trong tập hợp khung. border= Xác định độ dày của của viền quanh khung. bordercolor= Xác định màu của viền. frameborder= Xác định hiển thị hay giấu viền quanh khung. framespacing= Thêm khỏang trống vào giữa các khung. longdesc= Liên kết đến một tài liệu có nhiều thông tin. name= Đặt tên cho một khung để có thể dùng làm target cho file trong liên kết. noresize Không cho phép người dùng thay đổi kích thước của khung. marginwidth=            marginheight= Xác định lề trái phải, trên dưới của khung. scrolling= Để hiển thị hay giấu thanh cuộn của khung. src= Xác định địa chỉ URL của file đầu tiên hiển thị trong khung. target= Xác định khung (với tên) nào mà file trong một liên kết sẽ mở vào đó. title= Chỉ định mục đích của khung. Xác định một tập hợp khung . border= Định độ dày của viền quanh khung. bordercolor= Định màu cho viền khung. cols= Định số khung và kích thước khung. frameborder= Để hiển thị hay giấu viền khung. framespacing= Để thêm khỏang cách giữa các khung. rows= Để xác định số khung và kích thước các khung. h1,h2,h3,h4,h5,h6 Dùng để tạo tiêu đề cho văn bản align= Canh biên tiêu đề Bắt đầu và kết thúc tạo phần đầu của trang là nơi chứa title, meta, link, script tag. Dùng để tạo đường kẽ ngang. align= Canh biên cho đường kẽ. noshade Hiển thị đường kẽ không có bóng mờ. size= Xác định độ lớn của đường kẽ. width= Xác định độ dài của đường kẽ. color= Xác định màu của đường kẽ. Bắt đầu và kết thúc một trang tài liệu viết bằng HTML. Hiển thị chữ nghiêng. Bắt đầu và kế thúc một Inline frame. align= Canh biên Inline frame. frameborder= Hiển thị hoặc giấu viền. height= Xác định chiều cao của iframe. width=, height= Xác định kích thước của Iframe. name= Đặt tên của Iframe để dùng cho thuộc tính target. scrolling= Hiển thị hoặc giấu thanh cuộn src= Xách định địa chỉ URL của trang đầu tiên. img Chèn ảnh vào trang HTML. align= Canh biên cho ảnh. alt= Hiển thị dòng văn bản thay thế trường hợp ảnh không có. border= Xác định độ dày của viền, nếu có. hspace,vspace Xác định khỏang cách trái phải, trên dưới của ảnh. src= Xác định địa chỉ nguồn của ảnh. usemap= Xác định bản đồ ảnh sẽ được dùng với ảnh được tham chiếu. width=, height= Xác định kích thước của ảnh, giúp ảnh tải nhanh hơn. input Tạo các thành phần cho Form. accesskey= Thêm phím bấm nhanh cho thành phần. align= Canh biên cách thành phần. checked Đánh dấu một nút radio hoặc hộp check mặc nhiên. disabled Vô hiệu các thành phần của Form cho đến khi một sự kiện xảy ra. event handler= Kích một sự kiện như Onclick=, Onchange=. maxlength= Xác định số chữ cao nhất có thể nhập vào thành phần Form. name= Tên của thành phần mà dữ liệu sẽ được thu thập khi tham chiếu. size= Xác định độ rộng của hộp Text hoặc Password. src= Xác định nguồn của ảnh đang họat động. readonly Chống thay đổi nội dung trong form từ khách viếng thăm. tabindex Xác định thứ tự mà phím Tab sẽ di chuyển qua các thành phần trong Form. type= Xác định lọai thành phần của Form. value= Xác định giá trị của thành. ins Đánh dấu chữ chèn vào với gạch dưới-Dùng để gạch dưới. TAGS/ ATTRIBUTES DESCRIPTION: MÔ TẢ kbd Đánh dấu chữ bàn phím. label Gán nhãn cho thành phần của Form. for= Xác định thành phần nào trong form sẽ được label. layer Định vị thành phần. legend Gán nhãn cho filedset. align= Canh biên cho lời giải thích. li Tạo bảng mục lục-danh sách. type= Xác định ký tự nào bắt đầu danh sách. value= Xác định giá trị đầu tiên của mục đầu tiên trong danh sách. link Tạo bảng mục lục-danh sách. href= Xác định địa chỉ nguồn của trang CSS. media= Lưu ý mục đích của trang CSS. title= Gán nhãn thay thế cho trang CSS. type= Lưu ý lọai MIME của trang CSS rel= Xác định trang CSS là chính hay trang thay thế. map Tạo bản đồ ảnh hướng khách hàng name= Đặt tên cho bản đồ để tham chiếu sau đó. marquee Tạo chữu chạy. behavior Điều khiển việc di chuyển của chữ(scroll, slide,alternate). direction Điều khiển hướng di chuyển của chữ: trái qua phải hay phải qua trái. loop Xác định vòng lặp. scrollamount Xác định khỏang cách giữa các lần lặp. scrolldelay Xác định khỏang thời gian giữa mỗi lần lặp. meta Tag dùng để khai báo cho search engine. content= Thêm thông tin về trang web. http-equiv Tạo nhảy đến trang khác, thiết lập ngôn ngữ cho các script, khai báo encode. name Khai báo thêm thông tin về trang Web nobr Chống xuống hàng. Các ký tự sẽ nằm trên cùng 1 hàng. noframes Cung cấp các thay thế cho frames. noscript Cung cấp các thay thế cho script. object Nhúng các đối tượng vào trang Web. align= Canh biên đối tượng. border= Tạo hoặc giấu viền quanh đối tượng. classid= Xác định lọai đối tượng được nhúng codebase Xác định địa chỉ URL cơ sở của đối tượng nguồn. data Xác định nguồn của tập tin phim được nhúng. hspace, vspace Xác định khỏang trống xung quanh đối tượng. name Xác định tên của đối tượng. standby Hiển thị đọan tin khi đối tượng đang đựơc tải. type Lưu ý đối tượng là lọai MIME. width,height Xác định kích thước của hộp đối tượng. ol Tạo danh sáchc 1o thứ tự type= Xác định ký tự bắt đầu trong mỗi mục. start Xác định giá trị đầu tiên của mục đầu tiên. optgroup Chia thực đơn thành thực đơn con disabled Tắt khả năng lưa chọn thực đơn cho đến khi một sự kiện xuất hiện. label Xác định cách chọn lựa hiển thị trên thực đơn. option Tạo thực đơn các chọn lựa kiểu drop-down trong đơn (Form). disabled Tắt khả năng chọn cho đến khi một sự kiện xuất hiện. label Xác định cách chọn lựa hiển thị trên thực đơn. name Đặt tên cho chọn lựa. selected Xác định một chọn lựa được chọn mặc định. value Xác định giá trị đầu của chọn lựa trong thực đơn. P Tạo một đọan văn bản align Canh biên cho đọan văn bản. param Thiết lập thuộc tính cho một đối tượng name= Xác định lọai đối tượng. value= Thiết lập giá trị của thuộc tính được đặt tên. pre Hiển thị chữ theo định dạng trước. q Trích dẫn một đọan tin ngắn. cite Cung cấp địa chỉ URL của nguồn trích dẫn. s như strike Hiển thị chữ với một đường gạch giữa nhu xóa. Như strike hoặc del. samp Hiển thị chữ theo font chữ monospace. script Chèn các đọan script tự động vào trang. charset Xác định bộ ký tự mà script được viết. language Xác định ngôn ngữ mà đọan script viết. src Tham chiếu vị trí của script.(địa chỉ URL của script). type Xác định ngôn ngữ để script mà đọan script được viết. select Tạo một thực đơn trong Form. disabled Tắt khả năng cho đến khi một sự kiện xuất hiện. name= Xác định dữ liệu được thu thập bởi thực đơn. multiple Cho phép người dùng chọn nhiều lựa chọn cùng lúc. size Xác định số mục sẽ hiển thị trong cửa sổ thực đơn. small Giảm kích thước chữ so với kích thứơc của chữ xung quanh. span Tạo phong cách riêng cho chữ với CSS. class Đặt tên một phong cách riêng để tham chiếu. id Xác định những thành phần riêng biệt của HTML. Id thường được dùng nhiều trong DHTML. strike Viết tắt là s. Dùng để hiển thị đường gạch giữa chữ. strong Dùng để làm đậm chữ (như tag ). style Dùng để chèn đọan mã CSS vào trang. Xem phần CSS. media Xác định mục đích của CSS. type Xác định lọai MIME của CSS. sub Dùng để hạ thấp chữ. Ví dụ như H2O sup Dùng để nâng cao chữ. Ví dụ như (a+b)2=a2+2ab+b2 table Tạo biểu bảng trong tài liệu HTML. align= Xác định vị trí của bảng trong trang (trái, phải hoặc giữa). background= Xác định ảnh làm nền cho bảng. bgcolor Xác định màu nền cho tòan bảng. border Xác định độ rộng của khung. bordercolor Xác định màu cho viền bảng. bordercolordark Xác định màu đậm hơn cho viền. bordercolorlight Xác định màu lợt hơn. cellpadding= Xác định khỏang cách giữa nội dung của các ô trong bảng với viền bao quanh. cellspacing= Xác định khỏang cách giữa các ô trong bảng. frame Hiển thị viền bên ngòai. height Xác định độ cao của bảng. width Xác định độ rộng của bảng. rules Hiển thị viền ở trong. tbody Xác định phần body của bảng. align Canh biên nội dung của body trong bảng. td; th Tạo các ô hoặc ô tiêu đề riêng biệt trong bảng. align, valign Canh nội dung trong ô theo chiều ngang hoặc đứng. bgcolor= Chọn màu cho ô. background= Chèn ảnh làm nền cho ô. char Canh nội dung của ô phù hợp với ký tự. colspan Mở rộng một theo số cột trong bảng. Ví dụ bảng có 4 cột và có một dòng chỉ là một cột thì dùng colspan=4 cho dòng đó. rowspan Mở rộng một ô hơn một dòng. Ví dụ bên phải của bảng là 5 ô và ô bên trái có độ cao bằng 5 ô bên phải thì khai báo ô bên trái là rowspan=5 nowrap Hiển thị nội dung trong ô trên một dòng. width, height Xác định độ rộng và cao của ô. textarea Tạo một hộp chứa văn bản. Thường nội dung do người dùng nhập vào. Sử dụng nhiều với Form. accesskey Thêm phím nóng cho vùng text. disabled Làm chữ có màu xám lợt cho đến khi một sự kiện xuất hiện. Sự kiện được kích bởi một bộ qủan lý sự kiện như onClick, onkeydown... name Xác định tên cho dữ liệu sẽ được tham chiếu trong ô textarea khi xử lý với chương trình xử lý Form như CGI. readonly Khóa nội dung trong ô textarea để chỉ đọc và chép, không xóa hoặc thay đổi được. rows, cols Xác định bao nhiêu hàng và cột trong ô văn bản. width, height Xác định độ rộng và cao của ô. tfoot, thead Xác định tiêu đề trên dưới của bảng. align, valign Canh tiêu đề của ô. title Đặt tên tiêu đề của trang để hiển thị trên browser cũng như cho search Engine tìm trang. tr Tạo hàng trong bảng. Trong một bảng có một hoặc nhiều hàng. Mỗi một hàng có một hoặc nhiều td (table data) được xem là mỗi ô (cell) trong bảng. Không giống như chương trình bảng tính có nhiều cột và hàng. Trong HTML các td trong một hàng sẽ tạo nên cột. align, valign Canh nội dung trong hàng theo chiều ngang hoặc đứng. bgcolor Xác định màu nền cho hàng background Xác định ảnh nền cho hàng. tt Hiển thị chữ monospace. u Hiển thị chữ gạch dưới (underline). ul Tạo một unordered list (danh sách không theo thứ tự). type Chọn một ký tự bắt đầu một mục trong danh sách. Ký tự có thể là : square (vuông), circle(tròn) và disc (tròn đen). wbr Tạo một hàng trống tùy ý.