Bài hướng dẫn HTML, CSS & Javascript cơ bản hôm nay sẽ giới thiệu về HTML
Phần giới thiệu mình đã có nói qua về HTML, CSS & Javascript rồi nên hôm nay vào vấn đề chính luôn.
Nội dung
II. Hướng dẫn HTML cơ bản :
1. Cấu trúc của HTML
- Mọi trang HTML đều phải khai báo <!DOCTYPE html> (đị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ị.
<!DOCTYPE html>
<html>
<head>
<title>Đây là title nơi xuất hiện ở cái tab trên trình duyệt</title>
</head>
<body>
<h1>Thẻ heading lớn nhất</h1>
<b>Thẻ in đậm</b>
<strong>Thẻ in đậm 2</strong>
<!-- Thẻ in đậm có thể là <b> hoặc <strong> -->
<i>Thẻ in nghiêng</i>
</body>
</html>
Sau đó mở file đó lên bằng trình duyệt. Đây là kết quả:
Xin chúc mừng, bạn đã làm xong bước đầu tiên :v
2. Tips :
- 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>,….. ( làm nhiều sẽ quen :v)
- 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.
- Một số cặp thẻ sẽ không thể nằm trong cặp thẻ khác Ví dụ <div> không thể lồng trong <a>
- Mình sẽ xây dựng 1 tool cho các bạn tha hồ chơi ^^.
- Đề 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.
<h1>Tiêu đề bài viết : 300 bài hát thiếu nhi</h1> <h2>Phần 1 </h2> <h3>Chương 1.1</h3> <h4>Bí kiếp 1.1.1</h4> <h5>Đề mục 1.1.1.1</h5> <h6>Đề mục con 1.1.1.1.1</h6>
- Định dạng Text:
<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> <h6>Đề mục con 1.1.1.1.1</h6>
- 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--> <p>Đoạn văn bản</p> <!-- Comment: br là thẻ đơn, nên bạn không cần thẻ đóng --> Xuống dòng với <br> <!-- Comment: trích dẫn từ nguồn khác --> <blockquote>"Tocotoco Cộng Hòa lầu 2 có camera ở trái nha mày" ~ Bạn tui :v</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>.
<!-- Comment: Danh sách có sắp xếp thứ tự --> <ol> <li>Nhịp 1</li> <li>Nhịp 2</li> <li>Nhịp 3</li> <li>Nhịp 5</li> </ol> <!-- Comment: Danh sách không sắp xếp thứ tự --> <ul> <li>Phần tử 1</li> <li>Phần tử 2</li> </ul>
- Liên kết:
<!-- Comment: Mấy người hay xin link nên biết cái này :)) --> <a href="https://....">Đây là một liên kết</a> <a href="https://...." target="_blank">Liên kết này sẽ mở ở cửa sổ mới</a>
- Ảnh:
<img src="đường dẫn đến ảnh" alt="nếu không thấy đường dẫn thì sẽ hiện ra dòng này"/>
')}