SIDA_M5_M6 PPL3 ed.vn

Cách sử dụng các chương trình biên tập HTML để tạo trang web và website?. 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ê

Trang 1

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

Trang 3

3 UNESCO EIPICT Mod

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?

Trang 4

để tạo trang web và website

Bổ sung nội dung và các thành phần khác cho trang web

Trang 5

5 UNESCO EIPICT Mod

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

Trang 6

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

Trang 7

7 UNESCO EIPICT Mod

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

Trang 8

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)

Trang 9

9 UNESCO EIPICT Mod

Các thẻ phải được sắp xếp theo đúng trật tự

<head><title>My Library Web Site</title>

</head> đầ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

Trang 10

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ẻ

< body bgcolor= "#FFFFFF" text= "#000066" > … < /body >

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

Trang 11

11 UNESCO EIPICT Mod

Trang 12

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

<body>

<p>Content of My Library’s Web Page</p>

</body> Contains all information displayed on the browser

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

Trang 13

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)?

Trang 14

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ử

Trang 15

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

Trang 16

Bài tập 1

1.

1 Làm theo các bước trong slide trước (slide 16)

2.

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.

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.

4 Nếu chưa đúng thì hãy đọc lại hướng dẫn từng

bước sử dụng Notepad

Trang 17

<h1> My Library </h1> (Tiêu đề của trang)

<h2> Mission, Vision and Goals </h2> (đề mục chính)

<h3> Objectives </h3> (tiểu đề mục)

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

Trang 18

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

Trang 19

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

Trang 20

Bổ sung nội dung văn bản sử dụng thẻ <p>

Thẻ <p> 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.

<h2> Nhiệm vụ, tầm nhìn vào mục tiêu </h2>

<p> 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 </p>

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

Trang 21

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ẻ <h2> Nhiệm vụ, Tầm nhìn

và Mục tiêu </h2>

<p> 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 </p>

3 Lưu lại và xem kết quả; trang web phải giống như

trong slide sau đây

Trang 22

Bài tập 3

4 Thêm các đoạn văn bản khác sử dụng thẻ <p>

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

Trang 23

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à

Trang 24

<ul><li> Bổ sung bộ sưu tập tài liệu đa phương tiện phong phú </li>

<li> 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 </li>

</ul>

Trang 25

Danh sách có thứ tự là danh sách được đánh số

sử dụng thẻ <ol> và <li>

<h3> Các nguồn tin của thư viện </h3>

<li> Nguồn tin điện tử </li> </ol>

Trang 26

<h3> Các nguồn tin của thư viện </h3>

<ol> <li> Các bộ sưu tập của thư viện </li> <li> Mục lục thư viện </li>

<li> Nguồn tin điện tử </li> </ol>

Trang 27

Các danh sách có thể được nhóm lại theo thứ bậc

<ol>

<li> Các bộ sưu tập của thư viện </li>

<ul> <li> Sách </li>

<li> Tạp chí </li>

</ul>

<li> Mục lục thư viện </li>

<li> Nguồn tin điện tử </li>

<ul> <li> CD-ROM </li>

<li> CSDL tóm tắt và chỉ mục </li> </li>

</ol>

Trang 28

<ul> <li> CD-ROM </li>

<li> CSDL tóm tắt và chỉ mục </li>

</ul>

</ol>

Trang 29

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

<UL> hình vuông hoặc

hình tròn <OL>, 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ã

Trang 30

<ol type=“I” >

<li> Các bộ sưu tập của thư viện </li>

<ul type=“square” > <li> Sách </li>

<li> Tạp chí </li> </ul>

<ul type=“disc” > <li> CD-ROM </li>

< li>CSDL tóm tắt và chỉ mục </li> </ul>

</ol>

Trang 31

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

Trang 32

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ẻ <img> 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 <img src = “mylogo.gif”>

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”>

Trang 33

Trang 34

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

Trang 35

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

Trang 36

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 <a> 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

<a href = “collection.htm” > Library Collection </a>

<a href = “http://www.unesco.org/webworld/portal_bib/”>

UNESCO Libraries Portal </a>

Trang 37

<a href = “collection.htm”>

Library Collection </a>

<a href =

“http://www.unesco.org/webworl d/portal_bib/” > UNESCO

Libraries Portal </a>

Trang 38

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

<a href = “mylibrary.jpg” > MyLibrary </a>

<a href = “mylibrary.jpg” > <img src

<a href “mylibrary.jpg” border = “0” > <img src

Trang 39

<a href = “mylibrary.jpg” > MyLibrary </a>

<a href = “mylibrary.jpg” >

<img src = “mylibrary_sm.jpg” >

</a>

<a href = “mylibrary.jpg” >

<img src = “mylibrary_sm.jpg” border

= “0” > </a>

Trang 40

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 <a href = “mailto:me@mylibrary” >

Trang 41

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

Trang 42

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ề

Trang 43

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

Trang 44

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

Trang 45

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

Trang 46

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.

Định dạng
Số trang	46
Dung lượng	825 KB