Lập Web HTML sv cong nghe thuc pham SIDA PP HaiHa

 Học cách dùng HTML và XHTML để tạo các trang web Sau khóa học, học viên sẽ tạo ra được: + Một trang web cơ bản về thư viện mình + Một Thư mục chuyên đề dưới dạng Web + Một danh mục c

Mr Nguyễn Hải Hà

Theo chương trình tập huấn của quỹ SIDA

Mr Nguyễn Hải Hà

Theo chương trình tập huấn của quỹ SIDA

Tạo trang Web

 Học cách dùng HTML và XHTML để tạo các trang web

 Sau khóa học, học viên sẽ tạo ra được:

+ Một trang web cơ bản về thư viện mình

+ Một Thư mục chuyên đề dưới dạng Web

+ Một danh mục các website về một (hoặc nhiều) lĩnh vực nào đó.

 Thời gian học: 3 ngày

 Yêu cầu về học viên:

+ Là cán bộ tin học hoặc có trình độ tin học cơ bản và văn phòng.

+ Là cán bộ nghiệp vụ thành thạo trong việc biên soạn thư mục có trình độ tin học văn phòng.

 Yêu cầu về máy tính và phần mềm: Một máy tính có ổ cứng trên 20GB với RAM

256 trở lên, cài hệ điều hành windows XP, NVU, Microsoft Office

Giới thiệu chung

Bài 1- Website là gì?

Trong bài này, chúng ta nghiên cứu:

1 Định nghĩa website

 Website là một văn phòng ảo của cơ quan, đơn vị, doanh nghiệp, cá nhân… trên mạng Internet Website bao gồm toàn bộ thông tin, dữ liệu, hình ảnh về đơn vị, các sản phẩm, dịch vụ và hoạt động mà đơn

vị đó muốn truyền đạt tới người truy cập Internet Với vai trò quan trọng như vậy, có thể coi Website chính là bộ mặt của cơ quan, đơn

vị, là nơi để đón tiếp và giao dịch với các khách hàng trên mạng

 Website không chỉ đơn thuần là nơi cung cấp thông tin cho người xem, cho các khách hàng và đối tác, nó còn phải phản ánh được những nét đặc trưng của cơ quan, đơn vị đó, đảm bảo tính thẩm mỹ cao, tiện lợi, dễ sử dụng và đặc biệt phải có sức lôi cuốn người sử dụng để thuyết phục họ trở thành khách hàng của cơ quan mình.

Loại Người dùng Truy cập Các ứng dụng

Internet Mọi người Công cộng Chia sẻ thông tin (giờ họat động, thủ

tục mượn trả, OPAC, bản đồ toạ lạc, các phương tiện, các sự kiện sắp diễn

ra, FAQs-Các câu hỏi thường gặp, v.v.)

Intranet

Mạng nội bộ

Nhân viên thư viện

Riêng biệt Chia sẻ thông tin (các biểu mẫu, tài liệu

hướng dẫn, quy trình, chính sách, v.v.) với nhân viên

Extranet

mạng nội bộ

mở rộng

Các thành viên thư viện

- Bạn đọc

Riêng biệt Chia sẻ thông tin (các bổ sung mới

nhất, website mới, đánh giá sách, v.v.) với bạn đọc, thành viên thư viện

2 Các loại website và mục đích của nó (ví dụ trong thư viện)

3 Các giai đoạn tạo lập và phát triển Website

Có Năm giai đoạn:

4 Cấu trúc của Website

Bài 2: Tạo lập Website

Trong bài này, chúng ta nghiên cứu:

 HTML là chữ tắt của Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản) và XHTML là chữ tắt của Extensible Hypertext Markup Language (ngôn ngữ dánh dấu mở rộng siêu văn bản)

 HTML và XHTML định ra cú pháp và cách sắp xếp các hướng đặc biệt,

ấn định sẵn không được hiển thị ra bởi các trình duyệt web nhưng đặt vấn đề cho các trình duyệt cách làm sao để hiển thị nội dung tài liệu, bao gồm chữ, hình ảnh, và các loại đa phương tiện hỗ trợ khác

 HTML và XHTML chỉ là hai loại ngôn ngữ đánh dấu

 Các ngôn ngữ đánh dấu quan trọng khác của web là XML và MathML

1 Định nghĩa HTML & XHTML

 Để “đánh dấu” một chữ có nghĩa là chèn các mã đặc biệt gọi là

tag vào trong chữ

 Các tag này kiểm soát sự hiển thị của chữ, hình ảnh và các tài liệu đa phương tiện hỗ trợ khác trên trang Web

 Ngôn ngữ đánh dấu để tạo các siêu văn bản là HTML, ngôn ngữ này có hơn hàng trăm tag HTML

 Từ đầu tiên trong một tag là tên chính thức của nó, thường mô tả chức năng của nó

 Bất kỳ các từ phụ thêm trong vùng thuộc tính đặc biệt của tag, đôi khi với một giá trị kết hợp sau dấu bằng

2 Tag là gì?

 Các thuộc tính được định rõ thêm hoặc điều chỉnh các tác động của tag

<p>Họ và tên <i>Nguyễn Hải Hà</i></p>

 Các Tag định rõ và ảnh hưởng một vùng riêng biệt tài liệu của bạn

 Vùng bắt đầu nơi tag và thuộc tính của nó xuất hiện đầu tiên trong tài liệu nguồn ( tag bắt đầu ), và tiếp tục cho đến khi gặp tag kết thúc/ dừng lại tương ứng

 Các tag kết thúc không bao giờ bao gồm các thuộc tính

 Trong HTML, hầu hêt các tag, nhưng không phải tất cả đều có tag kết thúc/dừng

 Trong XHTML, tất cả tag đều có các tag kết thúc/dừng tương ứng!

Việc học HTML và XHTML giống như học bất kỳ một ngôn ngữ mới nào, máy tính hoặc con người Hầu hết các sinh viên đầu tiên chìm đắm bản thân với các ví dụ Học với các người khác là cách học tự nhiên, làm cho dễ dàng và vui hơn Lời khuyên của chúng tôi cho bất kỳ ai muốn học HTML và XHTML là hãy ra ngoài Web với một trình duyệt thích hợp

và tự xem cái gì trông hay, cái gì hiệu quả và hữu hiệu đối với bạn ,

Xem xét các tài liệu của những người khác và cân nhân nhắc các khả năng Bắt chước là cái mà nhiều webmaster đã dùng để học ngôn ngữ.

Musciano & Kennedy, 2007, p xiii

3 Học HTML/XHTML thế nào?

1 Tạo thư mục My Webpages v à lưu tất cả những gì về website tại đây

2 Cấu trúc cơ bản của 1 website:

4 Khảo sát NVU

 Tìm hiểu giao diện của NVU

 Bạn sẽ được hướng dẫn một cách hệ thống qua cấu trúc thực đơn

 Chú ý phần kiểm tra chính tả hiện có – tính năng này có thể rất hữu dụng

6 Phân loại các tag HTML (Mười hai loại được đề cập sau đây):

 Các tag về cấu trúc trang

 Các tag loại Khối

 Các tag loại Font logic

 Các tag loại Physical Font

 Các tag đầu đề

 Các tag liệt kê và linh tinh

 Các tag biểu mẫu

 Các tag bảng

 Ký tự đơn vị

 Các tag neo (anchor) / liên kết

 Các tag hình ảnh

 Các tag đối tượng

Ngoài ra còn có 2 loại tag định dạng

7 Các thuộc tính của Tag

 Mặc định canh hàng đầu đề của hầu hết các trình duyệt là bên trái

Ví dụ: <H1 align="right">Far Right!</H1>

 Tạo liên kết:

Các liên kết siêu văn bản:

<a href=“http://www.ntu.edu.sg/”>Nanyang Technological University</a> Liên kết email:

<a href=“mailto:ascklee@gmail.com”>Email Lee Chu Keong</a>

8 Đồ họa Web :

 Các thao tác xử lý ảnh trước khi đưa vào web (Paint, Photoshop…)

 Dùng NVU để đưa ảnh vào trang web

 Thuộc tính SRC

 Thuộc tính Align, border, Height và Width, phần trăm

Yêu cầu

Làm 1 bản danh sách, tiểu sử dạng web các nhân vật nổi tiếng Trang web chia thành 2 nửa, 1 nửa là Danh sách và 1

nửa là Nội dung của nhân vật.

Thực hành 2

Th c hành… ự

(mở file “cacnhanvatnoitieng.doc”)

từng file riêng (ví dụ: ha.html, minh.html…)

tên là Index.html.

Intro

<frame src="menu.html" name="menu">

<frame src="intro.html" name="content">

</frameset>

</html>

<div>Các nhân vật trong anbum này mà tôi muốn giới thiệu có tất cả

18 người, trong đó Việt Nam có 12 và Lào có 6 người.<br>

Đặc biệt có cả ảnh đi kèm</div>

Trân trọng kính mời quý vị nhấn vào từng nhân vật để xem ok?<br>

</body>

</html>

File Intro.html

<li><a href="Buonphasit.html" target="content">Buon Pha Sit</a></li>

<li><a href="Dung.html" target="content">Nguyễn Dũng</a></li>

<li><a href="Giang.html" target="content">Nguyễn Thị Giang</a></li>

<li><a href="Gioi.html" target="content">Nguyễn Hữu Giới</a></li>

<li><a href="Ha.html" target="content">Nguyễn Hải Hà</a></li>

<li><a href="Khan.html" target="content">Khan Thama Ly</a></li>

<li><a href="Khanh.html" target="content">Huỳnh Cong Khanh</a></li>

<li><a href="Linh.html" target="content">Trần Nhật Linh</a></li>

<li><a href="May.html" target="content">Phista May</a></li>

<li><a href="Minh.html" target="content">Đặng Bình Minh</a></li>

<li><a href="Nghe.html" target="content">Nguyễn Thị Nghê;</a></li>

<li><a href="Noy.html" target="content">Noy</a></li>

<li><a href="Phayvan.html" target="content">Phay Van</a></li>

<li><a href="Quang.html" target="content">Kim Quang</a></li>

<li><a href="Sinh.html" target="content">Nguyễn Ngọc Sinh</a></li>

<li><a href="Thien.html" target="content">Nguyễn Văn Thiê;n</a></li>

<li><a href="Trang.html" target="content">Nguyễn Như Trang</a></li>

<li><a href="QandA.html" target="content">Giải đáp thắc mắc</a></li>

</ul>

</body>

</html>

File Menu.html

Tham quan một số website

http://web.simmons.edu/~schwartz/462-defs.html

Phần bài giảng đã kết thúc, sau đây là phần

giải đáp những thắc mắc của học viên?

Không nên ấp úng và e ngại, những gì chưa hiểu mà kịp hỏi, sẽ giúp bạn nhớ lâu hơn !

Thank You !