HTML VÀ CSS CĂN BẢN DÀNH CHO NGƯỜI MỚI

HTML/CSS có thể nói là khởi đầu của mọi tất cả vấn đề liên quan tới web, dù bạn là người làm nghành nào, miễn là có đụng tới quản trị web thì ít nhất phải biết qua hai cái này. Nếu bạn có ý định học lập trình web thì lại càng nên thành thạo hai cái này, nếu bạn là blogger chuyên viết bài thì cũng nên nắm cái này. Mình cũng mới tham gia thôi, nhưng qua tìm hiểu nắm một số kiến thức cơ bản bạn sẽ hiểu được và chỉnh sửa các Template có sẵn đầy trên mạng thành cái của mình.
Đất mình mình còn nghèo mình rất thích free. Vậy ta phải tìm hiểu và biến bước đi của họ thành thành quả của mình.
Mình đã đọc bài HTML VÀ CSS CĂN BẢN DÀNH CHO NGƯỜI MỌI NGƯỜI tại trang http://thachpham.com/ thấy có ích nên mình trích bài viết này mình phù hợp với những quan tâm của blogger mù tịt như mình. Hi... Hi.

HTML căn bản

1. HTML là gì?

HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho WordPress hay bất cứ website nào. “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website.

HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản.

Hypertext (siêu văn bản): là một đoạn text bất kì nhưng có chứa link đến một nguồn thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…)

Ngôn ngữ đánh dấu này sẽ là cầu nối của sự giao tiếp giữa người dùng và trình duyệt, giúp trình duyệt hiểu được cách thức hiển thị trang web. Khi trình duyệt đọc thấy 1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn muốn tô đậm, in nghiêng, hay màu mè hoa lá thế nào cả. Chính lúc đấy, bạn cần HTML, thông qua việc sử dụng các thẻ HTML.

Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu < và dấu >, và báo cho trình duyệt biết cách thức hiển thị đoạn kí tự bên trong thẻ HTML đó.

In đậm bằng thẻ <b>:

In nghiêng bằng thẻ <i>:

2. Cấu trúc cây HTML cơ bản

Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái qua phải, với 2 phần chính làHEAD và BODY. Các website viết bằng HTML đều tuân theo cấu trúc cơ bản như sau:

Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên.

Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.

Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.

Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.

Mọi kí tự nằm giữa dấu <!– và –> sẽ được xem là thẻ comment và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.

<html>

<head>

<title>Đây là thẻ đánh dấu tiêu đề trang web</title>

</head>

<body>

<i>Đây là dòng chữ in nghiêng</i>

</body>

</html>

3. Protips:

Luôn đóng thẻ sau khi đã mở. Điều này giúp hạn chế lỗi bất ngờ khi hiển thị trên trình duyệt.

Một số thẻ không có thẻ đóng, như thẻ <br>, thẻ <img>, <input>,…..

Cẩn thận gặp lỗi khi đóng thẻ, mở thẻ trong trường hợp có nhiều thẻ lồng nhau.

Bạn có thể học chi tiết về HTML căn bản ở Izwebz với series hướng dẫn qua video rất đầy đủ và dễ hiểu.

4. Các tag HTML cần biết cho blogger:

Đề mục: Có 6 loại đề mục tất cả với mức độ nhấn mạnh giảm dần từ <h1> đến <h6>. Nếu bạn quan tâm đến SEO thì có lẽ đây là thẻ mà bạn nên chú trọng sử dụng đúng cách.

<h3>Chương 1.1</h3>

Định dạng Text:

<i>In nghiêng</i>

<strong>Tô đậm theo chuẩn web ngữ nghĩa</strong>

<em>In nghiêm theo chuẩn web ngữ nghĩa</em>

Phân đoạn:

<!-- Comment: thẻ p dùng để đánh dấu đoạn văn,

tách riêng với những đoạn text bình thường-->

Xuống dòng với <br>

<blockquote>"Tôi chuẩn man" ~ Cao Thái Sơn</blockquote>

Danh sách: có 2 loại là danh sách có đánh số thứ tự <ol> và danh sách không đánh số thứ tự<ul>. Bên trong các thẻ danh sách này, các phần tử được đánh dấu với thẻ <li>.

<ol>

</ol>

<ul>

</ul>

Liên kết:

Ảnh:

CSS căn bản

5. Làm quen với CSS

Nếu HTML được xem như là bộ xương của một website thì CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.

CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS).

CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài.

6. Cú pháp cơ bản của CSS

Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).

VÙNG-CHỌN {

Thuộc-tính-1: giá-trị-1;

Thuộc-tính-2: giá-trị-2;

}

Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ… Bạn có thể xem ví dụ trực quan về một số vùng chọn CSS tại đây, hoặc đọc thêm tại W3S.

Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn. Danh sách các thuộc tính có thể xem thêm tại W3S.

Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá trị kích thước tính bằng px, em, rem, %.

7. Các vùng chọn CSS (selector) cần biết cho blogger

#ID
Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó.

<h2>Thạch Phạm Blog</h2>

<p>Cạch. WordPress blog lớn nhất Việt Nam.</p>

<div>