Khóa học HTML và CSS căn bản cho tất cả mọi người

Khóa học HTML miễn phí
Khóa học HTML và CSS này mình sẽ giúp các bạn hiểu về khái niệm HTML, CSS. Vận dụng tốt HTML, CSS để có thể xây dựng Blog, Website đơn giản cho bản thân.

HTML và CSS là ngôn ngữ lập trình mà bất cứ ai bắt đầu làm web và làm web chuyên nghiệp đều phải thành thục và thật chuyên sâu. Hiện nay có rất nhiều công cụ hỗ trợ bạn tạo website đơn giản tạo web rất nhanh và chuyên nghiệp. Mình không phủ nhận sự hỗ trợ rất tốt của các công cụ này cho các lập trình viên thiết kế web từ căn bản đến chuyên nghiệp. Nhưng website hiện nay đa số đều được xây dựng từ nền tảng HTML và CSS tôi khuyên bạn phải học và thật chuyên sâu về hai ngôn ngữ này nếu bạn muốn phát triển thật tốt và bền vững với đam mê thành Lập trình viên thiết kế web.

Tất nhiên để có thể thực hành và tạo các trang web thì thư không thể thiếu đối với người lập trình đó là các công cụ hỗ trợ viết CODE. Bạn tham khảo và cài đặt cho mình công cụ yêu thích nhất để bắt đầu bước vào khóa học HTML và CSS

>> Xem cách cài đặt và sử dụng công cụ hỗ trợ viết CODE

Phần I: Tìm hiểu về HTML

1. HTML là gì?

HTML viết tắt của cụm từ HyperText Markup Language, nghĩ là ngôn ngữ đanh dấu siêu văn  bản. HTML có thể nói là khung xương cho mọi website, dù website được xây dựng trên bất kì nền tảng nào.

HTML là người phiên dịch giúp truyền tải nội dung của con người tới các trình duyệt, giúp hiển thị dữ liệu lên màn hình hay có thể nói đó là “Giao diện website”

Thẻ HTML được sử dụng bằng cách đặt từ khóa vào trong cập dầu < và dấu>, sẽ giúp trình duyệt hiểu và biểu thị phần nội dung bên trong các thẻ

Ví dụ:  Để biểu thị nội dung in đậm của một dòng chữ ta để dòng chữ đó trong thẻ <strong> cấu trúc như sau: <strong>in đậm</strong>

2. Cấu trúc HTML căn bản

Cấu trúc HTML được xây dựng một cách LOGIC chi tiết từ trên xuống dưới và từ trái qua phải.

  • Một đoạn HTML được đặt nằm trong thẻ <html></html>, thẻ này có tác dụng giúp cho trình duyệt hiểu được rằng đang làm việc với ngôn ngữ HTML.
  • Tiếp theo đến <head></head> thẻ này chứa các phần thông tin khai báo như tiêu đề, thư viện sử dụng trong website,… Phần này không hiển thị trên giao diện website.
  • Kế tiếp là phần nội dung “phần thân” được đặt trong thẻ <body></body>. Khi quá trình đọc dữ liệu HTML của trình duyệt hoàn thành thì phần nội dung bên trong thẻ này sẽ được hiển thị trên giao diện website
  • Mọi kí tự nằm trong cặp dấu được mặc định là phần chú thích và không được sử lý để hiển thị trên màn hình

01

02

03

04

05

06

07

08

09

10

11

<html>

<head>

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

</head>

<body>

<b>Đây là dòng chữ in đậm</b>

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

</body>

</html>

HTML và CSS căn bản cho tất cả mọi người

3. Cách đóng và mở các thẻ HTML

Để sử dụng các thẻ trong việc xây dựng nội dung thì việc đầu tiên bạn phải làm là gọi các thẻ đó. Đa số mỗi thẻ HTML sẽ được biểu thị hai phần phần mở và hần đóng.

  • Cấu trúc mở thẻ  <từ khóa>
  • Cấu trúc đóng thẻ  </từ khóa>

Ví dụ: Mình sử dụng thẻ in đậm như sau: <strong>in đậm</strong>

Lưu ý: Một số thẻ không có thẻ đóng <br>, thẻ <img>, <input>,….. những thẻ này được mặc định không sử dụng thẻ đóng.

4. Các thẻ HTML cần biết

a. Thẻ tiêu đề

Có tất cả 6 thẻ đề mục với mức độ nhấn mạnh giảm dần từ thẻ <h1> đến <h6>. Đặc biệt với những bạn làm về SEO thì cần tìm hiểu thật sâu về cách xây dựng và dùng các thẻ này để phục vụ cho việc tối ưu SEO

01

02

03

04

05

06

<h1>Tiêu đề bài viết</h1>

<h2>Phần 1</h2>

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

<h4>Tiểu mục 1.1.1</h4>

<h5>Đề mục 1.1.1.1</h5>

<h6>Đề mục con 1.1.1.1.1</h6>

b. Thẻ định dạng chữ

Định dạng chữ cũng giống như trong các phần mềm soạn thảo văn bản, Trong HTML cũng vậy chữ cũng được định dạng: in đậm, chữ nghiêng,… Bạn chỉ cần gọi và sử dụng các thẻ để định dạng được kiểu chữ mình muốn

01

02

03

04

<b>Tô đậm</b>

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

c. Thẻ phân đoạn

01

02

03

04

05

06

<p>Đoạn văn bản</p>

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

<blockquote>Nguồn bài viết</blockquote>

d. Thẻ tạo danh sách

Có hai loại danh sách trong HTML đó là: Danh sách đánh số thứ tự nằm trong thẻ <ol></ol>, Danh sách không đánh số thứ tự nằm trong cặp thẻ <ul></ul>

01

02

03

04

05

06

07

08

09

10

<ol>

<li>Phần tử 1</li>

<li>Phần tử 2</li>

</ol>

<ul>

<li>Phần tử 1</li>

<li>Phần tử 2</li>

</ul>

e. Thẻ liên kết

01

02

<a href=”địa chỉ liên kết”>Đây là một liên kết</a>

<a href=”địa chỉ liên kết” target=”_blank”>Liên kết này sẽ mở ở cửa sổ mới</a>

f. Thẻ hình ảnh

01 <img src=”đường dẫn đến ảnh” alt=”chú thích cho ảnh”/>

>>Xem thêm: Phần 2: CSS căn bản

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *