Tài liệu hướng dẫn thiết kế website cá nhân EasyVN
(Bài 5)
HTML
- Khái niệm về HTML
- Dùng Word 97 để tạo HTML
- Dùng Word 2000 để tạo HTML (mô tả chi tiết)
- Dùng Word XP để tạo HTML
- Dùng Word 2003 để tạo HTML
- Dùng Frontpage để tạo HTML
- Đưa HTML lên website
- Cập nhật trang web (Update)
Ghi chú: Nhấp vào menu File, chọn Web Page Preview để xem dễ dàng hơn
Khái niệm về HTML Lên trên
HTML là chữ viết tắt của HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản).
Đây là các đoạn mã để tạo ra trang web. Ví dụ:
<HTML>
<BODY>
<font face=arial color=#000000 size=2>Xin chao cac ban</font>
</BODY>
</HTML>
Việc học HTML để tự soạn ra nội dung trang web đòi hỏi nhiều công sức và thời gian.
Chúng ta có thể dùng các chương trình thông dụng như Word, Frontpage để thiết kế trang web.
Sau đó copy mã HTML từ các chương trình này để đưa lên trang web của bạn.
Như vậy sẽ tiết kiệm được thời gian kết nối với Internet.
Khi cần bổ sung hoặc chỉnh sửa nội dung trang web, chỉ cần thực hiện việc này trong Word hoặc
Frontpage, sau đó đưa lên website.
Hầu hết những người dùng máy tính thông thường đều có thể sử dụng chương trình Word để trình bày
một văn bản, trong văn bản ngoài chữ còn có thể có hình ảnh, . . .
Ngoài Word, nhiều người cũng có thể dùng chương trình Frontpage.
Mục đích của tài liệu này là giúp cho người dùng biết một số nguyên tắc để tạo ra nội dung trang web
bằng Word và Frontpage, cách lấy mã HTML để đưa lên website.
Chúng tôi không đi vào chi tiết cách sử dụng 2 chương trình này.
Ghi chú: Khi đưa tiếng Việt vào nội dung trang web, các bạn nên sử dụng các chương trình gõ tiếng
Việt như Vietkey, Unikey. Tốt nhất là dùng các font Unicode (như Arial, Verdana, Times New Roman, . .)
hoặc font VNI-Times, chúng tôi chưa hỗ trợ các font khác.
Dùng Word 97 để tạo HTML Lên trên
Mở Word 97, nhấp vào menu File, chọn New, chọn Web pages, sau đó chọn Blank Web Page như hình
sau đây:
1
Sau khi soạn nội dung, lưu trang web như sau:
Nhấp vào menu File và chọn Save as
Xin lưu ý, các hình ảnh trong trang web sẽ được giữ nguyên tên ban đầu và nằm trong cùng một folder
với trang web.
Sau khi lưu trang web, nhấp vào menu File, rồi chọn Web Page Preview.
Bạn sẽ thấy được nội dung dưới dạng web.
Nhấp vào menu View, chọn Source, bạn sẽ thấy được toàn bộ mã HTML của trang web.
Dùng Word 2000 để tạo HTML Lên trên
Mở Word 2000, nhấp vào menu File, chọn New, sau đó chọn Webpage.
2
Bạn sẽ nhận được màn hình soạn thảo như sau:
Bạn soạn nội dung trang web tương tự như khi soạn văn bản.
- Soạn tiếng Việt: Ghi nhớ chỉ dùng font unicode (Arial, verdana, Times New Roman, Tahoma)
hoặc font VNI-Times. Không dùng các font khác.
- Nên dùng table để dễ quản lý chữ và hình ảnh.
- Muốn đưa hình ảnh vào, nhấp vào menu Insert, chọn Picture, sau đó chọn From file.
Sau đây là một ví dụ:
3
Sau khi soạn xong lưu dưới dạng Webpage: Nhấp vào menu File, sau đó chọn Save as Web page.
Ghi chú:
Ví dụ bạn đặt tên cho trang web là trang1 và đặt trong folder website (C:\website).
Nếu trong trang web của bạn có gắn hình ảnh, các hình ảnh sẽ được chứa trong folder có tên là
trang1_files, và được đặt tên là image001, image002,. .
Bạn cần nhớ vị trí này, để khi đưa lên website, bạn cần phải chọn các vị trí này.
Sau khi lưu trang web, bạn cần xem nội dung dưới dạng web.
Nhấp vào menu File rồi chọn Web Page Preview.
Bạn sẽ xem được trang web dưới dạng web.
Khi đưa lên website bạn sẽ nhìn thấy nội dung tương tự như vậy.
Lấy mã HTML: Khi đang xem duới dạng Web Page Preview, nhấp vào menu View, chọn Source.
Bạn sẽ nhận được toàn bộ mã HTML của trang web.
4
Đây là nội dung bạn cần đưa lên website.
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns=" /><head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=Original-File href="file:///C:/website/trang1.htm">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./trang1_files/filelist.xml">
<link rel=Edit-Time-Data href="./trang1_files/editdata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>EasyVN xin chào các bạn</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>No name</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>No name</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>5</o:TotalTime>
<o:Created>2004-08-18T17:49:00Z</o:Created>
<o:LastSaved>2004-08-18T17:54:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>7</o:Words>
<o:Characters>43</o:Characters>
<o:Company>No company</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>52</o:CharactersWithSpaces>
<o:Version>9.2720</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:Zoom>0</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
p.MsoTitle, li.MsoTitle, div.MsoTitle
{margin:0cm;
5