Your SlideShare is downloading. ×
  • Like
Tao website
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Tao website

  • 1,573 views
Published

Tạo website của bạn & Thiết kế webPAGE …

Tạo website của bạn & Thiết kế webPAGE
VÕ HIẾU NGHĨA

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,573
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
58
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MỞ WEBSITE CỦA BẠN & THIẾT KẾ TRANG WEBPAGE VÕ HIẾU NGHĨALỜI GIỚI THIỆUThật không thể tƣởng tƣợng nổi là bạn có thể mở một trang Web với địa chỉWebsite của riêng bạn mà không phải tốn phí chi cả. Rồi sau đó, thông qua cáchƣớng dẫn trong sách này, bạn sẽ tạo một trang WebPage, với đầy đủ hình ảnh,tiêu đề, văn bản và các siêu liên kết. Y nhƣ là một chuyên viên tạo trang WEB vậy.Quyển sách này sẽ :§ Giúp bạn có một địa chỉ email, là điều kiện cần có để mở một trang Web. Và bạnsẽ tạo một địa chỉ điện thƣ mới trong nhóm GOOGLE. Thí dụ là : vohieunghia40@gmail.com§ Giúp bạn mở một địa chỉ Web của bạn, thí dụ là :http://vohieunghia.synthasite.com/ hay http://www.vohieunghia.com/§ Giúp bạn tạo một trang WEBPAGE theo nhiều mức độ khác nhau :* SYNTHASITE, hay YOLA : Mở một Website miễn phí với các hƣớng dẫn tạotrang WEBPAGE trong Synthasite.* SMALL PLANET : hƣớng dẫn cơ bản để tạo trang WEBPAGE.* HOW TO CREATE A WEBPAGE : hƣớng dẫn chuyên sâu để tạo trangWEBPAGE bằng ngôn ngữ HTML..§ Giúp bạn tạo một tiêu đề (Banner) thật đẹp, viết văn bản cho các trang giớithiệu, quảng cáo..., ghép các hình ảnh của bạn hoặc những ngƣời mà bạn yêu thích,và tạo các siêu liên kết từ/đến các văn bản, hình ảnh hay điện thƣ email.Rồi từ khi có trang WebPage của bạn, bạn sẽ làm gì? Trƣớc tiên, bạn phải xác địnhmục tiêu tạo trang Web của bạn. Bạn muốn gì?* Nếu chỉ để giải trí cho vui, bạn có thể sẽ gài nhiều hình ảnh của bạn và gia đình,bạn bè thân thuộc vào, cùng với các ý tƣởng độc đáo của bạn, hay một vài chuyệnngắn, hoặc tạo một tạp chí của bạn cho cả thế giới cùng xem.§ Nếu muốn làm kinh tế, hãy tạo một chợ mua bán đồ cổ, đồ vật quí hiếm haythƣờng dùng, ngay cả các sách báo cũ của bạn, đồng hồ đeo tay, mắt kính, máyLaptop....§ Bạn nhớ chọn một tên trang sao cho ai cũng có thể nghĩ đến và vào trang củabạn. Nếu trang của bạn trở thành đông khách, bạn có thể mời gọi quảng cáo, giớithiệu... 1
  • 2. § Để phổ biến trải rộng khắp thế giới thì bạn nên dùng tiếng Anh làm ngôn ngữchính.Tóm lại với trang Web trong tay, bạn đã là một NHÂN VẬT của thế giới.Hãy chúc cho NHÂN VẬT của chúng ta THỊNH VƢỢNG & NHƢ Ý. Tác giả VÕ HIẾU NGHĨA%%%%%%%%%%%%%%%%%%%%%%%%%%%%TẠO MỘT ĐỊA CHỈ EMAILĐể xin mở một trang Web, bạn phải đã có sẵn một địa chỉ email.Bạn có thể tạo thêm, nếu đã có, một địa chỉ email của GOOGLE nhƣ sau :1/ Vào trang http://mail.google.com/mail/help/intl/vi/about.html2/ Trong trang GMail xuất hiện, bấm mục [Tạo Tài khoản].3/ Bạn sẽ điền vào các chi tiết của cá nhân bạn vào các mục đã đƣợc GMail đƣa ra.4/ Trong mục [Tên đăng nhập mong muốn], bạn nên chọn một tên có thêm số đểdễ dàng đƣợc chấp nhận hơn. Thí dụ : vohieunghia40.GMail sẽ cấp cho bạn địa chỉ email là :vohieunghia40@gmail.com.%%%%%%%%%%%%%%%%%%%%%%%XIN MỘT ĐỊA CHỈ WEBSITE MIỂN PHÍBạn có thể xin một WebSite miển phí.Sau đây là một vài địa chỉ sẵn sàng cung cấp WebSite miển phí cho cá nhân bạnhay cho các bạn học sinh, sinh viên :· GeoCities· Angelfire Communications· Xoom.com· Yahoo’s listing of Free Web Pages providers.Phần sau đây sẽ trình bày trang WEB SITE đƣợc cung cấp miển phí bởi SYNTHASITE hay YOLA và cách tạo trang WEBPAGE cũng của SYNTHASITE/YOLA.Đây là cách xin một WEBSITE và tạo một WEBPAGE hay nhất và ngắn gọn nhất.I.- TRANG CUNG CẤP WEBSITE MIỂN PHÍVào địa chỉ http://www.freewebsites.com/Kích chọn mục [Synthasite- Build a free Website]. Xuất hiện trang Synthasite. 2
  • 3. II.- Trang SYNTHASITE hay YOLAĐiền vào các chi tiết về tài khoản email mà bạn đã có.Kích nút [Start Building].Chuẩn bị sẵn các ảnh của bạn và một ảnh đặc biệt có cỡ 900x150 pixels (chỉnh từACDSee 9).III.- ĐIỀN tên và CHỌN KIỂUSynthasite chuyển qua màn hình để bạn điền tên và chọn kiểu là Website (kích lênkhung Website).Xong, Synthasite sẽ chuyển qua màn hình gồm 12 kiểu thiết kế để bạn chọn lấymột.Vì có nhiều kiểu STYLE cần thêm màu để hỗ trợ, nên bạn có thể kích chọn [SelectColors] + chọn bảng màu theo ý + [OK].Ngay sau khi bấm OK, chƣơng trình hiển thị ngay trang Web đầu tiên của bạn. Chú ý : Hình xem trƣớc ở trang sau, sau khi bạn xác định dòng tiêu đề vàgán ảnh vào (Kích [Browse] + xác định đƣờng dẫn và các ảnh đã chuẩn bị sẵn).Trang Web nhƣ trên có địa chỉ là :http://vohieunghia.synthasite.com/ hay đổi lại là http://www.vohieunghia.com/Bạn sẽ từ từ điền thêm văn bản, ảnh và các thiết kế khác theo ý, sẽ đƣợc trình bàyở phần sau.IV.- NHẬP VĂN BẢNMàn hình thiết kế trang Web gồm có bên trái là màn hình chính, bên phải là cáccông cụ thiết kế cho trang Web.Thông thƣờng bạn chỉ cần kích rê mục thiết kế vào trang màn hình + thiết lập cácchi tiết cho thiết kế.- Thanh công cụ văn bản xuất hiện (giống nhƣ thanh công cụ của bất cứ trình xử lýtừ nào, TD: Word).- Kích rê công cụ [Text] vào màn hình chính, nơi mà bạn sẽ gõ văn bản vào.- Hãy nhập văn bản vào cùng với các thuộc tính đƣợc gán vào từ thanh công cụ.- Thí dụ, kích phần tiêu đề và gõ vào VOHIEUNGHIA (nhƣ hình bên).Chú ý : Văn bản ở đây thuộc dạng thông thƣờng, không cần theo dạng WebHTML.- Đặc biệt khi bạn tạo một đoạn văn bản kiểu HTML, với các thẻ kiểu nhƣ<HTML> ngay trong màn hình Synthasite, trình này vẫn hiểu đƣợc, và hiển thị nólên trang.- Để huỷ bỏ một tác động, kích [Undo/Redo]-biểu tƣợng mũi tên màu lục ở góctrên trái màn hình.- Để lƣu giữ tài liệu vừa nhập vào, kích nút [Save].V.- THÊM MỘT TRANG THỨ HAI 3
  • 4. Sau khi bạn tạo xong trang thứ nhất, bạn có thể tạo thêm trang thứ hai theo haicách nhƣ sau.1/ Từ trang chủ- Kích mục [New Page], hộp thoại [New Page] xuất hiện.- Điền vào tên của trang thứ hai này (Name) và tên tiêu đề (Heading).2/ Từ mục [Site Manager], chọn [Create a New Page].Điền tên và tiêu đề, theo hình trên. Sau đó bạn sẽ nhận đƣợc trang thứ hai. Bạn cóthể sắp xếp nó nhƣ một trang chính (thứ hai) độc lập hay là một phụ trang(SubPage) phụ thuộc vào một trang chính (thứ nhất, nhì, ba...).* Trang chính, trang phụ- Để xác nhận đó là trang chính, trang này sẽ xuất hiện trong trình đơn (menu)chính của trang Web, hãy đánh dấu kiểm vào mục [Include in the menu].- Để xác nhận đó là trang phụ, trang này sẽ không xuất hiện trong trình đơn (menu)chính của trang Web, hãy kích bỏ dấu kiểm trong mục [Include in the menu].Sauđó bạn sẽ dùng cách nối liên kết (Link) từ trang chính đến các trang phụ này.- Sau khi đã sắp xếp trang chính/phụ xong, bạn muốn sửa đổi chúng, hãy kích chọnmục [Edit Menu] + kích rê các tên trang phụ hay chính muốn thay đổi, rồi rê nóvào khung [In the Menu] cho các trang chính, và vào [Out the Menu] cho các trangphụ.VI.- NHẬP ẢNH Từ khung các công cụ- Kích rê công cụ [Image] vào màn hình chính, nơi mà bạn sẽ gắn ảnh vào.- Màn hình [File Manager] xuất hiện để bạn nạp lên (Upload) các ảnh có từ máy vitính của bạn.Nhắc : Bạn nên chuẩn bị sẵn các ảnh từ phần mềm ACDSee 9. Xén và tạo các ảnhJPG dƣới 10 MB (trung bình các ảnh chỉ là 2-4 MB). Nhớ tạo đƣợc một ảnh có cỡ900x150 pixels để trƣơng biểu ngữ của màn hình (hình trang Web). Việc chỉnh cáchình trong trang khó khăn và lâu hơn nhiều, so với các trình chuyên xử lý ảnh.- Kích nút [Browse] + xác định đuờng dẫn của ảnh và tên tập tin ảnh. Lặp lại nhiềulần cho nhiều ảnh. Chú ý : File Manager, quản lý tất cả tập tin trên trang Web của bạn, khôngchỉ là tập tin ảnh (.JPG), mà có thể còn là tập tin âm (.WAV, .MP3...), tập tin video(.MPG). Do vậy, nếu bạn đã dự trù sẵn trƣớc khi thiết kế trang, bạn có thểUPLOAD tất cả xuống trang File Manager này,- Ảnh đƣợc gán trên trang sẽ giống nhƣ ảnh trên các trình chỉnh ảnh. Chúng cũngcó 8 nút vuông chỉnh hình, để bạn chỉnh sữa.- Nhớ kích nút [Save] để lƣu giữ.- Ngoài cách nhập ảnh từ công cụ [Image], bạn còn có thể nhập ảnh từ công cụ[Text] : Kích rê công cụ [Text] vào màn hình chính, nơi mà bạn sẽ gắn một haynhiều ảnh vào + Đặt trỏ vào hộp văn bản + kích mục [Insert Image] trên dãy công 4
  • 5. cụ soạn thảo văn bản (Text Editing Toolbar) + chỉ định một ảnh trong màn hìnhFile Manager + OK.Ảnh hiện ra sẽ gồm chứa 8 nút chỉnh hình ở 8 góc cạnh của ảnh + kích rê các nútnày để chỉnh lại kích cỡ ảnh.Bạn có thể tạo liên kết cho ảnh này bằng cách : Kích chọn ảnh + kích biểu tƣợngliên kết (Link icon) trên Text Editing Toolbar + xác định đích liên kết.VII.- XUẤT BẢN TRANG WEBPAGE CỦA BẠNViệc XUẤT BẢN TRANG WEBPAGE hay đƣa ra nơi công cộng trang Web củabạn, gồm các bƣớc :1/ Chọn một trong 3 tuỳ chọn :- Một phụ vùng (hay miền) trên Synthasite.com- Một tên vùng bạn đã có sẵn- Nạp địa chỉ của bạn xuống (download) máy bạn, và tự làm chủ lấy trang này.Nên chọn mục thứ nhất để có một Website và một trang Web trên Internet của bạn.Sau khi bạn chọn tên cho trang Web của bạn,- Nếu bạn thấy một dấu kiểm màu lục, tên của bạn đã đƣợc hiệu dụng,- Nếu bạn nhận đƣợc thông báo “UNAVAILABLE”, bạn phải chọn tên khác, mãicho đến khi đƣợc xác nhận hiệu dụng mới thôi.- Nếu bạn nhận đƣợc dấu “INVALID” màu đỏ, một ký tự bạn nhập vào khôngđúng. Thƣờng đó là dấu tiếng Việt (Chƣơng trình này khi thiết kế không dùngtiếng Việt, tuy nhiên nó sẽ chấp nhận khi bạn cài đặt một tập tin văn bản tiếngViệt).2/ Chọn thẻ TAG để mô tả trang WebBạn tha hồ chọn các thẻ TAG theo ý, thƣờng có là Website, Web design...Các thẻ này nên đƣợc ghi cách một khoảng trống cho một từ đơn, nên đặt cácdấunháy kép cho các từ kép hay câu dài.3/ Xem trang web đã xuất bản của bạnMàn hình “CONGRATULATIONS! xuất hiện để chào mừng bạn. Kích [Close] đểđóng lại.4/ Chỉnh sửa các thiết kếNếu bạn cần cập nhật trang Web, đơn giản chỉ cần thực hiện các sửa đổi + kích[REPUBLISH]. Nếu muốn xoá trang Web, kích [UNPUBLISH].VIII.- CHỈNH SỬA TRANG WEBSau khi bạn đã hoàn thành trang Web, bạn không thể chỉnh sửa trang này khi gọi từđịa chỉ Website của bạn. Nếu bạn và mọi ngƣời vào trang Web đều có thể sửa đổi,thì trang Web bạn còn lại gì nữa đâu? Do vậy, muốn chỉnh sửa, bạn phải vào trangWeb chính của chƣơng trình tạo trang Web. 5
  • 6. Trong quyển sách này, thì đó là trình Synthasite. Bạn vào trang chính củaSynthasite theo địa chỉ :http://www.synthasite.com/reviewsTrang xuất hiện, bạn không nên vào mục đăng ký mới (Sign Up), mà bạn nên điềnvào địa chỉ email và Password + kích nút [Login].Sau đó bạn sẽ vào đƣợc trang Web của bạn đã tạo ra trong Synthasite, kích [Open]để mở trang và sửa đổi hay cập nhật các chi tiết mới..IX.- XIN PHỔ BIẾN TRÊN TRANG TÌM CỦA GOOGLESau khi bạn đã xuất bản trang Web, bạn bây giờ hẵn muốn phổ biến cho tất cả mọingƣời cùng có thể tìm thấy tên bạn trên INTERNET. Và GOOGLE đáp ứng đúngtheo yêu cầu của bạn.Do vậy, bạn phải làm thủ tục để đăng ký vào trang tìm (Search hay Find) củaGoogle.Từ trang Web đang đƣợc chỉnh sửa của bạn, Kích nút [Update My Site] + kíchchọn [Publish My Site] từ thực đơn thả.Hộp thoại [Publish My Site] xuất hiện, kích nút [Promoting your Website].Xuất hiện trang Google Webmaster Central, trong vùng [Get Started], kích lên[Sign in to Webmaster Tools]. Xuất hiện mục điền vào địa chỉ email trong Googlecùng với Password].Cửa sổ [Dashboard] xuất hiện, kích trong mục [Click here to add a site] + gõ vàođịa chỉ trang Web của bạn (thí dụ http://vohieunghia.synthasite.com/) + kích [AddSite].Sau đó, bạn kích chọn thêm [Sitemap] để hoàn tất việc xin có mặt vào trang tìmcủa GOOGLE.Thế là từ đây, khi một ngƣời nào đó gõ tìm tên vohieunghia trong GOOGLE, trìnhsẽ hiển thị tên trang Web của bạn + kích lên đó sẽ hiện lên trang Web của bạn.X.-TẠO CÁC LIÊN KẾT (LINK)Liên kết (link) còn đƣợc gọi là siêu liên kết (Superlink) là mối nối từ nguồn liênkết đến đích liên kết.* Tạo liên kết khi nguồn là một văn bản1. Kích rê công cụ văn bản [Text] vào trang và tại nơi muốn tạo văn bản.2. Gõ nhập văn bản và chỉ định khối văn bản này (đảo màu).3. Kích nút [Insert Link] từ thanh công cụ soạn thảo văn bản.4. Từ hộp thoại soạn thảo liên kết [Link Editor], duyệt tìm đích liên kết . Đó có thểlà 6
  • 7. Một trang Web khác (URL- External),Một tập tin (File), văn bản hay ảnh,Một địa chỉ email...* Tạo liên kết khi nguồn là một ảnh1. Kích rê công cụ ảnh [Image] vào trang và tại nơi muốn ghi ảnh2. Nạp lên (Upload) và kích chỉ định để gán ảnh vào trang.3. Khi công cụ ảnh vẫn còn đƣợc chỉ định, kích nút [Properties] ở cực phải mànhình + kích nút [Choose a Link].4. Từ hộp thoại soạn thảo liên kết [Link Editor], duyệt tìm đích liên kết . Đó có thểlàMột trang Web khác (URL- External),Một tập tin (File), văn bản hay ảnh,Một địa chỉ email...XI.- NẠP ẢNH PHOTO và VIDEOFLICKR : Nơi mà bạn có thể lƣu các ảnh và video trực tuyếnWIDGET : Các bộ phận, chi tiết, cũng là các công cụ cho phép các nội dung chứatrong nó đƣợc ghi thêm vào trang Web của bạn mà không cần phải dùng đến cácmã (Java, tag...).WIDGET BOX : là các hộp công cụ có tính chất Widget (không dùng mã) có thểđƣợc đặt vào trang Web.GADGET hay đầy đủ là GOOGLE Gadget : đó là một kiểu Widget dùng trongGOOGLE.* Flickr Lightbox : khi chọn, bạn sẽ nhận đƣợc các ảnh nhỏ kiểu Thumbnail.* Smugmug Gallery : cung cấp cho bạn các SLIDE ảnh sông núi rất đẹp.* VIDEO : Khi chọn bạn sẽ nhận đƣợc 3 lựa chọn : Youtube Video, MetaCafé, vàGoogle Video. Đó là các đoạn Video ngắn và rất hay dễ bắt mắt các khách đếntrang Web của bạn (hình trang trƣớc là nhóm Video của MetaCafé).* WIDGET : Gồm đủ kiểu học, chơi, giải trí, các ngành nghề... Hình bên là tròchơi Mario rất vui dành cho trẻ em. Sẽ có rất nhiều mục thích thú trong [WidgetBox].XII.- QUẢN LÝ TRANG WEB BẰNG SITE MANAGERKích chọn thẻ [Site Manager], màn hình này xuất hiện cùng với 3 tác động :Rename Site : kích vào, trình sẽ xin phép bạn dùng Script, bạn có thể cho phépSynthasite dùng tạm thời hay thƣờng xuyên. Sau đó trong hàng của mỗi site, khibạn chọn [Rename], bạn sẽ nhận đƣợc một hộp thoại nhỏ để bạn đổi tên trang Webtƣơng ứng.Edit Menu : bạn đã xem ở phần trƣớc, công dụng để gán cho một trang Web làchính (có tên trên menu chính) hay phụ (SubPage, không có tên trong menu chính). 7
  • 8. Delete Site : để xoá trang Web của bạn.Create a new Page : để tạo một trang Web mới, đã nói trƣớc đây.Update My Site : chọn để thực hiện một trong 4 nhiệm vụ sau :Publish : Xuất bảnUpdate : Cập nhật các thay đổi vừa thực hiện.Change the domain name : thay đổi tên miền.Unpublish : xoá trang Web. Phần 2 : THIẾT KẾ TRANG WEB cơ bản (Chương trình SMALL PLANET)Để thiết kế trang Web của bạn cho thật đẹp và hoàn chỉnh, có lẽ bạn cần thực hành,lặp đi lặp lại nhiều lần.Tuy nhiên, một khi đã trở thành quen thuộc và thuần thục, có lẽ bạn sẽ đam mê và“ghiền” đấy.Trƣớc tiên, bạn phải xác định mục tiêu tạo trang Web của bạn. Bạn muốn gì?Bạn có thể sẽ gài nhiều hình ảnh của bạn và gia đình, bạn bè thân thuộc vào, cùngvới các ý tƣởng độc đáo của bạn, hay một vài chuyện ngắn, hay tạo một tạp chí choriêng bạn và các bạn có cùng ý thích, nhƣ là nhóm yêu xe hơi, nhóm yêu môtô,nhóm yêu nhạc cổ điển, nhóm yêu nhạc Jazz...Bạn có thể lồng vào vài ảnh xe Roll-Royce, máy bay Airbus, xe tăng, súng coltđẹp...Hay một chợ mua bán đồ cổ, đồ vật quí hiếm, ngay cả các sách báo cũ của bạn,đồng hồ đeo tay, mắt kính, máy Laptop....Bạn chọn một tên trang sao cho ai cũng có thể nghỉ đến và vào trang của bạn. Nếutrang của bạn trở thành đông khách, bạn có thể mời gọi quảng cáo, giới thiệu...Nếu bạn chỉ muốn giới hạn việc giao lƣu trong nƣớc thì dùng tiếng Việt làm ngônngữ chính, nhƣng nếu muốn phổ biến trãi rộng ra khắp thế giới thì nên dùng tiếngAnh làm ngôn ngữ chính.Sau đây là hƣớng dẫn tạo trang Web theo 7 bƣớc của chƣơng trình SMALLPLANET, trên trang http://www.smplanet.com/webpage/webpage.htmlBƣớc 1 : Tạo một tài liệu văn bảnBƣớc 2 : Học các thẻ Tag HTML cơ bản.Bƣớc 3 : Xem một trang Web mẫu.Bƣớc 4 : Nhập các ảnh điện tử.Bƣớc 5 : Chèn các thẻ Tag HTML.Bƣớc 6 : Xem lại và chỉnh sửa trang Web của bạn.Bƣớc 7 : Ra thế giới.Bước 1 : Tạo một tài liệu văn bản 8
  • 9. Trƣớc tiên, bạn cần tạo ra một văn bản muốn đƣợc xuất hiện trên trang Web. Đa sốcác chƣơng trình xử lý từ sẽ chạy tốt trên Web nếu bạn lƣu chúng dƣới dạng .htmlhay .htm. Bạn cần nhấn mạnh tiêu đề của bài viết.Nên thƣờng xuống dòng hay cách ly các đoạn bằng đƣờng gạch ngang.Nên chèn thêm các hình ảnh cho bài viết trở nên sống động hơn.Chú ý không nên dùng các dấu ngoặc kép vì chúng có thể biến dạng thành nhữnghình thù không đẹp mắt.Bước 2 : Dùng thẻ định dạng (Tag)Bạn dùng các thẻ định dạng để bảo các trình duyệt (nhƣ Netscape, America Online,hoặc Internet Explorer) tuân theo sự sắp xếp của bạn thông qua chúng. Các thẻ nàytạo ra một ngôn ngữ gọi là Ngôn ngữ đánh dấu siêu văn bản (HyperText MarkupLanguage), hay HTML. Bộ khung cơ bản cho một tài liệu HTML gồm có :<html><head><title>Tiêu đề của Trang</title></head><body>Văn bản trong Trang...</body></html>Chú ý : Các tên Tag nằm giữa 2 dấu ngoặc vuông, và chúng thƣờng đi từng cặp đểbao khối đƣợc định dạng. Tag cuối có thêm dấu /.Dƣới đây là một số Tags định dạng cơ bản trng HTML.<h1>...</h1> : Gán cho phần đầu trang, mức độ 1, kích cỡ chữ lớn nhất. Các mứcđộ thấp hơn là <h2>...</h2>, <h3>...</h3>......<b>...</b> : Gán chữ đậm (bold).<i>...</i> : Gán chữ nghiêng (italic)<center>...</center> : Văn bản đƣợc đặt nằm giữa (centered text)<p> : Ngắt đoạn văn bản (chèn thêm một hàng trống giữa haiđoạn).Chú ý : Cách bấm phím <Enter/Return> để phân đoạn xuống dòng, không đƣợccác trình duyệt hiểu. Bạn phải dùng Tag <p> này để xuống dòng.<br> :Ngắt dòng (không thêm hàng trống)<hr> : Tạo đƣờng gạch ngang trang, nhằm tách rời các phân đoạn<ol>...</ol> : danh sách có sắp thứ tự hoặc đánh số. Mỗi mục trong danhsách bắt đầu bằng Tag <li> và nằm đâ đó giữa hai Tag<ol>...</ol>. 9
  • 10. <ul>...</ul> : danh sách không sắp thứ tự hoặc đánh dấu. Mỗi mụctrong danh sách bắt đầu bằng Tag <li>.<a href=”filename.html”>...</a> Một liên kết nóng đến một tập tin khác trong cùng danh mục.<a href=”http://URL”>...</a> Một liên kết nóng đến một địa chỉ Web khác. Bạn phải biết vị trínguồn đồng nhất (Uniform Resource Locator - URL), hoặcđịa chỉ Web, để chỉ định nơi liên kết đến.<img src=”image.gif”> Tag này sẽ chèn một ảnh có tên tập tin là “image.gif” trên cạnh tráinhất của trang.Chú ý : Dù các Tags có vẻ rƣờm rà, nhƣng bạn sẽ cần đến chúng ở các bƣớc sau.Bước 3 : Mẫu thử dùng các TagĐể có đƣợc các định dạng cho mẫu thử nhƣ sau :Bạn có thể sẽ gài nhiều- Hình ảnh của bạn và gia đình,- Hình ảnh bạn bè thân thuộc vào, cùng với các ý tƣởng độc đáoHay một vài1 chuyện ngắn, hay2 tạo một tạp chíCâu lệnh của bạn sẽ nhƣ sau :Bạn có thể sẽ gài nhiều <p><ul><<li>Hình ảnh của <b>bạn</b> và <i>giađình</i>, <li> Hình ảnh bạn bè thân thuộc vào, cùng với các </ul><p><center>ýtƣởng độc đáo</center><p>Hay một vài <p><ol><li>chuyện ngắn, hay <li>tạomột tạp chí </ol><p>.Bước 4 : Chèn ảnhBạn nên dùng các ảnh của chính bạn hoặc các ảnh đƣợc cho phép khác.1. Đặt trỏ chuột trên ảnh đang đƣợc hiển thị.2. Đè giữ nút chuột (thƣờng là nút phải) đến khi xuất hiện trình đơn thả. Vẫn đègiữ và chuyển điểm trỏ chuột đến lệnh [Save this image as...].3. Chỉ trong một vài phần mềm có lệnh này, khi đó bạn thả trỏ chuột đến vị trímong muốn với các dạng .GIF hay .JPG, là các dạng đƣợc Web chấp nhận.4. Kích [Save].Bước 5 : Chèn các thẻ định dạng (formatting tags) vào tài liệu.Một tài liệu dùng ngôn ngữ HTML luôn phải bắt đầu bằng thẻ <html> và kết thúccũng bằng <html>. Các tiêu đề đƣợc đánh vào giữa các thẻ <title>...</title> và sẽ 10
  • 11. nằm trên đỉnh của trang Web. Các tiêu đề có thể giống hay không giống với tênđầu trang.Bước 6 : Nạp các tập tin văn bản vào trang tạm thời* Các tập tin phải là văn bản thuần tuý (text only) và đƣợc lƣu giữ với các đuôi là.HTML hay .HTM.* Vào trình duyệt Web, dƣới trình đơn FILE, chọn [Open File...] hay [OpenLocal...]. + chỉ định tên tập tin của bạn và kích [Open].Tài liệu của bạn sẽ xuất hiện trong cửa sổ và trông giống nhƣ là trong một trangWeb thật sự.* Nếu có một vài lỗi nào đó, hãy trở lại trình soạn thảo văn bản và chỉnh lại chúng.Xong lƣu giữ văn bản + trở về trình duyệt và kích [RELOAD].Bước 7 : Chuyển trang tạm thời lên Internet* Bạn có thể xin mở trang Web trên một địa chỉ Web miễn phí nhƣ Geocities,Angelfire Communications, Xoom.com, danh sách các nhà cung cấp trang Webmiễn phí của Yahoo, đặc biệt là SYNTHASITE mà chúng ta đã thực hiện ở phần I.* Để phổ biến trang Web của bạn, có 3 cách sau :1. Tìm liên kết với một WebSite quen biết đã có sẵn, hay một Website có cùng chủđề2. Đăng ký trang Web của bạn với một guồng máy truy tìm trên Internet, nhƣ AltaVista, Lycos, WebCrawler, Yahoo, hoặc nhƣ chúng ta đã thực hiện với GOOGLEở phần I.Thí dụ nhƣ trong Yahoo!, hãy chuyển đến mục có cùng kiểu nhóm với trang Webcủa bạn (Games, Technology, Education, Computer Sciences...). Kích [Add URL].Bạn có thể sẽ đƣợc hỏi đến tiêu đề, địa chỉ URL của trang cùng vài bình luận haygiới thiệu về trang này của bạn. Hãy cố đƣa ra những tên và tiêu đề rất hấp dẫnđến mọi ngƣời.3. Gửi địa chỉ URL của bạn đến Small Planet Communications. ở địa chỉhttp://smplanet.com/webpage/Trình này sẽ xem xét đề nghị và chấp thuận cho bạn mở một trang Web của bạn.* Bạn có thể vào các trang Web dƣới đây để học hỏi thêm trong việc tạo trang Web:· Case Western’s excellent Introduction to HTML· Web Weavers Page· Beginner’s Guide to HTML· Xoom.com Media Sharehouse· The Banner Generator· Yahoo’s Icons page 11
  • 12. · Netscape’s Web Building page Phần 3 : Tạo một trang web dạng htmlI.- Bắt đầuCó hai cách cơ bản để tạo một trang web. Đầu tiên là cách tạo ra các trang ngoạituyến và sau đó tải chúng lên nhà cung cấp dịch vụ Internet (Internet ServiceProvider ISP) thông qua FTP. Thứ hai là cách tạo ra trang web của bạn trực tuyếnbằng sử dụng một chƣơng trình Telnet với tài khoản UNIX của bạn, nếu có.Nếu bạn đang tạo trang web của bạn ngoại tuyến, hãy thực hiện trong bất kỳ bộ xửlý từ nào, WORD là khá nhất. Nhƣng nhớ lƣu tài liệu của bạn, nhƣ là một “vănbản-Text”, “thuần văn bản - plain text” hoặc “chỉ là văn bản - Text Only”. Nếukhông nó sẽ không đƣợc hiểu đúng bởi trình duyệt web. Sau khi đã tạo ra trang,bạn nên liên hệ với ISP của bạn về việc làm thế nào để tải lên máy chủ này.Nếu có một tài khoản UNIX, bạn có thể tạo trang web của bạn trực tuyến. Trƣớctiên bạn cần phải có một chƣơng trình có thể truy cập tài khoản UNIX của bạn.Tôi khuyên bạn nên Telnet cho Mac hoặc Ewan đối với Windows 95/98.Sau khi bạn đã có thể truy cập tài khoản của mình, bạn cần phải thực hiện một thƣmục mới đƣợc gọi là “public_html”. Bạn có thể làm đƣợc điều này bằng cách gõ:mkdir public_htmlSau này, hãy thay đổi thƣ mục của bạn thành thƣ mục mới đƣợc gọi là“public_html”.cd public_htmlNếu muốn, bạn có thể tạo nhiều thƣ mục khác, một cho tất cả các trang web màbạn thực hiện, và một cho tất cả các đồ họa mà bạn có. Thực hiện giống nhƣ cácbƣớc trƣớc.Tiếp theo, bạn cần phải đặt tên tập tin cho trang web của bạn (đây không phải làtiêu đề, nhƣng đó là những gì sẽ đƣợc ghi trong URL). Tập tin cho một trang webchính, đƣợc gọi là “chỉ mục-Index”. Sau khi bạn đã chọn xong hãy thêm “. Html”vào phần tên mở rộng của nó. Thí dụ :pico index.html hayvohieunghia index.html* Để không ai có thể xoá trang của bạn, hãy gõ : chmod 744 index.htmlThực hiện trong lần đầu tiên bạn rời khỏi trang Web và khi tên tập tin hãy nằm trêntrang. Thực hiện tƣơng tự cho các trang khác.* Về địa chỉ trang : Thông thƣờng bạn cóhttp://www.domain.com/~username/index.html 12
  • 13. Với domain là tên miền của máy chủ, username là tên ngƣời dùng, tức là bạn,và index.html là tên của trang chính index của bạn.Nếu bạn muốn đặt danh mục chính là PAGES bao gồm tất cả các trang của bạn.URL mới sẽ là : http://www.domain.com/ ~ username / Pages/ index.html* Tiêu đề (Title)Điều đầu tiên để thấy trên trang web của bạn, là một tiêu đề. Nó đƣợc hiển thịtrong phần trên cùng cửa sổ. Để có tiêu đề “VO HIEU NGHIA”, bạn nên gõ:<title>VO HIEU NGHIA</title>Trong HTML, mỗi lệnh đƣợc bao quanh bởi < và >. Và trong hầu hết các lệnh,bạn cần phải cho trình duyệt web biết đến khi kết thúc lệnh này. Bạn làm điều nàybằng cách đặt lại một slash (/) ở phía trƣớc cửa kết thúc lệnh, nhƣ ở trên.Các tag HTML không phân biệt chữ hoa/thƣờng, nên <title> cũng giống nhƣ<Title>, và <TITLE>. Tiếp theo, bạn cần phải quyết định những gì bạn muốn đặttrên trang web của bạn: Văn bản, các liên kết, đồ họa, và các trƣờng văn bản...II.- Văn bản (Text)1/ Headings Phần đầu trangHTML has six levels of headings, numbered 1 through 6, with 1 being the largest.HTML có sáu cấp độ của các Phần đầu trang, đánh số từ 1 đến 6, với 1 là lớn nhấtvà thƣờng là chữ đậm (bolder). Nếu bạn muốn gõ “Hello”, đây là những gì bạnnên gõ cho mỗi tiêu đề, và những gì kết quả là: <h1>Hello</h1>Hello <h2>Hello</h2>Hello <h3>Hello</h3>Hello...2/ Đoạn văn bản (Paragraph)Sau mỗi đoạn văn bản, thƣờng chúng ta nên xuống dòng. Dấu xuống dòng là <p>.Thí dụ, khi bạn gõ :<P> Đây là một trang web. Làm thế nào để bạn thích những gì tôi đã thực hiện?Xin vui lòng e-mail cho tôi với bất cứ đề nghị nào tại khách sạn a@a.com </ P>Kết quả là:Đây là một trang web. Làm thế nào để bạn thích những gì tôi đã thực hiện? Xinvui lòng e-mail cho tôi với bất cứ đề nghị nào tại khách sạn a@a.com3/ Danh sách (List)Có hai loại danh sách mà bạn có thể thực hiện trong HTML: đánh dấu, và đánh số. 13
  • 14. Để thực hiện một danh sách có đánh dấu đầu dòng : màu đỏ, màu da cam, màuxanh lá cây, xanh, tím, đen, và nâu, hãy gõ :<UL><LI> red<LI> orange<LI> green<LI> blue<LI> purple<LI> black<LI> brown</UL>Kết quả là:· red· orange· green· blue· purple· black· brownĐể thực hiện một số danh sách có đánh số các màu đỏ, màu da cam, màu xanh lácây, xanh, tím, đen, và nâu, loại:<OL><LI> red<LI> orange<LI> green<LI> blue<LI> purple<LI> black <LI> brown</OL>Các kết quả là :1. red2. orange3. green4. blue5. purple6. black7. brown4/ Xuống dòng bắt buộc 14
  • 15. Thẻ Tag để bắt buộc xuống dòng là <BR>.Đặc biệt là thẻ này không cần thẻ kết thúc (với dấu / trƣớc thẻ).Thí dụ khi bạn gõ nhập :Hello,<BR>how<BR>are<BR>you?Kết quả là:Hello,howareyou?5/ Đường gạch ngang (Horizontal Rules)Để làm nổi bật các phân đoạn, bạn có thể tạo ra các đƣờng gạch ngang. Thẻ là<HR> không cần thẻ kết thúc, lệnh SIZE để chỉ kích cỡ đƣờng gạch, lệnh WIDTHđể chỉ bề rộng đƣiờng gạch. 100% là trọn đƣờng gạch ngang. Lệnh NOSHADE đểtạo đƣờng không bóng và đen tuyền.6/ Định dạng Ký tự (Character Formatting)Bạn có thể định dạng ký tự, gán các thuộc tính đậm (bold), nghiêng (italic), gạchdƣới (underline), strikeout (gạch ngang chữ), superscript (chữ chếch lên), subscript(chữ chếch xuống), teletype (theo kiểu chữ đánh máy), và blinking (chữ nhấpnháy), nhƣ sau :<b>, </b> for bold (in đậm)<i>, </i> for italic (in nghiêng)<u>, </u> for underlined (cho gạch dƣới)<strike>, </strike> nhƣ strikeout<sup>, </sup> nhƣ for superscript<sub>, </sub> nhƣ for subscript<tt>, </tt> nhƣ teletype<blink>, </blink> cho nhấp nháy văn bảnBạn có pha trộn các thuộc tính với nhau nhƣ thí dụ này.III.- Liên kết (Linking)1/ Liên kết đến một địa chỉ Web hay URLKhi bạn tạo một liên kết, bạn sẽ chỉ định bằng cách tô màu lên văn bản hoặc thậmchí lên một đồ họa (nói về sau). Khi một ngƣời nào đó nhấp chuột vào văn bảnnày, nó sẽ đƣa họ đến một trang web khác, hoặc có thể là một phần của một trangweb. Thí dụ muốn tạo một liên kết từ trang web của bạn, vào Yahoo!. URL củaYahoo! là: http://www.yahoo.com 15
  • 16. Để làm đƣợc điều này, bạn nên gõ:<A HREF=”http://www.yahoo.com”> What ever text that you want to be coloredgoes here</A>Kết quả sẽ là:What ever text that you want to be colored goes here2/ Liên kết đến các phân đoạn đặc biệtĐôi khi, bạn muốn tạo một liên kết đến một trang web, hoặc một phần của mộttrang khác. Để làm đƣợc điều này, bạn cần phải làm hai việc.- Việc đầu tiên, là tạo nguồn liên kết- Việc thứ hai, là xác định đích liên kết (là nơi liênkết sẽõ dẫn đến). Chú ý: Bạn có thể không thực hiện liên kết với các phần cụ thể trong một tàiliệu khác nhau, trừ khi một trong hai bạn đã viết để cho phép các mã nguồn của tàiliệu đó hay tài liệu đó đã có chứa các tài liệu có tên trong liên kết.1) Để tạo liên kết kiểu này, hãy nghĩ đến tên gán cho một chỗ (spot) nào đó, haymột tên trang nào đó. Bạn nên gõ:<A HREF=”#spot”>Colored TextNếu không, bạn sẽ thêm “# spot” vào cuối URL.2) Bây giờ, bạn cần phải xác định nơi liên kết sẽ đƣa bạn đến (đích). Chuyển đếnchỗ mà bạn muốn các liên kết đi đến, và gõ :<A NAME = “spot”>3/ Liên kết điện thƣ (Mailto Links)Khá nhiều ngƣời muốn có một liên kết trên trang web của họ là việc tự động gửi e-mail đến một địa chỉ. Nếu bạn muốn làm điều này, và tên của bạn là NGHIA và địachỉ e-mail là vhnghia2000@yahoo.com, hãy gõ :<A HREF=”mailto:vhnghia2000 @yahoo.com”> NGHIA</a>Đây là kết quả của kiểu gõ này: NGHIA(Xem thêm mục Liên kết ở phần I)IV.- Đồ họa (Graphics)1/ Đưa các hình ảnh lên một trangHầu hết các trang web trên net, đều có chứa một số đồ họa. Bạn nên có ít nhất mộthình ảnh trên trang web của bạn.Có hai cách chủ yếu để có đồ họa trên trang web của bạn.- Sử dụng đồ hoạ trên một trang web nào đó (không nên).- Tải lên các đồ họa của chính bạn. a/ Để hiển thị đồ họa trên trang của một ngƣời nào khác, bạn cần phải tìmURL của ngƣời đó. Để làm đƣợc điều này, tôi khuyên bạn nên có NetscapeNavigator. Nhấp chuột hoặc bấm và giữ xuống trên đồ họa, cho đến khi một trìnhđơn hiện lên. Chọn “View this image- Xem hình ảnh này”. Sau đó, sao chép URL 16
  • 17. đó ở trên cùng của màn hình, trong khung “Location- vị trí”. Giả sử rằng URL là:http://www.infhost.com/members/web/Images/pic.gif, bạn nên gõ:<IMG SRC=”http://www.infhost.com/members/web/Images/pic.gif”>Kết quả là: b/ Để hiển thị đồ hoạ đó là trong tài khoản của bạn, tất cả những gì bạn phảilàm là gõ nhập tên tập tin. Nếu bạn đã không tách rời các thƣ mục đồ họa và cáctrang, bạn chỉ cần đến các gõ tên đồ họa. Thí dụ : <IMG SRC=”pic.gif”>2/ Hoạt hình đồ họa (Animated Graphics)Từ năm 1989, định dạng GIF có thể bao gồm nhiều ảnh (multi-image) có thể thấusuốtvà cắt lát. Nhờ đó bạn có thể thấy đƣợc các đồ hoạ dƣới dạng hoạt hình (ảnhchuyển động).Để có đƣợc hình ảnh động trên trang web, bạn cần phải tải về một chƣơng trình đãđƣợc thực hiện cho phù hợp với một tập tin GIF kiểu mới. Tôi khuyên bạn nêndùng GifBuilder for the Mac. Đây là một trong những ví dụ của một hoạt ảnh nhỏ:3/ Tô màu cho Bối cảnh, văn bản, và các liên kếtTrên hầu hết các trang web, bạn muốn có từng màu sắc cụ thể cho nền, văn bản,liên kết chƣa đƣợc thăm viếng (unvisited), liên kết truy cập, và các liên kết động.Để làm đƣợc điều này, bạn cần phải tìm mã số cụ thể cho các màu sắc mà bạn cần.Đây là một lƣợng lớn các danh sách các mã số, và đây là cách bạn sẽ hiển thị nàytrong trang của bạn.Chú thích: Gõ ONLY ngay phía dƣới tiêu đề của bạn.Chú ý: Bạn phải có các dấu “#” đứng trƣớc mã hiện hành.· <body bgcolor=”#code”> cho màu nền· <body text=”#code”> cho màu sắc của văn bản (khôngliên kết)· <body link=”#code”> cho màu sắc của liên kết chƣa đƣợcthăm viếng· <body vlink=”#code”> cho màu sắc của liên kết đã đƣợctruy cập· <body alink=”#code”> cho màu sắc đang liên kết (đang đƣợcchọn)Bạn cũng có thể nối chuỗi của hai hoặc nhiều lệnh lại với nhau:<body bgcolor=”#000015" text=”#000020" link=”#000050" vlink=”#7a7777"alink=”#8f8e8d”>4/ Đồ họa phần nền (Background Graphics ) 17
  • 18. Thay vì có một màu sắc rắn làm một nền tảng, bạn có thể muốn có một đồ họarằng Xác định các lặp sau hơn và hơn để tạo ra một nền tảng. Sau đây là một số nơimà bạn có thể đến để tìm thấy nền đồ họa. Các văn bản mà bạn nên gõ trong chomột nền tảng gọi là “bk.gif” sẽ là:<body background=”bk.gif”> <body background=”bk.gif”>5/ Liên kết với đồ họa (Linking with graphics)Đôi khi trên trang web, bạn muốn có đồ hoạ là một liên kết. Điều này đơn giảnthôi, bạn chỉ cần trộn hai lệnh : liên kết và hiển thị đồ họa. Đây là một ví dụ củamột đồ họa dẫn đến Yahoo:Bạn cũng có thể có một liên kết văn bản bên cạnh đồ họa để dẫn đến nóYahoo!Đây là các dòng lệnh :- Đầu tiên là lệnh liên kết đồ hoạ đơn thuần :<A href=”http://www.yahoo.com”><IMGSRC=”http://www.infhost.com/members/web/Images/yahoo.gif”></A>- Thứ hai, liên kết đồ họa với văn bản: <A Href=”http://www.yahoo.com”> <imgSRC=”http://www.infhost.com/members/web/Images/yahoo.gif”>Yahoo! </ A>6/ Các bản đồ hình ảnh (Image Maps)Trƣớc khi bạn tạo ra một bản đồ hình ảnh, bạn cần phải chắc chắn rằng máy chủcủa bạn sẽ hỗ trợ nó. Sau đó, bạn có thể làm theo các bƣớc sau.- Trƣớc tiên, bạn cần phải tạo ra một hình ảnh. Vẽ một bức tranh với các phânđoạn có thể dẫn đến một số nơi.- Thứ hai, bạn cần phải tạo ra một tập tin bản đồ hình ảnh. Có một số chƣơng trìnhcó thể làm điều này giúp bạn. Đó là WebMap dành cho Mac, và Yahoo’s ImageMap Directory cho những hệ máy khác.VI.- BIỂU MẪU ĐỂ ĐIỀN VÀO (Fill-out Forms)1/ Bắt đầuBiểu mẫu để điền vào là hình thức giúp ngƣời đọc gửi trả lại thông tin về một sốchi tiết (lý lịch, ý kiến) cho một trang web.Ví dụ, bạn cần thu thập tên và địa chỉ email của một số ngƣời để bạn có thể gửiemail một số thông tin (trả lời) cho những ngƣời đã hỏi.Tiến trình của dữ liệu chuyển đến đƣợc nắm giữ bởi một SCRIPT hay một chƣơngtrình viết trong PERL, hoặc bởi một ngôn ngữ có thể điều hành văn bản, tập tin vàthông tin.Bạn có thể tự lập trình, nhƣng thƣờng thì các máy chủ hệ thống đều có SCRIPT đểgiúp bạn, hãy hỏi lấy tên script này. 18
  • 19. Chú ý : Trong các câu lệnh sau, chúng ta sẽ dùng tên “fb.pl” để đại diện cho Script(không thật) này. Đến khi bạn hỏi đƣợc tên thật của nó từ máy chủ, hãy thay thếnó.2/ Phương pháp và hành động của biểu mẫuDòng lệnh đầu tiên nhằm giới thiệu Phƣơng pháp và hành động của biểu mẫu. Đâylà nơi bạn nhập các Perl script. Hầu hết các máy chủ Internet và các nhà cung cấpđều có script này và họ sẽ cung cấp cho bạn.Địa chỉ tổng quát sẽ đƣợc sử dụng là:http://www.domain.com/cgi-bin/fb.pl.Nếu bạn muốn câu trả lời đƣợc gửi đến địa chỉ email của bạn, thí dụ là “a@a.com”,bạn nên gõ hai dòng này:<FORM METHOD=”POST” ACTION=”http://www.domain.com/cgi-bin/fb.pl”><INPUT TYPE=”input” NAME=”recipient” value=”a@a.com”>TO:<P>Đây là những gì nó sẽ hiện ra : Chú ý : Các chữ nghiêng có tính đại diện và bạn phải thay vào.Tiếp theo, bạn cần phải quyết định những câu hỏi nào mà bạn muốn hỏi, và nhữnggì bạn sẽ sử dụng để yêu cầu họ. Đó là các câu hỏi về địa chỉ email, tên, họ... ứngvới các hình thức nhƣ hộp văn bản, hộp kiểm tra, nút radio, hộp danh sách thả vàhộp danh sách cuộn...3/ Các hộp văn bản - Trường đơn và đa (Single, multiple fields)Trƣờng (field) hiểu đơn giản, đó là một vùng đại diện. Thí dụ trƣờng “tên” thì đó làvùng bạn phải điền vào tên.Dƣới đây là 4 câu lệnh để khách điền vào: Email address, First Name, Last Namevà Subject (chủ đề).<INPUT TYPE=”input” NAME=”from”>Your Email Address<P><INPUT TYPE=”input” NAME=”firstname”>Your First Name<P><INPUT TYPE=”input” NAME=”lastname”>Your Last Name<P><INPUT TYPE=”input” NAME=”subject”>Subject<P>Đây là những kết quả :Your Email AddressYour First NameYour Last NameSubject4/ Khung văn bản lớn - Các trường lớn hơnBạn nên có một khung - lĩnh vực lớn hơn ở cuối lƣu bút để lấy nhiều ý kiến hơncho bạn. Trƣớc tiên bạn cần phải quyết định khung có bao nhiêu cột và hàng . Thídụ bạn muốn có 7 hàng, và 45 cột. Đây là những gì bạn nên gõ:Please place any questions or comments here: 19
  • 20. <TEXTAREA Rows=7 Cols=45 NAME=”suggestions”></TEXTAREA><P>Kết quả :Please place any questions or comments here:5/ Hộp kiểm tra (Checkboxes)Đối với những câu hỏi chỉ cần trả lời : có hay không, đồng ý hay không, thích haykhông? Bạn nên dùng các hộp kiểm tra.Đánh dấu kiểm ở những hộp này để trả lời là có, đúng, thích...hay ngƣợc lại. Bạncó thể đánh dấu kiểm trên nhiều hộp khác nhau.Dƣới đây là các câu hỏi bạn có thích : xem TV (Watch TV), chơi trên Internet(Play on the Internet), đọc một quyển sách (Read a book), chơi thể thao (PlaySports), và học tập (Study), bạn nên gõ:What are some things that you like to do?<INPUT TYPE=”checkbox” NAME=”like” VALUE=”TV”>Watch TV<P><INPUT TYPE=”checkbox” NAME=”like” VALUE=”internet”>Play on theInternet<P><INPUT TYPE=”checkbox” NAME=”like” VALUE=”read”>Read a book<P><INPUT TYPE=”checkbox” NAME=”like” VALUE=”sports”>Play sports<P><INPUT TYPE=”checkbox” NAME=”like” VALUE=”study”>Study<P>Kết quả:What are some things that you like to do?Watch TVPlay on the InternetRead a bookPlay sportsStudy6/ Các nút radio (Radio Buttons)Đối với nhiều chọn lựa nhƣng chỉ đƣợc chọn một, bạn dùng các nút tròn Radio.Thí dụ bạn muốn hỏi : Bạn muốn dùng trình duyệt Web nào ngay bây giờ? Và bạnchỉ đƣợc quyền chọn một câu trong các lựa chọn sau : Netscape Navigator 4.x,Netscape Navigator 3.x, Netscape Communicator, Mosaic, và Microsoft Explorer,bạn nên gõ:What WWW browser are you using right now?<INPUT TYPE=”radio” NAME=”browser” VALUE=”Navigator 4.x”>NetscapeNavigator 4.x<P><INPUT TYPE=”radio” NAME=”browser” VALUE=”Navigator 3.x”>NetscapeNavigator 3.x<P><INPUT TYPE=”radio” NAME=”browser” VALUE=”Communicator”>NetscapeCommunicator<P><INPUT TYPE=”radio” NAME=”browser” VALUE=”Mosaic”>Mosaic<P> 20
  • 21. <INPUT TYPE=”radio” NAME=”browser” VALUE=”Internetex”>InternetExplorer<P>Kết quả:What WWW browser are you using right now?Netscape Navigator 4.xNetscape Navigator 3.xNetscape CommunicatorMosaicInternet Explorer7/ Hộp Danh sách kéo xuống (Pull-Down Lists)Cũng giống nhƣ nút tròn Radio chọn một, nhƣng các nút tròn tốn không gian tranggiấy khá nhiều. Trong danh sách kéo xuống này, bao nhiêu lựa chọn đều đƣa vàomột hộp chỉ có một hàng duy nhất. Để chọn, bạn kích nút mũi tên xuống, và sẽthấy cả một danh sách các lựa chọn + kích chọn lấy một.Thí dụ bạn muốn hỏi “Thế nào là màu sắc ƣa thích của bạn?”,Và bạn muốn trong danh sách sẽ đƣợc các màu đỏ, màu vàng, màu da cam, màuxanh lá cây, xanh, tím, đen, và nâu, đen với một lựa chọn duy nhất, bạn nên gõ:What is your favorite color?<SELECT NAME=”color”><OPTION>Red<OPTION>Yellow<OPTION>Orange<OPTION>Green<OPTION>Blue<OPTION>Purple<OPTION SELECTED>Black<OPTION>Brown</SELECT><P>8/ Hộp Danh sách cuộn (Scroll-Down Lists)Danh sách cuộn là một danh sách để chọn một hay nhiều mục khác nhau trong đó.Có 2 loại danh sách cuộn :* Loại (1) có nút cuộn1. Bạn chỉ có thể chọn một mục mà thôi.2. Bạn có thể chọn để chỉ hiển thị một số dòng (thí dụ 3/5 dòng).* Loại (2) không có nút cuộn1. Hiển thị tất cả các mục của danh sách.2. Bạn có thể chọn nhiều mục trong danh sách này. Kích chọn lấy một mục + đègiữ + bấm <Ctrl> hay <Shift> + kích chọn mục thứ hai. 21
  • 22. Thí dụ cho Loại (1) : Hệ thống các trò chơi đƣợc yêu thích của bạn là gì? Bốn câutrả lời là : Nintendo 64, Sony Playstation, Sega Dreamcast, và arcade games. Bạnchỉ cho hiển thị 3 trên 4 câu, khách chỉ đƣợc quyền chọn một. Các dòng lệnh nhƣsau :What is your favorite video game system?<SELECT NAME=”video game” SIZE=3><OPTION VALUE=”nintendo64">Nintendo 64<OPTION VALUE=”playstation”>Sony Playstation<OPTION VALUE=”dreamcast”>Sega Dreamcast<OPTION VALUE=”arcade”>Arcade Games</SELECT><P> </ SELECT> <P>Kết quả là:What is your favorite video game system?Thí dụ cho Loại (2) : Cùng các câu hỏi nhƣ trong thí dụ 1, nhƣng danh sách hiện rađầy đũ 4 câu hỏi và bạn có quyền chọn đƣợc nhiều mục. Các dòng lệnh nhƣ sau :What is your favorite video game system? (Hold shift to select more than one)<SELECT NAME=”video game” MULTIPLE SIZE=4><OPTION VALUE=”nintendo64">Nintendo 64<OPTION VALUE=”playstation”>Sony Playstation<OPTION VALUE=”dreamcast”>Sega Dreamcast<OPTION VALUE=”arcade”>Arcade Games</SELECT><P> </ SELECT> <P>Kết quả là:What is your favorite video game system? (Hold shift to select more than one)9/ Nút [RESET] - Thiết lập lại biểu mẫu (Reset Form)Trong hầu hết các biểu mẫu, để hồi phục lại nguyên trạng cũ, khi ngƣời khách nàođó gõ nhập sai, họ có thể kích nút [RESET] ở phía cuối biểu mẫu để làm lại.Để có một nút thiết lập lại, chỉ cần gõ:To reset the all of the forms, press this button:<INPUT TYPE=”reset”VALUE=”Reset”>Kết quả là:To reset the all of the forms, press this button:10/ Nút [SUBMIT]- Đệ trình mục nhập (Submit Entry)Khi bạn đã hoàn thành tất cả mọi thứ, bạn cần phải thực hiện một nút [Submit) đểmọi ngƣời có thể gửi đi các mục nhập. Để làm đƣợc điều này, hãy gõ :To submit your choices, press this button:<INPUT TYPE=”submit”VALUE=”Submit”> 22
  • 23. Kết quả là:To submit your choices, press this button:Chú thích: Ở phần cuối cùng của biểu mẫu, bạn cần phải gõ</FORM> Nếu không, biểu mẫu của bạn sẽ không hoạt động đƣợc!!VI.- Khung (Frames)Khung là gì?Khung phân chia cơ bản cửa sổ của bạn thành nhiều phân đoạn. Bạn có thể hiểnthị chúng trên hai hoặc nhiều trang web cùng một lúc. Bạn không nhất thiết phảicó toàn bộ các trang mà mỗi trang chỉ chứa một khung. Bạn có thể cần đặt nhiềuđồ họa, văn bản trong các khung khác nhau.Nếu bạn thực sự quan tâm trong việc đặt khung trên trang web của bạn, bạn nênvào trang “Sharky’s Netscape Frames Tutoial.VII.- JavaJava là gì?Java là một lập trình môi trƣờng mạnh mẽ, định hƣớng đối tƣợng, nền tảng đa-chuỗi, năng động-chung mục đích. Đó là trình tốt nhất để tạo các ứng dụng con(applets) và các ứng dụng cho mạng Internet, intranets và bất kỳ mạng lƣới phânbố phức tạp nào.Lập trình bằng JavaBạn có thể xem quyển sách thứ 28 của cùng tác giả nói về JAVA : “CÁCCHƢƠNG TRÌNH MẪU JAVA 1.X & VISUAL J++ 6.0”, hoặc quyển 27 : “CÁCCHƢƠNG TRÌNH MẪU VISUAL BASIC 6.0 - TỰ HỌC LẬP TRÌNH VIÊNQUỐC TẾ” của cùng tác giả VÕ HIẾU NGHĨA. PHẦN ĐẶC BIỆT VỀ BIỂU MẪU SYNTHASITE & FORM ASSEMBLYBiểu mẫu hiểu đơn giản nhƣ là một mẫu đơn, tức là gồm phần mẫu chung khôngđổi cho tất cả mọi ngƣời, và phần điền vào chi tiết cho từng cá nhân một.Nếu ngoài đời thƣờng, chúng ta từng gặp rất nhiều kiểu mẫu đơn: Mẫu đơn xinviệc, mẫu đơn xin tạm trú tạm vắng, các loại mẫu đơn xin các giấy tờ, thủ tục hànhchánh v.v...thì trên Internet bạn cũng đã từng gặp nhiều kiểu mẫu đơn nhƣ mẫuđơn xin đăng ký sử dụng các phần mềm, tham gia vào các câu lạc bộ .... Biểu mẫuhay mẫu đơn là một tiện ích không thể thiếu, do vậy khi thiết kế trang Web củabạn, tất nhiên là phải có phần dành cho biểu mẫu hay FORM. 23
  • 24. Trong phần 3, bạn đã xem qua các thiết kế về biểu mẫu nhƣ : các hộp văn bản(trƣờng đơn, trƣờng đa), khung lớn chứa văn bản, hộp kiểm tra, các nút radio, hộpdanh sách kéo xuống, hộp danh sách cuộn. Tuy nhiên để thực hiện chúng phải cónhà quản lý các biểu mẫu. Bạn đã nhớ là mọi biểu mẫu phải bắt đầu bằng lệnh :<FORM METHOD=”POST” ACTION=”http://www.domain.com/cgi-bin/fb.pl”>Trong đó “domain” là miền của nhà quản lý và “fb.pl” là Perl Script, tập tin HTMLcủa nhà cung cấp hay của ngƣời lập trình. Hai vấn đề bạn chƣa giải quyết đƣợc.Do vậy, chúng ta sẽ nhờ tiếp chƣơng trình Synthasite và nhà quản lý các biểu mẫuFORM ASSEMBLY, theo các bƣớc sau :Bước 1/ Trong màn hình chỉnh sửa Synthasite (xem lại mục VIII- Chỉnh sửa trangWeb), Kích công cụ [FORM] + kích chọn [Form Assembly] + kích rê vào mànhình chính.Bước 2/ Màn hình này xuất hiện :Kích mục [Sign up for free] để đăng ký vào chƣơng trình này.Sau đó điền các chi tiết về Tên, địa chỉ email, số điện thoại và password của bạnvào. Chƣơng trình sẽ kiểm tra và nếu chấp thuận sẽ hiển thị màn hình các kiểu dựán tạo và xử lý các biểu mẫu, bạn chọn [Free Plan] để đƣợc miễn phí. Chƣơng trìnhtiếp theo sẽ kết thúc bƣớc đăng ký bằng hiển thị câu : “ The address ishttp://app.formassembly.com.Bước 3/ Chƣơng trình sẽ hiển thị nhiều kiểu biểu mẫu để chọn, hoặc bạn có thểdùng kích-rê để sắp đặt các trƣờng (hộp văn bản...).Đây là một vài quà để giúp bạn bắt đầu(Xem 2 khung tạo biểu mẫu ở trang sau)1/ Có 2 khối chính để tạo biểu mẫu là đặt câu hỏi (Ask a question) và thêm mộtphân đoạn (Add a Section). Bạn có thể thêm chúng bằng cách dùng các nút trênthanh công cụ.2/ Một khi đã đƣợc thêm vào biểu mẫu, các câu hỏi và phân đoạn đƣợc trông thấytrong khung biểu mẫu ngoại tuyến.Kích lên một mục ngoại tuyến sẽ mở khung các thuộc tính [Properties] của yếu tốđó. Tại đây, bạn có thể chọn vị trí, kích cỡ, kiểu trƣờng để gán vào biểu mẫu.3/ Bạn có thể xem trƣớc biểu mẫu vừa tạo ra. Đánh dấu kiểm trên mục [Auto] ởđỉnh-cực phải trên thanh công cụ để tự động làm tƣơi màn hình xem trƣớc.4/ Khi biểu mẫu bạn đã xong, kích nút [SAVE] để lƣu giữ biểu mẫu và thoát giaiđoạn tạo biểu mẫu [Form Builder].5/ Bây giờ hãy kích lên nút [Ask a question] để bổ sung cho câu hỏi thứ nhất trênbiểu mẫu Web của bạn.Trong các hình sau, bạn đã tạo 2 phân đoạn (Section) là Contact Information vàAddress. Trong phân đoạn Contact Information, bạn đã lập 3 mục : Full Name, 24
  • 25. Email, và Phone. Trong phân đoạn Address, bạn đã lập 3 mục : Street Address,Address continued, và một dòng chứa 3 chi tiết City, Zip, State.Bước 4/ Kích nút [Save] để lƣu giữ biểu mẫu. Chƣơng trình sẽ hiển thị 3 mục đểbạn chọn.Hãy nhìn vào mục giữa có ghi các mã đã thiết lập cho biểu mẫu này, kích chỉ địnhtoàn khối này + bấm <Ctrl+C> để chép chúng.Bước 5/ Chép dán xuống trang Form Assembly ở bƣớc 2/ + OK.Chƣơng trình sẽ nạp mã vào trang Web của Synthasite và hiển thị biểu mẫu vừatạo xong.Bước 6/ Trở về trình [Form Assembly] + chọn thẻ [My Responses] để xem các câutrả lời nhận đƣợc từ biểu mẫu.GHI CHU :1/ Bạn thấy các lệnh trong phân đoạn đầu của biểu mẫu :<!— FORM: HEAD SECTION —> 25
  • 26. 2/ Lệnh đầu tiên cho biết biểu mẫu có liên kết với nhà quản lý biểu mẫu[formassembly] <link href=”http://app.formassembly.com/wForms/3.0/css/abstract-blue/wforms.css” rel=”stylesheet” type=”text/css”>3/ Phân đoạn thân biểu mẫu<!— FORM: BODY SECTION —>4/ Giới thiệu phƣơng pháp tạo biểu mẫu.<form method=”post” action=”http://app.formassembly.com/responses/processor”id=”id2521507" class=”labelsAbove hintsSide”>Bạn so sánh với trƣờng hợp tổng quát là : <FORM METHOD=”POST”ACTION=”http://www.domain.com/cgi-bin/fb.pl”> .5/ Kết thúc phân đoạn biểu mẫuLệnh </Form>. ***************Chú ý :CÁC CÂU TRẢ LỜI TRÊN BIỂU MẪU CỦA BẠN ĐỌCKhi các bạn đọc, đọc trang Web của bạn và trả lời trên biểu mẫu của bạn, nội dungcủa chúng sẽ đƣợc lƣu lại trên phần [MY RESPONSES] của trình FORMASSEMBLY, là trình chủ quản các biểu mẫu của bạn (vì bạn đã tạo đƣợc biểu mẫutừ đó).Để xem các kết quả này, bạn trở về trang FORM ASSEMBLY, chọn thẻ [MyResponses], bạn sẽ thấy tên các ngƣời đã đọc biểu mẫu và điền các câu trả lời gửiđến bạn.Kích lên dòng Date Received tƣơng ứng với tên ngƣời gửi, bạn sẽ nhận đƣợc biểumẫu đầy đủ mà bạn đọc đã điền vào.Kích chúc quí bạn thành công mỹ mãn. VÕ HIẾU NGHĨA *************************** 26