hoangthuylinh310
New Member
Download miễn phí Giáo trình HTML và thiết kế website
MỤC LỤC
LỜI MỞ ĐẦU 1
CHƯƠNG I. NHỮNG KHÁI NIỆM CƠ SỞ 9
I.1. World Wide Web là gì? 9
I.2. HTML là gì? 12
I.3. Các đặc điểm của siêu văn bản 13
I.3.1. Độc lập với phần cứng và phần mềm 13
I.3.2. Độc lập với khái niệm trang và thứ tự các trang 14
I.3.3. Website và trang chủ - homepage 14
I.4. Soạn thảo văn bản - những vấn đề chung 15
I.4.1. Trang mã nguồn HTML và trang Web 15
I.4.2. Các thẻ HTML 16
I.4.3. Các quy tắc chung 17
I.4.4. Cấu trúc của một tài liệu HTML 18
I.4.5. Các phần tử HTML (HTML element) 19
Bài tập 19
CHƯƠNG II. TRÌNH BÀY TRANG 20
II.1. Tạo tiêu đề 20
II.2. Thẻ trình bày trang 21
II.2.1. Một số thẻ chính 21
II.2.2. Các thuộc tính của thẻ trình bày trang 25
Bài tập 27
CHƯƠNG III. DANH SÁCH VÀ BẢNG TRONG HTML 28
III.1. Các kiểu danh sách 28
III.1.1. Danh sách không đánh số thứ tự 28
III.1.2. Danh sách đánh số thứ tự 29
III.1.3. Danh sách các định nghĩa 31
III.1.4. Danh sách phối hợp, lồng nhau 31
III.2. Bảng biểu 32
III.2.1. Khung cấu trúc 32
III.2.2. Một số lưu ý về bảng 33
III.2.3. Các ví dụ 37
Bài tập 40
CHƯƠNG IV. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML 41
IV.1. Hình ảnh tĩnh 41
IV.1.1. Tệp ảnh 41
IV.1.2. Thẻ
IV.2. Các thuộc tính của thẻ chèn hình ảnh 41
IV.2.1. Thuộc tính ALT 41
IV.2.2. Thuộc tính WIDTH và HEIGHT 42
IV.2.3. Thuộc tính ALIGN 43
IV.2.4. Thuộc tính VSPACE và HSPACE 43
Bài tập 44
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN 45
V.1. Thẻ neo và mối liên kết 45
V.1.1. Thuộc tính HREF 45
V.1.2. Liên kết ra ngoài – External Links 45
V.1.3. Địa chỉ tuyệt đối 46
V.1.4. Địa chỉ tương đối 46
V.1.5. Liên kết nội tại – Internal Link 46
V.2. Dùng hình ảnh làm đầu mối liên kết 47
V.2.1. Thay chữ bằng hình 47
V.2.2. Image Map - thẻ AREA 47
V.3. Đưa âm thanh vào tài liệu 48
V.3.1. Liên kết đến tệp âm thanh 48
V.3.2. Tạo âm thanh nền 48
V.4. Đưa Video vào tài liệu 49
V.4.1. Chèn tệp Video 49
V.4.2. Nhúng tệp video 49
Bài tập 50
CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG 51
VI.1. Màu nền và văn bản 51
VI.1.1. Đặt màu nền 51
VI.1.2. Màu chữ của văn bản 51
VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK 51
VI.1.4. Thuộc tính và mã màu 52
VI.2. Nạp hình ảnh làm nền cho trang văn bản 53
VI.2.1. Thuộc tính BACKGROUND 53
VI.2.2. Water mark 53
VI.2.3. Hãy ký tên vào tài liệu của mình 54
VI.3. Khung – Frames 55
VI.3.1. Trang trí khung 55
VI.3.2. Thành phần FRAMESET 56
VI.4. Thiết lập Target, thẻ NOFRAME và IFRAME 59
VI.4.1. Thiết lập Target 59
VI.4.2. Thẻ NOFRAMES 60
VI.4.2. Nhúng frame - thẻ IFRAME 60
Bài tập 61
CHƯƠNG VII. BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 62
VII.1. FORM 62
VII.1.1. FORM là gì? 62
VII.1.2.Các thành phần trong FORM 63
VII.1.3. Thêm tính cấu trúc cho FORM 70
VII.2. Cascading style sheet 72
VII.2.1. Inline Style 72
VII.2.2. Giới thiệu Style Sheet 74
VII.2.3. Javascript Style Sheet 75
VII.2.4. Thuật ngữ Style Sheet 77
VII.2.5. Các chú thích trong Style Sheet 92
VII.2.6. Lợi ích của các Style Sheet 92
VII.2.7. Kết hợp Style Sheet với HTML 93
VII.2.8. Thứ tự ưu tiên của các style (Cascading) 97
CHƯƠNG VIII. CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) 100
VIII.1. Tạo một trang Web 100
VIII.1.1. Bắt đầu sử dụng FrontPage2003 100
VIII.1.2. Tạo một trang từ một template 101
VIII.1.3. Tạo và lưu một trang mới 102
VIII.1.4. Tạo một đề mục 103
VIII.1.5. Chọn font và màu 104
VIII.2. Tổ chức một trang với các liên kết, danh sách và bảng 107
VIII.2.1. Thêm một hyperlink vào một trang Web 107
VIII.2.2. Tạo một danh sách 110
VIII.2.3. Tổ chức một trang với các bảng 112
VIII.2.4. Hiển thị hình ảnh trên một trang Web 120
VIII.2.5. Tạo một Web site mới 133
VIII.2.5.Khai thác site mới 135
VIII.3. Phát triển nhanh một site với các template 142
VIII.3.1. Chọn một template Web site 143
VIII.3.2. Tạo một Web site mới 144
VIII.3.3. Tạo tùy biến Web site mới của ta 145
VIII.3.4. Thêm và loại bỏ các lời chú thích 146
VIII.3.5. Khai thác template Personal Web Site 147
VIII.3.6. Thêm một tem thời gian vào một trang Web 148
VIII.3.7. Lưu các thay đổi sang một site 149
VIII.4. Tạo một site với sự trợ giúp của Wizard trong FrontPage 2003 150
VIII.4.1. Mở một wizard tạo site 150
VIII.4.2. Nhập một site hiện có vào FrontPage 152
VIII.4.3. Chọn một phương pháp import 152
VIII.4.4. Chọn vị trí để lưu site 155
VIII.4.5. Thu thập thông tin phản hồi từ các khách tham quan Web site của ta 156
VIII.4.6. Lưu thông tin phản hồi của khách tham quan sang một file 158
VIII.4.7. Nhận thông tin phản hồi của khách tham quan bằng email 160
Bài tập 161
BẢNG CÁC TỪ VIẾT TẮT .162
TÀI LIỆU THAM KHẢO.163
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
p JavaScript trong phần tử , ta phải xác định thuộc tính các thẻ của đối tượng tài liệu.Trong mô hình đối tượng tài liệu, các phần tử HTML được đối xử như các đối tượng. Một đối tượng có các thuộc tính và có thể được truy nhập để định nghĩa diện mạo và style của phần tử. Một thuộc tính trả về có thể hoạt động như một đối tượng với một tập các thuộc tính. Ví dụ, một trang Web được đối xử như một đối tượng tài liệu. Đối tượng tài liệu có một thuộc tính các thẻ. Thuộc tính các thẻ có một đối tượng H2. Đối tượng H2 có một thuộc tính gọi là color mà có thể được truy nhập và thay đổi khi được yêu cầu.
Document.tags.H2.color = “limegreen”
Ví dụ:
tags.P.fontSize = “25pt”;
tags.P.marginLeft = “15pt”;
tags.H2.color = “hotpink”;
This is an H2 element with a style applied
This is a paragraph element
Tất cả các phần tử khác đều thừa kế từ phần tử . Nếu ta muốn cung cấp một style mặc định cho tất cả các phần tử trong một tài liệu, ta có thể đặt style yêu cầu trong phần tử . Đoạn mã sau chạy trên trình duyệt netscape:
Ví dụ:
tags.body.color=”red”;
This is an H2 element
This is a paragraph element
Hình VII.3. Hỗ trợ một style bình thường
Ví dụ:
BODY {color:limegreen}
This is an H2 element
This is a paragraph element Nếu ta phải đặt nhiều thuộc tính cho một phần tử, ta có thể dùng cú pháp để rút ngắn lại mã:
with (tags.P) {
color=”hotpink”;
fontStyle=”italic”;
fontFamily=”helvetica”;
fontSize=”20pt”;
}
This is a paragraph element
VII.2.4. Thuật ngữ Style Sheet
Một cascading style sheet định nghĩa các style mà có thể được cung cấp cho các trang hay các phần tử trang.
Luật style - - Một cascading style sheet là một tập các luật. Một luật định nghĩa định dạng của tài liệu. Ví dụ, ta có thể tạo một luật style để quy định tất cả các xuất hiện với màu xanh.
Style Sheet - - là một danh sách các luật. Nó có thể được nhúng vào trong tài liệu HTML. Trong trường hợp đó nó được gọi là một style sheet nhúng. Một style sheet cũng có thể được tạo như một file bên ngoài và liên kết với tài liệu HTML. Các luật style có thể được cung cấp để lựa chọn các phần của một trang Web. Ví dụ, ta có thể quy định một đoạn văn bản xuất hiện dạng chữ đậm và nghiêng. Việc này được gọi là khai báo bên trong style (inline style declaration) nhờ đó các style được cung cấp để chia các phần tử HTML trên một trang Web.
Các luật - - Một style sheet có thể gồm một hay nhiều luật. Phần đầu của luật được gọi là Selector. Mỗi selector có cá thuộc tính và các giá trị kết hợp với nó.
Ví dụ:
A RuleSelector{Declarationsproperty: value; property: value; … }
Phần của luật kèm theo bên trong các ngoặc nhọn được gọi là Khai báo (Declaration). Một khai báo có hai phần, phần trước dấu hai chấm là thuộc tính (Property) và phần sau dấu hai chấm là giá trị (Value) của thuộc tính đó.
Các khai báo phân chia ra bởi dấu chấm phẩy (
. Ta không cần đặt một dấu phẩy chấm sau khai báo cuối cùng.Ví dụ: H1 {color:blue}
H1 là Selector, color:blue là khai báo.
Bên trong khai báo:
{Thuộc tính:Giá trị}
Color là thuộc tính, blue là giá trị.
Ta có thể đặt mỗi luật tách rời bên trong các thẻ STYLE. Trong trường hợp đó các header của ta sẽ được liệt kê.
Ví dụ:
H1{ color:limegreen }
H1{ font-family: Arial }
{ color: limegreen }
H2{ font-family:Arial }
This is the H1 element
This is the H2 element
This is the H3 element with its default style as displayed in the browser
Ta cũng có thể nhóm các luật. Mỗi khai báo được phân chia bởi một dấu chấm phẩy.
Ví dụ:
H1, H2{ color: limegreen;font-family: Arial;}
This is the H1 element
This is the H2 element
This is the H3 element with its default style as displayed in the browser
Hình VII.4. Luật nhóm
Các Selector
Selector có thể được định nghĩa như, “một xâu mà quy định các luật nào hỗ trợ cho các phần tử nào.
Có hai kiểu cơ bản của các selector
Các selector đơn giản (Simple selectors)
HTML Selectors
Class selectors
ID Selectors
Các selector ngữ cảnh (Contextual selectors)
a. Các selector đơn giản (Simple selectors)
Sử dụng dễ nhất. Nó mô tả một phần tử không kể vị trí của nó trong cấu trúc tài liệu. Quy định H1 là một selector đơn giản.
Ví dụ: H1 {color:blue}
HTML Selector
Seletor này sử dụng các tên của các phần tử HTML. Chỉ khác là ta loại bỏ các móc nhọn. Như vậy, thẻ HTML trở thành P. Trong ví dụ dưới đây, trong khi định nghĩa style, phần tử P không có các móc nhọn. Điều này bởi vì, phần tử HTML được đối xử như một selector.
Ví dụ:
P{font-style:italic; font-weight:bold;color:limegreen}
Ở đây các nội dung của được xác định. Phần tử được đối xử như một phần tử HTML.
This selectors use the names of HTML elements. The only fifference is that you remove the brackets.
Hình VII.5. Sử dụng một HTML selector
Class Selector
Các selector này dùng thuộc tính CLASS của các phần tử HTML. Mọi phần tử, mà thấy được, có một thuộc tính CLASS mà được dùng để gán một quy định. Thay vì ta có thể gán một quy định lớp cho nhiều phần tử của một kiểu đơn khi ta muốn hiển thị nhiều màu khác nhau. Trong trường hợp đó ta sẽ dùng một quy định lớp cho .
CLASS Selector được bắt đầu với một dấu chấm (.) gọi là ký tự cờ (flag), theo sau bởi ‘tên lớp’ của selector. Sẽ tốt hơn để chọn các tên lớp theo mục đích hơn là một tên mà mô tả màu hay style của họ. Ví dụ, ta có thể muốn đoạn A xuất hiện dạng chữ nghiêng, các đoạn khác xuất hiện với style khác, trong trường hợp đó đoạn A có thể có một quy định lớp.slant.
Ví dụ:
.water { color: blue }
.danger { color: red }
test water
test danger
no style
italic
Hình VII.6. Sử dụng CLASS selector
Ví dụ:
classes.water.all.color = “blue”
classes.danger.all.color = “red”
test water
test danger
no style
italic
Khi dùng cú pháp JavaScript, ta không thể dùng gạch nối bên trong các tên lớp. Bởi vì JavaScript đọc gạch nối như một dấu trừ (-) mà là một toán tử JavaScript. Các tên lớp không thể gồm bất kỳ toán tử JavaScript nào.
Khi định nghĩa một style class:
Ta có thể xác định các phần tử HTML nào có thể dùng style này
Ta có thể dùng từ khóa tất cả để cho tất cả các phần tử có thể dùng nó.
Ví dụ:
all.hotpink {color:hotpink;}
P.BLUE {color: blue; font-weight:bold;}
H5.red1 {color:red; font-weight:bold;}
This paragraph is blue.
This paragraph does not use the class BLUE.
This is an H5 element that tried to use the red1 class
This paragraph is hotpink.
This is an H5 element that has been allowed to use hotpink style.
Hình VII.7. Xác định các phần tử
Ví dụ:
classes.HOTPINK.all.color=”hotpink”;
classes.BLUE.P.color = “blue”;
classes.BLUE.P.fontWeight = “bold”;
classes.red1.H5.color = “red”;
classes.red1.H5.fontWeight = “bold”;
This paragraph is blue.
This paragraph does not use the class BLUE.
This an H5 element that tried to use the red1 class
This paragraph is hot pink.
This is an H5 element that has been allowed to use hotpink style.
ID Selector
Một ID Selector dùng thuộc tính ID của một phần tử HTML. Một ID selector được dùng để cung cấp một style cho một phần tử cụ thể trên trang Web. Ví dụ, ta có thể dùng một ID selector để cung cấp cho một tiêu đề . Không có nghĩa là cùng một style sẽ được cung cấp cho sự kiện khác của một phần tử trên cùng một trang, trừ khi chỉ rõ. Nó tương tự như việc dùng một inline style do đó một style được cung cấp cho một phần tử...