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

[vitnuce]

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

[zmt264]

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

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 ). 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.

[jiSh@n]

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

PR ko liên quan gì đến cách thức design

[vitnuce]

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!

[zmt264]

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 .

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ì.

[jiSh@n]

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.

[vitnuce]

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

[zmt264]

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ỉ .

[zmt264]

Để 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]

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ú.