Bài giảng thiết kế Website

TRƯỜNG ĐẠI HỌC NHA TRANG TRUNG TÂM NC&PT CÔNG NGHỆ PHẦN MỀM Baøi giaûng THIEÁT KEÁ WEB CÔ BAÛN TỚI TRANG 18 RÙI NHA TRANG, 11/2008 MỤC LỤC Chương 1. GIỚI THIỆU MẠNG INTERNET 4 1.1. Lịch sử mạng Internet 4 1.2. Một số khái niệm và thuật ngữ thông dụng 4 1.3. Một số yêu cầu khi soạn thảo web 5 1.3.1. Một số yêu cầu 5 1.3.2. Tổ chức Website 5 1.3.3. Qui ước đặt tên file 6 Chương 2. THIẾT KẾ TRANG WEB VỚI HTML 8 2.1. Giới thiệu ngôn ngữ HTML 8 2.2. Một số thẻ cơ bản của HTML 9 2.2.1. Định dạng trang 9 2.2.2. Định dạng đoạn văn bản (paragraph) 11 2.2.3. Định dạng ký tự 13 2.2.4. Định dạng siêu liên kết (hyperlink) 14 2.2.5. Thẻ định dạng danh sách liệt kê (List) 15 2.3. Định dạng bảng biểu (Tables) 17 2.4. Chèn âm thanh, hình, phim ảnh 19 2.5. Định dạng một số ký tự đặc biệt 20 2.6. Chuyển hướng trang tự động 20 2.7. Frame 20 2.7. Form 22 2.7.1. Tạo form 22 2.7.2. Tạo các đối tượng trên form 23 Chương 3. THIẾT KẾ TRANG WEB BẰNG FRONTPAGE XP 27 3.1. Giới thiệu 27 3.2. Các thao tác chính khi soạn thảo một trang web 27 3.2.1. Tạo trang web mới 27 3.2.2. Lưu trang web 27 3.2.3. Mở trang web đã có: 28 3.2.4. Xem trước kết quả hiển thị của trang web đang thiết kế: 28 3.3. Định dạng 28 3.3.1. Định dạng trang 28 3.3.2. Định dạng ký tự 29 3.3.3. Định dạng đoạn văn bản 30 3.3.4. Định dạng bullet and numbering 30 3.4. Chèn các đối tượng vào trang web 30 3.4.1. Chèn một file văn bản 30 3.4.2. Chèn ký tự đặt biệt 30 3.4.3. Chèn đường kẻ ngang (Horizontal line) 30 3.4.4. Chèn thời gian cập nhật 31 3.4.5. Chèn hình ảnh vào trang web 31 3.5. Tạo liên kết (Hyperlink) 31 3.5.1. Tạo liên kết trong cùng một trang (Bookmark) 32 3.5.2. Tạo liên kết giữa các trang (Hyperlink) 32 3.5.3. Tạo liên kết dạng bản đồ ảnh 33 3.5.4. Thay đổi liên kết 34 3.5.5. Xóa liên kết 34 3.6. Một số hiệu ứng đặc biệt 34 3.6.1. Tạo chữ cuộn (Marquee) 34 3.6.2. Hiển thị số lần truy cập trang web (Hit counter) 35 3.7. Bảng biểu (Table) 35 3.7.1. Tạo bảng 35 3.7.2. Chèn bảng biểu, hàng, cột: 37 3.7.3. Xóa hàng, cột, ô: 38 3.7.4. Gộp, chia ô: 38 3.8. Khung (Frames) 39 3.8.1. Sơ lược về frame 39 3.8.2. Tạo frame 39 3.8.3. Quản lý frame 40 3.9. Forms 42 3.9.1. Tạo form 42 3.9.2. Tạo các đối tượng trên form 42 3.10. Giới thiệu một số phần mềm hỗ trợ thiết kế web 47 Chương 4. ĐƯA WEBSITE LÊN MẠNG INTERNET 52 4.1. Giới thiệu về upload 52 4.2. Đăng ký tên miền miễn phí với website namezero 53 BÀI TẬP THỰC HÀNH 54 PHỤ LỤC. BẢY BƯỚC THIẾT KẾ TRANG WEB ẤN TƯỢNG VÀ HIỆU QUẢ 58 TÀI LIỆU THAM KHẢO 62 Chương 1. GIỚI THIỆU MẠNG INTERNET Lịch sử mạng Internet Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969. Mục đích chính của mạng này là tạo cơ sở cho các máy tính nghiên cứu của các trường đại học có thể kết nối và trao đổi với nhau. Mạng Internet và ngày nay đã trở thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới. Mạng máy tính toàn cầu Internet có thể được xem như là mạng của tất cả các mạng (network of networks), trong đó người dùng tại bất cứ máy tính nào nếu được phép đều có thể truy cập tới các thông tin của các máy khác. Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của các mạng viễn thông công cộng đang tồn tại (public telecommunication networks). Về mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission Control Protocol/Internet Protocol). Hai mô phỏng của công nghệ mạng Internet là intranet and extranet cũng sử dụng các giao thức này. Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước ngoặc mới trong việc sử dụng Internet. Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là e-mail, listserv, telnet, và ftp. Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát triển các giao thức cho World Wide Web (WWW). Trong khi tìm kiếm cách để liên kết các tài liệu khoa học lại với nhau, anh ta đã tạo ra Hypertext Markup Language (HTML), một tập con của Standard Generalized Markup Language (SGML). Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP, Java Servlet,.... Một số khái niệm và thuật ngữ thông dụng Internet: Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế giới. Tập các giao thức được dùng gọi chung là TCP/IP. Intranet: Mạng cục bộ có kiến trúc tương tự mạng Internet. Website: Tập hợp các trang web. Website của các tổ chức hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này. Webpage: Là trang web. Có thể hiển thị các thông tin dưới dạng văn bản, hình ảnh, âm thanh, ... Web browser: Trình duyệt web, dùng để hiển thị các trang web. Các web browser thông dụng hiện nay là Internet Explorer của công ty Microsoft và Netscape Navigator của công ty Netscape. Homepage: Trang chủ hay còn gọi là trang nhà. Thường là trang đầu tiên (mặc định) khi truy cập một website. Hyperlink: siêu liên kết. Dùng để liên kết các trang web và dịch vụ của các website trên Internet. IAP (Internet Access Provider): Nhà cung cấp đường truyền Internet. ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Thông thường, ta phải thông qua một ISP nào đó để đăng kí dịch vụ truy cập Internet qua mạng điện thoại. Các nhà cung cấp ISP hiện nay tại Việt Nam là VDC, FPT, SaigonNet, NetNam, ... Search engines: Máy tìm kiếm. Do số lượng các trang web trên Internet rất lớn nên các máy tìm kiếm sẽ hỗ trợ cho ta khi cần truy tìm các trang web liên quan tới vấn đề mà ta quan tâm trong tập hợp khổng lồ các trang web này. Các máy tìm kiếm thông dụng hiện nay là Yahoo, Google, Altavista, ... HTTP, FTP, SMTP, POP3, ...: Đây là các giao thức được dùng cho các dịch vụ web, ftp, email trên Internet. Một số yêu cầu khi soạn thảo web Một số yêu cầu Để giảm thời gian chờ đợi của người sử dụng, ta nên: Chuyển đổi dạng của các file ảnh, file *.jpg có kích thước nhỏ hơn file *.gif. Nén file âm thanh, file .mp3 có kích thước nhỏ hơn file *.wav Nén những file tài liệu sẽ tải xuống. Chọn màu tương phản cho màu nền và màu văn bản. Nếu đưa hình ảnh vào làm nền thì phải sử dụng hình phù hợp, nên tránh sử dụng hình có độ phân giải cao. Hãy tạo nhiều trang web, không nên tạo một trang dài để người sử dụng chỉ tải những phần muốn xem, không cần phải đợi quá lâu để tải toàn bộ nội dung trang web. Tổ chức Website Để thuận tiện cho việc xuất bản (publish) website sau này, trước tiên nên tập trung tất cả các thành phần của website vào một thư mục, ví dụ như C:\MyWebSite. Trong thư mục này, tổ chức một số thư mục con như images dùng để lưu các hình ảnh, db dùng để lưu các tập tin cơ sở dữ liệu, … Sau khi tạo xong thư mục có cấu trúc như trên, trong FrontPage ta tạo mới một website trỏ đến thư mục D:\MyWebSite bằng cách chọn trên thực đơn chức năng File/New/More Web site templates, sau đó gõ vào đường dẫn D:\MyWebSite trong ô của mục Options/Specify the location of the new web.
Với việc tạo website này, mỗi khi ta soạn thảo mới bất kì tập tin nào, mặc định nó sẽ được lưu trong thư mục này. Ngoài ra, ta có thể chỉ định bảng mã UTF-8 là bảng mã được dùng mặc định khi tạo mới các tập tin bằng cách chọn trên thực đơn chức năng Tools/Site Settings/Language.
Qui ước đặt tên file Khi tạo website trên máy sử dụng hệ điều hành Windows hay Macintosh rồi gởi nó đến server Unix, lỗi mất liên kết thường xảy ra, để tránh trường hợp này ta nên đặt tên file theo những quy tắc sau đây để phù hợp với cả Windows, Macintosh và Unix: Đặt tên file theo quy ước Dos 8.3 hay 8.4: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có. index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Ví dụ: tên file là danh sach.html mà gõ trong lệnh liên kết là DanhSach.html là không được và cũng có sự phân biệt giữa htm và html. Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, nên đặt tên file không có khoảng trắng, sử dụng dấu gạch dưới để dể phân biệt. Ví dụ: Nên đặt tên file là “danh_sach.htm” thay vì “danh sach.htm”. Chú ý: Tên file nên đặt theo kiểu chữ thường và dùng toàn bộ chữ thường trong mã liên kết nội bộ và dùng địa chỉ tương đối. Ví dụ: ../quanly/danhsach.html Chương 2. THIẾT KẾ TRANG WEB VỚI HTML Giới thiệu ngôn ngữ HTML HTML là ngôn ngữ dùng để xây dựng trang web. Nó mô tả cách thức mà dữ liệu được hiển thị thông qua tập các kí hiệu đánh dấu thường được gọi là tag (thẻ). Các tag này được bao quanh bởi các dấu “”. Ví dụ: , , là các tag HTML. Một trang web thông thường gồm có hai thành phần chính đó là: dữ liệu của trang web (ví dụ như văn bản, hình ảnh, âm thanh, ...) và các tag HTML dùng để mô tả cách thức mà các dữ liệu này được hiển thị. Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ vào các tag HTML để định dạng dữ liệu được hiển thị. Ví dụ: Cùng một dữ liệu là dòng văn bản “Chào các bạn”. Tuy nhiên nếu có thêm định dạng của tag ở dòng thứ hai, hình thức hiển thị dữ liệu sẽ khác. Mã HTML  Kết quả hiển thị trên trình duyệt   Chào các bạn  Chào các bạn   Chào các bạn  Chào các bạn   Đa số các tag của HTML đều có tag bắt đầu và tag kết thúc tương ứng. Tag kết thúc tương ứng với một tag chỉ khác ở chỗ có thêm kí tự “/”. Ví dụ: tag có tag kết thúc tương ứng là . Các tag không phân biệt chữ thường và chữ hoa. Nghĩa là các tag , và là như nhau. Trong quá trình đọc trang web để hiển thị, trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng giữa văn bản dữ liệu và các tag. Ví dụ: Mã HTML  Kết quả hiển thị trên trình duyệt   Chào các bạn  Chào các bạn   Chào các bạn  Chào các bạn   Chào các bạn  Chào các bạn   Chào các bạn  Chào các bạn   Khi bắt đầu soạn thảo một trang web, các tag cơ bản sau sẽ đóng vai trò là khung cho việc định nghĩa một trang HTML. Xét ví dụ của một trang HTML đơn giản sau: Chào Chào các bạn ! : Định nghĩa phạm vi của văn bản HTML. : Định nghĩa các mô tả về trang HTML. Các thông tin này sẽ không hiển thị dưới dạng nội dung của trang web. : Mô tả tiêu đề của trang. Tiêu đề của trang web thường được hiển thị như là tiêu đề của cửa sổ hiển thị trang web. Thông tin này cũng có thể được dùng bởi một số máy tìm kiếm để xây dựng chỉ mục các trang web. : Xác định vùng thân của trang web. Đây là phần mà các dữ liệu cùng với các tag HTML sẽ được dùng để định dạng nội dung của trang web. Một tag thông thường bao gồm hai thành phần: tên của tag (dùng để cho biết tag này định nghĩa cái gì) và thuộc tính của tag (dùng để cho biết dữ liệu được hiển thị như thế nào). Ví dụ: Thay đổi các thuộc tính FACE và SIZE của tag Mã HTML  Kết quả hiển thị trên trình duyệt   Chào các bạn  Chào các bạn   <FONT FACE="Times New Roman" SIZE="4"> Chào các bạn  Chào các bạn   Một số thẻ cơ bản của HTML Định dạng trang Định dạng trang thông thường bao gồm các thông tin về tiêu đề trang, bảng mã kí tự được dùng, màu nền, ảnh nền, hình nền, màu văn bản, màu cho các liên kết… Các thuộc tính này được đưa vào thẻ như sau: <BODY LINK = color ALINK = color VLINK = color BACKGROUND = url (tên file nền) BGCOLOR = color TEXT = color TOPMARGIN = pixels RIGHTMARGIN = pixels LEFTMARGIN = pixels > phần nội dung của trang web được đặt ở đây Sau đây là ý nghĩa các tham số của thẻ BODY: Các tham số  Ý nghĩa   LINK  Chỉ định màu của văn bản siêu liên kết   ALINK  Chỉ định màu của văn bản siêu liên kết đang đang chọn   VLINK  Chỉ định màu của văn bản siêu liên kết đã từng mở   BACKGROUND  Chỉ định địa chỉ của ảnh dùng làm nền   BGCOLOR  Chỉ định màu nền   TEXT  Chỉ định màu của văn bản trong tài liệu   SCROLL  YES/NO - Xác định có hay không thanh cuộn   TOPMARGIN  Lề trên   RIGHTMARGIN  Lề phải   LEFTMARGIN  Lề trái   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. 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 Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân  #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080  RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY   Để đặt tiêu đề cho trang web, ta dùng tag . Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập các thông số cho tag . Ví dụ thiết lập sau: cho biết trang web sẽ dùng bảng mã Unicode-UTF-8. Ví dụ: Thiết kế trang web có tiêu đề là “Chào mừng các bạn đến với Trung tâm Nghiên cứu và Phát triển Công nghệ Phần mềm”, màu nền cho trang web là màu đỏ, màu chữ là màu trắng và dùng bảng mã Unicode-UTF-8. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> Chào mừng các bạn đến với trung tâm Nghiên cứu và Phát triển Công nghệ Phần mềm Định dạng đoạn văn bản (paragraph) Thẻ (Patagraph):  định dạng phân đoạn. Thuộc tính: ALIGN dùng để canh chỉnh dữ liệu của đoạn, gồm : LEFT (trái), RIGHT (phải) CENTER (canh giữa) JUSTIFY (canh đều hai bên). Ví dụ: Đặt các thuộc tính canh chỉnh cho tag bằng cách lần lượt gán thuộc tính ALIGN trong tag này các giá trị “LEFT”, “CENTER”, “RIGHT” như sau: Chào các bạn Chào các bạn Chào các bạn Thẻ : Xuống dòng trong một đoạn văn bản. Ví dụ: Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang Kết quả hiển thị trên trình duyệt   Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang   Nếu mã HTML là: Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang thì kết quả trình duyệt không thể xuống dòng theo ý muốn: Kết quả hiển thị trên trình duyệt   Họ tên: Nguyễn Thủy Đoan Trang Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – Đại học Nha Trang   Thẻ (Hard Rule): Chèn vào một đường thẳng. Thuộc tính: - number = n: độ dày của đường được tính bằng điểm, n = 1, 2, 3, 4. - width = number/percent: chiều rộng của đường, tính theo điểm hay tỷ lệ phần trăm, thuông thường từ: 1%..100%. - align = left/ center/ right: canh lề văn bản - color = màu sắc của đường thẳng. thường dùng để canh chỉnh vị trí và màu của đường kẻ này tương ứng là ALIGN và COLOR. Ví dụ: Trung tâm NC & PT Công nghệ Phần mềm Đào tạo Nghiên cứu - : Văn bản ở giữa hai thẻ này sẽ được hiển thị giống hệt như khi chúng được gõ vào, như dấu xuống dòng giữa hai thẻ này sẽ có ý nghĩa chuyển sang dòng mới. Ví dụ: Mã HTML  Kết quả hiển thị trên trình duyệt   Chào các bạn  Chào các bạn   Định dạng 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.   ...  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.   Thuộc tính COLOR dùng trong các tag thường được định nghĩa bằng tên qui ước (ví dụ như RED: màu đỏ, BLUE: màu xanh da trời, ...) hoặc mã RGB dưới dạng 3 chữ số hệ 16 bắt đầu bằng dấu # (ví dụ như #FF0000). Ví dụ: Định dạng đoạn văn bản với font Tahoma, in đậm, kích thước +2 (10pt), màu đỏ: Trung tâm NC & PT Công nghệ Phần mềm Định dạng siêu liên kết (hyperlink) Tag được dùng để đặt một hyperlink. Đoạn văn bản (hay hình ảnh, ...) nằm giữa các tag và sẽ đóng vai trò hyperlink. Thông thường, con trỏ chuột sẽ thay đổi hình dạng (thường là hình bàn tay) khi di chuyển ngang qua đoạn văn bản này. Một hyperlink cho phép liên kết tới một vị trí khác ngay bên trong trang web chứa hyperlink (liên kết nội) hoặc tới một trang web khác (liên kết ngoại). Để tạo một liên kết nội, ta cần thực hiện hai bước: Bước 1: Đánh dấu vị trí (bookmark) của nơi cần liên kết bằng thuộc tính NAME. Bước 2: Tạo hyperlink đến vị trí vừa được đánh dấu, sử dụng thuộc tính HREF. Liên kết nội: # trong mục HREF Để liên kết tới các trang web khác: Điền địa chỉ URL của trang web vào mục HREF. Ví dụ: Minh họa việc tạo liên kết nội để khi người dùng nhấn vào hyperlink “Đến chương 1” thì trình duyệt sẽ chuyển đến vị trí của Chương 1 trong cùng trang web. Mã HTML  Kết quả hiển thị trên trình duyệt   Đến chương 1 ... ... Chương 1  Đến chương 1 … … Chương 1   Ví dụ: Minh họa việc tạo liên kết ngoại: Mã HTML  Ý nghĩa   Google  Liên kết đến trang ở máy chủ khác   Trang chủ  Liên kết đến trang khác trong cùng thư mục   Click here  Gọi một hàm JavaScript   Download  Hiển thị cửa sổ tải tập tin về.   Một số giá trị có thể được dùng để gán cho thuộc tính TARGET của tag là: Giá trị của TARGET  Ý nghĩa   Name  Nạp trang web trong cửa sổ hoặc FRAME có tên là name   _blank  Nạp trang web vào một cửa sổ trống mới. Cửa sổ mới này không có tên.   _parent  Nạp trang web vào cửa sổ cha gần nhất của trang web hiện hành.   _self  Nạp trang web vào cùng cửa sổ với trang web hiện hành. Ðây là giá trị mặc định của hyperlink.   _top  Nạp trang web vào cửa sổ cao nhât (topmost).   Để tạo một liên kết đến tập tin âm thanh, hình hay phim ảnh ta dùng: Văn bản Chú ý: Liên kết đến file chứa trong thư mục không cùng cấp với file gốc, ta phải chỉ đường dẫn: Lên thư mục cấp cao hơn hoặc thư mục cùng cấp khác: 1 bậc: ../; 2 bậc : ../../ Xuống cấp thấp hơn: chỉ tiếp đường dẫn bắt đầu từ thư mục hiện hành là thư mục chứa file gốc (file đang thiết kế). Thẻ định dạng danh sách liệt kê (List) Có 3 dạng thể hiện danh sách sau đây: Danh sách không sắp xếp theo thứ tự Danh sách sắp xếp theo thứ tự Kết hợp 2 loại danh sách trên Định dạnh danh sách không có thứ tự: (Unordered List - UL ) Thẻ … đánh dấu sự bắt đầu và kết thúc danh sách, đầu mỗi mục của danh sách phải đặt tag (list) Thuộc tính: Type = Square/ Circle/ Disc (hình vuông đầy, hình vuông rỗng, chấm đen – mặc định) Ví dụ: Mã HTML  Kết quả hiển thị trên trình duyệt   Mục thứ nhất Mục thứ hai Mục thứ ba  Mục thứ ba Mục thứ hai Mục thứ ba   Định dạng danh sách có thứ tự (Ordered List - OL) Thẻ . Thuộc tính: Type = “a”/ “A”/ “i”/ “I”/ “1” (a, b…/ A, B.../ i, ii... / I, II.../ 1,2..-mặc định) Ví dụ: Mã HTML  Kết quả hiển thị trên trình duyệt   Mục thứ nhất Mục thứ hai Mục thứ ba  Mục thứ ba Mục thứ hai Mục thứ ba   Các danh sách lồng nhau: Ví dụ: Mã HTML  Kết quả hiển thị trên trình duyệt   Chương 1 Chương 2 Bài 1 Bài 2 Bài 3 Bài 4 Chương 3  Chương 1 Chương 2 Bài 1 Bài 2 Bài 3 Bài 4 Chương 3   Định dạng bảng biểu (Tables) Thẻ được dùng để định dạng bảng cùng với các thẻ , để định dạng các dòng, cột. Thuộc tính: Thuộc tính  Ý nghĩa   Boder = number  Kích thước đường viền bảng (1, 2, 3,...)   Cellspascing = number  Khoảng cách giữa các ô (mặc định là 2)   Cellpadding = number  Khoảng cách đường viền và ô (mặc định là 2)   Width = number/percent  Độ rộng bảng tính theo pixels, hay phần trăm của cửa sổ hiển thị   Height = number/percent  Độ cao bảng   Align = left/ right/ center  Canh lề trái, phải, giữa theo chiều ngang   Valign = top/ bottom/ middle  Canh lề trên, dưới, giữa theo chiều dọc   Bgcolor = màu  Chỉ định màu nền cho bảng   Bordercolor = màu  Chỉ định màu cho đường viền bảng   Background = tên file nền  Chỉ định file hình ảnh dùng làm nền cho bảng   Ví dụ: dòng 1 cột 1 dòng 1 cột 2 dòng 1 cột 3 dòng 2 cột 1 dòng 2 cột 2 dòng 2 cột 3 Kết quả hiển thị trên trình duyệt:
Để trộn (merge)/tách (split) các dòng hoặc cột lại với nhau ta dùng các thuộc tính tương ứng là ROWSPAN hoặc COLSPAN. Ví dụ sau minh họa trong một bảng vừa có sự trộn/tách trên dòng và cột: <TABLE BORDER="1" CELLPADDING="5" CELLSPACING="0" WIDTH="310"> Mã nhóm MSSV Họ và tên Nhóm 01 9901234 Trần Văn An 9901235 Nguyễn Hạ Uyên Kết quả hiển thị trên trình duyệt:
Có hai cách để thiết lập bề rộng (WIDTH) của một cell hoặc một bảng, đó là tính theo % và tính theo pixel. Trong nhiều trường hợp, việc đặt theo % sẽ làm cho kích thước bảng thay đổi tùy theo dữ liệu và độ phân giải của màn hình máy người dùng, do đó để đảm bảo tính nhất quán trong hiển thị dữ liệu của bảng, nên chọn cách tính theo pixel. Trong thiết kế trang web, các bảng biểu đóng vai trò rất quan trọng vì nó là công cụ chính dùng để thể hiện các trình bày phức tạp của trang web. Hiện nay, các phần mềm hỗ trợ soạn thảo trang web hỗ trợ vẫn chưa tốt các thao tác phức tạp trên bảng biểu. Do đó, cách tốt nhất là kết hợp cả hai. Nghĩa là, ngoài việc sử dụng các phần mềm này để phát sinh bảng biểu một cách trực quan, ta phải sử dụng mã HTML để can thiệp khi các phần mềm này không đáp ứng nổi các trình bày phức tạp nhất là khi có các bảng vừa lồng vào nhau, các dòng cột trộn/tách nhiều lần, ... Chèn âm thanh, hình, phim ảnh 2.4.1. Chèn hình và phim ảnh: Thẻ được dùng để chèn một ảnh hoặc một video clip vào trong một trang web. Các định dạng tập tin ảnh và video sau được hỗ trợ trên Internet Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, *.mov, *.mpg, *.mpeg, *.png, *.wmf, ... Thuộc tính: Scr = “path/ filename”: Chỉ định địa chỉ file hình muốn chèn (source) Border = n : Hiển thị đường viền bao quanh hình ảnh. Align : Xác định vị trí của văn bản so với hình ảnh: Top: Vị trí cao nhất của ảnh sẽ nằm ngang bằng với các đối tượng nằm trên cùng một dòng. Middle: Tâm của hình ảnh sẽ nằm ngang bằng với vị trí của dòng chứa nó. Bottom (mặc định): vị trí thấp nhất của ảnh sẽ nằm ngang bằng với vị trí của dòng chứa nó. Nếu muốn canh chỉnh hình ảnh, dùng thẻ Alt: ghi chú về hình ảnh, được dùng khi ta muốn đưa chuột đến hình ảnh thì có dòng chữ như tooltip hiển thị bên dưới. Ví dụ: Width = chiều rộng (tính theo điểm hay theo tỷ lệ phần trăm) Height = chiều cao (tính theo điểm hay theo tỷ lệ phần trăm) Đối với phim ảnh, thuộc tính loop = n: xác định số lần lặp của phim. Ví dụ: TRUNG TÂM NGHIÊN CỨU VÀ PHÁT TRIỂN CÔNG NGHỆ PHẦN MỀM Đối với trang web không chứa hình ảnh, thì nội dung văn bản sẽ được hiển thị sau này nằm toàn bộ trong trang web. Tuy nhiên với trang web có chứa hình ảnh, hình ảnh sẽ là một tập tin độc lập với tập tin chứa trang web. Tag dùng trong trang web để thông báo cho trình duyệt đọc tập tin ảnh và hiển thị tại vị trí đặt tag này. 2.4.2. Chèn âm thanh nền: Thẻ được dùng để tải tự động tập tin âm thanh khi người dùng nạp trang web vào trình duyệt. Sử dụng file *.wav, *.mid, *. mp3. Thuộc tính: Scr = “path/ filename”: Chỉ định địa chỉ file âm thanh muốn chèn (source) Loop = n: xác định số lần lặp Định dạng một số ký tự đặc biệt HTML sử dụng các kí tự đặc biệt (ví dụ như “” để đánh dấu các tag, ...), do đó để hiển thị các kí tự đặc biệt này, ta phải dùng các nhóm kí tự thay thế sau: Kí tự cần hiển thị  Mã thay thế   <  <   >  >   &  &   “  "   khoảng trắng      ¢, #, ¥ ¢,  £, ¥   1/2 , 1/3, 3 /4  ¼, ½, ¾   ÷, °  ÷, °   ®, ©  ®, ©   Chuyển hướng trang tự động Để định nghĩa một trang sẽ tự động chuyển sang một địa chỉ khác sau một khoảng thời gian định trước, ta chèn ngay sau tag một tag như sau: Trang web chứa tag trên sẽ tự động chuyển sang trang mới D:\VD_WEB\gioithieu.htm sau khoảng thời gian là 3 giây. Frame Nội dung hiển thị trên trình duyệt có thể được tích hợp từ nhiều cửa sổ khác nhau, mỗi cửa sổ chứa một URL tương ứng với một trang web. Ví dụ sau cho ta thấy có ba cửa sổ, một cửa sổ chứa thực đơn nằm ngang, một cửa sổ chứa thực đơn bên trái và một cửa sổ chứa nội dung bên phải. Trong trường hợp này chúng ta dùng tag và để định nghĩa. 2.7.1. Cấu trúc Frame: Khi sử dụng lệnh tạo khung thì cấu trúc chuẩn của chương trình HTML sẽ thay đổi. Tag không sử dụng nữa, nếu có tag trình duyệt sẽ bỏ qua tag tạo khung. Cấu trúc của chương trình HTML khi có tạo frame như sau: … 2.7.2. Thuộc tính Thuộc tính của : Rows hay cols: chia cửa sổ màn hình ra theo hàng hay cột. Các giá trị gán cho các thuộc tính được phân cách bởi dấu phẩy “,” và giá trị của thuộc tính được tính theo điểm. Ví dụ: : chia cửa sổ màn hình ra làm 2 phần, phần thứ nhất có độ cao 100 pixel và phần thứ 2 có độ cao 200 pixel : Chia cửa sổ màn hình theo tỷ lệ phần trăm: : Chia phần 1 và phần 2 như nhau, còn lại là phần 3. Thuộc tính của : Scr: khai báo địa chỉ của dữ liệu sẽ được hiển thị trong khung. Ví dụ: Scrolling = Yes/ No/Auto (mặc định): Cho biết có sử dụng thanh cuộn trong các frame hay không. Noresize: không có giá trị, không cho phép thay đổi kích thước trong khung đã được chia. Name: đặt tên cho khung, tên này sẽ được dùng để tạo các trường liên kết. Văn bản không có frame: … Form Form thường được dùng như là công cụ hỗ trợ nhập liệu cho các ứng dụng trên Web, tương tự như các hộp thoại (dialog) trong các ứng dụng trên Windows. Hoạt động của form thông thường là: ứng dụng hiển thị form để yêu cầu nhận thông tin từ người dùng, người dùng điền các thông tin và kết thúc việc nhập liệu bằng cách submit form. Sau đó dữ liệu sẽ được chuyển đến các chương trình xử lí tương ứng. Tạo form Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau: <FORM ACTION = ulr METHOD = GET | POST NAME = name TARGET = frame_name | _blank | _self >     Trong đó: ACTION  Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...). Chỉ định chương trình nào sẽ xử lý khi dữ liệu nhập từ form.   METHOD  Phương thức gửi dữ liệu.   NAME  Tên của form, dùng cho các xử lý sau này.   TARGET  Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.   Người dùng nhập dữ liệu cho form thông qua các ô nhập liệu (thường gọi là các đối tượng điều khiển) như textbox, checkbox, radio button, push button, dropdown listbox, ... Các ô nhập liệu này được đặt trong phần bao quanh bởi cặp tag và . Khi form được submit, dữ liệu mà người dùng nhập vào trong các ô nhập liệu này sẽ được chuyển đến chương trình xử lí form theo dạng =. Chính vì vậy mà thuộc tính NAME là thuộc tính rất quan trọng khi khai báo các ô nhập liệu này. Để tạo các ô nhập liệu dạng hộp văn bản, nút nhấn, checkbox, radio button, … ta dùng tag và đặt giá trị tương ứng với các loại ô nhập liệu cho thuộc tính TYPE. Cú pháp thẻ INPUT: <INPUT ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value >   Tạo các đối tượng trên form Hộp văn bản (TextBox) Dùng để nhập dữ liệu trên một dòng. Để tạo ô nhập liệu dạng này, ta chỉ định thuộc tính TYPE=”TEXT” trong tag . Ví dụ: Tạo ra một ô nhập liệu dạng hộp văn bản, có tên là USRNAME, kích thước là 25 kí tự, giá trị mặc định là trangntd: Username: Thuộc tính SIZE dùng để chỉ số kí tự hiển thị trong ô nhập liệu (đây cũng chính là chiều rộng của ô nhập liệu). Thuộc tính MAXLENGTH dùng để chỉ số kí tự tối đa có thể được nhập. Khi muốn chỉ định dữ liệu nhập vào control dưới dạng mật khẩu (nghĩa là các kí tự nhập vào sẽ không được hiển thị mà thay vào đó là các dấu *), ta chỉ định thuộc tính TYPE= “PASSWORD”. Ví dụ: Password: <INPUT TYPE="PASSW ORD" NAME="USRPASSWORD" VALUE="123456" SIZE="20"> Nút nhấn (Button) Khi chỉ định thuộc tính TYPE= “BUTTON” trong tag ta sẽ tạo được một nút nhấn nói chung. Trong form thông thường có hai loại nút nhấn đặc biệt đó là nút nhấn SUBMIT và nút nhấn RESET. Nút nhấn RESET là nút nhấn mà khi người dùng nhấn chuột vào, các dữ liệu của các ô nhập liệu đều được đặt về giá trị mặc định lúc khởi tạo. Để tạo ta sẽ chỉ định thuộc tính TYPE= “RESET” trong tag . Trong khi đó nút nhấn SUBMIT là nút nhấn dùng để kết thúc việc nhập liệu của form. Để tạo nút nhấn dạng này, ta chỉ định thuộc tính TYPE=”SUBMIT” trong tag . Giá trị gán cho thuộc tính VALUE chính là nhãn của nút nhấn. Ví dụ: Tạo ra hai nút nhất Submit và Reset:     Radio button Khi muốn tạo một tập các lựa chọn để người dùng chọn duy nhất một lựa chọn, ta sử dụng radio button. Để tạo ra một nhóm các radio button, ta phải chỉ định thuộc tính TYPE= “RADIO” trong tag của các radio button và các radio buttuon này phải có cùng giá trị của thuộc tính NAME. Khi form được submit, dữ liệu của radio button được chọn (giá trị gán cho thuộc tính VALUE) sẽ được chuyển đi cùng với tên của radio button này. Để đặt một radio button là mặc định, ta thêm vào thuộc tính CHECKED. Ví dụ: Lựa chọn giới tính (Sex) thông qua hai radio button Nam (Male) và Nữ (Female): Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED VALUE="M">Male Female Checkbox Sử dụng checkbox để chọn một hoặc nhiều trong tập các lựa chọn được đề nghị. Khi ta chỉ định thuộc tính TYPE= “CHECKBOX” trong tag , ta sẽ tạo ra được một ô nhập liệu kiểu checkbox. Tương tự như radio button, khi một checkbox được check, giá trị trả về của nó tương ứng với giá trị của thuộc tính VALUE. Để đặt một check box là ON, ta thêm vào thuộc tính CHECKED. Ví dụ: họa một nhóm các checkbox dùng để lấy thông tin về các ngôn ngữ được chọn: Language: English French Japanese Dropdown listbox Dùng để lựa chọn một mục trong danh sách các mục được liệt kê, Ta sử dụng tag để tạo. Mỗi mục của dropdown listbox sẽ được định nghĩa bằng tag . Ví dụ: sau minh họa việc chọn một nghề nghiệp đã được liệt kê sẵn: Occupation: Other Engineer Teacher Doctor Worker Để đặt một mục chọn trong dropdown listbox là mặc định, ta thêm vào thuộc tính SELECTED. Để tạo một multi-select listbox ta đặt thêm thuộc tính SIZE và MULTIPLE vào trong tag . Khi form được submit, dữ liệu của tương ứng với mục chọn (giá trị gán cho thuộc tính VALUE của tag ) trong dropdown listbox sẽ được chuyển đi cùng với tên của dropdown listbox này. Ví dụ trong trường hợp ví dụ trên, khi người dùng chọn Worker, giá trị trả về của ô nhập liệu này sẽ là 4. Ô dữ liệu ẩn (Hidden field) Dùng để lưu trữ các thông tin của form cần thiết cho chương trình xử lí sau này nhưng lại không hiển thị dưới dạng một control nào. Ta lấy ví dụ form cập nhật thông tin một sinh viên. Các thông tin mà người dùng có thể cập nhật thường là Họ tên, Ngày tháng năm sinh, ... sẽ được hiển thị trên các ô nhập liệu của form. Tuy nhiên để chương trình xử lí form cập nhật này có thể biết cần cập nhật sinh viên nào, cần phải có thêm thông tin về Mã số sinh viên (giả sử đóng vai trò là khóa chính trong cơ sở dữ liệu). Thông tin về Mã số sinh viên sẽ được lưu trữ trong một ô nhập liệu của form có kiểu là HIDDEN. Thông tin này sẽ không được hiển thị trên màn hình của người dùng nhưng sẽ được chuyển đi mỗi khi form submit. Để tạo một ô nhập liệu có kiểu là HIDDEN, ta chỉ định thuộc tính TYPE= “HIDDEN” trong tag như ví dụ sau: Mỗi khi form được submit, ngoài các ô nhập liệu đã được hiển thị trên màn hình, ta cũng sẽ có thêm một ô nhập liệu có tên là “USRID” và giá trị là “trangntd” được chuyển đến cho trình xử lí. Vùng văn bản (TextArea) Dùng để nhập dữ liệu trên nhiều dòng. Để tạo ô nhập liệu dạng này ta dùng tag . Dữ liệu nằm giữa cặp tag và chính là giá trị trả về của control dạng này. Ví dụ: Other information: <TEXTAREA ROWS="3" NAME="OtherInfo" COLS="20"> Thuộc tính ROWS và COLS dùng để chỉ số dòng và cột của vùng dữ liệu nhập. Ví dụ: Minh họa một form nhập liệu gồm có đầy đủ các ô nhập liệu đã kể ở trên: Username: <INPUT TYPE="TEXT" NAME="USRNAME" VALUE="trangntd" SIZE="20" MAXLENGTH="128"> Password: <INPUT TYPE="PASSWORD" NAME="USRPASSWORD" VALUE="123456" SIZE="20"> Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED VALUE="M">Male Female Language: <INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="ENG" CHECKED> English <INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="FR" CHECKED >French Japanese Occupation: Other Engineer Teacher Doctor Worker   Other information: <TEXTAREA ROWS="3" NAME="OtherInfo" COLS="20"><INPUT TYPE="SUBMIT" NAME="BTNSUBMIT" VALUE="Submit">    Kết quả hiển thị trên trình duyệt như sau:
Chương 3. THIẾT KẾ TRANG WEB BẰNG FRONTPAGE Giới thiệu Trong nhiều phần mềm hỗ trợ thiết kế web, Frontpage đang là chương trình thông dụng nhất vì là một thành phần trong bộ MS Office. Frontpage thường được dùng cho người mới học thiết kế web vì dễ học và có đầy đủ những tính năng cơ bản cần thiết cho việc tạo website. Chức năng chính của các phần mềm này là hỗ trợ người dùng tạo các trang web một cách dễ dàng mà không cần thiết phải biết nhiều kiến thức về HTML. Khi khởi động, màn hình làm việc của MS FrontPage như sau:
Các thao tác chính khi soạn thảo một trang web Tạo trang web mới Cách 1: File/New/Blank Page Cách 2: Chọn biểu tượng New trên thanh Toolbar. Cách 3: Ctrl + N Lưu trang web Cách 1: File/Save. Cách 2: Chọn biểu tượng Save trên thanh Toolbar. Cách 3: Ctrl + S. Để lưu trang web dưới dạng một tên khác chọn chức năng File/Save As… Chú ý: Trong khi thiết kế trang web, để tránh phải thiết kế lại khi mất điện đột ngột, nên thường xuyên lưu trang web. Mở trang web đã có: Cách 1: File/Open Cách 2: Chọn biểu tượng Open trên thanh Toolbar. Cách 3: Ctrl + O Xem trước kết quả hiển thị của trang web đang thiết kế: Ở bên dưới trang web, ta thấy 4 tab là Design, Split, Code và Preview cho ta nhìn trang web đang thiết kế ở 3 góc độ khác nhau. Tab Design cho thấy trang web ở góc độ thiết kế, tab Code cho thấy mã HTML của thiết kế ở tab Design và tab Preview cho xem trước kết xuất thực sự của trang web trên trình duyệt. Tab Split kết hợp hai tab Design và Code. Định dạng Định dạng trang Chọn lệnh File/ Properties, hiển thị hộp thoại Page Properties: Thẻ General:
 Title: Đặt tiêu đề cho trang web. Background sound: Thiết lập nhạc nền.   Thẻ Formatting:
 Background picture: Thiết lập ảnh nền cho trang web. Color: Background: màu nền. Text: màu văn bản. Hyperlink:màu liên kết. Visited hyperlink:màu liên kết đã chọn. Active hyperlink:màu liên kết đang chọn.   Thẻ Advanced: định dạng lề cho trang web… Một phân đoạn là một khối văn bản được phân định với các phân đoạn khác bằng phím Enter khi soạn thảo. Nếu chỉ muốn xuống dòng mà không muốn chuyển sang phân đoạn khác thì dùng phím Shift+Enter. Ta có thể định dạng theo nhóm các từ được đánh dấu chọn hoặc định dạng cho toàn bộ văn bản. Các định dạng cơ bản bao gồm: font chữ, kích thước, màu sắc, in đậm/nghiêng, gạch dưới, canh chỉnh trái/phải/giữa/đều hai bên. Định dạng ký tự Chọn văn bản muốn định dạng. Format/ Font, hiển thị hộp thoại Font:
 Thẻ Font: Thiết lập tên font, kiểu chữ, màu chữ… Thẻ Character Spacing: Thiết lập khoảng cách giữa các ký tự.   Định dạng đoạn văn bản Chọn đoạn văn bản muốn định dạng. Format/ Paragraph, hiển thị hộp thoại Paragraph:
 Alignment: Canh lề: trái, phải, canh đều. Spacing: Thiết lập khoảng cách giữa các đoạn văn, khoảng cách giữa các dòng.   Định dạng bullet and numbering Chọn Format/Bullets and Numbering. Sau khi hộp hội thoại xuất hiện, chọn các dạng bullet và numbering tương ứng. Chèn các đối tượng vào trang web Muốn chèn một đối tượng vào trang web,ta di chuyển dấu nháy đến vị trí cần chèn, mở menu Insert và chọn menu con tương ứng. Chèn một file văn bản Ta có thể chèn nội dung một file văn bản vào Frontpage, với các định dạng cho phép là: Word, Rtf, Txt, Excel, HTML,... Chọn Insert/ File. Chèn ký tự đặt biệt Chọn Insert/ Symbol. Chèn đường kẻ ngang (Horizontal line) Chọn Insert/Horizotal line. Đặt các thuộc tính cho đường kẻ ngang bằng cách double click chuột lên nó. Sau đó chọn các thông số về Width, Height, Color, Alignment. Chèn thời gian cập nhật Chọn Insert/Date and Time. Chọn định dạng ngày tháng và thời gian. Chèn hình ảnh vào trang web Chọn chức năng Insert/Picture: Clip Art: Chèn ảnh từ Clip Art Gallery. From file: Chèn ảnh từ một tập tin ảnh. WordArt: Chèn chữ nghệ thuật. Click chuột vào ảnh để hiện khung chỉnh kích thước bao quanh ảnh, bấm phím chuột vào ô vuông giữa các cạnh, giữ phím và kéo chuột để thay đổi kích thước rộng hay cao tương ứng. Dùng các ô vuông ở bốn góc để thay đổi kích thước nhưng giữ nguyên tỷ lệ dọc/ngang. Double click chuột vào ảnh để đặt thuộc tính cho ảnh, như: vị trí, kích thước, canh lề, tạo đường viền, chỉ định khoảng không gian trống bao quanh ảnh... Để hiển thị văn bản dạng tooltip khi đưa chuột đến hình ảnh, hãy đặt giá trị cho thuộc tính ALT của tag IMG hoặc chỉnh trong Picture Properties/General/Alternative presentations. Ta có thể thêm các clip ảnh động vào trang web để chúng tự động thực hiện mỗi khi trang web được mở bằng chức năng Insert/Picture/Video. Tạo liên kết (Hyperlink) Hyperlink được dùng để kết nối các trang web từ trang này sang trang khác. Khi người dùng click vào hyperlink, trang web liên kết sẽ được hiển thị trên trình duyệt. Để tạo một hyperlink, đánh dấu đoạn văn bản hoặc hình ảnh được dùng để mô tả sự liên kết, rồi chọn trên thực đơn chức năng Insert/Hyperlink (hoặc nhấn Ctrl+K). Hộp thoại mô tả hyperlink sẽ xuất hiện. Tạo liên kết trong cùng một trang (Bookmark) Bước 1: Đưa con trỏ đến vị trí làm điểm dừng và đặt tên: Insert/ Bookmark: gõ tên và nhấn OK. Bước 2: Tạo liên kết: Chọn văn bản hoặc hình ảnh được dùng để mô tả sự liên kết. Insert/ Hyperlink (hoặc nhấn Ctrl + K), xuất hiện hộp thoại sau:
Trong mục Link to: Chọn Place in This Document Select a place in this document: chọn tên của điểm dừng đã đặt ở bước 1. OK. Tạo liên kết giữa các trang (Hyperlink) Chọn văn bản hoặc hình ảnh được dùng để mô tả sự liên kết. Insert/ Hyperlink, trong mục Link to: chọn Existing File or Web Page
Liên kết đến file khác: Chọn tên file muốn liên kết đến Liên kết đến trang web khác: gõ địa chỉ vào Address. Chú ý: Địa chỉ liên kết file có hai loại: Địa chỉ tuyệt đối: là địa chỉ đầy đủ, chính xác. Ví dụ: “C:/web/andi/image/logo/lh3d.gif”. hay com/index.htm”. Địa chỉ tương đối: là địa chỉ được định vị theo mối quan hệ tương đối (trên, dưới, ngang hàng) với trang chủ. Ví dụ: Nếu đối tượng liên kết chứa trong cùng thư mục với trang chủ, ta chỉ cần ghi “tên file”. Nếu trong thư mục khác ngang cấp, ta ghi “../tên thư mục/tên file”. Nếu thư mục trên một cấp, ta ghi “../tên file”. Nếu thư mục dưới một cấp, ta ghi “tên thư mục/tên file”. Tạo liên kết dạng bản đồ ảnh Ta có thể chèn một hình vào trang web, chia hình này ra làm nhiều phần rồi cho mỗi phần liên kết với một trang web nào đó. Đặc điểm này được gọi là bản đồ ảnh (Image map). Các bước tạo bản đồ ảnh: Bước 1: Chèn ảnh. Bước 2: Sau khi ảnh đã được chèn vào trang web, chọn ảnh để vẽ các điểm nóng (hotspots) tạo thành một bản đồ ảnh. Trên thanh công cụ Picture, click chuột vào nút Rectangular Hotspot, giữ phím trái chuột và kéo con trỏ chuột để vẽ một hình chữ nhật có kích thước tuỳ ý lên ảnh, sau đó nhả ra. Hộp thoại Insert Hyperlink xuất hiện, chỉ định file liên kết cho vùng ảnh vừa chọn. Tiếp tục vẽ các vùng khác và chọn liên kết file cho các vùng này cho đến khi kết thúc. Ngoài ra, theo mặc định của trình duyệt, khi người xem bấm chuột vào các liên kết file dạng chương trình (exe, com, zip...), hay multimedia (audio, video...) trình duyệt sẽ cho hiện hộp thoại để bạn chọn tải file về máy cá nhân hay chạy chương trình tương ứng. Ví dụ: Tạo liên kết đến các file video như sau: Chọn đoạn văn bản được dùng để tạo liên kết, mở menu Insert/Hyperlink. Trong hộp thoại Create Hyperlink, chọn file video đích. Sau khi liên kết được tạo, chuyển qua bảng Preview để xem trang web và bấm chuột vào liên kết. Windows sẽ tự động mở chương trình xem video thích hợp và “chiếu” file video này. Nếu muốn liên kết đến một địa chỉ e-mail, chọn E-mail Address rồi nhập địa chỉ e-mail và tiêu đề (subject), Frontpage sẽ tự động chèn dòng “mailto:” vào trước địa chỉ e-mail. Thay đổi liên kết Chọn liên kết Click chuột phải/ chọn Hyperlink Properties Chọn trang hoặc tập tin cần thay đổi/ OK. Xóa liên kết Chọn liên kết Click chuột phải/ chọn Hyperlink Properties Chọn Remove Link. Một số hiệu ứng đặc biệt Tạo chữ cuộn (Marquee) Insert/Web Component, hộp thoại sau đây xuất hiện:
 Component type: Chọn Dynamic Effects. Choose an effect: Chọn Marquee. Finish.   Sau khi hộp thoại hiện ra, ta gõ vào dòng chữ cần chuyển động và đặt các thuộc tính khác như màu nền, font chữ, … Chú ý: Định dạng chữ như định dạng ký tự (format/ font) Hiển thị số lần truy cập trang web (Hit counter) Chọn vị trí cần đặt Hit counter (bộ đếm) Insert/ Web Component, hiển thị hộp thoại:
 Chọn Hit Counter trong Component type. Chọn dạng mong muốn. Finish.   Bảng biểu (Table) Ngoài chức năng thông thường là hiển thị dữ liệu dưới dạng bảng, ví dụ như bảng thời khóa biểu, thông tin sản phẩm, bảng biểu còn thường được dùng cho việc trình bày (layout) các thành phần trong trang web như văn bản(text) và các ảnh đồ họa (graphics). Bảng biểu gồm các hàng (rows) và các cột (columns), giao của một hàng và một cột gọi là một ô (cell). Tạo bảng Để tạo một bảng, ta có thể dùng một trong hai cách: Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, nhập các thông tin chi tiết cho việc tạo bảng, ví dụ như số dòng, số cột, kích thước, ... Chọn Table/Draw Table. Với chức năng này, dùng bút vẽ để tạo các dòng, cột. Để thay đổi thuộc tính của table, click phải chuột lên table, chọn Table Properties:
Border: chọn size = 0 nếu ta không muốn hiện đường viền của table. Width: Để đảm bảo table không bị resize khi độ phân giải màn hình của máy người dùng thay đổi, đặt kích thước của table dưới dạng pixel bằng cách chọn radio button In pixels. Cell padding dùng để chỉnh khoảng cách từ đường viền đến văn bản trong một cell. Cell spacing dùng để chỉnh khoảng cách giữa các cell. Background dùng để thiết lập màu nền của table. Canh chỉnh trong mỗi Cell Properties: Horizontal alignment dùng để chỉnh các canh chỉnh theo chiều ngang. Ví dụ: Left, Right, Center, Justify. Vertical alignment dùng để chỉnh các canh chỉnh theo chiều dọc. Ví dụ: Top, Middle, Bottom Chỉnh boder của từng cell: Cell Properties/Style/Border Tách một cell thành nhiều cell: Table/Split Trộn nhiều cell lại: Table/Merge Cells. Chèn bảng biểu, hàng, cột: Chèn bảng: Đưa con trỏ vào ô chứa bảng sẽ chèn. Table/Insert/Table, xuất hiện hộp thoại, xác định các thuộc tính cho bảng muốn chèn như phần tạo bảng.