Chapter 5: DYNAMIC HYPERTEXT MARKUP LANGUAGE - DHTML - Giáo trình HTML căn bản - Đại học Tây Đô

Giáo trình hướng dẫn HTML căn bản theo chương trình Đại học.

Chương 4: DYNAMIC HYPERTEXT MARKUP LANGUAGE  - DHTML

>Click vào Đây để tải về máy 

key:

DYNAMIC HYPERTEXT MARKUP LANGUAGE - DHTML - DHTML – Giới thiệu • DHTML: HTML động • Được sử dụng cho việc mô tả sự kết hợp giữa HTML, các stylesheet và ngôn ngữ script làm cho tài liệu trở nên sinh động. DHTML – Các đặc điểm • Kiểu động (Dynamic Style): – Dùng bảng kiểu xác định lại các style (màu, kiểu chữ, kích thước, khoảng cách, thụt đầu dòng, vị trí xuất hiện của văn bản). – Các kiểu này có thể định thay đổi tùy theo tương tác của người dùng • Nội dung động (Dynamic content) – Thay đổi nội dung text, hình ảnh ... của trang đáp ứng lại dữ kiện nhập hay click chuột của người dùng DHTML – Các đặc điểm • Định vị (Positioning) – Xác định vị trí của các phần tử (thẻ) để có thể di chuyển. Định vị tuyệt đối: chỉ rõ vị trí chính xác theo các điểm pixels Định vị tương đối: chỉ ra vị trí tương đối của các phần tử theo vị trí hiện thời • Liên kết dữ liệu (Data Binding) – Kết nối với một cơ sở dữ liệu vào bảng của trang web. – Dữ liệu được hiển thị trong bảng và có thể sắp xếp, lọc và hiển thị phù hợp với yêu cầu 4 DHTML – Các đặc điểm • Có khả năng tải font chữ (Downloadable font) – Được Netscape hỗ trợ – Cho phép đóng gói font trong trang hoặc chèn font để đảm bảo văn bản luôn hiển thị theo font đã chọn • Viết kịch bản (Scripting) – Có thể viết các script để thay đổi nội dung, kiểu của trang web. – Các script này được lồng vào trang web DHTML – Các đặc điểm • Cấu trúc đối tượng (Object Structure) – HTML động theo một cấu trúc đối tượng – Các phần tử được đối xử như một đối tượng trong cấu trúc – Mỗi đối tượng có thể được truy cập và lập trình độc lập Chương 4 Cascading Style Sheet - CSS - Bảng kiểu (Style Sheet) • Bảng kiểu là nơi mà chúng ta có thể quản lý và điều khiển các kiểu “style” • Style sheet mô tả sự xuất hiện và trình diễn của một tài liệu HTML như khi nó được biểu diễn trên màn hình, thậm chí là khi in. • Bạn cũng có thể chỉ chính xác vị trí và sự xuất hiện của các phần tử trên trang và tạo các hiệu ứng đặc biệt Lợi ích của bảng kiểu • Nạp chồng trình duyệt (Override the browser ) • Bố trí trang (Page layout ) • Bảng kiểu có sử dụng lại (Style sheets can be re-used ) • Chỉ cần một lần thật tốt (One time effort) Bảng kiểu (Style Sheet) • Kiểu nội tuyến (Inline style) – Thông tin về kiểu được sử dụng nội tuyến(inline). – Bạn có thể nhúng vào trong thẻ của một phần tử HTML. – Thuộc tính STYLE áp dụng style sheet tới từng phần tử riêng lẻ. – Sử dụng thuộc tính Style, bạn có thể bỏ qua Style Element và đưa phần khai báo vào các thẻ bắt đầu. Thuật ngữ bảng kiểu • Qui tắc kiểu (Style Rule) – Qui tắc kiểu có thể ứng dụng vào các thành phần được chọn của trang web. – Khai báo kiểu có sẵn mà nhờ đó các kiểu được áp dụng vào các phần tử HTML đơn lẻ trên một trang web. • Bảng kiểu (Style Sheet ) – Danh mục các qui tắc kiểu và có thể nhúng vào bên trong tài liệu HTML. Trong trường hợp đó, nó được gọi là stylesheet nhúng. – Stylesheet cũng có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML. Thuật ngữ bảng kiểu • Tập hợp các qui tắc (Rules ) – Bảng kiểu có thể có một hay nhiều qui tắc. – Phần đầu của qui tắc gọi là bộ chọn (Selector). Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến nó. RuleSelector { Declarations property: value; property: value; ... } • Rút gọn Các bộ chọn (Selectors) • Bộ chọn (selector) là một chuỗi ký tự để nhận ra phần tử mà quy tắc áp dụng cho. Có hai kiểu selector cơ bản: – Bộ chọn đơn(Simple selectors) • Bộ chọn phần tử HTML (HTML element selectors) • Bộ chọn Class (Class selectors) • Bộ chọn ID (ID selectors) – Bộ chọn ngữ cảnh (Contextual selector) Bộ chọn đơn • Một selector đơn giản mô tả một phần tử bất kể vị trí của nó trong cấu trúc tài liệu. Từ định danh cho tựa đề H1 là một selector đơn giản H1 { color: blue } Bộ chọn HTML • Selector loại này sử dụng tên của các phần tử HTML. • Sự khác biệt duy nhất là bạn loại bỏ dấu ngoặc nhọn. Vì vậy thẻ HTML <p>trở thành P. Bộ chọn class • Những selector này sử dụng thuộc tính CLASS của các phần tử HTML. • Chúng ta có thể gán bộ nhận dạng lớp cho nhiều phần tử của một kiểu đơn khi ta muốn hiển thị các trạng thái khác nhau so với dạng chuẩn. • Bộ chọn CLASS có dấu chấm (.) đứng trước gọi là ký tự cờ, theo sau là tên lớp do chúng ta chọn Bộ chọn ID • Bộ chọn ID sử dụng thuộc tính ID của phần tử HTML. • Bộ chọn ID được dùng để áp dụng một kiểu vào riêng một phần tử nào đó trên trang Web • Bộ chọn ID được bắt đầu bằng dấu thăng (#). Bộ chọn ngữ cảnh • Bộ chọn theo ngữ cảnh chỉ đến ngữ cảnh của phần tử. • Điều này dựa trên khái niệm kế thừa, phần tử con kế thừa kiểu được gán cho thẻ cha. • Một ví dụ điển hình là phần tử <body>. Khi thêm một phần tử vào thẻ <body>, thì mỗi phần tử bên trong sẽ kế thừa các kiểu của <body>. Kết hợp bảng kiểu vào trong HTML • Phần tử STYLE (STYLE element ) • Thuộc tính Style (Style Attribute ) • Phần tử Link (Link element ) Các phần STYLE • Bạn có thể nhúng thông tin kiểu cần thiết bên trong tài liệu HTML.. • Sử dụng phần tử STYLE để nhúng thông tin. • Phần tử STYLE được chèn vào trong phần tử <head> của một tài liệu cùng với tất cả các quy tắc, được đặt giữa thẻ mở và thẻ đóng. <style Type = "text/css"> H1 {color:maroon;} P {color:hotpink; font-family:Arial;} </Style> Thuộc tính Style • Thuộc tính STYLE được dùng cho những bảng kiểu riêng lẻ của những phân tử. • Việc dùng thuộc tính Style chúng ta có thể bỏ qua kiểu phần tử và đặt khai báo trực tiếp bên trong cá nhân của thẻ đó <h2 style=“ color: green; font-family: Arial"> ... text ... </H2> Liên kết các bảng kiểu • Bảng kiểu “Style sheet” được tạo ra như các tài liệu và được liên kết đến tài liệu được yêu cầu. • Phần tử liên kết được dùng để bao gồm một tham chiếu đến một bảng kiểu “style sheet” được yêu cầu. <link REL = stylesheet HREF = “thuvien.css" Type = "text/css"> Các thuộc tính của bảng kiểu Attributes CSS name Font properties font font-size font-style Text properties text-align text-indent vertical-align Box properties border border-width border-bottom border-color Positioning properties left top z-index http://www.w3schools.com/css/