HTML Documents là gì?
Tất cả HTML document đều phải được bắt đầu với thẻ: <!DOCTYPE html>.
Nội dung HTML document sẽ bắt đầu bằng thẻ <html> và kết thúc với thẻ </html>.
Phần hiển thị chính của HTML document sẽ nằm giữa thẻ <body> và thẻ </body>.
Ví dụ
<!DOCTYPE html> <html> <body> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p> </body> </html>
Khai báo thẻ <!DOCTYPE>
Thẻ <!DOCTYPE> sẽ giúp cho trình duyệt biết phiên bản ngôn ngữ đánh dấu đang sử dụng và giúp trình duyệt hiển thị nội dung một cách chính xác.
Thẻ <!DOCTYPE> chỉ được khai báo một lần duy nhất, nó sẽ được đặt đầu trang (trước tất cả các thẻ HTML).
Thẻ <!DOCTYPE> không phân biệt chữ cái hoa thường.
Thẻ <!DOCTYPE> được khai báo trong HTML5 như sau:
<!DOCTYPE html>
HTML Heading
HTML Heading được định nghĩa từ thẻ <h1> đến thẻ <h6>.
Thẻ <h1> dùng để xác định những tiêu đề quan trọng trong khi thẻ <h6> xác định tiêu đề ít quan trọng hơn:
Ví dụ
<h1>Tiêu đề 1</h1> <h2>Tiêu đề 2</h2> <h3>Tiêu đề 3</h3>
HTML Paragraph
HTML Paragraph được định nghĩa bằng thẻ <p>:
Ví dụ
<p>Đoạn văn bản.</p> <p>Đoạn văn bản khác.</p>
HTML Link
HTML Link được định nghĩa bằng thẻ <a>:
Ví dụ
<a href="https://truonghoclaptrinh.com/">Đường dẫn đến Trường học lập trình</a>
Đường link sẽ được khai báo trong attribute href .
Các attribute được dùng để cung cấp các thông tin bổ sung cho các HTML element.
Bạn sẽ được học chi tiết về các attribute trong những phần sau.
HTML Image
HTML Image được định nghĩa bằng thẻ <img>.
Đường dẫn hình ảnh (src), văn bản thay thế (alt), width, và height là những attribute:
Ví dụ
<img src="https://truonghoclaptrinh.com/images/blog/lap-trinh-web.jpg" alt="truonghoclaptrinh.com" width="104" height="142">
Cách xem nguồn HTML của bất kỳ website nào
Bạn đã bao giờ xem một trang web và đặt câu hỏi "Làm sao thế nào mà nó có thể hiển thị được như thế?"
Xem nguồn HTML Code:
Chuột phải vào trang HTML và chọn "View Page Source" (trên Chrome) hoặc "View Source" (trên Edge), hoặc tương tự với những trình duyệt khác. Một cửa sổ mới sẽ mở ra và cho ta xem tất cả nguồn HTML code của trang đó.
Inspect HTML Element:
Chuột phải vào một element bất kỳ (hoặc một khu vực trống), và chọn "Inspect" hoặc "Inspect Element" để thấy một element được tạo thành như thế nào (có thể xem cả HTML và CSS của element). Bạn cũng có thể chỉnh sửa HTML hoặc CSS ngay tại Elements hoặc Styles panel đang được mở.