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

1 UNESCO 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.

UNESCO EIPICT. Module 6. Lesson 3 2

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?

UNESCO EIPICT. Module 6. Lesson 3 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

UNESCO EIPICT. Module 6. Lesson 3 4

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

UNESCO EIPICT. Module 6. Lesson 3 5

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.

UNESCO EIPICT. Module 6. Lesson 3 6

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

UNESCO EIPICT. Module 6. Lesson 3 7

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)

UNESCO EIPICT. Module 6. Lesson 3 8

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ự đầ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

UNESCO EIPICT. Module 6. Lesson 3 9

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ẻ

Bên trong các thành phần của HTML (Thẻ)

TAG attribute

value

closing tag

…

UNESCO EIPICT. Module 6. Lesson 3 10

Các thẻ HTML cơ bản (1)?

UNESCO EIPICT. Module 6. Lesson 3 11

Các thẻ HTML cơ bản (2)?

[xác lập đây là một tài liệu HTML]

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

[ 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

UNESCO EIPICT. Module 6. Lesson 3 12

Các thẻ HTML cơ bản (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.

UNESCO EIPICT. Module 6. Lesson 3 13

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ử

UNESCO EIPICT. Module 6. Lesson 3 14

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

UNESCO EIPICT. Module 6. Lesson 3 15

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

UNESCO EIPICT. Module 6. Lesson 3 16

Cách bổ sung nội dung (1)

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)

UNESCO EIPICT. Module 6. Lesson 3 17

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

UNESCO EIPICT. Module 6. Lesson 3 18

Kết quả của bài tập 2

UNESCO EIPICT. Module 6. Lesson 3 19

Cách bổ sung nội dung (2)

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

UNESCO EIPICT. Module 6. Lesson 3 20

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

UNESCO EIPICT. Module 6. Lesson 3 21

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

UNESCO EIPICT. Module 6. Lesson 3 22

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

UNESCO EIPICT. Module 6. Lesson 3 23

Các thẻ HTML khác (2)

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

UNESCO EIPICT. Module 6. Lesson 3 24

Các thẻ HTML khác (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

1. Các bộ sưu tập của thư viện
2. Mục lục thư viện
3. Nguồn tin điện tử

UNESCO EIPICT. Module 6. Lesson 3 25

Các thẻ HTML khác (4)

Các nguồn tin của thư viện

1. 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ử

UNESCO EIPICT. Module 6. Lesson 3 26

Các thẻ HTML khác (5)

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

UNESCO EIPICT. Module 6. Lesson 3 27

Các thẻ HTML khác (6)

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

UNESCO EIPICT. Module 6. Lesson 3 28

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ã

UNESCO EIPICT. Module 6. Lesson 3 29

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

UNESCO EIPICT. Module 6. Lesson 3 30

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

UNESCO EIPICT. Module 6. Lesson 3 31

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

UNESCO EIPICT. Module 6. Lesson 3 32

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

UNESCO EIPICT. Module 6. Lesson 3 33

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

UNESCO EIPICT. Module 6. Lesson 3 34

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

http://www.xara.com/referrer/headmaker_trial.asp

 Button maker  http://www.coolarchive.com/buttonmaker.php  Cool Text: Logo and Graphics Generator  http://cooltext.com/

Sau đó, chèn ảnh mà bạn có vào trang web của mình

UNESCO EIPICT. Module 6. Lesson 3 35

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

UNESCO EIPICT. Module 6. Lesson 3 36

Cách tạo siêu liên kết (2)

Library Collection

UNESCO Libraries Portal

UNESCO EIPICT. Module 6. Lesson 3 37

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

UNESCO EIPICT. Module 6. Lesson 3 38

Cách tạo siêu liên kết (4)

MyLibrary

UNESCO EIPICT. Module 6. Lesson 3 39

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

UNESCO EIPICT. Module 6. Lesson 3 40

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

UNESCO EIPICT. Module 6. Lesson 3 41

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 ECMAScript

UNESCO EIPICT. Module 6. Lesson 3 42

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

UNESCO EIPICT. Module 6. Lesson 3 43

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

UNESCO EIPICT. Module 6. Lesson 3 44

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

UNESCO EIPICT. Module 6. Lesson 3 45

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.

UNESCO EIPICT. Module 6. Lesson 3 46