Xem mẫu

  1. Chương 2 HTML VÀ CÁC THẺ CƠ BẢN I. GIỚI THIỆU VỀ HTML HTML là ngôn ngữ để xây dựng trang web, nó mô tả cách thức một trang web hiển thị như thế nào trong một trình duyệt. HTML là một ngôn ngữ mô tả tài liệu, được hình thành từ ngôn ngữ mô tả tài liệu tổng quát SGML (Standard Generalized Markup Language) do hãng IBM đề xướng từ năm 1960. HTML không phải là một ngôn ngữ lập trình, nó cung cấp các chỉ thị định dạng để phục vụ cho việc trình bày văn bản và các đối tượng khác như hình ảnh, video, các plug-in... Để tham khảo tất cả các thẻ của phiên bản HTML 4.01, là phiên bản HTML mới nhất được chuẩn hóa vào năm 1999 bởi W3C, có thể tìm trong hai địa chỉ có uy tín sau : Trang World Wide Web Consortium HTML Specifications (đặc tả ngôn ngữ HTML của tổ chức W3C): http://www.w3.org/TR/html401/ Trang Web của W3Schools, tại web site này ta có thể tìm thấy tất cả các hướng dẫn tự học về thiết kế web đựa trên nền tảng của HTML, xHTML, XML và WAP: http://www.w3schools.com/html/ Xu thế phát triển của các ngôn ngữ trên Web đang dần nghiêng về ngôn ngữ XML (eXtensible Markup Language), cũng là một ngôn ngữ con của SGML. XML là một ngôn ngữ mô tả cấu trúc dữ liệu trên Web, cho phép người sử dụng xây dựng các thẻ riêng của mình, một trong những ứng dụng quan trọng của XML là chuyển đổi dữ liệu giữa các ứng dụng để trao đổi thông tin trên nền của Web, khác với HTML là ngôn ngữ trình bày dữ liệu trên Web. II. CẤU TRÚC MỘT TƯ LIỆU HTML Tư liệu HTML (HTML Document) là một tệp tin văn bản mã ASCII được viết bằng ngôn ngữ HTML, tệp tin tư liệu HTML được gọi là mã nguồn (source code) của một web page. Tệp tin tư liệu HTML có phần mở rộng .htm hay .html (Các webserver dùng hệ điều hành UNIX bắt buộc phần mở rộng tư liệu HTML phải là .html). Phiên bản HTML hiện nay là HTML 4.01 do W3C xây dựng đặc tả, tuy nhiên có một vài thẻ một trong hai trình duyệt IE và NN không sử dụng. II.1. Thẻ HTML Các lệnh của HTML được gọi là các thẻ (tag), các thẻ báo cho trình duyệt web cần phải làm điều gì ngoài việc thể hiện văn bản lên màn hình. Các thẻ gồm các phần tử đặt trong cặp dấu < và >. Có hai loại thẻ: thẻ chứa (container tag)và thẻ rỗng (empty tag). Các lệnh của HTML có thể viết bằng ký tự hoa hoặc thường đều được. 10
  2. II.1.1. Thẻ chứa Gồm một phần tử thẻ mở (openning tag) và một phần tử thẻ đóng (closing tag). Thẻ mở bắt đầu bằng dấu < và tiếp ngay sau là tên thẻ, các thuộc tính được cách nhau bằng một khỏang trắng và cuối cùng là dấu >. Thẻ đóng tương tự như thẻ mở chỉ khác một chỗ có dấu / nằm giữa dấu < và tên thẻ. Các dữ liệu được đặt giữa thẻ mở và thẻ đóng. Các thuộc tính của một thẻ là tùy chọn, được khai báo trong thẻ mở và thuộc tính được bao lại trong cặp dấu nháy kép ("). Cú pháp tổng quát như sau: Nội dung Các ví dụ : 1) Trang Web đầu tay Thẻ mở là , dữ liệu là Trang Web đầu tay, thẻ đóng là , chú ý rằng thẻ TITLE không có thuộc tính. Thẻ này báo cho trình duyệt hiển thị dòng Trang Web đầu tay trên thanh tiêu đề của cửa sổ trang web. 2) Khoa Tin hoc Thẻ mở là , các thuộc tính và giá trị được gán cho mỗi thuộc tính được khai báo bên trong thẻ mở là : thuộc tính color và giá trị blue, thuộc tính size và giá trị 2; dữ liệu là Khoa Tin học; thẻ đóng là . Thẻ này báo cho trình duyệt hiển thị dòng Khoa Tin học trên trang web với font “.Vn3DH”, cở 2 (tương đương với font size 10pt), màu xanh. II.1.1. Thẻ rỗng Thẻ rỗng là thẻ chỉ có thẻ mở mà không có thẻ đóng. Các ví dụ : 1) , thẻ này báo cho trình duyệt hiển thị một đường kẻ ngang (horizontal line) trên trang web 2) , thẻ này báo cho trình duyệt hiển thị logo của Đại học Đà Nẵng, với đường viền cở 1pt, chiều cao ảnh 133pt, chiều rộng ảnh 147pt. II.2. Cấu trúc một tư liệu HTML Xem xét một tư liệu HTML sau đây ( trích trang chủ của mạng EDU.NET, Bộ Giáo dục&Đào tạo ) Education and Training Network .... 11
  3. .... . Trình duyệt sẽ bỏ qua mà không thông dịch nội dung này. III. MỘT SỐ THẺ CƠ BẢN III.1. Các thẻ trong phần đầu của tư liệu HTML III.1.1. Thẻ Thẻ này dùng để ghi thông tin về phiên bản HTML được áp dụng trong trang Web, thường đây là dòng đầu tiên của tư liệu HTML. III.1.2. Thẻ Đây là loại thẻ chứa, dùng để thiết lập tiêu đề của tư liệu HTML, khi trình duyệt hiển thị một trang web, tiêu đề sẽ xuất hiện trên Title bar của cửa sổ trang web. Ví dụ: Đại học Đà Nẵng .... III.1.2. Thẻ Đây là loại thẻ rỗng, hỗ trợ việc bổ sung thông tin về trang web, thẻ này cho phép ta tự do đặt nhiều thông tin vào liệu HTML. Các thuộc tính của thẻ này xác định một cặp name/value kết hợp với tư liệu HTML, trong nhiều trường hợp, 12
  4. các giá trị này phục vụ cho web server dùng trong việc xác định kiểu nội dung để gởi đến trình duyệt. Sau đây là những cách dùng thông dụng: Thẻ này quy định bộ mã ký tự Unicode Tiếng việt trong trang Web Thẻ này xác định thời gian hết hiệu lực của trang web là ngày 31.12.2005 Với hai thẻ này, web server sẽ gởi đến browser phần HTTP header có nội dung bao gồm các thông tin: Content-type : text/html Charset : utf-8 Expires : 31 Dec 05 Thẻ này cung cấp các từ khóa cho các Search Engin tìm thấy trang web, tuy nhiên nhiều Search Engin có cơ chế tìm kiếm khác, không phụ thuộc vào keywords. Thẻ này cho phép ta đặt liên kết trực tiếp đến một địa chỉ khác, sau khoảng thời gian 5 giây trình duyệt sẽ chuyển sang đọc trực tiếp trang web có địa chỉ nằm trong tham số URL. Thẻ này báo cho trình dụyêt cứ 10 giây thì làm tươi trang web lại một lần III.1.3. Thẻ Đây là thẻ rỗng, gồm các thuộc tính: HREF : chỉ định địa chỉ cơ bản cho các mối liên kết là địa chỉ gốc để truy cập các địa chỉ khác. Ví dụ TARGET : chỉ định các frame mặc nhiên, hay một cửa sổ để nạp các đối tượng liên kết, các giá trị của thuộc tính TARGET: tên cửa sổ do người sử dụng định nghĩa (hay tên frame), _blank , _self, _top và _parent. (Chúng ta sẽ nghiên cứu kỹ cách sử dụng thuộc tính này trong chương II) Ví dụ: , thẻ nầy chỉ định mọi đối tượng liên kết được nạp trong một cửa sổ mới. III.1.4. Thẻ Đây là thẻ chứa, dùng để chứa các hàm viết bằng ngôn ngữ kịch bản JavaScript, Jscript hay Vbscript. Thuộc tính này có thuộc tính LANGUAGE chỉ ra ngôn ngữ kịch bản được sử dụng trang trang web. Ví dụ: 13
  5. // Khai báo các biến dùng chung, hằng số ... function Banner(url,pic,pos) { // Các lệnh của hàm ... } // Hàm khác ... III.2. Các thẻ trong phần thân của tư liệu HTML II.2.1. Thẻ Đây là thẻ chứa, dùng để bao hàm các thẻ khác trong phần thân của tư liệu HTML. Các thuộc tính: BGCOLOR : xác định màu nền của trang web, màu nền có thể dùng tên  màu hay một giá trị hexa xác định màu trong sơ đồ RGB. Ví dụ "BLUE" hay "#0000FF".  TEXT : xác định màu văn bản Hai thuộc tính trên ít khi được sử dụng, ta dùng kỹ thuật CSS để thay thế trong việc định dạng trang web hiệu quả hơn.  BACKGROUND : xác định ảnh nền của trang web  TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, BOTTOMMARGIN : xác định lề của trang Web, đơn vị tính là pixel Ví dụ: III.2.2. Các thẻ HEADING Đây là thẻ chứa, dùng để xác định tiêu đề dòng trong trang web, tương tự như các Heading trong Microsoft Word. Có 6 cấp độ với độ lớn giảm dần từ 1 đến 6 tương ứng với sáu thẻ , , , , và, thuộc tính ALIGN có các giá trị left, center, right và justify; mặc nhiên là left. Ví dụ: I. Chương 1 III.2.3. Các thẻ ngắt đoạn Để trang web được dễ dọc, trình bày hợp lý cần có các ngắt đọan để phân biệt các đọan văn bản (paragraph) khác nhau. Thẻ : Sử dụng cặp thẻ và để chứa một đọan văn bản. Khi gặp 14
  6. thẻ này trình duyệt sẽ tạo ra một dòng mới và tách biệt hai đọan liên tiếp bằng một dòng trống. Thuộc tính của thẻ : ALIGN, các giá trị : "left", "right", "center" và "justify" Thẻ : đây là thẻ rỗng để ngắt dòng (break line) Ví dụ: Hello world! Cac the ngat doan Paragraph 1 .... Paragraph 2 .... Su dung the BR III.2.4. Các đoạn văn bản được định dạng sẵn Thẻ PRE : đây là thẻ chứa, nhằm hiển thị một đọan văn bản mà người sử dụng muốn giữ các khoảng cách, xuống dòng như mong muốn (không sử dụng ký tự &nbsp và thẻ ). Ngoài ra, ta có thể sử dụng các thẻ khác để định dạng trang web. Ví dụ: Định dạng bởi thẻ PRE HTML Welcome! Thẻ : sử dụng giống như thẻ , nhưng có sự khác biệt : Các thẻ HTML khác không có hiệu lực trong paragraph nằm trong cặp thẻ Trình duyệt hiển thị văn bản theo font mặc đinh Thẻ đóng không tạo xuống dòng Không sử dụng cho table 15
  7. Ta thường dùng thẻ trong việc minh họa nội dung các thẻ HTML trong trang Web mà không dùng các ký tự đặc biệt, các tiện ích tạo source HTML dùng kỹ thuật này để cho phép người sử dụng copy các đọan mã HTML và paste vào tư liệu HTML của mình. Ví dụ: Structure of HTML Document --> Tieu de III.2.5. Thẻ Đây là thẻ rỗng, dùng để vẽ một đường thẳng phân cách các đọan văn bản với nhau. Các thuộc tính của thẻ : Size = "n" : xác định độ dày của đường kẻ, tính bằng pixel Width ="n": xác định chiều dài của đường kẻ, tính bằng pixel hay % độ rộng màn hình. Align = "left" | "center" | "right" : căn lề của đường kẻ. NoShade : Không đổ bóng mờ Ví dụ : Minh hoa tac dung cua the HR Hypertext Markup Language HTML là tập con của ngôn ngữ SGLM ... III.2.6. Các thẻ định dạng khác Ngôn ngữ HTML cung cấp các thẻ để dạng cho một trang Web như các trình sọan thảo văn bản khác. Các thẻ dưới đây là thẻ chứa và không có thuộc tính. Tên thẻ Tác dụng Chữ đậm (Bold) Chữ nghiêng (Italic) 16
  8. Chữ gạch dưới (Underline) Chữ gạch giữa Chữ có kích thước nhỏ hơn Chữ có kích thước lớn hơn Chỉ số dưới Chỉ số trên Văn bản nhấn mạnh và chữ nghiêng Văn bản nhấn mạnh hơn và chữ đậm Đọan trích dẫn , chữ nghiêng Căn giữa các đọan văn bản III.2.7. Danh sách Một trong những tính năng hữu ích của HTML là khả năng tạo các danh sách (list) để tổ chức thông tin. Có 3 loại danh sách : danh sách không có thứ tự (unordered lists ) : danh sách có thứ tự (ordered lists) : danh sách định nghĩa (definition lists ) Thẻ và : Các thuộc tính là TYPE để quy định cách hiển thị của danh sách, các giá trị của thuộc tính TYPE : "a" : đánh dấu thứ tự bằng chữ thường "A" : đánh dấu thứ tự bằng chữ in hoa "i" : đánh dấu thứ tự bằng chữ i, ii, iii, ... "I" : đánh dấu thứ tự bằng chữ I, II, III, ... "Circle" : đánh dấu thứ tự bằng ký hiệu  "Disc" : đánh dấu thứ tự bằng ký hiệu  "Square" : đánh dấu thứ tự bằng ký hiệu  Mỗi đề mục của danh sách được đánh dấu bởi thẻ , sử dụng thẻ là tùy chọn. Ví dụ : Chuong I Chuong II De muc II.1 De muc II.2 Thẻ : dùng tạo một danh sách định nghĩa hay danh sách từ điển chú 17
  9. giải. Phần thuật ngữ được đánh dấu bằng thẻ và , phần giải thích được đánh dấu bằng thẻ và Ví dụ: Thuat ngu 1 Cac dinh nghia ca chu giai ve thuat ngu 1 Thuat ngu 2 Cac dinh nghia ca chu giai ve thuat ngu 2 III.2.8. Siêu liên kết (Hyperlink) và hình ảnh (Image) Hyperlink là một lệnh cho phép ta đặt một hotspot (điểm nóng) trên một hypertext của trang web dùng để đi đến một địa chỉ (địa chỉ này có thể là một anchor, một tài nguyên trên web) khi click lên hotspot này.  Hình ảnh Để chèn một hình ảnh vào trang web, ta sử dụng thẻ , đây là thẻ rỗng, thẻ này không tạo sự ngắt dòng.Hầu hết các trình duyệt đều có thể hiển thị các kiểu tệp tin ảnh thông dụng, chủ yếu ở các dạng GIF, JPG, JPEG. Cú pháp :
  10.  Tạo và quản lý hyperlink Điểm neo (Anchor, trong FrontPage gọi là Bookmark) xác định một vị trí trong trang web hoặc một một vị trí trong trang web khác mà người sử dụng có thể tham chiếu đến. Để định nghĩa một điểm neo ta sử dụng thẻ với cú pháp như sau: văn bản , phần nội dung giữa cặp thẻ và trong trường hợp này là không nhất thiết Tạo một hyperlink để tham chiếu đến một tài nguyên trên web, ta sử dụng thẻ với cú pháp : Link_text Thuộc tính: TARGET ="Window_name","_blank", "_self", "_top" và "_parent" chỉ nơi hiển thị của trang web chỉ định. Thẻ không tạo sự xuống dòng. Ví dụ : Giả sử ta có tệp sub.htm Về đầu trang Về trang chủ và index.htm (trang chủ) như sau: 19
  11. Xem phần cuối của trang SUB Sử dụng hình ảnh để tạo liên kết bằng cách sử dụng thẻ : Web Course
  12. Thuộc tính COORDS có các giá trị tùy thuộc vào giá trị của thuộc tính SHAPE Đối với hình đa giác thì các giá trị là tọa độ các đỉnh Đối với vòng tròn thì các giá trị là tọa độ tâm và bán kính. Việc xác định tọa độ này khá khó khăn nếu thực hiện không có trợ giúp bằng một trình sọan thảo web trực quan. FrontPage và Dreamwever đều có công cụ tạo bản đồ ảnh rất tốt. Hình bên cạnh minh họa việc tạo một bản đồ ảnh với phần mềm FrontPage 2000. Chú ý : khi sử dụng hình ảnh cần chú ý đến dung lượng tệp tin hình ảnh sẽ ảnh hưởng đến tốc độ truyền dữ liệu và hiển thị hình ảnh và dạng tệp tin hình ảnh mà web hiện đang hỗ trợ (GIF, JPG, JPEG ,BMP, DIB, TIFF, TIP và PCX). III.2.9. Chèn âm thanh và ảnh động vào trang web Hầu hết các trình duyệt không hỗ trợ trực tiếp các tệp tin multimedia như các tệp tin âm thanh, họat hình, video. Để xem hoặc chạy các tệp tin này trong môi trường web cần có các ứng dụng helper. Một số ứng dụng helper như FlashMX của Macromedia, RealOnePlayer của RealNetworks chỉ yêu cầu phần mềm, các sound player đòi hỏi cả phần mềm lẫn phần cứng. Sau đây là một số kiểu tệp tin multimedia mà ta sẽ gặp trên các trang web. Các kiểu tệp tin âm thanh có phần mở rộng: WAV, AU, MID, AIFF Các kiểu tệp tin họat hình, phim có phần mở rộng : AVI, MOV, MPG. Riêng các tệp medie có phần mở rộng .RM, vốn là định dạng của RealNetworks không được hỗ trợ bởi Windows Media Player. Tạo âm thanh nền cho trang web: đây là tính năng chỉ có trong Internet Explorer. Cú pháp : Nhúng tệp multimedia và trang web : ta sử dụng thẻ , đây là loại thẻ rỗng. Thẻ này được IE và NN hỗ trợ. Cú pháp: Các thuộc tính khác : * CONTROL = console | smallconsole | playbutton | pausebutton | stopbutton và volumelever, nhằm xác định form điều khiển tệp media. * WIDTH =”n”, HEIGHT = “h” tính bằng pixel, xác định kích cở của form điều khiển. 21
  13. * AUTOSTART= “false” | “true”, để âm thanh không tự động / tự động phát ra khi truy cập đến trang web được nhúng tệp media. * LOOP =”n” để xác định tệp media được tự động mở ra n lần * LOOP =”true” để mở tệp media cho đến khi ấn nút Stop. Riêng các tệp media thuộc có phần mở rộng .RM có một vài sự khác biệt, nếu sử dụng RealOnePlayer, thẻ EMBED có cú pháp cơ bản: Nếu bạn sử dụng RealPlayer ,thì việc nhúng tệp media vào trang web có kỹ thuật tương đối đặc biệt. Xem thêm thông tin về các phương thức truy cập đến các tệp media (dạng streaming và non-streaming) tại địa chỉ: www.real.com/devzone/library/stream/ hay “Ngôn ngữ HTML 4.0 cho web” , nxb Thống Kê, 2004, trang 242 III.2.9. Chèn các đối tượng ActiveX và Applet  ActiveX Control là một kỹ thuật đặc trưng của Microsoft, cho phép người sử dụng một plug-in để mở một đối tượng nhúng tương thích với công nghệ của Windows, nếu plug-in đó chưa được cài đặt trên client thì nó cho phép người sử dụng download từ web site được chỉ định. Để nhúng một ActiveX Control vào trang web, ta sử dụng thẻ với cú pháp cơ bản:
  14. Nếu client đã cài đặt ứng dụng helper FlashPlayer thì ta có thể sử dụng thẻ như sau: Lưu ý rằng việc xác định các CLASSID khá phức tạp, chúng ta cần đến một trình sọan thảo web trực quan như FrontPage hay Dreamwever.  Appelet là những chương trình nhỏ viết bằng ngôn ngữ lập trình Java có thể chạy trong trình duyệt (với điều kiện trình duyệt hỗ trợ Java; nếu không, ta có thể download và cài đặt phần mềm Java™ Web Start từ www.sun.com/download/). Đây là một trong những kỹ thuật web đặt trưng của Sun hiện nay, điểm nổi bật của nó là tính bảo mật cao. Để chèn một applet vào trang web ta sử dụng thẻ với cú pháp: ...
  15. behavior=type direction= left | right | up | dowm nội dung Các thuộc tính: - Behavior = "scroll" | "slide" | "alternate" ,Kiểu scroll nếu muốn dòng chữ bắt đầu ở cạnh này và biến mất ở cạnh kia của màn hình, kiểu slide nếu muốn bắt đầu ở cạnh này và dừng lại khi dòng chữ chạm vào cạnh kia của màn hình, kiểu alternate nếu dòng chữ bắt đầu ở cạnh này và trượt trở lại khi dòng chữ chạm vào cạnh kia của màn hình. - Direction =" left" | "right" | "up" | "down", Chỉ định phía dòng chữ sẽ hiện ra. Hai giá trị "up" và "down" thích hợp cho việc tạo ra các marque trôi từ dưới lên được viết bằng JavaScript. - Loop ="n" | "infinite", chỉ số lần dòng chữ chạy qua màn hình. - ScrollAmount="n", chỉ số khoảng trống tính theo pixel giữa mỗi lần dịch chuyển của dòng chuyển - ScrollDelay="n", xác định thời gian (phần nghìn giây) trước khi dòng chữ xuất hiện trở lại. Các thuộc tính khác: Height, Width, Hspace, Vspace, Align, Bgcolor cũng được sử dụng Ví dụ : MARQUEE Html Welcome !> 1. Cho biết những thẻ HTML độc quyền của mỗi trình duyệt sau đây: Internet Explorer và Netscape Navigator. 2. Các trang web của báo Tuổi trẻ điện tử (http://www.tuoitre.com.vn) có phần mở rộng là .tto, tại sao trình duyệt vẫn đọc và hiển thị được ? 3. Cho một tệp tin văn bản có tên khoatin.dhsp có nội dung sau: Khoa Tin học Trường Đại học Sư phạm 24
  16. Đây có phải là một tư liệu HTML không? và nội dung hiển thị trên cửa sổ trình duyệt là gì ? 4. Cho biết thẻ HTML quan trọng nhất, không có nó thì không thể xây dựng một website được. 5. Thẻ MARQUEE vốn là một thẻ độc quyền của IE, nhưng đã được NN chấp nhận từ phiên bản 7.1, hãy sử dụng thẻ này để tạo một đọan quảng cáo gồm các dòng trôi dần từ dưới lên trên. 6. Nghiên cứu một trong hai giáo trình điện tử của Trường Đại học Sư phạm Đà Nẵng : Lịch sử địa phương hay Địa lý địa phương, cho biết kỹ thuật tạo menu điều hướng của bộ giáo trình này. 7. Cho biết đặc điểm và cách sử dụng của hai thẻ EMBED và OBJECT trong mỗi loại trình duyệt IE và NN 8. Cho biết kỹ thuật và lĩnh vực ứng dụng của WEBGIS 9. Sử dụng một trong những trình sọan thảo HTML: EditPlus, HTMLKit v.v. để sọan thảo các tệp tin tư liệu HTML. So sánh hiệu quả sử dụng với các trình sọan thảo web trực quan như FrontPage, Dreamwever. 10. Xét một phần tử trên trang web: Tin mới. Thuộc tính href là chữ viết tắt của từ nào? 11. Xem xét home page của BKAV (Bách khoa AntiVirus), có liên kết : DownLoad Bkav, (giả sử trình phòng, diệt virus có tên bkavHome.exe), hãy viết thẻ HTML để khi người sử dụng click vào liên kết sẽ cho phép download tệp chương trình về lưu trữ ở máy client. 12. Xem xét trang web sau đây có tên myfirstpage.html, bạn cần phải đưa lên server những file nào để đảm bảo trang web hiển thị đúng như mong muốn: My First Page My Web page On happy joy I have a page on the web! Click here for other page 13. Tạo một trang web liên kết đến các website các trường đại học trong cả nước. 1. Nhóm tác giả ELICOM; Ngôn ngữ HTML 4.0; Nxb Thống kê, Hà Nội, 2004 2. Nguyễn Đình Hóa, HTML và Thiết kế trang web, Viện CNTT Đại học quốc gia Hà Nôi, 2001 3. Dave Raggett, Arnaud Le Hord; HTML 4.01 Specification; W3C, 2004 4. Aptech Wordwide; HTML, DHTML and JavaScript; 2004 5. http://academ.hvcc.edu/~kantopet/; last updated April, 2005 25
  17. 26
nguon tai.lieu . vn