Thiết kế một trang web, cần phải biết và làm gì ?

Sau gần 3 năm kinh nghiệm hoạt động trong lĩnh vực thiết kế giao diện và chức năng trên blog, http://trangthietbihiendai.blogspot.com/ nhận ra rằng để thiết kế một website hay một trang blog cá nhân bắt mắt cùng những tính năng 'độc đáo', bạn cần trang bị cho mình một chút am hiểu về CSS và HTML.

CSS là gì?

CSS nói nôm na giống như hình dạng bề ngoài (lớn / nhỏ, đen / trắng, sáng / tối...) của website. Trong CSS, bạn phải dùng các lệnh để quy định sự hiển thị của một nhóm hoặc cá thể nào đó trên web. Trong đó gồm có các lệnh:

- font-size: kích cỡ chữ

- font-weight: tuỳ chọn chữ bình thường hoặc in đậm

- font-style: kiểu chữ (nghiêng, gạch chân, in đậm)

- font-family: loại chữ (Arial, Times New Roman, sans-serif...)

- padding: bung thành phần; gồm padding-left, padding-right, padding-top và padding-bottom theo ý nghĩa tuần tự là bung trái, phải, trên và dưới

- margin: cách thành phần; gồm có margin-left, margin-right, margin-top và margin-bottom theo ý nghĩa tuần tự là cách trái, phải, trên và dưới

- color: màu sắc

- background: nền; gồm có background-image (ảnh nền), background-color (màu nền), background-position (vị trí nền), background-repeat (lặp lại nền)

- border: đường viền; gồm có border-left (viền trái), border-right (viền phải), border-top (viền trên), border-bottom (viền dưới)

- border-style: kiểu đường viền (solid: gạch, dashed: đứt khoản, thin: mỏng)
... và còn nhiều lệnh khác nữa. Ở các bài viết sau, http://trangthietbihiendai.blogspot.com/ sẽ hướng dẫn các bạn chức năng của từng lệnh.

HTML là gì?

HTML là thành phần hiển thị chính trên một giao diện web, đi kèm theo CSS và được CSS quy định tính đẹp xấu của giao diện. Trong khi CSS sử dụng lệnh thì HTML sử dụng thẻ để quy định hiển thị, gồm có các thẻ cơ bản:

- div

- span

- strong

- b

- i

- u

- h1, h2, h3, h4, h5, h6, h7

- p

- ul

- li

- br...

Mỗi thẻ có chức năng và cách sử dụng riêng của nó. Ví dụ như người ta thường sử dụng thẻ

strong

hoặc

b

để "in đậm" chữ, thẻ h1 - h7 để "đặt tiêu đề" chính hay thẻ ul - li để "liệt kê" danh sách.

Để viết HTML đúng cú pháp, mỗi thẻ phải được đặt trong cặp <...> và phải có thẻ đóng ở cuối danh sách lệnh </...>

Để CSS hiển thị trên các thẻ, web master sẽ dùng 2 cách sau:

- Cách 1:

Dùng thẻ style="CSS". Ví dụ khi tôi sử dụng thẻ div có thành phần trong là Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog và CSS quy định màu chữ đỏ thì sẽ viết như thế này:

<div style='color:red'>Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog</div>

...và hiển thị như bên dưới

Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog

- Cách 2:

Dùng lệnh nhóm với cấu bên trong là id='' hoặc class='' thay vì dùng style='' . Cách này được ưu tiên sử dụng trong trường hợp CSS quá dài. Ví dụ khi tôi sử dụng thẻ p có thành phần trong và CSS quy định như cách 1 thì sẽ viết:

<p class='mauchu'>Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog</p>
hoặc
<p id='mauchu'>Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog</p>
kèm theo
<style>.mauchu{color:red} hoặc #mauchu{color:red}</style>

...và hiển thị như bên dưới

Học CSS và HTML trên http://trangthietbihiendai.blogspot.com/ Blog

Khi sử dụng lệnh nhóm class='' hoặc id='' thì bạn cần phải đặt một cái tên trong dấu '' như class='mauchu' và phải dùng thẻ <style> để mở và đóng kèm theo css trong thẻ style tương ứng với nhóm class là dấu "." và id là dấu "#"