View Full Version : [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard
Về lợi ích của Web Standard các bạn có thể đọc tại đây (tiếng Việt):
http://hoctudau.com/?p=106
Về cách viết lập trình web dùng HTML, CSS sao cho tốt, cũng như việc học thiết kế web , việc viết code sao cho đúng chuẩn, các bạn có thể xem slide và clip rất chi tiết sau, slide (Tiếng Anh) và clip minh họa cho slide (Tiếng Việt): http://hoctudau.com/slides/html-css-best-practices/ (lưu ý là nội dung slide dành cho các bạn đã làm việc với CSS, đã biết CSS rồi), còn mới học hoặc chưa biết gì về HTML, CSS có thể xem các link và đọc các bài ở dưới
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/The_Business_Benefits_of_Web_Standards
Link trực tiếp đến các Clip:
- Căn bản HTML, CSS, Javascript, PHP & MySQL (dành cho người mới học):
http://www.youtube.com/watch?v=amnGHHU_F10
- Các nguyên tắc viết mã HTML, CSS dành cho người đã đi làm về HTML, CSS:
http://www.youtube.com/watch?v=dezJpRVI-oI
- jQuery cũng rất cần thiết cho người làm HTML, CSS:
http://www.youtube.com/watch?v=2GKRcXneVuk
Đâ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
http://my.opera.com/cssquestions/blog/mo-lop-day-xay-dung-web
http://my.opera.com/cssquestions/blog/lam-the-nao-de-tro-thanh-nha-thiet-ke-web-hay-nha-lap-trinh-web
http://my.opera.com/cssquestions/blog/2007/11/26/tai-sao-toi-thich-css
http://my.opera.com/cssquestions/blog/css-la-gi
http://my.opera.com/cssquestions/blog/toan-bo-kien-thuc-ve-html-xhtml
http://my.opera.com/cssquestions/blog/2007/07/27/ac-mong-css
http://my.opera.com/cssquestions/blog/44-cau-hoi-ve-chat-luong-cua-mot-trang-web-website-site
http://my.opera.com/cssquestions/blog/dua-nghich-voi-css
http://my.opera.com/cssquestions/blog/bai-viet-cho-ban-tr
http://my.opera.com/cssquestions/blog/trac-nghiem-ve-css-tieng-viet
http://my.opera.com/cssquestions/blog/trac-nghiem-tieng-viet-ve-html
http://my.opera.com/cssquestions/blog/trac-nghiem-xhtml-english
http://my.opera.com/cssquestions/blog/8-dieu-moi-la-voi-nguoi-moi-hoc-ve-css
http://my.opera.com/cssquestions/blog/dung-css-thay-cho-mot-so-thuoc-tinh-html-loi-thoi
http://my.opera.com/cssquestions/blog/6-giai-doan-hay-6-muc-do-cua-nguoi-hoc-css
http://my.opera.com/cssquestions/blog/2-ky-nang-quan-trong-nhat-doi-voi-nguoi-viet-web-bang-css
http://my.opera.com/cssquestions/blog/14-thu-thuat-tang-toc-website
http://my.opera.com/cssquestions/blog/8-thu-thu-thuat-ve-css
Thân chào các bạn. Chúc các bạn thành công
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).
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>
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.
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
Web cuối cùng của phần 1 sẽ có dạng như hình sau: hình đính kèm
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ụ" :D vào đọc cho vui thôi :P
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 ---
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/nuketube/modules.php?name=Forums&file=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
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/interviews/Schmitt_ReasonsCSS.asp
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
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
lol
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
lol
all4country
08-05-2007, 22:47
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.
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ờ :D .
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 :D.
đặ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
Trả lời bạn như trên, lưu ý trong xHTML thì ko có dấu ' mà chỉ có "" thôi.
Trong xml thì single quote (') hay double quote (") đều ok cả đấy bạn.
http://www.w3schools.com/xml/xml_attributes.asp
november
09-05-2007, 09:58
Chả có gì hữu ích cả, với ng` chưa biết chả có gì để thực tế, với ng` đã biết thì cũng chả giúp ích gì hơn. Mặc dù viết rất dài và có vẻ tâm huyết keke ...
november
09-05-2007, 10:00
nhảm nhí...............
nhảm nhí...............
Mod đâu rồi nhỉ :boxing:
Thanks jiSh@n nhé, hình như cậu cũng chơi với Sonny đúng ko :D, thấy link bên sonnymotives. Trình độ tớ cũng thường thôi nên nói đôi khi sai 1 chút :D, tại vì tớ lười đọc các loại sách và tài liệu lắm :D, đôi khi google chút thôi, có gì cứ nhắc nhở :D, thôi thì cứ mạnh dạn nói, chẳng bổ ngang cũng bổ dọc :D. Cảm ơn vào đây ủng hộ nhé.
còn với thành phần ko giúp đỡ gì mà cứ nói linh tinh hoặc chê bai mà lại ko làm được tốt hơn mình thì nhờ mod xử lý thôi :D, mod ko xử lý thì "mặc kệ chó sủa, đoàn người cứ tiến" , có câu như thế, chẳng biết tục ngữ, danh ngôn ở đâu nhỉ?
@november:
Dù sao thì cũng trả lời phát: người chưa biết thì sẽ có cái mà thực tế, còn người biết rồi thì cũng có sẽ có cái có ích đấy, cứ từ từ, calm down. Tớ cũng phải kiếm tiền chứ, thời gian đâu có nhiều mà suốt ngày post, cậu thích hàng xịn thì trả tiền cho tớ ngồi post cái "thực tế và có ích" nhé ? okie?
Ừa, cái vụ UTF-8, tớ về thử sửa lại xem sao, thanks.
@zmt264: tiếp đê bác, em ủng hộ hai tay ba chân lol lol
""" 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ờ .
Tôi đang chăm sóc 1 nhóm khoảng 20 + em Designer, và mong muốn các em có 1 nền tảng kiến thức thật vững về cấu trúc XHTML và nghệ thuật CSS2, chuẩn Web Standard, nhưng thực sự bây giờ có quá nhiều công việc khác nên quá ít thời gian để có thể dịch thuật và training như cách đây 1 năm.
Nếu zmt264 đang ở Sài Gòn thì xin được mời bạn 1 chầu cafe Trung Nguyên.
Trong xml thì single quote (') hay double quote (") đều ok cả đấy bạn.
http://www.w3schools.com/xml/xml_attributes.asp
Frexy nói đúng, vì Frexy đang nói về XML
Bạn kia cũng đúng vì bạn kia đang nói về XHTML
http://www.w3.org/TR/xhtml1/#h-4.4
Frexy nói đúng, vì Frexy đang nói về XML
Bạn kia cũng đúng vì bạn kia đang nói về XHTML
http://www.w3.org/TR/xhtml1/#h-4.4
Cái link của bạn ko có chỗ nào cho thấy chỉ double quote là valid trong xhtml cả :) Nên nhớ xhtml cũng là xml nên trước hết nó phải well-form xml cái đã.
4.4. Attribute values must always be quoted
All attribute values must be quoted, even those which appear to be numeric.
CORRECT: quoted attribute values
<td rowspan="3">
INCORRECT: unquoted attribute values
<td rowspan=3>
P/S: Tôi ko phải Frexy. Frexy là 1 team, ko phải 1 cá nhân :)
hii, thôi nói chung vấn đề thế nào là đúng sai ta tạm thời bỏ qua, mục đích topic cũng chỉ là làm sao biết dùng CSS để làm web thôi mà, càng gần với cách làm của các trang web nổi tiếng đúng chuẩn hiện nay như : alistapart hay csszengarden... càng tốt, chứ còn thế nào là đúng chuẩn ta xét sau :D.
Nhưng ta sẽ tạm thống nhất là sẽ chỉ dùng "nháy kép" (double quote) thôi :D vì đa số đều thế (ko tin viewsource :D)
""" 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ờ .
Tôi đang chăm sóc 1 nhóm khoảng 20 + em Designer, và mong muốn các em có 1 nền tảng kiến thức thật vững về cấu trúc XHTML và nghệ thuật CSS2, chuẩn Web Standard, nhưng thực sự bây giờ có quá nhiều công việc khác nên quá ít thời gian để có thể dịch thuật và training như cách đây 1 năm.
Nếu zmt264 đang ở Sài Gòn thì xin được mời bạn 1 chầu cafe Trung Nguyên.
@vter123:
Mình mới lên SG vài hôm, giờ lại về Kiên Giang rồi, nói chung con người phiêu lãng lúc chỗ này lúc chỗ khác, nếu bác muốn giao lưu với tớ thì PM nhé (nhớ "đính kèm" YM và SDT để tiện liên lạc), nói chung cái gì cá nhân thì PM , ko public tránh loãng chủ đề :D. Về vấn đề các Designer hiện nay ko nắm vững xHTML, CSS , WebStandard thì ta cũng bàn ở 1 topic khác :D, giá mà có 1 cuộc hội thảo về cái này thì tốt :D, ko biết có bác nào đủ khả năng tô chức event nhỉ? nếu có thì khối người quan tâm đấy.
Ý tửong về hội thảo (Event) tớ cũng mới nảy ra và lập riêng 1 topic cho nó:
http://www.ddth.com/showthread.php?p=731918#post731918
Mình cũng vừa gửi PM cho bạn.
vài điều mà các bạn quen thiết kế web chỉ bằng HTML có thể không biết về CSS: (những câu hỏi trong ngoặc vuông có thể khó hiểu, khó trả lời hoặc mơ hồ với bạn thì bạn có thể trả lời sau)
div và span (đặc biệt là div) là 2 loại tag "khác thường" được dùng trong trang web sử dụng CSS.
tag div và span có thể coi như những tag ngoại lệ. Trong khi những tag khác mỗi tag đều có 1 chức năng riêng (như tag h1, h2..tạo tiêu đề, tag b tạo chữ đậm ...) thì tag div và span lại có cách dùng rất linh động.
bạn có thể thay đổi chức năng vốn có của các tag bằng cách sử dụng CSS (ví dụ: tag a thường làm link có gạch chân, bạn có thể dùng CSS làm mất gạch chân đó đi; tag b vốn dùng để làm chữ in đậm, bạn có thể dùng CSS để bắt nó làm chữ gạch chân). [bạn có biết làm điều này ko?]
bạn có thể dùng tag div và tag span cùng với CSS để làm thay chức năng của hầu hết các tag khác (ví dụ: dùng tag span để làm chữ in đậm...). [bạn có biết làm điều này ko? tại sao người ta vẫn dùng cac tag khác như h1, h2, p, i, a ... mà ko sử dụng toàn div với lại span]
người ta sử dụng id hoặc class để chỉ định tag sẽ được áp dụng CSS. [bạn có biết lúc nào dùng id, lúc nào dùng class không? nếu chúng ta không khai báo id hoặc class mà vẫn viết css cho id hoặc class đó thì điều gì sẽ xảy ra?]
tag div tuân theo box-model (tạm dịch là mô hình hộp) và thường dùng để tạo layout cho web [sao lại ko dùng tag khác, như tag p, tag ul, chẳng hạn, dù những tag đó cũng tuân theo box-model?]
tag span dùng để định dạng (mark up) cho text [tại sao lại rất ít web dùng tag span?]
chức năng vốn có của các tag và cách làm việc của CSS trên các trình duyệt khác nhau có thể rất khác nhau.
bạn có thể dùng tag div và tag span cùng với CSS để làm thay chức năng của hầu hết các tag khác (ví dụ: dùng tag span để làm chữ in đậm...). [bạn có biết làm điều này ko? tại sao người ta vẫn dùng cac tag khác như h1, h2, p, i, a ... mà ko sử dụng toàn div với lại span]
Câu trả lời là SEO/SEM :)
người ta sử dụng id hoặc class để chỉ định tag sẽ được áp dụng CSS. [bạn có biết lúc nào dùng id, lúc nào dùng class không? nếu chúng ta không khai báo id hoặc class mà vẫn viết css cho id hoặc class đó thì điều gì sẽ xảy ra?]
Bản thân "id" và "class" đã cho biết nó phải được dùng như thế nào rồi.
tag div tuân theo box-model (tạm dịch là mô hình hộp) và thường dùng để tạo layout cho web [sao lại ko dùng tag khác, như tag p, tag ul, chẳng hạn, dù những tag đó cũng tuân theo box-model?]
Tabless thì dùng div còn divless thì dung ul,li...
tag span dùng để định dạng (mark up) cho text [tại sao lại rất ít web dùng tag span?]
span dùng để phân đoạn text trong 1 paragraph cơ :)
chức năng vốn có của các tag và cách làm việc của CSS trên các trình duyệt khác nhau có thể rất khác nhau.
Và khác nhau tùy vào DTD nữa :)
Span dùng để Markup là lấy idea từ
(The Only) Ten Things To Know About CSS
->
http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/
Đấy cũng là 1 bài đáng đọc (tiếng Anh). Đấy là những điều gần như là cơ bản nhất (must-have) về CSS, mình cũng ko đánh giá nó đúng hay sai mà khá là hữu ích.
Dù sao cũng cảm ơn (hình như cảm hơi nhiều thì phải , hắt xì ) jiSh@n vì đồng hành cùng mình :D
Vòng vo một hồi thì đúc kết là:
- Hiển thị đúng là được.
- PR 10 vẫn rất nhiều trang table-ful :D
Vòng vo một hồi thì đúc kết là:
- Hiển thị đúng là được.
- PR 10 vẫn rất nhiều trang table-ful :D
Vòng vo ở đâu vậy bạn? Dù thừa nhận những gì bạn nói nhưng vẫn muốn trích dẫn 1 câu "thửa" được từ web English: Lý do duy nhất để bạn ko dùng CSS là ... bạn ko biết nó.
Và ko nên nhầm CSS với Tableless, dùng CSS với table cũng tiện lợi.
CSS đã từng giúp mình rất nhiều trong việc "đối phó" với khách hàng. Ví dụ 1 ngày đẹp trời khách hàng kêu "tôi thích tất cả các đoạn văn bản giãn ra thêm khoảng 0.5 cm nữa, và tất cả các header chuyển thành màu xanh". Với 1 website chừng 200 pages, yêu cầu đó thực sự là 1 ác mộng với các WD dùng HTML only (và chưa nhận đầy đủ tiền :D ). Tất nhiên nếu chúng ta chủ động ứng dụng CSS ngay từ đầu thì bạn sẽ vẫn thấy đó là 1 ngày ... đẹp trời, dù có thể bạn sẽ thức khuya hơn mọi ngày 1 chút.
You're welcome.
Vòng vo một hồi thì đúc kết là:
- Hiển thị đúng là được.
- PR 10 vẫn rất nhiều trang table-ful :D
PR ko liên quan gì đến cách thức design ;)
Dear jishan, ở đây tôi nói là SEO/SEM, ko phải design! Vấn đề ở chỗ design đẹp thì mắt thấy chứ ko ai view source :)
Dear zmt, vòng vo trong ý nghĩ của tôi về mục đích CSS! Tôi ko nhầm CSS với tableless/divless. Ý ở 2 câu đó là chốt lại của tôi về tab(le)*2ss và SEO/SEM thôi!
Dear jishan, ở đây tôi nói là SEO/SEM, ko phải design! Vấn đề ở chỗ design đẹp thì mắt thấy chứ ko ai view source :)
Dear zmt, vòng vo trong ý nghĩ của tôi về mục đích CSS! Tôi ko nhầm CSS với tableless/divless. Ý ở 2 câu đó là chốt lại của tôi về tableless và SEO/SEM thôi!
Uh, thì topic này dành cho những người mới học, nên tớ cứ phải nói cụ thể ra thế cho rõ ràng. Chứ còn cũng có thể cậu là 1 chuyên gia về CSS cũng nên, ai mà bít được :D.
Nói chúng SEO/SEM gì đó là 1 phần công việc của WD thôi (nếu được yêu cầu), còn topic này đang bàn về design thuần túy, tức là làm sao áp dụng được CSS vào việc thiết kế web. Cho nên tự nhiên cậu nhảy vào chốt 2 câu như vậy (dù tớ cũng đã nói từ đầu là "thừa nhận", tức là công nhận cậu nói đúng) sẽ khiến người ta confuse, chẳng hiểu ý cậu là gì.
Dear jishan, ở đây tôi nói là SEO/SEM, ko phải design! Vấn đề ở chỗ design đẹp thì mắt thấy chứ ko ai view source :)
Dear zmt, vòng vo trong ý nghĩ của tôi về mục đích CSS! Tôi ko nhầm CSS với tableless/divless. Ý ở 2 câu đó là chốt lại của tôi về tab(le)*2ss và SEO/SEM thôi!
Theo tôi biết thì SEO ko ảnh hưởng nhiều đến PR. SEO chỉ nhằm mục đích đưa website lên đầu của search engine theo những keyword mong muốn, giúp SE index và crawl càng nhiều dữ liệu càng tốt. Trong khi đó, PR lại được tính theo tần suất truy cập của trang web cũng như mức độ phổ biến của nó.
Một website ko chú trọng đến SE friendly (SEO) nhưng có tần suất truy cập cao, được link đến từ rất nhiều nguồn thì vẫn có PR rất cao. Khi có PR cao nghĩa là link đến nó xuất hiện rất nhiều nơi trên net (SEM), lúc này SE sẽ rất dễ dàng tìm thấy trang web cho dù trang web đó vốn ko chú trọng đến SEO.
Thiết kế table, table-less, divless... đều ko ảnh hưởng nhiều đến PR nếu như mức độ phổ biến của nó quá thấp cho dù nó có SE friendly đến mức độ nào đi chăng nữa. Hơn nữa, thiết kế dùng CSS ko đồng nghĩa với table-less hay divless. Table-less chỉ là hướng thiết kế đưa <table> về với đúng chức năng vốn có của nó - hiển thị data dạng grid - hơn là để làm layout cho trang web.
Whaterver, cảm ơn bạn zmt :)
Dear bạn jishan,
Bạn có nghĩ là:
- PR là đánh giá cho khả năng SEO/SEM nói chung ko?
- Website traffic ít nhưng PR cao hơn website traffic cao?
Nếu có thì thảo luận tiếp :)
Whaterver, cảm ơn bạn zmt :)
Dear bạn jishan,
Bạn có nghĩ là:
- PR là đánh giá cho khả năng SEO/SEM nói chung ko?
- Website traffic ít nhưng PR cao hơn website traffic cao?
Nếu có thì thảo luận tiếp :)
Thảo luận tiếp cũng được mà tốt nhất là mở topic khác. Thế nhỉ :D.
Để tránh loãng chủ đề, tớ dịch cái quiz bên w3school về đây
1. CSS là viết tắt của?
Creative Style Sheets
Computer Style Sheets
Cascading Style Sheets
Colorful Style Sheets
2. Muốn liên kết xHTML với 1 file định nghĩa CSS ta dùng dòng nào sau đây?
<style src=”mystyle.css”>
<stylesheet>mystyle.css</stylesheet>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
3. đặt dòng liên kết với file CSS ở vùng nào trong file xHTML?
In the <body> section
In the <head> section
At the top of the document
At the end of the document
4. tag nào định nghĩa CSS ở ngay trong file xHTML?
<css>
<script>
<style>
5. thuộc tính nào định nghĩa CSS ngay trong 1 tag?
font
class
style
styles
6. dòng nào tuân theo đúng cú pháp của CSS?
body {color: black}
{body;color:black}
body:color=black
{body:color=black(body}
7. dòng nào thể hiện đúng một comment (lời chú thích) trong CSS?
/* this is a comment */
// this is a comment //
‘ this is a comment
// this is a comment
8. dòng nào dùng để thay đổi màu nền?
color:
bgcolor:
background-color:
9. làm thế nào thêm màu nền cho tất cả các phần tử <h1> ?
h1.all {background-color:#FFFFFF}
h1 {background-color:#FFFFFF}
all.h1 {background-color:#FFFFFF}
10. làm thế nào thay màu nền của chữ (text)?
text-color=
fgcolor:
color:
text-color:
11. thuộc tính nào thay đổi kích cỡ chữ?
font-style
font-size
text-style
text-size
12. thuộc tính nào làm chữ trong tag p trở thành chữ đậm?
p {text-size:bold}
<p style=”font-size:bold”>
<p style=”text-size:bold”>
p {font-weight:bold}
13. làm sao để hiển thị liên kết mà ko có gạch chân bên dưới?
a {decoration:no underline}
a {text-decoration:no underline}
a {underline:none}
a {text-decoration:none}
14. làm sao để mỗi từ trong 1 dòng đều viết hoa ở đầu từ?
text-transform:capitalize
text-transform:uppercase
You can’t do that with CSS
15. làm sao để thay đổi font của mỗi phần tử?
font=
f:
font-family:
16. làm sao để tạo chữ đậm?
font-weight:bold
style:bold
font:b
17. làm thế nào để hiển thị viền 1 phần tử với kích thước đường viền như sau:
The top border = 10 pixels
The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel?
border-width:5px 20px 10px 1px
border-width:10px 5px 20px 1px
border-width:10px 1px 5px 20px
border-width:10px 20px 5px 1px
18. làm sao để thay đổi lề trái của một phần tử?
margin-left:
text-indent:
margin:
indent:
19. để định nghĩa khoảng trống giữa các cạnh (viền) của phần tử và nội dung, bạn sử dụng thuộc tính padding, có thể gán giá trị âm cho thuộc tính này không?
Yes
No
20. làm thế nào để hình ở đầu mỗi dòng của 1 list (danh sách) có hình vuông?
type: 2
type: square
list-type: square
list-style-type: square
november
12-05-2007, 14:53
Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------
Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........
-----------------------------
Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.
----------------------------
Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.
Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------
Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........
-----------------------------
Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.
----------------------------
Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.
@Tháng 11:
Mình ko trả lời các câu hỏi của bạn vì các câu trả lời đã có ở phần trên, ko cần search trong gu gồ làm gì cho nó rắc rối đâu. Có lẽ mình ko cần chỉ ra cụ thể ở phần nào, vì mình ko thích các tranh luận trong topic, nếu bạn muốn ta có thể tranh luận qua PM hoặc YM.
Còn chuyện khoe kiến thức thì dù sao vẫn tốt hơn là hide kiến thức. Mình nghĩ bạn nên chia sẻ kiến thức của bạn, chắc chắn là mọi người đều có hứng thú (nói thật chứ ko khoe kiến thức thì sao biết kiến thức đó là đúng hay sai), chắc chắn mọi người sẽ hoan nghênh việc bạn share kiến thức hơn là bạn spam 1 câu dạng như "nhảm nhí" , phải thế ko?
Tóm lại nhắc bạn 3 việc
1) bạn nên tập trung vào việc khoe (hay chia sẻ) kiến thức của bạn theo nội dung topic. Nên nhớ topic ko nói về việc dùng CSS tạo web without table...vv...
2) về lợi ích của CSS thì ai thấy nó lợi thì tự tìm hiểu, ko thích thì thôi :), chẳng ai bắt học
3) cứ từ từ, topic vẫn đang được post tiếp, nếu bạn hứng thú thì sang bên blog tiếng Anh, bên đó dài hơn 1 chút và có 1 bạn đang học 1 cách nghiêm túc mà ko hề cho là mình nhảm nhí. mình ko hiểu bạn chỉ trích mình cái gì? mình nói dài quá chăng? phải chăng nên tóm tắt lại thành vài dòng? bạn có thể tạo ra 1 topic bổ ích hơn ko?
Nên nhớ ngay từ đầu topic mình đã yêu cầu các bạn tham gia topic này làm trắc nghiệm và mình KHÔNG TRẢ LỜI NHỮNG AI KHÔNG THAM GIA TRẮC NGHIỆM. tại sao vậy?
1) vì điều đó đảm bảo bạn là người thực sự có nhu cầu tìm hiểu
2) mình biết được trình độ của bạn. Nếu bạn quá kém thì ko nên tham gia topic, còn nếu quá giỏi thì có thể tham gia dưới góc độ 1 người tư vấn chứ ko nên kiểu như đi qua lớp học rồi buông ra 1 câu kiểu như "nhảm nhí" hoặc "ông này nói chán quá" như thế. Chán thì cụ thể chán thế nào, và nên cải tiến thế nào?
@bạn tháng-11:
Nếu cậu thích nói về CSS tableless có lợi gì, làm thế nào...vv... thì cậu lập 1 topic mới đi :). Mình cũng đang chờ một điều đó mới hơn điều mà các ebook dạy về CSS đã nói.
Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------
Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........
-----------------------------
Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.
----------------------------
Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.
Nếu chỉ "cảm thấy" và "đoán thế" thì đừng cố tỏ ra ta đây am tường tất cả. Đọc những bài viết của zmt264 mà không phân biệt được "khoe" và "chia sẻ" thì thiết nghĩ bác nên học thêm cách sử dụng từ ngữ đi :bb:
november
13-05-2007, 13:02
OK! Mình sẽ ko tranh luận nhiều vấn đề ngoài lề để tránh loãng survey topic này của bạn. Chỉ có điều cái tên topic " [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard " đã hấp dẫn mình, nhưng hơi thất vọng vì tiêu chí viết bài của bạn.
Share kiến thức ko ai bảo ko tốt, ko share thì gọi gì là 4rum.
Nhưng. Nếu bạn share với phương diện khác sẽ hấp dẫn hơn. Thực sự sorry mọi người vì mình chưa viết nhiều bài hữu ích (chưa sắp được tg,nhà mình mới sinh cháu :D) Chẳng hạn bạn đã mất công tạo topic thì share:
1. Kinh nghiệm dùng CSS.
Chẳng hạn: Từ khi design layout trên PS mình chuyển sang CSS ra sao.
>>> Với mình: Ko dùng tool của PS hay Image Ready vì nó tạo ra css với vị trí tuyệt đối rất khó dùng. Nên tạo khung cột bằng css trước. sau đó ném banner, bgr vào từng vị trí đã đo được trên PS.
Phần mềm viết thì tùy từng người nhưng Dreamweaver CS3 đã hỗ trợ tốt hơn CSS. Tuy nhiên preview trong Dreamweaver nhiều khi khác so với trình duyệt. Đây là lỗi của Dreamweaver và cả lỗi của ng` tạo CSS....
2. Kinh nghiệm test CSS.
Khi test nên test trên tối thiểu 3 trình duyệt: Firefox, IE, Opera. Opera, IE7 khá gần Firefox, Firefox tạm coi là chuẩn hơn cả. Nhưng nên test trên cả IE7 & IE6 (có tool cài version IE7& 6 chạy đồng thời trên Windows).
Tốt nhất nên cài extension trên Firefox, bộ developer vì hỗ trợ rất nhiều việc viết CSS. Mình sẽ up ảnh màn hình với các tool ko thể thiếu với CSS coder (cứ tạm gọi là coder, mặc dù ko đúng là coder), và một số extension khác mình làm việc dễ dàng hơn nhiều.
3. Kinh nghiệm hack CSS: For Opera, Firfox, IE, IE7 ....
...
Đấy là quan điểm của mình. Cái gì thực tế cũng sẽ hấp dẫn ng` đọc hơn bạn ạ. Chứ tuto trên mạng cũng nhiều lắm, cái dân design mình thiếu là share kinh no cơ. Mà nếu bạn viết tuto tiếng việt hoàn chỉnh về viết code cũng hoan nghênh hơn là trình bày lý thuyết abc ra :D
OK! Mình sẽ ko tranh luận nhiều vấn đề ngoài lề để tránh loãng survey topic này của bạn. Chỉ có điều cái tên topic " [TUTOR] Học thiết kế web sử dụng CSS theo đúng tiêu chuẩn Web Standard " đã hấp dẫn mình, nhưng hơi thất vọng vì tiêu chí viết bài của bạn.
Share kiến thức ko ai bảo ko tốt, ko share thì gọi gì là 4rum.
Nhưng. Nếu bạn share với phương diện khác sẽ hấp dẫn hơn. Thực sự sorry mọi người vì mình chưa viết nhiều bài hữu ích (chưa sắp được tg,nhà mình mới sinh cháu :D) Chẳng hạn bạn đã mất công tạo topic thì share:
1. Kinh nghiệm dùng CSS.
Chẳng hạn: Từ khi design layout trên PS mình chuyển sang CSS ra sao.
>>> Với mình: Ko dùng tool của PS hay Image Ready vì nó tạo ra css với vị trí tuyệt đối rất khó dùng. Nên tạo khung cột bằng css trước. sau đó ném banner, bgr vào từng vị trí đã đo được trên PS.
Phần mềm viết thì tùy từng người nhưng Dreamweaver CS3 đã hỗ trợ tốt hơn CSS. Tuy nhiên preview trong Dreamweaver nhiều khi khác so với trình duyệt. Đây là lỗi của Dreamweaver và cả lỗi của ng` tạo CSS....
2. Kinh nghiệm test CSS.
Khi test nên test trên tối thiểu 3 trình duyệt: Firefox, IE, Opera. Opera, IE7 khá gần Firefox, Firefox tạm coi là chuẩn hơn cả. Nhưng nên test trên cả IE7 & IE6 (có tool cài version IE7& 6 chạy đồng thời trên Windows).
Tốt nhất nên cài extension trên Firefox, bộ developer vì hỗ trợ rất nhiều việc viết CSS. Mình sẽ up ảnh màn hình với các tool ko thể thiếu với CSS coder (cứ tạm gọi là coder, mặc dù ko đúng là coder), và một số extension khác mình làm việc dễ dàng hơn nhiều.
3. Kinh nghiệm hack CSS: For Opera, Firfox, IE, IE7 ....
...
Đấy là quan điểm của mình. Cái gì thực tế cũng sẽ hấp dẫn ng` đọc hơn bạn ạ. Chứ tuto trên mạng cũng nhiều lắm, cái dân design mình thiếu là share kinh no cơ. Mà nếu bạn viết tuto tiếng việt hoàn chỉnh về viết code cũng hoan nghênh hơn là trình bày lý thuyết abc ra :D
Bạn thất vọng cũng là bình thường thôi, topic này chỉ dành cho người mới học :), nên phải dẫn dắt từ từ, có ai sinh ra 1 cái là đi thi ĐH luôn đâu, phải học lớp 1, lớp 2, ... lớp 12, rồi TN phổ thông mới thi được chứ (ở Việt Nam). Hiện nay số người quan tâm quá ít, mới có 2 bạn, nên mình ko thể post quá nhanh được sẽ phiền cho những bạn vào sau. Hiện topic đang ở giai đoạn "lớp 1" nên có thể làm cho 1 số bạn có tài năng "trên lớp 1" như bạn cảm thấy sốt ruột.
Thực sự mình muốn tổ chức topic này như một lớp học, mọi người vào trả lời câu hỏi và qua quá trình động não đó tiếp thu dần dần. Đây có lẽ là sự khác biệt về quan điểm tạo topic giữa tôi và bạn. Có lẽ bạn thích 1 topic về chia sẻ kinh nghiệm thực tế hơn vì mọi người cần nó hơn (thú thực tôi cũng ko rõ là những ai cần), bản thân topic này cũng khá đìu hiu nên có lẽ tạm thời tôi cũng gác lại đợi đông người hơn chút, và start 1 chủ đề khác "đắt khách" hơn ở 1 nơi khác :) . Điều này có nghĩa là tốc độ post bài sẽ chậm đi 1 chút. Tầm vài ngày 1 bài và bài sau sẽ ko mới mẻ hơn bài trước nhiều :).
Về những vấn đề bạn nói thì có lẽ vấn đề Hacks chưa nên nói ra sớm vì nó quá "cao" so với newbie, ngoài ra thì người ta cũng không khuyến khích việc dùng Hacks, việc thiết kế phù hợp với mọi trình duyệt phải được tính ngay từ đầu, nói chung là hạn chế tối đa việc dùng Hacks (đây được coi là 1 trong 10 điều người dùng CSS phải biết). Vấn đề này tôi đã lập 1 topic riêng trong forum mà cũng ko ai vào "chia sẻ" hoặc thắc mắc gì cả :). http://www.ddth.com/showthread.php?t=119871
còn về vấn đề dùng các Firefox Extension hữu ích như Firebug, Web Developer, mình cũng đã chuẩn bị 1 số hình về Web Developer mà chưa kịp đưa lên, hoặc vấn đề chuyển layout PS sang dùng CSS thì mình rất hoan nghênh bạn giúp mình. Nếu bạn tham khảo 1 số bài viết trên mạng (English) về chủ đề đó thì có lẽ tốt hơn vì theo mình thì đã có 1 số bài viết về 2 cái đó, đặc biệt là về vấn đề chuyển layout PS sang dùng CSS.
Whaterver, cảm ơn bạn zmt :)
Dear bạn jishan,
Bạn có nghĩ là:
- PR là đánh giá cho khả năng SEO/SEM nói chung ko?
- Website traffic ít nhưng PR cao hơn website traffic cao?
Nếu có thì thảo luận tiếp :)
Tôi thì lại nghĩ PR chỉ 1 phần thể hiện mức độ SEM, ko có SEO :)
Quá nhảm, theo dõi 3 trang với các bài viết mà chả có ích gì cả, cảm thấy 1 vài ng` khoe kiến thức (?).
Chỉ hỏi 1, 2 câu:
Tại sao dùng CSS with out table ?
Dùng có lợi gì ?
Dùng thế nào?
-----------------------------
Sẽ có ng` hô hô trả lời (có thể sau khi google) : Dùng CSS sẽ thiết kế chuẩn hơn (?) nhanh hơn (?) theo xu thế web2 (?) .........
-----------------------------
Nếu bạn nắm rõ CSS bạn có thế trả lời câu hỏi trên một cách nghiêm túc nhất với kinh nghiệm của các bạn.
----------------------------
Một cách dùng CSS mà fải tới 98% ng` thiết kế web ở VN(đoán thế) ko biết và ko nghĩ tới khi dùng CSS, mà đây mới là con át chủ bài của CSS. Mình sẽ share kinh nghiệm nếu các bạn hứng thú.
Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.
Hãy xem W3C nói gì về table:
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
Điều này có nghĩa là table dùng để hiển thị dữ liệu dạng lưới.
Còn div:
The <div> tag defines a division/section in a document.
DIV elements can be used to structure HTML documents as a hierarchy of divisions.
Rõ ràng div mới là thứ thích hợp cho việc phân layout hơn là table. Thiết kế table-less ko hề có nghĩa khai tử <table>, chỉ đơn giản là đưa nó về đúng với chức năng của mình.
Riêng thiết kế divless thì tôi lại ko thích lắm. Nó lại lạm dụng tính năng của ul,li..., bắt buộc chúng thực hiện tính năng ko phải vốn có của mình.
november
14-05-2007, 09:42
Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>...</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.
Hãy xem W3C nói gì về table:
Điều này có nghĩa là table dùng để hiển thị dữ liệu dạng lưới.
Còn div:
Rõ ràng div mới là thứ thích hợp cho việc phân layout hơn là table. Thiết kế table-less ko hề có nghĩa khai tử <table>, chỉ đơn giản là đưa nó về đúng với chức năng của mình.
Riêng thiết kế divless thì tôi lại ko thích lắm. Nó lại lạm dụng tính năng của ul,li..., bắt buộc chúng thực hiện tính năng ko phải vốn có của mình.
OK! Bạn nói đúng với kỹ thuật của CSS. Cái mình muốn nói tới đó chính là sự tái sử dụng và có thể đóng gói :D. Điều ko tưởng của web designer trở thành sự thật :D
@all:
Ý tớ là ngay cả một người mới tập tành học thiết kế web (newbies) cũng nên tiếp cận ngay với Web Standard, chứ ko phải đợi người ta quen làm sai chuẩn rồi mới sửa lại, tớ cũng quen mấy em 9x, các em ý chỉ thích thấy thằng web khác có cái gì thì học lại bằng được chứ chẳng quan tâm đến chuẩn đâu, rồi sau này mấy em đó sẽ quen với những trang web bung bét kiểu đó, đấy là 1 trong những ví dụ... tất nhiên có thể các em đó chỉ nghịch web cho vui như 1 trò chơi, nhưng với những ai có định hướng thành web designer thì nên định hướng từ đầu, ví dụ mình có thằng em mới học lớp 8, nó cũng thiết kế web khá "chuẩn" vì mình luôn bên cạnh nó nên cũng có ảnh hưởng.
topic này mới đầu lập nên với ý định dành cho những bạn mới học như thế, nhưng bây giờ mình thay đổi lại chút là: những bạn mới học vui lòng vào blog cho nó khỏi loãng chủ đề, còn anh em ta cứ việc tiếp tục tranh luận tùy thích về Web Standard.
@tháng 11:
cái mà bạn đề cập rất hay, thú thực là mình rất quan tâm đến việc tái sử dụng trong CSS, ví dụ khi ta đã thiết kế 1 cái menu thì làm sao có thể ap dụng nó vào nhiều web khác nhau 1 cách dễ dàng...bạn có thể nói rõ hơn ko? mình thấy bạn nói gì là toàn bỏ dở thôi :P hay là busy quá :D.
Còn khái niệm đóng gói (trong CSS) thì mình ko hiểu rõ lắm :)
november
14-05-2007, 13:11
Mình làm thiết kế nên rất cú "bọn" lập trình (mặc dù cùng 1 đội :D). Vì "chúng nó" code sử dụng các hàm các lớp và sử dụng lại, hay là xây dựng core để lập trình chỉ việc "gọi" và dùng. Thế nên mới có chuyện có project làm trong 3 ngày :D. Còn mình thì sao? fair design trên PS rồi khốn khổ chuyển sang CSS rồi lại chạy theo "chúng nó" để fix vì ko bao giờ có chuyện code ko làm sai css :D.
Nhưng chúng ta có thể dùng CSS và sử dụng lại được. Layout của web chỉ quay quanh: 2 cột, 3 cột, các khối nội dung và cách bố trí banner, navigator, category, submenu. Vì vậy layout là có thể đóng chết :D. Còn các khối nội dung mình viết tách rời css như vậy ném đâu cũng được rồi, sử dụng lại chỉ việc thay cái bgr là ok. Cái quan trọng là cấu trúc css của ta phải thuận tiện cho việc sửa đổi từng thành phần và nâng cấp toàn bộ site. Thêm bớt 1 khối ko ảnh hưởng layout. Và thay đổi diện tích các khối cũng ko bị vỡ layout.
Tiên tiến hơn nữa là có thể di chuyển các khối và lưu lại vị trí này. (Sử dụng javascrip - ajax) Như vậy design sẽ đúng là WYSIWYG :D
november
14-05-2007, 13:17
Ý tưởng là vậy. Các bạn hãy cứ làm và chúng ta sẽ trao đổi vấn đề cụ thể của việc xây dựng css.Mình quan tâm đến cái CSS with out table ko lâu lắm (khoảng 3 năm gần đây), trước đây mới chỉ biết dùng CSS vào việc định dạng màu sắc cho web. Nhưng thế giới cũng ko đi xa hơn chúng ta nhiều đâu, họ mới kỷ niệm 10 năm CSS-web standard thôi mà :D.
Mình dùng vẫn hãi nhất vấn đề hacks. Rất khó kiểm soát chúng :(
@tháng 11:
Bạn nói sẽ có bài hướng dẫn làm CSS layout từ PS và hướng dẫn dùng Firefox Extension mà chưa thấy viết gì vậy? rồi cả vấn đề "đóng gói", hay "tách rời" CSS nữa?....
Còn cái hack thì bỏ qua đi, ở đây khỏi bàn :D
ôi, chán quá, bác Tháng 11 lặn mất tiêu chẳng chịu viết bài gì, thôi copy cái bài từ blog sang đây để up cái topic lên vậy:
Tất nhiên các "cao thủ" về CSS có thể có nhiều ý kiến khác nhau về vấn đề này, nhưng theo tôi thì 2 kỹ năng (hay khả năng) quan trong nhất là.
1. Đặt tên cho các id trong trang web.
Chuyện đặt tên mới nghĩ thì có vẻ đơn giản và không quan trong (vì về nguyên tắc thì cho dù bạn đặt tên id là gì cũng được, miễn là viết xHTML và CSS hợp lệ), nhưng thực ra nó rất quan trọng, để làm tốt thì cũng đơn giản thôi, nhưng các bạn phải hiểu rõ về cấu tạo một trang web, và đặt tên id tương ứng với chức năng của các thành phần đó. Các id thường dùng là:
+ header dành cho phần trên của các web
+ container dành cho phần chứa các phần thân (phần chính) của trang web
+ trong container chứa nội dung: id -> content, sidebar
+ footer dành cho phần cuối cùng của trang web.
Về "nghệ thuật" đặt tên bạn có thể tham khảo các tài liệu viết về CSS. (tôi sẽ liệt kê danh sách 1 số sách cũng như trang web để tra cứu về CSS trong bài tới, đồng thời cũng liệt kê các trang web "đúng chuẩn" để các bạn view source và so sánh với những gì đã đọc được)
Nói rộng ra thì: kể cả trong lập trình, tổ chức sắp xếp file, hay là sinh con, học tập ... thì đặt tên cũng là 1 việc quan trọng, nhỉ
2. Đọc hiểu CSS của các trang web khác, bằng việc này bạn sẽ học hỏi được rất nhiều qua thực tế, vì đọc sách chỉ là điểm khởi đầu, còn học hỏi từ người khác và tự mình bắt tay vào làm việc mới nâng cao trình độ của bạn nhiều.
Nói rộng ra thì: đọc sách cũng có vai trò nhất định của nó nhưng bản thân tôi đánh giá cao việc xem người khác làm và tự rút ra kết luận hơn, sách chỉ đóng vai trò giúp ta hệ thống hoá những gì ta thấy (quan sát) mà thôi (à, câu này thì tôi áp dụng cho mọi thứ chứ ko riêng gì việc học CSS, hì )
Khi bạn đọc file css của trang web nào đó, bạn phải hiểu từng dòng có nghĩa là gì, tại sao họ lại làm thế, tất nhiên cũng đôi khi thật khó mà hiểu ý đồ của họ, lúc đó thì có lẽ các forum về tin học hay là chính blog này là nơi bạn có thể ghé thăm và thắc mắc những câu hỏi "hóc".
Có lẽ sắp tới tôi cũng sẽ làm 1 phần mềm (1 đoạn script thì đúng hơn) cho phép ngưòi dùng viết CSS bằng tiếng Việt, nếu họ muốn , hoặc là thêm các minh hoạ chức năng vào file CSS để người dùng dễ hiểu hơn), các bạn có hoan nghênh ý tưởng này ko ???
vh_moriator
22-05-2007, 18:19
Bạn ơi cho hỏi có tài liệu nào dùng để tham khảo nhanh CSS không? Mình đang học CSS nhưng nó có nhiều thuộc tính quá.
Nó không nhiều thuộc tính đâu (nếu so với các ngôn ngữ lập trình chẳng hạn :) )
Tuy nhiên nếu bạn muốn học nhanh các thuộc tính và có cái nhìn tông thể về CSS thì có thể google: css cheatsheet
http://www.google.com.vn/search?hl=vi&q=css+cheatsheet&meta=
=> ví dụ:
http://home.tampabay.rr.com/bmerkey/cheatsheet.htm
Như ta thấy, chỉ có tổng thể khoảng 30 thuộc tính (tôi đếm qua) cần nhớ, còn lại thì bạn cũng có sự trợ giúp của Editor (ví dụ DW, Topstyle, Aptana...).
november
23-05-2007, 11:41
Sorry vì mình reply chậm. Dạo này chưa sắp được tg. Mình up tạm lên đây màn hình của firefox khi mà mình vẫn sử dụng để debug.
Các add-on được sử dụng để phục vụ CSS ở đây là:
CSS Viewer (dùng cực cool, di chuột đến đâu CSS properties hiển thị chi tiết đến đấy :D )
Edit CSS (rất ít dùng, edit trực tiếp trong cửa sổ firefox)
Firebug (hiển thị code theo block và debug code)
IE Tab ( chuyển đổi Firefox sang IE, tool ko thể thiếu)
Developer toolbar( Tool số 1, rất nhiều tiện ích, mình hay dùng thường xuyên nhất chức năng hiển thị theo block, như hình kèm theo là các khối xanh đỏ, và tên ID, class, ngoài ra còn có ruler, line guides ... kèm theo)
-------
Ngoài ra có thể dùng một số add-on khác: Imagezoom, Dalivator (check xem XHTML có theo chuẩn ko), View Source Chart ....
-------
Đấy là add-on của FF. Mình sẽ up tiếp màn hình làm việc của mình khi debug và khi viết code (chia màn hình làm việc ra sao). Sorry nếu chậm trễ nhé :D
november
23-05-2007, 15:56
S**t cái 4rum này upload ảnh chuối quá. Sẽ update!!!
S**t cái 4rum này upload ảnh chuối quá. Sẽ update!!!
Mình thấy chức năng upload ở đây chẳng có vấn đề gì, hoặc cậu có thể thử 1 phương pháp khác như upload sang my.opera.com chẳng hạn (đầu tư 1 phút đăng ký),upload image trên blog đó khá tiện lợi ...
Về mấy cái Extension (hay Add-on) cậu nêu thì hồi xưa mình hay dùng Web Developer và Firebug, sau đó dùng mỗi Firebug, giờ thì cũng ít dùng cà Firebug luôn.
Topic hay quá. Hôm nay mình mới được biết đến nên không được tham gia ngay từ đầu. Mình cũng theo đuổi Web Standard nhưng đọc bài của bạn mình vẫn thấy bổ ích.
Trên blog của mình cũng viết 1 bài tutorial nhỏ về Convert 1 layout sang layout html & css. Bạn nào muốn tìm hiểu thêm thì xem địa chỉ dưới sign nhé.
november
24-05-2007, 12:09
http://www.mezimages.com/up/05/139250-screen.gif
november
24-05-2007, 12:11
hihi!
Tùy thuộc mỗi người làm việc sao cho hiệu quả nhất. Đó là cách mình thấy khá tiện lợi khi làm việc với trình duyệt. Nhìn vào là debug được, vì mình cũng thường xuyên làm với template của opensource nên hay re-design css lắm :D
nvquanghuy
25-05-2007, 23:07
Xin chào anh,
cho em hỏi câu hỏi này: việc chuyển sang dùng WaSP đang và sẽ là xu hướng của web dev. Nhưng em thấy việc chuyển web sang dạng tabless đối với những lập trình viên PHP, ASP, JSP,... thì rất tiện (vì toàn bộ code (x)HTML là họ tự build). Nhưng còn đối với dân ASP.NET thì họ toàn xài webcontrol built-in, nếu vậy làm thế nào có thể xây dựng website chuẩn Web Standards dc ạ ?
Có tí thắc mắc, mong anh giải đáp giúp :)
Một công cụ nên có nữa là HTML Validator. Công cụ này sẽ validate (offline) mã (X)HTML để đảm bảo ko có lỗi nào. Chỉ cần icon của nó chuyển sang màu xanh thì bạn đã yên tâm là website của mình hợp chuẩn W3C.
Một công cụ nên có nữa là HTML Validator. Công cụ này sẽ validate (offline) mã (X)HTML để đảm bảo ko có lỗi nào. Chỉ cần icon của nó chuyển sang màu xanh thì bạn đã yên tâm là website của mình hợp chuẩn W3C.
Bạn sử dụng tool nào để offline Validate? mình dùng mỗi Aptana.
Bạn sử dụng tool nào để offline Validate? mình dùng mỗi Aptana.
Extension HTML Validator cho FireFox, tích hợp Tidy, SGML và ****** Parser, tự động validate khi load web nên có thê validate offiline.
livehanoi
26-05-2007, 12:14
Cảm ơn bạn zmt264 rất nhiều, mình cũng đang tim hiểu về CSS.
Thanks a lot
nvquanghuy
27-05-2007, 08:49
Xin chào anh,
cho em hỏi câu hỏi này: việc chuyển sang dùng WaSP đang và sẽ là xu hướng của web dev. Nhưng em thấy việc chuyển web sang dạng tabless đối với những lập trình viên PHP, ASP, JSP,... thì rất tiện (vì toàn bộ code (x)HTML là họ tự build). Nhưng còn đối với dân ASP.NET thì họ toàn xài webcontrol built-in, nếu vậy làm thế nào có thể xây dựng website chuẩn Web Standards dc ạ ?
Có tí thắc mắc, mong anh giải đáp giúp :)
Hic sao không ai trả lời em vậy ? :(
Hic sao không ai trả lời em vậy ? :(
Không biết trả lời là bình thường thôi mà, hoặc là người ta ko biết câu trả lời, hoặc là không muốn trả lời (hoặc cả hai). Thế suốt từ hôm đó đến giờ tìm ra câu trả lời chưa?
Xin cám ơn những bài viết của bạn. Mình biết là design với CSS sẽ có những lúc cho kết quả khác nhau trên FF, IE... Vậy có cách nào để giảm thiểu sự khác nhau đó kô?
Thiết kế theo tiêu chuẩn W3C để đảm bảo trên FF/Opera/Safari và viết CSS hack cho IE
google, yahoo có cái nào chuẩn kg ? kg hề
sửa cho chuẩn có dễ kg ? quá dễ
sao họ kg làm ? nhảm nhí. thời gian đấy để làm việc khác.
google, yahoo có cái nào chuẩn kg ? kg hề
sửa cho chuẩn có dễ kg ? quá dễ
sao họ kg làm ? nhảm nhí. thời gian đấy để làm việc khác.
Rất nhiều người có chung Ý kiến với bạn đấy, ví dụ:
http://friendlybit.com/html/why-xhtml-is-a-bad-idea/
XHTML is bad idea!
yahoo, google, hay là gần đây : myspace ....
Còn ý kiến của tôi thì sao? Tôi ủng hộ Chuẩn Web! Vì sao? Vì tôi thích. :D. Tôi tư duy theo kiểu 1 lập trình viên.
Nhưng cũng 1 lần nữa lưu ý: dù họ ko chuẩn nhưng họ vẫn dùng CSS và DOM :). Ngoài ra, biết mà vẫn không làm thì khác với không biết làm. Mình đồng ý với ý kiến của bạn, nhưng ở đây là "Học Làm Web theo Đúng Chuẩn" (để nếu khách hàng yêu cầu thì ta chiều ý thượng đế:D, còn họ ko yêu cầu làm đúng chuẩn thì ta cắt PS cho nó nhanh, hay nhanh hơn nữa là sài template, ví dụ thế), còn dưới góc độ có thêm 1 công cụ làm việc thì cũng nên học, nên nhớ 1 trang web làm đúng chuẩn bao giờ cũng đắt hơn. Còn nếu bạn tự làm cho mình, thì tùy bạn cân nhắc thôi, cái gì nó cũng có 2 mặt của nó.
Xin cám ơn những bài viết của bạn. Mình biết là design với CSS sẽ có những lúc cho kết quả khác nhau trên FF, IE.
Chủ yếu là hack box-model của IE thôi, còn những cái khác thì cố gắng dùng những thuộc tính CSS mà được các trình duyệt "đối xử" giống nhau. Box-model thì là linh hồn của CSS rồi nên ko tránh được :). Anyway, hack is stupid :D, I hate hack and avoid it.
Cám ơn các bạn. Mình muốn hỏi thêm chỗ này
font: 100%/1.5 arial, helvetica, sans-serif;
100%/1.5 có ý nghĩa gì vậy?
Nhiều lúc trong 1 selector xác định size vừa dùng %, vừa dùng px... Mình thấy bối rối quá. Tại sao lại như thế mà kô thống nhất cùng 1 đơn vị thôi?
Cám ơn các bạn. Mình muốn hỏi thêm chỗ này
font: 100%/1.5 arial, helvetica, sans-serif;
100%/1.5 có ý nghĩa gì vậy?
Nhiều lúc trong 1 selector xác định size vừa dùng %, vừa dùng px... Mình thấy bối rối quá. Tại sao lại như thế mà kô thống nhất cùng 1 đơn vị thôi?
Xin lỗi vì tớ không biết trả lời thế nào, hi vọng sẽ có bạn khác trả lời hoặc bạn đọc sách đi :D, tớ thấy nhiều sách và blog nói về cái này
Tuy nhiên cũng nên google 1 chút (keyword: px em - chẳng hạn), vừa gúc xong và ra cái này:
http://www.bigbaer.com/css_tutorials/css_font_size.htm
Bài viết mới của tớ trên blog:
http://my.opera.com/cssquestions/blog/6-giai-doan-hay-6-muc-do-cua-nguoi-hoc-css
Đáng lẽ post topic mới nhưng tạo mãi kô được nên xin phép hỏi ở đây luôn:
Mình muốn tạo 1 page trong đó chia làm 2 phần. Dùng div với code như sau:
<div id="TwoColumn">
<div class="left">
.......
</div>
<div class="right">
.......
</div>
</div>
Còn CSS của mình là:
#TwoColumn
{
position:relative;
margin:0px;
padding:0px;
}
#TwoColumn .left
{
float:left;
width:500px;
}
#TwoColumn .right
{
width: 70px;
}
Tuy nhiên mình kô làm cách nào để thằng right nằm phía bên phải được. Mong các bạn chỉ giúp với. Xin cám ơn nhiều.
Cho mình hỏi thêm 1 việc là làm sao để cho toàn bộ nội dung trang đặt trong div có thể nằm ở giữa, dù độ phân giải màn hình có khác nhau?
darkera13
15-06-2007, 13:03
Bác làm nhu sau nhé :
<style>
#main{
margin:0px auto;
}
</style>
<div id="main"></div>
Xin cám ơn bạn nhiều. ^_^
Mình có sử dụng CSS để thiết kế layout 1 ASP.NET. Tất nhiên trong đó vấn sử dụng table, rồi các ASP.NET control. Trong đó mình có sử dụng CSS để làm cho page luôn canh giữa- ban đầu mình để mặc định là canh trái nhưng sau này để canh giữa. Tuy nhiên có 1 vấn đề là không phải lúc nào page cũng canh giữa, chưa kể các control trên đó nó nằm ngay ngắn như mình sắp xếp ban đầu. Thường thì vấn đề đó xảy ra khi lần đầu chạy site đó- ví dụ như mình host trên máy A, rồi máy B lần đầu chạy thì thấy vụ đó. Tuy nhiên nếu nhấn F5 thì mọi chuyện lại ok, như mình thiết kế.
Xin vui lòng chỉ giúp mình lí do tại sao có chuyện này. Xin cám ơn nhiều.
Mod ko chịu stick cái topic này nên hôm nay nhân dịp có bài viết mới trên blog, cũng nhân dịp anh em bàn tán về webstandard và div vs table, copy sang đây để up cái topic này lên tẹo.
--------------------------------------
............. các bạn tạm thời chơi với CSS bằng link này:
http://www.qrone.org/cssdesigner.html
Hi vọng khi nghịch ngợm với các thuộc tính CSS bạn sẽ hiểu hơn về nó. Như bạn thấy, CSS ko có quá nhiều "thuộc tính", khoảng 58 bác thôi.
Nhắc lại 1 câu: "lý do duy nhất mà người ta ko dùng CSS là ko biết dùng nó". Còn vấn đề chuẩn web lại là chuyện khác, đôi khi người ta cố ý làm web không đúng chuẩn do nhiều nguyên nhân. Topic này chỉ hướng đến việc biết cách thiết kế web đúng chuẩn, còn việc các bạn có dùng kiến thức đó vào công việc cụ thể hay không là tùy các bạn.
Nhưng có vẻ topic ko được đắt hàng làm, hì, đếm đi đếm lại được khoảng chục người quan tâm :D
Văn Hiển
05-07-2007, 16:57
Nhắc lại 1 câu: "lý do duy nhất mà người ta ko dùng CSS là ko biết dùng nó". Còn vấn đề chuẩn web lại là chuyện khác, đôi khi người ta cố ý làm web không đúng chuẩn do nhiều nguyên nhân.
Thực sự CSS cũng không đến nỗi khó lắm, nếu nói không biết thì hơi...
Đúng là CSS không khó!
CSS chỉ có khoảng 60 "cái để nhớ" -> Xem ở đây:
http://my.opera.com/cssquestions/blog/dua-nghich-voi-css
Nhưng CSS cũng không phải là đơn giản
Đối với 1 web designer, việc dựng web từ CSS thay vì cắt slide trong Photoshop tỏ ra khá phức tạp. Đó chính là cơn ác mộng thứ nhất. Nhưng với 1 chút kiến thức về CSS, người thiết kế web có thể vượt qua nó (và mục đích topic/blog này ra đời chính với mục đích giúp các bạn và tôi và vượt qua cơn "ác mộng" đó).
Cơn ác mộng thứ 2 chính là sự phân biệt đối xử của các trình duyệt đối với CSS. Cùng một thuộc tính CSS lại có những biểu hiện khác nhau trên các trình duyệt khác nhau. Điều này tôi đã từng nhắc đến, và chúng ta sẽ đi sâu vào điều này.
Trước tiên các bạn đọc qua trang http://www.quirksmode.org/css/contents.html để biết thêm 1 số chi tiết về vấn đề này trước khi chúng ta cùng thảo luận tiếp
ngonchan
09-08-2007, 20:15
Đúng là CSS không khó!
CSS chỉ có khoảng 60 "cái để nhớ" -> Xem ở đây:
http://my.opera.com/cssquestions/blog/d
Nhưng CSS cũng không phải là đơn giản
Đối với 1 web designer, việc dựng web từ CSS thay vì cắt slide trong Photoshop tỏ ra khá phức tạp. Đó chính là cơn ác mộng thứ nhất. Nhưng với 1 chút kiến thức về CSS, người thiết kế web có thể vượt qua nó (và mục đích topic/blog này ra đời chính với mục đích giúp các bạn và tôi và vượt qua cơn "ác mộng" đó).
Cơn ác mộng thứ 2 chính là sự phân biệt đối xử của các trình duyệt đối với CSS. Cùng một thuộc tính CSS lại có những biểu hiện khác nhau trên các trình duyệt khác nhau. Điều này tôi đã từng nhắc đến, và chúng ta sẽ đi sâu vào điều này.
Trước tiên các bạn đọc qua trang http://www.quirksmode.org/css/contents.html để biết thêm 1 số chi tiết về vấn đề này trước khi chúng ta cùng thảo luận tiếp
Điểm của mình: HTML 95%, hông nhớ số câu đúng :D,
xHTML 80%, 16/20
CSS 90%, 18/20 :D
Tạm ổn nhỉ :D,
Như bạn nói, cắt từ slide của Photoshop rùi chèn vào Web dễ hơn làm với CSS nhiều (ít ra đối với mình :D vì mình làm hoài mà chưa được)
Bạn có thể hướng dẫn cho mình cách dùng CSS chèn ảnh, thay vì dùng slide được không, đang điên phần này quá.
Cảm ơn lắm lắm :D
ttkhdhkh
12-08-2007, 08:44
Bác làm nhu sau nhé :
<style>
#main{
margin:0px auto;
}
</style>
<div id="main"></div>
Cài này chỉ dùng được trong firefox thui. IE hắn sẽ không hiển thị đúng. Nếu muốn dùng được trên cả 2 thì nên sửa lại thế này.
<style>
body{
text-align:center;
}
#main{
margin:0px auto;
text-align:left;
}
</style>
<div id="main"></div>
Do IE hắn chỉ canh giữa khi text-align:center . Còn gán lại text-align:left; là để các nội dung khác trong div #main không bị canh giữa.
bạn ttkhdhkh nói đúng rồi đó ^^
Bạn có thể hướng dẫn cho mình cách dùng CSS chèn ảnh, thay vì dùng slide được không, đang điên phần này quá.
Dùng CSS hiển thị ảnh thì dùng background: url(.../abc.gif); bạn coi thêm về background đi vì có nhiều vấn đề nữa như repeat các thứ.
P.S: mình cũng có 1 cái english: http://spirit.q9-gaming.com/en có hứng thú thì add link nha ^^
Mình có 3 vấn đề gặp phải với chuẩn XHTML 1.0 như thế này:
1.
Mình tạo 1 trang có Frames như sau:
<frameset id="main" cols="145px,20px,*" border="0" frameborder="no" framespacing="0">
Tuy nhiên, khi validate tại W3 thì có các lỗi về không tồn tại các attribute border, frameborder, framespacing.
Nếu mình bỏ các thuộc tính này đi thì giữa các frame của mình có 1 khoảng trống trắng, rất không đẹp. Vậy có cách nào làm được theo chuẩn mà bỏ được các khoảng trắng này không? Có thể làm nó bằng CSS được không?
2.
Khi thiết kế Web có dùng Frames, mình vẫn tạo 1 vùng dữ liệu nằm trong <body></body> nhằm đảm bảo nếu trình duyệt không đọc được Frames thì vẫn có thể xem được thông tin. Nhưng validate lại nói lỗi không cho phép thẻ <body> ở đây. Liệu phải làm thế nào để khắc phục điều này.
(Cái này liên quan đến các search engine vì chúng không đọc được frames nên mình buộc phải đặt thêm thẻ <body> như vậy)
3.
Mình thiết kế với JS, có dùng câu lệnh dạng:
document.getElementById("test").innerHTML = '<a href="http://www.example.com" title="Test">Click here</a>';
Khi validate tại W3 cũng gặp phải lỗi, nói không cho phép thẻ A ở vị trí này. Vậy có cách nào để khắc phục điều này không?
Số 1.
Bác có thể format cái iframe như 1 trang html bình thường, nghĩa là bác có thể dùng kèm div, class nói chung là ko cần dùng frame property.
Số 2.
Thẻ body bác đặt trong iframe nó xuất ra là 2 wả body nên validate ko dc là phải. Bác nên tìm cách khác
Số 3.
Em ko biết JS
Chốt lại: Tốt nhất ko dùng iframe :D
Mình dùng Frames, không phải IFrames bạn à. Vấn đề của mình là load các trang ở các địa chỉ khác nhau vào các Frames, cho nên không thể format lại để chúng nằm ở 1 trang được.
angon204
27-11-2007, 07:51
Mình đang nghiên cứu về CSS, có 1 vài cái không hiểu lẵm xin các bạn chỉ dẫn.
Mình có coi qua 1 số CSS của 1 số trang web thấy css nó ghi như thế này:
div.boxwrap {
margin: 50px auto 0;
padding: 0;
background: url(images/box-br.gif) no-repeat right bottom;
width: 15%;
color: #FFF;
}
div.boxwrap div {
background: url(images/box-bl.gif) no-repeat left bottom;
}
div.boxwrap div div {
background: url(images/box-tr.gif) no-repeat right top;
}
div.boxwrap div div div {
background: url(images/box-tl.gif) no-repeat left top;
padding: 20px;
}
Vậy cho mình hỏi ý nghĩa của cái dòng : div.boxwrap div div div
nghĩa là sao???
div.boxwrap div div div {
background: url(images/box-tl.gif) no-repeat left top;
padding: 20px;
}
Vậy cho mình hỏi ý nghĩa của cái dòng : div.boxwrap div div div
nghĩa là sao???
Giống thế nè bạn
Quocgia.Vietnam Tinh Thixa Phuong {
nha: maingoi;
viahe: 60cm;
}
angon204
28-11-2007, 10:01
Cám ơn anh đã giải thích giúp em, qua việc anh giải thích em cũng đã hiểu hơn về CSS.
Ah trong bài viết của anh, anh có nói là có những trang web hoàn toàn dàn trang bằng CSS mà không có 1 tag HTML nào, em chưa được nhìn qua những trang web đó, mà chỉ được xem qua những trang web kết hợp CSS với lại HTML thôi. Kính mong anh có thể cung cấp cho em một vài đường link về nó.
Thành thật cám ơn anh nhiều
Cám ơn anh đã giải thích giúp em, qua việc anh giải thích em cũng đã hiểu hơn về CSS.
Ah trong bài viết của anh, anh có nói là có những trang web hoàn toàn dàn trang bằng CSS mà không có 1 tag HTML nào, em chưa được nhìn qua những trang web đó, mà chỉ được xem qua những trang web kết hợp CSS với lại HTML thôi. Kính mong anh có thể cung cấp cho em một vài đường link về nó.
Thành thật cám ơn anh nhiều
Có thể hiểu lầm rồi, 1 trang web tối thiểu phải có 2 thẻ HTML là div và style thì mới chuyện trang trí được chứ.
Còn làm web mà chỉ để hiển thị chữ, ko cần cỡ chữ, font chữ, màu sắc, hình ảnh, layout gì cả, thì khỏi cần thẻ gì :D
Tuy nhiên chẳng ai làm như 2 cái vừa nói trên, lý do thì từ từ sẽ hiểu ....
Tuyệt đỉnh topic
Cảm ơn mọi người nhiều! Cùng khám phá nào
Xin chào anh,
cho em hỏi câu hỏi này: việc chuyển sang dùng WaSP đang và sẽ là xu hướng của web dev. Nhưng em thấy việc chuyển web sang dạng tabless đối với những lập trình viên PHP, ASP, JSP,... thì rất tiện (vì toàn bộ code (x)HTML là họ tự build). Nhưng còn đối với dân ASP.NET thì họ toàn xài webcontrol built-in, nếu vậy làm thế nào có thể xây dựng website chuẩn Web Standards dc ạ ?
Có tí thắc mắc, mong anh giải đáp giúp :)
Chuyển qua dùng CSS Adapters (hiện có sẵn vài cái thông dụng), hoặc tự viết Adapter cho mình.
Google để biết thêm về Adapters, đại khái nó là tool để thay đổi cách 1 built-in webcontrol render HMTL.
Thiết kế theo tiêu chuẩn W3C để đảm bảo trên FF/Opera/Safari và viết CSS hack cho IE
Không nên hack tí nào, nhất là web do tự mình nghĩ ra :D, trừ khi khách hàng có những yêu cầu quái chiêu.
Về box model thì lồng thêm 1 lớp div là xong, khỏi hack.
Nói chung biết kỹ thuật hack là tốt, mà ko nên dùng :D
chuthatthat
03-01-2008, 12:28
Cao thủ củng nhiều mà gà mờ củng lắm mà bạn chọn khúc giữa để dạy thì ít người học là phải thôi
Cao thủ củng nhiều mà gà mờ củng lắm mà bạn chọn khúc giữa để dạy thì ít người học là phải thôi
Tuy ít nhưng cũng chẳng đủ time mà dạy :D (thực tế mình dạy cả gà siêu mờ :D và ... cao thủ hơn mình :D ). Tinh thần ở đây là trao đổi :D, ai cũng cái để ta học, gọi là dạy lẫn nhau đó :D
anyway, mình cũng là gà :D , Gà Mới.
mình đang muốn học cắt css, bạn nào có tài liệu hay trang web nào liên quan đến css post lên cho mình với nhé!
cản ơn các bạn rất nhiều
nick: dungk3c
mail: dungk3c@gmail.com
mình đang muốn học cắt css, bạn nào có tài liệu hay trang web nào liên quan đến css post lên cho mình với nhé!
cản ơn các bạn rất nhiều
nick: dungk3c
mail: dungk3c@gmail.com
chịu khó đọc và quan sát chữ ký của mọi người :D, blog về CSS tiếng Việt thì có vài cái, còn sách thì ngoài hiệu sách :D (ko được xịn lắm).
Tốt nhất biết tiếng Anh thì nhiều đồ xịn hơn.
;)) agree, riêng xhtml thì tài liệu English pro khá nhiều. Tiếng Việt thì chỉ dừng lại mức độ CSS để trang trí thôi.
Hi zmt mình mới bắt đầu học về thiết kế web thui minh gặp được bài viết của bạn quả là rất quý vậy xin bạn cho mình add nick của bạn để có gì mình có thể hỏi được không
ui bây giờ mới nhìn đến ngày tháng năm thì thấy phát hoảng mình đọc bài viết này chậm đến vậy sao
Chả có gì hữu ích cả, với ng` chưa biết chả có gì để thực tế, với ng` đã biết thì cũng chả giúp ích gì hơn. Mặc dù viết rất dài và có vẻ tâm huyết keke ...
Tên này có vẻ giỏi quá nhỉ ?? Anh em, cho nó một trận đi :D
2_lua_IT
10-03-2008, 15:29
HTML : 20/20 , time : 4:09
XHTML : 16/20, time : 7:28
CSS : 19/20, time : 7:02.
hôhô. Hên thôi, đánh bừa cũng trúng. pó tay.
nguyenvandat887
12-03-2008, 11:19
nhung cau hoi ve html rat hay.cam on ban nha.ban suu tam nhieu hon nua nha.ca ve javascript nua.cang nhieu cang tot
tindecken
16-03-2008, 08:26
Bài test của mình, điểm thất quá, hjx hjx, chẳng biết nói sao:
http://nhanh.vinaanh.com/ph/8d7d8ee47dc7348be71f.jpg
http://nhanh.vinaanh.com/ph/ca46c1b47dc7349990a1.jpg
http://nhanh.vinaanh.com/ph/cf004fd47dc734a8208c.jpg
Hi vọng còn được đọc thêm vài bài hướng dẫn nữa, càng thực tế càng tốt hj hj. Thanks.
tindecken
16-03-2008, 08:35
tiện thể cho mình hỏi luôn hack CSS, hack box-model IE ... là gì vậy? nó có giống như là "c rack soft" hay "hack web" gì không vậy? :(
Và ai có tài liệu về xHTML tiếng Việt (mới học mà đọc tiếng Anh thì búi lắm) cho mình xin 1 cuốn basic về học với.:)
Cám ơn nhiều.
stroveman
16-03-2008, 10:09
@tindecken: Mình cũng chưa hiểu rõ nhưng theo mình nghĩ thì là do các trình duyệt hiện nay chưa đi theo một chuẩn nhất định dẫn đến mỗi trình duyệt lại hiện thị khác nhau với cùng một website. Vì vậy nên web developer thường phải "hack" để đạt kết quả mong muốn, tuy nhiên nó cũng dẫn đến việc phát triển sau này trở nên khó khăn hơn.
tindecken
17-03-2008, 15:03
cái thằng xHTML ra đời để chuẩn hóa vậy mà cũng phức tạp quá nhỉ.
Topic này giờ vắng thế, hjx.
có câu hỏi này xin đc giải đáp.
-- trong CSS lúc dùng margin thì có thêm thông số là "auto 0", vậy nó có tác dụng gì vậy?
"margin: 50px auto 0;"
-- trong CSS lúc dùng background thì có thêm thông số "no-repeat right bottom", nó có tác dụng gì vậy?
"background: url(images/box-br.gif) no-repeat right bottom;"
toàn nhưng câu hỏi basic àh, xin được trả lời.
tindecken
19-03-2008, 20:59
thêm 1 câu hỏi nữa nha:
-- tôi dùng div để tạo ra 1 layout với width và height chỉ định. Nhưng khi gõ Text nhiều thì nó tràn ra cả layout mà đã định width và height, làm thế nào để cho khi gõ nhiều text thì nó tự động xuống hàng vậy (ở đây nó nằm trên 1 hàng và làm bể layout luôn).
Thanks.
Cao thủ đi đâu cả rồi, hjx
Cách học CSS, và học mọi thứ khác, tốt nhất là THỬ NGHIỆM.
Muốn biết cái gì là gì, hãy thử nghiệm, viết ra xem nó thế nào, thử thay nó xem nó ra sao. Khi học IT thì chẳng có sách vở nào tốt hơn phòng thí nghiệm là chiếc máy tính và 1 công cụ tìm kiếm.
1 câu tôi muốn nhắc lại (và thay mặt rất nhiều người, nhắc lại), đó là: mọi câu hỏi nên có code đi kèm và tốt nhất là có chụp hình màn hình kèm theo. Đồng thời kèm theo đó là 1 câu chuyện về các suy nghĩ và cố gắng nhưng ko thành công của bạn.
Nói chung ai cũng sẵn lòng giúp đỡ nhau thôi, chủ yếu bạn phải chứng tỏ bạn ko phải là 1 thằng lười. :D
Nói chung ai cũng sẵn lòng giúp đỡ nhau thôi, chủ yếu bạn phải chứng tỏ bạn ko phải là 1 thằng lười. :D
Hoàn toàn đồng ý :emlaugh:
tindecken
24-03-2008, 10:25
có lẽ như lớp học đến đây là kết thúc, thầy không muốn dạy nữa, và trò chẳng muốn học nữa rồi, haha.
phongjalvn
30-03-2008, 17:30
cái thằng xHTML ra đời để chuẩn hóa vậy mà cũng phức tạp quá nhỉ.
Topic này giờ vắng thế, hjx.
có câu hỏi này xin đc giải đáp.
-- trong CSS lúc dùng margin thì có thêm thông số là "auto 0", vậy nó có tác dụng gì vậy?
"margin: 50px auto 0;"
-- trong CSS lúc dùng background thì có thêm thông số "no-repeat right bottom", nó có tác dụng gì vậy?
"background: url(images/box-br.gif) no-repeat right bottom;"
toàn nhưng câu hỏi basic àh, xin được trả lời.
1. margin: 0 auto, chứ không phải auto 0 nhé. Cái này có tác dụng canh center 1 div, nhưng div đó phải có qui định width rồi thì mới có tác dụng nhé. ( Canh center div đó, chứ không phải canh center cho content của div đó nhé, và có thể xài cho nhiều thứ nữa chứ không chỉ div)
2. no-repeat: không lặp lại background
right bottom : background sẽ nằm sát xuống đáy, bên phải của element đó
1. margin: 0 auto, chứ không phải auto 0 nhé. Cái này có tác dụng canh center 1 div, nhưng div đó phải có qui định width rồi thì mới có tác dụng nhé. ( Canh center div đó, chứ không phải canh center cho content của div đó nhé, và có thể xài cho nhiều thứ nữa chứ không chỉ div)
2. no-repeat: không lặp lại background
right bottom : background sẽ nằm sát xuống đáy, bên phải của element đó
0 auto là đúng rồi.
2 cái: Top&Bottom Left&Right => x auto
3 cái: Top Left&Right Bottom => x1 auto x2
4 cái: Top Right Bottom Left => x1 auto x2 auto.
(x, x1, x2 là những con số chỉ đơn vị đo trong web, thường người ta ko muốn cụ thể thì để bằng 0 hoặc auto.)
Đấy là 3 cách căn center bằng shorthand
khi Left và Right được căn tự động (auto) thì nó vào giữa, thế thôi.
sao mình vao trang blog cua bạn không đuwocj thế
bài viết này hay lắm, mình đang làm đồ án tốt nghiệp, làm website, có dùng tí CSS nên thấy bài này bổ ích phết.
À, mình làm trắc nghiệm được 17/20 , hú hồn tưởng tèo, toàn kiến thức hồi làm ASP 2 năm trước, thấy cũng ổn chứ nhỉ!!!
học css này bằng tiếng việt còn thấy vất vả huống chi mà bằng tiếng anh thì thấy xây xẩm mặt mày!
advisor19977
04-05-2008, 23:21
làm CSS mệt quá các thẻ div cứ chạy lung tung.
He he, css thì hơi dài dòng văn tự (trong file .css), nhưng trong trang html thì ngắn và đơn giản. Không có gì khó lắm ;)) Chỉ cần có 1 công cụ như DW thì xem như đã có 30% công việc, công việc còn lại chỉ là ngồi vào ghế, gõ thử vài cái, rồi tét trên IE (nên thử luôn trên FF)
muthongtin
22-05-2008, 10:11
Có ai có code menu làm bằng PHP cho mình tham khảo với. cảm ơn các bạn nhé
nguyenna
24-05-2008, 15:25
chào mọi người, mình có 1 chỗ thắc mắc như sau mong muốn dược giúp đỡ càng sớm càcg tốt, thanks!
Đó là : trong thân của HTML mình chèn vào thẻ
<div style="position:absolute; bottom:1038px;left:543px"><span style="font-size:9px"><font face ="helvetica,Arial,sans-serif" >TAX INVOICE2 </font></span></div>
(chú ý đến bottom và left thôi)
thì trong trình duyệt sẽ không thấy gì, chắc bởi thông số ở bottom lớn quá
nhưng nếu thay bottom bằng top thì trong trình duyệt có thể kéo thanh cuộn xuống và thấy được chữ. (Có thể suy ra là gốc tọa độ ở trên cùng bên trái?)
Thế thì liệu có cách nào mà định vị tuyệt đối từ đáy(bottom) trở lên mà vẫn có thanh cuộn(vẫn thấy được chữ) không nhỉ? tức là khi đó mình xem gốc tọa độ ở dưới cùng bên trái??
phongjalvn
26-05-2008, 09:03
chào mọi người, mình có 1 chỗ thắc mắc như sau mong muốn dược giúp đỡ càng sớm càcg tốt, thanks!
Đó là : trong thân của HTML mình chèn vào thẻ
<div style="position:absolute; bottom:1038px;left:543px"><span style="font-size:9px"><font face ="helvetica,Arial,sans-serif" >TAX INVOICE2 </font></span></div>
(chú ý đến bottom và left thôi)
thì trong trình duyệt sẽ không thấy gì, chắc bởi thông số ở bottom lớn quá
nhưng nếu thay bottom bằng top thì trong trình duyệt có thể kéo thanh cuộn xuống và thấy được chữ. (Có thể suy ra là gốc tọa độ ở trên cùng bên trái?)
Thế thì liệu có cách nào mà định vị tuyệt đối từ đáy(bottom) trở lên mà vẫn có thanh cuộn(vẫn thấy được chữ) không nhỉ? tức là khi đó mình xem gốc tọa độ ở dưới cùng bên trái??
<div style="position:absolute; bottom:0;left:0px"><span style="font-size:9px"><font face ="helvetica,Arial,sans-serif" >TAX INVOICE2 </font></span></div>
Chú ý : bottom:0;left:0px <~ góc dưới cùng, bên trái
nguyendongbb
27-05-2008, 01:16
tiếng anh mình kém lắm !làm sao để học tốt khóa học này được bạn !!
[=========> Bổ sung bài viết <=========]
câu 1: đáp án c HTMLlaf viết tắt của Hyper Text Markup Language
là ngôn ngữ liên kết siêu văn bản
câu 2:to chức tạo ra Web standardsla Microsoft
câu 3 :tag tạo ra tiêu đề web kích cỡ lớn nhất là :<head>
câu4: tag xuống dòng là <br>
câu5 :<body bgcolor="yellow"> là tag tao màu nền cho trang web
câu 6:tag chữ in đậm <b>
câu 7:tag chữ in nghiêng <i>
câu8:<a href="http://www.w3schools.com">W3Schools</a> là link tao liên kết trong trang web
câu9:
mấy câu sau quên rùi mà cũng do vốn ngoại ngữ kém nên vào trang blog của bạn chẳng biết trả lời sao nữa trả lời sơ sơ vầy thui để tìm hiểu thêm rùi trả lời tiếp hi hi:))
the_fate
30-05-2008, 14:01
//---
W3Schools CSS Quiz
Result:
20 of 20
100%
Perfect!!!
Time Spent
6:21
//-- Tò mò chút về CSS, quả thật topic có nhiều điều đáng học thật: Kiến thức + Kinh nghiệm --> pro css
roseapple
02-06-2008, 22:14
Minh dang hoc thiet ke web, co doc tai lieu ve CSS, van dang theo doi bai viet cua ban,ban viet tiep nhe ban...thanks.
Thac mac xin duoc giai dap : Minh dung padding de cho noi dung (gom co table)ben trong trang web cach le^` de^`u nhau, nhung no thuong hay bi giut va bi co gian, tuy minh co dung valign= top va padding=4px...., nhung no hien ra van khong deu? cho minh kinh nghiem nhe ban...
2 trinh duyen khac nhau thi hien thi khac nhau, 1 van de cung nhuc dau nua ban oi, mong duoc tra loi som som...
Thanks.
wantlove
03-06-2008, 15:34
ai cho mình biết sự khác nhau giưa IE va Firefox về magin,pading,boder...cho mình link để tham khảo củng được
snowangel2005
15-06-2008, 01:01
hic mình vô hơi bị trễ rồi:((. Bây h topic này ngưng hoạt động rồi hả mấy bác? Thấy chủ topic ko post bài nữa, chán thật!!!!!!!!
ndgiang84
20-08-2008, 08:38
bác zmt đâu rồi vào phổ biến kiến thức tiếp đi. mà các bác không tranh luận nữa àh để em còn hóng, hic...
ko biết mọi ngừoi chạy đâu hết rồi! bác nào vào hướng dẫn bài dựng css từ pts qua đi
cac bac con do ko, tiep tuc di chu, hay nghi rui
chan wa, thay tam huyet the ma bo rui seo
tớ muốn tạo một trang web nhưng tớ không bít phải làm như thế nào và bắt đầu từ đâu? các bạn chỉ cho tớ với?
ohisee oh i see
02-10-2008, 15:09
tớ muốn tạo một trang web nhưng tớ không bít phải làm như thế nào và bắt đầu từ đâu? các bạn chỉ cho tớ với?
Bạn xem kỹ video sau:
http://www.youtube.com/watch?v=amnGHHU_F10&feature=channel_video_title
lionkinglovely -> banned
các bác cho em hỏi chút về css. Các cách phân loại css gồm:phân loại theo vị trí đặt(có 3 loại: inline, internal, external), còn cách phân loại nữa là theo chức năng. Có bác nào biết cách phân loại này chỉ giùm em với, em đang phải làm gấp.Thanks các bác nhìu nhìu. Bác nào nhiệt tình chat với em trog yahoo để em hỏi kỹ hơn, nick e là:best4u008. Thanks
ohisee oh i see
04-10-2008, 18:12
các bác cho em hỏi chút về css. Các cách phân loại css gồm:phân loại theo vị trí đặt(có 3 loại: inline, internal, external), còn cách phân loại nữa là theo chức năng. Có bác nào biết cách phân loại này chỉ giùm em với, em đang phải làm gấp.Thanks các bác nhìu nhìu. Bác nào nhiệt tình chat với em trog yahoo để em hỏi kỹ hơn, nick e là:best4u008. Thanks
phân loại theo chức năng:
- Dùng Format chữ (font-style, font-weight, font-family...)
- Dùng định vị trí (position, float ...)
more: w3schools.com
ko rõ lắm nhưg cug thanks bạn oh i see nha.
phongba2312
14-12-2008, 21:30
em chào anh ZMT246!em thấy các bài viết của anh rất hay và em cũng rất thích học về lập trình web, em cũng đã vào qua trang blog của anh, thật hữu ích cho các bạn muốn tìm hiểu và học về lập trình web,vậy anh cho em hỏi em muốn làm thành viên của các lớp anh dạy thì em phải làm gì và em muốn họ từ đầu có được không, em muốn anh giúp đỡ em nhiều hơn em cảm ơn, À có gì anh có thể liên lạc vào mail giúp em đựoc ko a, mail em là : phongba2312@gmail.com
kingofbest
16-01-2009, 00:23
phù! mới tham gia học làm IT mệt thật đó cảm ơn bạn đã viết bài này nha mình theo dõi lâu lâu rồi nhưng bạn nói ai không thi trắc nghiệm bạn không trả lời nên mình hơi ngại :) mình mới thi phần đầu điểm kém lắm :) co':10/20 thôi chắc phải tiếp tục học thêm mong bạn hướng dẫn dài dài :)!Thanks so much.
[=========> Bổ sung bài viết <=========]
phù! mới tham gia học làm IT mệt thật đó cảm ơn bạn đã viết bài này nha mình theo dõi lâu lâu rồi nhưng bạn nói ai không thi trắc nghiệm bạn không trả lời nên mình hơi ngại mình mới thi phần đầu điểm kém lắm co':10/20 thôi chắc phải tiếp tục học thêm mong bạn hướng dẫn dài dài !Thanks so much.
Cho em hỏi cách tạo menu dạng list gần giống trong dropdown. Khi chỏ chuột vào thì menu đổ xuống dọc thành list không? (cho em code CSS luôn)
Thanks!
em chào anh ZMT246!em thấy các bài viết của anh rất hay và em cũng rất thích học về lập trình web, em cũng đã vào qua trang blog của anh, thật hữu ích cho các bạn muốn tìm hiểu và học về lập trình web,vậy anh cho em hỏi em muốn làm thành viên của các lớp anh dạy thì em phải làm gì và em muốn họ từ đầu có được không, em muốn anh giúp đỡ em nhiều hơn em cảm ơn, À có gì anh có thể liên lạc vào mail giúp em đựoc ko a, mail em là : phongba2312@gmail.com
Em định học online à? Em nên tự học đi :D, vào lớp học thì học phí mắc lắm.
à, anh là zmt264 (không phải 246 :( ) và các thông tin về anh đều có trên blog, tuy nhiên nói chung anh không trả lời qua YM hay email mà thường trả lời trên blog nên có gì em cứ hỏi trên đó, trừ những câu hỏi mà em nghĩ có tính cách riêng tư không nên công khai.
@bon2008 : bạn vào cssplay.co.uk có rất nhiều menu
red_blue
23-02-2009, 09:07
link die het rui ban oi :D
acousticvn.com
03-03-2009, 19:33
- Em chào anh zmt264, em rất cám ơn những bài viết rất bổ ích của anh (tuy là em đọc chưa hiểu gì lắm).
Chẳng là em đang có dự án kinh doanh của riêng em (năm nay em sắp ra trường rồi mà) Em nghĩ thương mại điện tử có lẽ là cách tốt nhất cho những sinh viên mới ra trường lập nghiệp, nên em thực sự muốn được học lập trình web, em muốn có 1 website để bán hàng online.
- Rất mong anh cho em 1 tài liệu để em có thể học làm web từ bước đầu tiên, 2 hôm nay em đọc hết topic của anh, nhưng vẫn chưa biết nên bắt đầu học làm web từ đâu, với sách gì nữa
Em cám ơn anh rất nhiều
red_blue
06-03-2009, 13:36
oi`.dc do!cho them cua ban
mình test phần html cũng được 18/20 hì hì.
rất ủng hộ bạn zmt264 (tiếp tục viết bài về css nhé).
Cho hỏi là bạn có tài liệu về xhtml hk.Nếu có share to me!thak a lotz ^^
[mình hok log được bằng tài khoản của mình đành xài tạm của thằng bạn]
truongbook
22-05-2009, 13:45
chao bac! e muốn hỏi bác về cách đwa trang web len mạng được chws?
link die het rui ban oi :D
1 số bài viết về CSS vẫn ở trên blog cũ, 1 số được chuyển về:
CSS cơ bản:
http://ohisee.com/dd/forumdisplay.php?fid=16
CSS nâng cao:
http://ohisee.com/dd/forumdisplay.php?fid=41
Tôi cũng thích CSS và chuẩn web, và cũng tự mày mò học được chút đỉnh nên có làm một trang là izwebz.com Trong đó tôi có vài video tutorial về CSS cho các bạn tham khảo.
Không phải quảng cáo nha bác Ohicee, chỉ là đóng góp thêm một chút thôi đó mà. Thấy bác nhiệt tình quá, chắc khi nào có cơ hội đàm đạo để học hỏi.
tranvan5322
30-09-2009, 13:49
css border
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Thử text.</p>
<p class="two">Thử text.</p>
<p class="three">Thử text.</p>
<p><b>thử:</b> Tại sao người lớn hay đi chơi nhiều...chơi nhiều sẽ làm liều ...lam liều sẽ cho ra nhiều thiếu nhi</p>
</body>
</html>
[=========> Bổ sung bài viết <=========]
cho ra
:
Thử text.
Thử text.
Thử text.
thử: Tại sao người lớn hay đi chơi nhiều...chơi nhiều sẽ làm liều ...lam liều sẽ cho ra nhiều thiếu nhi.
tam_osum
05-01-2010, 08:36
Cảm ơn bạn đã up những bài bổ ích về CSS, mình đang rất cần chúng. Hiện tại mình đang làm về web nhưng vẫn quen với tab. Mình muốn học ít CSS nâng cao để làm div. Nếu bạn có thời gian thì giúp mình với nhé.
Cảm ơn bạn rất nhiều.
Đây là contact của mình:
Nicknam:tam_osum
DT: 01679 066 880
mail: tamnt_osum@yahoo.com.vn
SuperStarEDGE
25-04-2010, 18:05
cám ơn bạn.Bài viết rất có ích
rvnhanh1
29-05-2010, 01:50
Bạn có thể học nhiều hơn về thiết kế web cũng như SEO tại đây : http://giaiphaplienket.com/thiet-ke-web
Các bạn nên download tài liệu này của google để thàm khảo thêm http://www.google.com/support/webmasters/bin/answer.py?answer=40349
mới học chẳng hiểu gì cả. mấy bạn này nói "cao" quá.
mới học chẳng hiểu gì cả. mấy bạn này nói "cao" quá.
Ko có gì cao cả, tại bạn với chưa tới thôi, cố lên rồi bạn sẽ thấy nó ko thật sự cao như bạn nghĩ lol
http://www.youtube.com/watch?v=1cNOLlxw3B8
All: http://hoctudau.com/slides/html-css-best-practices/
tuyetchinh90
12-01-2011, 14:19
cảm ơn đã chia sẻ thông tin hay
jackie2810
30-01-2011, 20:09
em đang tìm hiểu về thiết kế web.nếu thiết kế web ở dạng offline khi up web lên hosting thì cac đường link trong code có thay đổi theo k?
còn trong trang chủ thì trên thanh menu có các phần khác nhau, khi ta click vào trang khác trên thanh menu đó, thì trang đó sẽ đc những người thiết kế web tạo lai thanh menu trên trang đó hay là k tao lại.(do em thấy những trang web thông dụng. khi ta vào cac trang con của website thì thanh menu luôn xuất hiện,ý em muốn nói nà mỗi trang như vậy người lập trình web có cần fai thêm code của thanh menu hay là thanh đó luôn tự động xuất hiện)
và em cần nhiều tài liệu để học lập trình web đc tốt hơn, các bác có thì cho em nhé.
và em rất cần các bác chỉ nhiều hơn trong việc lập trình.
Y!M: jackie_chan_2810.
bác nào giỏi về việc lập trình thì cho mình là wen nhé.
em đang tìm hiểu về thiết kế web.nếu thiết kế web ở dạng offline khi up web lên hosting thì cac đường link trong code có thay đổi theo k?
còn trong trang chủ thì trên thanh menu có các phần khác nhau, khi ta click vào trang khác trên thanh menu đó, thì trang đó sẽ đc những người thiết kế web tạo lai thanh menu trên trang đó hay là k tao lại.(do em thấy những trang web thông dụng. khi ta vào cac trang con của website thì thanh menu luôn xuất hiện,ý em muốn nói nà mỗi trang như vậy người lập trình web có cần fai thêm code của thanh menu hay là thanh đó luôn tự động xuất hiện)
và em cần nhiều tài liệu để học lập trình web đc tốt hơn, các bác có thì cho em nhé.
và em rất cần các bác chỉ nhiều hơn trong việc lập trình.
Y!M: jackie_chan_2810.
bác nào giỏi về việc lập trình thì cho mình là wen nhé.
Nếu em phân biệt đường dẫn tương đối và tuyệt đối, cũng như đã từng xem qua 1 mã nguồn nào đó (ví dụ của Wordpress) thì sẽ thấy là 1 trang web ở localhost hay upload lên host này, hay chuyển sang host khác ... đều ko cần phải thay đổi lại đường link. Ai viết code mà để phải tự sửa link ở từng file là code tồi.
Có vẻ như em chưa học HTML và PHP???
mr.crazykv
04-08-2011, 14:57
Tôi thấy topic này mang tính quảng cáo!
sirowanano
06-08-2011, 09:25
Cảm ơn bạn đã đóng góp bài viết.Ngoài ra các bạn cũng có thể vào trang http://izwebz.com để học về thiết kế website, photoshop, php và wordpress.
tangtraffic
12-08-2011, 14:37
hay wa bài viết co chất lượng đáng để học hỏi. thank's for share
Thiết kế web theo đúng chuẩn CSS rất chuyên nghiệp. Cảm ơn đã chia sẻ!
chuanw3c.com
04-04-2012, 01:42
Cảm ơn vì đã post bài. mà để học theo Chuan w3c thì cần phải đầu tư vốn tiếng anh nhiều. w3chool là môi trường tốt nhất để học.
Kang.Truong
15-05-2012, 14:09
Làm html/css này, mình mệt nhất là khi tìm lỗi fix trên IE6 ~_~. Cái này không chỉ học thôi là đủ, còn phải làm nhiều thì mới rành được.
buiduchieu
30-05-2012, 08:59
test thư trên w3c
19/20 html
15/20 xhtml
20/20 css
codaihai
30-11-2012, 15:01
có tài liệu nào về css3 không share cho mọi người với
Few :-<
Có bao nhiêu web đạt được tiêu chuẩn này đâu
baphuc1024
31-08-2013, 20:16
Bài viết quá đã. Qúa đã pepsi ơi :D
programming.iter
03-04-2015, 11:46
thấy nick bị banned mà bài viết vẫn tồn tại nhỉ ?
Eoslandvn
24-09-2015, 15:58
Mình cũng đang làm web này, nhiều cái khó khăn quá
.................................................. ......................
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.