Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
1285 lượt xem

Học HTML – Bài 2: Các thẻ html cơ bản

học html cơ bản

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản của Giuseart.com. Trong bài học này, mình sẽ hướng dẫn cho các bạn các thẻ HTML cơ bản phục vụ cho việc xây dựng giao diện website.

Thẻ tiêu đề

Thẻ tiêu đề rất thường gặp tại bất kỳ website nào. Các bạn có thể sử dụng thẻ tiêu đề để viết những tiêu đề bài viết giống như hình ảnh mô tả dưới đây:

Thẻ tiêu đề dùng để viết tiêu đề bài viết trong website
Thẻ tiêu đề dùng để viết tiêu đề bài viết trong website tin tức
Thẻ tiêu đề dùng để viết tên sản phẩm trong các trang web bán hàng
Thẻ tiêu đề dùng để viết tên sản phẩm trong các trang web bán hàng

Và để hiển thị phần tiêu đề trên website, chúng ta phải sử dụng cặp thẻ <h1>nội dung</h1>. Nếu viết như vậy thì “nội dung” sẽ được hiển thị lên website. Bên cạnh đó, chúng ta còn có thể sử dụng các cặp thẻ <h> khác để viết phần tiêu đề, theo thứ tự lần lượt từ <h1><h2><h3><h4><h5><h6>.

Dưới đây mình sẽ viết ví dụ cho từng cặp thẻ tiêu đề:

Và đây là kết quả:

Ví dụ về các cặp thẻ tiêu đề trong website
Ví dụ về các cặp thẻ tiêu đề trong website

Các bạn có thể dễ dàng nhận ra sự khác nhau giữa các thẻ <h> chính là kích thước của nó. Kích thước của thẻ <h1> luôn lớn nhất và giảm dần cho đến đến thẻ <h6> có kích thước nhỏ nhất.

Thẻ đoạn văn

Chúng ta thường xuyên viết nội dung cho website. Và do đó, chúng ta phải sử dụng thẻ <p> để viết các đoạn văn cho website. Mỗi đoạn văn khác nhau sử dụng một cặp thẻ <p>…</p> khác nhau. Ví dụ:

Thẻ đoạn văn quy định các đoạn văn trong website
Thẻ đoạn văn quy định các đoạn văn trong website

Như hình ảnh trên, chúng ta có thể nhận định 2 đoạn văn được khoanh nét đứt màu đỏ được tạo nên bởi hai cặp thẻ <p>…</p> khác nhau.

Dưới đây mình sẽ viết ví dụ cụ thể cho thẻ đoạn văn:

và đây là kết quả:

Ví dụ về cặp thẻ đoạn văn trong xây dựng giao diện website
Ví dụ về cặp thẻ đoạn văn trong xây dựng giao diện website

Thẻ in đậm, in nghiêng, gạch chân

Cũng như trong phần mềm soạn thảo văn bản MS Word hay Excel, đôi lúc bạn cần định dạng chữ viết sang dạng in đậm, in nghiêng hoặc gạch chân để làm nổi bật.

Trong ngôn ngữ html, chúng ta cũng có thể soạn thảo chữ viết dưới dạng in đậm, in nghiêng hoặc gạch chân bằng cách sử dụng các cặp thẻ sau:

  • In đậm chữ viết: <b>…</b>
  • In nghiêng: <i>…</i>
  • Gạch chân: <u>…</u>

Ví dụ soạn thảo các thẻ in đậm, in nghiêng và gạch chân trong html:

và đây là kết quả:

Ví dụ về cặp thẻ in đậm, in nghiêng, gạch chân
Ví dụ về cặp thẻ in đậm, in nghiêng, gạch chân

Tuy nhiên, như các bạn đã thấy, 3 thẻ trên không tự động xuống dòng giống như thẻ <p>. Do đó, trong trường hợp bạn muốn xuống hàng sau mỗi thẻ, bạn thêm vị trí đó một thẻ <br>. Ví dụ:

và đây là kết quả:

Thẻ <br> dùng để xuống dòng khi soạn thảo đoạn văn html
Thẻ <br> dùng để xuống dòng khi soạn thảo đoạn văn html

Thẻ chia khu vực <div>

Thẻ phân chia khu vực (<div>- division) dùng để định nghĩa một phần (section) riêng biệt trong trang web.

Thẻ <div> có thể chứa nhiều thẻ khác như thẻ tiêu đề, thẻ phân đoạn,…

Ví dụ:

và đây là kết quả:

Thẻ phân chia khu vực div
Thể phân chia khu vực <div>

Thẻ tạo đường kẻ ngang <hr>

Thẻ <hr> dùng để tạo một đường kẻ ngang với hai thuộc tính widthheight để điều chỉnh độ rộng và chiều dài của đường kẻ. Ví dụ:

và kết quả là:

Thẻ hr trong xây dựng giao diện website
Thẻ <hr> trong xây dựng giao diện website

Thẻ ghi chú <!– –>

Thẻ ghi chú (comment) được dùng để ghi chú, đánh dấu trong nội dung file HTML, phần ghi chú sẽ không được hiển thị lên trình duyệt. Ví dụ:

Thẻ ghi chú trong html
Thẻ ghi chú trong html

Như vậy, với bài học này, các bạn đã nắm rõ các thẻ html cơ bản rồi. Hẹn gặp lại các bạn trong bài học kế tiếp.

Bài học trước: Bài 1: Tổng quát về ngôn ngữ lập trình HTML

Bài học tiếp: Bài 3: Định dạng trang HTML

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

Bình luận Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook