HTML là gì?
Khái niệm.
HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản. Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,…
HTML hoạt động như thế nào ?
HTML document có đuôi file dạng .html hoặc htm. Bạn có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari,… Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.
Cú pháp
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Khai báo <!DOCTYPE html>xác định rằng tài liệu này là một tài liệu HTML5
Phần <html>tử là phần tử gốc của một trang HTML
Phần <head>tử chứa thông tin meta về trang HTML
Phần <title>tử chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)
Phần <body>tử xác định nội dung của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
Phần <h1>tử xác định một tiêu đề lớn
Phần <p>tử xác định một đoạn văn
Phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:
< tagname > Nội dung ở đây … < / tagname >
Phần tửHTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:
< h1 > Tiêu đề đầu tiên của tôi < / h1 >
< p > Đoạn đầu tiên của tôi. < / p >
Các thuộc tính cơ bản
Thuộc tính HTML
Tất cả các phần tử HTML có thể có các thuộc tính
Các thuộc tính cung cấp thông tin bổ sung về các phần tử
Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
Các thuộc tính thường có trong các cặp tên / giá trị như: name = “value”
Có hai cách để chỉ định URL trong src thuộc tính:
URL tuyệt đối – Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src = “https://www.w3schools.com/images/img_girl.jpg” .
Ghi chú: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.
URL tương đối – Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src = “img_girl.jpg”. Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến miền. Ví dụ: src = “/ images / img_girl.jpg”.
Mẹo: Tốt nhất là sử dụng các URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi tên miền.
Phần tử HTML <p>xác định một đoạn văn.
Một đoạn văn luôn bắt đầu trên một dòng mới và các trình duyệt sẽ tự động thêm một số khoảng trắng (lề) vào trước và sau một đoạn văn.
Hiển thị HTML
Bạn không thể chắc chắn HTML sẽ được hiển thị như thế nào.
Màn hình lớn hay nhỏ và các cửa sổ được thay đổi kích thước sẽ tạo ra các kết quả khác nhau.
Với HTML, bạn không thể thay đổi cách hiển thị bằng cách thêm khoảng trắng hoặc dòng thừa trong mã HTML của mình.
Trình duyệt sẽ tự động loại bỏ bất kỳ khoảng trắng và dòng thừa nào khi trang được hiển thị
Thuộc tính HTML styleđược sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
Màu nền
Thuộc tính CSS background-colorxác định màu nền cho một phần tử HTML.
Thuộc tính kiểu chữ
Các phần tử định dạng HTML
Các phần tử định dạng được thiết kế để hiển thị các loại văn bản đặc biệt:
<b>- Chữ in đậm
<strong>- Văn bản quan trọng
<i>- Văn bản in nghiêng
<em>- Đoạn văn bản được nhấn mạnh
<mark>- Văn bản được đánh dấu
<small>- Văn bản nhỏ hơn
<del>- Văn bản đã xóa
<ins>- Đã chèn văn bản
<sub>- Văn bản chỉ số
<sup>- Văn bản siêu cấp
HTML <blockquote> cho Trích dẫn
Phần tử HTML <blockquote>xác định một phần được trích dẫn từ một nguồn khác.
Trình duyệt thường thụt lề <blockquote>các phần tử.
Thuộc tính color
Màu HTML được chỉ định bằng tên màu xác định trước hoặc với các giá trị RGB, HEX, HSL, RGBA hoặc HSLA.
Màu border:
Kiểu HTML – CSS
Css là gì?
CSS là viết tắt của Cascading Style Sheets.
CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc
Sử dụng CSS
CSS có thể được thêm vào tài liệu HTML theo 3 cách:
Nội tuyến – bằng cách sử dụng stylethuộc tính bên trong các phần tử HTML
Nội bộ – bằng cách sử dụng một <style>phần tử trong <head>phần
Bên ngoài – bằng cách sử dụng một <link> phần tử để liên kết với một tệp CSS bên ngoài
Cách phổ biến nhất để thêm CSS là giữ các kiểu trong các tệp CSS bên ngoài. Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ sử dụng các kiểu nội dòng và kiểu nội bộ, vì điều này dễ chứng minh hơn và bạn cũng dễ dàng tự mình thử nó hơn.
CSS nội tuyến
CSS nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một phần tử HTML.
CSS nội tuyến sử dụng stylethuộc tính của một phần tử HTML.
Ví dụ sau đặt màu văn bản của <h1>phần tử thành màu xanh lam và màu văn bản của <p>phần tử thành màu đỏ:
CSS nội bộ được sử dụ
CSS nội bộ
ng để xác định kiểu cho một trang HTML.
CSS nội bộ được định nghĩa trong <head>phần của trang HTML, bên trong một <style>phần tử.
Ví dụ sau đặt màu văn bản của TẤT CẢ các <h1>phần tử (trên trang đó) thành màu xanh lam và màu văn bản của TẤT CẢ các <p>phần tử thành màu đỏ. Ngoài ra, trang sẽ được hiển thị với màu nền “bột màu”:
CSS bên ngoài
Biểu định kiểu bên ngoài được sử dụng để xác định kiểu cho nhiều trang HTML.
Để sử dụng biểu định kiểu bên ngoài, hãy thêm liên kết đến biểu định kiểu này trong <head>phần của mỗi trang HTML:
Biểu định kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào. Tệp không được chứa bất kỳ mã HTML nào và phải được lưu bằng phần mở rộng .css.
Đây là tệp “styles.css” trông như thế nào:
Màu sắc, phông chữ và kích thước CSS
Ở đây, chúng tôi sẽ trình bày một số thuộc tính CSS thường được sử dụng. Bạn sẽ tìm hiểu thêm về chúng sau.
Thuộc tính CSS colorxác định màu văn bản sẽ được sử dụng.
Thuộc tính CSS font-familyxác định phông chữ sẽ được sử dụng.
Thuộc tính CSS font-sizexác định kích thước văn bản sẽ được sử dụng