Hướng dẫn lập trình HTML5 - W3schools
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (492.29 KB, 96 trang )
I.
HTML Cơ bản
1.
Tài liệu HTML
Tất cả các tài liệu HTML phải bắt đầu với một tuyên bố loại tài liệu: <!DOCTYPE html>.
Bản thân tài liệu HTML bắt đầu bằng <html>và kết thúc bằng </html>.
Phần hiển thị của tài liệu HTML nằm giữa <body>và </body>.
Thí dụ
<!DOCTYPE html>
<html>
<body>
My First Heading
My first paragraph.
</body>
</html>
2.
Tiêu đề HTML
Tiêu đề HTML được định nghĩa với
để thẻ.
xác định tiêu đề quan trọng nhất. xác định tiêu đề quan trọng nhất:
Thí dụ
This is heading 1
This is heading 2
This is heading 3
3.
Đoạn HTML
Đoạn HTML được xác định bằng
xác định tiêu đề quan trọng nhất. xác định tiêu đề quan trọng nhất:
Thí dụ
This is heading 1
This is heading 2
This is heading 3
3.
Đoạn HTML
Đoạn HTML được xác định bằng
Thí dụ
This is heading 1
This is heading 2
This is heading 3
3.
Đoạn HTML
Đoạn HTML được xác định bằng
thẻ:
Thí dụ
This is a paragraph.
This is another paragraph.
4.
Liên kết HTML
Các liên kết HTML được xác định bằng <a>thẻ:
Thí dụ
<a href="">This is a link</a>
Điểm đến của liên kết được chỉ định trong hrefthuộc tính.
Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về các phần tử HTML.
Bạn sẽ tìm hiểu thêm về các thuộc tính trong chương sau.
5.
Hình ảnh HTML
Hình ảnh HTML được xác định bằng <img>thẻ.
Tệp nguồn ( src), văn bản thay thế ( alt) width, và heightđược cung cấp dưới dạng thuộc
tính:
Thí dụ
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
6.
Các nút HTML
Các nút HTML được xác định bằng <button>thẻ:
Thí dụ
<button>Click me</button>
7.
Danh sách HTML
Danh sách HTML được định nghĩa với <ul>(danh sách không có thứ tự / dấu đầu dòng)
hoặc thẻ (danh sách được <ol>sắp xếp / đánh số), theo sau là <li>các thẻ (các mục danh
sách):
Thí dụ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
II)
Các thành phần HTML:
Phần tử HTML thường bao gồm thẻ bắt đầu và thẻ kết thúc , với nội dung được chèn vào
giữa:
< tagname > Nội dung ở đây ... < / tagname >
Phần tử HTML là mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:
< p > Đoạn đầu tiên của tôi. < / p >
Các phần tử HTML không có nội dung được gọi là các phần tử rỗng. Các phần tử trống
không có thẻ kết thúc, chẳng hạn như phần tử
(cho biết dấu ngắt dòng).
1.
Các phần tử HTML lồng nhau
Các phần tử HTML có thể được lồng vào nhau (các phần tử có thể chứa các phần tử).
Tất cả các tài liệu HTML bao gồm các phần tử HTML lồng nhau.
Ví dụ này chứa bốn phần tử HTML:
Thí dụ
<!DOCTYPE html>
<html>
<body>
My First Heading
My first paragraph.
</body>
</html>
Ví dụ giải thích
Phần <html>tử xác định toàn bộ tài liệu .
Nó có thẻ bắt đầu <html> và thẻ kết thúc </ html>.
Nội dung phần tử là một phần tử HTML khác ( <body>phần tử).
<html>
<body>
My First Heading
My first paragraph.
</body>
</html>
Phần <body>tử xác định phần thân của tài liệu .
Nó có thẻ bắt đầu <body> và thẻ kết thúc </ body>.
Nội dung phần tử là hai phần tử HTML khác (
và
).
<body>
My First Heading
My first paragraph.
</body>
Phần
tử định nghĩa một tiêu đề .
Nó có thẻ bắt đầu và thẻ kết thúc </ h1>.
Nội dung phần tử là: Tiêu đề đầu tiên của tôi.
My First Heading
Phần
Nội dung phần tử là: Tiêu đề đầu tiên của tôi.
My First Heading
Phần
tử định nghĩa một đoạn .
Nó có một sự khởi đầu tag
và cuối thẻ </ p>.
Nội dung phần tử là: Đoạn đầu tiên của tôi.
My first paragraph.
2.
Đừng Quên Thẻ Kết Thúc
Một số phần tử HTML sẽ hiển thị chính xác, ngay cả khi bạn quên thẻ kết thúc:
Thí dụ
<html>
<body>
This is a paragraph
This is a paragraph
</body>
</html>
Ví dụ trên hoạt động trong tất cả các trình duyệt, vì thẻ đóng được coi là tùy chọn.
Không bao giờ dựa vào điều này. Nó có thể tạo ra kết quả không mong muốn và /
hoặc lỗi nếu bạn quên thẻ kết thúc.
3.
Các phần tử HTML trống
Các phần tử HTML không có nội dung được gọi là các phần tử rỗng.
là phần tử trống không có thẻ đóng (
thẻ xác định ngắt dòng).
Các phần tử trống có thể được "đóng" trong thẻ mở như sau:
.
HTML5 không yêu cầu phải đóng các phần tử rỗng. Nhưng nếu bạn muốn xác nhận chặt
chẽ hơn, hoặc nếu bạn cần làm cho tài liệu của bạn có thể đọc được bằng các trình phân
tích cú pháp XML, bạn phải đóng tất cả các phần tử HTML đúng cách.
4.
Sử dụng thẻ chữ thường
Các thẻ HTML không phân biệt chữ hoa chữ thường: <P> có nghĩa là
.
Tiêu chuẩn HTML5 không yêu cầu thẻ chữ thường, nhưng W3C đề xuất chữ thường
trong HTML và yêu cầu chữ thường cho các loại tài liệu chặt chẽ hơn như XHTML.
III) 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ề một phần tử
Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
Thuộc tính thường có các cặp tên / giá trị như: name = "value"
1.
Thuộc tính href
Các liên kết HTML được xác định bằng <a>thẻ. Địa chỉ liên kết được chỉ định
trong hrefthuộc tính:
Thí dụ
<a href="">This is a link</a>
Bạn sẽ tìm hiểu thêm về các liên kết và <a>thẻ sau trong hướng dẫn này.
2.
Thuộc tính src
Hình ảnh HTML được xác định bằng <img>thẻ.
Tên tệp của nguồn hình ảnh được chỉ định trong srcthuộc tính:
Thí dụ
<img src="img_girl.jpg">
3.
Thuộc tính chiều rộng và chiều cao
Hình ảnh trong HTML có một tập hợp các thuộc tính kích thước , chỉ định chiều rộng và
chiều cao của hình ảnh:
Thí dụ
<img src="img_girl.jpg" width="500" height="600">
Kích thước hình ảnh được chỉ định bằng pixel: width = "500" có nghĩa là rộng 500 pixel.
4.
Thuộc tính alt
Các altthuộc tính xác định một văn bản thay thế sẽ được sử dụng, khi một hình ảnh không
thể được hiển thị.
Giá trị của thuộc tính có thể được đọc bởi trình đọc màn hình. Bằng cách này, một người
nào đó "nghe" đến trang web, ví dụ như một người mù, có thể "nghe" yếu tố đó.
Thí dụ
<img src="img_girl.jpg" alt="Girl with a jacket">
5.
Thuộc tính alt
Các altthuộc tính xác định một văn bản thay thế sẽ được sử dụng, khi một hình ảnh không
thể được hiển thị.
Giá trị của thuộc tính có thể được đọc bởi trình đọc màn hình. Bằng cách này, một người
nào đó "nghe" đến trang web, ví dụ như một người mù, có thể "nghe" yếu tố đó.
Thí dụ
<img src="img_girl.jpg" alt="Girl with a jacket">
6.
Thuộc tính kiểu
Các stylethuộc tính được sử dụng để xác định phong cách của một phần tử, như màu sắc,
font chữ, kích thước, vv
Thí dụ
I am a paragraph
Bạn sẽ tìm hiểu thêm về tạo kiểu sau trong hướng dẫn này và trong Hướng dẫn CSS của
chúng tôi .
7.
Thuộc tính lang
Ngôn ngữ của tài liệu có thể được khai báo trong <html>thẻ.
Ngôn ngữ được khai báo với langthuộc tính.
Tuyên bố ngôn ngữ là quan trọng đối với các ứng dụng trợ năng (trình đọc màn hình) và
các công cụ tìm kiếm:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Hai chữ cái đầu tiên chỉ định ngôn ngữ (en). Nếu có một phương ngữ, hãy sử dụng thêm
hai chữ cái nữa (US).
8.
Tiêu đề Thuộc tính
Ở đây, một titlethuộc tính được thêm vào
phần tử. Giá trị của thuộc tính tiêu đề sẽ
được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua đoạn:
Thí dụ
This is a paragraph.
IV)
Tiêu đề HTML
Headings được định nghĩa với
để thẻ.
xác định tiêu đề quan trọng nhất. định nghĩa tiêu đề ít quan trọng nhất.
Thí dụ
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
1.
Tiêu đề quan trọng
Công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang
web của bạn.
Người dùng lướt qua các trang của bạn theo các tiêu đề của nó. Điều quan trọng là sử
dụng các tiêu đề để hiển thị cấu trúc tài liệu.
tiêu đề nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề, sau đó
ít quan trọng hơn , v.v.
Lưu ý: Chỉ sử dụng tiêu đề HTML cho tiêu đề. Không sử dụng tiêu đề để tạo văn
bản LỚN hoặc in đậm .
2.
Tiêu đề lớn hơn
Mỗi tiêu đề HTML có kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho
bất kỳ tiêu đề nào có stylethuộc tính, bằng cách sử dụng thuộc tính CSS font-size:
Thí dụ
Heading 1
3.
Quy tắc ngang HTML
Các <hr>thẻ định nghĩa một đột phá chuyên đề trong một trang HTML, và thường được
hiển thị như một quy luật ngang.
Phần <hr>tử được sử dụng để tách nội dung (hoặc xác định thay đổi) trong một trang
HTML:
Thí dụ
This is heading 1
xác định tiêu đề quan trọng nhất. định nghĩa tiêu đề ít quan trọng nhất.
Thí dụ
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
1.
Tiêu đề quan trọng
Công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang
web của bạn.
Người dùng lướt qua các trang của bạn theo các tiêu đề của nó. Điều quan trọng là sử
dụng các tiêu đề để hiển thị cấu trúc tài liệu.
tiêu đề nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề, sau đó
ít quan trọng hơn , v.v.
Lưu ý: Chỉ sử dụng tiêu đề HTML cho tiêu đề. Không sử dụng tiêu đề để tạo văn
bản LỚN hoặc in đậm .
2.
Tiêu đề lớn hơn
Mỗi tiêu đề HTML có kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho
bất kỳ tiêu đề nào có stylethuộc tính, bằng cách sử dụng thuộc tính CSS font-size:
Thí dụ
Heading 1
3.
Quy tắc ngang HTML
Các <hr>thẻ định nghĩa một đột phá chuyên đề trong một trang HTML, và thường được
hiển thị như một quy luật ngang.
Phần <hr>tử được sử dụng để tách nội dung (hoặc xác định thay đổi) trong một trang
HTML:
Thí dụ
This is heading 1
Thí dụ
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
1.
Tiêu đề quan trọng
Công cụ tìm kiếm sử dụng các tiêu đề để lập chỉ mục cấu trúc và nội dung của các trang
web của bạn.
Người dùng lướt qua các trang của bạn theo các tiêu đề của nó. Điều quan trọng là sử
dụng các tiêu đề để hiển thị cấu trúc tài liệu.
tiêu đề nên được sử dụng cho các tiêu đề chính, tiếp theo là các tiêu đề, sau đó
ít quan trọng hơn , v.v.
Lưu ý: Chỉ sử dụng tiêu đề HTML cho tiêu đề. Không sử dụng tiêu đề để tạo văn
bản LỚN hoặc in đậm .
2.
Tiêu đề lớn hơn
Mỗi tiêu đề HTML có kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho
bất kỳ tiêu đề nào có stylethuộc tính, bằng cách sử dụng thuộc tính CSS font-size:
Thí dụ
Heading 1
3.
Quy tắc ngang HTML
Các <hr>thẻ định nghĩa một đột phá chuyên đề trong một trang HTML, và thường được
hiển thị như một quy luật ngang.
Phần <hr>tử được sử dụng để tách nội dung (hoặc xác định thay đổi) trong một trang
HTML:
Thí dụ
This is heading 1
ít quan trọng hơn
, v.v.
Lưu ý: Chỉ sử dụng tiêu đề HTML cho tiêu đề. Không sử dụng tiêu đề để tạo văn
bản LỚN hoặc in đậm .
2.
Tiêu đề lớn hơn
Mỗi tiêu đề HTML có kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho
bất kỳ tiêu đề nào có stylethuộc tính, bằng cách sử dụng thuộc tính CSS font-size:
Thí dụ
Heading 1
3.
Quy tắc ngang HTML
Các <hr>thẻ định nghĩa một đột phá chuyên đề trong một trang HTML, và thường được
hiển thị như một quy luật ngang.
Phần <hr>tử được sử dụng để tách nội dung (hoặc xác định thay đổi) trong một trang
HTML:
Thí dụ
This is heading 1
This is some text.
<hr>
This is heading 2
This is some other text.
<hr>
4.
Phần tử HTML <head>
Phần <head>tử HTML không liên quan gì đến các tiêu đề HTML.
Phần <head>tử là vùng chứa siêu dữ liệu. Siêu dữ liệu HTML là dữ liệu về tài liệu
HTML. Siêu dữ liệu không được hiển thị.
Phần <head>tử được đặt giữa <html>thẻ và <body>thẻ:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Lưu ý: Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, liên kết, tập lệnh và
thông tin meta khác.
V)
Đoạn HTML
Phần
tử HTML định nghĩa một đoạn :
Thí dụ
This is a paragraph.
This is another paragraph.
1.
Hiển thị HTML
Bạn không thể chắc chắn cách HTML sẽ được hiển thị.
Màn hình lớn hoặc 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 đầu ra bằng cách thêm các khoảng trống thừa hoặc
các dòng thừa trong mã HTML của bạn.
Trình duyệt sẽ xóa mọi khoảng trắng thừa và các dòng thừa khi trang được hiển thị:
Thí dụ
This paragraph contains a lot of lines in the source code, but the browser
ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
2.
Đừng quên Thẻ kết thúc
Hầu hết các trình duyệt sẽ hiển thị HTML chính xác ngay cả khi bạn quên thẻ kết thúc:
Thí dụ
This is a paragraph.
This is another paragraph.
3.
Các ngắt dòng HTML
Phần
tử HTML xác định ngắt dòng .
Sử dụng
nếu bạn muốn ngắt dòng (một dòng mới) mà không bắt đầu một đoạn mới:
Thí dụ
This is
a paragraph
with line breaks.
Các
thẻ là một thẻ trống, có nghĩa là nó không có thẻ kết thúc.
4.
Phần tử HTML
Phầntử HTML định nghĩa văn bản được định dạng sẵn.
Văn bản bên trong mộtphần tử được hiển thị trong một phông chữ có chiều rộng cố
định (thường là Courier), và nó bảo toàn cả khoảng trắng và dấu ngắt dòng:
Thí dụ
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
VI)
Kiểu HTM
1.
Thuộc tính kiểu HTML
Đặt kiểu dáng của một phần tử HTML, có thể được thực hiện với stylethuộc tính.
styleThuộc tính HTML có cú pháp sau :
<tagname style="property:value;">
Các bất động sản là một tài sản CSS. Các giá trị là một giá trị CSS.
Bạn sẽ tìm hiểu thêm về CSS sau trong hướng dẫn này.
2.
Màu nền HTML
Các background-colorbất động sản xác định màu nền cho một phần tử HTML.
Ví dụ này đặt màu nền cho trang thành bột màu:
Thí dụ
<body style="background-color:powderblue;">This is a heading
This is a paragraph.
</body>
3.
Màu văn bản HTML
Các colorbất động sản xác định màu chữ cho một phần tử HTML:
Thí dụThis is a heading
This is a paragraph.
4.
Phông chữ HTML
Các font-familybất động sản xác định phông chữ được sử dụng cho một phần tử HTML:
Thí dụThis is a heading
This is a paragraph.
5.
Kích thước văn bản HTML
Các font-sizebất động sản xác định kích thước văn bản cho một phần tử HTML:
Thí dụThis is a heading
This is a paragraph.
6.
Căn chỉnh văn bản HTML
Các text-alignbất động sản xác định sự liên kết văn bản theo chiều ngang cho một phần tử
HTML:
Thí dụCentered Heading
Centered paragraph.
VII) Định dạng văn bản HTML
1.
Các phần tử định dạng HTML
Trong chương trước, bạn đã tìm hiểu về thuộc tính kiểu HTML .
HTML cũng định nghĩa các phần tử đặc biệt để xác định văn bản có ý nghĩa đặc biệt .
HTML sử dụng các phần tử như <b>và <i>cho định dạng đầu ra, như chữ in đậm hoặc in
nghiêng .
Các yếu 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ỏ
<del> - Văn bản đã xóa
<ins> - Văn bản được chèn
<sub> - Văn bản đăng ký
<sup> - Văn bản siêu văn bản
2.
HTML <b> và <strong> Phần tử
Phần <b>tử HTML xác định văn bản in đậm , không có bất kỳ tầm quan trọng nào.
Thí dụ
<b>This text is bold</b>
Phần <strong>tử HTML xác định văn bản mạnh mẽ , với tầm quan trọng "mạnh mẽ" ngữ
nghĩa bổ sung.
Thí dụ
<strong>This text is strong</strong>
3.
HTML <i> và <em> phần tử
Phần <i>tử HTML định nghĩa văn bản in nghiêng , không có bất kỳ tầm quan trọng nào
khác.
Thí dụ
<i>This text is italic</i>
Phần <em>tử HTML xác định văn bản được nhấn mạnh , với tầm quan trọng ngữ nghĩa
bổ sung.
Thí dụ
<em>This text is emphasized</em>
Lưu ý: Các trình duyệt hiển thị <strong>dưới dạng <b>và <em>như <i>. Tuy nhiên, có
một sự khác biệt trong ý nghĩa của các thẻ: <b>và <i>định nghĩa chữ in đậm và in
nghiêng, nhưng <strong>và <em>có nghĩa là văn bản là "quan trọng".
4.
HTML <small> Phần tử
Phần <small>tử HTML xác định văn bản nhỏ hơn :
Thí dụHTML <small>Small</small> Formatting
5.
HTML <mark> Phần tử
Phần <mark>tử HTML xác địnhđược đánh dấu hoặc là nhấn mạnh bản văn:
Thí dụHTML <mark>Marked</mark> Formatting
6.
Phần tử HTML <del>
Phần <del>tử HTML xác địnhđã xóa (đã xóa) văn bản.
Thí dụMy favorite color is <del>blue</del> red.
7.
Phần tử HTML <ins>
Phần <ins>tử HTML xác địnhđã chèn (đã thêm) văn bản.
Thí dụMy favorite <ins>color</ins> is red.
8.
Phần tử HTML <sub>
Phần <sub>tử HTML xác định văn bản được chỉ định .
Thí dụThis is <sub>subscripted</sub> text.
9.
Phần tử HTML <sup>
Phần <sup>tử HTML xác định văn bản siêu văn bản.
Thí dụThis is <sup>superscripted</sup> text.
VIII) Trích dẫn HTML và các yếu tố trích dẫn
1.
HTML <q> cho các trích dẫn ngắn
Phần <q>tử HTML định nghĩa một báo giá ngắn.
Các trình duyệt thường chèn dấu ngoặc kép xung quanh <q>phần tử.
Thí dụWWF's goal is to: <q>Build a future where people live in harmony with
nature.</q>
2.
HTML <blockquote> cho Báo giá
Phần <blockquote>tử HTML định nghĩa 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ử.
Thí dụHere is a quote from WWF's website:
<blockquote cite=" />For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
3.
HTML <abbr> cho các từ viết tắt
Phần <abbr>tử HTML định nghĩa một từ viết tắt hoặc một từ viết tắt.
Đánh dấu chữ viết tắt có thể cung cấp thông tin hữu ích cho các trình duyệt, hệ thống dịch
và công cụ tìm kiếm.
Thí dụThe <abbr title="World Health Organization">WHO</abbr> was founded in
1948.
4.
HTML <address> cho Thông tin Liên hệ
Phần <address>tử HTML định nghĩa thông tin liên hệ (tác giả / chủ sở hữu) của tài liệu
hoặc bài viết.
Phần <address>tử thường được hiển thị bằng chữ in nghiêng. Hầu hết các trình duyệt sẽ
thêm ngắt dòng trước và sau phần tử.
Thí dụ
<address>
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
</address>
5.
HTML <cite> cho tiêu đề công việc
Phần <cite>tử HTML xác định tiêu đề của một tác phẩm.
Trình duyệt thường hiển thị <cite>các phần tử in nghiêng.
Thí dụ<cite>The Scream</cite> by Edvard Munch. Painted in 1893.
6.
HTML <bdo> cho Ghi đè hai hướng
Phần <bdo>tử HTML định nghĩa ghi đè hai hướng.
Phần <bdo>tử được sử dụng để ghi đè hướng văn bản hiện tại:
Thí dụ
<bdo dir="rtl">This text will be written from right to left</bdo>
IX)
Nhận xét HTML
Thẻ nhận xét HTML
Bạn có thể thêm nhận xét vào nguồn HTML của mình bằng cách sử dụng cú pháp sau:
<!-- Write your comments here -->
Lưu ý rằng có một dấu chấm than (!) Trong thẻ mở, nhưng không có trong thẻ đóng.
Lưu ý: Nhận xét không được trình duyệt hiển thị, nhưng chúng có thể giúp tài liệu mã
nguồn HTML của bạn.
Với nhận xét, bạn có thể đặt thông báo và lời nhắc trong HTML của mình:
Thí dụ
<!-- This is a comment -->This is a paragraph.
<!-- Remember to add more information here -->
Nhận xét cũng tuyệt vời để gỡ lỗi HTML, bởi vì bạn có thể nhận xét các dòng mã HTML,
mỗi lần một, để tìm kiếm các lỗi:
Thí dụ
X)
Màu HTML
1.
Màu nền
Bạn có thể đặt màu nền cho các phần tử HTML:
Thí dụHello World
Lorem ipsum...
2.
Văn bản màu
Bạn có thể đặt màu văn bản:
Thí dụHello World
Lorem ipsum...
Ut wisi enim...
Màu đường viền
Bạn có thể đặt màu của đường viền:
Thí dụHello World
Giá trị màu
Trong HTML, màu sắc cũng có thể được chỉ định bằng cách sử dụng giá trị RGB, giá trị
HEX, giá trị HSL, giá trị RGBA và giá trị HSLA:
XI)
Kiểu HTML – CSS
1.
Tạo kiểu HTML bằng CSS
CSS là viết tắt của C ascading S tyle S heets.
CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các
phương tiện khác .
CSS tiết kiệm rất nhiều công sức . Nó có thể kiểm soát bố trí của nhiều trang web cùng
một lúc.
Có thể thêm CSS vào các phần tử HTML theo 3 cách:
Inline - bằng cách sử dụng thuộc tính style trong các phần tử HTML
Nội bộ - bằng cách sử dụng <style>phần tử trong <head>phần
Bên ngoài - bằng cách sử dụng 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 riêng biệt. Tuy nhiên,
ở đây chúng tôi sẽ sử dụng kiểu nội tuyến và kiểu nội bộ, vì điều này dễ dàng hơn để
chứng minh và bạn dễ dàng tự mình thử nó hơn.
Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi .
2.
CSS nội dòng
Một 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
duy nhất.
CSS nội tuyến sử dụng thuộc tính kiểu của phần tử HTML.
Ví dụ này đặt màu văn bản củaphần tử thành màu xanh:
Thí dụThis is a Blue Heading
3.
CSS nội bộ
Một CSS nội bộ được sử dụng để xác định một kiểu cho một trang HTML duy nhất.
Một CSS nội bộ được định nghĩa trong <head>phần của một trang HTML, bên trong
một <style>phần tử:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>This is a heading
This is a paragraph.
</body>
</html>
4.
CSS bên ngoài
Một bảng định kiểu bên ngoài được sử dụng để xác định kiểu cho nhiều trang HTML.
Với một bảng định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang
web bằng cách thay đổi một tệp!
Để sử dụng một biểu định kiểu bên ngoài, hãy thêm nối kết vào nó trong <head>phần của
trang HTML:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>This is a heading
This is a paragraph.
</body>
</html>
Một bảng đị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 với phần mở rộng .css.
Dưới đây là cách giao diện "styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
5.
Phông chữ CSS
colorThuộc tính CSS định nghĩa màu văn bản sẽ được sử dụng.
font-familyThuộc tính CSS định nghĩa phông chữ sẽ được sử dụng.
font-size Thuộc tính CSS xác định kích thước văn bản sẽ được sử dụng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>This is a heading
This is a paragraph.
</body>
</html>
6.
Đường viền CSS
borderThuộc tính CSS định nghĩa một đường viền xung quanh một phần tử HTML:
Thí dụ
p{
border: 1px solid powderblue;
}
7.
CSS Padding
paddingThuộc tính CSS định nghĩa một padding (khoảng trống) giữa văn bản và đường
viền:
Thí dụ
p{
border: 1px solid powderblue;
padding: 30px;
}
8.
Ký hiệu CSS
marginThuộc tính CSS định nghĩa một lề (không gian) bên ngoài đường viền:
Thí dụ
p{
border: 1px solid powderblue;
margin: 50px;
}
9.
Thuộc tính id
Để xác định kiểu dáng cụ thể cho một phần tử đặc biệt, hãy thêm idthuộc tính vào phần tử:I am different
sau đó xác định kiểu cho phần tử có id cụ thể:
Thí dụ
#p01 {
color: blue;
}
Tóm tắt chương
Sử dụng stylethuộc tính HTML để tạo kiểu nội tuyến
