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ẻ <IMG > 41
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
hủ thuộc site trong trường text Web Site Location. FrontPage tỷ mỉ về địa chỉ: Thay vì sử dụng một địa chỉ chính chẳng hạn như www.example.com, nó cụ thể hơn và cũng tham chiếu tên của trang chủ (nói cách khác, một địa chỉ nào như www.example.com/index.html). Sau khi chọn một trong những phương pháp import, click Next để tiếp tục. Wizard được cập nhật để phản ảnh sự lựa chọn của ta. Nếu ta đang nhập một site từ một vị trí được bảo vệ bởi password, một hộp thoại Name and Password Required mở ra. Sử dụng các trường Name và Pasword để cung cấp thông tin đăng nhập của ta, và sau đó click OK. Sau khi chọn một phương pháp nhập, click Next. VIII.4.4. Chọn vị trí để lưu site Câu hỏi kế tiếp mà wizard có thể đặt ra là nơi để lưu site. Bởi vì ta đã chọn một thư mục, nó xuất hiện trong trường text trường Local Copy Location, trường này được tắt để ta không thể thay đổi nó. Tuy nhiên, có một cách để thay đổi một thực hiện một thay đổi nếu ta thay đổi ý định và chọn một thư mục khác: Hủy chọn hộp kiểm Add to Current Web Site. Trường Location Copy Location và nút Browse trở nên được chọn. Click nút Browse. Hộp thoại New Page Location xuất hiện. Sử dụng hộp thoại này để chọn (hoặc tạo) một thư mục mới nơi mà các file của site sẽ được lưu. Chọn thư mục và click Open. Hộp thoại đóng lại, đưa ta trở về wizard. Chọn hộp Add to Current Web Site. Click Next để đi đến câu hỏi kế tiếp. 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 Một trong những form dễ nhất để tạo là một trang phản hồi - một vị trí trong site của ta nơi những khách tham quan có thể gửi cho ta một lời nhận xét góp ý riêng tư. Điều này cung cấp một dịch vụ tiện lợi cho những khách tham quan của ta và có một ưu điểm thư hai – nó cho phép ta bỏ qua địa chỉ email của ta từ site của ta. Tại sao điều này lại hữu dụng? Khi ta bắt đầu xuất Web, bất kỳ địa chỉ email mà ta đặt trên một trang sẽ nhanh chóng được phát hiện bởi các spammer - những người tiếp thị email tạp nhạp lắp đầy các inbox bằng những lời đề nghị mang tính thương mại không cần thiết. Để tìm các địa chỉ để thêm vào các danh sách thư tín của họ, cá spammer thường xuyên sử dụng phần mềm để truy tìm các trang trên World Wide Web. Điều mà ta chắc chắn không thể tránh khỏi là site của ta sẽ được tìm thấy nhanh chóng bởi những chương trình này - thường là trong một thời gian ngắn từ một đến hai tuần. Bằng cách đặt một trang phản hồi thay vì địa chỉ của ta trên site của ta, ta sẽ giảm đi lượng spam mà ta nhận được. Để thêm một trang phản hồi vào site của ta, hãy thực hiện các bước sau: Mở site (nếu nó chưa được mở) và trên menu Standard chọn File ® New. Khung New mở nằm dọc theo cửa sổ biên soạn. Click hyperlink More Page Templates. Hộp thoại Page Templates mở ra, hiển thị các trang mà ta có thể tạo bằng cách sử dụng các template hoặc wizard. Chọn biểu tượng Feedback Form và click OK. Một trang phản hồi tạo sử dụng các màu, text và nền giống với phần còn lại của site. Nó mở trong cửa sổ biên soạn. Một đường chấm chấm biểu thị các đường viền của form. Mỗi phần của form phải được đặt trong đường biên soạn này. Ở đầu trang, một đoạn được tô màu đỏ tía mô tả form và cung cấp một số thông tin hướng dẫn về cách nó được sử dụng. Text này là một lời bình chú, text giải thích xuất hiện chỉ trong cửa sổ biên soạn của FrontPage chứ không phải khi một trang được xem trong một trình duyệt Web. (Để kiểm tra điều này, click nút Preview ben dưới cửa sổ biên soạn). Hình VIII.33. Hiệu chỉnh một trang phản hồi Để xóa lời chú thích, click nó một lần và nhấn phím Delete. Nếu ta muốn thay đổi cách diễn đạt của một câu hỏi, hiệu chỉnh nó như ta thường thực hiện đối với bất kỳ text khác trong FrontPage: Nhấp con trỏ trên trường và sử dụng bàn phím để thêm hoặc loại bỏ các thông tin. Việc định vị và định dạng các thành phần khác nhau của form cũng có thể được thay đổi giống như bất kỳ phần khác của một trang Web. Để xóa bất kỳ phần của form, kéo chuột lên trên nó và nhấn phím Delete Khi một trang phản hồi được tạo ra, FrontPage xác lập nó để lưu các câu trả lời sang file feedback.txt trong thư mục _private của Web site. Để thực thi điều này, ta phải xuất site của ta lên một Web server được trang bị bằng FrontPage Server Extensions hoặc SharePoint Servers, những cải tiến nhằm giúp những người sử dụng FrontPage thêm các tính năng đặc biệt (giống như vậy) vào các site của họ. Vào thời điểm này, ta có thể thay đổi cách thông tin phản hồi của khách tham quan được lưu như thế nào. Nó có thể được lưu sang một file theo nhiều dạng khác nhau hoặc gửi đến ta bằng một email. VIII.4.6. Lưu thông tin phản hồi của khách tham quan sang một file Những câu trả lời được thu thập trên một form có thể được lưu trữ trong một file trên Web server của ta theo ba dạng khác nhau: Text - Dạng này có thể được xem trong một bộ biên soạn text hoặc được tải trong một chương trình cơ sở dữ liệu và trang bảng tính, chẳng hạn như Microsoft Acccess và Microsoft Excel. HTML - Dạng này có thể được đọc bằng một trình duyệt. XML – Đây là một dạng phổ biến cho dữ liệu được tích hợp rộng rãi vào FrontPage 2003 và các chương trình còn lại của bộ Office. Để lưu thông tin phản hồi sang một file, hãy thực hiện những bước sau đây: Click phải ở bất cứ nơi nào trong các đường viền của form - đường chấm chấm được minh họa ban đầu ở hình trên. Chọn Form Properties từ menu ngữ cảnh. Hộp thoại Properties xuất hiện như được minh họa trong hình dưới. Hình VIII.34. Chọn cách lưu thông tin phản hồi của khách Thông tin phản hồi của khách tham quan sẽ được lưu dưới dạng text. Để chọn một dạng khác, click nút Options. Hộp thoại Saving Results xuất hiện. Sử dụng hộp File Format xổ xuống để chọn một dạng cho thông tin phản hồi: Để giúp ta đọc dễ dàng với Microsoft Excel và những chương trình cơ sở dữ liệu khác, hãy chọn Text Data-base Using Comma as a Separator. Điều này tạo một file text với phần mở rộng tên file.csv. Để đọc nó bằng một trình duyệt Web, một lựa chọn tốt là HTML hoặc Formatted Text Within HTML. Điều này tạo ra một file.html vốn sử dụng cùng một định dạng với các trang Web mà ta tạo bằng ForntPage. Để lưu theo dạng XML, chọn XML. Điều này tạo ra một file.xml. Click OK. Để chọn thư mục nơi file sẽ được lưu trữ ở đó, click nút Browse. Hộp thoại Current Web site xuất hiện. Sử dụng hộp thoại này để chọn một trong những thư mục trên site của ta. Click OK để đóng hộp thoại Form Properties. Form sẽ được xác lập để lưu trữ các thông điệp phản hồi trong một file được chỉ định. Nếu file này không hiện hữu khi một người nào đó sử dụng form phản hồi sẽ được tạo ra. VIII.4.7. Nhận thông tin phản hồi của khách tham quan bằng email Thông tin phản hồi cũng có thể được gửi đến ta bằng email thay vì được lưu trong một site của ta. Khi nó được gửi đến, nó trông giống như sau: Message Type: Suggestion Subject: Web Site Username: Sam Snett UserEmail: snett@samspublishing.com ContractRequested: ContacRequested Date: 22 Aug 2003 Time: 21:19:30 Comments: In this thing on? Trong email, các câu trả lời khác nhau trên form phản hồi được hiển thị trên các dòng riêng biệt. Trong ví dụ này, Sam Snett với địa chỉ email snett@samspublishing.com đã gửi một đề nghị với chủ đề “Web Site”. Mail hiển thị ở cuối. Sam đặt câu hỏi, “Is this thing on?” Thư phản hồi bắt nguồn từ một địa chỉ tự động trả lời được thiết lập bởi Web host của ta - ta có thể thay đổi địa chỉ này thành địa chỉ của người đang liên lạc với ta như một mô tả ở phần kế tiếp. Để gửi các trả lời phản hồi đến một địa chỉ email, hãy thực hiện các bước sau: Click chuột phải ở bất cứ nơi nào trong form và chọn Form Properties từ menu tắt vừa xuất hiện. Hộp thoại Form Properties mở ra. Nhập một địa chỉ email trong trường text E-mail Address. Địa chỉ này phải là địa chỉ email của ta hoặc địa chỉ của một người đang trả lời thư cho site của ta. Xóa bất kỳ text trong hộp Filename. Thông tin phản hồi sẽ được gửi bằng thư bằng cách sử dụng dạng của ví dụ SamSnett. Để chọn một dạng khác, click nút Options. Hộp thoại Saving Result xuất hiện. Click tab Email Result để đưa nó lên phía trước. Chọn một dạng trong hộp Email Format thả xuống. Các tùy chọn có sẵn giống như cá tùy chọn dành cho các file. Email phản hồi được cung cấp dòng chủ đề “Data posted to form 1”, theo sau là địa chỉ Web của trang phản hồi. Để xác lập một dòng chủ đề khác và giúp dễ dàng tìm những email này, hãy gõ nhập nó trong trường text Subject Line. Để tận dụng địa chỉ email của người đã điền đầy đủ thông tin vào form, nhập text UserEmail trong trường text Reply-To Line và chọn hộp kiểm Form Field Name nằm ngay kế bên nó (xem hình dưới). Hình VIII.35. Hộp thoại Saving Result Click OK để đóng hộp thoại Saving Results, và sau đó click OK để đóng hộp thoại Form Properties. Khi lưu kết quả của một form dưới dạng email, FrontPage có thể hiển thị một hộp thoại chỉ định rằng form không thể gửi kết quả bằng email và hỏi xem địa chỉ email có nên được loại bỏ hay không. Nếu ta biết rằng Web server của ta cung cấp các server Extensions hoặc SharePoint, hãy click No để giữ lại địa chỉ email và bỏ qua lời cảnh báo. Sau khi ta xuất trang phản hồi, nó sẽ hoạt động một cách chính xác. Bài tập Thay vì tự viết các thẻ HTML, hãy dùng công cụ FrontPage để tạo tất cả các trang Web cho các bài tập ở những chương trước. BẢNG CÁC TỪ VIẾT TẮT Browser: trình duyệt là chương trình đọc nội dung của file XML và hiển thị thông tin của file lên trên màn hình. Cascading Style Sheets: một ngôn ngữ khai báo cách hiển thị các phần tử trong file XML. Style sheet: là cách gọi tắt của Cascading Style Sheets nhưng nó ám chỉ đến một file chứa các khai báo style.7 HTML: Hyper Text Markup Language. WWW: World Wide Web Markup: Đánh dấu Language: Ngôn ngữ Text: Văn bản Rect: Hình chữ nhật Circle: Hình tròn Polygon: Hình tam giác Transparency: Độ trong suốt TÀI LIỆU THAM KHẢO [1] 24 bài tự học thiết kế Web với Front Page 2003, Thuận Thành, NXB Thanh niên. [2] HTML, DHTML and JavaScript, Aptech WorldWide’s book.
File đính kèm:
Giáo trình HTML và thiết kế Website.doc
