Khi nim v thit k trang Web Xy

  • Slides: 46
Download presentation
Khái niệm và thiết kế trang Web Xây dựng và vận hành một Website

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

Đặt vấn đề Cán bộ thư viện cần học cách lập kế hoạch, thiết

Đặ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?

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ử

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

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) W 3 C (World Wide Web Consortium) đưa ra

Các tiêu chuẩn về Web(1) W 3 C (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ư

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 W 3 C 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ề

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 [HTML 32] và HTML 2. 0 [RFC 1866]), 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” (W 3 C) 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

Các quy tắc HTML cơ bản (1)? Các thẻ HTML được đặt trong dấu ngoặc < > for ví dụ: <html> Mỗi thẻ đều phải có thẻ kết thúc <html> … </html> 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 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,

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 <body bgcolor="#FFFFFF" text="#000066"> … </body> UNESCO EIPICT. Module 6. Lesson 3 10

Các thẻ HTML cơ bản (1)? <html> <head> <title></title> </head> <body> <p> </body> </html>

Các thẻ HTML cơ bản (1)? <html> <head> <title></title> </head> <body> <p> </body> </html> UNESCO EIPICT. Module 6. Lesson 3 11

Các thẻ HTML cơ bản (2)? <html> [xác lập đây là một tài liệu

Các thẻ HTML cơ bản (2)? <html> [xác lập đây là một tài liệu HTML] <head> Chứa đựng thông tin về tài liệu HTML <title>My Library</title> </head> <body> <p>Content of My Library’s Web Page</p> </body> Contains all information displayed on the browser </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 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

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

Các công cụ tạo trang web sử dụng HTML? Chương trình biên tập HTML – ví dụ: Note. Pad, 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ở

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.

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ẻ

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ừ <h 1> đến <h 6>, <h 1> là đề mục cấp cao nhất và <h 6> 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. <h 1> My Library </h 1> (Tiêu đề của trang) <h 2> Mission, Vision and Goals </h 2> (đề mục chính) <h 3> Objectives </h 3> (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.

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

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

Cách bổ sung nội dung (2) 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. <h 2> Nhiệm vụ, tầm nhìn vào mục tiêu </h 2> <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> UNESCO EIPICT. Module 6. Lesson 3 20

Bài tập 3 1. Sử dụng Notepad để mở trang basic. htm 2. Sử

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ẻ <h 2> Nhiệm vụ, Tầm nhìn và Mục tiêu </h 2> <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 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ẻ <p>

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

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ẻ <UL> và <LI> <h 3> Mục tiêu </h 3> <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> UNESCO EIPICT. Module 6. Lesson 3 23

Các thẻ HTML khác (2) <h 3> Mục tiêu </h 3> <ul><li> Bổ sung

Các thẻ HTML khác (2) <h 3> Mục tiêu </h 3> <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> 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

Các thẻ HTML khác (3) Danh sách có thứ tự là danh sách được đánh số sử dụng thẻ <ol> và <li> <h 3> Các nguồn tin của thư viện </h 3> <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> UNESCO EIPICT. Module 6. Lesson 3 25

Các thẻ HTML khác (4) <h 3> Các nguồn tin của thư viện </h

Các thẻ HTML khác (4) <h 3> Các nguồn tin của thư viện </h 3> <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> 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

Các thẻ HTML khác (5) 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> </ol> UNESCO EIPICT. Module 6. Lesson 3 27

Các thẻ HTML khác (6) <ol> <li> Các bộ sưu tập của thư viện

Các thẻ HTML khác (6) <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> </ul> </ol> 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

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 <UL> hình vuông hoặc hình tròn <OL>, từ chữ số 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) <ol type=“I”> <li> Các bộ sưu tập của thư

Các thẻ HTML khác (8) <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> <li> Mục lục thư viện </li> <li> Nguồn tin điện tử </li> <ul type=“disc”> <li> CD-ROM </li> <li>CSDL tóm tắt và chỉ mục</li> </ul> </ol> 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

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

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

Cách bổ sung hình ảnh (2) Chèn thẻ <img> vào chỗ bạn muốn đặt

Cách bổ sung hình ảnh (2) Chèn thẻ <img> 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”> 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á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

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 n n n Xara 3 D 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

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

Cách tạo siêu liên kết (2) <a href = “collection. htm”> Library Collection</a> <a

Cách tạo siêu liên kết (2) <a href = “collection. htm”> Library Collection</a> <a href = “http: //www. unesco. org/webworl d/portal_bib/” > UNESCO Libraries Portal </a> 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

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 <a href = “mylibrary. jpg” > My. Library </a> <a href = “mylibrary. jpg” > <img src “mylibrary_sm. jpg”> </a> <a href “mylibrary. jpg” border = “ 0” > <img src “mylibrary_sm. jpg” > </a> UNESCO EIPICT. Module 6. Lesson 3 38

Cách tạo siêu liên kết (4) <a href = “mylibrary. jpg” > My. Library

Cách tạo siêu liên kết (4) <a href = “mylibrary. jpg” > My. Library </a> <a href = “mylibrary. jpg” > <img src = “mylibrary_sm. jpg” > </a> <a href = “mylibrary. jpg” > <img src = “mylibrary_sm. jpg” border = “ 0” > </a> 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

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 <a href = “mailto: [email protected]” > [email protected] edu </a> 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.

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

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à Java. Script 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ý

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

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

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

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