CHƯƠNG I: GIỚI THIỆU NGÔN NGỮ HTMI, 1. GIỚITHIỆU VÈNGÔNNGỮHTML HTML ((iéng An, vit tit cho HyperText Markup Language, hay la "Nebo ngit 'Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web. HTML được định nghĩa như lä một ứng dụng đơn giản cia SGML và được sử dụng trong các tổ “chúc cần đến các yêu cầu xuất bản phúc tạp. HTML đã trở thành một chuễn Tnterae .đo tổ chức World Wide Web Consortium (W3C) duy trì.
Phiên bản chính thức mới nhất của HTML lả HTML 4. Sau đó, các nhà phát triển đã thay thế nó. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTMLS hứa hẹn mang lại diện mạo mới cho Web. Bằng cách ding HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản ~ có thể g6 vào ngay từ những dòng đầu iên— cho đến những công cụ xuất bản 'WYSIWYG phức tạp.
HTML khong phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày. CÁC THẺ ĐỊNH CÁU TRÚC TÀI LIỆU a The HTML Một trang HTML sẽ được đánh dấu bắt đầu bằng thẻ <HTML> và kết thúc bởi thể </HTML>. Như vậy, các nội dung đặt ngoài cặp thể này đều không hợp lệ. Thẻ “<HTML> được gọi là thẻ mở, th</HTML> được gọi là thẻ đóng, Bên trong hai thé này, bạn có thể khai báo và sử dụng hầu hết các thẻ HTML khác.
Cấu trúc : <MTML>.<rFMIL> Hoặc <htmÌ>. The HEAD Phần đầu; Phần đầu bắt đầu bằng the <HEAD> và kết thúc boi thé</HEAD>. Phần này chứa tiêu đề hiển th trên thanh điều hướng của trangWcb. Tiêu để là phẫn khá quan trọng.
Các mốc được dùng để đánh dấu một Website, trình duyệt sử dụng. tiêu đề để lưu trữ các mốc này. Do đó khi người dùng tim kiểm thông tin, tiêu để “của trang Web cung cấp từkhoá chính yếu cho việc tìm kiếm. Cấu trúc : <HEAD>.‹/HEAD> Hoặc <head>.</head> 10 © Thé TITLE Nội dung được hiện thị trên thanh tiêu đề Cấu trúc: <TITLE> Nội dung tiêu đề </TITLE> hoje <title>.
- ThéBODY Dữ liệu cửa websie được viết vào tong thể này, Phin thân: Phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản,hình ảnh và các liên kết mã bạn muốn hiển thị trên trang Web của mình.Phần thân bắt đầu bằng thẻ <BODY> và kết thúc bằng thẻ </BODY> Ciu trie: <BODY> Dit ligu website </BODY> hoac <body>.<body> Chu tr tng quan trang HTML <html> <head> <títieyTiêu để trang Web</title> </head> oáy By lả trang Web đâu tiênc/E> </body> </html> Hinh 1- Cấu trúc trang hơn! 3. CÁC THẺ ĐỊNH DẠNG KHÔI &. ThếP Khi cần trình bày một nội dung văn bản nào đó, chúng ta đặt các văn bản nimtrong thép.</p> cặp thẻ này cho phép định dạng cho doạn văn bản bằng các thuộc tính bên trong thẻ, khi kết thúc đoạn được đánh đấu bằng thẻ </p> dữ liệu.
trình bày sẽ tự động xuống dòng. " _Ví đụ, bạn muốn căn lề cho đoạn văn bản, bạn có thể sử dụng thuộc tỉnh align của. Giá trị của thuộc tính align có bốn giá trị: center/justify/lefUright. ~ _ Center: Căn đoạn văn bản ra giữa ~ _ Justify: Căn đoạn văn bản sang đều 2 bên.
~ _ Left: Căn đoạn văn bản sang bên trái + Right: Can đoạn văn bản sang bên phải "Hình 2: Thẻ định dạng <p> b. Các thẻ định dạng đề mục H1/H2/H3/H4/HS/H6 HTML định nghĩa sẵn sáu cấp độ của tiêu đề: <h1>. </h6> với độ lớn giảm dẫn từ h1 đến h6. Kết thúc thẻ tiêu đẺ, nội dung.
trình bảy cũng tự động xuống dòng, Ì Hình 3: Vídụ về ác thẻ Hesding e Thẻ xuống dòng <BR> 'Dùng để xuống dòng doạn văn bản, ngoải thé <BR> thi thé <p>chiing ta vừa nói 46 trên cũng có tác dựng tương tự như thể <br>- ~ _ Chú ÿ: Thế-<BR> chỉ có thế mỡ, không có thế đồng. The PRE B Để 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>. ‘Vin bản ở giữa hai thẻ này sẽ được thế hiện giống hệt như khỉ chúng được đảnh à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 đồng mới (ình duyệt sẽ không coi chúng như dẫn cách) Cá pháp: “<PRE> Văn bản đã được định dạng</PRE>- 4.
CÁC THẺ ĐỊNH DẠNG DANH SÁCH “Cũng như một chương trình soạn thảo văn bản bình thường, Web cũng có khả năng hiển thị văn bản dạng danh sách. Ngôn ngữ HTML hỗ trợ cả hai loại danh sách không thứ tự và có thứ tự. Danh sách có thứ tực ĐỂ thể hiện danh sách có thứ tự ta sử dụng cặp th: <o></ol> và <li></li>, trong ~ _<ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự. ~-_<lb>cfi viết tất của chữ "it em" có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách có thứ tự: 1, Cá lóc kho tiêu 2. Cá rõ khotộ 3, Cá thu chiên xoài bằm. 4, Cá điêu hồng nấu ngót Hoặc 3) Học HTML. b) Học XHTML ©) Học HTMLS đ) Học CSS2 e) Học CSS3 HTML viết <hml> <head> “tile Tiêu đề trang webhitle> <head> <body> <ol> “ “<l>Cá lóc kho tiêu</li> “<li>Cá rõ kho tộ</li> “<li>Cá thu chiên xoài bằm</li> “l>Cá điêu hồng niu ngstesti> <e> <Ibody> <hml> %.
Danh sách không có thứ tực Để thể hiện danh sách không có thứ tự ta sử đụng cặp thé: <ub></ul> va “li><li>, trong đó: “<al></ul> là viết tắt của chữ: anordered list có nghĩa là danh sách không có thứ tự “<li></i> viết tắt của chữ: list im có nghĩa là mục của danh sách. "Danh sách sau đây gọi là danh sách không có thứ tự: “Trang chủ Giới thiệu Sản phẩm Dịch vụ Liên hệ Mã HTML ¬ <head> “ile>Tiêu đ trang webshitle> <head> <body> ub <li> Trang chi</li> <li>Giới thiệu</li> “<l>Sản phẩm</ib> <li>Dịch vụ</i> “<li>Liên hệ</li> </ul> 1 </body> <Iotml> 'KẾt quả hiện thị trên trình duyệt + Trang chi « Giới thiệu + Sin phim + Dich wy + Lién hg “Chú ý: Chúng ta cỏ thể đặt các thuộc tính để định nghĩa bệ thống số mả được tạo rà cho các mục danh sách. Í Thuộc tink [The le aoa [Tomer na IET T3 Uppercase | litype=A> [Lowercase | <litype=a> Í Bắt đầu với một số khc lớn hơn 1 <olstart=n> Trong đô thu tính surt xác định số Gi to ban Gu cia dank sich Vi dụ: <OL START = 5> <<Lb> Creating forms</ti> <LI> Working with Frames<li> <OL> ¢. Clu tric thé danh sách có thứ tự và không có thứ tự.
“Cấu trú thể hiện thể danh sách có thứ tự và không có thứ tự là tương tự nhau. (Ciu trúc phải theo các nguyên tắc sau day: ~ _ Le nào cũng phối tÔn tại 1 cặp thể, không thể thiểu một trong + Đồi với danh sách có thứ tự, phải tổn tại cặp thẻ: <ol></ol>, <li></li>. ¬+ Đối với danh sách không có thứ tự, phải tổn tại cặp thê: <ub></ul>, <li><ili>. 16 ~ _ Bên trong thể <o»</ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li><fi.
+ Bén trong the <li></li> chứa được hầu hết các thẻ HTML/XHTMIL. tuy nhiên không được chứa một số thẻ sau đây: <htmÌ></html>, <meta></meta>. “<body><fbody», <iúe»cRile», <inlo-<finlo. Và một số thê không nến chứa hu: <style></style>, <script></scrip>.
<o> <u> <li><fi> <i><fi> <li><fi> <li><fi> <ll> <ul> 8. CAC THE DINH DANG KY TY ca. Thẻ định dạng ký tực Là các thẻ được sử dụng để quy định các thuộc tính như in nghiéng, in đậm „ sạch chân .cho các ký tự khi được thể hiện trên trình duyệt "Tên thể Định đạng | Inch dim Tn chit nghiéng In chit ghach chin [In chit bi ghạch ngang. In chit Kin hon bình thường Tn chữ nhô hơn bình thường.
| Dinh danh chỉ số trên. [Dinh dang chi sé dưới ‘Chon kiêu phông chữ. „ Ví dụ: <HTML> <HEAD> <TITLE>Các thẻ định dạng ký tự</TITLE> </HEAD> <BODY> “<B>Chữ in đậm<!B><BR> “<>Chữ ín nghiêng <(B><BR> '<U>Chữ được gạch chân <fU><BR> <STRIKE>.Chữ bị gọch ngong</STRIKE>-<BR> “<B><I>Chữ in đậm và nghiêng</I></B><BR> <U><B>Chữ in đậm và được gạch chẳn<ƑB></U><BR> “<l><U>Chữ in nghiễng và được gạch chân<Jt></U> <BODY> </HTML> Kết quả hiện thị. Căn lễ văn bản trong trang web “Trong trình bày trang web luôn luôn phải chú ý đến việc căn lễ các văn bản để trang website có được bố cục đẹp.
Một số các thẻ định dạng đều có thuộc tính tham. số align cho phép bạn căn lễ các văn bản năm trong phạm vi giới hạn của các thẻ. Giá trị của thuộc tính align có bốn giá trị: centerjustif/lefUright, ~ _ Center: Căn đoạn văn bản ra giữa + Justify: Căn đoạn văn bản sang đều 2 bên. + Left: Cin dogn văn bản sang bên trái ~ _ Right: Căn đoạn văn bản sang bên phải 'Ví dụ mã nguồn hưmÌ <HTML> <HEAD> “<TITLE>Căn lẻ cho vẫn bản</TTTLE> </HEAD> <BODY> ‘<HI ALIGN="CENTER"> WORLD WIDE WEB</HI> <P ALIGN="LEFT'> 19 World Wide Web còn viếttắt là WWW, la mét dich vụ Internet, được xây dựng trên một tập các giao thức thông dụng, nó cho pháp cấu hình các máy tính server theo "một cách đặc biệt để phân phối các bán ti trên mợng theo một cách thức chuẩn.
<P> </BODY> </HTML> 'Kết quả hiện thị trên trình duyét ‘World Wide ch còn vết tắt là WWW, là cột đính vụ Irkemet, được xây dmg ten mit tinh server theotpmgtefeeach giao diethebitething dng,piss Af phn nd cho phptinoftt.hinhmangcác tomáy, ede Din sft eh te chun. "Ngoài ra chúng ta có thẻ CENTER để căn giữa trang một số văn bản Cú pháp: <CENTER> Van ban se duoc can giua trang<ICENTER> Ví dụ: <BODY> <CENTER> “<H2>Mongtộc kỷ niệm xưa</H2> + Thời gian trôi qua mau chỉ còn những kỷ niệm<BR> Kỹ niệm thân yêu ơi sẽ còn nhớ mãi tiếng thấy cô<BR> 20 Ban bè mắn thương ơi sẽ còn nhớ mỗi lúc giận hờn<BR> Dé réi mai chia xa lòng chợt dâng niém thiết tha<BR> Nhớ bạn bè, nhớ mái trường xưa.<BfR> ‘Mong use kỷ niệm xưa “Thời gian ồi qua cau chỉ còn những kỷ năm, “Kỷ nệm rên yêu ơi con nhớ mãi tig hấy có. "Bạn bè mến tương i sẽ còn he aie gi bên, "Để rỗi mai hía xa lòng chợ dâng niềm thiết tha "Nhớ bạn bà, nh mái tường xưa. Các ký tự đặc biệt “Trong ngôn ngữ HTML, một số kỷ tự đặc biệt bạn không thể gõ từ bàn phim.
Vi dụ nếu chỉ gõ khoảng cách giữa các từ là một ký tự khoáng trắng hay nhiều ký tự. khoảng trắng thì kết quả hiển thị lên trình duyệt là như nhau. Vì vậy, nếu bạn muốn có nhiều khoảng trắng liên tục thì phải thực hiện gọi mã HTML cho ký hiệu đặc biệt. Sau đây là bảng liệt kê một số ký hiệu đặc biệt thường dùng: Mã HTML _Ý nghĩa Ma HTML Y nghĩ.
nbsp: "Khoảng trắng =—¬ = ¬" < L©: e 21 xe > — ® ‘Samp: © ye: ¥ ‘quot = —¬ € sum = frac, " .