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
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 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>Bạn hãy tạo 1 file text có đuôi .html và copy đoạn code trên vào file đó rồi save lại.
Sau đó mở file đó lên bằng trình duyệt. Đây là kết quả:
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"/>
Các thẻ ở trên là hay được sử dụng nhất. Tuy nhiên bạn có thể xem tất cả các thẻ ở trang w3Schools
Kết thúc phần này các bạn sẽ biết được cấu trúc cơ bản của file html, các mẹo nhỏ khi viết code và các thẻ sử dụng thường xuyên.
Trong series :
')}
