[TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard

[zmt264]

Chào các bạn, mình mới lập 1 blog hướng dẫn học thiết kế web sử dụng CSS http://ohisee.com (blog này cũng viết về các vấn đề khác như là lập trình C, HTML, Javascript, AJAX ...), đối tượng học là những người đã biết một chút về HTML (và xHTML) muốn áp dụng CSS để tạo ra những trang web theo đúng tiêu chuẩn web (web standard). Nếu các bạn chút hứng thú hoặc tò mò về CSS, thì chúng ta có thể trao đổi trên blog của mình.

Về lợi ích của Web Standard các bạn có thể đọc tại đây (tiếng Việt):
http://sonnymotives.com/archives/web...ioi-web-phan-1
http://sonnymotives.com/archives/web...ioi-web-phan-2

Còn tại sao phải sử dụng Web Standard và CSS, bạn có thể đọc tại đây (tiếng Anh)
http://www.maxdesign.com.au/presentation/benefits/
http://developer.mozilla.org/en/docs..._Web_Standards

Đây là một xu hương đang được các nhà thiết kế web chuyên nghiệp cổ vũ, nếu các bạn mới học có quan tâm thì mình sẽ tiếp tục bài viết.

======================================
Cập nhật lại 1 số link đến blog cũ của mình đề cập trong topic này (lưu ý blog Opera mới nâng cấp khả năng chuyển tiếng Việt có dấu thành không dấu trong link)

http://my.opera.com/cssquestions/blo...y-xay-dung-web
http://my.opera.com/cssquestions/blo...-lap-trinh-web
http://my.opera.com/cssquestions/blo...-toi-thich-css
http://my.opera.com/cssquestions/blog/css-la-gi
http://my.opera.com/cssquestions/blo...-ve-html-xhtml
http://my.opera.com/cssquestions/blo...27/ac-mong-css
http://my.opera.com/cssquestions/blo...b-website-site
http://my.opera.com/cssquestions/blo...nghich-voi-css
http://my.opera.com/cssquestions/blo...iet-cho-ban-tr

http://my.opera.com/cssquestions/blo...css-tieng-viet
http://my.opera.com/cssquestions/blo...g-viet-ve-html

http://my.opera.com/cssquestions/blo...-xhtml-english
http://my.opera.com/cssquestions/blo...moi-hoc-ve-css
http://my.opera.com/cssquestions/blo...-html-loi-thoi
http://my.opera.com/cssquestions/blo...-nguoi-hoc-css
http://my.opera.com/cssquestions/blo...t-web-bang-css
http://my.opera.com/cssquestions/blo...ng-toc-website
http://my.opera.com/cssquestions/blo...u-thuat-ve-css

Các bài viết này sẽ lần lượt được đưa sang blog mới: ohisee.com của mình.

Sắp tới (từ 22/10/2008 - 20/11/2008) sẽ là loạt bài viết mới về HTML và CSS, Javascript dành cho các bạn mới học. Mời các bạn đón đọc, thân chào các bạn

Thân chào các bạn.

[zmt264]

Trước tiên để hiểu rõ trình độ của bạn trước khi "học" bạn vui lòng vào 3 link sau để trắc nghiệm kiến thức (mỗi trắc nghiệm là 20 câu):
1) về HTML
http://www.w3schools.com/html/html_quiz.asp
2) về xHTML
http://www.w3schools.com/xhtml/xhtml_quiz.asp
3) về CSS
http://www.w3schools.com/css/css_quiz.asp

Vui lòng sau khi trắc nghiệm sau bạn ghi lại quá trình làm bài của mình, đã làm những câu nào như thế nào, và được bao nhiêu điểm.

Mình xin trả lời tận tình và ... miễn phí các bạn có thực tâm học (thể hiện qua việc thực hiện yêu cầu trên của mình), còn với những bạn không trắc nghiệm thì vẫn hoan nghênh các bạn đọc topic này, nhưng mình sẽ không trả lời bạn nếu bạn hỏi mình trong topic này đâu nha :P .

Trình độ của mình cũng không phải là cao, nhưng hi vọng có thể giúp các bạn ít nhiều vì 1 cộng đồng web standard đang nhen nhóm ở VN :P .

Bạn nào muốn được thông báo khi có bài viết mới trên blog (tiếng Anh) hoặc là bài viết mới trong topic này, có thể add nick Yahoo của mình là zmt264 (hiện giờ tổng số friends trong nick của mình đã trên 300 nên có thể trục trặc, mình đang xóa dần 1 số nick hầu như ko liên lạc đi sau).

[zmt264]

Tạm thời mình dịch 1 trong 3 trắc nghiệm trên (về kiến thức HTML) ra tiếng Việt, nếu các bạn thấy việc dịch sang tiếng Việt là cần thiết thì mình sẽ tiếp tục dịch 2 trắc nghiệm còn lại, mong các bạn hưởng ứng trả lời đầy đủ:

1. Từ HTML là từ viết tắt của từ nào?

Hyperlinks and Text Markup Language
Home Tool Markup Language
Hyper Text Markup Language

2. Ai (tổ chức nào) tạo ra Web standards?

The World Wide Web Consortium
Microsoft
Netscape

3. Đâu là tag tạo ra tiêu đề web kích cỡ lớn nhất.

<heading>
<h1>
<h6>
<head>

4. Đâu là tag để xuống dòng trong web?

<lb>
<br>
<break>


5. Đâu là tag tạo ra mầu nền của web?

<body color="yellow">
<body bgcolor="yellow">
<background>yellow</background>

6. Đâu là tag tạo ra chữ in đậm

<b>
<bold>
<bld>
<bb>

7. Đâu là tag tạo ra chữ in nghiêng

<ii>
<italics>
<i>

8. Đâu là tag tạo ra liên kết (links) trong web

<a url="http://www.w3schools.com">W3Schools.com</a>
<a>http://www.w3schools.com</a>
<a href="http://www.w3schools.com">W3Schools</a>
<a name="http://www.w3schools.com">W3Schools.com</a>

9. Đâu là tag tạo ra liên kết đến email?

<a href="***@yyy">
<a href="mailto:***@yyy">
<mail>***@yyy</mail>
<mail href="***@yyy">

10. Làm sao để khi click chuột vào link thì tạo ra cửa sổ mới?

<a href="url" new>
<a href="url" target="new">
<a href="url" target="_blank">

11. Đâu là những tag dành cho việc tạo bảng?

<table><tr><td>
<thead><body><tr>
<table><head><tfoot>
<table><tr><tt>

12. Đâu là tag căn lề trái cho nội dung 1 ô trong bảng

<tdleft>
<td valign="left">
<td align="left">
<td leftalign>

13. Đâu là tag tạo ra 1 danh sách đứng đầu bằng số

<ul>
<list>
<ol>
<dl>

14. Đâu là tag tạo ra 1 danh sách đứng đầu bởi dấu chấm?

<list>
<ul>
<ol>
<dl>

15. Tag nào tạo ra 1 checkbox?

<check>
<input type="check">
<checkbox>
<input type="checkbox">

16. Tag nào tạo ra 1 text input field?

<textfield>
<textinput type="text">
<input type="text">
<input type="textfield">

17. Tag nào tạo ra 1 drop-down list?

<select>
<list>
<input type="dropdown">
<input type="list">

18. Tag nào tạo ra 1 text area?

<input type="textbox">
<textarea>
<input type="textarea">

19. Tag nào dùng để chèn 1 hình vào web?

<image src="image.gif">
<img>image.gif</img>
<img src="image.gif">
<img href="image.gif>

20. Tag nào dùng để tạo hình nền cho web?

<body background="background.gif">
<background img="background.gif">
<img src="background.gif" background>

[zmt264]

Tôi dự định chia Tutor này được chia làm 4 phần, mỗi phần gồm nhiều bài học được dẫn dắt theo những câu hỏi để các bạn có thể hứng thú hơn. Trong phần đầu đầu tiên, chúng ta sẽ học cách tạo ra 1 website đơn giản có sử dụng CSS để định dạng (format) cũng như tạo dáng (layout) cho web.

Web cuối cùng của phần 1 sẽ có dạng như hình sau: hình đính kèm - bạn vui lòng đăng ký để xem hoặc xem trong blog tiếng Việt http://my.opera.com/cssquestions/blog/2007/05/03/m-c-di

Bài Tutor đầu tiên này coi như 1 bản dịch từ:
http://www.w3.org/Style/Examples/011/firstcss
có thể nói đây là 1 ví dụ "nhỏ như con thỏ" đối với dân Pro, nhưng nếu bạn mới biết CSS thì cũng ko phải nhìn vào là làm ngay được. Tuy ví dụ nhỏ nhưng nó sẽ giúp ta có những khái niệm căn bản về CSS

[vter123]

chờ bạn viết thêm đó nha

[zmt264]

Được gửi bởi vter123

chờ bạn viết thêm đó nha

Bạn đã trả lời trắc nghiệm chưa , được mấy điểm

P/S: lưu ý, topic này dành cho những bạn biết 1 chút về HTML rồi nha, những bạn chưa biết chút nào hoặc là quá giỏi rồi thì ko phải "đối tượng phục vụ" vào đọc cho vui thôi :P

[zmt264]

1 bài của solid bên tinhoc.vn (1 cái clone của ddth.com chẳng hiểu để làm gì?) , copy về đây cho bà con đọc:

Đáp ứng yêu cầu của bạn, Solid đã viết ngay một bài hướng dẫn ngắn về thiết kế web, tạm thời được trong topic này. Để có một bài hướng dẫn phù hợp với các bạn mới bắt đầu học thiết kế web, tôi không đòi hỏi ở các bạn nhiều đâu, chỉ cần khi đọc trong bài hướng dẫn, chỗ nào không hiểu thì hỏi lại. Từ đó, tôi sẽ update cách truyền đạt cũng như nội dung. Có như thế thì chúng ta mới có một bài hướng dẫn luôn "hot" (phù hợp với những ai đang cần nó)

Hướng dẫn thiết kế một website

1. Để thiết kế một website, bạn cần phải chuẩn bị những gì?

- Một yêu cầu cụ thể
- Hiểu biết về Web Standard và một số khái niệm liên quan
- Hiểu biết về các ngôn ngữ: HTML (hoặc XHTML), CSS, Javascript, PHP (hoặc ASP hoặc JSP)

Bây giờ, tôi sẽ cố gắng cụ thể hóa những gì vừa trình bày ở trên.

Câu hỏi đầu tiên: "Tại sao lại cần phải có một yêu cầu cụ thể?". Ví dụ nhé, nếu sáng sớm thức dậy, bạn đánh răng. Tôi hỏi "Đánh răng để làm gì vậy?". Nếu bạn trả lời tôi là "À, thói quen thôi" thì tôi đoan chắc 99,99%: bạn là robot. Nhưng may quá, bạn là một con người nên bạn sẽ trả lời tôi: "Bạn không biết à, đánh răng để giữ cho răng khỏe, thơm miệng, không bị sâu, không bị các bệnh về răng". Đấy, thấy chưa, đến một việc "nhỏ xíu" như đánh răng thì bạn cũng phải có mục đích mới thực hiện được. Còn nếu đánh răng chẳng đem lại ích lợi gì thì đời nào bạn làm. Chuyện thiết kế một website cũng vậy, cũng phải có mục đích. Mục đích có thể là bạn muốn trở nên nổi tiếng, bạn muốn chia sẻ những gì mình có và nhận lại những gì mình đáng được nhận từ thế giới ảo,... Do đó, khi bắt tay vào làm một website, câu đầu tiên bạn nên hỏi là "Thông qua website, tôi có thể chia sẻ cái gì cho những người khác?".

Câu hỏi tiếp theo: "Cần quái gì phải biết Web Standards?". Như tôi đã nói ở phần trên, bất kì làm việc gì cũng phải có ích lợi của nó. Cho nên, tôi xin giới thiệu với các bạn loạt bài của anh Sonny về Web Standards để hiểu thêm ích lợi của Web Standards.

http://sonnymotives.com/archives/web...ioi-web-phan-1

Câu hỏi tiếp theo: "Cần quái chi biết mấy ngôn ngữ tàm xàm ba láp đó?". Cần chứ. Ví dụ nhá, khi bạn muốn xây một căn nhà, bạn phải lập bản vẽ. Sau khi lập bản vẽ, bạn đã có cái nhà mình mơ ước chưa? Chắc chắn là chưa vì còn phải qua giai đoạn xây tô nữa. Và giai đoạn xây tô cần có gì nhỉ? Ai cũng biết: gỗ, sắt, gạch, xi măng... Và các ngôn ngữ tôi đã đề cập đối với việc xây dựng một website cũng giống như gạch, xi măng đối với việc xây dựng một căn nhà vậy.

Phần sau, tôi sẽ đề cập đến làm thế nào để có được những cái mình phải chuẩn bị trước?

Tạm thời tới đây thôi! Mai mốt việc tiếp!
Mong nhận được góp ý của bè bạn!

- bài viết từ 9 tháng 1 năm 2007 tiếc là solid ko viết tiếp nên coi như loạt bài viết này là 1 sự tiếp tục ---

[zmt264]

Thế nào là CSS ?
Mình xin trích bài từ 1 diễn đàn khác để các bạn đọc:
http://www2.uni-leipzig.de/~vietnam/...viewtopic&t=10

CSS là gì? Một câu hỏi đơn giản thôi mà khá khó để trả lời. Bạn có thể vào google.com và gõ cụm từ define: CSS sẽ cho ra vô vàn kết quả.

Khi thế giới web mới ra đời người ta thường dùng các thẻ HTML để dàn trang. Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để add text, add ảnh, kiểu chữ, màu sắc... Khi mà công nghệ web ngày càng phát triển người ta nhận thấy việc dàn trang bằng các bảng ngày càng trở nên bất tiện. Khối lượng mã HTML lớn cùng việc khó khăn trong kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế. Nếu bạn vào các website chuyên nghiệp của nước ngoài bạn sẽ việc dàn trang của họ hoàn toàn bằng các thẻ DIV của CSS mà không dùng các thẻ HTML, nếu có thì cũng rất ít.

Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv..). Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo. Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong web với màu khung màu xanh, đường viền bức ảnh là đường kẻ liền thì bạn có thể định nghĩa khung đó thành một kiểu, giả dụ đặt tên là "frame" đi. Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa. Cụ thể ở đây là gọi kiểu "frame".

Việc dàn trang bằng các thẻ DIV trên web là việc bạn phân vùng các khu vực trên trang web và gọi các kiểu xác định mà bạn đã định nghĩa trước. Thay vì việc dùng các bảng HTML bạn có thể dùng các thẻ DIV linh hoạt để phân hoạch các vùng khác nhau trên trang. Một thẻ
cũng giống như một phần của miếng ghép để tạo nên trang web hoàn thiện. Ưu điểm của các thẻ DIV là rất linh hoạt, các lớp có thể chồng lên nhau một phần hoặt nhiều phần. Đây là một điểm thú vị mà việc dàn trang bằng HTML không có được. Nhưng nhược điểm của CSS là việc kiểm soát chúng trên các trình duyệt web khác nhau khá khó khăn vì chính tính linh hoạt trên. Các trình duyệt hỗ trợ CSS đôi khi là khác nhau vì vậy nếu dàn trang không tốt thì việc hiển thị cực tệ. Nhưng bạn đừng lo, có khó khăn thì sẽ có người giải quyết khó khăn. Hiện nay tôi biết có một thứ gọi là hack CSS tức là giúp viết CSS hiển thị tốt trên các trình duyệt khác nhau. CSS không phải là một ngôn ngữ lập trình tới thời điểm này (theo tôi được biết).

Về tài liệu CSS thì khá nhiều trên mạng nhưng chủ yếu là bằng tiếng anh. Tôi còn nhớ khi tôi view source một trang web của nước ngoài mà không hề thấy một thẻ HTML tôi đã rú lên sao họ tài thế . Tôi đã lượn vòng khắp các diễn đàn của Việt Nam mong kiếm được quyển sách CSS nào bằng tiếng Việt nhưng mà vô vọng. Ở VN hiện nay tôi gần như là chưa thấy việc dàn trang hoàn toàn bằng CSS trên web mà vẫn sử dụng HTML kết hợp với CSS là chủ yếu. Để học CSS bây giờ chắc bạn phải biết tiếng anh rồi. Và thêm một điều nữa, hay down các trang web đã được dàn trang bằng CSS và các file .css về nghiên cứu, mày mò, trình độ của bạn sẽ tiến triển nhiều đấy. Tiếng anh của tôi rất kém và cũng không đủ thời gian để dịch sách cho các bạn. Google là một thế giới rộng lớn, hãy gõ từ learn CSS để tìm sách học. Tôi có một vài trang web khuyến cáo các bạn nên vào và đọc

[zmt264]

1 bài khác từ :
http://mauthietke.com/subject.asp?P_ID=183&PT_ID=100
10 lý do để dùng CSS:

1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng "hack" thẻ HTML để tạo hiệu quả cho website

Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.


2. Tăng tốc độ website.
Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.


3.Thời gian phát triển website nhanh hơn
Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.


4. Typography thể hiện ngầu hơn
CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ - tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.


5. Dễ viết
Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.


6.Khả năng phát triển.
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.


7. Thiết kế dành cho in ấn cũng đẹp như dành cho web.


CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint


8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.


9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.


10. Cải thiện vị trí trong các website tìm kiếm.


Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.

Nguồn http://www.sessions.edu/faculty/inte...ReasonsCSS.asp

[zmt264]

CSS ế ẩm quá nhỉ? chắc qua buôn hàng Flash, Video ... thôi, hic. Thảo nào dân mình Hạnh Phúc nhất thế giới. Toàn mải hưởng thụ hạnh thúc chẳng ai vào topic của mình

[3do]

bài viết hay lắm, nhất là mấy cái link làm trắc nghiệm

Điểm của tớ:

HTML: 19/20
XHTML: 14/20
CSS: 18/20

[3do]

bài viết hay lắm, nhất là mấy cái link làm trắc nghiệm

Điểm của tớ:

HTML: 19/20
XHTML: 14/20
CSS: 18/20

[all4country]

Tiếp tục đi bạn ơi, mình nghĩ có nhiều người vẫn theo dõi topic của bạn. Mình trắc nghiệm phần HTML được 14/20 thôi. Phần XHTML có lẽ để sau.

[zmt264]

cảm ơn hai bạn nha, hii, đúng là "không trò đố thầy dạy ai", hiii, mình lại có cảm hứng viết bài tiếp rồi. khổ thế, dạy miễn phí ko ai học, chắc phải thu tiền quá, có khi thu tiền anh em xót của mới chịu học nhờ .

[zmt264]

Về phần mềm sử dụng để soạn thảo CSS và HTML thì dùng notepad cũng được, nhưng mình khuyến khích dùng PSPad để soạn thảo (x)HTML và TopStyleLite để soạn CSS. Đây là những phần mềm khá tiện ích, đơn giản và miễn phí, những phần mềm này cũng có thể copy vào USB để dùng portable.

Download tại:
http://www.pspad.com/
và
http://www.bradsoft.com/topstyle/tslite/index.asp

Một chú ý nhỏ khi sử dụng tiếng Việt với PSPad, bạn có thể dùng Vietkey hoăc Unikey(miễn phí) soạn với mã Unicode dựng sẵn, nhưng nhớ vào menu Format > UTF-8 để chọn trước khi soạn thảo.

Chắc ăn hơn bạn vào luôn Settings > Program Settings > Program Behavior để xem dấu check ở indent.bytes in UTF-8 encoding có không, nếu có thì tốt nhất bạn bỏ chọn để tránh phần mềm viết thêm ký tự BOM vào đầu file.

Anh em cho hỏi, khi thiết kế web tiếng Việt, mình phải đặt <meta http-equiv='Contet-Type' content='text/html; charset=UTF-8'>, đúng không? Rồi vậy khi đó mình đánh tiếng Việt lên đó (bằng Unikey) với bảng mã nào? Unicode dựng sẵn hay UTF-8 Literature?
Tại vì trang web mà mình tập tành làm, khi Firefox chưa load hết trang web thì mình thấy hiện lên 3 ký tự BOM của UTF-8 rất vô duyên, mặc dù khi viết xong, mình save nó với tùy chọn format là 'UTF-8 without BOM'. tức là trong source thì đã bỏ BOM đi rồi, vậy mà Firefox lại lôi đâu ra mà làm hiện lên (nhưng khi load xong web thì không còn thấy nữa). Đó là lúc mình gõ chữ Việt bằng Unicode dựng sẵn.

Trả lời bạn như trên, lưu ý trong xHTML thì ko có dấu ' mà chỉ có "" thôi->câu này sai, theo JiSh@n .

đặt dòng sau vào trong cặp tag-head:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(các bạn có thể view source của chính ddth để xem ví dụ )

Cập nhật: Nếu bạn muốn 1 phần mềm mạnh mẽ hơn (và nặng nề hơn nữa, download khoảng 80MB), thì bạn có thể sử dụng Aptana xem sao? tôi cũng chưa dùng nó bao giờ, nhưng thấy anh bạn Huy có khoe bên 360 là dùng cho HTML, CSS và JS nên giới thiệu luôn, vào trang chủ của Ap-ta-na thấy nó quảng cáo cũng khá hoành tráng. Dùng mấy phần mềm kiểu này thì có lẽ việc debug sẽ thuận lợi hơn. Đây là một phần mềm Mã Nguồn Mở, tất nhiên là miễn phí )

Download Aptana tại:
http://www.aptana.com/download_all.php#windows