Thông tin tài liệu
LÀM VIỆC VỚI HTML 1. Giới thiệu về HTML: HTML (Hypertext Markup Language) là một ngôn ngữ được sử dụng rộng rãi trên Internet, đó là một ngôn ngữ đánh dấu siêu văn bản. - Siêu văn bản: đề cập đến cách thức mà trong đó các trang web (tài liệu HTML) liên kết với nhau. Khi bạn nhấp vào một liên kết trong một trang web, bạn đã sử dụng một siêu văn bản. - Ngôn ngữ đánh dấu: mô tả hoạt động của HTML. Với một ngôn ngữ đánh dấu, bạn chỉ đơn giản là “đánh dấu” một tài liệu văn bản với các thẻ trong trong trang web sẽ được hiển thị như thế nào. Ban đầu HTML được phát triển với mục đích xác định cấu trúc của tài liệu như tiêu đề, đoạn văn, danh sách, và do đó nó có tạo điều kiện thuận lợi cho việc chia sẻ thông tin khoa học giữ những nhà nghiên cứu. 2. Tạo một tài liệu HTML: Để tạo được một tài liệu HTML, bạn chỉ cẩn: một trình soạn thảo văn bản đơn giản và một trình duyệt web. Cấu trúc một phần tử thể hiện cách hiển thị trong trang web: BỐ CỤC TÀI LIỆU HTML <html> Định nghĩa một tài liệu HTML. Ta có thể đặt thuộc tính xác định xhtml: xmlns="http://www.w3.org/1999/xhtml" <head> Định nghĩa phần thông tin của tài liệu html. <body> Định nghĩa phần thân của tài liệu html. Ta có thể đặt các thuộc tính: alink để đặt màu cho đối tượng liên kết trong tài liệu. bgcolor đặt màu nền cho tài liệu. backgroun d đặt hình nền cho tài liệu. link đặt màu cho đối tượng được liên kết thường xuyên trong tài liệu. color đặt màu cho văn bản hiển thị trong tài liệu. vlink đặt màu cho các liên kết truy cập trong tài liệu. Cấu trúc: <html> <head> Nơi dùng để viết các thông tin của tài liệu; </head> <body> Nơi viết phần thân của tài liệu; </body> </html> THÔNG TIN TÀI LIỆU Là phần tử có chứa các nội dung tiêu đề của trang web. Nó nằm trong phần <head> của tài liệu. Trong nó có thể có một số phần tử: <title> xác định tiêu đề cho trang web. Nội dung của thẻ là một dòng văn bản, được hiển thị trên thanh tiêu đề của một cửa sổ trình duyệt. <base> thẻ này được sử dụng để tạo một khu vực chứa tất cả các liên kết vào trang web. <object> được dùng để thêm các đối tượng vào tài liệu như phim, nhạc, flash <link> được sử dụng để liên kết đến một tập tin bên ngoài, chẳng hạn như tập tin css hay javascript. <style> được sử dụng để thêm bộ các quy tắc css vào trong tài liệu <script> được sử dụng đối với JavaScript hoặc VBScript vào trong tài liệu. <meta> để mô tả các thông tin về tài liệu như từ khóa và mô tả, đặc biệt hữu ích cho các ứng dụng tìm kiếm. Nó có các thuộc tính sau: name tên thuộc tính. Nó có thể là: include, keywords, description, author, revised, generator content xác định giá trị của thuộc tính. scheme xác định một chương trình sử dụng để giải thích giá trị của thuộc tính (như khai báo trong thuộc tính content). http-equiv xác định tiêu đề tin nhắn trả về như làm mới trang hoặc thiết lập một cookie. Ví dụ <head> <title> thẻ HTML cơ bản </title> <meta name="Keywords" content="HTML, Web Pages" /> <meta name="description" content="HTML cơ bản Tags" /> <base href="http://www.tutorialspoint.com" /> <link rel="stylesheet" type="text/css" href="tp.css" /> <script type="text/javascript"> _uacct = "UA-232293"; urchinTracker (); </script> </head> PHÂN KHỐI TRONG HTML - Phân khối phần tử HTML: hầu hết các phần tử HTML được định nghĩa là phân khối phần tử hoặc phần tử nội tuyến. Khối phần từ thông thường được bắt đầu và kết thúc với một dòng mới khi hiển thị trong một cửa sổ trình duyệt. Ví dụ như các phần tử: <h1> đến <h6> tạo dòng tiêu đề trong tài liệu html. Ta có thể đặt thuộc tính align để canh lề cho dòng tiêu đề. <p /> để ngắt đoạn cho tài liệu. Ta có thể canh lề align cho đoạn văn. <hr /> dùng để tạo ra một dòng ngang trong một trang HTML. Nó bao gồm các thuộc tính. Nó có các thuộc tính: align canh lề cho đường ngang. noshade đường ngang nét đồng nhất hay rỗng ở giữa. size kích cỡ chiều cao của đường ngang. width kích cỡ chiều dài của đường ngang. <br /> để ngắt dòng cho tài liệu. <table> được trình bày cụ thể dưới đây. - Phân dòng phần tử HTML: là phần tử xuất hiện trong một dòng mà không nhất thiết hiển thị ra trong một dòng mới trong trình duyệt. Ví dụ: ∙ Các phần tử định dạng văn bản. ∙ Các phần tử <td>, <img>, <a> - Phần tử <div> và <span>: - Phần tử <div>: là một phần tử mức khối được sử dụng như là một phần tử HTML khác. Phần tử đó không có chức năng gì đặc biệt ngoài việc nó là một yếu tố khối cấp mà trình duyệt sẽ hiển thị nó với ký tự ngắt dòng trước và sau nó. Nhưng khi thiết lập các thuộc tính style cho nó, nó sẽ định dạng một khối lớn nội dung trong nó. Hiện nay phần tử này được sử dụng phổ biến để bố trí tài liệu thay vì phải sử dụng phần tử <table> như xưa. Nó có thuộc tính canh lề align. - Phần tử <span>: là một phần tử ngoại tuyến được sử dụng như một phần tử HTML áp dụng cho văn bản. Và nó không có chức năng gì đặc biệt. Nhưng khi sử dụng cùng với css, nó góp phần thiết lập thuộc tính style cho một bộ phận văn bản trong đoạn văn. <!DOCTYPE html> <html> <body> <h3>Tiêu đề</h3> <p>Một đoạn.</p> <div style="color:#00FF00"> <h3>Tiêu đề</h3> <p>Một đoạn.</p> </div> </body> </html> <!DOCTYPE html> <html> <body> <p>My mother has <span style="color:lightblue;font- weight:bold">xanh lơ</span> màu mắt con người <span style="color:darkolivegreen;font- weight:bold">xanh lam</span> mắt.</p> </body> </html> ĐỊNH DẠNG VĂN BẢN Các phần tử định dạng văn bản chỉ ra cách hiển thị văn bản trong cửa sổ trình duyệt Web. <b> văn bản đậm <code> văn bản mã máy tính <abbr> định nghĩa viết tắt <big> văn bản lớn <kbd> văn bản bàn phím <acronym> định nghĩa viết tắt <em> văn bản nhấn mạnh <samp> văn bản mã máy <address> văn bản bản quyền <i> văn bản nghiêng <tt> văn bản đánh máy <bdo> văn bản định hướng <small> văn bản nhỏ <var> định nghĩa biến <blockquote> báo giá dài <strong> văn bản mạnh mẽ <pre> VB định dạng sẵn <q> báo giá ngắn <sub> văn bản lên trên <ín> văn bản chèn vào <cite> văn bản trích dẫn <sup> văn bản xuống dưới <del> văn bản xóa <dfn> Định nghĩa thuật ngữ SIÊU LIÊN KÊT VÀ CHÈN ẢNH VÀO WEBSITE Siêu liên kết là những phần tử bên trong tài liệu mà liên kết đến một vị trí hoặc đến một tài liệu hoàn toàn khác. Khi ta click vào siêu liên kết nó sẽ nhảy đến vị trí cần liên kết đến. - Liên kết trong: là liên kết kết nối đến các phần trong cùng một tài liệu hoặc cùng một website. - Liên kết ngoài: là liên kết kết nối đến các trang trên các website khác hoặc máy chủ khác. Để tạo siêu liên kết, cần xác định hai thành phần: - Địa chỉ đầy đủ hoặc URL của file được kết nối. - Điểm nóng cung cấp cho liên kết. Sử dụng siêu liên kết: Thẻ <a> được sử dụng để xác định văn bản hay hình ảnh sẽ dùng làm siêu liên kết trong tài liệu HTML. Thuộc tính href (tham chiếu siêu văn bản) được dùng để chỉ ra địa chỉ, URL của tài liệu hay file được liên kết. Cú pháp: <a href=protocol://host.domain: port/path/filename>Hypertext</a> Trong đó: - Protocol: giao thức sử dụng. Ta có một số loại giao thức như http (truyền siêu văn bản); telnet (mở một phiên telnet); gopher (tìm kiếm file); ftp (giao thức truyền file); mailto (gửi thư điện tử). - Host.domain: Địa chỉ Internet của máy chủ. - Port: Cổng phục vụ của máy chủ đích. - path/filename: Đường dẫn tới file. - Hypertext: Văn bản hay hình ảnh mà người dùng cần click vào để kích hoạt liên kết. Ngoài ra thẻ <a> còn một số thuộc tính khác như: coords xác định tọa độ của một liên kết. title tiêu đề liên kết. hreflang chỉ định ngôn ngữ của các tài liệu liên quan. name chỉ định tên của neo trong liên kết đến một điểm xác định của trang. rel xác định mối quan hệ giữa tài liệu hiện hành và tài liệu liên kết. rev xác định mối quan hệ giữa các tài liệu liên kết và tài liệu hiện tại. shape chỉ định hình dạng của một liên kết. Nó có thể nhận giá trị default (mặc định), rect (hình chữ nhật), circle (hình tròn), poly (hình đa giác). target chỉ định nơi để mở các tài liệu liên kết. Nó có thể nhận giá trị: _blank _parent _self _top framename 1. Liên kết văn bản: Liên kết đến một tài liệu khác - Giả sử ta có hai tài liệu trên đĩa cứng cục bộ doc1.html và doc2.html. Ta tạo liên kết từ doc1 sang doc2 như sau: <a href=”doc2.html”>Tới doc2</a> - Khi tới tài liệu khác ta nên cung cấp một đường dẫn để quay lại. - Lưu ý: khi các file ở cùng thư mục ta dùng đường dẫn tương đối, khi ở khác thư mục, ta dùng đường dẫn tuyệt đối. Sử dụng email - Cú pháp: <a href= mailto://this_person@mymail.com> Vào mail </a> Ví dụ: <a href= mailto://mai0214cs@yahoo.com> Liên hệ </a> Liên kết đến một điễm xác định trong cùng tài liệu - Khi click vào một đề tài nào đó (Topic Liên kết đến một điểm xác định ở tài liệu khác - Khi click vào một đề tài nào đó (Topic name) thì các chi tiết (marker) ở môt phần khác của tài liệu được hiển thị. Cú pháp: <a href=”#marker”>Topic name</a> Tại điểm cần liên kết đến ta đặt: <a name=”marker”></a> name) thì các chi tiết (marker) ở môt phần khác của tài liệu khác được hiển thị. Cú pháp: <a href=”doc2.html#marker”> Topic name </a> Tại điểm cần liên kết đến ta đặt ở trang doc2: <a name=”marker”></a> 2. Bản đồ ảnh: là hình ảnh trong đó các vùng khác nhau hoạt động như các liên kết. HTML cung cấp 3 phần tử để tạo một bản đồ hình ảnh. - Phần tử <map> xác định bản đồ hình ảnh. Nó cung cấp thuộc tính name để chỉ rõ tên của bản đồ hình ảnh. - Phần tử <area> chỉ rõ tọa độ ở khu vực bên trong hình ảnh sẽ hoạt động như một siêu liên kết và hình dạng của bản đồ hình ảnh. Nó có các thuộc tính: alt chỉ rõ văn bản được thay thế nếu bản đồ hình ảnh không xuất hiện. href chỉ rõ url của trang cần liên kết đến trong bản đồ ảnh. shape chỉ ra hình dạng có thể chọn. Nó có thể nhận giá trị: default mặc định rect hình chữ nhật circle hình tròn poly hình đa giác coords chỉ ra tọa độ của khu vực có thể bấm, nó phụ thuộc vào hình dạng được chỉ ra cho bản đồ hình ảnh. center_x, center_y, radius Hình tròn left_x, top_y, right_x, bottom_y Hình chữ nhật tùy chọn Đa giác target chỉ ra nơi liên kết được mở. - Phần tử <img>: chọn ảnh làm bản đồ ảnh. Nó gồm các thuộc tính: src chỉ ra đường dẫn đến hình ảnh. alt văn bản thay thế hình ảnh khi không xuất hiện. userma p nói đến tên bản đồ hình ảnh. align canh lề cho hình ảnh. border chiều rộng đường viền bao quanh hình ảnh. width xác định chiều rộng hình ảnh. height xác định chiều cao hình ảnh. hspace xác định khoảng trắng bên phải và bên trái của hình ảnh. vspace xác định khoảng trắng bên trên và bên dưới của hình ảnh. <!DOCTYPE html> <html> <body> <p>Click vào hành tinh:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> </body> </html> Với một tấm ảnh planets.gif thích hợp với bản đồ ảnh. ismap chỉ định kết nối đến một hình ảnh như một bản đồ hình ảnh phía máy chủ. Nó nhận giá trị ismap. longdes c chỉ định url của một hình ành chứa mô tả về hình ảnh. DANH SÁCH Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa - Là danh sách liệt kê các mục bằng ký hiệu chấm tròn trước mỗi mục. - Phần tử <ul> đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử <li> có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng dấu chấm tròn. Ta có thể thay đổi dấu chấm tròn bằng các ký hiệu khác bằng cách sử dụng thuộc tính type: square ■ disc ● circle ○ - là danh sách liệt kê các mục theo thứ tự số thay đổi qua các mục. - Phần tử <ol> đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử <li> có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự. Ta có thể thay đổi số thứ tự bằng các ký hiệu khác bằng cách sử dụng thuộc tính type: A ABC a abc I I,II,III i i,ii,iii Để bắt đầu từ số n trở lên ta dùng <ol start=n> </ol> - là một danh sách giống như một bảng từ vựng và bảng giải thích thuật ngữ lùi vào trong. - Phần tử <dl> đánh dấu bắt đầu và kết thúc danh sách. - Phần tử <dt> chỉ ra thuật ngữ cần định nghĩa. - Phần tử <dd> chỉ thuật ngữ dùng để định nghĩa. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <dl> <dt>Coffee</dt> <dd>đồ uống đen</dd> <dt>Milk</dt> <dd>đồ uống trắng</dd> </dl> Ta có thể kết hợp các loại danh sách trên. BẢNG BIỂU <table> Phần tử <table> dùng để đánh dấu vị trí bắt đầu và kết thúc của một bảng. Nó có các thuộc tính: - align: dùng để canh lề cho toàn bộ bảng. - bgcolor: dùng để canh lề cho toàn bộ bảng. - border: dùng để xác định độ dày đường viền bao quanh bảng. - cellpadding: dùng để xác định khoảng cách từ viền ô vào nội dung trong ô. - cellspacing: xác định khoảng cách giữa các ô trong bảng. - frame xác định tạo đường biên ngăn cách các ô. Nó có thể nhận các giá trị: above : phía trên hsides : trên và dưới. lhs : phía trái below : phía dưới vsides : trái và phải rhs : phía phải void : không hiển thị box : bao cả 4 bên border : bao cả 4 bên - rules: thước kẻ phân định các phần của bảng theo: none : không hiển thị đường groups :giữa các nhóm hàng, cột rows : giữa các hàng all :tất cả các hàng và cột cols : giữa các cột - summany: dùng để tóm nội dung của bảng, nó không được hiện trong trình duyệt nhưng có thể đọc bởi màn hình. - width: xác định độ rộng của bảng. Những thẻ dưới đây là thẻ con của thẻ <table>. <caption> dùng để tạo phần tiêu đề mô tả cho bảng. Nó thường nằm ngay dưới thẻ mở <table>. <th> dùng để tạo các dòng tiêu đề cho bảng. Nó thường nằm ngay ở dòng đầu tiên của bảng và nó được in đậm hơn. abbr tóm tắt nội dung của nhóm. align canh lề ngang cho dòng. valign canh lề dọc cho dòng. axis phân loại các ô trong tiêu đề. bgcolor xác định màu nền cho dòng tiêu đề. colspan ghép các ô trên cùng một hàng. rowspan ghép các ô trên cùng một cột. width thiết lập chiều rộng của dòng. height thiết lập chiều cao của dòng. scope thiết lập mối liên hệ giữa các hàng, cột, nhón. nowrap thiết lập hiển thị nếu phần tử bên trong không được hiển thị. <tr> dùng để định nghĩa một dòng trong bảng. Ta có thể đặt cho nó các thuộc tính sau align, valign, bgcolor. <td> dùng để định nghĩa một ô trong bảng, trong các dòng. Ta có thể đặt các thuộc tính abbr, align, valign, axis, bgcolor, colspan, rowspan, headers, width, height, nowrap, scope. <col> <colgroup> Nhóm các cột trong bảng để đặt cho một số thuộc tính nào đó như align, valign, width, span. <thead> Nhóm phần tiêu đề của bảng. <tfoot> Nhóm phần chân của bảng. <tbody> Nhóm phần thân của bảng. <!DOCTYPE html> <html> <body> <table width="100%" border="1"> <colgroup span="2" style="background-color:#FF0000;"></colgroup> <colgroup style="background-color:#0000FF;"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html> BIỂU MẪU - Phần tử <form> dùng để định nghĩa được biểu mẫu. Nó bao gồm các thuộc tính: action xác định nơi giữ dữ liệu khi biểu mẫu được gửi đi. accept chỉ định loại tập tin được máy chủ chấp nhận (khi gửi tập tin lên). accept-charset chỉ định danh sách các bảng mã ký tự được máy chủ chấp nhận. enctype xác định cách thức mã hóa dữ liệu khi nó được gửi lên máy chủ. method phương thức HTTP khi gửi dữ liệu lên là GET hay POST. name đặt tên của biểu mẫu. target Nơi nhận phản hồi sau khi gửi biểu mẫu. - Phần tử <input /> dùng để cho phép người dùng nhập dữ liệu vào. Nó thường nằm trong phần tử <form>. Nó bao gồm các thuộc tính: type Chọn kiểu nhập của phần tử. button: nút gửi biểu mẫu. text: nhập văn bản một dòng . submit: nút gửi biểu mẫu. password: nhập văn bản mã hóa. reset: nhập lại biểu mẫu. checkbox: hộp kiểm nhiều lựa chọn. image: tạo nút bằng hình ảnh. radio: hộp chọn cho phép một lựa chọn và có cùng tên. file: nút tải file lên. hidden: ẩn phần tử. accept chỉ định loại tập tin mà máy chủ chấp nhận. align canh lề cho phần tử nếu là kiểu image. alt văn bản thay thế nếu hình ảnh trong kiểu image không xuất hiện. checked chỉ định một phần tử được chọn nếu là kiểu checkbox hoặc radio. disabled không cho phép người dùng lựa chọn. maxlength xác định chiều dài tối đa của phần tử nếu kiểu là text hoặc password. name tên của phần tử <input> readonly chỉ cho phép người dùng đọc. size cỡ của phần tử. src chỉ định đường dẫn của hình ảnh nếu kiểu là image. value giá trị của phần tử. Ví dụ: <!DOCTYPE html> <html> <body> <form action="form_action.asp"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> <p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p> </body> </html> - Phần tử <select> cho phép tạo một hộp chọn sổ xuống. Nó có các thuộc tính: disabled Vô hiệu hóa việc lựa chọn. multiple Cho phép có nhiều lựa chọn cùng lúc. name Tên của phần tử size Kích cỡ số tùy chọn của phần tử. Trong phần tử này có các phần tử con là: + Phần tử <optgroup> cho phép nhóm các lựa chọn vào cùng kiểu. + Phần tử <option> dùng để định nghĩa một tùy chọn. Ví dụ: <!DOCTYPE html> <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </body> </html> Ngoài ra ta còn sử dụng một vài phần tử khác như: <textarea> định nghĩa một biểu mẫu cho phép nhập nhiều dòng. Nó có các thuộc tinhs: cols Chiều rộng của phần tử. rows Số dòng hiển thị khi nhập. disabled Vô hiệu hóa việc nhập phần tử. name tên của phần tử readonly chỉ cho phép đọc. <label> tạo một nhãn cho phần tử <input>. <fieldset> tạo một khung bao quanh biểu mẫu. <legend> Tạo một tiêu đề cho phần tử <fieldset>. <select> tạo một hộp chọn sổ xuống. <optgroup> t <option> <button> tạo một nút button. KHUNG - Phần tử <frameset> dùng để bố trí các khung hình trong từng trang web. - Phần tử <frame> dùng để bố trí một khung hình trong frameset. Cả hai phần tử trên giờ ít sử dụng vì nó ảnh hưởng tiêu cực đến trang Web. - Phần tử <iframe> dùng để hiển thị một trang web này trong một trang web khác. Trong xhtml một khung có thể bị dỡ bỏ nên ta nên sử dụng trong thuộc tính css. Các thuộc tính của phần tử này là: align canh lề cho khung hình. frameborder xác định có đặt đường viền bao quanh hay không. Nhận giá trị là 1 hay 0. height xác định chiều cao của khung hình. width xác định chiều rộng của khung hình. marginheight xác định khoảng trắng bên trên và dưới khung hình. marginwidth xác định khoảng trắng bên trái và phải khung hình. scrolling xác định xem có để thanh cuộn vào khung hình hay không. Nó có thể nhận giá trị là yes, no, auto. name xác định tên của khung hình src xác định trang web hiển thị trong khung hình. longdesc xác định một đường dẫn mô tả trang hiển thị trong khung. <!DOCTYPE html> <html> <body> <iframe src="http://www.w3schools.com"> <p>Your browser does not support iframes.</p> </iframe> </body> </html> CHÈN ĐỐI TƯỢNG VÀO TÀI LIỆU HTML - Phần tử <embed> cho phép bạn chèn một video vào trang web. <embed src=”đường_dẫn_đến_video” width=”chiều_rộng” height=”chiều cao” /> - Phần tử <bgsound> cho phép bạn chèn âm thanh vào trang web. <embed src=”đường_dẫn_đến_file_âm_thanh” loop=”số_lần_phát_lại” /> - Phần tử <object> dùng để nhúng đối tượng như video, audio, flash, tập tin dữ liệu, một trang web vào trong một trang web. Một số thuộc tính: + classid: là một chuỗi giá trị chỉ ra một bộ định danh lớp (class) duy nhất cho đối tượng. Lưu ý: chuỗi classid cho các điều khiển Microsoft ActiveX đã đăng ký là một chuỗi 32 bit có dạng “clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”. Ví dụ: * Thiết lập chương trình mặc định: {2559a1f7-21d7-11d4-bdaf-00c04f60b9f0} * Flash video: {D27CDB6E-AE6D-11cf-96B8-444553540000} * Windows Media Player 6.4 {22D6F312-B0F6-11D0-94AB-0080C74C7E95} + data:Chỉ ra một URL đến dữ liệu của đối tượng. + type:Chỉ ra dạng dữ liệu của dữ liệu được chỉ ra trong thuộc tính DATA. Ví dụ: <OBJECT data=“http://www.w3c.org” type=“text/html” width=350 height=“140”> This is the home page of W3C site.</OBJECT> - Phần tử <param> là phần tử rỗng dùng để thiết lập các giá trị cho các thuộc tính của đối tượng lúc thực thi (run-time), là lúc đối tượng đã được tải vào trong trang Web. Thuộc tính của PARAM + name: Chỉ ra tên của tham số, tên này đã được định nghĩa trước cho đối tượng. + value: Giá trị cho tham số Ví dụ: <OBJECT type=“audio/x-wav” width=350 height=“140”> <PARAM name=“src” value=“ding.wav”> <PARAM name=“autoplay” value=“true”> </OBJECT> CÁC THUỘC TÍNH CƠ BẢN CỦA HTML Các thuộc tính cơ bản của HTML được áp dụng cho hầu hết tất cả các phần tử HTML: - Thuộc tính cốt lõi: Áp dụng cho hầu hết các phần tử, ngoại trừ: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, và <title>. class Chỉ định một hoặc nhiều classname cho phần tử, nó được sử dụng nhiều trong CSS hay jQuery. id Chỉ định một id duy nhất cho phần tử. style Chỉ định thuộc tính CSS áp dụng cho phần tử. title Chỉ định thông tin thêm về phần tử. - Thuộc tính ngôn ngữ: Áp dụng cho hầu hết các phần tử, ngoại trừ: <base>, <br>,<frame>, <frameset>, <hr>, <iframe>, <param>, và <script>. dir Chỉ định hướng hiển thị văn bản cho phần tử. Có các giá trị: - ltr: phải qua trái. - rtl: trái qua phải. lang Chỉ định ngôn ngữ hiển thị nội dung phần tử. xml:lang Chỉ định ngôn ngữ hiển thị nội dung phần tử (đối với tài liệu XHTML). - Thuộc tính bàn phím: accesskey Chỉ định một phím tắt để kích hoạt, tiêu điểm vào phần tử. tabindex Chỉ định thứ tự tab vào một phần tử. THUỘC TÍNH SỰ KIỆN Thuộc tính sự kiện được thêm vào khi một sự kiện được kích hoạt trong một trình duyệt thì một kịch bản JavaScript được thực hiện: - Sự kiện tải file: được sử dụng với các phần tử <body> hay <frameset> onload Kịch bản được chạy khi một tài liệu được tải. onunload Kịch bản được chạy khi quá trình load tài liệu bị dừng. - Sự kiện Form: onfocus Kịch bản được chạy khi một phần tử nhận tiêu điểm onblur Kịch bản được chạy khi một phần tử mất tiêu điểm. onchange Kịch bản được chạy khi một phần tử thay đổi. onreset Kịch bản được chạy khi biểu mẫu được thiết lập lại. onselect Kịch bản được chạy với phần tử được chọn. onsubmit Kịch bản được chạy khi form được gửi đi. - Sự kiện hình ảnh: được sử dụng với phần tử <img> onabort Kịch bản được chạy khi tải một hình ảnh bị gián đoạn - Sự kiện bàn phím: được sử dụng với hầu hết các phần tử ngoại trừ base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, và title. onkeydown Kịch bản được chạy khi một phím được nhấn. onkeypress Kịch bản được chạy khi một phím được nhấn và thả ra. onkeyup Kịch bản được chạy khi một phím được thả ra. - Sự kiện chuột: được sử dụng với hầu hết các phần tử, ngoại trừ: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, và title. onclick Kịch bản được chạy khi click chuột. ondblclick Kịch bản được chạy khi click đúp chuột. onmousedown Kịch bản được chạy khi chuột được nhấn. onmousemove Kịch bản được chạy khi di chuyển chuột vào một điểm. onmouseout Kịch bản được chạy khi di chuyển chuột khỏi một phần tử. onmouseover Kịch bản được chạy khi di chuyển chuột vào một phần tử. onmouseup Kịch bản được chạy khi nhả chuột. BỐ CỤC WEBSITE Để tạo ra giao diện của một Website cho trang Web có ba cách bằng cách sử dụng phần tử <div>, <table> và <frame>. <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background- color:#FFA500;"> <h1 style="margin- bottom:0;">Banner</h1></div> <div id="menu" style="background- color:#FFD700;height:200px;width :100px;float:left;"> <!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background- color:#FFA500;"> <h1>Banner</h1> </td> </tr> <tr valign="top"> <td style="background- color:#FFD700;width:100px;text- align:top;"> <b>Menu</b><br /> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="background- color:#EEEEEE;height:200px;width :400px;float:left;"> Noi dung</div> <div id="footer" style="background- color:#FFA500;clear:both;text- align:center;"> Ban quyen Web </div> </div> </body> </html> HTML<br /> CSS<br /> JavaScript </td> <td style="background- color:#EEEEEE;height:200px;width:4 00px;text-align:top;"> Noi dung</td> </tr> <tr> <td colspan="2" style="background- color:#FFA500;text-align:center;"> Ban quyen Web</td> </tr> </table> </body> </html> Giả lớp được dùng để thêm một hiệu ứng đặc biệt cho phần tử chọn: bộ_chọn : tên_giả_lớp {thuộc_tính : giá_trị;} Các loại tên giả lớp như: :link chọn tât cả các liên kết viếng thăm thường xuyên :visited chọn tất cả các liên kết đã truy cập :active chọn tất cả liên kết hoạt động :hover chọn liên kết khi re chuột lên :focus chọn phần tử <input> nhận tiêu điểm. :first-letter chọn chữ cái đầu tiên của mọi phần tử <p> :first-line chọn dòng đầu tiên của tất cả các phần tử <p> :first-child chọn tất cả các phần tử <p> là phần tử con đầu tiên của nó. :before chèn nội dung trước mọi phần tử <p> :after chèn nội dung sau mọi phần tử <p> : lang(language) chọn tất cả các phần tử <p> với một giá trị thuộc tính lang(language). DHTML 1. Khái niệm: DHTML là viết tắt của Dymanic HTML là một ngôn ngữ hoặc một tiêu chuẩn Web, đó là sự kết hợp của HTML, Javascript, DOM và CSS. W3C cung cấp 4 tiêu chuẩn hỗ trợ cho việc xây dựng trang web động. - Hỗ trợ JavaScript: đây à ngôn ngữ kịch bản phổ biến nhất trên Internet, và nó có thể hoạt động trong tất cả các trình duyệt. DHTML sử dụng JavaScript để kiểm soát, truy cập các thao tác của phần tử HTML. - Hỗ trợ Document Object Model (DOM): là một mô hình đối tượng tài liệu, nó định nghĩa các tiêu chuẩn để truy cập và thao tác với tài liệu HTML, và DHTML sử dụng nó để truy cập và thao tác với các phần tử HTML. - Hỗ trợ sự kiện HTML: là một phần của DOM. DHTML sử dụng nó để tạo ra các phản ứng các sự kiện từ người dùng. - Hỗ trợ kiểu mẫu (CSS): dùng để định nghĩa cách hiển thị các phần tử trong trang HTML. DHTML và DOM sử dụng nó để thay đổi kiểu cách và vị trí của phần tử trong tài liệu HTML. 2. JavaScript: dùng để tạo ra nội dung HTML động. - Câu lệnh document.write() được sử dụng để viết ra một trang web. - Để thay đổi nội dung hoặc các thuộc tính của phần tử HTML: + Để thay đổi nội dung của một phần tử HTML: document.getElementById(id).innerHTML= nội_dung_mới; + Để thay đổi thuộc tính của một phần tử HTML: document.getElementById(id).thuộc_tính= giá_trị_mới; - JavaScript cũng có thể được thực thi khi một sự kiện xảy ra, như là việc khi người dùng nhấp vào một phần tử HTML. - JavaScript cũng có thể được dùng để thay đổi kiểu style của phần tử HTML. 3. DOM HTML: là mô hình đối tượng tài liệu HTML; một giao diện lập trình tiêu chuẩn cho HTML; nền tảng ngôn ngữ độc lập; theo tiêu chuẩn W3C. HTML DOM xác định đối tượng và thuộc tính của tất cả các phần tử HTML và giao thức để tiếp cận chúng. Tóm lại DOM HTML đưa ra tiêu chuẩn làm thế nào để có thể truy cập, thay đổi, thêm hoặc xóa các phần tử HTML. Thay đổi một phần tử HTML Thay đổi một thuộc tính HTML <!DOCTYPE html> <html> <body> <!DOCTYPE html> <html> <body> <h1 id="header">Old Header</h1> <script type="text/javascript"> document.getElementById("he ader").innerHTML="New Header"; </script> </body> </html> <img id="image" src="smiley.gif"> <script type="text/javascript"> document.getElementById("ima ge").src="landscape.jpg"; </script> </body> </html> 4. Sự kiện HTML: có thể được kích hoạt các hoạt động trong trình duyệt. Khi người dùng tạo ra một sử kiện trên một phần tử nào đó, một đoạn mã JavaScript được thực hiện. <!DOCTYPE html> <html> <head> <script type="text/javascript"> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text</h1> </body> </html> 5. CSS: JavaScript và HTML DOM có thể được sử dụng để thay đổi kiểu cách của bất kỳ một phần tử HTML nào. Thay đổi style của phần tử HTML hiện tại. Thay đổi style của phần tử HTML cụ thể Để thay đổi style của phần tử HTML hiện tại, ta sử dụng câu lệnh: this.style.thuộc_tính = giá_trị_mới; Ví dụ: <!DOCTYPE html> <html> <body> <h1 onclick="this.style.color= 'red'">Click Me!</h1> </body> </html> Để thay đổi style của một phần tử HTML cụ thể, ta dùng câu lệnh: document.getElementById(id).style = giá_trị_mới; <!DOCTYPE html> <html> <body> <h1 id="h1" onclick="document.getElementB yId('h1').style.color='red'"> Click Me!</h1> </body> </html> . CỤC TÀI LIỆU HTML < ;html& gt; Định nghĩa một tài liệu HTML. Ta có thể đặt thuộc tính xác định xhtml: xmlns="http://www.w3.org/1999/xhtml" <head> Định nghĩa phần thông tin của tài. của tài liệu html. <body> Định nghĩa phần thân của tài liệu html. Ta có thể đặt các thuộc tính: alink để đặt màu cho đối tượng liên kết trong tài liệu. bgcolor đặt màu nền cho tài liệu. backgroun d đặt. nền cho tài liệu. link đặt màu cho đối tượng được liên kết thường xuyên trong tài liệu. color đặt màu cho văn bản hiển thị trong tài liệu. vlink đặt màu cho các liên kết truy cập trong tài liệu. Cấu
Ngày đăng: 28/06/2014, 00:20
Xem thêm: Tài liệu về HTML căn bản potx, Tài liệu về HTML căn bản potx
