Trang chủ » Đồ họa » HTML/CSS

HTML và CSS căn bản dành cho người mới bắt đầu

910 99

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.

Bạn có thể là một blogger viết rất tốt, nhưng liệu bạn đã sử dụng thành thục các thẻ HTML và vùng chọn CSS căn bản chưa? Nếu câu trả lời là chưa thì điều đó đang hạn chế tiềm năng blogging của bạn đấy. Bạn có thể cầm gạch lên và bảo:

loading...

gì khi đã có hàng tá công cụ để tạo website mà chả cần quan tâm đến code kiếc. Tui cũng có phải dân lập trình đâu!”. ~Blogger chưa biết HTML/CSS nào đó

Thực vậy, những công cụ như Adobe Dreamweaver, WordPress Visual Editor có thể vỗ ngực và thề thốt tình yêu:

“Em cứ lo nội dung và layout, còn HTML/CSS và thế giới cứ để anh.” ~Editor

Mình không dám ý kiến gì với tình yêu của bạn, nhưng việc phụ thuộc vào công cụ quá nhiều sẽ không giúp bạn tận dụng hết tiềm năng của mình. Bạn có thể là 1 blogger viết nội dung rất giỏi, nhưng bạn sẽ không thể:

  • Thiết kế, định dạng những gì ngoài hỗ trợ của công cụ.
  • Thử nghiệm những đoạn code hay ho từ các trang web khác.
  • Chỉnh sửa lại những thiết kế giao diện theo ý mình.
  • Tối ưu hóa về thiết kế và định dạng cho trang web của mình.
  • Thiết kế những giao diện cầu kì và hiệu ứng phức tạp.

Nếu bạn thực sự muốn chăm chút về thiết kế giao diện hay mang lại trải nghiệm tuyệt vời cho người dùng trang web, cho độc giả trang blog thì hãy nghe mình: Đây là lúc thích hợp nhất để tạm chia tay Dreamweaver (yên tâm, DW là trai ngoan nên không đòi quà đâu :D) và bắt đầu tìm hiểu về HTML và CSS căn bản dành riêng cho blogger.
 

Trong bài này, mình sẽ chỉ nói lại các khái niệm trọng tâm trong HTML và CSS, kèm theo đó là các nguồn học vì trên mạng hiện nay đã có quá nhiều tài liệu rồi.

Bắt đầu thế nào?

Đối với WordPress Blogger, chắc hẳn mọi người đều quen thuộc với việc sử dụng công cụ soạn thảo WordPress Editor để biên tập, chỉnh sửa và định dạng cho trang blog hay website của mình. Mọi thao tác đơn giản như bôi đậm chữ, in nghiêng, căn dòng… về bản chất đều là can thiệp bằng HTML/CSS tự động bởi WordPress Editor.

Tuy nhiên, những lựa chọn sẵn có từ WordPress Editor rất hạn chế, nên nếu bạn muốn táy máy HTML/CSS thì xin mời bật qua chế độ chỉnh sửa Text và chúng ta cùng tìm hiểu:

WordPress Visual Editor


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.
Thachpham.com

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ệtgiú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>:
    01
    <b>A</b>
  • In nghiêng bằng thẻ <i>:
    01
    <i>A</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ướitừ 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ị.
01
02
03
04
05
06
07
08
09
10
11
<html>
 <

Học HTML CSS - Các thuộc tính cho Text (văn bản)

Học HTML CSS - Các thuộc tính cho Text (văn bản) Đăng bởi: Tài Liệu Tin Học 21-05-2015 mục HTML/CSS
Đây là bài mở đầu cho loạt bài viết tìm hiểu về các thuộc tính quan trọng trong CSS mà bạn cần nắm. Một trong các loại thuộc tính đơn giản nhất nhưng lại dùng nhiều nhất là các thuộc tính được dùng để thay đổi cách hiển thị của văn bản, được gọi là Text Styles.

Học HTML CSS - Các thuộc tính cho Text (văn bản)

801 Lượt xem