Giáo trình nhập môn HTML

Phần I Giới thiệu ngôn ngữ Html I. Các thẻ định cấu trúc tài liệu 1.1 HTML Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Cú pháp: Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường. 1.2 HEAD Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu. Cú pháp: 1.3 TITLE Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ . Cú pháp: 1.4 BODY Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên ... Phần mở đầu (HEADER) của tài liệu được đặt ở đây http:vndownloads.net © 2006 All right reserved .... phần nội dung của tài liệu được đặt ở đây Tiêu đề của tài liệu ... Nội dung của tài liệu kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ. Cú pháp: Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính: BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh. BGCOLOR= Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên. TEXT= Xác định màu chữ của văn bản, kể cả các đề mục. ALINK=,VLINK=,LIN K= Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, alink (active link) là liên kết đang được kích hoạt tức là khi đã được kích chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt; Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:http:vndownloads.net © 2006 All right reserved II. Các thẻ định dạng khối 2.1. thẻ P Thẻ

được sử dụng để định dạng một đoạn văn bản. Cú pháp: 2.2. Các thẻ định dạng đề mục H1H2H3H4H5H6 HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: ... Định dạng đề mục cấp 1 ... Định dạng đề mục cấp 2 ... Định dạng đề mục cấp 3 ... Định dạng đề mục cấp 4 ... Định dạng đề mục cấp 5 ... Định dạng đề mục cấp 6 2.3 Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tương ứng (), nó có tác dụng chuyển sang dòng mới. Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ 2.4 Thẻ PRE Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ . Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách)

Nội dung đoạn văn bản

http:vndownloads.net © 2006 All right reserved Cú pháp: III. Các thẻ định dạng danh sách 3.1. Danh sách thông thường Cú pháp: Có 4 kiểu danh sách: ` Danh sách không sắp xếp ( hay không đánh số)

Danh sách có sắp xếp (hay có đánh số)
, mỗi mục trong da nh sách được sắp xếp thứ tự.  Danh sách thực đơn  Danh sách phân cấp Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách không đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau: trong đó: TYPE =1 Các mục được sắp xếp theo thứ tự 1, 2, 3... =a Các mục được sắp xếp theo thứ tự a, b, c... Văn bản đã được định dạng
• Mục thứ nhất
• Mục thứ hai
  1. Muc thu nhat
  2. Muc thu hai
  3. Muc thu ba
     http:vndownloads.net © 2006 All right reserved =A Các mục được sắp xếp theo thứ tự A, B, C... =i Các mục được sắp xếp theo thứ tự i, ii, iii... =I Các mục được sắp xếp theo thứ tự I, II, III... Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách. Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục trong danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông). IV. Các thẻ định dạng ký tự 4.1. Các thẻ định dạng in ký tự Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt. ... ... In chữ đậm ... ... In chữ nghiêng ... In chữ gạch chân Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó. ... ... In chữ bị gạch ngang. ... In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ sẽ không có ý nghĩa.http:vndownloads.net © 2006 All right reserved ... In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ giảm dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ sẽ không có ý nghĩa. ... Định dạng chỉ số trên (SuperScript) ... Định dạng chỉ số dưới (SubScript) Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Thẻ không có thẻ kết thúc. ... Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,4...) so với font chữ hiện tại. 4.2. Căn lề văn bản trong trang Web Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, Hn, IMG... đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó. Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn giữa trang RIGHT Căn lề phải Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. Văn bản sẽ được căn giữa tranghttp:vndownloads.net © 2006 All right reserved 4.3. Các ký tự đặc biệt Ký tự được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất. Ký tự ; được sử dụng để tách các ký tự trong một từ. Ký tự Mã ASCII Tên chuỗi < 060 lt > 062 gt 038 amp 4.4. Sử dụng màu sắc trong thiết kế các trang Web Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau: RRGGBB trong đó: RR là giá trị màu Đỏ. GG là giá trị màu Xanh lá cây. BB là giá trị màu Xanh nước biển. Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu. Sau đây là một số giá trị màu cơ bản: Màu sắc Giá trị Tên tiếng Anh Đỏ Đỏ sẫm Xanh lá cây Xanh nhạt Xanh nước biển Vàng Vàng nhạt Trắng Đen Xám FF0000 8B0000 00FF00 90EE90 0000FF FFFF00 FFFFE0 FFFFFF 000000 808080 RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAYhttp:vndownloads.net © 2006 All right reserved Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân A52A2A FF00FF EE82EE FFC0CB FFA500 000080 4169E1 7FFFD4 BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE AQUAMARINE
     http://vndownloads.net © 2006 All right reserved Phần I Giới thiệu ngôn ngữ Html I Các thẻ định cấu trúc tài liệu 1.1 HTML Cặp thẻ sử dụng để xác nhận tài liệu tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Toàn nội dung tài liệu đặt cặp thẻ Cú pháp: Toàn nội tài liệu đặt Trình duyệt xem tài liệu không sử dụng thẻ tệp tin văn bình thường 1.2 HEAD Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu Cú pháp: Phần mở đầu (HEADER) tài liệu đặt 1.3 TITLE Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Cú pháp: Tiêu đề tài liệu 1.4 BODY Thẻ sử dụng để xác định phần nội dung tài liệu - phần thân (body) tài liệu Trong phần thân chứa thông tin định dạng định để đặt ảnh cho tài liệu, màu nền, màu văn siêu liên http://vndownloads.net © 2006 All right reserved kết, đặt lề cho trang tài liệu Những thông tin đặt phần tham số thẻ phần nội dung tài liệu đặt Cú pháp: Trên cú pháp thẻ BODY, nhiên HTML 3.2 có nhiều thuộc tính sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh Nếu kích thước ảnh nhỏ cửa sổ trình duyệt tồn hình cửa sổ trình duyệt lát kín nhiều ảnh BGCOLOR= Đặt mầu cho trang hiển thị Nếu hai tham số BACKGROUND BGCOLOR có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía TEXT= Xác định màu chữ văn bản, kể đề mục ALINK=,VLINK=,LIN K= Xác định màu sắc cho siêu liên kết văn Tương ứng, alink (active link) liên kết kích hoạt - tức kích chuột lên; vlink (visited link) liên kết kích hoạt; Như tài liệu HTML có cấu trúc sau: Tiêu đề tài liệu Nội dung tài liệu http://vndownloads.net © 2006 All right reserved II Các thẻ định dạng khối 2.1 thẻ P Thẻ

     sử dụng để định dạng đoạn văn Cú pháp:

     Nội dung đoạn văn bản

     2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục khn dạng thích hợp Có thể trình duyệt font chữ 14 point sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thường văn đề mục cấp hay cấp thường có kích thước nhỏ văn thông thường Dưới thẻ dùng để định dạng văn dạng đề mục: Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp 2.3 Thẻ xuống dòng BR Thẻ khơng có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dịng Lưu ý, nội dung văn tài liệu HTML trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng coi khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 2.4 Thẻ PRE Để giới hạn đoạn văn định dạng sẵn bạn sử dụng thẻ Văn hai thẻ thể giống hệt chúng đánh vào, ví dụ dấu xuống dịng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dịng (trình duyệt khơng coi chúng dấu cách) http://vndownloads.net © 2006 All right reserved Cú pháp: Văn định dạng III Các thẻ định dạng danh sách 3.1 Danh sách thông thường Cú pháp:
     • Mục thứ
     • Mục thứ hai
     Có kiểu danh sách: ` Danh sách không xếp ( hay khơng đánh số)
     Danh sách có xếp (hay có đánh số)
     , mục da nh sách xếp thứ tự  Danh sách thực đơn  Danh sách phân cấp Với nhiều trình duyệt, danh sách phân cấp danh sách thực đơn giống danh sách khơng đánh số, dùng lẫn với Với thẻ OL ta có cú
     1. Muc thu nhat
     2. Muc thu hai
     3. Muc thu ba
     pháp sau: đó: TYPE =1 Các mục xếp theo thứ tự 1, 2, =a Các mục xếp theo thứ tự a, b, c http://vndownloads.net © 2006 All right reserved =A Các mục xếp theo thứ tự A, B, C =i Các mục xếp theo thứ tự i, ii, iii =I Các mục xếp theo thứ tự I, II, III Ngoài cịn thuộc tính START= xác định giá trị khởi đầu cho danh sách Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mục danh sách Thuộc tính nhận giá trị : disc (chấm tròn đậm); circle (vịng trịn); square (hình vng) IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự Sau thẻ sử dụng để quy định thuộc tính in nghiêng, in đậm, gạch chân cho ký tự, văn thể trình duyệt In chữ đậm In chữ nghiêng In chữ gạch chân Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt In chữ bị gạch ngang In chữ lớn bình thường cách tăng kích thước font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ khơng có ý nghĩa http://vndownloads.net © 2006 All right reserved In chữ nhỏ bình thường cách giảm kích thước font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ khơng có ý nghĩa Định dạng số (SuperScript) Định dạng số (SubScript) Định nghĩa kích thước font chữ sử dụng hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ khơng có thẻ kết thúc Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thước tuyệt đối (nhận giá trị từ đến 7) tương đối (+2,-4 ) so với font chữ 4.2 Căn lề văn trang Web Trong trình bày trang Web bạn ln phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng P, Hn, IMG có tham số ALIGN cho phép bạn lề văn nằm phạm vi giới hạn thẻ Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn trang RIGHT Căn lề phải Ngoài ra, sử dụng thẻ CENTER để trang khối văn Văn trang http://vndownloads.net © 2006 All right reserved 4.3 Các ký tự đặc biệt Ký tự & sử dụng để chuỗi ký tự sau xem thực thể Ký tự ; sử dụng để tách ký tự từ Ký tự Mã ASCII Tên chuỗi < < < > > > & & & 4.4 Sử dụng màu sắc thiết kế trang Web Một màu tổng hợp từ ba thành phần màu chính, là: Đỏ (Red), Xanh (Green), Xanh nước biển (Blue) Trong HTML giá trị màu số nguyên dạng hexa (hệ đếm số 16) có định dạng sau: #RRGGBB đó: RR - giá trị màu Đỏ GG - giá trị màu Xanh BB - giá trị màu Xanh nước biển Màu sắc xác định qua thuộc tính bgcolor= hay color= Sau dấu giá trị RGB hay tên tiếng Anh màu Với tên tiếng Anh, ta 16 màu với giá trị RGB ta tới 256 màu Sau số giá trị màu bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY http://vndownloads.net © 2006 All right reserved Nâu #A52A2A BROWN Tím #FF00FF MAGENTA Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải quân #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE Cú pháp: phần nội dung tài liệu đặt Sau ý nghĩa tham số thẻ BODY: Các tham số ý nghĩa LINK Chỉ định màu văn siêu liên kết ALINK Chỉ định màu văn siêu liên kết đang chọn VLINK Chỉ định màu văn siêu liên kết mở BACKGROUN D Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu = url = pixels = pixels = pixels http://vndownloads.net © 2006 All right reserved TEXT Chỉ định màu văn tài liệu SCROLL YES/NO - Xác định có hay khơng cuộn TOPMARGIN Lề RIGHTMARGI N Lề phải LEFTMARGIN Lề trái 4.5 Chọn kiểu chữ cho văn Cú pháp: 4.6 Khái niệm văn siêu liên kết Văn siêu liên kết hay gọi siêu văn từ, cụm từ hay câu trang Web dùng để liên kết tới trang Web khác Siêu văn mơi trường chứa liên kết (link) thông tin Do WWW cấu thành từ nhiều hệ thống khác nhau, cần phải có quy tắc đặt tên thống cho tất văn Web Quy tắc đặt tên URL (Universal Resource Locator) Các thành phần URL minh hoạ hình  Dịch vụ: Là thành phần bắt buộc URL Nó xác định cách thức trình duyệt máy khách liên lạc với máy phục vụ để nhận liệu Có nhiều dịch vụ http, wais, ftp, gopher, telnet  Tên hệ thống : Là thành phần bắt buộc URL Có thể tên miền đầy đủ máy phục vụ phần tên đầy đủ – trường hợp xảy văn yêu cầu nằm miền bạn Tuy nhiên nên sử dụng đường dẫn đầy đủ  Cổng : Không thành phần bắt buộc URL Cổng địa socket mạng dành cho giao thức cụ thể Giao thức http ngầm định nối với cổng 8080 http://vndownloads.net © 2006 All right reserved  Đường dẫn thư mục : Là thành phần bắt buộc URL Phải đường dẫn tới file yêu cầu kết nối với hệ thống Có thể đường dẫn URL khác với đường dẫn thực hệ thống máy phục vụ Tuy nhiên rút gọn đường dẫn cách đặt biệt danh (alias) Các thư mục đường dẫn cách dấu gạch chéo (/)  Tên file : Không thành phần bắt buộc URL Thông thường máy phục vụ cấu hình cho khơng tên file trả file ngầm định thư mục yêu cầu File thường có tên index.html, index.htm, default.html hay default.htm Nếu khơng có file thường kết trả danh sách liệt kê file hay thư mục thư mục yêu cầu  Các tham số : Không thành phần bắt buộc URL Nếu URL yêu cầu tìm kiếm sở liệu truy vấn gắn vào URL, đoạn mã đằng sau dấu chấm hỏi (?).URL trả lại thông tin thu thập từ form Trong trường hợp dấu thăng (#) xuất đoạn mã đăng sau tên vị trí (location) file Để tạo siêu văn sử dụng thẻ Cú pháp: siêu văn ý nghĩa tham số: HREF Địa trang Web liên kết, URL NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thứ tự di chuyển ấn phím Tab TITLE Văn hiển thị di chuột siêu liên kết TARGET Mở trang Web liên cửa sổ (_blank) cửa sổ (_self), frame (tên frame) http://vndownloads.net © 2006 All right reserved 2.3 List Chọn Format/Bullets and Numbering Sau hộp hội thoại xuất hiện, bạn hóy chọn cỏc dạng bullet numbering tương ứng Để thay đổi cỏc thuộc tớnh bullet màu sắc, kiểu chữ, …, ta chọn Format/Bullets and Numbering/Style Ngoài ra, ta cũn cú thể chọn hỡnh ảnh để thay cho cỏc kiểu bullet thụng thường Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, chọn ảnh dựng để làm bullet Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets 2.4 Tables Người ta thường dựng table để: Hiển thị cỏc thụng tin cú dạng dũng/cột, vớ dụ bảng thời khúa biểu, thụng tin sản phẩm, Trỡnh bày (layout) cỏc văn bản(text) cỏc ảnh đồ họa(graphics) Để tạo bảng, ta cú thể dựng hai cỏch: Chọn Table/Insert Table Khi hộp hội thoại tạo bảng ra, bạn phải cung cấp cỏc thụng tin chi tiết cho việc tạo bảng, vớ dụ số dũng, số cột, kớch thước, Chọn Table/Draw Table Với chức này, bạn dựng bỳt vẽ để tạo cỏc dũng, cột Để khụng (hide) border bảng, ta click phải chuột lờn table, chọn Table Properties/Border/Sizes Để tỏch cell hay trộn nhiều cell lại, ta chọn Tabe chọn Split /Merge Cells Để thờm xúa cỏc cell, ta chọn Table chọn Insert/Delete Cells 2.5 Một số hiệu ứng đặc biệt Chuyển trang (Page transition): Chọn Format/Page Transition… Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee Sau hộp thoại ra, bạn gừ vào dũng chữ cần chuyển động đặt cỏc thuộc tớnh khỏc màu sắc, font chữ, … Thờm hiệu ứng font chữ cho cỏc hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau đú bạn cú thể chọn cỏc màu theo ý muốn http://vndownloads.net © 2006 All right reserved 2.6 Chốn ảnh Chọn chức Insert/Picture/From File Đặt thuộc tớnh kớch thước ảnh, click phải chuột lờn ảnh, chọn Picture Properties Để tạo cỏc hotspot hyperlink, ta chọn hỡnh vẽ tương ứng (hỡnh chữ nhật, ellipse, …) trờn toolbar pictures Chọn vựng trờn ảnh, điền thụng tin hyperlink vào 2.7 Chốn hyperlink Chọn chức Insert/Hyperlink Sau hộp thoại ra, gừ vào hyperlink tương ứng Cú dạng: Địa Internet, cú dạng: http://… Vớ dụ: http:// www.yahoo.com Liờn kết tới trang site, cú dạng: /thư mục/tờn tập tin Vớ dụ: /images/shopping.htm Liờn kết chớnh trang, đặt bookmark Định dạng trang Click phải chuột lờn trang, chọn Page Properties Để đặt màu cho trang, chọn Background/Colors/Background Để đăt ảnh cho trang, chọn Background/Formatting/Background picture Để đặt cỏc thụng số màu sắc cho hyperlink, chọn Background/Colors/Hyperlink Để đặt tiờu đề cho trang chọn General/Title http://vndownloads.net © 2006 All right reserved II THỰC HÀNH Tạo trang web cho nhúm Khởi động Microsoft Front Page 2000 Soạn trang web cỏ nhõn nhúm đặt tờn InfoGroup.htm (vớ dụ nhúm lấy tờn InfoGroup1.htm) Cỏc thụng tin chớnh cỏc thành viờn nhúm bao gồm: Họ tờn, Cụng việc chức vụ nay, Địa liờn lạc, Điện thoại, Fax, Email, Mobile Phone, Ngoài cỏc nhúm cú thể bổ sung cỏc thụng tin khỏc Upload trang web soạn lờn website Thử truy cập trang web tải lờn Tham khảo cỏc site thụng tin Việt Nam http://vnexpress.net/ http://www.vnn.vn/ http://www.vdc.com.vn Tham khảo cỏc site bỏn hàng tiếng http://shopping.yahoo.com http://www.amazon.com Tham khảo cỏc site giải trớ http://greetings.yahoo.com http://www.vnn.vn/ecards/ http://www.fpt.vn/Postcard/main.asp http://www.geraldstevens.com/ http://www.1800flowers.com/ Tham khảo cỏc site lao động việc làm VN http://203.162.5.43/ld2000/ http://www.vietname-business.com/jobnld/ http://www.jobsonline.saigonnet.vn/ Tạo trang web chứa cỏc hyperlink dựng để truy cập nhanh Tạo trang web đặt tờn Links.htm chứa cỏc hyperlink đề cập trờn Bổ sung thờm cỏc hyperlink cỏc phõn loại khỏc mà cỏc anh chị biết Upload lờn website kiểm tra lại http://vndownloads.net © 2006 All right reserved Tạo trang HomePage Tạo trang web HomePage đặt tờn Default.htm giới thiệu nhúm cỏc cụng việc mà nhúm triển khai Kết nối hai trang tạo vào HomePage Upload lờn website kiểm tra lại Chọn chủ đề để thiết kế website Website dịch vụ việc làm Website dịch vụ nhà đất (http://www.nhadat.com) Website bỏo điện tử (http://vnexpress.net ) Website trường học Website bỏn hàng (cửa hàng, siờu thị ảo trờn Internet) Website dịch vụ giải trớ ECards, Điện hoa, Cỏc chủ đề khỏc http://vndownloads.net © 2006 All right reserved III ĐĂNG KÍ WEBSITE MIỄN PHÍ TRấN INTERNET Vào địa http://www.freeservers.com để đăng kớ website miễn phớ với địa truy cập cú dạng http://.freeservers.com Gừ vào địa mà bạn dự định đăng kớ ụ yourname Sau đú click Go Màn hỡnh ra, bạn chọn mục cuối cựng 100% Free Hosting Option click vào SignUp http://vndownloads.net © 2006 All right reserved Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết Họ tờn, mật khẩu, email, … Cuối cựng gừ vào ARTK để bạn đồng ý với cỏc qui định FreeServers cung cấp dịch vụ miễn phớ Nếu đăng kớ thành cụng, hỡnh sau để cung cấp cho bạn số lựa chọn xõy dựng website mỡnh http://vndownloads.net © 2006 All right reserved http://vndownloads.net © 2006 All right reserved IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) http://vndownloads.net © 2006 All right reserved Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) http://vndownloads.net © 2006 All right reserved http://vndownloads.net © 2006 All right reserved Thiết kế website theo mẫu sau (http://vnexpress.net) Thiết kế website theo mẫu sau (http://www.codeproject.com) http://vndownloads.net © 2006 All right reserved http://vndownloads.net © 2006 All right reserved Thiết kế website theo mẫu sau (http://www.bttvn.com ) Để tham khảo cỏch thiết kế cỏc trang web trờn, hóy: Tải mỏy cỏch chọn chức Save IE Dựng MS Front Page để mở tập tin lưu lờn Chuyển qua lại cỏc hỡnh Normal View HMTL View để biết cỏch thiết kế Với trang web xem hóy chỳ ý cỏc vấn đề sau: Cỏch bố trớ cỏc bảng (table) Cỏch sử dụng font chữ Cỏch chốn vào cỏc hỡnh ảnh để trang trớ Cỏch định nghĩa cỏc thuộc tớnh màu chữ, màu nền, Phần tĩnh (khụng thay đổi) click vào cỏc hyperlink chuyển qua nội dung Từ cỏc trang web trờn, hóy tự thiết kế cỏc trang cho website nhúm http://vndownloads.net © 2006 All right reserved Phần I Giới thiệu ngôn ngữ Html I Các thẻ định cấu trúc tài liệu 1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY II Các thẻ định dạng khối 2.1 thẻ P 2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 2.3 Thẻ xuống dòng BR 2.4 Thẻ PRE III Các thẻ định dạng danh sách 3.1 Danh sách thông thường IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự 4.2 Căn lề văn trang Web 4.3 Các ký tự đặc biệt 4.4 Sử dụng màu sắc thiết kế trang Web 4.5 Chọn kiểu chữ cho văn 4.6 Khái niệm văn siêu liên kết 4.7 Địa tương đối 11 4.8 Kết nối mailto 11 4.9 Vẽ đường thẳng nằm ngang 12 V Các thẻ chèn âm thanh, hình ảnh 12 5.1 Giới thiệu 12 5.2 Đưa âm vào tài liệu HTML 14 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML 15 VI Các thẻ định dạng bảng biểu 16 VII FORM 18 7.1 HTML Forms 18 7.2 Tạo Form 18 http://vndownloads.net © 2006 All right reserved 7.3 Tạo danh sách lựa chọn 19 7.4 Tạo hộp soạn thảo văn 19 Phần II thiết kế web sử dụng ms frontpage 20