Bài giảng Xây dựng và vận hành một Website - Bài 3: Tạo trang web sử dụng HTML

UNESCO EIPICT. Module 6. Lesson 3 1 Khái niệm và thiết kế trang Web Xây dựng và vận hành một Website Bài 3. Tạo trang web sử dụng HTML 2UNESCO EIPICT. Module 6. Lesson 3 Đặt vấn đề Cán bộ thư viện cần học cách lập kế hoạch, thiết kế và trang web cho thư viện của mình. Cách duy nhất để học là thực hành tạo trang web. 3UNESCO EIPICT. Module 6. Lesson 3 Phạm vi HTML là gì? Các công cụ tạo trang web sử dụng HTML? Cách sử dụng các chương trình biên tập HTML để tạo trang web và website? Cách bổ sung nội dung và các thành phần khác cho trang web? 4UNESCO EIPICT. Module 6. Lesson 3 Mục tiêu Định nghĩa HTML Nhận diện các công cụ tạo trang web sử dụng HTML Sử dụng các chương trình biên tập HTML để tạo trang web và website Bổ sung nội dung và các thành phần khác cho trang web 5UNESCO EIPICT. Module 6. Lesson 3 HTML là gì? Ngôn ngữ đánh dấu siêu văn bản (HTML) Như đã nêu trong bài đầu tiên, HTML là ngôn ngữ để xuất bản siêu văn bản trên World Wide Web. Đó là ngôn ngữ xác định cấu trúc của thông tin. Nó sử dụng một loạt các thẻ và thuộc tính, được dùng để hiển thị văn bản và các thông tin khác và cung cấp siêu liên kết tới các tài liệu web khác 6UNESCO EIPICT. Module 6. Lesson 3 Các tiêu chuẩn về Web(1) W3C (World Wide Web Consortium) đưa ra một số quy định, (được gọi là “Các khuyến nghị") cũng như một số phần mềm và công cụ dùng để tăng cường khả năng tương tác giữa các trình duyệt web, các máy chủ, và các công nghệ web khác. 7UNESCO EIPICT. Module 6. Lesson 3 Các tiêu chuẩn về Web (2) Các công nghệ và giao thức web như HTML, CSS, XHTML, XML, và HTTP là các tiêu chuẩn web Phiên bản mới nhất của HTML là HTML 4.01 do W3C khuyến nghị sử dụng 8UNESCO EIPICT. Module 6. Lesson 3 HTML 4.01 là gì? HTML 4.01 đưa ra các định nghĩa về ngôn ngữ đánh dấu siêu văn bản (HTML) “Bên cạnh các tính năng về văn bản, đa phương tiện, và siêu liên kết trong các phiên bản trước (HTML 3.2 [HTML32] và HTML 2.0 [RFC1866]), HTML 4 hỗ trợ thêm về đa phương tiện, các lệnh lập trình, style sheet, hỗ trợ máy in, và hỗ trợ các tài liệu cho phép người tàn tật truy cập” (W3C) 9UNESCO EIPICT. Module 6. Lesson 3 Các quy tắc HTML cơ bản (1)? Các thẻ HTML được đặt trong dấu ngoặc < > for ví dụ: Mỗi thẻ đều phải có thẻ kết thúc Các thẻ phải được sắp xếp theo đúng trật tự My Library Web Site đầu tiên là thẻ bắt đầu, cuối cùng là thẻ kết thúc HTML coi tất cả các khoảng trắng là một khoảng trống đơn 10UNESCO EIPICT. Module 6. Lesson 3 Các quy tắc HTML cơ bản (2)? Các thẻ không phân biệt chữ hoa, chữ thường nhưng thông thường chúng được viết bằng chữ thường giống như các ngôn ngữ lập trình khác Hầu hết các thẻ đều có các thuộc tính tùy chọn với một số giá trị có thể để điều chỉnh hành vi của thẻ TAG attribute value closing tag Bên trong các thành phần của HTML (Thẻ) 11UNESCO EIPICT. Module 6. Lesson 3 Các thẻ HTML cơ bản (1)? 12UNESCO EIPICT. Module 6. Lesson 3 [xác lập đây là một tài liệu HTML] [ Thẻ kết thúc ] Các thẻ này xác định cấu trúc cơ bản của một trang web My Library Chứa đựng thông tin về tài liệu HTML Content of My Library’s Web Page Contains all information displayed on the browser Các thẻ HTML cơ bản (2)? 13UNESCO EIPICT. Module 6. Lesson 3 Các thẻ HTML cơ bản (viết bằng Notepad và lưu lại dưới dạng đuôi mở rộng .htm) Tạo một trang web hiển thị bên cạnh đoạn mã HTML. Các thẻ HTML cơ bản (3)? 14UNESCO EIPICT. Module 6. Lesson 3 Các công cụ tạo trang web sử dụng HTML? Chương trình biên tập HTML – ví dụ: NotePad, NVu – để tạo tài liệu HTML Trình duyệt Web – để kiểm tra và xem trang web được tạo ra (IE, Firefox v.v..) Sách tham khảo HTML – để hướng dẫn cách sử dụng các thẻ HTML Các công cụ, tiện ích và nguồn tài nguyên trực tuyến khác Thông tin và các tài liệu khác về thư viện dưới dạng tệp tin điện tử 15UNESCO EIPICT. Module 6. Lesson 3 Cách sử dụng Notepad để tạo trang web Tạo một thư mục mới Mở chương trình Notepad Sử dụng các thẻ HTML cơ bản đã đề cập trong slide 9-11 Lưu tệp tin (basic.htm) vào thư mục mới tạo ra Sử dụng trình duyệt để xem trang web mới tạo Sử dụng Notepad để bổ sung và biên tập nội dung Lưu tệp tin sau mỗi lần chỉnh sửa Nạp lại trang web vào trình duyệt để xem những thay đổi vừa tiến hành 16UNESCO EIPICT. Module 6. Lesson 3 Bài tập 1 1. Làm theo các bước trong slide trước (slide 16) 2. Mã nguồn của trang web (tệp tin được tạo ra bởi Notepad) phải giống như trong slide 12-13 3. Nếu làm đúng thì trang web được tạo ra phải giống như trang web trong slide 12-13 4. Nếu chưa đúng thì hãy đọc lại hướng dẫn từng bước sử dụng Notepad 17UNESCO EIPICT. Module 6. Lesson 3 Thêm đề mục sử dụng thẻ Header Thẻ Header bao gồm các cấp độ từ đến , là đề mục cấp cao nhất và là đề mục cấp thấp nhất. Kích cỡ của đề mục thể hiện hệ thống thứ bậc trong bố cục của trang web. My Library (Tiêu đề của trang) Mission, Vision and Goals (đề mục chính) Objectives (tiểu đề mục) Cách bổ sung nội dung (1) 18UNESCO EIPICT. Module 6. Lesson 3 Bài tập 2 1. Bổ sung đề mục cho trang web của bạn (basic.htm) 2. Sử dụng đề cương các thông tin mà bạn đã thu thập được về thư viện của mình ở bài 2 là các đề mục cho trang web. 3. Lưu tệp tin, sau đó sử dụng trình duyệt để kiểm tra/xem trang web 4. Nếu bạn sử dụng các thẻ và đề mục đúng như trong slide trước, thì bạn sẽ nhận được kết quả giống như trong slide sau đây 19UNESCO EIPICT. Module 6. Lesson 3 Kết quả của bài tập 2 20UNESCO EIPICT. Module 6. Lesson 3 Bổ sung nội dung văn bản sử dụng thẻ Thẻ chia các đoạn văn bản trên trang và chèn một dòng đơn vào giữa các đoạn đó, để phân biệt giữa các đoạn với nhau. Nhiệm vụ, tầm nhìn vào mục tiêu Thư viện chúng tôi nhằm mục đích trở thành thư viện ảo công cộng trong nước với các nguồn tin và dịch vụ tuyệt vời, phục vụ tất cả mọi người, mọi lúc, mọi nơi Cách bổ sung nội dung (2) 21UNESCO EIPICT. Module 6. Lesson 3 Bài tập 3 1. Sử dụng Notepad để mở trang basic.htm 2. Sử dụng thẻ chia đoạn văn bản để chèn đoạn văn bản dưới đây vào đằng sau thẻ Nhiệm vụ, Tầm nhìn và Mục tiêu Thư viện chúng tôi nhằm mục đích trở thành thư viện ảo công cộng trong nước với các nguồn tin và dịch vụ tuyệt vời, phục vụ tất cả mọi người, mọi lúc, mọi nơi 3. Lưu lại và xem kết quả; trang web phải giống như trong slide sau đây 22UNESCO EIPICT. Module 6. Lesson 3 Bài tập 3 4. Thêm các đoạn văn bản khác sử dụng thẻ 5. Mã hóa hoặc sao chép và dán thông tin bạn đã thu thập được ở bài 2 để bổ sung thông tin cho trang web của bạn 23UNESCO EIPICT. Module 6. Lesson 3 Các thẻ HTML khác (1) HTML cũng hỗ trợ tạo các danh sách; danh sách không có thứ tự và danh sách có thứ tự, là một cách tốt để thể hiện thông tin Danh sách không có thứ tự là danh sách kiếu bullet và sử dụng thẻ và Mục tiêu Bổ sung bộ sưu tập tài liệu đa phương tiện phong phú Phát triển các tài liệu phục vụ đào tạo và giáo dục người dùng tin 24UNESCO EIPICT. Module 6. Lesson 3 Mục tiêu Bổ sung bộ sưu tập tài liệu đa phương tiện phong phú Phát triển các tài liệu phục vụ đào tạo và giáo dục người dùng tin Các thẻ HTML khác (2) 25UNESCO EIPICT. Module 6. Lesson 3 Danh sách có thứ tự là danh sách được đánh số sử dụng thẻ và Các nguồn tin của thư viện Các bộ sưu tập của thư viện Mục lục thư viện Nguồn tin điện tử Các thẻ HTML khác (3) 26UNESCO EIPICT. Module 6. Lesson 3 Các nguồn tin của thư viện Các bộ sưu tập của thư viện Mục lục thư viện Nguồn tin điện tử Các thẻ HTML khác (4) 27UNESCO EIPICT. Module 6. Lesson 3 Các danh sách có thể được nhóm lại theo thứ bậc Các bộ sưu tập của thư viện Sách Tạp chí Mục lục thư viện Nguồn tin điện tử CD-ROM CSDL tóm tắt và chỉ mục Các thẻ HTML khác (5) 28UNESCO EIPICT. Module 6. Lesson 3 Các bộ sưu tập của thư viện Sách Tạp chí Mục lục thư viện Nguồn tin điện tử CD-ROM CSDL tóm tắt và chỉ mục Các thẻ HTML khác (6) 29UNESCO EIPICT. Module 6. Lesson 3 Các thẻ HTML khác (7) Thuộc tính về kiểu gạch đầu dòng cho phép tạo gạch đầu dòng theo kiểu hình vuông hoặc hình tròn , từ chữ số sang sang chữ thường (a) hay chữ hoa (A), hoặc từ chữ thường (i) hay chữ hoa (I) sang số La Mã 30UNESCO EIPICT. Module 6. Lesson 3 Các thẻ HTML khác (8) Các bộ sưu tập của thư viện Sách Tạp chí Mục lục thư viện Nguồn tin điện tử CD-ROM CSDL tóm tắt và chỉ mục 31UNESCO EIPICT. Module 6. Lesson 3 Bài tập 4 1. Bổ sung thông tin cho trang web về thư viện của bạn: nhiệm vụ, tầm nhìn và mục tiêu, lịch sử, giờ làm việc của thư viện, thông tin liên hệ, v.v.. 2. Tạo thêm hai trang web - Một trang về các bộ sưu tập của thư viện, và một trang về các dịch vụ của thư viện 3. Lưu các trang này với tên gọi là collection.htm và services.htm 32UNESCO EIPICT. Module 6. Lesson 3 Các bổ sung hình ảnh (1) Hình ảnh và các thành phần đồ họa khác có thể được chèn vào trang web bằng thẻ sử dụng thuộc tính src (source) để chỉ đến hình ảnh/đồ họa Nếu tệp tin ảnh (mylogo.gif) nằm trong cùng thư mục với tệp tin HTML thì sử dụng đường dẫn tương đối URL Nếu không, thì phải đưa đường dẫn đúng của tệp tin ảnh vào thuộc tính src <img src = “ /images/mylogo.gif”> 33UNESCO EIPICT. Module 6. Lesson 3 Cách bổ sung hình ảnh (2) Chèn thẻ vào chỗ bạn muốn đặt hình ảnh Có thể sử dụng các thuộc tính <img src = “mylogo.gif” width=“100” height=“100” align=“left” alt=“logo”> 34UNESCO EIPICT. Module 6. Lesson 3 Các nguồn để lấy hình ảnh Chương trình biên tập đồ họa – các công cụ để tạo và biên tập ảnh sẵn có dành cho những người muốn tự tạo hình ảnh cho trang web của mình Để học cách sử dụng các công cụ này đòi hỏi thời gian, sự say mê và tính sáng tạo Đối với những người gặp khó khăn về khả năng sáng tạo hoặc về công nghệ, có những nguồn trực tuyến cung cấp miễn phí ảnh,, clip-art, nút bấm, v.v Ngoài ra còn có các website cung cấp công cụ tạo logo, thanh tiêu đề và nút bấm theo ý người dùng 35UNESCO EIPICT. Module 6. Lesson 3 Bài tập 5 Tạo hoặc biên tập đồ họa Sử dụng bất kỳ máy tìm tin nào để tìm kiếm các chương trình biên tập ảnh bằng các từ khóa sau - Graphic editors freeware Tìm các tài liệu hướng dẫn sử dụng các công cụ mà bạn chọn Thử dùng các website tạo ảnh miễn phí sau  Xara 3D Heading Maker  Button maker   Cool Text: Logo and Graphics Generator  Sau đó, chèn ảnh mà bạn có vào trang web của mình 36UNESCO EIPICT. Module 6. Lesson 3 Cách tạo siêu liên kết (1) Liên kết siêu văn bản được tạo ra trên trang web sử dụng thẻ đánh dấu với tham chiếu href (Hypertext Reference) Các siêu liên kết kết nối trang web của bạn với các trang web khác trong website của bạn và với các tài liệu web khác ở bên ngoài Library Collection UNESCO Libraries Portal 37UNESCO EIPICT. Module 6. Lesson 3 Cách tạo siêu liên kết (2) Library Collection <a href = “ d/portal_bib/” > UNESCO Libraries Portal 38UNESCO EIPICT. Module 6. Lesson 3 Cách tạo siêu liên kết (3) Siêu liên kết của được dùng để kết nối với các hình ảnh đồ họa và các dạng đa phương tiện khác Biểu tượng và các thành phần đồ họa khác có thể được sử dụng như là các “nút bấm” để liên kết tới tài liệu được tham chiếu MyLibrary <img src “mylibrary_sm.jpg”> <img src “mylibrary_sm.jpg” > 39UNESCO EIPICT. Module 6. Lesson 3 Cách tạo siêu liên kết (4) MyLibrary <img src = “mylibrary_sm.jpg” border = “0” > 40UNESCO EIPICT. Module 6. Lesson 3 Cách tạo siêu liên kết (5) Có thể tạo ra liên kết tới địa chỉ e-mail, khi đó máy tính sẽ tự động khởi động chương trình e-mail Contact me@mylibrary.edu 41UNESCO EIPICT. Module 6. Lesson 3 Bài tập 6 1. Dùng trang basic.htm làm trang chủ thư viện 2. Tạo liên kết tới các trang collection.htm và services.htm 3. Tạo liên kết ngược lại về trang basic.htm 4. Đặt thông tin liên hệ tại phần cuối của mỗi trang (e-mail, tel, v.v) 5. Xem/Kiểm tra các liên kết/Biên tập và lưu lại 42UNESCO EIPICT. Module 6. Lesson 3 Các chương trình biên tập HTML dưới dạng WYSIWYG (1)? Các chương trình biên tập WYSIWYG cung cấp giao diện biên tập cho phép hiển thị giống như trang web sẽ được hiển thị trên trình duyệt và không đòi hỏi phải có kiến thức về HTML Sử dụng chương trình rất thuận tiện và có thêm các chức năng Không chỉ làm việc với HTML, mà còn với các công nghệ khác có liên quan như CSS, XML và JavaScript hay CMAScript 43UNESCO EIPICT. Module 6. Lesson 3 Các chương trình biên tập HTML dưới dạng WYSIWYG (2)? Có thể quản lý website và giao tiếp với các dịch vụ web từ xa thông qua giao thức FTP Tuy nhiên, những chương trình này thường tạo ra các mã HTML rườm rà và trang web bạn thấy khi tạo ra trong chương trình biên tập có thể khác đi khi được xem trên các trình duyệt Bạn cũng cần có kiến thức về HTML để sửa các lỗi khi trang web không hiển thị đúng trên trình duyệt 44UNESCO EIPICT. Module 6. Lesson 3 Nvu - một chương trình biên tập WYSIWYG Nvu – là một chương trình biên tập WYSIWYG mã nguồn mở có thể so sánh với các phần mềm thương mại Có các chức năng bổ sung giúp đơn giản hóa quá trình tạo và biên tập trang web khi tạo website Bạn có thể sử dụng NVu để tạo trang web mà không cần phải nhập một mã HTML nào NVu có chế độ biên tập HTML trực tiếp giống như một chương trình biên tập HTML đơn giản để sửa các lỗi hiển thị mà giao diện WYSIWYG không sửa được Nó có thể quản lý website và giao tiếp với các máy chủ web khác thông qua giao thức FTP 45UNESCO EIPICT. Module 6. Lesson 3 Bài tập 7 1. Tải xuống và cài đặt Nvu – sẵn có đối với hệ điều hành Windows hay Linux 2. Mở các trang web đã được tạo từ các bài tập trước – basic.htm, collection.htm v.v 3. Xem trang web dưới các chế độ khác nhau 4. Chỉnh sửa các thuộc tính của trang web – tiêu đề, màu nền, v.v 5. Sử dụng bảng màu hoặc xem các sách tham khảo về HTML hoặc Internet để biết về các hệ màu mà bạn có thể sử dụng 6. Lưu lại sau mỗi lần thay đổi 46UNESCO EIPICT. Module 6. Lesson 3 Bài tập 7 (tiếp) 7. Chèn ảnh và các thành phần khác 8. Tạo siêu liên kết đến và đi từ ba trang web này 9. Sử dụng tính năng xem trước để xem các trang web 10.Sử dụng trình duyệt để xem nếu trang web có gì khác biệt hay không 11.Xem sách hướng dẫn sử dụng nhanh chương trình Nvu.