CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT HYPERLINK MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG TABLE... CÁC THẺ HTML CƠ BẢN.[r]
(1)TRƯỜNG ðẠI HỌC CÔNG NGHIỆP TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BÀI GIẢNG MÔN LẬP TRÌNH WEB PHÍA CLIENT GV : ThS Võ Thị Xuân Thiều 06-2011 (2) NỘI DUNG MÔN HỌC TỔNG QUAN PHẦN 1: NGÔN NGỮ HTML PHẦN 2: CASCADING STYLE SHEET (CSS) PHẦN 3: JAVASCRIPT (3) INTERNET Hiện có bao nhiêu người trên giới sử dụng Internet? tỷ người Gần 1/3 người dân Việt Nam có sử dụng Internet (4) MẠNG INTERNET M¹ng l−íi tr−êng së (LANs) UNIVERSITY (5) MỘT SỐ KHÁI NIỆM CƠ BẢN Internet Mạng máy tính toàn cầu, các máy truyền thông với giao thức chung là TCP/IP Intranet Mạng cục không nối vào Internet, truyền thông giao thức TCP/IP WWW World Wide Web (WWW) Web là dịch vụ Internet (6) MỘT SỐ KHÁI NIỆM CƠ BẢN Web Browser Web Server Website Trình duyệt Web, dùng ñể truy xuất các tài liệu trên các Web Server Máy tính có cài ñặt phần mềm phục vụ Web, ñôi người ta gọi chính phần mềm ñó là Web Server Một tập hợp nhiều trang web - loại siêu văn bản, thể thông tin tổ chức chủ ñề nào ñó (7) CÁC TRÌNH DUYỆT WEB Internet Explorer (IE) FireFox Chrome Một số Trình duyệt web thông dụng Safari Opera Maxthon Netscape … (8) CÁC TRÌNH DUYỆT WEB Thị phần người dùng các trình duyệt web (Nguồn: Wikipedia) Thị phần lớn nhất: Internet Explorer (9) CÁC TRÌNH DUYỆT WEB Thời gian khởi ñộng Thắng cuộc: Opera (Nguồn: Wikipedia) (10) CÁC TRÌNH DUYỆT WEB Thời gian thực Javascript Thắng cuộc: Safari (Nguồn: Wikipedia) (11) CÁC TRÌNH DUYỆT WEB Tốc ñộ dịch và thể CSS Thắng cuộc: Safari (Nguồn: Wikipedia) (12) CÁC TRÌNH DUYỆT WEB Sử dụng nhớ Thắng cuộc: Firefox (Nguồn: Wikipedia) (13) CÁC TRÌNH SOẠN THẢO WEB Notepad++ Aptana EditPlus Một số Trình soạn thảo web thông dụng e-Texteditor Komodo Edit Dream Waver FrontPage … (14) TRƯỜNG ðẠI HỌC CÔNG NGHIỆP TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BÀI GIẢNG MÔN: LẬP TRÌNH WEB PHÍA CLIENT PHẦN I: NGÔN NGỮ HTML GV : ThS Võ Thị Xuân Thiều 06-2011 (15) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (16) HTML LÀ GÌ? HTML (HyperText Markup Language), là ngôn ngữ đánh dấu siêu văn bản, ựược thiết kế ựể tạo nên các trang Web Sử dụng các thẻ và các phần tử HTML, ta có thể : ðiều khiển hình thức và nội dung trang Xuất các tài liệu trực tuyến và truy xuất thông tin trực tuyến (thông qua các liên kết) Tạo các biểu mẫu trực tuyến ñể thu thập thông tin người dùng, quản lý các giao dịch (17) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (18) CÁC THẺ HTML CƠ BẢN Thẻ HTML Thẻ mở Thẻ ñóng <title> Công ty TNHH Kỹ thuật Vân Sơn – Trang chủ </title> Element Thuộc tính <font face=“Arial” size=“3”> Cuộc ñời ñẹp sao, tình yêu ñẹp sao.</font> (19) CÁC THẺ HTML CƠ BẢN Cấu trúc trang html <html> <head> <title>Tiêu ñề trang Web </title> </head> <body> Nội dung hiển thị trên trình duyệt </body> </html> (20) CÁC THẺ HTML CƠ BẢN Thẻ <head> <head> <title> <isindex> <base> <object> <link> <style> <script> <meta> </head> Header element (21) CÁC THẺ HTML CƠ BẢN Thẻ <body> Thẻ <body> có các thuộc tính: background: dùng ñịnh file hình ảnh làm bgcolor: xác lập màu cho text: ñịnh màu cho văn link, vlink, và alink: màu các liên kết leftmargin: canh lề trái, topmargin: canh lề trên Ví dụ: <body background=“bg1.gif“ text=“C5C5C5” topmargin=“10”> (22) CÁC THẺ HTML CƠ BẢN Các thẻ ñịnh dạng: header và paragraph (h1, h2, h3, h4, h5, h6) <body> <h1>Tại các doanh nghiệp cần có trang Web cho mình? </h1> <p> Thưa bạn, Web ñang là phương tiện truyền thông số công sở, nơi có người có thu nhập ổn ñịnh mức tương ñối cao và sẳn sàng chi tiêu cho các sản phẩm và dịch vụ bạn! </p> <p> “Nhờ web, các doanh nghiệp không cần thuê nhà mặt tiền giới thiệu sản phẩm ñến ñông ñảo người tiêu dùng Những ñơn vị nhỏ có thể có nhiều ñơn hàng không kém các tên tuổi lớn" </p> </body> (23) CÁC THẺ HTML CƠ BẢN Các thẻ ñịnh dạng: break và horizonal row <p> Mary had a little lamb <br/> It's fleece was white as snow <br/> Everywhere that Mary went <br/> She was followed by a little lamb </p> <hr/> <hr size=number/>: Chỉ ñịnh kích thước <hr width=number/percent/>: Chỉ ñịnh ñộ rộng <hr align=left/right/center/>: So lề <hr noshade/>: Không bóng <hr color>=name/# rrggbb/>: Màu (24) CÁC THẺ HTML CƠ BẢN Các thẻ ñịnh dạng: <body> function ShowMessage() { alert("Hello"); } <pre> function ShowMessage() { alert("Hello"); } </pre> <pre> (25) CÁC THẺ HTML CƠ BẢN Các thẻ trình diễn <font> Thẻ <font> có các thuộc tính: size: giá trị values từ 1-7, mặc font size là 3, giá trị thay ñổi tương ñối là '+' hay '-' so với giá trị chuẩn color = # rrggbb (hoặc tên màu): xác lập màu chữ face=name [,name] [,name]: ñịnh font chữ Ví dụ: <font face=“arial, tahoma“ size=“4” color=“FF00FF”> (26) CÁC THẺ HTML CƠ BẢN Các thẻ trình diễn <b>, <u>, <i>, <s>, <strike> và <tt> Thẻ <b> làm ñậm, <i> làm nghiêng, <u> làm gạch dưới, <s> và <strike> làm gạch ngang văn mà nó chi phối Ví dụ: Từ này ñược <b> in ñậm </b> Từ này ñược in ñậm Từ này ñược <i> in nghiêng </i> Từ này ñược in nghiêng Từ này ñược <u> gạch </u> Từ này ñược gạch Từ này ñược <s> gạch ngang </s> Từ này ñược gạch ngang (27) CÁC THẺ HTML CƠ BẢN Các thẻ trình diễn <sup>, <sub>, <big>, <small> Thẻ <sup> là supperscript, <sub> là subscript Thẻ <big> tăng kích thước font, <small> giảm kích thước font ñoạn văn so với font hành Ví dụ: ax<sup>2 + bx + c = </sup> ax2 + bx + c = Tổng S<sub>n</sub> = S<sub>n-1</sub> +1 Sn = Sn-1 + Phần này ñược <big>tăng kích thước <big> Phần này ñược tăng kích thước (28) CÁC THẺ HTML CƠ BẢN Phrase element <em> và <strong> ñể nhấn mạnh Hiển thị giống <i> và <b> Hai thẻ này có ý nghĩa mặt văn phong là mặt hiển thị <blockquote>, <cite> và <q> ñể trích dẫn <abbr>, <acronym> và <dfn> <code>, <kbd>, <var> và <samp> dùng cho code và thông tin <address> dùng cho ñịa (29) CÁC THẺ HTML CƠ BẢN Danh sách DS không có thứ tự: DS có thứ tự: Block and Inline Elements Unordered Lists : Ordered Lists : <ul> <ol> <li>Item one</li> <li>Item one</li> <li>Item two</li> <li>Item two</li> <li>Item three</li> <li>Item three</li> </ul> </ol> (30) CÁC THẺ HTML CƠ BẢN Order list - Thuộc tính type và start Danh sách Giá trị A a I i Mô tả Chữ số A Rập (mặc ñịnh) Ký tự hoa Ký tự thường Số La Mã Số La Mã thường <ol type="I" start="3"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ol> Ví dụ 1, 2, 3, 4, A, B, C, D, E a, b, c, d, e I, II, III, IV, V i, ii, iii, iv, v (31) CÁC THẺ HTML CƠ BẢN Unorder list - Thuộc tính type Danh sách Giá trị square circle disc Mô tả Bullet hình vuông Bullet hình tròn ñặc Bullet hình tròng rỗng <ul type=" square " > <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> Minh họa • o (32) CÁC THẺ HTML CƠ BẢN Danh sách Danh sách ñịnh nghĩa (Definition list) <dl> <dt>Unordered List</dt> <dd>A list of bullet points.</dd> <dt>Ordered List</dt> <dd>An ordered list of points, such as a numbered set of steps </dd> <dt>Definition List</dt> <dd>A list of terms and definitions.</dd> </dl> (33) CÁC THẺ HTML CƠ BẢN Danh sách <ol type="I"> <li>Item one</li> <li>Item two</li> <li>Item three</li> <li> Item four <ol type="i"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ol> </li> <li>Item Five</li> </ol> Danh sách lồng (34) CÁC THẺ HTML CƠ BẢN Block và inline element Inline element: Hiển thị cùng dòng với các ñối tượng khác <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, và <var> Block element: Hiển thị trên dòng <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, và <address> (35) CÁC THẺ HTML CƠ BẢN Phần tử nhóm Thẻ <DIV> và <SPAN>: Thẻ này không có chức ñịnh dạng, mà nó dùng ñể nhóm các phần tử thành khối từ ñó có thể ñịnh dạng chung cho các khối này <DIV> tạo khối bắt ñầu dòng (block element) <SPAN> tạo khối không bắt ñầu từ dòng (inline element) (36) CÁC THẺ HTML CƠ BẢN Các ký tự ñặc biệt Character Numeric Named Entity “ " " & & & < < < > > > (khoảng trắng) (37) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (38) SIÊU LIÊN KẾT Siêu liên kết Khi bấm vào siêu liên kết, người dùng ñược ñưa ñến ñịa URL ñược liên kết Có thể liên kết ñến: Một phần khác cùng tài liệu Một tài liệu khác Một phần tài liệu khác Các file khác – hình ảnh, âm thanh, trích ñoạn video Vị trí máy chủ khác (39) SIÊU LIÊN KẾT Các loại siêu liên kết Liên kết trong: là liên kết ñến các phần cùng tài liệu cùng web site Liên kết ngoài: là liên kết ñến các trang trên các web site khác máy chủ khác - - (40) SIÊU LIÊN KẾT URL URL là chuỗi cung cấp ñịa Internet website hay tài nguyên trên World Wide Web URL tuyệt ñối: là ñịa Internet ñầy ñủ trang file, bao gồm giao thức, vị trí mạng, ñường dẫn tùy chọn và tên file Ví dụ, http://www.microsoft.com URL tương ñối: là URL có nhiều phần bị thiếu Trình duyệt lấy thông tin bị thiếu từ trang chứa URL ñó Ví dụ, giao thức bị thiếu, trình duyệt sử dụng giao thức trang thời (41) SIÊU LIÊN KẾT Cú pháp Cú pháp: <A HREF=”URL”> Nhãn </A> Trong ñó URL: ðịa trang liên kết Nhãn: Có thể là dòng văn bản, hình ảnh button Click vào ñây ñể <a href=“bt.rar">download</a><br /> Trở <a href="index.htm"> trang chủ</a> (42) SIÊU LIÊN KẾT Ví dụ <A HREF="http:// "> Liên kết với Web Site <A HREF="ftp:// "> Với Ftp Site <A HREF="news: "> Liên kết với nhóm Tin <A HREF="mailto: "> Với ñịa gởi Mail Liên kết nầy kích hoạt chương trình Mail và tự ñộng ñiền ñịa vào mục To Có thể khai báo luôn subject, cc, bcc Ví dụ: <A HREF="mailto:vtxthieu@yahoo.com?subject=Bàn môn học Lập trình Web phía client&vtxthieu@hui.edu.vn"> Hãy email cho tôi</A> Trang 42/28 (43) SIÊU LIÊN KẾT Liên kết ñến các phần tài liệu page2.htm <a href=“#c1”>chương 1</a> <a href=“#c2”>chương 2</a> <a href=“page2.htm#c3”>chương 3</a> <a name=“c3”> <a href=“page2.htm#c4”>chương 4</a> </a> <a name=“c1”> </a> <a name=“c2”> <a name=“c4”> </a> </a> (44) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (45) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Màu HTML Có cách ñể biễu diễn màu: tên màu số nguyên hệ Hexa Màu hệ hexa có ñịnh dạng: #RRGGBB Trong ñó: - RR: giá trị màu ñỏ - GG: giá trị màu xanh lá cây - BB: giá trị màu xanh dương Color name Aqua black Blue fuchsia Gray green Lime maroon Navy olive purple Red silver Teal white yellow RGB Tripllet Hexa decimal (0, 0, 0) (0, 0, 255) (255, 0, 255) (128, 128, 128) (0, 255, 0) 000000 0000FF FF00FF 808080 00FF00 (128, 0, 0) (0, 0, 128) (128, 128, 0) (128, 0, 128) (255, 0, 0) (192, 192, 192) (0, 128, 128) (255, 255, 255) (255, 255, 0) 800000 000080 808000 800080 FF0000 C0C0C0 008080 FFFFFFF FFFF00 (46) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Hình ảnh Cú pháp: <img src=URL width=pixel height=pixel align=“left/right/top/bottom” alt=“Mô tả ảnh” border=pixel hspace=pixel vspace=value longdesc=file text> Cú pháp và các thuộc tính (47) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Hình ảnh Các loại ảnh GIF (Graphics Interchange Format): nén có ít tổn thất, dễ chuyển tải Hổ trợ 256 màu GIF, không thích hợp cho các ảnh chụp thực tuyệt vời cho các biểu tượng, các ảnh ít màu và hình vẽ Có khả làm các họat hình ñơn giản ðịnh dạng GIF xen kẽ Ảnh GIF suốt JPEG (Joint PhotoGraphic Expert Group) JPG: ảnh nén thông tin, quá trình phát lại ảnh rõ gần ảnh gốc, thường ñược sử dụng cho các ảnh có màu thực Trang 47/28 PNG (Portable Network Graphics) nén không liệu (48) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Hình ảnh Cú pháp và các thuộc tính Cú pháp: <img src=URL/> Các thuộc tính khác: width=value, height=value: chiều rông, cao ảnh tính pixel align=left/right/top/bottom/middle: canh lề ảnh alt=text: mô tả ảnh, tối ña 1024 ký tự, hiển thị tooltip, hiển thị thay ảnh không hiển thị ñược border=value: ñường viền ảnh tính pixel hspace=value, vspace=value: thêm khoảng trắng xung quanh ảnh, vspace (thêm trên và dưới), hspace (thêm trái và phải) longdesc=URL>: URL là file text, mô tả chi tiết thêm ảnh (49) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Hình ảnh Ảnh ñược chia làm nhiều vùng, click vào các vùng liên kết ñến các URL khác Cú pháp: <img usemap=”Label”> <map name=”Label”> <area shape= “type” coords=”x1,y1, …” href=”URL”> </map> Label: tên ñồ ảnh Type: hình dạng các vùng ñược ñánh dấu trên ảnh Coords: toạ ñộ các ñỉnhcủa hình (50) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Bản ñồ ảnh (tt) type: hình dạng các vùng trên ảnh, gồm các loại: rect: vùng hình chữ nhật circle: vùng hình tròn poly: vùng hình ña giác coords: toạ ñộ các ñỉnh hình rect: (x1, y1, x2, y2) toạ ñộ ñỉnh trên bên trái và phải circle: (x, y, r) toạ ñộ tâm và bán poly: (x1, y1, x2, y2, x3, y3, …) là các ñỉnh ña giác (51) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Thêm các ñối tượng khác thẻ <object> Dùng ñể chèn các ñối tượng khác flash java applet vào trang web Các thuộc tính: classid: ñịnh phần mềm nào cần ñể hiển thị ñối tương codepage: máy tính không có phần mềm cần ñể hiển thị ñối tương thì ñề nghị download phần mềm ñịa ñược khai báo width, height: chiều rộng, cao ñối tượng align: canh lề (52) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Thêm các ñối tượng khác thẻ <object> Ví dụ <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/fla sh/swflash.cab# version=6,0,29,0" width="778" height="326"> <param name="movie" value="vanson.swf“/> <param name="quality" value="high“/> <param name="LOOP" value="flash“/> <embed src="vanson.swf" width="778" height="326" loop="false" quality="high“ pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"> </embed> </object> (53) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (54) BẢNG (TABLE) Bảng thường ñược sử dụng ñể tạo các văn dạng nhiều cột phân chia trang thành nhiều vùng khác với chủ ñề khác nhau, tiện lợi thiết kế và trình bày trang web Cách tạo bảng <table> </table> : thị bảng <tr>……</tr> : xác ñịnh dòng bảng <td>……</td>: xác ñịnh ô chứa liệu bảng Dữ liệu ô có thể là văn hình ảnh <th> giống <td> làm cho liệu ô thành tiêu ñề heading (văn ñược in ñậm và canh giữa) <caption>: tiêu ñề bảng ðặt sau <table> và trước <tr> ñầu tiên (55) BẢNG (TABLE) Cú pháp <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> (56) BẢNG (TABLE) Các thuộc tính bảng border: ñộ dày ñường viền tính pixel borderColor: màu ñường viền bgColor: màu bảng width, height: chiều rộng, chiều cao bảng (pixel) align=“left/right/center”: canh lề bảng cellSpacing: khoảng cách ñường viền các ô cellPadding: khoảng cách ñường viền ô với văn (57) BẢNG (TABLE) Các thuộc tính ô Canh lề cho liệu ô theo chiều ngang: <td align=left/ right/center/justify/char>…</td> Canh lề cho liệu ô theo chiều ñứng: <td valign= top/ bottom/ middle/baseline>…</td> Chiều rộng, chiều cao ô: <td width=pixel height=pixel>…</td> Màu ô: <td bgcolor=color>…</td> (58) BẢNG (TABLE) Các thuộc tính ô Trộn ô: <td colspan=n rowspan=m >: trộn n cột m dòng <table width="400" height="300" border="1" cellspacing="0"> <tr> <td colspan="3"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2" rowspan="2"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> (59) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (60) FORM (61) FORM Các thuộc tính form Accept=“HTML/TEXT/…” Xác ñịnh loại tập tin có thể ñược gửi ñi Action=URL: Xác ñịnh nơi ñể gởi liệu người dùng lệnh gửi Method=“post/get”: Xác ñịnh cách gởi thông tin lên máy chủ Ví dụ: <Form ACTION="Simple.htm“ Accept=“TEXT/HTML” Method=“POST”> (62) FORM Các phần tử form Text Field: single-line text field và muilti-line text field Password Field File Field Các thuộc tính chung các Hidden Field phần tử form: Checkbox - id Radio button - name Combobox - value Image Button Submit button Reset button (63) FORM Các phần tử form Text Field: <input type=“text”> Thuộc tính size: chiều rộng text field value maxlength: số ký tự tối ña có thể nhập vào text field Password Field: <input type=“password”> Thuộc tính size: chiều rộng password field maxlength: số ký tự tối ña có thể nhập vào field (64) FORM Các phần tử form File Field: <input type=“file”> Thuộc tính size: chiều rộng file field Hidden Field: dùng hidden fields ñể gởi số thông tin theo trang Web mà không muốn người dùng nhìn thấy thông tin này <input type=“hidden”> (65) FORM Các phần tử form Checkbox <input type="checkbox" value="football" name="football“ checked />Bóng ñá < input type="checkbox" value="valleyball" name="valleyball" checked />Bóng chuyền<br/> < input type="checkbox" value="badmilton" name="badmilton" checked /> Cầu lông < input type="checkbox" value="swimming" name="swimming" />Bơi lội Radio button <input type="radio" name="gender" value="0">Nam <input type="radio" name="gender" value="1“ checked>Nữ (66) FORM Các phần tử form Combobox <select name="QuocGia"> <option value="TL">Thái Lan</option> <option value="TQ">Trung Quốc</option> <option value="VN“ selected>Việt Nam</option> <option value=“NB">Nhật Bản</option> <option value=“HQ">Hàn Quốc</option> </select> <select name="QuocGia“ multiple> … </select> (67) FORM Các phần tử form Submit button: người dùng nhấp vào nút Submit, form ñược chuyển ñến vị trí ñược xác ñịnh thuộc tính action <input type=“submit" value=text/> Image button: nút submit dạng ảnh <input type="image" src=URL/> Button: dùng ñể kích hoạt script ñược click vào <input type=“button" value=text/> Reset button: người dùng nhấp vào nút này, các giá trị tất các ñiều khiển ñược tái thiết lập trở giá trị ban ñầu <input type=“reset" value=text/> (68) FORM Các phần tử form Text areas: <textarea cols=number rows=number wrap=virtual/physical> default text <textarea> Ví dụ: <textarea name=“description" cols=10 rows=3 wrap=physical> Ghi mô tả ñây </textarea> (69) FORM Các thuộc tính ñể ñiều khiển các phần tử form Thứ tự tab: và 32767, tiêu ñiểm bắt ñầu từ phần tử có giá trị tabindex thấp <input type=“radio" tabindex=“5”> Phím truy cập (access key): là ký tự và thường ñược sử dụng cùng với phím ALT <input type=“reset" value=“HỦY” accesskey=“H” /> Vô hiệu hóa phần tử: làm cho phần tử trở thành read-only <input type=“text" disable=“true”/> Thiết lập tiêu ñiểm (focus) : (70) NỘI DUNG CÁC THẺ HTML CƠ BẢN SIÊU LIÊN KẾT (HYPERLINK) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG BẢNG (TABLE) FORM FRAME (71) KHUNG (FRAME) Frame chia cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà vùng có thể hiển thị trang riêng biệt có thể ñược Mỗi khung là cửa sổ cửa sổ chính (72) KHUNG (FRAME) Muốn tạo trang khung ta phải xác ñịnh: Số khung (frame) trang khung (frameset) Tên cho khung cụ thể Các tập tin HTML làm nội dung cho khung (73) KHUNG (FRAME) Cú pháp <html> <head> <title>Page Title</title> </head> <frameset> Frame Definitions </frameset> </html> Không sử dụng thẻ <body> (74) KHUNG (FRAME) Các dạng frame Frame theo dòng <frameset rows=“30%, 50%, 20%” > <frame name=”head” src=”banner.htm/> <frame name=”content” src=”content.htm/> <frame name=”footer” src=”footer.htm/> </frameset> (75) KHUNG (FRAME) Các dạng frame Frame theo cột <frameset cols=“180, *, 120” > <frame name=”leftFrame” src=”left.htm/> <frame name=”mainFrame” src=”main.htm/> <frame name=”rightFrame” src=”right.htm/> </frameset> (76) KHUNG (FRAME) Các dạng frame Frame lồng <frameset rows=“100, *"> <frame src=“banner.htm" name=banner/> <frameset cols=“200,*"> <frame src=“menu.htm" name=menu/> <frame src=“tintuc.htm" name=main/> </frameset> </frameset> (77) KHUNG (FRAME) Các thuộc tính frame noresize: không cho phép người dùng thay ñổi kích thước frame scrolling: có/ không có cuộn auto: xuất cuộn cần thiết yes: luôn xuất cuộn no: không xuất cuộn Ví dụ: <frameset rows=“10%,*”> <frame noresize src="topFrame" scrolling=“no" > <frame noresize src=“mainFrame” > </frameset> (78) KHUNG (FRAME) Các thuộc tính frame border: ñường viền khung mặc ñịnh là marginwidth: hiệu chỉnh khoảng cách từ nội dung ñến lề trái và phải khung (tính pixel) marginheight: hiệu chỉnh khoảng cách từ nội dung ñến lề trên và khung (tính pixel) (79) KHUNG (FRAME) Phần tử <noframes> <html> <head> <title>Page Title</title> </head> <frameset> Frame Definitions </frameset> <noframes> <body> … </body> </noframes> </html> (80) KHUNG (FRAME) Liên kết các frame Khi tạo liên kết trang Web, ta có thể thiết lập khung mục tiêu liên kết (link) Trình duyệt tuân theo các bước sau: Nếu ta xác ñịnh khung thuộc tính ñích (TARGET) phần tử, thì tài liệu ñược phần tử ñược tải vào khung ñó phần tử ñược kích hoạt Nếu thuộc tính TARGET không ñược thiết lập thì thuộc tính TARGET phần tử BASE ñược sử dụng ñể xác ñịnh khung Nếu phần tử và phần tử BASE không ñề cập ñến TARGET, thì tài liệu ñược tải vào khung chứa phần tử ñó Nếu không tìm thấy khung thì trình duyệt tạo cửa sổ và khung sau ñó tải tài liệu vào khung này (81) KHUNG (FRAME) Liên kết các frame Ví dụ (82) KHUNG (FRAME) Liên kết các frame <head> <title>Liên kết</title> Ví dụ: Menu.htm “main” là tên frame hiển thị trang web </head><body> <a href="muasam.htm" target="main">Mua sắm</a> <a href="xemxeday.htm" target="main">Xem xe ñẩy</a> <a href="dangky.htm" target="main">ðăng ký</a> <a href="khachhang.htm" target="main">Khách hàng</a> <a href="hướngdan.htm” target="main">Hướng dẫn</a> </body> (83) KHUNG (FRAME) Liên kết các frame Ví dụ: Menu.htm <head> <title>Liên kết</title> <base target="main" /> </head><body> <a href="muasam.htm”>Mua sắm</a> <a href="xemxeday.htm”>Xem xe ñẩy</a> <a href="dangky.htm”>ðăng ký</a> <a href="khachhang.htm”>Khách hàng</a> <a href="hướngdan.htm”>Hướng dẫn</a> </body> (84) Võ Th Xuân Thiu (85)