Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 11 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
11
Dung lượng
190 KB
Nội dung
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="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 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 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 các 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 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 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'> <v:imagedata src="./trang1_files/image001.jpg" o:title="decor6"/> 6 </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 cá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 trên Dùng Word XP, cũng tương tự như Word 2000, chỉ khác ở phần đầu tiên là cách chọn một Blank Web Page, xem hình sau đây: Dùng Word 2003 để tạo HTML Lên trên Dùng Word 2003, cũng tương tự như Word 2000, chỉ khác ở phần đầu tiên là cách chọn một Blank Web Page. Mở Word 2003, nhấp vào menu file, chọn New, bạn sẽ nhận được hình sau đây: 7 Nhấp vào mục Web page để thiết kế trang web. Sau khi thiết kế xong, Dùng FrontPage để tạo HTML Lên trên Mở FrontPage, bạn có sẵn một trang web để thiết kế, như sau: Sau khi thiết kế xong, lưu trang web bằng cách nhấp menu File, chọn Save As. Sau khi lưu, bạn có thể xem trang web bằng cách nhấp vào mục Preview. 8 Hoặc lấy mã HTML bằng cách nhấp vào mục HTML. Xin lưu ý: Các hình ảnh đưa vào trang web, khi lưu vẫn giữ tên như cũ và vẫn ở vị trí gốc trước đây chứ không đưa vào cùng folder với trang web. Đưa HTML lên website Lên trên Sau khi có được mã HTML. Copy mã HTML này. Login vào website của bạn. Mở trang web bạn muốn thiết kế. Nhấp vào nút HTML. Bạn sẽ mở được trang sau đây: Copy mã HTML vào ô trống, sau đó nhấp vào nút OK. Ghi nhớ, copy tất cả các mã HTML, không bỏ sót một chữ nào. Nếu trang web của bạn có chứa hình ảnh, bạn sẽ nhận được yêu cầu gởi File sau đây: 9 Nhấp vào nút Browse để chọn file, sao đó nhấp vào nút OK. Nếu có nhiều hình ảnh thì phải lặp lại thao tác này nhiều lần, để đưa hình ảnh lên website. Xin lưu ý: Đối với Word 2000, Word XP và Word 2003, các hình ảnh được đặt tên lại là image001, image002, . . và được chứa trong folder tenfile_files. Ví dụ: Tên file là trang1 thì folder là trang1_files. Bạn phải chọn đúng file thì các hình ảnh mới đưa lên được website. Sau khi đưa tất cả các hình ảnh lên website, bạn sẽ thấy được kết qủa như sau: Cập nhật trang web (Update) Lên trên Muốn cập nhật trang web, bạn chỉ cần soạn lại nội dung trong Word. Và lặp lại các thao tác đưa HTML lên website như trên. Đối với hình ảnh: - Các hình ảnh cũ đã có sẵn trên server, bạn có thể giữ nguyên này hoặc cập nhật chúng. - Các hình ảnh mới: Bạn phải đưa lên website. 10 [...].. .Website: http://www .easyvn. com Email: help @easyvn. com 11 . 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. div.MsoTitle {margin:0cm; 5 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. 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