Embed Size (px)
DESCRIPTION
Tạo website của bạn & Thiết kế webPAGEVÕ HIẾU NGHĨA
Citation preview
1
MỞ WEBSITE CỦA BẠN & THIẾT KẾ TRANG WEBPAGE
VÕ HIẾU NGHĨA
LỜI GIỚI THIỆU
Thậ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ác
hƣớ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ạn
sẽ tạo một địa chỉ điện thƣ mới trong nhóm GOOGLE. Thí dụ là :
§ 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ạo
trang 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 trang
WEBPAGE 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ới
thiệ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 định
mụ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ện
ngắ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 hay
thƣờ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áy
Laptop....
§ Bạn nhớ 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ế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ới
thiệu...
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.html
2/ 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à :
%%%%%%%%%%%%%%%%%%%%%%%
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ạn
hay 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 SYNTHA
SITE 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.
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ỂU
Synthasite chuyển qua màn hình để bạn điền tên và chọn kiểu là Website (kích lên
khung Website).
Xong, Synthasite sẽ chuyển qua màn hình gồm 12 kiểu thiết kế để bạn chọn lấy
mộ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 [Select
Colors] + 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ẢN
Mà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ác
cô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ác
chi 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 Web
HTML.
- Đặ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óc
trê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
4
Sau khi bạn tạo xong trang thứ nhất, bạn có thể tạo thêm trang thứ hai theo hai
cá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ọn
mụ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 trang
phụ.
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 vi
tí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 ảnh
JPG 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ác
hì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ều
lầ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ông
chỉ 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ũng
có 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 hay
nhiề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
5
cụ soạn thảo văn bản (Text Editing Toolbar) + chỉ định một ảnh trong màn hình
File 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út
nà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ƣợng
liê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ẠN
Việc XUẤT BẢN TRANG WEBPAGE hay đƣa ra nơi công cộng trang Web của
bạ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ãi
cho đế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ùng
tiế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ếng
Việt).
2/ Chọn thẻ TAG để mô tả trang Web
Bạ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ác
dấ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ạn
Mà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 WEB
Sau 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 trang
Web chính của chƣơng trình tạo trang Web.
6
Trong quyển sách này, thì đó là trình Synthasite. Bạn vào trang chính của
Synthasite theo địa chỉ :
http://www.synthasite.com/reviews
Trang 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ền
và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 GOOGLE
Sau 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ọi
ngƣời cùng có thể tìm thấy tên bạn trên INTERNET. Và GOOGLE đáp ứng đúng
theo 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ủa
Google.
Từ trang Web đang đƣợc chỉnh sửa của bạn, Kích nút [Update My Site] + kích
chọ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 Google
cù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 [Add
Site].
Sau đó, bạn kích chọn thêm [Sitemap] để hoàn tất việc xin có mặt vào trang tìm
của GOOGLE.
Thế là từ đây, khi một ngƣời nào đó gõ tìm tên vohieunghia trong GOOGLE, trình
sẽ 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ên
kết đến đích liên kết.
* Tạo liên kết khi nguồn là một văn bản
1. 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à
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 ảnh
1. Kích rê công cụ ảnh [Image] vào trang và tại nơi muốn ghi ảnh
2. 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àn
hì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à VIDEO
FLICKR : Nơi mà bạn có thể lƣu các ảnh và video trực tuyến
WIDGET : 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ứa
trong nó đƣợc ghi thêm vào trang Web của bạn mà không cần phải dùng đến các
mã (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 trong
GOOGLE.
* 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 đến
trang 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 [Widget
Box].
XII.- QUẢN LÝ TRANG WEB BẰNG SITE MANAGER
Kí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ép
Synthasite dùng tạm thời hay thƣờng xuyên. Sau đó trong hàng của mỗi site, khi
bạn chọn [Rename], bạn sẽ nhận đƣợc một hộp thoại nhỏ để bạn đổi tên trang Web
tƣơ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).
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ản
Update : 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ùng
vớ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í cho
riê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ế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ớ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ôn
ngữ 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ếng
Anh 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 SMALL
PLANET, trên trang http://www.smplanet.com/webpage/webpage.html
Bƣớc 1 : Tạo một tài liệu văn bản
Bƣớ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
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 .html
hay .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ững
hì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ày
tạo ra một ngôn ngữ gọi là Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup
Language), 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 đƣợc
cá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 danh
sách bắt đầu bằng Tag <li> và nằm đâ đó giữa hai Tag
<ol>...</ol>.
10
<ul>...</ul> : danh sách không sắp thứ tự hoặc đánh dấu. Mỗi mục
trong 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ái
nhấ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 đáo
Hay một vài
1 chuyện ngắn, hay
2 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ạo
một tạp chí </ol><p>.
Bước 4 : Chèn ảnh
Bạ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úc
cũng bằng <html>. Các tiêu đề đƣợc đánh vào giữa các thẻ <title>...</title> và sẽ
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 [Open
Local...]. + 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 trang
Web 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 Web
miễ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ƣ Alta
Vista, 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 Web
củ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 hay
giớ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
12
· Netscape’s Web Building page
Phần 3 :
Tạo một trang web dạng html
I.- Bắt đầu
Có 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ại
tuyến và sau đó tải chúng lên nhà cung cấp dịch vụ Internet (Internet Service
Provider ISP) thông qua FTP. Thứ hai là cách tạo ra trang web của bạn trực tuyến
bằ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ăn
bản-Text”, “thuần văn bản - plain text” hoặc “chỉ là văn bản - Text Only”. Nếu
khô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ƣớc
tiê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_html
Sau 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_html
Nế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ác
bƣớ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 web
chí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 hay
vohieunghia index.html
* Để không ai có thể xoá trang của bạn, hãy gõ : chmod 744 index.html
Thự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ên
trang. 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
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ày
bằ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 đặt
trê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 trang
HTML 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ất
và thƣờng là chữ đậm (bolder). Nếu bạn muốn gõ “Hello”, đây là những gì bạn
nê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 [email protected] </ 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? Xin
vui lòng e-mail cho tôi với bất cứ đề nghị nào tại khách sạn [email protected]
3/ 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ố.
14
Để thực hiện một danh sách có đánh dấu đầu dòng : màu đỏ, màu da cam, màu
xanh 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. red
2. orange
3. green
4. blue
5. purple
6. black
7. brown
4/ Xuống dòng bắt buộc
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,
how
are
you?
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ạch
dƣớ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ấp
nhá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ản
Bạ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 URL
Khi 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ậm
chí 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ản
nà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 trang
web. Thí dụ muốn tạo một liên kết từ trang web của bạn, vào Yahoo!. URL của
Yahoo! là: http://www.yahoo.com
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 colored
goes here</A>
Kết quả sẽ là:
What ever text that you want to be colored goes here
2/ 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ột
trang 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ài
liệ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ài
liệ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 đó, hay
một tên trang nào đó. Bạn nên gõ:
<A HREF=”#spot”>Colored Text
Nế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 đến
chỗ 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à địa
chỉ e-mail là [email protected], 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 trang
Hầ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ột
hì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ìm
URL của ngƣời đó. Để làm đƣợc điều này, tôi khuyên bạn nên có Netscape
Navigator. 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
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ải
là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ác
trang, 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ấu
suốt
và cắt lát. Nhờ đó bạn có thể thấy đƣợc các đồ hoạ dƣới dạng hoạt hình (ảnh
chuyể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ên
dù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ết
Trê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ày
trong 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ông
liên kết)
· <body link=”#code”> cho màu sắc của liên kết chƣa đƣợc
thăm viếng
· <body vlink=”#code”> cho màu sắc của liên kết đã đƣợc
truy cập
· <body alink=”#code”> cho màu sắc đang liên kết (đang đƣợc
chọ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 )
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ọa
rằ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ơi
mà 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 cho
mộ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ản
thô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ủa
mộ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”><IMG
SRC=”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”> <img
SRC=”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ình
có thể làm điều này giúp bạn. Đó là WebMap dành cho Mac, và Yahoo’s Image
Map Directory cho những hệ máy khác.
VI.- BIỂU MẪU ĐỂ ĐIỀN VÀO (Fill-out Forms)
1/ Bắt đầu
Biể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ửi
email 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ƣơng
trì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.
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ẫu
Dò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. Đây
là 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à “[email protected]”,
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=”[email protected]”>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ững
gì 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ọ... ứng
vớ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 Name
và 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 Address
Your First Name
Your Last Name
Subject
4/ Khung văn bản lớn - Các trường lớn hơn
Bạ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ơn
cho 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:
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 hay
khô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ạn
có 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 (Play
Sports), 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 the
Internet<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 TV
Play on the Internet
Read a book
Play sports
Study
6/ 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ạn
chỉ đƣợ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”>Netscape
Navigator 4.x<P>
<INPUT TYPE=”radio” NAME=”browser” VALUE=”Navigator 3.x”>Netscape
Navigator 3.x<P>
<INPUT TYPE=”radio” NAME=”browser” VALUE=”Communicator”>Netscape
Communicator<P>
<INPUT TYPE=”radio” NAME=”browser” VALUE=”Mosaic”>Mosaic<P>
21
<INPUT TYPE=”radio” NAME=”browser” VALUE=”Internetex”>Internet
Explorer<P>
Kết quả:
What WWW browser are you using right now?
Netscape Navigator 4.x
Netscape Navigator 3.x
Netscape Communicator
Mosaic
Internet Explorer
7/ 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 trang
giấy khá nhiều. Trong danh sách kéo xuống này, bao nhiêu lựa chọn đều đƣa vào
mộ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àu
xanh 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ộn
1. 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ộn
1. 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.
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âu
trả lời là : Nintendo 64, Sony Playstation, Sega Dreamcast, và arcade games. Bạn
chỉ 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”>
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ển
thị 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ải
có 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ên
vào trang “Sharky’s Netscape Frames Tutoial.
VII.- Java Java 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ân
bố phức tạp nào.
Lập trình bằng Java
Bạn có thể xem quyển sách thứ 28 của cùng tác giả nói về JAVA : “CÁC
CHƢƠNG TRÌNH MẪU JAVA 1.X & VISUAL J++ 6.0”, hoặc quyển 27 : “CÁC
CHƢƠNG TRÌNH MẪU VISUAL BASIC 6.0 - TỰ HỌC LẬP TRÌNH VIÊN
QUỐ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 ASSEMBLY
Biể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 xin
việ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ành
chá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ẫu
hay mẫu đơn là một tiện ích không thể thiếu, do vậy khi thiết kế trang Web của
bạn, tất nhiên là phải có phần dành cho biểu mẫu hay FORM.
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ộp
danh 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 HTML
củ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ẫu
FORM 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 trang
Web), Kích công cụ [FORM] + kích chọn [Form Assembly] + kích rê vào màn
hì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ạn
và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ình
tiếp theo sẽ kết thúc bƣớc đăng ký bằng hiển thị câu : “ The address is
http://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ột
phâ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ên
thanh 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ấy
trong 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ên
biể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,
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ỉ định
toà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ừa
tạo xong.
Bước 6/ Trở về trình [Form Assembly] + chọn thẻ [My Responses] để xem các câu
trả 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 —>
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ẫu
Lệnh </Form>.
***************
Chú ý :
CÁC CÂU TRẢ LỜI TRÊN BIỂU MẪU CỦA BẠN ĐỌC
Khi 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 dung
của chúng sẽ đƣợc lƣu lại trên phần [MY RESPONSES] của trình FORM
ASSEMBLY, 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ẫu
từ đó).
Để xem các kết quả này, bạn trở về trang FORM ASSEMBLY, chọn thẻ [My
Responses], 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ểu
mẫ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
***************************
