mở đầu bắt buộc. Khi HTML mới xuất hiên (1991-1992), Doctype có nghĩa là hoạt động như các liên kết đến một tập hợp các quy tắc mà trang HTML phải tuân theo để được coi là HTML tốt, có thể kiểm tra lỗi tự động và những hữu ích khác. Tuy nhiên, ngày nay chúng không làm được những điều gì và về cơ bản chỉ cần thiết để đảm bảo tài liệu của bạn hoạt động chính xác. <html></html>(The <html> element) Phần tử này bao bọc hết tất cả nội dung trên toàn bộ trang và đôi khi gọi là phần tử gốc.
Nó cũng bao gồm thuộc tính, thiết lập ngôn ngữ chính xác của tài liệu. <head></head>(The <head> element): Phần tử này hoạt động như một vùng chứa cho tất cả nội dung bạn muốn đưa vào trang HTML không phải alf nội dung bạn đang hiển thị cho người xem trang của mình. Điều này bao gồm những thứ như keyword và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS để tạo ra kiểu cho nội dung, khai báo bộ ký tự và hơn thế nữa. <meta charset=“utf-8”>: Phần tử này đặt bộ ký tự mà tài liệu của bạn nên sự dụng thành UTF-8, bao gồm gần hết các ký tự từ phần lớn các ngôn ngữ viết.
<meta name= “viewport” content= “witdth=device-width”> (Viewport element): Phần tử này đảm bảo trang hiển thị ở độ rộng của khung nhìn, ngăn trình duyệt di động hiển thị các trang rộng hơn chế độ xem và sau đó thu nhỏ chúng xuống. <title></<title> (The title element): Phần tử này đặt tiêu đề trang của bạn, là tiêu đề xuất hiện trong tab trình duyệt mà trang được tải. Nó cũng được sử dụng để mô tả trang khi bạn đánh dấu yêu thích nó. <body></body> (The body element): Phần tử chứa tất cả nội dung mà bạn muốn hiện thị cho người dùng web khi họ muốn truy cập vào trang của bạn, cho dù đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phá hay bất cứ thứ gì khác.4 Tạo trang Web với tiêu đề, đoạn văn bản, hình ảnh và siêu liên kết Tiêu đề: Các phần tử tiêu đề (heading elements) cho phép bạn chỉ định rằng một số phần nhất định trong nội dung của bạn là tiêu đề hoặc tiêu đề phụ.
Theo cùng một cách mà một cuốn sách có tiêu đề chính, tiêu đề chương và phụ đề, một tài liệu HTML cũng có thể. HTML chứa 6 cấp độ tiêu đề, từ <h1> đến <h6>, mặc dù bạn thường chỉ sử dụng tối đa 3 đến 4.1 Các thẻ tiêu đề HTML Đoạn văn bản: Các phần tử <p> là để chứa các đoạn văn bản. Bạn sẽ xử dụng chúng thường xuyên khi đánh dấu nội dung văn bản thông thường.2 Thẻ p trong HTML Danh sách: Rất nhiều nội dung của web là danh sách và HTML các yếu tố đặc biệt cho những điều này. Danh sách đánh dấu luôn bao gồm ít nhất 2 yếu tố.
Các loại danh sách phổ biến nhất là danh sách thứ tự và không có thứ tự o Danh sách không có thứ tự dành cho các danh sách mà thứ tự của các mặt hàng không quan trọng, chẳng hạn như danh sách mua sắm. Chúng được bọc trong một thẻ <ul>. o Danh sách có thứ tự dành cho các danh sách mà thứ tự của các mặt hàng quan trọng, chẳng hạn như công thức. Chúng được bọc trong thẻ <ol>.
Mỗi mục bên trong danh sách được đặt bên trong thẻ <li>. 13 Ví dụ: chúng ta muốn biến một phần của đoạn văn sau thành một danh sách 14 Chúng ta có thể sửa đổi đánh dấu thành thế này: Hình 1.3 Thẻ danh sách không có thứ tự Liên kết: Liên kết rất quan trọng, chúng là những gì làm cho web trở thành một trang web. Để thêm một liên kết, chúng ta cần sử dụng một thẻ đơn giản <a>. “a” là viết tắt của “anchor”.
Để đặt văn bản trong đoạn văn của bạn thành một liên kết, hãy làm như sau: Đặt dòng văn bản vào trong phần tử <a> như hình dưới đây: Hình 1.4 Thẻ a trong HTML Cung cấp cho phần tử <a> một thuộc tính: Hình 1.5 Thuộc tính trong thẻ a Điền giá trị của thuộc tính này bằng địa chỉ web mà bạn muốn liên kết đến: 15 Hình 1.6 Gắn địa chỉ vào thẻ a Bạn có thể nhận được kết quả không mong muốn nếu bạn bỏ qua giao thức, ở đầu địa chỉ web. Sau khi tạo liên kết, hãy nhấp vào liên kết đó để đảm bảo rằng nó đang gửi cho bạn nơi bạn muốn. Cơ bản về CSS 2.1 CSS – Thêm kiểu cho web CSS (Cascading Style Sheets) : Là công nghệ đầu tiên bạn nên bắt đầu học sau HTML. Trong khi HTML được sử dụng để xác định cấu trúc và ngữ nghĩa của nội dung thì CSS được sử dụng để tạo kiểu và bố trí nó.
Ví dụ: bạn có thể sử dụng CSS để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, chia nó thành nhiều cột hoặc thêm đoạn ảnh và các tính năng trang trí khác.1 Inline CSS (CSS trực tiếp trong phần tử HTML – Nội tuyến) Phương pháp này, bạn thêm kiểu CSS trực tiếp vào một phần tử HTML cụ thể bằng thuộc tính `style`. Điều này hữu ích khi bạn muốn tùy chỉnh một phần tử duy nhất. Thuộc tính style có thể chứa bất kì thuộc tính CSS nào.1 CSS Nội tuyến Tránh sử dụng CSS theo cách này, khi có thể. Nó trái ngược với một thực tiễn tốt nhất.
Đầu tiên, nó là việc triển khai CSS kém hiệu quả nhất để bảo trì. Một thay đổi kiểu dáng có thể yêu cầu nhiều chỉnh sửa trong một trang Web. Thứ hai, CSS nội tuyến cũng kết hợp mã trình bày (CSS) với HTML và nội dung, làm cho mọi thứ khó đọc và hiểu hơn. Tách mã và nội dung giúp bảo trì dễ dàng hơn cho tất cả những người làm việc trên trang Web.
Có một vài trường hợp mà kiểu nội tuyến phổ biến hơn. Bạn có thể phải sử dựng các kiểu nội tuyến nếu môi trường làm việc của bạn rất hạn chế.2 Internal CSS (CSS trong tệp HTML – Nội bộ) Phương pháp này, bạn đặt mã CSS trực tiếp trong thẻ `<style>` của tệp HTML. Điều này thích hợp cho việc tạo kiểu cho một trang Web cụ thể mà bạn không muốn chia sẻ kiểu đó với các trang khác. HTML cho kiểu nội bộ có thể trông như thế này: Hình 2.2 CSS nội bộ Trong một số trường hợp, kiểu nội bộ có thể hữu ích.
Ví dụ: nếu bạn đang làm việc với một hệ thống quản lý nội dung nơi bạn bị chặn sửa đổi các tệp CSS bên ngoài. Nhưng đối với các trang Web có nhiều hơn một trang, kiểu nội bộ trở thành một các làm việc kém hiệu quả hơn. Để áp dụng kiểu CSS thống nhất cho nhiều trang bằng cách sử dụng kiểu nội bộ, bạn phải có một kiểu nội bộ trong mỗi trang web. Với CSS trong kiểu nội bộ, có nguy cơ ngay cả một thay đổi kiểu đơn giản cũng có thể yêu cầu chính sửa nhiều trang Web.3 External CSS (CSS bên ngoài) Trong phương pháp này, bạn tạo một tệp CSS riêng biệt (Ví dụ: `style.css`) chứa tất cả các kiểu của bạn và sau đó liên kết tệp CSS này với trang web của bạn bằng thẻ `<link>` trong phần `<head>` của tệp HTML.
Tham chiếu một kiểu CSS bên ngoài từ thẻ HTML `<link>` : 17 Hình 2.3 CSS bên ngoài Tệp biểu định kiểu CSS có thể trông như này: Hình 2.4 tệp biểu định kiểu CSS Thuộc tính của thẻ <link> cần thamn chiếu đến một tệo trên hệ thống của bạn. Trong ví dụ trên, tệp CSS nằm trong vùng thư mục với tài liệu HTML, nhưng bạn có thể đặt nó ở một nơi khác và điều chỉnh đường dẫn. Đây là phương pháp phổ biến và hữu ích nhất để đưa CSS vào tài liệu. bạn có thể liên kết một tệp CSS duy nhất với nhiều trang Web, tạo kiểu cho tất cả chúng bằng cùng một biểu định CSS.2 Tạo các lớp và áp dụng kiểu bằng cách sử dụng lựa chọn Đầu tiên, trong tệp tin CSS riêng hoặc phần `<style>` của tệp tin HTML, tạo một lớp bằng cách sử dụng dấu chấm "." trước tên lớp của bạn.1 Kiểu của lớp 18 Sau đó, trong phần tử HTML mà bạn muốn áp dụng kiểu cho, thêm thuộc tính "class" với giá trị là tên lớp mà bạn đã tạo.2 Ví dụ thêm Class để áp dụng CSS Bây giờ, trong phần CSS có thể sử dụng lựa chọn `.` kết hợp với tên lớp để áp dụng kiểu cho các phần tử có lớp tương ứng.3 Lựa chọn CSS để áp dụng kiểu Trong ví dụ trên, chúng ta đã tạo một lớp có tên là "my-class" và áp dụng kiểu màu chữ, kích thước chữ, phông chữ và kiểu phông chữ cho mọi phần tử có lớp đó.
Có thể áp dụng một lớp cho nhiều phần tử khác nhau trong tệp HTML bằng cách thêm <p class="my-class">Đây là một đoạn văn bản</p> <h1 class="my-class">Xin chào đây là trang web của tôi</h1> Như vậy, tất cả đoạn văn bản và tiêu đề có lớp "my-class" sẽ được áp dụng vào cả 2 kết quả như sau 19 2.3 Thử nghiệm với các thuộc tính CSS cơ bản như font chữ, màu sắc, độ rộng và chiều cao Để thử nghiệm các thuộc tính CSS cơ bản như font chữ, màu sắc, độ rộng và chiều cao, bạn có thể làm như sau: 2.1 Font chữ Sử dụng thuộc tính `font-family` để đặt font chữ cho một phần tử. Ví dụ: `font-family: Arial, sans-serif;` Sử dụng thuộc tính `font-size` để đặt kích thước font chữ. Ví dụ: `font- size: 16px; ` 2.2 Màu sắc Sử dụng thuộc tính `color` để đặt màu chữ cho một phần tử. Ví dụ:`color: blue;` Sử dụng thuộc tính `background-color` để đặt màu nền cho một phần tử.
Ví dụ: `background-color: yellow;` 2.3 Độ rộng và chiều cao Sử dụng thuộc tính `width` để đặt độ rộng cho một phần tử. Ví dụ: `width: 300px;` Sử dụng thuộc tính `height` để đặt chiều cao cho một phần tử. Ví dụ: `height: 50px;` Thử nghiệm các thuộc tính này bằng cách thêm chúng vào phần CSS của trang web của bạn.1 Thử nghiệm các thuộc tính CSS 20 Ngoài ra, CSS có các thuộc tính khác như `padding`, `margin`, `border`, và nhiều thuộc tính khác để tùy chỉnh kiểu cho phần tử trong trang web của bạn `padding`: Được sử dụng để tạo khoảng cách giữa nội dung bên trong phần tử và viền của phần tử. thể đặt giá trị padding cho các cạnh riêng biệt hoặc sử dụng thuộc tính `padding-top`, `padding-right`, `padding-bottom` và `padding-left` để chỉ định giá trị cho từng cạnh một cách riêng lẻ.
`margin`: Được sử dụng để tạo khoảng cách giữa các phần tử. Khác với `padding`, `margin` không ảnh hưởng đến nội dung bên trong phần tử.