HTML và các thẻ cơ bản

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): 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: 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.

 

doc17 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2404 | Lượt tải: 0download
Tóm tắt nội dung HTML và các thẻ cơ bản, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
 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:
 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 
Sử dụng hình ảnh để tạo hyperlink
Nhận xét : trong ví dụ trên ta thay cho link text là thẻ để hiển thị hình ảnh dùng làm link đến tệp HTML webcourse.htm.
Sử dụng bản đồ ảnh để tạo các liên kết :
Ta sử dụng một bản đồ Việt Nam (vntourism.gì) để tạo các liên kết đến các trang web hướng dẫn du lịch tại mỗi địa điểm.
<AREA HREF="hnGuide.htm" ALT="Du lich Ha Noi"
 SHAPE="rect"
 CORDS= "28, 18, 138, 64">
<AREA HREF="dnGuide.htm" ALT="Du lich Da Nang"
 SHAPE="circle"
 CORDS= " 90, 104, 25 ">
<AREA HREF="sgGuide.htm" ALT="Du lich tp HCM"
 SHAPE="polygone"
 CORDS= "51,177,144,176,113,210,132, 
 222,71,222,74,215 ">
Một bản đồ ảnh là một hình đồ họa có chứa các liên kết đến các URL khác nhau, nơi mà người sử dụng click lên bản đồ ảnh (gọi là hotspot) sẽ xác định liên kết nào được kích họat. Bản đồ ảnh gồm hai thành phần chính: IMG và MAP.
Phần tử IMG là một thẻ với thuộc tính USEMAP để tham chiếu đến phần tử MAP sẽ được dùng.
Phần tử MAP chứa các phần tử AREA, mỗi phần tử AREA này giúp xác định vị trí trên bản đồ ảnh (dùng thuộc tính SHAPE, CORDS) và một liên kết đến một URL.
Thuộc tính SHAPE có giá trị là "rect", "circle" hay "polygone" tương ứng với một vùng hình chữ nhật, hình tròn, đa giác trên bản đồ.
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.
* 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:
<EMBED scr=”mediafile.rm”
TYPE=”audio/x-pr-realaudio-plugin” >
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:
<OBJECT CLASSID="clsid: nnnn”
CODEBASE=URL
<PARAM name=”value” 
...
<EMBED src=”filename”
...
Ví dụ : để nhúng một tệp video dưới định dạng .swf (shockware file) vào trang web ta có đọan mã:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="
swflash.cab#version=6,0,29,0" 
width="303" height="305">
<embed src="file:///C:/webtest/Clock.swf" quality="high" 
pluginspage="" 
type="application/x-shockwave-flash" width="303" height="305">
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:
<APPLET code=”applet.class”
	WIDTH= "n"
	HEIGHT="n"
	 ....
	 Your browser does not support Java applets.
Ví dụ : menu điều khiển trang chủ của web site Đại học Đà Nẵng là một applet với mã nguồn HTML được trích như sau: 
<APPLET code="slidem.class" align="bottom" 
	 height="210" width="150">
 	 value="Sliding Tree Menu, Copyright (c) 2000, 
 OpenCube Inc.">
 ...
	 <param name="subindent1" value="10"
Để xây dựng các applet, có thể tham khảo trong tài liệu "Lập trình Web với ngôn ngữ Java" của Trần Văn Lăng, nxb Thống kê, 2002.
Một trong những kỹ thuật thiết kế web đang được quan tâm hiện nay hiện nay là kỹ thuật tạo các file Flash với tính đơn giản, dễ xây dựng, tương thích với các trình duyệt IE, NN hơn là viết các applet.
III.2.10. Tạo Marquee
Marquee là một dòng chữ chạy, ta sử dụng thẻ , thẻ này vốn là một thẻ độc quyền của IE, nhưng hiện nay được hỗ trợ bởi FireFox 1.0 và Netscape 8.0. Cú pháp cơ bản như sau:
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 !> 
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.
Các trang web của báo Tuổi trẻ điện tử ( có phần mở rộng là .tto, tại sao trình duyệt vẫn đọc và hiển thị được ?
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
Đâ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ì ?
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.
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.
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.
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
Cho biết kỹ thuật và lĩnh vực ứng dụng của WEBGIS
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.
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?
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.
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 
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.
Nhóm tác giả ELICOM; Ngôn ngữ HTML 4.0; Nxb Thống kê, Hà Nội, 2004
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
Dave Raggett, Arnaud Le Hord; HTML 4.01 Specification; W3C, 2004
Aptech Wordwide; HTML, DHTML and JavaScript; 2004
 last updated April, 2005

File đính kèm:

  • docHTML và các thẻ cơ bản.doc
Tài liệu liên quan