Bộ giáo trình HTML và Thiết kế Website Cơ Bản

wWw.VipLam.Info ỦY BAN NHÂN DÂN THÀNH PHỐ HÀ NỘI SỞ BƯU CHÍNH VIỄN THÔNG HÀ NỘI GIÁO TRÌNH HTML VÀ THIẾT KẾ WEBSITE (Mã số giáo trình: 3CI3) HÀ NỘI 2005 LỜI MỞ ĐẦU Ngôn ngữ Siêu văn HTML (Hyper Text Markup Language) ngôn ngữ biểu diễn văn cho phép ta đưa vào văn nhiều thuộc tính cần thiết để truyền thông quảng bá mạng toàn cục WWW (World Wide Web) HTML cho phép ta đưa hình ảnh đồ họa vào văn bản, thay đổi cách bày trí văn bản, tạo tài liệu siêu văn có khả đối thoại tương tác với người dùng HTML chủ yếu xoay quanh khái niệm “thẻ” (tag) làm tảng Một ví dụ tag Hầu hết chức HTML có thẻ mở thẻ đóng tạo thành cặp giới hạn đoạn văn Ví dụ thẻ “bold” nghĩa chữ béo Toàn đoạn văn thể dạng chữ béo (hay chữ đậm) văn xem trình duyệt tương ứng Ví dụ xin chào lên xin chào Để tạo siêu văn bản, ta dùng chương trình soạn thảo (ví dụ: NC-Norton Commander, EDIT - DOS, NotePad hay Write - Windows 3.x, WordPad Win95, WinWord 2.0 hay 6.0, FoxPro, Borland C++ IDE, Borland Pascal IDE, FrontPage, TextPad, v.v…), cần nắm thẻ HTML, ghi vào đĩa cần lưu dạng file text Tên file có đuôi mở rộng HTM (hoặc HTML) Song có hạn chế dạng văn ta soạn với ta xem sau (trên WWW) không giống Chính lẽ mà nhiều hãng tung phần mềm soạn siêu văn What You See Is What You Get (WYSIWYGcái ta thấy ta có được) Hãng Microsoft tung tiện ích sử dụng rộng rãi Ngoài ra, có nhiều tiện ích chuyển đổi từ dạng RTF (có thể soạn WinWord hay WordPad) sang HTML, hay phiên sau trình duyệt Web NetScape có sẵn chức Các tiện ích giống chỗ cho phép ta gõ trực tiếp thẻ vào văn dùng tổ hợp công cụ (toolbar), hộp thoại (dialog), thực đơn (menu) hay danh sách lựa chọn (pop-up list) Để gạch đoạn văn ví dụ vừa rồi, ta gõ vào xin chào, dùng chuột chọn, bấm vào nút Underline công cụ Văn tự động chuyển thành xin chào (ở cặp mở/đóng tag có chức giới hạn đoạn văn cần gạch dưới) Ngày nay, phát triển thác lũ mạng toàn cục, HTML ngày trở nên phức tạp hoàn thiện để đáp ứng yêu cầu nảy sinh trình phát triển (như âm thanh, hình ảnh động, v.v…) Người ta gọi phiên HTML đánh số để biểu thị HTML 2, HTML 2+, HTML 3,… để phiên sau Một điểm mạnh HTML văn tuân thủ tiêu chuẩn HTML lên hình hay in ra, tóm lại hiểu được, loại phần mềm hay máy tính mà người đọc có, không phân biệt trình duyệt (NetScape Windows hay Lynx UNIX, chí cho người khiếm thị phần mềm đặc biệt) Người ta tranh cãi nhiều Internet HTML “tốt” Định hướng nguyên thủy HTML tạo phương pháp vạn để lưu giữ thể thông tin Sau người ta coi HTML ngôn ngữ định hướng nội dung – “trong tài liệu có gì” quan trọng nhiều so với “tài liệu có đẹp không” Tác giả mong nhận góp ý từ bạn đọc Xin chân thành cảm ơn - Tên môn học: HTML VÀ THIẾT KẾ WEB - Mã số môn học: 3CI3 - Thời gian: Lý thuyết + thực hành 45T - Mục tiêu: Cung cấp cho học viên kiến thức liên quan đến ngôn ngữ HTML thiết kế Web - Những kiến thức cần phải trang bị trước học: Có kiến thức sử dụng máy tính - Nội dung môn học: Chương I: NHỮNG KHÁI NIỆM CƠ SỞ Chương II: TRÌNH BÀY TRANG Chương III: DANH SÁCH VÀ BẢNG TRONG HTML Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN Chương VI: BÀY TRÍ NỀN VÀ KHUNG Chương VII: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET Chương VIII: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (Microsoft FrontPage 2003) - Đối tượng học: Những người cần biết kiến thức HTML Website để thiết kế Website tĩnh - Biên soạn: Bộ môn Các hệ thống thông tin, Khoa Công nghệ thông tin, Trường ĐH Công Nghệ, ĐHQGHN MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG I NHỮNG KHÁI NIỆM CƠ SỞ I.1 World Wide Web gì? .8 I.2 HTML gì? .11 I.3 Các đặc điểm siêu văn .12 I.3.1 Độc lập với phần cứng phần mềm 12 I.3.2 Độc lập với khái niệm trang thứ tự trang 13 I.3.3 Website trang chủ - homepage .13 I.4 Soạn thảo văn - vấn đề chung 14 I.4.1 Trang mã nguồn HTML trang Web 14 I.4.2 Các thẻ HTML 15 I.4.3 Các quy tắc chung .16 I.4.4 Cấu trúc tài liệu HTML 17 I.4.5 Các phần tử HTML (HTML element) 18 Bài tập 18 CHƯƠNG II TRÌNH BÀY TRANG 19 II.1 Tạo tiêu đề .19 II.2 Thẻ trình bày trang 20 II.2.1 Một số thẻ 20 II.2.2 Các thuộc tính thẻ trình bày trang .24 Bài tập 26 CHƯƠNG III DANH SÁCH VÀ BẢNG TRONG HTML .27 III.1 Các kiểu danh sách .27 III.1.1 Danh sách không đánh số thứ tự .27 III.1.2 Danh sách đánh số thứ tự 28 III.1.3 Danh sách định nghĩa 30 III.1.4 Danh sách phối hợp, lồng 30 III.2 Bảng biểu .31 III.2.1 Khung cấu trúc 31 III.2.2 Một số lưu ý bảng 32 III.2.3 Các ví dụ 36 Bài tập 39 CHƯƠNG IV ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML .40 IV.1 Hình ảnh tĩnh 40 IV.1.1 Tệp ảnh .40 IV.1.2 Thẻ 40 IV.2 Các thuộc tính thẻ chèn hình ảnh 40 IV.2.1 Thuộc tính ALT 40 IV.2.2 Thuộc tính WIDTH HEIGHT 41 IV.2.3 Thuộc tính ALIGN 42 IV.2.4 Thuộc tính VSPACE HSPACE 42 Bài tập 43 CHƯƠNG V CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN .44 V.1 Thẻ neo mối liên kết 44 V.1.1 Thuộc tính HREF .44 V.1.2 Liên kết – External Links 44 V.1.3 Địa tuyệt đối 45 V.1.4 Địa tương đối .45 V.1.5 Liên kết nội – Internal Link 45 V.2 Dùng hình ảnh làm đầu mối liên kết .46 V.2.1 Thay chữ hình 46 V.2.2 Image Map - thẻ AREA .46 V.3 Đưa âm vào tài liệu 47 V.3.1 Liên kết đến tệp âm 47 V.3.2 Tạo âm .47 V.4 Đưa Video vào tài liệu 48 V.4.1 Chèn tệp Video 48 V.4.2 Nhúng tệp video 48 Bài tập 49 CHƯƠNG VI BÀY TRÍ NỀN VÀ KHUNG .50 VI.1 Màu văn 50 VI.1.1 Đặt màu 50 VI.1.2 Màu chữ văn 50 VI.1.3 Màu đầu mối liên kết - Thuộc tính LINK, VLINK ALINK 50 VI.1.4 Thuộc tính mã màu 51 VI.2 Nạp hình ảnh làm cho trang văn 52 VI.2.1 Thuộc tính BACKGROUND 52 VI.2.2 Water mark .52 VI.2.3 Hãy ký tên vào tài liệu 53 VI.3 Khung – Frames 54 VI.3.1 Trang trí khung 54 VI.3.2 Thành phần FRAMESET 55 VI.4 Thiết lập Target, thẻ NOFRAME IFRAME 58 VI.4.1 Thiết lập Target 58 VI.4.2 Thẻ NOFRAMES .59 VI.4.2 Nhúng frame - thẻ IFRAME .59 Bài tập 60 CHƯƠNG VII BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 61 VII.1 FORM 61 VII.1.1 FORM gì? 61 VII.1.2.Các thành phần FORM 62 VII.1.3 Thêm tính cấu trúc cho FORM .69 VII.2 Cascading style sheet 71 VII.2.1 Inline Style 71 VII.2.2 Giới thiệu Style Sheet .73 VII.2.3 Javascript Style Sheet 74 VII.2.4 Thuật ngữ Style Sheet .76 VII.2.5 Các thích Style Sheet 91 VII.2.6 Lợi ích Style Sheet .91 VII.2.7 Kết hợp Style Sheet với HTML 92 VII.2.8 Thứ tự ưu tiên style (Cascading) 96 CHƯƠNG VIII CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) .99 VIII.1 Tạo trang Web .99 VIII.1.1 Bắt đầu sử dụng FrontPage2003 99 VIII.1.2 Tạo trang từ template 100 VIII.1.3 Tạo lưu trang 101 VIII.1.4 Tạo đề mục 102 VIII.1.5 Chọn font màu 103 VIII.2 Tổ chức trang với liên kết, danh sách bảng 106 VIII.2.1 Thêm hyperlink vào trang Web .106 VIII.2.2 Tạo danh sách .109 VIII.2.3 Tổ chức trang với bảng 111 VIII.2.4 Hiển thị hình ảnh trang Web 119 VIII.2.5 Tạo Web site 132 VIII.2.5.Khai thác site 135 VIII.3 Phát triển nhanh site với template 141 VIII.3.1 Chọn template Web site 142 VIII.3.2 Tạo Web site 143 VIII.3.3 Tạo tùy biến Web site ta 144 VIII.3.4 Thêm loại bỏ lời thích 145 VIII.3.5 Khai thác template Personal Web Site 146 VIII.3.6 Thêm tem thời gian vào trang Web .147 VIII.3.7 Lưu thay đổi sang site 148 VIII.4 Tạo site với trợ giúp Wizard FrontPage 2003 149 VIII.4.1 Mở wizard tạo site 149 VIII.4.2 Nhập site có vào FrontPage 151 VIII.4.3 Chọn phương pháp import 151 VIII.4.4 Chọn vị trí để lưu site 154 VIII.4.5 Thu thập thông tin phản hồi từ khách tham quan Web site ta 155 VIII.4.6 Lưu thông tin phản hồi khách tham quan sang file 157 VIII.4.7 Nhận thông tin phản hồi khách tham quan email 159 Bài tập 160 CHƯƠNG I NHỮNG KHÁI NIỆM CƠ SỞ I.1 World Wide Web gì? World Wide Web (WWW) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy nhập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) Các ràng buộc ba chế nêu rõ Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình,… - có địa mà mã hóa URL Các URL thường gồm phần: - Việc đặt tên chế dùng để truy nhập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ coi URL rõ trang W3C Technical Reports: http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy nhập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Đây ví dụ khác URL Ví dụ ám tới hộp thư (mailbox) người dùng: ….đây văn … Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL ám tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: Một URL tương đối không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Các URL giải toàn URL sử dụng URL gốc Như ví dụ giải pháp URL tương đối, giả sử có URL gốc “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Trong HTML, URL dùng để: - Liên kết tới tài liệu tài nguyên khác, (xem A LINK) - Liên kết tới kiểu dạng bên kịch (script) (xem LINK SCRIPT) - Gồm ảnh, đối tượng, applet trang, (xem IMG, OBJECT, APPLET INPUT) - Tạo dồ ảnh (xem MAP AREA) - Tạo form (xem FORM) - Tạo khung tài liệu (xem FRAME IFRAME) - Trích dẫn dẫn bên (xem Q, BLOCKQUOTE, INS DEL) - Tham khảo quy ước siêu liệu mô tả tài liệu (xem HEAD) Ngày người ta dùng máy tính công cụ hữu ích để truy nhập Internet, chủ yếu tìm kiếm thông tin Các thông tin văn bản, hình ảnh âm hay thông tin đa phương tiện… Với giao diện thân thiện việc sử dụng ký hiệu, biểu tượng gợi tả gần giống với hình ảnh đời thường cần thao tác đơn giản ta có thông tin cần tìm kiếm trước mặt Nhu cầu sử dụng máy tính để truy cập Internet tìm kiếm thông tin ngày nhiều người sử dụng máy tính có trình độ tin học tiếng Anh để hiểu thông báo máy khác Làm để người dễ dàng sử dụng máy tính để truy cập Internet công cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thông tin mạng thông tin rộng lớn toàn cục Việc trở nên dễ dàng ý tưởng siêu văn (Hypertext) Siêu văn văn “thông minh” giúp người đọc tìm cung cấp cho họ tài liệu liên quan Người đọc công tìm kiếm kho thông tin Internet vô tận Khái niệm siêu văn nhà tin học Ted Nelson đề xuất vào năm 1965 ước mơ (“Computer Dreams”) khả máy tính tương lai Ông hy vọng máy tính có trí tuệ người, biết cách truy tìm thông tin cần thiết Dự án thực siêu văn kỹ sư trẻ người Anh tên Tim Berners – Lee Sau tốt nghiệp Đại học Oxfort (Anh) năm 1976, năm 1980 Tim viết chương trình mô mối liên kết hai chiều đồ thị kiểu liên kết siêu văn Năm 1989, làm việc Viện nghiên cứu kỹ thuật hạt nhân châu Âu (CERN) Berne (Thụy sỹ), thấy đồng nghiệp vất vả việc tra tài liệu, Tim đưa đề án lưu trữ siêu văn máy tính cho dễ dàng tìm kiếm tài liệu Trong giới siêu văn WWW, người sử dụng dễ dàng từ tài liệu sang tài liệu khác thông qua mối liên kết Như ta du lịch xa lộ thông tin phong phú ngồi nhà Kỹ thuật siêu văn 10 Chọn tùy chọn Display để xác định làm cho tem thời gian thay đổi: • Nếu thay đổi thực tay thay đổi cho trang, chọn Date This Page Wass Last Editor • Nếu thay đổi FrontPage cập nhật trang lý đó, chọn Date This Page Was Last Automatically Updated Trong menu Date Format thả xuống, chọn cách mà ngày tháng xuất Nếu thời gian hiển thị, menu Time format thả xuống, thay đổi giá trị từ (none) sang giá trị khác Click OK Tem thời gian xuất trang, trông giống ta nhập vào Sau tem thời gian thêm, để thực thay đổi, click đúp cửa sổ hiệu chỉnh, hộp thoại Date and Time mở lại Tất thành phần Web khác hiệu chỉnh theo cách VIII.3.7 Lưu thay đổi sang site Nếu ta tạo Web site cá nhân từ template, ta làm với cách hiệu chỉnh text, tiêu đề hyperlink Để lưu trang sau làm việc nó, click nút Save công cụ Standard Để xóa trang file khác, loại bỏ vĩnh viễn khỏi site, thực bước sau đây: Quay trở khung nhìn Folders: click tab Web Site nằm cửa sổ hiệu chỉnh Click phải tên file khung xem Folder Chọn Delete từ menu tắt Một hộp thoại Confirm Delete hỏi file có nên thực bị xóa hay không Click Yes để xác định việc xóa No ta thay đổi ý định Khi ta sẵn sàng xem công việc mà ta thực hiện, click nút Preview in Browser công cụ Standard Site ta mở trình duyệt Web, ta thưởng thức giống người khác tham quan – click hyperlink nút liên kết để xem trang 148 VIII.4 Tạo site với trợ giúp Wizard FrontPage 2003 VIII.4.1 Mở wizard tạo site Nhiều phần mềm sử dụng wizard, hộp thoại vốn có làm cho công việc khó khăn trở nên dễ dàng cách phân chia thành loạt câu hỏi FrontPage chương trình khác Office xác lập máy tính thông qua wizard cài đặt, hình thức quen thuộc với ta Trong FrontPage, wizard xem template thông minh Chúng sử dụng để tạo site trang Web phức tạp xử lý template Bằng cách phân chia tác vụ thành loạt bước đơn giản hơn, wizard giúp ta tạo Web site phức tạp - chẳng hạn site công ty chuyên nghiệp 20 trang site hỗ trợ khách hàng - cách trả lời vài câu hỏi đơn giản Hai loại wizard có sẵn FrontPage: wizard Web site tạo toàn site wizard trang Các wizard tạo ta tạo site thêm trang vào site hành Để gọi site wizard, thực bước sau: Trên menu Standard chọn File → New Khung New mở (ở phía bên phải cửa sổ - xem hình vẽ dưới) 149 Hình VIII.31 Khung New Click hyperlink More Web Site Templates Hộp thoại Web Site Templates mở với tab General nằm Ta sử dụng số wizard để tạo toàn site: • Database Interface Wizard tạo site vốn nối kết với sở liệu Microsoft Access, hiển thị record trang Web lưu thông tin thu thập site vào sang sở liệu • Discussion Web Site Wizard tạo bảng thông báo nơi khách tham quan đến site ta giao tiếp với • Corporate Presence Wizard chép Web site có sang máy tính ta, không tạo FrontPage Để khởi động wizard, chọn click nút OK Hộp thoại wizard xuất Để sử dụng wizard, trả lời câu hỏi mà đặt sau click Next để xem câu hỏi Khi ta tiến đến câu hỏi sau cùng, nút Finish hiển thị thay cho nút Next Khi ta sẵn sàng hoàn tất tùy chọn mà ta chọn wizard, click Finish 150 VIII.4.2 Nhập site có vào FrontPage Nếu ta tạo Web site phần khác trước sử dụng FrontPage, ta nên quan tâm đến Import Web Site Wizard, vốn sử dụng để đưa site tất file vào FrontPage để hiệu chỉnh Với wizard này, ta tận dụng tính FrontPage site mà ban đầu không tạo phần mềm Wizard nhập site từ thư mục máy tính ta, thư mục mạng, Web site Internet Để nhập site, thực bước sau: Trên menu Standard chọn File → New để mở khung New Click hyperlink More Web site Templates Hộp thoại Site Templates mở ra, liệt kê tất site wizard mà ta chọn Chọn biểu tượng Import Web Site Wizard Trong hộp danh sách Specify the Location of the New Web Site, FrontPage chọn tên cho thư mục nơi file site lưu trữ Để chọn thư mục khác, click nút Browse Hộp thoại New Web Site Location xuất Sử dụng hộp thoại để tìm kiếm mở thư mục nơi ta lưu trữ Web site mà ta làm việc FrontPage Mỗi site FrontPage phải cung cấp thư mục riêng Để tạo thư mục cho site nhập vào này, click nút Create New Folder Hộp thoại New Folder xuất Cho thư mục tên Name click OK Trong hộp thoại New Web Site Location, click nút Open Thư mục liệt kê hộp thoại danh sách Specify the Location of the New Website Import Web Wizard Click OK Import Web Wizard mở VIII.4.3 Chọn phương pháp import Câu hỏi hỏi Import Web Site Wizard cách để truy tìm site, trình bày hình 151 Hình VIII.32 Import Web Site Wizard Một site nhập theo năm cách, phụ thuộc vào vị trí kiểu truy cập mà ta có vị trí đó: • FrontPage Server Extensions SharePoint Servicess, kỹ thuật hiệu đòi hỏi Web server trang bị với tính • FPT (File Transfer Protocol), cách phổ biến mà file trao đổi Internet • HTTP (HyperTExxt Transfer Protocol), cách để truy tìm trang Web file khác vốn truy xuất mạng cục • WebDAV, hệ thống tạo nội dung Web phổ biến phương pháp khác Cách tốt để nhập site sử dụng FrontPage Server Extensions SharePoint Services điều truy tìm trang file khác đưa vào Web site chúng không trình bày trực tiếp cho khách tham quan Khi ta sử dụng FrontPage để tạo Web site, làm việc với nhiều file hậu cảnh suốt trình chuẩn bị trang Ví dụ, site ta sử dụng theme, có hai chục file đồ họa thư mục Những file không biểu diễn trực tiếp cho người tham quan site ta 152 Thay vào đó, chúng sử dụng FrontPage để tạo nút hover, đồ họa định dạng trang Bằng cách sử dụng server extension SharePoint Servicers, wizard nhập site (subsite) – Web site chứa bên thư mục site khác (Ví dụ, Web site thư mục C:\My Sites\Sports\baseball) Nếu site để nhập nằm phần mở rộng Web server SharePoint, ta sử dụng chúng để nhập Web site toàn site nó: Chọn FrontPage Server Extensions SharePoint Services Nhập địa Web trang chủ Web thuộc site vào trường text Web Site Location Để đưa vào site con, chọn hộp kiểm Include Subsites Nếu site mà ta muốn nhập nằm máy tính ta (hoặc thư mục máy tính khác mạng ta), ta chép từ thư mục đó: Chọn tùy chọn File System click đúp Browse Hộp thoại New Publish Location xuất Sử dụng hộp thoại để tìm chọn thư mục Web site (thư mục nơi trang chủ lưu trữ) Chọn thư mục click Open Thư mục hiển thị trường text Web Site Location Để nhập site lúc (nếu có), chọn hộp kiểm Include Subsites Nếu site nằm Web server mà ta truy cập cách sử dụng File Transfer Protocol (FTP), tiêu chuẩn chung cho việc trao đổi file với Internet server, ta sử dụng FTP account ta để nhập site Sau cách thực hiện: Chọn FTP Trong trường text Web Site Location, nhập địa FTP server Bởi sử dụng FTP, địa có ftp:// đứng trước thay http:// Trong trường Root Directory, gõ nhập vị trí tên thư mục mà ta chứa trang chủ site 153 Nếu server đòi hỏi Passive FTP, click hộp kiểm Use Passive FTP Nếu ta tận dụng phần mở rộng SharePoint, FTP lựa chọn tốt tùy chọn lại Nếu site nằm Web server mà không trang bị phần mở rộng SharePoint (hoặc ta không biết), ta lưu file việc truy tìm chúng từ Web cách sử dụng HTTP Tùy chọn HTTP không hiệu phần mở rộng, SharePoint, FTP - lấy trang liên kết công cộng từ trang chủ Nó bỏ qua file sử dụng để tạo trang đó, chẳng hạn theme FrontPage file khác vốn sử dụng để tạo site Tuy nhiên, biện pháp sau HTTP sử dụng để nhập site: Chọn HTTP Nhập địa Web trang chủ thuộc site trường text Web Site Location FrontPage tỷ mỉ địa chỉ: Thay sử dụng địa chẳng hạn www.example.com, cụ thể tham chiếu tên trang chủ (nói cách khác, địa www.example.com/index.html) Sau chọn phương pháp import, click Next để tiếp tục Wizard cập nhật để phản ảnh lựa chọn ta Nếu ta nhập site từ vị trí bảo vệ password, hộp thoại Name and Password Required mở Sử dụng trường Name Pasword để cung cấp thông tin đăng nhập ta, sau click OK Sau chọn phương pháp nhập, click Next VIII.4.4 Chọn vị trí để lưu site Câu hỏi mà wizard đặt nơi để lưu site Bởi ta chọn thư mục, xuất trường text trường Local Copy Location, trường tắt để ta thay đổi Tuy nhiên, có cách để thay đổi thực thay đổi ta thay đổi ý định chọn thư mục khác: Hủy chọn hộp kiểm Add to Current Web Site Trường Location Copy Location nút Browse trở nên chọn 154 Click nút Browse Hộp thoại New Page Location xuất Sử dụng hộp thoại để chọn (hoặc tạo) thư mục nơi mà file site lưu Chọn thư mục click Open Hộp thoại đóng lại, đưa ta trở wizard Chọn hộp Add to Current Web Site Click Next để đến câu hỏi VIII.4.5 Thu thập thông tin phản hồi từ khách tham quan Web site ta Một form dễ để tạo trang phản hồi - vị trí site ta nơi khách tham quan gửi cho ta lời nhận xét góp ý riêng tư Điều cung cấp dịch vụ tiện lợi cho khách tham quan ta có ưu điểm thư hai – cho phép ta bỏ qua địa email ta từ site ta Tại điều lại hữu dụng? Khi ta bắt đầu xuất Web, địa email mà ta đặt trang nhanh chóng phát spammer - người tiếp thị email tạp nhạp lắp đầy inbox lời đề nghị mang tính thương mại không cần thiết Để tìm địa để thêm vào danh sách thư tín họ, cá spammer thường xuyên sử dụng phần mềm để truy tìm trang World Wide Web Điều mà ta chắn tránh khỏi site ta tìm thấy nhanh chóng chương trình - thường thời gian ngắn từ đến hai tuần Bằng cách đặt trang phản hồi thay địa ta site ta, ta giảm lượng spam mà ta nhận Để thêm trang phản hồi vào site ta, thực bước sau: Mở site (nếu chưa mở) 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ị trang mà ta tạo cách sử dụng template wizard Chọn biểu tượng Feedback Form click OK Một trang phản hồi tạo sử dụng màu, text giống với phần lại site Nó mở cửa sổ biên soạn Một đường chấm chấm biểu thị đường viền form Mỗi phần form phải đặt đường biên soạn Ở đầu 155 trang, đoạn tô màu đỏ tía mô tả form cung cấp số thông tin hướng dẫn cách sử dụng Text lời bình chú, text giải thích xuất cửa sổ biên soạn FrontPage trang xem trình duyệt Web (Để kiểm tra điều này, click nút Preview ben cửa sổ biên soạn) Hình VIII.33 Hiệu chỉnh trang phản hồi Để xóa lời thích, click lần nhấn phím Delete Nếu ta muốn thay đổi cách diễn đạt câu hỏi, hiệu chỉnh ta thường thực text khác FrontPage: Nhấp trỏ trường sử dụng bàn phím để thêm loại bỏ thông tin Việc định vị định dạng thành phần khác form thay đổi giống phần khác trang Web Để xóa phần form, kéo chuột lên nhấn phím Delete Khi trang phản hồi tạo ra, FrontPage xác lập để lưu câu trả lời sang file feedback.txt thư mục _private Web site 156 Để thực thi điều này, ta phải xuất site ta lên Web server trang bị FrontPage Server Extensions SharePoint Servers, cải tiến nhằm giúp người sử dụng FrontPage thêm tính đặc biệt (giống vậy) vào site họ Vào thời điểm này, ta thay đổi cách thông tin phản hồi khách tham quan lưu Nó lưu sang file theo nhiều dạng khác gửi đến ta email VIII.4.6 Lưu thông tin phản hồi khách tham quan sang file Những câu trả lời thu thập form lưu trữ file Web server ta theo ba dạng khác nhau: - Text - Dạng xem biên soạn text tải chương trình sở liệu trang bảng tính, chẳng hạn Microsoft Acccess Microsoft Excel - HTML - Dạng đọc trình duyệt - XML – Đây dạng phổ biến cho liệu tích hợp rộng rãi vào FrontPage 2003 chương trình lại Office Để lưu thông tin phản hồi sang file, thực bước sau đây: Click phải nơi đường viền form - đường chấm chấm minh họa ban đầu hình Chọn Form Properties từ menu ngữ cảnh Hộp thoại Properties xuất minh họa hình 157 Hình VIII.34 Chọn cách lưu thông tin phản hồi khách Thông tin phản hồi khách tham quan lưu dạng text Để chọn dạng khác, click nút Options Hộp thoại Saving Results xuất Sử dụng hộp File Format xổ xuống để chọn dạng cho thông tin phản hồi: • Để giúp ta đọc dễ dàng với Microsoft Excel chương trình sở liệu khác, chọn Text Data-base Using Comma as a Separator Điều tạo file text với phần mở rộng tên file.csv • Để đọc trình duyệt Web, lựa chọn tốt HTML Formatted Text Within HTML Điều tạo file.html vốn sử dụng định dạng với trang Web mà ta tạo ForntPage • Để lưu theo dạng XML, chọn XML Điều tạo file.xml Click OK Để chọn thư mục nơi file lưu trữ đó, click nút Browse Hộp thoại Current Web site xuất Sử dụng hộp thoại để chọn thư mục site ta Click OK để đóng hộp thoại Form Properties Form xác lập để lưu trữ thông điệp phản hồi file định Nếu file không hữu người sử dụng form phản hồi tạo 158 VIII.4.7 Nhận thông tin phản hồi khách tham quan email Thông tin phản hồi gửi đến ta email thay lưu site ta Khi gửi đến, trông giống 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âu trả lời khác form phản hồi hiển thị dòng riêng biệt Trong ví dụ này, Sam Snett với địa email snett@samspublishing.com gửi đề 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ừ địa tự động trả lời thiết lập Web host ta - ta thay đổi địa thành địa người liên lạc với ta mô tả phần Để gửi trả lời phản hồi đến địa email, thực bước sau: Click chuột phải nơi form chọn Form Properties từ menu tắt vừa xuất Hộp thoại Form Properties mở Nhập địa email trường text E-mail Address Địa phải địa email ta địa người trả lời thư cho site ta Xóa text hộp Filename Thông tin phản hồi gửi thư cách sử dụng dạng ví dụ SamSnett Để chọn dạng khác, click nút Options Hộp thoại Saving Result xuất Click tab Email Result để đưa lên phía trước Chọn dạng hộp Email Format thả xuống Các tùy chọn có sẵn giống cá tùy chọn dành cho file Email phản hồi cung cấp dòng chủ đề “Data posted to form 1”, theo sau địa Web trang phản hồi 159 Để xác lập dòng chủ đề khác giúp dễ dàng tìm email này, gõ nhập trường text Subject Line Để tận dụng địa email người điền đầy đủ thông tin vào form, nhập text UserEmail trường text Reply-To Line chọn hộp kiểm Form Field Name nằm kế bê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, sau click OK để đóng hộp thoại Form Properties Khi lưu kết form dạng email, FrontPage hiển thị hộp thoại định form gửi kết email hỏi xem địa email có nên loại bỏ hay không Nếu ta biết Web server ta cung cấp server Extensions SharePoint, click No để giữ lại địa email bỏ qua lời cảnh báo Sau ta xuất trang phản hồi, hoạt động cách xác Bài tập Thay tự viết thẻ HTML, dùng công cụ FrontPage để tạo tất trang Web cho tập chương trước 160 BẢNG CÁC TỪ VIẾT TẮT Browser: trình duyệt chương trình đọc nội dung file XML hiển thị thông tin file lên hình Cascading Style Sheets: ngôn ngữ khai báo cách hiển thị phần tử file XML Style sheet: cách gọi tắt Cascading Style Sheets ám đến file chứa 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: Độ suốt 161 TÀI LIỆU THAM KHẢO [1] 24 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 162 [...]... chứa và luôn được căn lề vào giữa bảng (theo chiều ngang) và có thể cũng có bẻ dòng cho phù hợp Dưới đây là bảng tóm tắt liệt kê các thuộc tính của thẻ xây dựng bảng: Thẻ/Thuộc tính Ý nghĩa TABLE - Bắt đầu bảng BORDER - Đặt khung nổi 3D xung quanh bảng Đặt bảng... sách kiểu bảng chọn và danh sách kiểu thư mục Một số trình duyệt không hỗ trợ danh sách kiểu bảng chọn và danh sách kiểu thư mục III.1.1 Danh sách không đánh số thứ tự Danh sách không đánh số thứ tự liệt kê các mục bằng một chấm tròn ở đầu mỗi mục Cú pháp: Mục thứ 1 Mục thứ 2 …… Cặp thẻ … đánh dấu bắt đầu và kết thúc danh sách Nó có tác dụng lùi lề trái danh sách vào sâu... đề 6 II.2 Thẻ trình bày trang II.2.1 Một số thẻ chính Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm trong phần thân của tài liệu Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ trình bày một số thẻ trình bày chính: định dạng phần địa chỉ (), đoạn văn bản (), xuống dòng (), căn chính giữa (), đường kẻ ngang (), đoạn văn bản đã định dạng... dùng kèm các thẻ hay để giãn một ô theo chiều đứng chiếm nhiều dòng hơn các ô ở cột khác Kết thúc bảng III.2.3 Các ví dụ Ví dụ một bảng cơ bản gồm 2 dòng và 3 cột: ABC DEF Kết quả trả về: Ví dụ một bảng có Item 2 (tiêu thức 2) chiếm 2 hàng (dòng): Item 1 Item... align=left|center|righ noshade> Ví dụ: February 8, 1995, CERN Kết quả thu được: e Căn chính giữa Thẻ này dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản Thẻ định nghĩa dạng: Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản f Đoạn văn bản đã định dạng sẵn Giới hạn đoạn văn bản đã được định dạng sẵn (pre-formatted) cần được thể hiện bằng phông chữ... Hãy tạo một trang web đơn giản trong đó có sử dụng tiêu đề mức 2 và thẻ Paragraph () 3 Tạo một trang web đơn giản tự giới thiệu về mình, bạn bao nhiêu tuổi, bạn làm gì, sở thích của bạn 26 CHƯƠNG III DANH SÁCH VÀ BẢNG TRONG HTML III.1 Các kiểu danh sách Việc liệt kê danh sách sẽ làm cho văn bản trở nên sáng sủa và dễ theo dõi Trong HTML có một số kiểu danh sách như danh sách đánh số thứ tự, danh... danh sách, ảnh, v.v… Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng,.v.v… Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ Các trang... I.4.5 Các phần tử HTML (HTML element) Một tài liệu HTML tạo nên từ nhiều thành phần HTML Một thành phần HTML được đánh dấu bằng một cặp thẻ mở và thẻ đóng Các thành phần HTML có thể cấu trúc phân cấp hình cây, thành phần "mẹ" chứa nhiều thành phần "con" khác lồng bên trong nó Có thành phần rỗng, chỉ có thẻ mở Để soạn thảo tài liệu HTML đúng cú pháp,... một ô BGCOLOR - Đặt màu nền của bảng B3/4t Đầu một dòng của bảng – Table row B3/4t Đầu một ô của bảng (bắt đầu cột trong một bảng) Thẻ giống như nhưng cho chữ đậm và căn chính giữa - (heading) Đặt tiêu đề (đầu đề) cho một bảng Thuộc tính dùng kèm bên trong các thẻ , ALIGN=MIDDLE|RIGHT hay để căn lề chữ trong một ô của bảng theo chiều ngang VALIGN=TOP|BOTTOM... Internet trong những năm gần đây I.2 HTML là gì? Để phổ biến thông tin trên toàn cục, cần một ngôn ngữ phổ biến và dễ hiểu, một kiểu việc phổ biến tiếng mẹ đẻ mà toàn bộ các máy tính có thể hiểu được Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup Language) HTML cho tác giả các ý nghĩa để: Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v.v… Truy tìm ... KHÁI NIỆM CƠ SỞ Chương II: TRÌNH BÀY TRANG Chương III: DANH SÁCH VÀ BẢNG TRONG HTML Chương IV: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML Chương V: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN Chương VI: BÀY TRÍ NỀN VÀ KHUNG... - Tên môn học: HTML VÀ THIẾT KẾ WEB - Mã số môn học: 3CI3 - Thời gian: Lý thuyết + thực hành 45T - Mục tiêu: Cung cấp cho học viên kiến thức liên quan đến ngôn ngữ HTML thiết kế Web - Những kiến... Language) HTML cho tác giả ý nghĩa để: Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v… Truy tìm thông tin trực tuyến theo liên kết siêu văn việc kích vào nút Thiết kế định