Thiết Kế Websites - Không khó như tưởng tượng
Việc thiết kế web, đặc biệt là web cá nhân, không ghê gớm như những gì người ta thường nghĩ về nó, nào là ngôn ngữ lập trình HTML, Visual Basic hay C++, nào là các đoạn mã nguồn dài dằng dặc mà chỉ cần sai một dấu chấm là tất cả “đi tong”, nào là xử lý đồ họa cao cấp, … Thật ra, việc đó vô cùng đơn giản: thiết kế trang web = gõ văn bản + trang trí. Tuy nhiên, vì đơn giản như thế mà các trang web cá nhân hơn thua nhau về mặt thẩm mỹ, sáng tạo của người tạo ra chúng. Và việc này thì chẳng ai dạy cả, nó chỉ phụ thuộc vào khả năng cá nhân và các kinh nghiệm có được nhờ tìm tòi.

Mạng Internet là phương tiện chính. Nó cung cấp cho chúng ta nguồn “tài nguyên phong phú” gồm vô số các tiện ích, các phần mềm, hình ảnh, âm thanh, tư liệu, thủ thuật, … để xây dựng một trang web hoàn chỉnh và sau đó, nhờ Internet, website của bạn được mọi người biết tới. Vì thế, bạn càng chịu khó tìm kiếm, lục lọi, học hỏi bao nhiêu, trang web của bạn sẽ phong phú và mang đặc biệt bấy nhiêu. Tuy nhiên, để có được phong cách riêng, ngoài những kinh nghiệm thu thập được, bạn phải có được một sự sáng tạo nhất định để sản phẩm của mình không đi theo lối mòn hay “màu mè đa phong cách”.

Trong phạm vi bài viết này, tôi sẽ giới thiệu đến các bạn một số khái niệm, cách thức căn bản nhất để tự thiết kế một trang web riêng, các thủ thuật trong việc khai thác Internet và một số kinh nghiệm cần biết.

1. Trước tiên, bạn cần phải biết phân biệt website và web page (trang web). Các trang web là các tập tin (thường là các tập tin văn bản gồm hình ảnh, tư liệu, nhạc, …) có dạng *.HTML hay *.HTM. Website là một tập họp các trang web được liên kết với nhau. Ví dụ, website của bạn gồm 3 web pages: 1 trang chủ giới thiệu sơ lược về gia đình và công việc, 1 trang nói riêng về gia đình, 1 trang nói riêng về công việc. Người đọc khi ở trang chủ, muốn biết thông tin về gia đình bạn, click vào mục GIA ĐÌNH, mục này đã được tạo một liên kết dẫn đến trang web về thông tin gia đình bạn và trang web này sẽ được mở lên. Tương tự nếu muốn từ trang chủ --> trang công việc, từ công việc --> gia đình hay ngược lại.

2. Như đã nói ở trên, việc thiết kế web căn bản chỉ là gõ văn bản và trang trí. Đó là tính năng của Microsoft Word. Vì thế, bạn dùng Word để tạo website cũng được.

Thật vậy, rất đơn giản. Đầu tiên, bạn mở Word và chọn File/New. Trong thẻ General templates(phía bên phải) bạn chọn Web Page. Tới đây là công việc của bạn: gõ thông tin, chèn hình ảnh, chèn âm thanh, chọn màu nền, vẽ hình,…tất cả giống như khi bạn soạn thảo một văn bản. Xong việc, bạn chọn Save as type là: Web Page (hình)

Việc bạn cần biết thêm là việc tạo liên kết (hyperlinks). Ví dụ bạn đã hoàn thành 3 trang web: trang chủ có tên là trangchu.html, trang về gia đình bạn - giadinh.html, trang giới thiệu về công việc của bạn - congviec.html, tất cả chứa trong c:web. Trong trang trangchu.html, đến mục giới thiệu gia đình, bạn quét chuột bôi đen chữ “gia đình”, click phải chuột, chọn Hyperlinks, trong ô “Type File or Webpage name”, bạn gõ vào đường dẫn đến trang giadinh.html (trong trường hợp này là c:webgiadinh.html). Click OK. Khi đó, khi đưa chuột đến chữ gia đình, con trỏ chuột sẽ thay đổi và khi bạn click vào đó, trang web giadinh.html sẽ được mở ra. Tượng tự như thế vời các liên kết đến congviec.html và ngược lại.

Bạn còn có thể tạo một liên kết đến những trang web có sẵn trên mạng. Ví dụ, bạn muốn từ trang chủ của mình đến ngay trang Yahoo!Mail, hãy gõ vài từ, đại khái như “dzô Yahoo! xem có mail không?”. bôi đen chữ Yahoo!, click phải chuột, chọn Hyperlinks và gõ địa chỉ của trang Yahoo!Mail (mail.yahoo.com) vào khung “Type File or Webpage name” và click OK. Khi đó, khi người được đưa click chuột vào chữ Yahoo!Mail trong trang chủ của bạn, trang mail.yahoo.com sẽ được mở.

3. Microsoft Word chỉ là giải pháp cho những trang web căn bản. Microsoft Frontpage (MF, trong bộ Microsoft Office) mới là một phần mềm chuẩn, dành riêng cho việc thiết kế web. Những tính năng của MF là chuyên nghiệp, tiện dụng và đầy đủ hơn so với Word (dĩ nhiên rồi!).
MF cung cấp cho bạn nhiều kiểu mẫu trang web có sẵn như:

Format - >Themes những sơ đồ website của bạn giúp bạn kiểm soát dễ dàng các trang web và các liên kết.

Tạo có nút bấm đổi màu Insert/Component/Hover Button

Tạo dòng chữ chạy gang màn hình Insert/Component/Marquee

Tạo máy đếm số lượt người đến thăm trang web của bạn Insert/Component/Hit Counter

Tạo sổ thu thập ý kiến cho khách đến thăm bằng cách đặt những câu hỏi (đại loại như: “bạn chấm mấy điểm cho website của tui?”) hay những câu hỏi trắc nghiệm tự tạo,

Tạo những “không gian” để khách viết những ý kiến của họ,…Insert/Form

Tạo hiệu ứng đặc biệt cho các đối tượng Format/DHTML Efeects

Hay khi chuyển từ trang này sang trang khác Format/Page Transitions ... Ngoài ra, bạn còn có thể xem được trang web của mình sẽ hoạt động như thế nào bằng cách click vào thẻ Preview ở góc dưới bên phải của màn hình.
MF còn rất nhiều tính năng hấp dẫn khác chờ bạn khám phá đấy, đừng lo MF rất dễ sử dụng vì nó gần như là phần mềm căn bản nhất để tạo web. Vì không gian hạn hẹp tôi không thể chỉ dẫn làm 1 website được, bởi mỗi người mỗi vẻ. Bạn làm và tự học hỏi thêm, có gì lên diễn đàn này để hỏi các…. “chiên gia” nhá.

4. Ngoài những phần mềm quen thuộc trên, bạn còn có nhiều lựa chọn khác để tạo website cho mình. Trên mạng có rất nhiều phần mềm, tiện ích giúp bạn làm công việc này, chẳng hạn như Site Craft. SiteCraft là một phần mềm hoàn hảo, thú vị, giúp những người không biết một chút gì về ngôn ngữ HTML thiết kế được trang web riêng của họ một cách dễ dàng. Với phần mềm này, bạn tạo ra một trang web theo từng bước một mà chương trình sẽ “chỉ dẫn một cách tận tình”. Bạn click vào các nút Steps (bước) 1 đến 6 để hoàn chỉnh website của mình. Đó là các công việc từ đơn giản nhất như việc tạo ra cấu trúc của website, chọn tên và chủ đề của website, việc trang trí, chọn màu, đến việc điều chỉnh các hiệu ứng âm thanh và hình ảnh đến việc tải (upload) và quảng bá trang web của bạn trên Internet. Tất cả được được đơn giản hoá, bạn chỉ cần làm theo chỉ dẫn của chương trình. SiteCraft cung cấp rất nhiều công cụ để bạn trang trí giao diện website của mình như các wallpaper, các buttons, các ảnh động, âm thanh, ... Nếu bạn vẫn chưa hài lòng, phần mềm sẽ có đường dẫn đến trang (http://www.sitecraft.ws/ ) chủ để bạn download thêm những gì mình cần. Ngoài ra, SiteCraft còn đọc được rất nhiều file multimedia. Với sự hỗ trợ hoàn hảo về giao diện như thế, bạn chỉ cần tập trung cho phần nội dung của trang web. Giao diện SiteCraft thân thiện, hiện đại và bắt mắt. Nhưng điều làm cho chương trình này hấp dẫn là cách tạo ra một website cực kỳ dễ dàng vì nó đã hỗ trợ hầu hết các công đoạn quan trọng. Bản demo của SiteCraft có dung lượng khoảng 12MB, download tại: www.websitecraft.com/en/download.php .

6. Công việc thiết kế đã xong, bây giờ phải tìm cách đưa trang web của bạn lên mạng. Đầu tiên, bạn phải kiếm một địa chỉ. Hãy vào các trang web sau, đăng ký cho mình 1 tài khoản (giống như việc đăng ký mail trong Yahoo hay Hotmail). Qua e-mail. các trang web sẽ cung cấp cho bạn một địa chỉ trang web của bạn theo username mà bạn đã đăng ký, kèm theo đó là một mật mã để bạn quản lý tất cả mọi thứ đã tải lên địa chỉ đó.:

www.topcities.com cho phép bạn tải lên mạng tối 150 MB dữ liệu. Ngoài ra, còn những tính năng khác như tạo forums (diễn đàn), form mail (khách có thể gởi mail trực tiếp đến cho bạn một cách dễ dàng) hay guest book (sổ ý kiến của khách viếng thăm). Địa chỉ trang web của bạn sẽ là: www..topcities.com/tenban

www.brinskerter.com với nhà cung cấp này, bạn sẽ có được một trang web sạch, nghĩa là trên trang web của bạn sẽ không có bất kỳ mẫu quảng cáo nào cà. Địa chỉ web sẽ là: www.brinkster.com/.

www.counter.com sẽ cung cấp cho bạn một máy đếm số lượt người truy cập vào trang web của bạn.

7. Công việc cuối cùng là việc tài các trang web của bạn từ máy lên mạng. Bạn vào trang chủ (trang cung cấp cho bạn địa chỉ) và đăng nhâp (log in) vào tài khoản của mình. Vào mục Upload và bạn sẽ có thể chọn các file từ máy của mình tải lên trang web đơn giản như việc chọn file đính lèm khi gửi mail bằng Yahoo! hay Hotmail. Cuối cùng, bạn gõ vào khung địa chỉ tên trang web của mình và kiểm tra lại.

Tạo Album ảnh trong Website

Bạn đừng lo lắng vì sợ chuyện đó là quá sức mình, hãy yên tâm vì chuyện tạo album ảnh trong website của mình rất đơn giản như… đang giỡn. Thật ra, album ảnh chỉ là một trang web gồm các ảnh thôi! Bây giờ, có rất nhiều chương trình giúp bạn tạo những album ảnh rất tiện lợi nhưng trong bài viết này cách đơn giản nhất, thủ công nhất sẽ được giới thiệu đến với bạn. Không cần phải biết nhiều tiếng Anh, không cần phải nặn óc suy nghĩ, hãy làm theo chỉ dẫn, bạn sẽ có album ảnh vừa ý trên trang web của mình!

1. Album ảnh trên website là gì? Như đã nói ở trên, thật ra, đó chỉ là các trang web chứa hình thôi, nhưng vấn đề ở đây là làm sao sắp xếp và trình bày album ảnh cho thật logic, tạo cho khách đến thăm trang web của bạn thoải mái.

Đây là mẫu đơn giản và chuẩn nhất: 1 album ảnh gồm 2 phần. Phần giới thiệu và phần ảnh.
Phần giới thiệu là 1 trang web (tạm gọi là trang web giới thiệu) gồm các “hình thu nhỏ” (tiếng Anh gọi là thumbnails) của các hình trong album.
Phần thứ 2 là các hình trong album ảnh. Và đây là phương thức hoạt động: ở trang web giới thiệu, người đọc được giới thiệu danh sách các hình trong album bằng các “hình thu nhỏ”. Họ sẽ click vào các “hình thu nhỏ” để xem các hình thực sự. QUÁ ĐƠN GIẢN!!!!

2. Tạo các “hình thu nhỏ” – thumnails: bạn phải nhờ tới phần mềm Easy Thumbnails 2.5. Đây là phần mềm giúp bạn biến các ảnh lớn của mình thành các ảnh nhỏ.
Sau khi download Easy Thumbnails, bạn khởi động nó lên và bắt đầu làm việc. Công việc thật ra chỉ là chọn hình và click nút Make để tạo các thumnails. Không còn gì đơn giản hơn.
Khi chọn hình, bạn nhìn qua màn hình bên phải, ở đó có 2 ô “Original Image” và “Preview output”. Bạn muốn xem trước “hình thu nhỏ” như thế nào, chỉ cần click vào ô “Preview output” là thấy ngay.
Nếu chưa hài lòng về kích thước hay màu sắc của thumnails, bạn vào SEasy Thumbnailstings để chỉnh sửa. Ở đây bạn có thể điều chỉnh chiều ngang, chiều dọc, độ phân giải, độ sáng, màu sắc, độ nghiêng và chất lượng của thumbnails. Một kinh nghiệm nhỏ: bạn chỉ cần chọn chất lượng thumnails (JPEG Output) khoảng 30-50% thôi, không cần phải nhiều vì suy cho cùng các thumnails chỉ là hình mẫu! Quan trọng hơn, bạn sẽ tiết kiệm được vài KB mỗi hình. Bạn còn có thể thu nhỏ một lúc nhiều file bằng cách chọn thư mục chứa các file ảnh và click nút “Make all”. Một điểm tiện lợi nhất của Easy Thumbnails là nó có thể xử lý nhiều dạng hình gốc như JPG, PNG, TIFF, ICO, PCX, GIF,…. File insatall Easy Thumnails nặng chưa đến 1MB, download tại: http://www.fookes.net/ftp/free/EzThmb_Setup.exe

3. Tạo trang web giới thiệu: khởi động Microsft Frontpage. Chọn new để mở 1 trang web mới. Sau đó, bạn chọn Table/draw table để vẽ một bảng gồm các dòng và cột. Sau đó, bạn click vào thumbnail và chọn hyperlink, trong ô URL, bạn chọn đường dẫn đến tấm ảnh thật sự. Và tới đây, bạn sẽ có 1 trang web giống giống trang web dưới đây của tôi:

Việc còn lại của bạn là chỉnh sửa và trang trí cho web site của mình.

Cuối cùng, bạn đã có 1 album ảnh trên website của mình. Khi khách vào xem, học click chuột vào ảnh nhỏ, một cửa sổ Internet Explorer mới hiện lên và khách sẽ thấy được tấm ảnh lớn.

Quá Đơn GIản! Hãy thử 1 lần rồi xem, bạn sẽ thích ngay mà !!!

Tạo nút bấm – Button cho trang web.

Các nút bấm – button là một phần không thể thiếu của 1 trang web. Chúng thật ra là những file ảnh có dạng giống 1 cái nút bấm được kết nối đến 1 trang web khác hay 1 file khác. Khi bạn nghĩ như thế thì tất cả lại trở lên hết sức đơn giản, như đang… ăn cháo + trứng gà vậy.(Bạn thôi nha, còn tôi thì…. Chúa ghét)
Có rất nhiều cách tạo ra các nút bấm như là tự vẽ bằng các phần mềm như Paint, Photoshop, Corel Draw hay Foto Canvas; sử dụng các chương trình tạo nút bấm như 1Cool Button. Hoặc bạn cũng có thể tìm kiếm tại 1 số website cung cấp mẫu sẵn.

Trong phạm vi bài viết này, tôi sẽ giới thiệu cho các bạn cách tạo button

1.http://www.coolarchive.com/buttons.cfm khi vào trang này, bạn sẽ được cung cấp khoảng trên 20 kiểu nút bấm. Click chọn kiểu nào mà bạn thấy ưng ý nhất. Sau đó, bạn sẽ được chọn cách trình bày nền – background của nút (trong suốt, nền đen, nền màu), kích thước. Việc của bạn là gõ vào ô Text những chữ trên nút bấm. Bạn có được tới 63 fonts chữ độc đáo để lựa chọn. Nhưng nhớ chọn font chữ càng đơn giản càng tốt, bởi loằng ngoằng quá sẽ càng khó nhìn trong phạm vi 1 BUTTON bé nhỏ.
Sau cùng, click submit. Ở trang web mới, bạn sẽ thấy được kết quả của mình. Click phải chuột và save hình trong cùng ổ chứa với các trang web. Hình được save dưới dạng file JPEG.

2. www.flashbuttons.com các nút bấm file JPEG không bao giờ hấp dẫn bằng các button flash cả. Dĩ nhiên ngoài việc có thể chuyển động được, công nghệ flash tạo đuợc nhiều hiệu ứng rất độc đáo và vì thế gây được sự thú vị nơi người sử dụng. Trang web Flashbuttons sẽ giúp bạn tạo những nút bấm bằng flash, dưới dạng *.SWF. Nhưng bù lại các file SWF chiếm nhiều dung lượng hơn các file JPEG. Căn bản, việc tạo nút bấm cũng giống như ở trên đã đề cập, chọn kiểu nút, chọn cách trình bày, hiệu ứng, mầu sắc…. Nhưng trang web này còn cho bạn nhiều tiện ích khác như: tạo một lúc nhiều nút bấm, mỗi nút sẽ được liên kết đến sẵn trang web của bạn.
Sau khi chọn tên cho nút bấm, bạn phải gõ vào ô “Links to assign to your button” đường dẫn của trang web mà nút của bạn liên kết (ví dụ như hinhanh.html; amnhac.html, …). Sau đó, bạn sẽ được cung cấp 1 đường dẫn để download các button mà bạn vừa mới tạo ra xuống máy. Đó là một file SWF. Hãy lưu ở cùng ổ chứa với các trang web. Ở cuối trang, có một đoạn mã rất khó hiểu (dĩ nhiên rồi… nhưng hãy save lại.)

3. Cách chèn nút vào trang web: bạn mở Start/Programs Files/Accessories/Notepad. Sau đó, chọn Open và mở trang web mà bạn muốn chèn các nút bấm vào (file HTML). Đừng ngạc nhiên khi thấy một rừng chữ hiện lên trước mắt bạn, đơn giản thôi, cách trang web HTML thực ra được tạo bằng ngôn ngữ HTML. Cái mà chúng ta thấy qua Internet Explorer là phần trình bày của trang web (Preview, tạm hình dung là vẻ bề ngoài của 1 chiếc xe; còn cái chúng ta đang có trước mắt là phần máy xe. Đến phần quan trọng: bạn bấm nút “End” trên bàn phím để về cuối dòng đầu tiên (dòng đầu tiên chỉ có chữ thôi). Bấm Enter. Chèn dòng mã mà bạn đã copy vào. Sau đó save lại “văn bản” vừa thay đổi. Dùng Internet Explorer mở trang web đó xem thành quả của mình, bạn chắc chắn sẽ cảm thấy hài lòng. Quay mặt qua nhìn tôi cười 1 cái nhá, nếu là bạn gái. Còn bạn trai mời Hoangcamapus này ly cafe sữa đá là mãn nguyện lắm rồi. Không dám đòi hỏi chi hơn… nếu thoáng thì xin ly nữa < === Nghiện cafe mà

Những kinh nghiệm máu chảy đầu rơi khi dân A MA TƠ hỏi lắm...(lắm mồm ý mà)

Việc đầu tiên là bước chuẩn bị cho sự ra đời của “đưa con tinh thần”: Bạn hãy viết ra giấy tất cả những dự định của mình về trang web như nội dung chính, cấu trúc các trang web, cách trang trí, sắp xếp, màu sắc chính của từng trang, các trang web cần lấy tư liệu,…. Hãy làm việc này càng tỉ mỉ càng tốt vì nó sẽ tiết kiệm cho bạn rất nhiều thời gian trong giai đoạn xây dựng website.

Để tránh rắc rối phát sinh sau này, bạn phải lưu trữ các trang web của mình và các file được sử dụng trong một ổ chứa. Ví dụ: trong trang giadinh.html của bạn có sử dụng file hình ancom.gif và file nhạc giutar.mid thì 3 file đó phải nằm trong 1 thư mục. Ngoài ra, bạn nên đặt tên cho trang chủ của mình thay vì là trangchu.html hay home.html thành index.html.

Kế tiếp đến việc sắp xếp các công cụ. Bạn nên sưu tập thật nhiều các tập tin multimedia như các file ảnh, các file âm thanh, tiếng động, các file flash,… và đưa chúng vào những ổ chứa một cách trật tự. Internet là phương tiện chủ yếu. Hãy gõ vào thanh Search của Google hay Yahoo các từ khoá như “pictures”, “images”, “clips art”, “sounds”,…. Ngoài ra, bạn còn có thể kiếm được những gì mình cần trong các CD trên thị trường như là HTML Grafix, Web Decoration, Best Pictures, Clips Art,….

Bên cạnh đó, bạn còn có thể tạo ra một hình ảnh với nhiều hiệu ứng đặc biệt như
Xara3D – phần mềm làm các chữ xoay,
Button Studio, 1 Cool Button, Button Maker – cá tiện ích tạo nút bấm
AniGif – tạo các ảnh động,….

- Các file multimedia chuẩn (WAV, BMP,…) thường có dung lượng rất lớn, nếu bạn sử dụng chúng để chèn vào web, người đọc khó có thể xem đựơc vì không đủ kiên nhẫn chờ Internet tải xuống vài MB cho 1 trang web. Vì thế, hãy dùng những cách sau:

Đối với các file ảnh: hãy chuyển đổi tất cả các file ảnh sử dụng trong web của bạn sang file JPG hay file GIF bằng các phần mềm xử lý ảnh. Ở đây, tôi lấy ví dụ bằng phần mềm thông dụng nhất là ACD See. Mở ACD See, tìm đến đường dẫn và chọn file hình, chọn Tools/Convert. Trong khung Destination Convert, bạn chọn JPG hay GIF rồi click OK.
So sánh dung lượng của file mới được nén với file gốc, bạn sẽ thấy sự khác biệt hoàn toàn. Riêng với file JPG, bạn có thể điều chỉnh độ chất lượng cũng như dung lượng của ảnh được tạo ra. Sau khi chọn JPG trong khung Destination Convert, bạn click chọn nút Format Settings. Sau đó, bạn điều chỉnh chất lượng ảnh bằng cách trượt thanh trượt trong phần Image Quality. Hình ảnh có độ phân giải càng thấp thì dung lượng càng thấp và ngược lại. Sau đó click OK để hoàn thành công việc.

Với các file âm thanh lớn như WAV hay WMA, hãy nén chúng lại bằng MPEG Layer-3. bằng phần mềm trên, file nén của bạn sẽ có dung lượng chỉ bằng 1/5, thậm chí 1/10 file gốc mà chất lượng gần như chẳng kém bao xa. Ngoài ra, bạn còn có thể chuyển các file WAV thành các file nhạc cơ bản MIDI bằng phần mềm WAV2MIDI.
Hoặc khó tính hơn, bạn có thể tự tìm cho mình 1 chương trình Convert nhạc trong GOOGLe với từ khóa: “ Convert music”

Đối với các file COM, EXE, DOC, RAR,…hãy nén chúng lại bằng các phần mềm nén phổ thông như WinZip hay WinRar.

Các phần mềm kể trên bạn rất thông dụng, bạn có thể kiếm chúng dễ dàng trong các CD sofwares trên thị trường.

Làm đẹp trang web của bạn

Để trang web của bạn thêm phần hấp dẫn, hãy thêm vào đó các hiệu ứng đặc biệt. Một vài phần mềm dưới đây sẽ giúp bạn làm việc đó dễ dàng.

Koolmoves 3.70

KoolMoves giúp bạn dễ dàng tạo file Flash, banner,ảnh động... cho trang web của mình. Nó kết hợp và thao tác một cách khéo léo với những hình ảnh, âm thanh, văn bản mà bạn cung cấp cho nó để tạo Flash. Bạn có thể chọn trong thư viện đồ sộ của nó rất nhiều hiệu ứng văn bản, clip art, hình ảnh, video... cho file Flash của mình thêm đặc sắc. Nó cho phép bạn thêm vào nhiều loại file âm thanh(MP3,WAV...), nhiều hiệu ứng chuột, button và sự chuyển đổi hài hòa giữa các hiệu ứng ấy.
KoolMoves được đánh giá 5 sao theo bình chọn của tạp chí PC Magazine(Mỹ), đây là shareware, dung lượng 2.6MB, download tại www.getafile.com/cgi-bin/merlot/get/koolmoves/kmsetup.exe

Anfi- Tạo hiệu ứng sống động

Phần mềm này giúp bạn tạo ra những hiệu ứng sống động cho các nút bấm, hình ảnh, banner, … nói chung là tất cả các đối tượng trong trang web của bạn.
Đối với mỗi đối tượng, bạn có gần 20 hiệu ứng đặc biệt để chọn. Ví dụ đối với hiệu ứng dành cho hình ảnh, bạn có thể đặt hình của bạn trong sa mạc Sahara. hay làm cho người ta cảm thấy là bạn đang bị chìm dần trong một hồ nước sâu không đáy,… Còn rất nhiều, rất nhiều những hiệu ứng lạ mắt khác đang chờ bạn khám phá. Sau khi hoàn tất mọi công đoạn như chọn hiệu ứng, điều chỉnh ánh sáng, trục quay, màu sắc, hình nền, bạn sẽ được cung cấp mọi mã nguồn. Hãy click vào nút Copy into clipboard để lưu mã nguồn này vào máy. Sau đó, bạn mở trang web mà bạn muốn chèn các hiệu ứng vừa mới tạo bằng Notepad. Dưới dòng , bạn thêm vào , ở dấu ………bạn chèn đoạn mã vừa lưu. Anfi còn cung cấp cho bạn gần 100 ví dụ về các hiệu ứng để bạn tiện tham khảo. File install của Anfi nặng khoảng 3,3MB, download tại: www.anfyteam.com

Javascript Clock 1.0: đây là một phần mềm nhỏ, giúp bạn tạo ra một chiếc đồng hồ nho nhỏ trong trang web của mình bằng ngôn ngữ Java. Khởi động chương trình, bạn chỉ cần chọn màu của các kim giờ, phút, giây và màu nền của đồng hồ. Ngoài ra bạn còn có thể điều chỉnh được kích thước, kiểu dáng hay hiệu ứng đặc biệt và vị trí, liên kết của đồng hồ trên trang web.
Sau khi xong việc, bạn chọn Menu/Build HTML. Lưu đoạn mạ đó vào và chèn vào các file HTML như cách mà tôi đã hướng dẫn ở trên.

File xài thử của Javascript Clock 1.0 nặng khoảng 500KB, chạy được trên hệ điều hành Win9x, Win2k, WinNT và WinXP. Bạn có thể download tại: www.usingit.com/products/js/datetime/jck/jck10trl.zip

Xara Webstyle – tất cả trong một

Để tạo nút bấm cho trang web, bạn tìm chương trình Button Maker hay 1Cool Button, để tạo các banner bạn tìm phần mềm Create Banner hay tự tạo bằng Microsoft Frontpage, để tạo các dòng chữ xoay “anh một kiểu, em một kiểu”, bạn phải tìm đến chương trình ABC nào đó, để tạo các menu cho trang web bạn phải lục tung trên xa lộ thông tin phần mền XZY... Thật là một chuyện không đơn giản... Dù là người luôn say mê, tìm tòi tạo web nhưng nhiều khi bạn cũng cảm thấy hơi khó chịu khi phải thực hiện quá nhiều động tác.
Nắm được tâm lý này, hãng Xara đã cho ra đời phần mềm XARA WEBSTYLE (http://www.xara.com/products/webstyle). Đây có thể coi là một cái “giỏ đựng đồ trang điểm” của các trang web của bạn.
Thật vậy, chương trình cho phép tạo ra các nút bấm, các banners, các menu, các logo, chữ xoay, hình nền, những chấm đầu dòng, hình ảnh,… vô cùng bắt mắt một cách dễ dàng. XARA WEBSTYLE có sẵn cả chục, thậm chí cả trăm mẫu tạo sẵn cho bạn lựa chọn, nó có thể làm vừa lòng tất cả “ông bố” các bạn khó tính nhất. Hoặc hãy sử dụng hình ảnh của mình hoặc lên trang chủ download xuống những mẫu mới. Rõ ràng, với XARA WEBSTYLE , bạn có cả thế giới màu sắc trước mắt. Quả thật tôi cũng 1 thời có mắt mà không thấy núi THÁI SƠN, do giao diện của XARA hổi đầu nó hơi… chuối. Vả lại tên soft đó đọc ngay tiếng việt : XA RA, tạm hiểu…TRÁNH XA TÔI RA. Nên tôi cho chia tay “nàng” luôn từ đó. Khi bước chân chập chững làm web, đôi lúc tính bỏ giữa chừng thì “nàng XARA” lúc đó ma xui quỉ vồ trượt thế nào không “XARA” nữa mà “GẦN RA”. Thế là tôi lên tiên

Khi khởi động chương trình, bạn sẽ thấy xuất hiện một cửa sổ được gọi là cửa sổ Start. Hãy bắt đầu!

1.Tạo button: Việc này cũng đâu phải là khó lắm! Bạn chọn phần Button ở cửa sổ Start. Sau đó, hãy để ý cột phía trái màn hình. Hãy click vào từng phần ở đó để bắt đầu và kết thúc công việc. Ở phần Design, bạn sẽ phải chọn kiểu của button. Ở phần Text, bạn gõ những chữ sẽ hiện lên trên nút. Sau đó, trong phần Colors và Textures, bạn chọn màu nền và màu nút. Bạn chọn hiệu ứng bóng cho button trong phần Shadows và chỉnh kích thước cho nút ở phần Size. Cuối cùng bấm Save. XARA WEBSTYLE cho phép lưu file dưới 3 dạng GIF, JPEG, PNG và dưới 3 tiêu chuẩn về chất lượng: Fast download (nghĩa là chất lượng ảnh thấp nhất, nhưng sẽ được download nhanh hơn trên mạng), Medium Quality và High Quality. Bạn còn có thể xem trước sản phẩm bằng Browser Preview. Bạn còn tạo ra một “hệ thống nút bấm” từ các mẫu của button có sẵn bằng cách click vào NavBar. Phần này sẽ được nhắc đến ở mục 3.

2.Tạo logo (biểu tượng), background (màu và hình nền), dividers (tạm dịch là các đường kẻ nghệ thuật), banner (các bảng thông báo, quảng cáo), bullets (các chấm, gạch đầu dòng, dùng để tạo ra một danh sách). Với các phần này, bạn cũng thao tác giống như phần tạo nút bấm. Khi lưu lại, bạn có thể chọn số màu của đối tượng (từ 2 đến 256 màu).

3.Tạo NavBar và Menu: nói nôm na đó là một hệ thống nút bấm giống nhau về hình thức và được kèm theo một tí xíu hiệu ứng âm thanh, hình ảnh khi bạn đưa hay click chuột vào nó. XARA WEBSTYLE cung cấp cho chúng ta rất nhiều mẫu Navbar rất “sành điệu”, hấp dẫn và bắt mắt.
Các công việc đầu tiên cũng bình thường như chọn kiểu, chọn màu,… Ở giai đọan cuối, bạn click vào phần Navbar. Bạn sẽ thấy hiện ra một bảng. Trong cột URL, bạn phải gõ vào đó kết nối (hyperlinks) của từng buttons. Nếu muốn thêm hay xóa một button, bạn click vào nút Add hay Delete ở dưới bảng. Ở đây, bạn còn có thể chỉnh được khoảng cách giữa các nút (Spacing).

4. 3D Heading: là một phần truyển thống của Xara. Ở đây, bạn có thể tạo ra các từ, các cụm từ có khả năng xoay theo nhiều kiểu khác nhau. Ở mục này, bạn có một phần mới phải lưu ý là phần bevel – chỉnh góc cạnh, độ dày mỏng, hiệu ứng ánh sáng, độ cong,… của đối tượng.

XARA WEBSTYLE còn rất nhiều tính năng thú vị khác nữa. Nếu bạn còn có gì thắc mắc hay chưa biết sử dụng một chi tiết nào của chương trình, bạn có thể click vào nút Tutorial và chương trình sẽ hướng dẫn cho bạn thật tỉ mỉ về từng bước thực hiện.

Nói chung, XARA WEBSTYLE có thể được chấm 9.5/10 vì những lợi ích của nó cung cấp cho người sử dụng. Tiện ích này có giao diện hiện đại, hấp dẫn và đẹp mắt, ngoài ra, các tính năng của nó rất dễ khai thác và sử dụng. Với XARA WEBSTYLE này, bạn không cần mất thời gian tìm kiếm nhiều tiện ích khác nhau cho cùng một mục đích “làm trang web bạn nổi bật giữa đám đông”.

Cuối cùng nếu bạn thấy bài này có ích thì bạn hãy giúp chúng tôi gây quỹ để BTD trả nhuận bút và giúp trang web phát triển bằng cách nhấp chuột vào bảng quảng cáo ở dưới.

Bài được tổng hợp bởi hoangcamapus. Nếu bạn là tác giả của phần nào trong đây bạn có thể liên lạc với tôi để tôi credit cho bạn.

1- <!-- (chú thích) -->:

Để thêm những dòng chú thích trong file HTML, người ta dùng thẻ nầy. Nội dung văn bản nằm giữa <!-- và --> sẽ được chương trình Browse bỏ qua. Cho phép có khoảnh trắng giửa -- và >, nhưng không được có khoảng trắng giửa <! và --.

Thí dụ:
<HEAD> <TITLE>The HTML Reference</TITLE>
<!-- Created by Stephen Le Hunte, April 1996 --> </HEAD>

2- <!DOCTYPE>:

Thẻ nầy dùng ghi thông tin về version HTML áp dụng trong tài liệu Web. Thường đây là dòng đầu tiên trong file HTML.

Thí dụ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">

hay <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">

3- <A>:

Đây là thẻ xác lập cho việc liên kết. Các thuộc tính của thẻ nầy như sau:

HREF:

Thuộc tính HREF chỉ định địa chỉ liên kết, dòng văn bản sau dấu = là địa chỉ đối tượng liên kết (được bao trong cặp ""). Dòng văn bản giửa dấu <A> và </A> là đối tược chủ của mối nối liên kết. Khi bạn kích mouse vào đối tượng chủ trong trình Browse, bạn sẽ được chuyển đến đối tượng liên kết.

Thí dụ:
<A HREF="http://subnet.virtual-pc.com/~le387818/">The HTMLib site</A> for updated info on the HTMLib.

Trong thí dụ, nếu bạn kích vào dòng "The HTMLib Site" . Bạn sẽ chuyển đến địa chỉ http://subnet.virtual-pc.com/~le387818/.

Bạn có thể thêm "#identifier" để chỉ định chuyển đến 1 vị trí được quy định sẳn trong đối tượng liên kết.

Thí dụ:
The <A HREF="document.html#glossary">glossary</A> defines terms used in the document.

Trong thí dụ, chọn "glossary" sẽ được chuyển đến tài liệu document.html, ngay tại vị trí tên glossary trong tài liệu nầy.

Thí dụ vài thẻ liên kết sau:

<A HREF="http://..."> Liên kết với 1 Web Site.

<A HREF="ftp://..."> Với 1 Ftp Site.

<A HREF="gopher://..."> Với 1 Gopher server.

<A HREF="news:..."> Liên kết với 1 nhóm Tin.

<A HREF="mailto:..."> Với 1 địa chỉ gởi Mail. Liên kết nầy sẽ kích hoạt chương trình Mail và tự động điền địa chỉ vào mục To dùm bạn. Bạn có thể khai báo luôn cả chủ đề thư (?subject).

Thí dụ:

<A HREF="mailto:[email protected]?subject=The HTMLib is fantastic">link text</A>

NAME:

Thuộc tính NAME cho phép bạn đánh dấu vị trí để làm đích cho các tài liệu khác liên kết qua.

Thí dụ:

<A NAME="coffee">Coffee</A> is an example of...
An example of this is <A HREF="#coffee">coffee</A>.

Các tài liệu khác có thể liên kết với tài liệu nầy ngay tại vị trí đã xác định.

<A NAME="drinks.html#coffee">

TARGET:

Chương trình Browser có thể nạp đối tượng liên kết vào 1 cửa sổ chỉ định bằng thẻ nầy. Nếu cửa sổ nầy chưa có, trình Browse sẽ mở 1 cửa sổ mới. Chủ yếu thẻ nầy dùng cho frames.

Dạng chung: <A HREF="url.html" TARGET="window_name">Link text</A>

window_name: Là tên đặt cho Frame.

Khi bạn bấm vào dòng "Link text", trang "url.html" sẽ được nạp vào frame có tên chỉ định.

Ngoài ra bạn còn có thể chèn thêm các Script sau vào thẻ <A>:

OnMouseOver: Khi bạn di chuyển Mouse đến liên kết, sẽ có 1 dòng văn bản mô tả xuất hiện trong thanh trạng thái của trình Browse.

Thí dụ: <A HREF="index.html" OnMouseOver="self.status=('Back to the main page')">Link text</A>

Dòng chữ "Back to the main page" sẽ hiện trong thanh trạng thái khi dời Mouse đến chữ "Link text".

OnMouseOut: Tương tự như trên nhưng dòng chử nầy lại xuất hiện khi kéo Mouse ra khỏi liên kết.

Thí dụ: <A HREF="index.html" OnMouseOut="alert('Oh please go to this document')">Link text</A>

OnClick: Khi bấm Mouse lên liên kết, sẽ xuất hiện hộp thoại yêu cầu xác nhận.

Thí dụ: <A HREF="http://www.netscape.com/" OnClick="confirm('Are you sure you want to go to the Netscape site?')">Link text</A>

4- <ADDRESS>:

Dùng khi cần khai báo địa chỉ. Thí dụ:

<ADDRESS>
Mr. Cosmic Kumquat<BR>SSL Trusters Inc.<BR>1234 Squeamish Ossifrage Road<BR>NY 12345<BR>U.S.A.
</ADDRESS>

Khi hiển thị trong trình Browse sẽ có dạng:

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
NY 12345
U.S.A.

5- <APPLET>:

Chèn Applet Java vào trang Web. Có dạng tổng quát sau:

<APPLET CODE="Applet.class" WIDTH=200 HEIGHT=150></APPLET>

Dòng lịnh nầy chỉ thị cho trình Browse nạp Applet có tên Applet.class (trong cùng thư mục với trang Web nầy), và chỉ định kích thước là 200 pixels rộng và 150 pixels cao.

Thí dụ:

<APPLET CODEBASE="http://java.sun.com/JDK-prebeta1/applets/ NervousText" CODE="NervousText.class" width=400 height=75 align=center>
<PARAM NAME="text" VALUE="This is the Applet Viewer.">
<BLOCKQUOTE>
<HR>
If you were using a Java-enabled browser, you would see dancing text instead of this paragraph.
<HR>
</BLOCKQUOTE>
</APPLET>

Chỉ thị cho trình Browse nạp Applet ở địa chỉ htttp://java.sun.com/JDK-prebeta1/applets/NervousText/NervousText.class". Chỉ định kích thước là 400x75 pixels và canh giửa dòng. Nếu trình Browse hiểu Applet, dòng "This is the Applet Viewer." sẽ hiển thị và Applet tạo hiệu ứng cho dòng chữ nầy. Nếu trình Browse không hiểu Applet, nó sẽ bỏ qua nội dung của <APPLET> cũng như <PARAM> và chỉ hiển thị nội dung của <BLOCKQUOTE>

Applet có thể có các thành phần sau:

<APPLET
[CODEBASE = URL]
[CODE = appletFile]
[NAME = appletInstanceName]:
[ARCHIVE = compressed file]
[ALT = alternateText]
[WIDTH = pixels]
[HEIGHT = pixels]
[ALIGN = alignment]
[VSPACE = pixels]
[HSPACE = pixels]
[ARCHIVE = URL to archive]
>
[alternateHTML]
</APPLET>

CODEBASE=URL: Chỉ định điạ chỉ tuyệt đối của Applet.

CODE=appletFile: Chỉ định địa chỉ tương đối của Applet.

ALT=alternateText: Chỉ định dòng text sẽ hiển thị trong trường hợp trình Browse không hiểu Applet.

NAME = appletInstanceName: Đặt tên cho Applet để phục vụ cho việc tìm kiếm.

WIDTH=pixels HEIGHT=pixels: Chỉ định kích thước cho Applet.

ALIGN=alignment: Dùng canh lề, có các giá trị sau: left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.

VSPACE=pixels HSPACE=pixels: Chỉ định khoảng trống bao chung quanh Applet.

ARCHIVE=compressed file: Khai báo các file nén cần thiết của Applet để trình Browse tải về máy cá nhân, phục vụ cho việc đọc lại sau nầy.

6- <B>:

Thẻ làm đậm (bold) dòng văn bản nó chi phối.

Thí dụ:

The instructions <B>must be read</B> before continuing.

Khi hiển thị sẽ có dạng sau :

The instructions must be read before continuing.

7- <BASE>:

Thành phần nầy dùng để chỉ định địa chỉ cơ bản cho các mối nối liên kết. Coi như đây là địa chỉ gốc để tìm các điạ chỉ khác.

Thẻ <BASE> phải nằm dưới thẻ <HEAD>.

Thí dụ: <BASE HREF="http://www.myhost.com/">

Chỉ định điạ chỉ "www.myhost.com" là điạ chỉ gốc cho tất cả các điạ chỉ tương đối khác.

Ngoài ra còn có 1 thẻ mở rộng là <Base Target> dùng cho Netscape Navigator 2.0 và Internet Explorer 3.0 trở lên. Dùng chỉ định Frame mặc nhiên để nạp các đối tượng liên kết.

Thí dụ: <BASE TARGET="default_target">

8- <BGSOUND>:

Liên kết trang Web với 1 file âm thanh, khi trình Browse hiển thị trang Web cũng đồng thời phát file âm thanh nầy luôn. File âm thanh kèm theo phải thuộc 1 trong các dạng thức: WAV, AU hay MIDI.

Các thuộc tính của <BGSOUND>:

SRC: Chỉ định điạ chỉ file âm thanh.

LOOP=n: Chỉ định số dòng lập lại. Nếu n=-1 hay LOOP=INFINITE là cho lập liên tục.

Thí dụ: <BGSOUND SRC="start.wav">

9- <BIG>:

Tăng kích thước font của đoạn văn bản so với font hiện hành.

Thí dụ: This is normal text, with <BIG>this bit</BIG> being big text.

Khi hiển thị sẽ là: This is normal text, with this bit being big text.

10- <BLOCKQUOTE>:

Dùng phân cách 1 khối văn bản để nhấn mạnh. Đoạn văn bản nầy được tách ra thành 1 paragraph riêng đồng thời chèn thêm khoảng trống phiá trên và dưới đoạn văn nầy. Đoạn văn nầy cũng được cho thụt vô so với lề trái.

Thí dụ: In "Hard Drive", a former Microsoft project manager has said, <BLOCKQUOTE>"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"</BLOCKQUOTE>

Khi hiển thị sẽ thành:

In "Hard Drive", a former Microsoft project manager has said,

"Imagine an extremely smart, billionaire genius who is 14 years old and subject to temper tantrums"

11- <BODY>:

Đây là thẻ chứa nội dung chính của file HTML. Dạng thức tổng quát như sau:

<BODY>
The rest of the document included here
</BODY>

Các thuộc tính:

BACKGROUND: Dùng chỉ định file hình ảnh làm nền:

<BODY BACKGROUND="imagename.gif">
Rest of the document goes here
</BODY>

Hình nền phải có dạng thức GIF hay JPG. Nếu dùng Internet Explorer sẽ hổ trợ thêm dạng BMP.

BGCOLOR: Xác lập màu cho nền:

<BODY BGCOLOR="#rrggbb"> Rest of document goes here </BODY>

Với "#rrggbb" là giá trị hexadecimal (thập lục) red-green-blue.

Netscape có thể xác lập 140 màu theo hệ thập lục như sau:

#F0F8FF-aliceblue, #FAEBD7-antiquewhite, #00FFFF-aqua, #7FFFD4-aquamarine, #F0FFFF-azure, #F5F5DC-beige, #FFE4C4-bisque, #000000-black, #FFEBCD-blanchedalmond, #0000FF-blue, #8A2BE2-blueviolet, #A52A2A-brown, #DEB887-burlywood, #5F9EA0-cadetblue, #7FFF00-chartreuse, #D2691E-chocolate, #FF7F50-coral, #6495ED-cornflowerblue, #FFF8DC-cornsilk, #DC143C-crimson, #00FFFF-cyan, #00008B-darkblue, #008B8B-darkcyan, #B8860B-darkgoldenrod, #A9A9A9-darkgray, #006400-darkgreen, #BDB76B-darkkhaki, #8B008B-darkmagenta, #556B2F-darkolivegreen, #FF8C00-darkorange, #9932CC-darkorchid, #8B0000-darkred, #E9967A-darksalmon, #8FBC8F-darkseagreen, #483D8B-darkslateblue, #2F4F4F-darkslategray, #00CED1-darkturquoise, #9400D3-darkviolet, #FF1493-deeppink, #00BFBF-deepskyblue, #696969-dimgray, #1E90FF-dodgerblue, #B22222-firebrick, #FFFAF0-floralwhite, #228B22-forestgreen, #FF00FF-fuchsia, #DCDCDC-gainsboro, #F8F8FF-ghostwhite, #FFD700-gold, #DAA520-goldenrod, #808080-gray, #008000-green, #ADFF2F-greenyellow, #F0FFF0-honeydew, #FF69B4-hotpink, #CD5C5C-indianred, #4B0082-indigo, #FFFFF0-ivory, #F0E68C-khaki, #E6E6FA-lavender, #FFF0F5-lavenderblush, #7CFC00-lawngreen, #FFFACD-lemonchiffon, #ADD8E6-lightblue, #F08080-lightcoral, #E0FFFF-lightcyan, #FAFAD2-lightgoldenrodyellow, #90EE90-lightgreen, #D3D3D3-lightgrey, #FFB6C1-lightpink, #FFA07A-lightsalmon, #20B2AA-lightseagreen, #87CEFA-lightskyblue, #778899-lightslategrey, #B0C4DE-lightsteelblue, #FFFFE0-lightyellow, #00FF00-lime, #32CD32-limegreen, #FAF0E6-linen, #FF00FF-magenta, #800000-maroon, #66CDAA-mediumaquamarine, #0000CD-mediumblue, #BA55D3-mediumorchid, #9370DB-mediumpurple, #3CB371-mediumseagreen, #7B68EE-mediumslateblue, #00FA9A-mediumspringgreen, #48D1CC-mediumturquoise, #C71585-mediumvioletred, #191970-midnightblue, #F5FFFA-mintcream, #FFE4E1-mistyrose, #FFE4B5-moccasin, #FFDEAD-navajowhite, #000080-navy, #FDF5E6-oldlace, #808000-olive, #6B8E23-olivedrab, #FFA500-orange, #FF4500-orangered, #DA70D6-orchid, #EEE8AA-palegoldenrod, #98FB98-palegreen, #AFEEEE-paleturquoise, #DB7093-palevioletred, #FFEFD5-papayawhip, #FFDAB9-peachpuff, #CD853F-peru, #FFC0CB-pink, #DDA0DD-plum, #B0E0E6-powderblue, #800080-purple, #FF0000-red, #BC8F8F-rosybrown, #4169E1-royalblue, #8B4513-saddlebrown, #FA8072-salmon, #F4A460-sandybrown, #2E8B57-seagreen, #FFF5EE-seashell, #A0522D-sienna, #C0C0C0-silver, #87CEEB-skyblue, #6A5ACD-slateblue, #708090-slategray, #FFFAFA-snow, #00FF7F-springgreen, #4682B4-steelblue, #D2B48C-tan, #008080-teal, #D8BFD8-thistle, #FF6347-tomato, #40E0D0-turquoise, #EE82EE-violet, #F5DEB3-wheat, #FFFFFF-white, #F5F5F5-whitesmoke, #FFFF00-yellow, #9ACD32-yellowgreen.

Internet Explorer có thể xác lập 16 màu theo tên như sau:

Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.

TEXT: Thuộc tính nầy chỉ định màu cho văn bàn thường trong file.

<BODY TEXT="#rrggbb">
Rest of document goes here
</BODY>

Các xác lập màu giống như BGCOLOR.

LINK, VLINK, và ALINK: Dùng chỉ định màu cho các dòng văn bản là đối tượng chủ cho mối nối liên kết. Trong đó LINK: Liên kết chưa xem, VLINK: Liên kết đã xem, ALINK: Liên kết đang xem.

Mặc nhiên là: LINK=blue (#0000FF), VLINK=purple (#800080), và ALINK=red (#FF0000). Cách xác lập màu giống BGCOLOR và TEXT.

<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Rest of document goes here
</BODY>

LEFTMARGIN: Canh lề trái. Thí dụ:

BODY LEFTMARGIN="40">
This document is indented 40 pixels from the left hand edge of the browser window
</BODY>

TOPMARGIN: Canh lề trên. Thí dụ:

<BODY TOPMARGIN="40">
This document is indented 40 pixels from the top hand edge of the browser window
</BODY>

12- <BR>:

Thẻ nầy dùng để ngắt một đoạn văn và xuống hàng mới.

Thí dụ:
<P>
Mary had a little lamb<BR>
It's fleece was white as snow<BR>
Everywhere that Mary went<BR>
She was followed by a little lamb.

13- <CENTER>:

Tất cả text nằm trong thẻ nầy được canh giửa so với lề trái và phải.

<CENTER>All this text would be centred in the page</CENTER>

14- <CODE>:

Dùng để nhập một dòng mã có định dạng ký tự riêng. Dòng mã nầy không được thực hiện mà sẽ hiển thị dưới dạng văn bản bình thường. Điều nầy là cần thiết khi cần minh hoạ một đoạn mã làm thí dụ.

Thí dụ: The formula is : <CODE>x=(-b+/-(b2-4ac)ẵ)/2a</CODE>.

Sẽ hiển thị : The formula is : x=(-b+/-(b2-4ac)ẵ)/2a

15- <COMMENT>:

Giống như thẻ <!-- và --> dùng để nhập những dòng ghi chú cho file HTML.

Đoạn text nằm giửa <COMMENT> và </COMMENT> sẽ không được hiển thị khi trình Browse đọc file.

<COMMENT>
This text won't render. I can say what I like here, it wont appear
</COMMENT>

16- <DIR>:

Liệt kê các mục theo dạng cột danh sách có độ rộng 24 ký tự. <DIR> phải đi kèm với <LI> (list item).

17- <DIV>:

So hàng Text theo lề

Thí dụ:

<DIV ALIGN="left">This text will be displayed left aligned in the browser window.</DIV>
<DIV ALIGN="center">This text will be centred.</DIV>
<DIV ALIGN="right">This text will be displayed aligned to the right of the browser window.</DIV>

18- <EMBED>:

Cho phép người soạn thảo chèn liên kết trực tiếp vào trang WEB.

Dạng tổng quát là: <EMBED SRC="_URL_">

Thí dụ: <EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">

19- <FONT>:

Thành phần chính là <FONT SIZE=value>. Giá trị values từ 1-7. Mặc nhiên FONT size là 3. Giá trị thay đổi tương đối là '+' hay '-' so với giá trị chuẩn.

Thí dụ:

<FONT SIZE=4>changes the font size to 4</FONT>
<FONT SIZE=+2>changes the font size to BASEFONT SIZE ... +2</FONT>

Thuộc tính:

COLOR = #rrggbb hay COLOR = color: Xác lập màu giống như BGCOLOR

Thí dụ:

<FONT COLOR="#FF0000">This text is red.</FONT>
hay
<FONT COLOR="Red">This text is also red.</FONT>

FACE=name [,name] [,name]: Chỉ định font chữ khi hiển thị text.

Thí dụ:

<FONT FACE=".VNTIME, .VNARIAL"> This text will be displayed in either .VNTIME hay .VNARIAL, depending on which fonts are installed on the browsers system. </FONT>

20- <FRAME>:

Có 9 thuộc tính: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER, FRAMESPACING and BORDERCOLOR.

SRC="url": Chỉ định file sẽ được hiển thị trong Frame.

NAME="frame_name": Đặt tên cho Frame. Tên nầy dùng làm đích khi cần hiển thị file trong 1 Frame nhất định.

Thí dụ: <A HREF="URL" TARGET="frame_name">

Theo mặc nhiên các Frame sẽ không có tên.

MARGINWIDTH="value"/ MARGINHEIGHT="value": Chỉ định giá trị tính bằng Pixels cho lề trái, phải (Width) và trên, dưới (Height).

SCROLLING="yes/no/auto": Chỉ định cho thanh cuộn cửa sổ trong trường hợp nội dung vượt quá sức chứa của Frame.

NORESIZE: Theo mặc nhiên, tất cả Frame có thể điều chỉnh được kích thước. Thuộc tính nầy không cho điều chỉnh.

FRAMEBORDER="yes/no/0": Chỉ định việc hiển thị khung viền cho Frame. Chọn "yes/0" cho Internet Explorer và "yes/no" cho Netscape.

FRAMESPACING="value": Chỉ định khoảng cách giửa các Frame. Tính theo Pixels.

Thí dụ: <FRAME FRAMESPACING="40" ...>

21- <FRAMESET>:

Đây là thẻ chính của Frame.Các thuộc tính như sau:

ROWS="row_height_value_list": Chỉ định chiều dọc Frame theo Pixels, phần trăm hay tỷ lệ.

Thí dụ: Tạo 3 Frame theo chiều dọc, Frame đầu tiên có kích thước 20% cửa sổ, Frame 2 có kích thước 100 pixels và Frame 3 dùng toàn bộ khoảng trống còn lại của cửa sổ.

<FRAMESET ROWS="20%, 100, *">

Thí dụ: Chia 2 Frame có kích thước 1/4 và 3/4 cửa sổ.

<FRAMESET ROWS="25%, 75%"> Hay <FRAMESET ROWS="*, 3*">

COLS="column_width_list": Giống như ROWS nhưng tính theo chiều ngang.

BORDER="pixel value": Kích thước đường viền

BORDERCOLOR="#rrggbb hay colour name": Chỉ định màu cho đường viền

Thí dụ:

<HTML>
<HEAD>
<TITLE>The HTML Reference Library - HTMLib</TITLE>
</HEAD>
1 <FRAMESET COLS="25%,*">
2 <FRAMESET ROWS="100, *">
3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="no" NAME="buttons">
4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR">
5 </FRAMESET>
6 <FRAMESET ROWS="75, *">
7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE">
8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main">
9 </FRAMESET>
10 </FRAMESET>
</HTML>

Số thứ tự dòng chỉ để phân tích, không có trong file.

1 <FRAMESET COLS="25%,*"> : Chia 2 Frame 1, 2 theo chiều ngang có kích thước 1=25% và 2=75%.

2 <FRAMESET ROWS="100,*"> : Trong Frame 1 chia thành 2 Frame 3, 4 theo chiều dọc. Có kích thước 3=100 pixels chiều cao, 4=kích thước Frame 1 còn lại.

3 <FRAME SRC="buttons.htm" NORESIZE SCROLLING="yes" NAME="buttons"> : Chỉ định file sẽ nạp vào Frame 3 là buttons.htm. Frame nầy không cho resizing và luôn luôn hiển thị thanh cuộn. Tên Frame là BUTTONS

4 <FRAME SRC="qr.htm" NORESIZE SCROLLING="yes" NAME="QR"> : Giống dòng 3, nạp vào Frame 4 file qr.htm. Frame nầy có tên là QR.

5 </FRAMESET> : Dòng nầy dùng kết thúc FRAMESET trong dòng 2.

6 <FRAMESET ROWS="75,*"> : Dòng nầy chia Frame 2 còn lại thành 2 Frame 5, 6 có kích thước 5=75 pixels, 6=khoảng trống còn lại.

7 <FRAME SRC="title.htm" NORESIZE SCROLLING="no" NAME="TITLE"> : Nạp file vào Frame 5, không Resize, không thanh cuộn. Đặt tên cho Frame 5 là TITLE.

8 <FRAME SRC="intro.htm" NORESIZE SCROLLING="auto" NAME="main"> : Giống như trên nhưng có tên là MAIN và thanh cuộn tự động xuất hiện nếu cần thiết.

9 </FRAMESET> : Đóng FRAMESET trong dòng 6

10 </FRAMESET> : Đóng FRAMESET trong dòng 1

Khi cần nạp liên kết vào Frame nào bạn chỉ cần dùng thuộc tính Target="tên Frame". Thí dụ:

<A HREF="qr.htm#QRM" TARGET="QR">
<IMG SRC="images/m.gif" BORDER="0" WIDTH="17" HEIGHT="17" ALT="M">
</A>

Hiển thị vị trí #QRM của file qr.htm trong Frame có tên QR khi bấm vào hình M.gif.

22- <H1> đến <H6>:

HTML có 6 mức chuẩn cho Tiêu đề (heading). Xác lập bằng các thẻ từ <H1> cho đến <H6>.

Thí dụ:

<H1>This is a first level heading heading</H1>
<H2>This is a second level heading</H2>

Bạn có thể sử dụng thuộc tính ALIGN để canh lề cho tiêu đề.

Thí dụ:

<H1 ALIGN=center>This is a centred heading</H1>

23- <HEAD>:

Nội dung nằm giửa thẻ nầy là phần tiêu đề của trang Web. Chúng không hiển thị khi trình Browse đọc file.

<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>

Trong nội dung HEAD có thể chứa các thành phần sau:

<BASE>: Khai báo điạ chỉ cơ bản cho file HTML

<ISINDEX>: Chỉ định từ khoá cho việc tìm kiếm

<TITLE>: Đặt tên tiêu đề cho tài liệu.

<META>: Các thông tin khác về tài liệu.

24- <HR>:

Đường gạch ngang để phân cách các đoạn trong trang Web.

Thuộc tính:

<HR SIZE=number>: Chỉ định kích thước.

<HR WIDTH=number/percent>: Chỉ định độ rộng

<HR ALIGN=left/right/center>: So lề

<HR NOSHADE>: Không bóng

<HR COLOR>=name/#rrggbb: Chỉ định màu giống BGCOLOR

Thí dụ:

<HR>
<HR SIZE="5">
<HR WIDTH="50%">
<HR WIDTH="50%" ALIGN="right">
<HR WIDTH="50%" ALIGN="center" NOSHADE>

25- <HTML>:

Thẻ chính yếu của file HTML. Đánh dấu điểm bắt đầu và chấm dứt nội dung của file.

Thí dụ:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
Nội dung file gồm có 2 phần là <HEAD> và <BODY>
</HTML>

26- <I>:

Chỉ định kiểu chử nghiêng cho văn bản.

27- <IFRAME>:

Dùng hiển thị thông báo khi trình Browse không hiểu Frame

Thí dụ :

<IFRAME NAME="content_frame" width="488" height="244" SRC="welcome.htm">This site uses floating frames</IFRAME>

Đối với trình Browse có hổ trợ Frame, bạn sẽ đọc được nội dung file Welcome.htm trong Frame. Đối với trình Browse không hiểu Frame, bạn sẽ thấy dòng chử "This site uses floating frames".

28- <IMG>:

Chèn 1 file hình vào tài liệu HTML

Thuộc tính:

ALIGN="left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom": So hàng hình ảnh với Text.

ALT="Alternative Text": Cho hiển thị 1 dòng text thay thế cho file hình trong trường hợp trình Browse đang ở trong chế độ không hiển thị hình ảnh. Dòng Text nầy cũng hiển thị theo dạng ToolTip khi dời Mouse đến hình.

Thí dụ:

<IMG SRC="triangle.gif" ALT="Warning:"> Be sure to read these instructions.

SRC="URL of image": Chỉ định điạ chỉ file hình chèn vào trang Web.

<IMG SRC="warning.gif">Be sure to read these instructions.

WIDTH=value/ HEIGHT=value: Chỉ định khoảng cách dành sẳn cho hình trong khi trình Browse nạp toàn bộ hình.

BORDER=value: Chỉ định cho hiển thị đường viền bao quanh hình ảnh. Bạn có thể chọn "0" để hiển thị đường viền màu xanh khi có liên kết.

VSPACE=value HSPACE=value: Quy định khoảng trống giửa hình và Text. VSPACE cho trên và dưới hình, HSPACE cho trái và phải hình. Value tính theo pixel.

LOWSRC: Thuộc tính nầy cho phép hiển thị 2 hình lần lượt trong cùng 1 vị trí. Thường dùng để nạp một hình nhỏ trong khi chờ đợi nạp hình chính có dung lượng file lớn hơn:

Thí dụ:

<IMG SRC="hiquality.gif" LOWSRC="lowquality.gif">

Đầu tiên trình Browse sẽ hiển thị file hình "lowquality.gif". Sau khi nạp hoàn tất cả trang, trình Browse sẽ nạp file hình chính thức vào thay thế.

29- <INPUT>:

Tạo một field để nhận tác động của người sử dụng.

Thuộc tính:

ALIGN: So hàng cho field, chỉ dùng với TYPE=IMAGE trong HTML level 2.

CHECKED: Kiểm tra người dùng đã đánh dấu cho checkbox hay radio button chưa.

MAXLENGTH: Chỉ định độ dài ký tự có thể nhập vào text field, độ dài nầy có thể lớn hơn kích thước Text field. Mặc định là không giới hạn.

NAME: Tên của Field

SIZE: Khai báo kích thước hay số lương ký tự cho field. Thí dụ:

Khai báo 1 field với độ rộng là 24 ký tự:

INPUT TYPE=text SIZE="24"

TYPE: Chỉ định kiểu của Field:

BUTTON: Chèn một nút bấm vào tài liệu. Giá trị VALUE dùng chỉ định Text sẽ hiện trong nút nầy. Thí dụ:

<INPUT TYPE="BUTTON" VALUE="Hello" NAME="btnHello">

CHECKBOX : Chèn 1 chechbox vào tài liệu. Thí dụ:

<INPUT TYPE="CHECKBOX" NAME="chkbox">

HIDDEN: Với thuộc tính nầy, field sẽ không hiển thị ra nhưng nội dung của field vẫn có giá trị. Dùng trao đổi thông tin ngầm giửa client/server.

IMAGE: Chèn field chứa hình ảnh để người dùng bấm Mouse khi chọn. Thí dụ:

<INPUT TYPE="IMAGE" SRC="../images/iexplore.gif" ALIGN="middle">

PASSWORD: Giống như Text, nhưng ký tự nhập vào sẽ không hiển thị ra. Thí dụ:

<INPUT TYPE="PASSWORD">

RADIO: Chèn 1 field có dạng Nút Radio. Thí dụ:

<INPUT TYPE="RADIO">

RESET: Chèn 1 nút bấm dùng phục hồi lại tình trạng cũ cho các field. Đặt tên của nút nầy qua thuộc tính Values.

Thí dụ: <INPUT TYPE="RESET">

SUBMIT: 1 dạng nút bấm giống RESET. Có tác dụng giống như xác nhận đồng ý. Thí dụ: Chèn 1 nút có tên "SUBMIT" và sẽ hiển thị thông báo "alert. This is just an example, nothing will happen" khi bạn bấm Mouse vào nút nầy.

<INPUT TYPE="SUBMIT" OnClick="alert 'This is just an example, nothing will happen'">

TEXT: Nhập 1 dòng text vào fields. Dùng thuộc tính SIZE và MAXLENGTH để quy định kích thước. Trong trường hợp cần nhập nhiều dòng, phải dùng thẻ <TEXTAREA>.

Thí dụ: <INPUT TYPE="TEXT">

TEXTAREA: Nhập nhiều dòng Text vào field. Thí dụ:

<TEXTAREA NAME="descr" COLS="30" ROWS="3" OnBlur="count_char(document.egForm.descr.value)">Enter a short description here (max 50 chars) </TEXTAREA>

VALUE: Chỉ định Text sẽ hiển thị trên các nút bấm.

30- <MARQUEE>:

Tạo hiệu ứng chạy chử trong file HTML. Dòng văn bản giửa thẻ nầy sẽ chạy theo 1 kiểu đả quy định trước, khi trình Browse hiển thị trang Web. Thẻ nầy dành riêng cho Internet Explorer.

Thuộc tính:

ALIGN="left/right/top/middle/bottom": Canh hàng văn bản so với khung chứa văn bản đó.

BEHAVIOR="scroll/slide/alternate": Chỉ định kiểu chạy chữ.

SCROLL (mặc nhiên): Dóng chữ chạy theo một hướng nhất định và lập đi lập lại quá trình đó.

SLIDE: Chớp, tắt.

ALTERNATE: Dòng chữ chạy đổi hướng khi đụng đướng biên của khung bao văn bản.

Thí dụ: <MARQUEE BEHAVIOR=ALTERNATE> Marquee will "bounce" across the screen</MARQUEE>

BGCOLOR="#rrggbb|colour name": Chỉ định màu nền cho khung chứa văn bản.

Thí dụ. <MARQUEE BGCOLOR="#F0F8FF">Nice Background colour!<MARQUEE>

DIRECTION="left/right": Chỉ định hướng chạy của dòng văn bản. Mậc định là từ phải qua trái.

HEIGHT="value/value%": Chỉ định độ cao của khung bao văn bản. Tính bằng pixels (HEIGHT=n) hay tỷ lệ so với cửa sổ (HEIGHT=n%).

WIDTH="value|value%": Chỉ định độ rộng.

HSPACE="value"/ VSPACE="value": Chỉ định khoảng trống giửa <MARQUEE> đến Text bao quanh.

LOOP="value/-1/infinite": LOOP=n: Chỉ định số vòng lập lại. Nếu n=-1, hay LOOP=INFINITE là lập lại liên tục.

SCROLLAMOUNT="value": Chỉ định khoảng cách tính bằng pixels giửa các đoạn text cuộn.

SCROLLDELAY="value": Chỉ định khoảng thời gian giửa các đoạn text cuộn. Có tác dụng điều khiển thời gian.

Thí dụ : <MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I'm fast</MARQUEE>

Chú ý: Bạn có thể xác lập font cho marquee. Thí dụ:

<FONT FACE="Comic Sans MS"><MARQUEE>Hello</MARQUEE>

31- <MENU>:

Dùng tạo những dòng văn bản có được sắp xếp theo kiểu liệt kê. Thường dùng chung với <LI> (list item):

Thí dụ:

<MENU>
<LI>First item in the list.
<LI>Second item in the list.
<LI>Third item in the list.
</MENU>

32- <MULTICOL>:

Tạo nhiều cột để hiển thị trong trang Web.

Thuộc tính:

COLS="value": Chỉ định số lượng cột.

GUTTER="value": Chỉ định khoảngphân cách cột tính bằng pixel.

WIDTH="value": Chỉ định độ rộng cột tính bằng pixel hay % cửa sổ.

Thí dụ:

Tạo 3 cột, cách nhau 25 pixels.

<MULTICOL COLS="3" GUTTER="25">
<P>Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious. <P>To those of you new to the world of the HTML Reference Library, a little introduction :
</MULTICOL>

Khi hiển thị sẽ thành :

Hello and Welcome to the HTML Reference Library. To those of you familiar with the previous incarnation of this project (The HTML Reference Library - HTMLib in Windows .HLP format) the content and working of these pages will probably be obvious.
To those of you new to the
world of the HTML Reference Library, a little introduction

33- <NOFRAMES>:

Dùng để hiển thị dòng văn bản trong trường hợp trình Browse không hiểu Frame. Một trình Browse không hiểu Frame sẽ bỏ qua nội dung nằm trong <FRAMESET> và <FRAME>, nhưng sẽ hiển thị nội dung giửa <NOFRAMES> và </NOFRAMES>.

34- <NOSCRIPT>:

Dùng để hiển thị dòng văn bản trong trường hợp trình Browse không hiểu Script hay khi chức năng nầy bị người dùng cho vô hiệu lực.

Thí dụ:

<HTML>
<HEAD>
<TITLE>Welcome to the HTMLib world of JavaScript</TITLE>
<script LANGUAGE="JavaScript">
<!-- Nội dung Script nằm trong phần nầy // -->
</SCRIPT>
</HEAD>
<BODY>
<NOSCRIPT>
Sorry, you need a JavaScript capable browser to get the best from this page
</NOSCRIPT>
</BODY>
</HTML>

Trình Browse không hiểu Script sẽ hiển thị dòng chử "Sorry, you need a JavaScript capable browser to get the best from this page".

35- <OL>:

Sắp xếp văn bản theo kiểu danh sách. Thường đi chung với <LI> (list item).

Thí dụ:

<OL>
<LI>Click on the desired file to download.
<LI>In the presented dialog box, enter a name to save the file with.
<LI>Click 'OK' to download the file to your local drive.
</OL>

Thuộc tính:

TYPE:

Chỉ định cách đặt ký hiệu đầu dòng:

(TYPE=A) - Chữ hoa. Thí dụ: A, B, C ...

(TYPE=a) - Chữ thường. Thí dụ: a, b, c ...

(TYPE=I) - Số La Mã hoa. Thí dụ: I, II, III ...

(TYPE=i) - Số La Mã thường. Thí dụ: i, ii, iii ...

(TYPE=1) - Số á Rập (mặc định). Thí dụ: 1, 2, 3 ...

START:

Khai báo số dùng làm mặc định và sẽ được chuyển đổi qua TYPE trước khi hiển thị.

Thí dụ: START=5 sẽ được hiển thị là 'E', 'e', 'V', 'v', hay '5' theo TYPE.

Thí dụ :

<OL TYPE=a START=3>
<LI>Click on the desired file to download.
<LI>In the presented dialog box, enter a name to save the file with.
<LI>Click 'OK' to download the file to your local drive.
</OL>

Danh sách có ký hiệu đầu dòng là chử thường, bắt đầu từ 'c'.

36- <P>:

Định dạng cho 1 paragraph.

Thí dụ:

<H1>The Paragraph element</H1>
<P>The paragraph element is used to denote paragraph blocks</P>
<P>This would be the second paragraph.</P>

Thuộc tính:

ALIGN=left/center/right:

Thí dụ:

<P ALIGN=LEFT> ... </P> Có nghĩa: Tất cả text trong paragraph nầy sẽ được canh về bên trái lề trang. Đây cũng là mặc định.

<P ALIGN=CENTER> ... </P> Canh giữa

<P ALIGN=RIGHT> ... </P> Canh phải

37- <STRIKE> hay <S>:

Làm dấu gạch ngang giửa text.

Thí dụ: This text would be <STRIKE>struck through</STRIKE>

Sẽ hiển thị là: This text would be struck through

38- <SMALL>:

Làm chử nhỏ lại so với cở chuẩn.

Thí dụ: This is normal text, with <SMALL>this bit</SMALL> being small text.

Sẽ thành: This is normal text, with this bit being small text.

39- <SPACER>:

Chèn 1 khoảng trắng tính bằng pixel vào đoạn text.

Thuộc tính:

TYPE="horizontal/vertical/block": Horizontal: Chèn khoảng trắng theo chiều ngang. Vertical: Theo chiều dọc. Block: Bao chung quanh giống như hình.

SIZE="value":

Khi <SPACER TYPE="horizontal"> hay <SPACER TYPE="vertical"> giá trị SIZE tính bằng pixels. Không có giá trị khi <SPACER TYPE="block">.

WIDTH="value": Chỉ định độ rộng cho khoảng trắng khi <SPACER TYPE="block">.

HEIGHT="value": Chỉ định chiều cao khi <SPACER TYPE="block">.

ALIGN="alignment": So lề cho khoảng trắng khi <SPACER TYPE="block">.

Thí dụ: <P>Hello and Welcome<SPACER TYPE="horizontal" SIZE="25">to the HTML Reference Library.

40- <STRONG>:

Làm đậm text.

Thí dụ: The instructions <STRONG>must be read</STRONG> before continuing.

Sẽ thành: The instructions must be read before continuing.

41- <STYLE>:

Thẻ nầy phải nằm trong phần <HEAD>. Dùng quy định dạng biểu mẩu chung khi hiển thị, giúp người soạn thảo đở mất công lập đi lập lại cùng 1 quy định.

Thí dụ:

<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
<BODY>
...

42- <SUB>:

Tức là Subscript.

Thí dụ: This is the main text, with <SUB>this bit</SUB> being subscript.

43- <SUP>:

Tức là Superscript.

Thí dụ: This is the main text, with <SUP>this bit</SUP> being superscript.

44- <TABLE>

Tạo bảng trong trang Web.

Thuộc tính:

BORDER="value": Điều khiển việc hiển thị và kích thước đường viền. Nếu giá trị =0 là không có viền.

CELLSPACING="value": Chỉ định khoảng cách giửa các ô. Giá trị mặc định là 2.

CELLPADDING="value": Chỉ định khoảng trắng giửa đường viền và ô. Giá trị mặc định là 1

WIDTH="value or percent": Chỉ định độ rộng bảng tính theo pixels, hay % của cửa sổ hiển thị.

HEIGHT="value or percent": Chỉ định độ cao bảng.

ALIGN="left/right": Canh lề trái, phải.

VALIGN="top/bottom": Canh lề trên, dưới.

BGCOLOR="#rrggbb|colour name": Chỉ định màu nền cho bảng.

BORDERCOLOR="#rrggbb|colour name": Chỉ định màu cho đường viền của bảng.

BORDERCOLORLIGHT="#rrggbb|colour name": Chỉ định màu cho phần được chiếu sáng của đường viền.

BORDERCOLORDARK="#rrggbb|colour name": Chỉ định màu cho phần bị tối của đường viền.

BACKGROUND="URL of image": Chỉ định file hình ảnh dùng làm nền cho bảng.

FRAME: Đòi hỏi thuộc tính BORDER phải được hiệu lực khi sử dụng thuộc tính nầy. Có các giá trị sau:

void Gở bỏ tất cả viền ngoài.
Above Chỉ hiển thị đướng viền phiá trên bảng.
Below Chỉ hiển thị đướng viền phiá dưới bảng.
Hsides Hiển thị các đường viền ngang trong bảng, kể cả đướng trên và dưới bảng.
Lhs Chỉ hiển thị đường viền bên trái.
Rhs Chỉ hiển thị đường viền bên phải.
Vsides Hiển thị các đường viền đứng trong bảng, kể cả đướng trái và phải bảng.
Box Chỉ hiển thị đường viền bao chung quanh bảng.

45- <TD>:

Định dạng cho dữ liệu trong bảng (Table data). Chỉ định nầy có giá trị cho ô dử liệu.

Thuộc tính:

ALIGN="left/center/right". VALIGN="top/middle/bottom/baseline": Canh lề cho Text trong ô (so với ô).

WIDTH="value_or_percent"/ HEIGHT="value_or_percent": Chỉ định kích thước cho ô. Bạn chỉ cần xác lập cho 1 ô chuẩn theo hàng hay cột, các ô khác sẽ giống như vậy.

COLSPAN="value": Mở rộng ô theo cột. Giá trị mặc nhiên là 1.

ROWSPAN="value": Mở rộng ô theo hàng.

BGCOLOR="#rrggbb|colour name"/ BORDERCOLOR="#rrggbb|colour name"/ BORDERCOLORLIGHT="#rrggbb|colour name"/ BORDERCOLORDARK="#rrggbb|colour name"/ BACKGROUND="URL of image":

Chỉ định màu cho nền ô, đường viền ô, hình nền ô. Cách xác lập giống như bảng.

46- <TR>:

Xác lập cho hàng (table row).

Thuộc tính và cách xác lập giống như ô và bảng.

47- <TITLE>:

Dùng đặt tiêu đề cho tài liệu HTML. Tiêu đề nầy không hiển thị trong phần nội dung tranh Web, mà sẽ được hiển thị trong thanh tiêu đề của trình Browse, trong danh sách lưu trử hay tìm kiếm.

Thẻ nầy phải nằm trong phần <HEAD>

<HEAD>
<TITLE>Welcome to the HTML Reference</TITLE>
</HEAD>

48- <U>:

Gạch dưới dòng văn bản.

Thí dụ: The <U>main point</U> of the exercise...


--------------------------------------------------------------------------------

CSS lê từ viết tắt của Cascading Style Sheets : công dụng dùng để trang trê trang web của bạn, vê thông thường được gắn với các ngôn ngữ như lê HTML, PHP, dùng lêm nổi bẪc trang web vê hình ảnh trang web của bạn.
Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng <HEAD> vê kết thúc bằng </HEAD> vê tiếp theo sau đó lê khai báo <STYLE TYPE="text/css"> vê kết thúc bằng </STYLE>
vê sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như sau
<head>
<style type="text.css">
vê ở giữa nêy lê nơi bạn thêm vêo sau nêy
</style>
</head>
Vê sau đây lê cấu trúc của CSS:
Tag {definition1; definition2;.....; definition n}
vê dụ sau đây về dòng lệnh của CSS:
H2 {font-size: 16pt; font-style: italic; font-family: arial}
vê sau đây chúng ta tìm hiểu về những cách hêm trong CSS

1. Tìm hiểu về cách trang trê của font chữ:
a. font-family lê dùng để khai báo kiểu loại font nêo bạn sỪ dụng
vê dụ: H2 {font-family: arial}
b. font-style: lê dùng để khai báo kiểu chữ bạn dùng trong style, bình thường hay nghiêng
vê dụ H3 {font-style: normal}
c. font-weight vê font-variant: lê dùng để trang trê kiểu font bạn đang dùng như lê sáng (light), đẪm (bold)
vê dụ A:link {font-weight: demi-light}
d. text-align: lê vị trê nằm của font trong trang web, có 3 kiểu lê nằm sang trái (left), phải (right) vê ở giữa lê (center)
vê dụ: H1 {text-align: center}
e. text-decoration: lê dùng để trang trê kiểu font như lê italic, blink...
vê dụ: A:visited {text-decoration: blink}
f. text-indent: dùng để size (kêch cỡ) mê bạn đang dùng, thông thường dùng lê <p> vê </p> vê khai báo đơn vị lê in, cm, pixel
vê dụ : P {text-indent: 1in}
g. word-spacing: dùng để khoảng cách giữa các từ.
vê dụ: P {word-spacing: 10px}
h: letter-spacing: dùng để khoảng cách giữa các chữ
vê dụ: P {letter-spacing: 10px}
i. color: dùng để hiển thị mêu cho kiểu chữ
vê dụ: H3 {color: #FFFFFF}
Để hiển thị đoạn mêu bạn muốn, thì bạn nên vêo photoshop vê chọn mêu bạn thêch vê sẽ hiện thị ra mã số vê bạn chọn mã số đó.
2. Chúng ta tìm hiểu về Margin/Background: khi bạn dùng thì nó sẽ ảnh hưởng đến toên bộ trang web của bạn.
a. margin-left: đoạn canh lề bên trái
b. margin-right: đoạn canh lề bên phải
c. margin-top: đoạnh canh lền trên cùng
vê dụ chúng ta có thể dùng như sau
BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}
d. margin: có thể khai báo chúng một lúc cho top, right vê left như sau
P {margin: 3in 4cm 12px}
e. line-height: lê khoảng cách giữa các dòng chữ
vê dụ: TEXT {line-height: 10px}
f. background-color: lê dùng để hiển thị mêu nền của trang web
vê dụ:
BODY {background-color: #ffffff}
g: background-image: bạn có thể dùng một tấm hình để lêm background cho trang web bạn
vê dụ:
BODY {background-image: http://www.page.com/dog.jpg}
h. background-repeat: lê dùng để lẪp lại hình nền theo trục tọa độ x vê y.
Vê dụ:
BODY {background-repeat: repeat-y}
k. background-attachment: lê dùng để gán hình, hình ảnh nền của trang web bạn, nó ko có thể di chuyển.
vê dụ:
BODY{background-attachment: fixed}
3. Chúng ta tìm hiểu về Position vê Division:
a. Position: lê dùng để định vị một vê trê xác định nêo đó
<IMG STYLE="position:absolute" SRC="joe.jpg">
b. left: lê dùng để hình ảnh nằm về vị trê bên trái bao nhiêu
<IMG STYLE="position:absolute; LEFT: 20px;" SRC="joe.jpg">
c. right: lê dùng để hình ảnh nằm về vị trê bên phải bao nhiêu
<IMG STYLE="position:absolute; RIGHT: 20px;" SRC="joe.jpg">
d. Top: lê dùng để định vị trê trên top của screen
<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
e. Width: lê dùng để xác định chiều ngang của tấm hình của bạn lê bao nhiêu
<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
f. height: lê dùng để xác định chiều cao của tấm hình
<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
g. overflow: lê khi tấm hình của bạn quá kêch cỡ cho phép thì nó có thể dùng những chức năng sau hidden, visible, scroll
<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">
vê sau đây lê đoạn code khi bạn nhìn thấy trong web:
<!--
BODY {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
--> </STYLE>
Chúng ta sẽ đi tìm hiểu từng phần, phần thứ nhất chúng ta sẽ tìm hiểu vể TEXT: vê dụ dòng chữ sau

HTML Code:
<STYLE TYPE="text/css">
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
</STYLE>a:link lê để hiển thị khi bạn nhìn thấy mêu chữ lê xanh
a:ative lê để hiển thị mêu đỏ khi bạn click vêo dòng chữ đó
a:visited lê để hiển thị mêu xanh khi bạn nhìn thấy
a:hover lê để hiện thì mêu xanh lá cây khi bạn dùng con chuột đặt lên dòng chữ đó
Text-decoration: lê dùng để trang trê dòng chữ vê dụ underline lê gạch dưới
vê sau đây lê những code có tác dụng tương tự như trên nhưng thay đổi mêu:

HTML Code:
a.tree:link { color: green; text-decoration: none }
a.tree:active { color: yellow; text-decoration: none }
a.tree:visited { color: red; text-decoration: none }
a.tree:hover { color: orange; text-decoration: underline }
a.dog:link { color: blue; text-decoration: none }
a.dog:active { color: red; text-decoration: none }
a.dog:visited { color: blue; text-decoration: none }
a.dog:hover { color: green; text-decoration: underline }<a href="nhothuong.html" class="tree">One Scheme</a>
Bạn có thể dùng đoạn text trên link đến một trang web nêo khác như lê nhothuong.html vê cấu trúc luôn bắt đầu bằng <a> vê kết thúc </a> href=" lê dùng để link đến trang web mê bạn muốn tới." Còn class="tree" lê dùng để khai báo tên của class đó.
Đây cũng lê đoạn code cũng có tác dụng như trên
<a href="funny.html" class="dog">Another Scheme</a>
Vê sau đây lê những đoạn code, bạn có thể trang trê thêm lêm để xung thêm chức năng của nó.

HTML Code:
<STYLE TYPE="text/css">
a:link { color: green; text-decoration: none }
a:active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a:hover { color: green; text-decoration: underline; background: #F9EDED }
</STYLE>

HTML Code:
<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial, Helvetica, sans-serif; }
</STYLE>

HTML Code:
<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-size:40pt }
</STYLE>

HTML Code:
<STYLE TYPE="text/css">
a.link { color: green; text-decoration: none }
a.active { color: yellow; text-decoration: none }
a:visited { color: green; text-decoration: none }
a.hover { color: orange; text-decoration: underline; font-weight: bold}
</STYLE>HTML Code:
<STYLE TYPE="text/css">
a.italic:link { color: green; text-decoration: none }
a.italic:active { color: yellow; text-decoration: none }
a:italic:visited { color: green; text-decoration: none }
a.italic:hover { color: orange; text-decoration: underline; font-style: italic}
</STYLE>Bạn muốn đưa con trỏ của bạn vêo CSS chỉ cần dùng dòng sau
CURSOR: url(tencontro.ani);
Tiếp theo sau chúng ta tìm hiểu về scrool bar trong CSS
vê dụ đoạn code sau:

HTML Code:
<STYLE TYPE="text/css">
BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>scrollbar-base-color: orange; lê hiển thị mêu cam, cho nguyên thanh bar từ trên xuống dưới
scrollbar-arrow-color: green; lê hiển thị mêu xanh, cho 2 cái mũi tên lên vê xuống
scrollbar-DarkShadow-Color: blue; lê hiện thị bóng mêu xanh của thanh scroll
scrollbar-base-color: lê hình để hiển thị toên bộ mêu của thanh scroll
scrollbar-Face-Color: lê để hiển thị mêu trên bề mặt của thanh scroll
scrollbar-Highlight-Color: lê để hiện thì mêu hightlight của thanh scroll
Bêi viết về các tùy biến trong giao diện ( rất tốt cho bạn nêo muốn thay đổi mêu sắc của skin forum )
----------------------------------------------------
Chèn ảnh nền vêo phần nhẪp nội dung bêi viết:
Vêo Style & Templates/ Manager Style/ Main CSS
Tại phần Soạn thảo WYSIWYG ta thay phần mêu nền background thênh

HTML Code:
#F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat centerTrong đó tên "anhnen_text_box.gif" lê tên ảnh mê bạn muốn chèn đặt tại thư mục images/misc/
Thế thui.
-------------------------
Lêm viền cho nút
Ta tới phần Nút (Button)
Thay vêo giá trị mêu nền lê: #E4E7F5
Thêm vêo ô thuộc tênh CSS đặc biệt (phêa bên phải của ô mêu nền ấy):

HTML Code:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
Sau đó bạn có thể thay các thuộc tênh như:
mêu sắc viền (#5182c2)
Độ dêy viền : 1px dotted
---------------------------------
Chèn ảnh nền vêo thẻ Body của trang chủ. Cái nêy nếu biết cách sỪ dụng thì sẽ rất hữu êch
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhẪp thuộc tênh vêo ô mêu nền như sau:

HTML Code:
#FFFFFF url(images/misc/dot.gif)Trong đó tên ảnh lê "dot.gif" đặt trong thư mục "images/misc/"
-----------------------------------
Category Strips
'Category Strips' được dùng với hai mục đêch. Nó được dùng để chỉ ra một 'Chuyên mục' diễn đên, vê nó cũng được sỪ dụng như một kiểu giao diện cho nội dung thanh tiêu đề của hầu hết các bảng.
Nếu ta muốn chèn ảnh vêo phần thanh tiêu đề của "Chuyên mục" thì ta nhẪp vêo ô mêu nền như sau:

HTML Code:
#FFFFFF url(images/misc/table_header_bg.gif) repeat-x top leftTrong đó #FFFFFF (mêu trắng) lê mêu nền còn ảnh nền thì các bạn cũng đã hiểu với phần trên.
Lưu ý rằng các bạn phải chú trọng cả đến mêu ảnh nền vê mêu Font. Để cho 2 cái có độ tương phản cho dễ đọc.
-----------------------------------
Mêu đầu tiên (First color) vê mêu thứ hai (Second color)
Mô tả:
Hầu hết các bảng trong diễn đên dùng mêu đầu tiên hoặc thứ hai cho mêu nền. Đặt thuộc tênh để sỪ dụng 'Mêu đầu tiên' tại đây.
Mêu đầu tiên lê mêu nền của phần nội dung bêi viết khi bạn xem chủ đề
Mêu thứ hai lê mêu nền của phần có chứa tên sỪ dụng, Avatar, danh hiệu... của người viết bêi
Các bạn nên sỪa cho phù hợp với tông mêu của mêu nền diễn đên một cách hêi hoê.
Sau đây lê thiết lẪp giao diện của tôi đã thực hiện. Tôi cho rằng giao diện nêy sỪa thêm một vêi chi tiết nữa thì chẳng kém giao diện của anh Admin bên nêy. Chú ý rằng giao diện đẹp thì phải đi đôi với bộ nút đẹp. Các bạn nên sắm cho mình một bộ nút ăn ý với giao diện. Còn bây giờ đây lê phần giao diện của tôi:
------------------------
Body
Giữ nguyên thiết lẪp gốc
----------
Trang nền (Background page)
Mêu nền: #FFFFFF url(images/misc/dot.gif)
Mêu Font: #000000
------------------------------
<td>, <th>, <p>, <li>
Giữ nguyên thiết lẪp gốc
-------------------------
Viền bảng
Giữ nguyên thiết lẪp gốc
-------------------------------
Category Strips
Mêu nền: #FFFFFF url(images/misc/tm.gif) no-repeat center
Mêu Font: #003366
Liên kết CSS bình thường
Mêu nền: transparent
Mêu Font: #003366
Text decoration: None
Liên kết CSS đã vêo:
Mêu nền: transparent
Mêu Font: #666666
Text decoration: None
Liên kết CSS Hover
Mêu nền: transparent
Mêu Font: #006699
Text decoration: underline
----------------------------------------------------
Table Header
Mêu nền: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left
Mêu Font: #003366
Liên kết CSS bình thường
Mêu nền: transparent
Mêu Font: #003366
Text decoration: None
Liên kết CSS đã vêo:
Mêu nền: transparent
Mêu Font: #666666
Text decoration: None
Liên kết CSS Hover
Mêu nền: transparent
Mêu Font: #006699
Text decoration: underline
-----------------------------------------------
Table Footer
Mêu nền: #FFFFFF
Mêu Font: #003366
Liên kết CSS bình thường
Mêu nền: transparent
Mêu Font: #003366
Text decoration: None
Liên kết CSS đã vêo:
Mêu nền: transparent
Mêu Font: #666666
Text decoration: None
Liên kết CSS Hover
Mêu nền: transparent
Mêu Font: #006699
Text decoration: underline
------------------------------------------
Mêu đầu tiên Mêu thứ hai
Mêu nền: #FFFFFF
Mêu Font: #003366
Thuộc tênh CSS đặc biệt:
border: 1px solid #E5E5E5;
-------------------------------------------
Soạn thảo WYSIWYG
Mêu nền: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center
Mêu Font: #003366
Thuộc tênh CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
-------------------------
Ô nhẪp liệu
Thuộc tênh CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
----------------------------------
Nút (Button)
Mêu nền: #E4E7F5
Thuộc tênh CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
------------------------------------
Menus
Small Font
Time Color
Được giữ nguyên thiết lẪp gốc
-------------------------------------
Navbar Text
Mêu nền: #FFFFFF
Mêu Font: #003366
-------------------------------------
Highlighted Font
Mêu nền: #FFFFFF
Mêu Font: #FF0000
------------------------------------
Panel Surround
Mêu nền: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left
Mêu font: #000000
---------------------------------
Panel (Forms)
Mêu nền: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left
Mêu font: #000000
--------------------------------
<legend>
Giữ nguyên
----------------------------------
Điều khiển menu Popup
Mêu nền: #FFFFFF
Mêu Font: #003366
Thuộc tênh CSS đặc biệt:
padding: 3px 6px 3px 6px;
white-space: nowrap;
Liên kết CSS bình thường
Mêu nền: #FFFFFF
Mêu Font: #003366
Text decoration: None
Liên kết CSS đã vêo:
Mêu nền: #FFFFFF
Mêu Font: #666666
Text decoration: None
Liên kết CSS Hover
Mêu nền: #FFFFFF
Mêu Font: #006699
Text decoration: underline
-------------------------------
Popup Menu Body
Giữ nguyên
--------------------------------
Tùy chọn dòng cho Menu Popup
Mêu nền: #FFFFFF
Mêu Font: #000000
Thuộc tênh CSS đặc biệt
white-space: nowrap;
cursor: pointer;
Liên kết CSS bình thường
Mêu nền: #FFFFFF
Mêu Font: #22229C
Text decoration: None
Liên kết CSS đã vêo:
Mêu nền: #FFFFFF
Mêu Font: #22229C
Text decoration: None
Liên kết CSS Hover
Mêu nền: #FFFFFF
Mêu Font: #FFFFFF
Text decoration: None
---------------------------------
Menu chuyển nhanh
Item selected
Mêu nền:#FFFFFF
Mêu Font: #003366
------------------------------------------------------
Okie vẪy lê đã biết sơ sơ về CSS rồi đó Còn phần nêo chưa đề cẪp đến, mình sẽ cố gắng tìm têi liệu cho các bạn tham khảo thêm
Sưu tầm từ NarutoVN

HÃY BẮT ĐẦU TỪ CÁI NÀY ĐI
Cấu trúc một trang Web:
Một tài liệu HTMl được mở đầu bằng thẻ mở <HTML> và thẻ đóng </HTML> được chia làm hai phần hần đầu (head) và phần cuối (body).
Thẻ mở & thẻ đóng
<HTML> </HTML>
khai báo đây là một tập tin HTML
<HEAD> </HEAD>
khai báo đây là ohần chứa thông tin về tài liệu
<BODY> </BODY>
chứa toàn bộ dử liệu
<H5> </H5>
định dạng dòng văn bản giửa cập thẻ nầy ờ cấp độ 5


1 web chi can <html> noi dung </html> la` OK ro`i
nhung can day du thi the nay:
<html>
<head>

noi dung

</head>

<body>

noi dung

</body>
</html>


HTML đầy đủ là gồm có:
<html>
<head>
nội dung
</head>
<title>Tựa đề của Website</title>
<body>
nội dung
</body>
</html>

Nếu có thêm JavaScript vào Web của mình thì thêm tag sau vào mã trên:
<script language="JavaScript">
<!--
Function tên hàm();
{
nội dung
}
tên các lệnh khác
//-->
</SCRIPT>

ANH kên