Khái niệm và thiết kế trang Web

Name: Khái niệm và thiết kế trang Web
Uploaded: 2017-12-26T17:59:52+00:00
Duration: PTM28S9
Channel: 动散 殷
Description: Khái niệm và thiết kế trang Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bài tập 1 Làm theo các bước trong slide trước (slide 16) 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 Nếu làm đúng thì trang web được tạo ra phải giống như trang web trong slide 12-13 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

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ừ <h1> đến <h6>, <h1> là đề mục cấp cao nhất và <h6> 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. <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) UNESCO EIPICT. Module 6. Lesson 3

Bài tập 2 Bổ sung đề mục cho trang web của bạn (basic.htm) 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. Lưu tệp tin, sau đó sử dụng trình duyệt để kiểm tra/xem trang web 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

Kết quả của bài tập 2 UNESCO EIPICT. Module 6. Lesson 3

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. Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the <BODY> tag. <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> UNESCO EIPICT. Module 6. Lesson 3

Bài tập 3 Sử dụng Notepad để mở trang basic.htm 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> Lưu lại và xem kết quả; trang web phải giống như trong slide sau đây Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the <BODY> tag. UNESCO EIPICT. Module 6. Lesson 3

Bài tập 3 Thêm các đoạn văn bản khác sử dụng thẻ <p> 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 Emphasize that all information that should be displayed on the browser should be inserted in the start and closing of the <BODY> tag. UNESCO 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ẻ <UL> và <LI> <h3> Mục tiêu </h3> <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

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

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

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

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

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

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

Bài tập 4 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.. 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 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

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

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

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

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 UNESCO 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 <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 = “ UNESCO Libraries Portal </a> UNESCO EIPICT. Module 6. Lesson 3

<a href = “collection.htm”> Library Collection</a> <a href = “ > UNESCO Libraries Portal </a> UNESCO EIPICT. Module 6. Lesson 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” > MyLibrary </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

<a href = “mylibrary.jpg” > MyLibrary </a> <a href = “mylibrary.jpg” > <img src = “mylibrary_sm.jpg” border = “0” > </a> <a href = “mylibrary.jpg” > <img src = “mylibrary_sm.jpg” > </a> UNESCO EIPICT. Module 6. Lesson 3

Có thể tạo ra liên kết tới địa chỉ , khi đó máy tính sẽ tự động khởi động chương trình Contact <a href = > </a> UNESCO EIPICT. Module 6. Lesson 3

Bài tập 6 Dùng trang basic.htm làm trang chủ thư viện Tạo liên kết tới các trang collection.htm và services.htm Tạo liên kết ngược lại về trang basic.htm Đặt thông tin liên hệ tại phần cuối của mỗi trang ( , tel, v.v…) 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

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

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

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

Bài tập 7 Tải xuống và cài đặt Nvu – sẵn có đối với hệ điều hành Windows hay Linux Mở các trang web đã được tạo từ các bài tập trước – basic.htm, collection.htm v.v… Xem trang web dưới các chế độ khác nhau Chỉnh sửa các thuộc tính của trang web – tiêu đề, màu nền, v.v… 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 Lưu lại sau mỗi lần thay đổi UNESCO EIPICT. Module 6. Lesson 3

Bài tập 7 (tiếp) Chèn ảnh và các thành phần khác Tạo siêu liên kết đến và đi từ ba trang web này Sử dụng tính năng xem trước để xem các trang web Sử dụng trình duyệt để xem nếu trang web có gì khác biệt hay không Xem sách hướng dẫn sử dụng nhanh chương trình Nvu. UNESCO EIPICT. Module 6. Lesson 3

Khái niệm và thiết kế trang Web

Similar presentations

Presentation on theme: "Khái niệm và thiết kế trang Web"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Khái niệm và thiết kế trang Web

Similar presentations

Presentation on theme: "Khái niệm và thiết kế trang Web"— Presentation transcript:

Similar presentations

About project

Feedback