Thông tin tài liệu
Chơng 1 Ngôn ngữ đánh dấu siêu văn bản - HTML 2 Chơng 2 Các thẻ định cấu trúc tài liệu 3 Chơng 3 Các thẻ định dạng khối 6 chơng 4 Các thẻ định dạng danh sách 12 Chơng 5 Các thẻ định dạng ký tự 17 Chơng 6 Các thẻ chèn âm thanh, hình ảnh 34 Chơng 7 Các thẻ định dạng bảng biểu 43 Chơng 8 Frame 48 Chơng 9 Java Applet 55 Chơng 10 FORM 58 Phụ lục Bảng m và tên gọi trong HTML của một số ký tựã đặc biệt 63 HTML cơ bản Chơng 1 Ngôn ngữ đánh dấu siêu văn bản - HTML 1.1 World Wide Web viết tắt là WWW, là một dịch vụ Internet đợc xây dựng trên giao thức HTTP (HyperText Transfer Protocol), nó cho phép cấu hình các máy tính server theo một cách đặc biệt để có thể phân phối các dữ liệu trên mạng theo một cách thức chuẩn. 1.2 HTML là gì? HTML viết tắt của HyperText Mark-up Language (ngôn ngữ đánh dấu siêu văn bản). Nó là một tập hợp các quy tắc và các thẻ (tag) đợc sử dụng để quy định các thức trình bày, hiển thị nội dung của các trang Web, tập hợp các quy tắc và thẻ này phải tuân theo một chuẩn quốc tế, đảm bảo cho các trình duyệt Web khác nhau, trên các nền phần cứng và hệ điều hành khác nhau đều hiểu đợc và hiển thị đúng nội dung của các trang Web. HTML không phải là một ngôn ngữ lập trình, nó là một ngôn ngữ đánh dấu. HTML dễ hiểu hơn nhiều so với hầu hết các ngôn ngữ lập trình. Một tài liệu HTML là một tệp tin văn bản trong đó có sử dụng các thẻ HTML để quy định cách thức hiển thị văn bản khi nó đợc mở bởi một trình duyệt Web. Cơ bản các thẻ định dạng trong HTML thờng có từng cặp gồm: thẻ mở <tag> và thẻ đóng </tag>. Các văn bản nằm giữa hai thẻ này sẽ đợc chịu tác động định dạng bởi thẻ. Ví dụ, thẻ <B> dùng để định dạng chữ in đậm, khi đó văn bản <B>Hello</B> sẽ đợc hiển thị là . Nếu các trình duyệt, các nhà thiết kế trang Web khác nhau sử dụng các quy tắc đánh dấu khác nhau cho tiêu đề, bảng hay danh sách thì chúng ta sẽ thấy môI trờng Web sẽ trở nên hỗn loạn. Vì thế, việc phát triển của HTML đợc thực hiện dới sự giám sát nghiêm ngặt của tổ chức World-Wide Web Consortium (W3C). 1.3 Trình duyệt Web Trình duyệt Web (Web browser) là những chơng trình có thể thực hiện một số chức năng cơ bản nh tìm kiếm và hiển thị các trang Web theo đúng các định dạng bởi các thẻ HTML trong đó. Các trình duyệt Web thông dụng hiện nay là: Internet Explorer, Netscape, Mossaic, Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 2 <HTML> Toàn bộ nội của tài liệu đợc đặt ở đây </HTML> HTML cơ bản Chơng 2 Các thẻ định cấu trúc tài liệu Văn bản nói chung đợc chia thành nhiều phần. Cả văn bản đầu tiên đợc xem là một văn bản HTML, sau đó phần đầu của văn bản chứa tiêu đề (title). Sau đó là phần thân văn bản (body), phần thân lạI có thể chia thành các mức khác nhau với các đề mục khác nhau.Trong văn bản cũng có thể chứa chú thích hay các thông tin không đợc hiển thị khác.Tóm lạI các thẻ xác định cấu trúc tài liệu là thành phần không thể thiếu trong tài liệu HTML. Sau đây chúng ta sẽ lần lợt học cách sử dụng các thẻ định dạng cấu trúc của một tài liệu HTML cơ bản. 2.1 HTML Cặp thẻ này đợc sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu đợc đặt giữa cặp thẻ này. Tất cả các tập tin HTML đều bắt đầu bằng thẻ <HTML> thẻ này thông báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các mã HTML và cuối các tập tin HTML sẽ là thẻ đóng tơng ứng </HTML> thông báo kết thúc tài liệu. Cú pháp: Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> nh những tệp tin văn bản bình thờng. 2.2 HEAD Một tài liệu HTML gồm có 2 phần: phần mở đầu và phần nội dung chính. Phần mở đầu giống nh phần giới thiệu, các trình duyệt Web sử dụng phần mở đầu này để thu nhặt các thông tin khác nhau về tài liệu HTML này, chẳng hạn nh tiêu đề của tài liệu, các quan hệ đợc thiết lập giữa tài liệu và các th mục. Thẻ HEAD đợc dùng để xác định phần mở đầu cho tài liệu. Cú pháp: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 3 <HEAD> Phần mở đầu (HEADER) của tài liệu đợc đặt ở đây </HEAD> <TITLE>Tiêu đề của tài liệu</TITLE> <BODY> phần nội dung của tài liệu đợc đặt ở đây </BODY> HTML cơ bản 2.3 TITLE Bạn có thể đặt tiêu đề cho tài liệu HTML của mình. Tiêu đề này sẽ không đợc hiển thị trên phần thân của văn bản mà đợc hiển thị trên thanh tiêu đề của trình duyệt hay trong bookmark của ngời sử dụng. Nên đặt tiêu đề cho mỗi trang, bởi vì khi đợc đánh dấu trang , tên đợc hiển thị trên bookmark sẽ là một tên hợp lý, mang tính gợi nhớ (thông th- ờng có thể soạn thảo đợc tên của boookmark nhng ngầm định thì tên boookmark trùng với tiêu đề trang. Nếu không có tiêu đề trang thì URL của văn bản sẽ là tên bookmark).Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ <HEAD>. Cú pháp: 2.4 BODY Thẻ này đợc sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu Những thông tin này đợc đặt ở phần tham số của thẻ. Cú pháp: Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính đợc sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính: BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thớc ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ đợc lát kín bằng nhiều ảnh. BGCOLOR= Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trớc, sau đó mới tải ảnh lên phía trên. TEXT= Xác định màu chữ của văn bản, kể cả các đề mục. ALINK=,VLINK=,LINK= Xác định màu sắc cho các siêu liên kết trong văn bản. Tơng ứng, alink (active link) là liên kết đang đợc kích hoạt - tức là khi đã đợc kích chuột lên; vlink (visited link) chỉ liên kết đã từng đợc kích hoạt; Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 4 <HTML> <HEAD> <TITLE>Tiêu đề của tài liệu</TITLE> </HEAD> <BODY Các tham số nếu có> Nội dung của tài liệu </BODY> </HTML> HTML cơ bản Nh vậy một tài liệu HTML cơ bản có cấu trúc nh sau: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 5 Tiêu đề Nội dung tài liệu HTML cơ bản Chơng 3 Các thẻ định dạng khối 3.1 Thẻ chú thích <! > Cặp thẻ này cho phép ngời biên soạn tài liệu HTML có thể thêm vào trong tài liệu HTML của mình những ghi chú cần thiết. Các văn bản đợc đặt giữa hai thẻ này sẽ không đợc trình duyệt hiển thị. Chú ý rằng đoạn ghi chú sẽ không đợc hiển thị trong cửa sổ chính của trình duyệt, tuy nhiên nếu ngời dùng chọn chức năng xem mã nguồn của trình duyệt (ví dụ chọn / với IE5) thì có thể xem đợc các ghi chú này. Cú pháp: 3.2 Thẻ ADDRESS Thông thờng nên nêu ra ngời chịu trách nhiệm bảo trì trang WEB. Trong nhiều trờng hợp đây có thể là ngời tạo ra trang WEB. Tuy nhiên nhiều công ty tạo ra các website của mình trên Internet, khi đó sẽ có một nhóm ngời chịu trách nhiệm bảo trì site đó, giải quyết các vấn đề kỹ thuật để site có thể hoạt động bình thờng hay khắc phục khi có sự cố xảy ra các webmaster. Thẻ <ADDDRESS> đợc sử dụng để định dạng các thông tin nh địa chỉ, danh thiếp, tên tác giả, thờng đặt ở đầu hay cuối tài liệu. Các thông tin này sẽ giúp liên hệ ngợc lại với ngời chịu trách nhiệm về trang Web đó. Văn bản đợc định dạng bởi thẻ <ADDRESS> sẽ đợc in nghiêng. Cú pháp: 3.3. P Thẻ <P> đợc sử dụng để định dạng một đoạn văn bản. Mỗi đoạn văn bản đợc cách nhau bởi một dòng, trên một số trình duyệt dòng đầu của mỗi đoạn có thể đợc đa thụt vào. Bắt đầu từ HTML 3.2 có thể điều chỉnh đợc văn bản trong đoạn (căn trái, căn phải hay căn giữa). Cú pháp: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 6 <! Lời ghi chú > <P>Nội dung đoạn văn bản</P> <ADDRESS> Nội dung văn bản </ADDRESS> HTML cơ bản <HTML> <HEAD> <TITLE>Internet ở Việt Nam</TITLE> </HEAD> <BODY> <! Bắt đầu phần nội dung > <P> Trớc tác động mạnh mẽ của trào lu Internet trên thế giới, những ngời đang trực tiếp làm việc với máy tính trong nghiên cứu, học tập, kinh doanh đều nóng lòng muốn tìm hiểu công nghệ mang tính thời đại này và tình hình Internet tại nớc ta. </P> <P> Trên thực tế có nhiều nơi tại Việt Nam đã và đang thực hiện truy cập vào Internet. Đó là một số cơ quan nhà nớc và nớc ngoài có nhu cầu sử dụng Internet phục vụ cho công việc chuyên môn, nghiên cứu và kinh doanh. </P> </BODY> </> Khi trình duyệt duyệt văn bản này, kết quả sẽ nh sau: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 7 HTML cơ bản 3.4. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thờng văn bản ở đề mục cấp 5 hay cấp 6 thờng có kích thớc nhỏ hơn văn bản thông thờng. Ngời ta thờng để đề mục cấp 1 là dòng lặp lại dòng tiêu đề, nh vậy dòng tiêu đề có thể nhìn thấy đợc trong văn bản. Điều này rất quan trọng khi bạn dự định in trnag Web trong tơng lai bởi vì khác với đề mục, tiêu đề có thể không đợc in trên giấy. Dới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: <H1> </H1> Định dạng đề mục cấp 1 <H2> </H2> Định dạng đề mục cấp 2 <H3> </H3> Định dạng đề mục cấp 3 <H4> </H4> Định dạng đề mục cấp 4 <H5> </H5> Định dạng đề mục cấp 5 <H6> </H6> Định dạng đề mục cấp 6 Ví dụ 3.2: Chúng ta soạn một tài liệu HTML tên là vd22.htm có nội dung nh sau: <HTML> <HEAD><TITLE> Ví dụ định dạng đề mục </TITLE></HEAD> <BODY> <H1> Đề mục cấp 1</H1> <H2> Đề mục cấp 2</H2> <H3> Đề mục cấp 3</H3> <H4> Đề mục cấp 4</H4> <H5> Đề mục cấp 5</H5> <H6> Đề mục cấp 6</H6> </BODY> <> Sử dụng trình duyệt để mở tài liệu trên ta đợc: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 8 HTML cơ bản 3.5 Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tơng ứng (</BR>), nó có tác dụng chuyển sang dòng mới. Lu ý, nội dung văn bản trong tài liệu HTML sẽ đợc trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều đợc coi nh một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR> Cú pháp: 3.6 Thẻ PRE Để giới hạn đoạn văn bản đã đợc định dạng sẵn bạn có thể sử dụng thẻ <PRE>. Văn bản ở giữa hai thẻ này sẽ đợc thể hiện giống hệt nh khi chúng đợc đánh vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng nh dấu cách) Cú pháp: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 9 <BR> <PRE>Văn bản đã đợc định dạng</PRE> HTML cơ bản 3.7 Thẻ BLOCKQUOTE Thờng dùng để trích dẫn một đoạn văn bản hoặc, các đoạn văn bản đợc định dạng bởi thẻ <BLOCKQUOTE> sẽ đợc thể hiện bằng phông chữ nghiêng có căn lề lùi vào trong và thờng có một dòng trống trên và dới. Cú pháp: Dới đây là một ví dụ sử dụng các thẻ định dạng khối để trình bày trang Web. Sử dụng Notepad để soạn một văn bản có nội dung nh sau: Ví dụ 3.3: <HTML> <HEAD><TITLE>Bài thơ Tây Tiến</TITLE></HEAD> <BODY> <H2>Tây Tiến</H2> <BLOCKQUOTE> Sông Mã xa rồi Tây Tiến ơi!<BR> Nhớ về rừng núi nhớ chơi vơi<BR> Sài Khao sơng lấp đoàn quân mỏi<BR> Mờng Lát hoa về trong đêm hơi<BR> Dốc lên khúc khuỷu dốc thăm thẳm<BR> Heo hút cồn mây súng ngửi trời<BR> Ngàn thớc lên cao, ngàn thớc xuống<BR> Nhà ai Pha Luông ma xa khơi<BR> Anh bạn dãi dầu không bớc nữa<BR> Gục trên súng mũ bỏ quên đời!<BR> Chiều chiều oai linh thác gầm thét<BR> Đêm đêm Mờng Hịch cọp trêu ngời<BR> Nhớ ôi Tây Tiến cơm lên khói<BR> Mai Châu mùa em thơm nếp xôi <BR> </BLOCKQUOTE> <ADDRESS>Tác giả Quang Dũng (1921-1988) </ADDRESS> </BODY> <> Ghi lại tệp văn bản trên với tên vd33.htm, sau đó sử dụng trình duyệt để mở văn bản trên. Trang tài liệu HTML của bạn sẽ đợc hiển thị nh trong hình dới: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 10 <BLOCKQUOTE>Văn bản trích dẫn</BLOCKQUOTE> [...]... Lời giải nghĩa Ví dụ 4.1: Các thẻ định dạng danh sách HTMLHypertext Markup Language XMLExtended Markup Language WWWWorld Wide Web WYSIWYGWhat You See Is What You Get < /HTML> Tài liệu trên khi duyệt sẽ đợc hiển thị nh sau: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 12 HTML cơ bản 4.2 Danh sách thông thờng... iii Đề mục I Đề mục II Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 15 HTML cơ bản Đề mục III < /HTML> Khi duyệt ví dụ trên, trình duyệt sẽ có dạng: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 16 HTML cơ bản Chơng 5 Các thẻ định dạng ký tự 5.1 Các thẻ định dạng in ký tự HTML không đợc thiết kế cho hệ thống WYSIWYG ( nh Microsoft Word), nó đợc thiết kế cho mục đích... duyệt sẽ đợc kết quả: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 18 HTML cơ bản Ví dụ 5.2: Các thẻ định dạng ký tự H2O ax2 + bx + c = 0 NH4+ < /HTML> Khi duyệt sẽ có kết quả sau : Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 19 HTML cơ bản 5.2 Căn lề văn bản trong trang Web Trong trình bày trang... bản tin trên mạng theo một cách thức chuẩn Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 20 HTML cơ bản < /HTML> Khi duyệt sẽ có kết quả sau: Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản Cú pháp: Văn bản sẽ đợc căn giữa trang Ví dụ 5.4: Căn giữa trang Mong ớc kỷ niệm xa... Qun Lý - ESTIH 24 HTML cơ bản Ví dụ 5.5: Đặt màu chữ, màu nền cho trang Web Color collection Text color: YELLOW Background color: ROYALBLUE < /HTML> Sau khi duyệt sẽ đợc kết quả: Ví dụ 5.6: Trong ví dụ này, chúng ta sẽ sử dụng tệp ảnh bground1.gif để làm nền cho trang Web của mình Đặt... trong một frame (tên frame) Ví dụ 5.8: Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 29 HTML cơ bản Su dung sieu van ban Đây là siêu văn bản < /HTML> Sau khi duyệt sẽ có kết quả: 5.7 Địa chỉ tơng đối URL đợc trình bày ở trên là... dụ 5.10: Vẽ đờng thẳng Web Browser Web Browser là chơng trình có khả năng thực hiện một số chức năng cơ bản nào đó, chẳng hạn nh tìm kiếm và mở các trang Web, hiển thị các trang Web theo chuẩn HTML < /HTML> Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 32 HTML cơ... phẩm Text /HTML HTML, htm PostScript eps, ps Đợc tạo ra để hiển thị và in các văn bản có chất lợng cao Adobe Acrobat pdf Viết tắt của Portable Document Format Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống nh HTML Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản Ưu điểm lớn nhất của nó là khả năng Bựi Tin Trng, Khoa Tin Hc Qun Lý - ESTIH 34 HTML cơ... đợc đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD) Ví dụ 6.1: Đa âm thanh vào trong tài liệu < /HTML> 6.3 Chèn một hình ảnh, một đoạn video vào tài liệu HTML Để chèn một file ảnh (.jpg, gif, bmp) hoặc video (.mpg, avi) vào tài liệu HTML, bạn có thể sử dụng thẻ IMG Cú pháp: . liệu HTML. Sau đây chúng ta sẽ lần lợt học cách sử dụng các thẻ định dạng cấu trúc của một tài liệu HTML cơ bản. 2.1 HTML Cặp thẻ này đợc sử dụng để xác nhận một tài liệu là tài liệu HTML, . có chứa các mã HTML và cuối các tập tin HTML sẽ là thẻ đóng tơng ứng < /HTML& gt; thông báo kết thúc tài liệu. Cú pháp: Trình duyệt sẽ xem các tài liệu không sử dụng thẻ < ;HTML& gt; nh những. liệu đợc đặt ở đây < /HTML& gt; HTML cơ bản Chơng 2 Các thẻ định cấu trúc tài liệu Văn bản nói chung đợc chia thành nhiều phần. Cả văn bản đầu tiên đợc xem là một văn bản HTML, sau đó phần đầu
Ngày đăng: 10/08/2014, 07:21
Xem thêm: Tailieu HTML pps
