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[r]
(1)Tài liệu hướng dẫn thiết kế website cá nhân EasyVN (Bài 5)
HTML - Khái niệm 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 HTML Lên
HTML chữ viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) Đây đoạn mã để tạo 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 nội dung trang web địi hỏi nhiều cơng sức thời gian
Chúng ta dùng chương trình thông dụng Word, Frontpage để thiết kế trang web Sau copy mã HTML từ chương trình để đưa lên trang web bạn
Như tiết kiệm thời gian kết nối với Internet
Khi cần bổ sung chỉnh sửa nội dung trang web, cần thực việc Word Frontpage, sau đưa lên website
Hầu hết người dùng máy tính thơng thường sử dụng chương trình Word để trình bày văn bản, văn ngồi chữ cịn có hình ảnh,
Ngồi Word, nhiều người dùng chương trình Frontpage
Mục đích tài liệu giúp cho người dùng biết số nguyên tắc để tạo nội dung trang web Word Frontpage, cách lấy mã HTML để đưa lên website
Chúng không vào chi tiết cách sử dụng chương trình
Ghi chú: Khi đưa tiếng Việt vào nội dung trang web, bạn nên sử dụng chương trình gõ tiếng Việt Vietkey, Unikey Tốt dùng font Unicode (như Arial, Verdana, Times New Roman, ) font VNI-Times, chưa hỗ trợ font khác
Dùng Word 97 để tạo HTML Lên
(2)Sau soạn nội dung, lưu trang web sau: Nhấp vào menu File chọn Save as
Xin lưu ý, hình ảnh trang web giữ nguyên tên ban đầu nằm folder với trang web
Sau lưu trang web, nhấp vào menu File, chọn Web Page Preview Bạn thấy nội dung dạng web
Nhấp vào menu View, chọn Source, bạn thấy toàn mã HTML trang web
Dùng Word 2000 để tạo HTML Lên
(3)Bạn nhận hình soạn thảo sau:
Bạn soạn nội dung trang web tương tự soạn văn
- Soạn tiếng Việt: Ghi nhớ dùng font unicode (Arial, verdana, Times New Roman, Tahoma) font VNI-Times Không dùng font khác
- Nên dùng table để dễ quản lý chữ hình ảnh
(4)Sau soạn xong lưu 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 trang1 đặt folder website (C:\website)
Nếu trang web bạn có gắn hình ảnh, hình ảnh chứa folder có tên trang1_files, đặt tên image001, image002,
Bạn cần nhớ vị trí này, để đưa lên website, bạn cần phải chọn vị trí
Sau lưu trang web, bạn cần xem nội dung dạng web Nhấp vào menu File chọn Web Page Preview
Bạn xem trang web dạng web
Khi đưa lên website bạn nhìn thấy nội dung tương tự
(5)Đây 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="http://www.w3.org/TR/REC-html40"> <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 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
(6)margin-bottom:.0001pt; text-align:center; mso-pagination:widow-orphan; font-size:16.0pt; mso-bidi-font-size:12.0pt; font-family:Arial;
mso-fareast-font-family:"Times New Roman"; font-weight:bold;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} > </style>
<! [if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="2050"/> </xml><![endif] ><! [if gte mso 9]><xml>
<o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1"/> </o:shapelayout></xml><![endif] > </head>
<body lang=EN-US style='tab-interval:36.0pt'> <div class=Section1>
<p class=MsoTitle><span style='color:red'>EasyVN xin chào bạn<o:p></o:p></span></p>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'><![if !supportEmptyParas]> <! [endif]><o:p></o:p></span></p>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'><! [if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/> <v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/> <v:f eqn="sum @0 0"/>
<v:f eqn="sum 0 @1"/> <v:f eqn="prod @2 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 1"/>
<v:f eqn="prod @6 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> <o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:93.75pt;
height:210.75pt'>
(7)</v:shape><![endif] ><![if !vml]><img width=125 height=281 src="./trang1_files/image001.jpg" v:shapes="_x0000_i1025"><! [endif]><o:p></o:p></span></p>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'><![if !supportEmptyParas]> <! [endif]><o:p></o:p></span></p>
<p class=MsoNormal align=center style='text-align:center'><span style='font-family:Arial'>Chúc bạn thành
công<o:p></o:p></span></p> </div>
</body> </html>
Xem chi tiết phần Đưa HTML lên website
Dùng Word XP để tạo HTML Lên
Dùng Word XP, tương tự Word 2000, khác phần cách chọn Blank Web Page, xem hình sau đây:
Dùng Word 2003 để tạo HTML Lên
Dùng Word 2003, tương tự Word 2000, khác phần cách chọn Blank Web Page
(8)Nhấp vào mục Web page để thiết kế trang web Sau thiết kế xong,
Dùng FrontPage để tạo HTML Lên
Mở FrontPage, bạn có sẵn trang web để thiết kế, sau:
(9)Hoặc lấy mã HTML cách nhấp vào mục HTML
Xin lưu ý: Các hình ảnh đưa vào trang web, lưu giữ tên cũ vị trí gốc trước khơng đưa vào folder với trang web
Đưa HTML lên website Lên
Sau có mã HTML Copy mã HTML Login vào website bạn
Mở trang web bạn muốn thiết kế Nhấp vào nút HTML
Bạn mở trang sau đây:
Copy mã HTML vào trống, sau nhấp vào nút OK
Ghi nhớ, copy tất mã HTML, khơng bỏ sót chữ
(10)Nhấp vào nút Browse để chọn file, nhấp vào nút OK
Nếu có nhiều hình ảnh phải lặp lại thao tác nhiều lần, để đưa hình ảnh lên website Xin lưu ý:
Đối với Word 2000, Word XP Word 2003, hình ảnh đặt tên lại image001, image002, chứa foldertenfile_files
Ví dụ: Tên file trang1 folder trang1_files
Bạn phải chọn file hình ảnh đưa lên website
Sau đưa tất hình ảnh lên website, bạn thấy kết qủa sau:
Cập nhật trang web (Update) Lên
Muốn cập nhật trang web, bạn cần soạn lại nội dung Word Và lặp lại thao tác đưa HTML lên website
Đối với hình ảnh:
(11) http://www.easyvn.com