Lap trinh webphan 1

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.5 MB, 84 trang )

(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 nay có bao nhiêu người trên thế giới sử dụng. Internet?. 2 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 nhau bằng giao thức chung là TCP/IP. Intranet. Mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP. WWW. World Wide Web (WWW) hoặc Web là một dịch vụ của 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 khi người ta cũng gọi chính phần mềm ñó là Web Server. Một tập hợp nhiều trang web - một loại siêu văn bản, thể hiện thông tin của một tổ chức hoặc một 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ủa 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 hiện Javascript. Thắng cuộc: Safari. (Nguồn: Wikipedia).

(11) CÁC TRÌNH DUYỆT WEB Tốc ñộ dịch và thể hiện CSS. Thắng cuộc: Safari. (Nguồn: Wikipedia).

(12) CÁC TRÌNH DUYỆT WEB. Sử dụng bộ 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ế ra ựể 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 của trang. . Xuất bản 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 về 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 Cuộc ñời vẫn ñẹp sao, tình yêu vẫn ñẹp sao..

(19) CÁC THẺ HTML CƠ BẢN. Cấu trúc cơ bản của 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 chỉ ñịnh file hình ảnh làm nền. . bgcolor: xác lập màu cho nền. . text: chỉ ñịnh màu cho văn bản. . link, vlink, và alink: màu của 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 sao các doanh nghiệp cần có trang Web cho mình? </h1> Thưa bạn, Web hiện ñang là phương tiện truyền thông số 1 tại công sở, nơi có những 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ụ của bạn! . “Nhờ web, các doanh nghiệp không cần thuê nhà mặt tiền vẫ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". </body>.

(23) CÁC THẺ HTML CƠ BẢN. Các thẻ ñịnh dạng:. break và horizonal row. Mary had a little lamb It's fleece was white as snow Everywhere that Mary went She was followed by a little lamb. <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. . Thẻ 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]: chỉ ñịnh font chữ. Ví dụ: .

(26) CÁC THẺ HTML CƠ BẢN. Các thẻ trình diễn. , , , <s>, <strike> và <tt>. Thẻ làm ñậm, làm nghiêng, làm gạch dưới, <s> và <strike> làm gạch ngang văn bản mà nó chi phối. Ví dụ: Từ này ñược in ñậm Từ này ñược in ñậm Từ này ñược in nghiêng Từ này ñược in nghiêng Từ này ñược gạch dưới Từ này ñược gạch dưới 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. , , <big>, . Thẻ là supperscript, là subscript Thẻ <big> tăng kích thước font, giảm kích thước font của ñoạn văn bản so với font hiện hành Ví dụ: . ax2 + bx + c = 0 ax2 + bx + c = 0. . Tổng Sn = Sn-1 +1 Sn = Sn-1 + 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 và ñể nhấn mạnh. Hiển thị giống như và . Hai thẻ này có ý nghĩa về mặt văn phong hơn là về 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 chỉ.

(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ị 1 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, 5 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 nhau.

(34) CÁC THẺ HTML CƠ BẢN. Block và inline element Inline element: Hiển thị cùng một dòng với các ñối tượng khác , , , , , , , <big>, , <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, và <var>. Block element: Hiển thị trên dòng mới , <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à : Thẻ này không có chức năng. . ñịnh dạng, mà nó dùng ñể nhóm các phần tử thành một khối từ ñó có thể ñịnh dạng chung cho các khối này. . <DIV> tạo khối bắt ñầu bằng một dòng mới (block element). . tạo khối nhưng không bắt ñầu từ một dòng mới (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 chỉ URL ñược chỉ trong liên kết. Có thể liên kết ñến: . Một phần khác trong cùng tài liệu. . Một tài liệu khác. . Một phần trong tài liệu khác. . Các file khác – hình ảnh, âm thanh, trích ñoạn video. . Vị trí hoặc 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 trong cùng tài liệu hoặc cùng một 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 hoặc máy chủ khác. -----------. ------. ------. ------. ------. -----------. ------. ------.

(40) SIÊU LIÊN KẾT. URL. . URL là một chuỗi cung cấp ñịa chỉ Internet của website hay tài nguyên trên World Wide Web. . URL tuyệt ñối: là ñịa chỉ Internet ñầy ñủ của trang hoặc file, bao gồm giao thức, vị trí mạng, ñường dẫn tùy chọn và tên file. Ví dụ, .. . URL tương ñối: là một URL có một hoặ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ụ, nếu giao thức bị thiếu, trình duyệt sử dụng giao thức của trang hiện thời..

(41) SIÊU LIÊN KẾT. Cú pháp . Cú pháp: <A HREF=”URL”> Nhãn </A> Trong ñó URL: ðịa chỉ của trang liên kết Nhãn: Có thể là một dòng văn bản, hình ảnh hoặc một button. Click vào ñây ñể <a href=“bt.rar">download</a> Trở về <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 1 Web Site. <A HREF="ftp://..."> Với 1 Ftp Site. <A HREF="news:..."> Liên kết với 1 nhóm Tin. <A HREF="mailto:..."> Với 1 ñịa chỉ gởi Mail. Liên kết nầy sẽ kích hoạt chương trình Mail và tự ñộng ñiền ñịa chỉ vào mục To. Có thể khai báo luôn cả subject, cc, bcc. Ví dụ: <A HREF="mailto:?subject=Bàn về môn học Lập trình Web phía client&"> 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 trong 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 trong HTML Có 2 cách ñể biễu diễn màu: tên màu hoặc 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ả về ả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 nhưng tuyệt vời cho các biểu tượng, các ảnh ít màu và hình vẽ. Có khả năng làm các họat hình ñơn giản. . ðịnh dạng GIF xen kẽ. . Ảnh GIF trong suốt. .JPEG (Joint PhotoGraphic Expert Group) hoặc JPG: ảnh nén. mất thông tin, trong quá trình phát lại ảnh cũng rõ gần như ả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 mất dữ 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 bằng pixel. . align=left/right/top/bottom/middle: canh lề ảnh. . alt=text: mô tả về ảnh, tối ña 1024 ký tự, hiển thị như tooltip, hoặc sẽ. hiển thị thay thế khi ảnh không hiển thị ñược . border=value: ñường viền ảnh tính bằng 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 về ảnh.

(49) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG. Hình ảnh . Ảnh ñược chia ra làm nhiều vùng, khi click vào các vùng sẽ liên kết ñến các URL khác nhau.. . Cú pháp: <img usemap=”Label”> <map name=”Label”> <area shape= “type” coords=”x1,y1, …” href=”URL”> </map> Label: tên của bản ñồ ảnh Type: hình dạng của 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ủa 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 của hình . rect: (x1, y1, x2, y2) toạ ñộ 2 ñỉnh trên bên trái và dưới phải. . circle: (x, y, r) toạ ñộ tâm và bán. . poly: (x1, y1, x2, y2, x3, y3, …) là các ñỉnh của ña giác.

(51) MÀU, HÌNH ẢNH VÀ ðỐI TƯỢNG Thêm các ñối tượng khác bằng thẻ <object> . Dùng ñể chèn các ñối tượng khác như flash hoặc java applet vào trang web.. . Các thuộc tính: . classid: chỉ ñịnh phần mềm nào cần ñể hiển thị ñối tương. . codepage: nếu máy tính không có phần mềm cần ñể hiển thị ñối tương thì sẽ ñề nghị download phần mềm ở ñịa chỉ ñược khai báo. . width, height: chiều rộng, cao của ñố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 bằng thẻ <object>. Ví dụ. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" 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=" 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 bản dạng nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau với những chủ ñề khác nhau, rất tiện lợi trong thiết kế và trình bày trang web. . Cách tạo bảng. . <table> </table> : chỉ thị một bảng. . <tr>……</tr> : xác ñịnh một dòng của bảng. . <td>……</td>: xác ñịnh một ô chứa dữ liệu của bảng. Dữ liệu trong ô có thể là văn bản hoặc hình ảnh.. . <th> giống như <td> nhưng làm cho dữ liệu trong ô thành tiêu ñề heading (văn bản ñược in ñậm và canh giữa).. . <caption>: tiêu ñề của 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 của bảng border: ñộ dày của ñường viền tính bằng pixel borderColor: màu ñường viền bgColor: màu nền bảng width, height: chiều rộng, chiều cao của bảng (pixel) align=“left/right/center”: canh lề bảng cellSpacing: khoảng cách giữa ñường viền của các ô cellPadding: khoảng cách giữa ñường viền của ô với văn bản.

(57) BẢNG (TABLE). Các thuộc tính của ô . Canh lề cho dữ liệu trong ô theo chiều ngang: <td align=left/ right/center/justify/char>…</td>. . Canh lề cho dữ liệu trong ô theo chiều ñứng: <td valign= top/ bottom/ middle/baseline>…</td>. . Chiều rộng, chiều cao của ô: <td width=pixel height=pixel>…</td>. . Màu nền ô: <td bgcolor=color>…</td>.

(58) BẢNG (TABLE) Các thuộc tính của ô . 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 của 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 dữ liệu khi người dùng ra 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ử của form . Text Field: single-line text field và muilti-line text field. . Password Field. . File Field. Các thuộc tính chung của 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ử của form Text Field: <input type=“text”> Thuộc tính size: chiều rộng của 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 của password field maxlength: số ký tự tối ña có thể nhập vào field.

(64) FORM. Các phần tử của form File Field: <input type=“file”> Thuộc tính size: chiều rộng của file field Hidden Field: dùng hidden fields ñể gởi một số thông tin theo trang Web mà không muốn người dùng nhìn thấy những thông tin này <input type=“hidden”>.

(65) FORM. Các phần tử của form. Checkbox <input type="checkbox" value="football" name="football“ checked />Bóng ñá  < input type="checkbox" value="valleyball" name="valleyball" checked />Bóng chuyền < 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ử của 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ử của form Submit button: khi người dùng nhấp vào nút Submit, form ñược chuyển ñến vị trí ñược xác ñịnh trong 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 một script khi ñược click vào <input type=“button" value=text/>. Reset button: khi người dùng nhấp vào nút này, các giá trị của tất cả các ñiều khiển ñược tái thiết lập trở về giá trị ban ñầu <input type=“reset" value=text/>.

(68) FORM Các phần tử của 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ử của form Thứ tự tab: 0 và 32767, tiêu ñiểm bắt ñầu từ phần tử có giá trị tabindex thấp nhất <input type=“radio" tabindex=“5”> . Phím truy cập (access key): là một 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 một cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn ñược. Mỗi khung là một cửa sổ trong cửa sổ chính..

(72) KHUNG (FRAME). . Muốn tạo trang khung ta phải xác ñịnh: . Số khung (frame) trong một trang khung (frameset). . Tên cho từng khung cụ thể.. . Các tập tin HTML làm nội dung cho từng 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 nhau. <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 của frame . noresize: không cho phép người dùng thay ñổi kích thước frame. . scrolling: có/ không có thanh cuộn auto: xuất hiện thanh cuộn khi cần thiết yes: luôn xuất hiện thanh cuộn no: không xuất hiện thanh 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 của frame . border: ñường viền của khung mặc ñịnh là 1. . marginwidth: hiệu chỉnh khoảng cách từ nội dung ñến lề trái và phải của khung (tính bằng pixel). . marginheight: hiệu chỉnh khoảng cách từ nội dung ñến lề trên và dưới của khung (tính bằng 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 trong trang Web, ta có thể thiết lập một khung như một mục tiêu của liên kết (link). Trình duyệt tuân theo các bước sau: . Nếu ta xác ñịnh một khung trong thuộc tính ñích (TARGET) của phần tử, thì tài liệu ñược phần tử chỉ ra sẽ ñược tải vào khung ñó khi 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 của phần tử BASE sẽ ñược sử dụng ñể xác ñịnh khung. . Nếu cả 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 một cửa sổ và khung mới sau ñó tải tài liệu vào khung mới 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 sẽ 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)

Lap trinh webphan 1

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về