Lập Web HTML sv cong nghe thuc pham SIDA PP HaiHa
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (439.94 KB, 27 trang )
Tạo
Tạo trang
trang Web
Web
Mr.
Mr. Nguyễn
Nguyễn Hải
Hải Hà
Hà
Theo
Theo chương
chương trình
trình tập
tập huấn
huấn của
của quỹ
quỹ SIDA
SIDA
Giới thiệu chung
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
Bài 1- Website là gì?
Trong bài này, chúng ta nghiên cứu:
Định nghĩa website
Các loại website, mục đích của nó
Các giai đoạn tạo lập và phát triển 1 website
Cấu trúc của website
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.
2. Các loại website và mục đích của nó (ví dụ
trong thư viện)
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
3. Các giai đoạn tạo lập và phát triển Website
Có Năm giai đoạn:
-Lên kế hoạch
-Phân tích
-Thiết kế và phát triển
-Thực hiện và duy trì
-Kiểm tra
4. Cấu trúc của Website
Website tuyến tính
Website phân tầng
Website mạng nhện
(Trong phần này, giới thiệu một số website của 1 vài Thư viện…)
Bài 2: Tạo lập Website
Trong bài này, chúng ta nghiên cứu:
HTML là gì?
Tag là gì?
Học HTML/XHTML thế nào?
Cách tạo lập một HTML
1. Định nghĩa HTML & XHTML
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
2. Tag là gì?
Để “đá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
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
Họ và tên <i>Nguyễn Hải Hà</i>
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!
3. Học HTML/XHTML thế nào?
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
4. Cách tạo lập website
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:
<HTML>
<HEAD>
<TITLE>So yeu ly lich</TITLE>
</HEAD>
<BODY>
<H2>Sơ yếu lý lịch</H2>
Nội dung của lý lịch
</BODY>
</HTML>
3. Phương pháp tạo website (Có 3 phương pháp)
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
5. Giá trị màu
Màu sắc có thể thiết lập bằng cách dùng sáu con số trong hệ thập lục phân đại diện cho các
màu đỏ, xanh lá và xanh dương (RGB) là thành phần của màu sắc
Hai ký tự đầu tiên tương ứng với phần đỏ của màu, hai ký tự kế tiếp ứng với phần xanh lá, và
hai ký tự cuối cùng là phần xanh dương (RRGGBB)
Giá trị 00 ứng với việc phần màu bị tắt đi hoàn toàn, giá trị FF ứng với phần màu bật lên
#FF0000 – đỏ
#00FF00 – xanh lá
#0000FF – xanh dương
#FFFF00 – vàng
#FF00FF – đỏ thẫm
#00FFFF – lục lam
#FFFFFF – trắng
#000000 – đen
Ghi nhớ: Giá trị màu trong tag phải được đặt sau dấu (#)
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:
Liên kết email:
<a href=“mailto:”>Email Lee Chu Keong</a>
Danh sách: Ví dụ:
<OL> tạo ra một danh sách theo thứ tự
<LI></LI> kèm theo một mục
<UL> tạo ra một danh sách không theo thứ tự
<LI></LI> kèm theo một mục
<DL> kèm một danh sách các định nghĩa
<DT> kèm thuật ngữ được định nghĩa
<DD> kèm theo định nghĩa
danh sách định nghĩa thường sử dụng như bảng chú giải
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
Thực hành 1
Làm một bản lý lịch dạng Web cho bản thân, với các thông tin cá nhân:
Họ và tên
Tuổi và giới tính
Địa chỉ
Số điện thoại
Địa chỉ Email
Tình trạng hôn nhân
Mục tiêu sự nghiệp
Giáo dục
Kinh nghiệm/Quá trình công tác
…
Thực hành 2
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…
Giả sử chúng ta có 1 bản thư mục như sau:
(mở file “cacnhanvatnoitieng.doc”)
Dùng NVU, cắt riêng từng nhân vật và lưu vào
từng file riêng (ví dụ: ha.html, minh.html…)
Phần lời giới thiệu và trang nội dung chính lấy
tên là Index.html.
Các thuộc tính tạo liên kết tại file Menu và file
Intro
File Index.html
<html>
<head>
<title>Cac nhan vat noi tieng</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html" name="menu">
<frame src="intro.html" name="content">
</frameset>
</html>
File Intro.html
<html>
<head>
<meta content="text/html; charset=ISO-8859-1“httpequiv="content-type">
<title>Intro.html</title>
</head>
<body>
LỜI GIỚI THIỆU
<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.
Đặ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?
</body>
</html>
File Menu.html
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Menu</title>
</head>
<ul style="background-color: rgb(204, 204, 204);">
<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>
