Hướng dẫn học html và css cơ bản

Bài 3: Tìm hiểu về kiến trúc thẻ và tính chất trong học html cơ bản


Trong bài giới thiệu về HTML là gì mà các bạn đã đọc thì bạn cũng đã biết HTML được cấu thành từ 2 thành phần nông dân chính đó là thẻ ( tag ) và các thuộc tính ( attribute ) để mô tả cho thẻ. Bạn cần sử dụng đúng các thẻ được quy định trong HTML để cho web browser có xác xuất hiểu được và thông dịch trang web cho người dùng. Vậy cấu trúc của các thẻ và tính chất trong HTML như nào thì bài viết này mình sẽ cho các bạn thấy rõ hơn.

Cấu trúc của thẻ ( tag ) trong HTML
Về căn bản trong HTML có cả trăm thẻ nên ở đây mình sẽ không report tất cả các thẻ. Mình chỉ giới thiệu một số thẻ căn bản thường xuyên được sử dụng và các bài viết tiếp theo trong series học HTML cơ bản mình sẽ cùng các bạn tìm hiểu chi tiết về các thẻ này.

Danh sách các thẻ thường xuyên được sử dụng:

• html
• head
• title
• body
• h1 , h2 , h3 , h4 , h5 , h6
• div
• p
• a
• table
• li
• …..

Thẻ mở ( opentag ) và thẻ đóng ( closetag )
Các phần tử trong HTML sẽ được khai báo bằng các cặp thẻ gồm thẻ mở và thẻ đóng. Cú pháp khai báo phần tử trong HTML sẽ có dạng như sau:

Nội dung bên trong thẻ
1
Nội dung bên trong thẻ

Trong đó:

được làm gọi là thẻ mở và làm gọi là thẻ đóng. Thẻ đóng chỉ khác thẻ mở là có thêm dấu / ở trước tên thẻ.tagname là tên thẻ HTML bạn muốn sử dụng.
Thẻ không để ý thẻ đóng ( quick closetag )
Trong HTML có 1 số thẻ sẽ không có thẻ đóng , thẻ này được làm gọi là quick closetag. Tức thị nó chỉ có thẻ mở được viết với kiến trúc như sau:




1

nếu có 1 số thẻ không có thẻ đóng như: , ,
, ..

Phân cấp thẻ trong HTML
Một web HTML sẽ được cấu thành bởi nhiều cặp thẻ HTML chính vì thế các cặp thẻ này sẽ được ***g vào với nhau để tạo ra bố cục web kết liên vững chắc. Lúc này kiến trúc HTML sẽ được phân cấp phu phụ , thẻ con sẽ nằm bên trong thẻ cha.

Ví dụ:



Nội dung bên trong thẻ






Nội dung bên trong thẻ










Thuộc tính của thẻ HTML ( HTML Attributes )
Mỗi thẻ HTML sẽ có chứa các tính chất nhất định để mô tả cho nó. Nếu ở đây mình sẽ có thẻ với các tính chất như sau:


Blog
1
Blog

Các tính chất đều nằm trong thẻ mở và có kiến trúc là thuoctinh="giatri" hoặc thuoctinh='giatri'



Cách sử dụng dấu nháy trong thuộc tính
Như ở trên bạn thấy chúng ta có xác xuất sử dụng 2 kiểu với 2 loại dấu nháy đơn ( ‘ ) và dấu nháy kép ( “ ). Ở đây các bạn cần chú ý để tránh lầm lẫn. Khi bạn dùng kiến trúc với dấu nháy đơn thuoctinh='giatri' thì giá trị bên trong không được chứa dấu nháy đơn , ngược lại khi bạn sử dụng kiến trúc dấu nháy kép thuoctinh="giatri" thì giá trị bên trong không được chứa dấu nháy kép.

Ví dụ:

kiến trúc không ngay thẳng trong tính chất title:

Blog
1
Blog

kiến trúc đúng trong tính chất title:

Blog
1
Blog


Cách sử dụng tính chất trong thẻ
Mỗi thẻ HTML sẽ có 1 số những tính chất nhất mực để mô tả cho nó và sẽ có những tính chất chỉ dành riêng cho 1 thẻ nào đó nhưng bạn vẫn có xác xuất dùng tính chất đó cho 1 thẻ khác nhưng web browser sẽ không hiểu được các tính chất đó.

nếu trong thẻ

tính chất href sẽ không có hiệu quả gì nhưng ta vẫn có xác xuất thêm vào như sau:

Lời kết

Như vậy trong bài này đã giới thiệu với các bạn cấu trúc của các thẻ và các viết tính chất cho thẻ HTML. Các bạn cần nắm vững các quy tắc tam suất này thì những bài viết tiếp theo các bạn mới có xác xuất dễ dàng làm việc được.

Tìm hiểu về mô hình mvc


Bài 4: Các thẻ khai báo thông báo website cơ bản trong HTML



Trong bài viết tìm hiểu về cấu trúc của 1 trang web bằng HTML bạn cũng đã biết trong cặp thẻ có chứa các thông báo về website. Vậy chúng tôi sẽ khai báo thông báo gì của website ở trong này?



Khi khai báo thông báo cho website chúng tôi cần phải khai báo các thông báo như tên web , tên tác giả , khai báo đường dẫn file CSS , Javascript , các dữ liệu vĩ mô trong thẻ meta , …Sẽ thừa thãi thông báo về web bạn có thể khai báo trong thẻ nhưng ở đây mình sẽ chỉ nói đến 1 số thông báo cơ bản mà Đại khái website nào cũng cần phải có.



trước hết , cùng tham khảo mẫu code khai báo sau đây:









Khai báo các dữ liệu vĩ mô trong thẻ
Thẻ được sử dụng với mục tiêu khai báo thông báo dữ liệu về tài liệu HTML , nó sẽ không hiển thị cho người dùng trên trình duyệt. Các dữ liệu thường được khai báo như: bảng mã ký tự , miêu tả , từ khóa , tác giả , ngôn ngữ , các thông báo liên hệ đến mạng tầng lớp , …

cấu trúc của thẻ luôn kèm theo ít nhất 1 thuộc tính và 1 giá trị đi kèm với dạng:


1

Ở đây mình xin đưa ra 1 danh sách các thuộc tính luôn luôn được sử dụng như sau:
san sẻ về khóa học thiết kế web miễn phí tại đây.

• Charset: Khai báo bảng mã ký tự siêu văn bản
• Name: Cung cấp 1 số thông báo có trong nội dung như description , author , …
• Content: xác định nội dung cho thông báo dữ liệu
• http-equiv: Cung cấp tiêu đề HTML cho một số thông báo có thuộc tính content

Khai báo tên tài liệu HTML trong cặp thẻ