0. Tóm tắt bài học


<!-- Thẻ mở đóng -->
<!-- HTML Headings -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<!-- <hr> tag defines a thematic break in an HTML page -->
<hr>

<!-- HTML Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!-- HTML Line Breaks -->
<br /><br />

<!-- HTML div block-->
<div>Element div</div>

<!-- HTML label inline -->
<label>label 1</label><label>label 1</label>
<br /><br />

<!-- href attribute specifies the URL of the page the link goes to -->
<a href="https://www.w3schools.com">Visit W3Schools</a>
<br /><br />

<!-- Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg" -->
<!-- Relative URL - Links to an image that is hosted within the website. Example: src="/images/img_girl.jpg" -->
<!-- alternate text for an image, if the image for some reason cannot be displayed -->
<img src="https://www.w3schools.com/html/img_girl.jpg" width="500" height="600" alt="Girl with a jacket">
<br /><br />

<!-- Thẻ khuyết đóng -->
<input type="text" /><br />
<input type="button" value="ok" /><br /><br />

<!-- displayed as a tooltip when you mouse over the element -->
<label title="I'm label 3">label 3</label>

<!-- Attribute html -->
<input type="text" name="inputname" id="inputid" value="" />




Bài tập
  + Làm trang chủ index, có các thẻ a, link  tới các trang đã làm
  + Mỗi trang đã làm , có thẻ a tên là home, link quay về trang chủ

    <h1>Học HTML</h1>    
    <div>
        <a href="https://www.google.com/">Bài 1 - Cấu trúc HTML - html, head, body</a><br/>
    <div>
    <div>
        <a href="#">Bài 2 - Các thẻ cơ bản - h1,p,div,label,a</a><br/>
    </div>
    <div>
        <a href="#">Bài 3 - Các thẻ định dạnh văn bản - br,b,i,u,del,mark,sup,sub, </a><br/>
    </div>
   

    <br><br>
    <a href="#">Home</a>

1. Element html là gì?

Element html chính là danh sách những thẻ html mà trình duyệt hỗ trợ, và nó cũng nằm trong danh sách các thẻ html mà WWW đã quy định.

Danh sách các thẻ HTML rất là nhiều nên rất khó để liệt kê và hướng dẫn sử dụng. Vì vậy, mình chỉ liệt kê một số thẻ thôi, và trong các bài tiếp theo mình sẽ giới thiệu tiếp.

Tên thẻ:

Tên thẻ HTML phải nằm trong danh sách của riêng nó, ví dụ:

  • html
  • body
  • head
  • title
  • meta
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • div
  • table
  • tr
  • td
  • ...

Mình không thể liệt kê hết được mà sẽ trình bày dần trong các bài tiếp theo.

Thẻ mở và thẻ đóng

Mỗi thẻ sẽ có thẻ mở (opentag) và thẻ đóng (closetag). Ví dụ với thẻ div thì mình sẽ viết như sau:

1
<div>Nội dung bên trong</div>

Khuyết thẻ đóng (quick closetag)

Cũng có một só thẻ sẽ khuyết thẻ đóng, loại này ta gọi là quick closetag, nghĩa là nó chỉ tồn tại thẻ mở thì ta sẽ viết như sau:

1
<tagname/>

Ví dụ: Các thẻ input, meta, link

1
2
3
<input />
<link />
<meta />

Thẻ lồng trong thẻ

Các thẻ HTML sẽ được lồng với nhau để tạo thành một bổ cục vững chắc, lúc này thẻ con sẽ nằm trọn trong thẻ cha.

1
2
3
<div>
    <input type="text" classname="Class Name" value=""/>
</div>

Vậy, trong quá trình viết mã HTML bạn không được bỏ quên thẻ đóng nhé, vì như vậy giao diện sẽ dễ bị vỡ. Trường hợp thẻ khuyết thẻ đóng thì ta sẽ dùng cú pháp quick closetag.



2. Attribute trong HTML

Ta có thể ví mỗi thẻ HTML như là một đối tượng. Lúc này đối tượng HTML sẽ có các thuộc tính để mô tả cho nó. Ví dụ thẻ input thì nó có các thuộc tính như sau:

  • name: Dùng để khai báo tên
  • type: Dùng để thiết lập thể loại
  • id: Dùng để đặt tên khóa cho thẻ
  • value: Dùng để khai báo giá trị cho thẻ
Ví dụRUN
1
<input type="text" name="inputname" id="inputid" value=""/>

Chạy lên bạn sẽ thấy xuất hiện một ô textbox, và bạn có thể nhập dữ liệu vào trong ô này.

Vì vậy, sau này khi bạn muốn hiển data trong CSDL bằng ngôn ngữ backend như PHP, JSP thì phải chuyển các dấu đó sang một định dạng khác.

Thuộc tính mở rộng

Mỗi thẻ HTML chỉ chấp nhận một số thuộc tính nhất định của riêng nó. Nhưng nếu bạn muốn định nghĩa thêm một thuộc tính khác thì hoàn toàn được. Tuy nhiên, trình duyệt sẽ không hiểu các thuộc tính đó nên sẽ không có tác dụng gì. Vì vậy, thông thường ta sẽ kết hợp thuộc tính tự định nghĩa với Javascript để xử lý cho các bài toán. Vấn đề này ta sẽ học ở những bài khác nhé.

Ví dụ: Trong thẻ input không có thuộc tính classname nhưng ta cũng có thể thêm vào được, tuy nhiên lúc chạy lên sẽ không có tác dụng gì.



DemoRUN
1
<input type="text" classname="Class Name" value=""/>