Hướng dẫn html basic elements - phần tử cơ bản html

Published in HTMLHTML

June 08, 2021

6 min read

Hello các bạn, mình là Hoàng, hôm nay mình sẽ chia sẻ với các bạn 1 seri quay về cơ bản với lập trình web nhé. Cũng như thường lệ, chúng ta có cấu trúc các phần như sau

Tổng quan Về seri

[HTML Basic Tutorial 1] HTML Basic . Trong những ngày đầu tiên, tất cả nội dung và style tags được dồn vào một ngôn ngữ lớn, phức tạp. Qua thời gian, W3C quyết định tách nội dung và style của một trang web vì nghĩ nó cần thiết; việc này dẫn đến sự bắt đầu của style sheets. Ngày nay, tags được dùng để định nghĩa style của một văn bản [ví dụ: FONT] đã lỗi thời vì mọi người thích style sheets và chỉ còn có tag định nghĩa nội dung [ví dụ Hnha1] là còn tồn tại như là một thành phần cốt lõi của HTML.

HTML được cập nhật nhiều qua thời gian, và hiện tại, chuẩn HTML mới nhất là HTML5 [được công bố năm 2014]. HTML5 tất nhiên vẫn là ngôn ngữ markup chính, nhưng nó cung cấp thêm nhiều tính năng hơn HTML và đã xóa một số tính nghiêm ngặt thường thấy trong XHTML.
Cụ thể hơn, HTML5 đã bổ sung thêm rất nhiều các thẻ đánh dấu [markup] mới:
- Các thẻ và giúp bạn tách các phần trên và dưới của các block nội dung. Để có thể sử dụng nhiều lần trên một trang duy nhất.
- Thẻ
  giúp xác định một phần cụ thể về nội dung, ví dụ, một bài blog hoặc một bình luận của độc giả.
- Thẻ để xác định những phần nào được coi là khối điều hướng.
- Thẻ
  cho phép bạn xác định một phần nội dung nào đó; tương tự như các thẻ
  hiện nay.
- Các thẻ và để đánh dấu những nội dung bao gồm âm thanh hoặc video.
- Thẻ cho phép bạn vẽ đồ họa sử dụng một ngôn ngữ kịch bản riêng biệt.
- Thẻ dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang web.
Trong các bài viết ở đây, mình sẽ sử dụng phiên bản HTML5 để giới thiệu đến mọi người!
Kết cấu của một trang HTML
0 1 khai báo xác định rằng tài liệu này là một tài liệu HTML5
- 2 đây là phần tử gốc của trang HTML
- 3 đây là phần tử chứa tất cả những nội dung bạn muốn đưa vào trang HTML không phải nội dung bạn hiển thị cho người xem trang của bạn. Điều này bao gồm những thứ như keywords và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS tạo kiểu cho nội dung, khai báo bộ ký tụ và những thứ khác.
- 4 thành phần này đặt tài liệu của bạn sử dụng ký tự ở định dạng UTF-8, hầu hết các ký tự phần lớn là các ngôn ngữ chữ viết của con người.
- 5 thành phần này đặt tiêu đề cho trang của bạn, là tiêu đề xuất hiện trong tab trình duyệt đang được tải.
- 6 thành phần này chứa tất cả nội dung mà bạn muốn hiển thị cho người dùng web khi họ truy cập trang của bạn, cho đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hoặc bất kỳ nội dung nào khác.
1. Thẻ
- Thẻ HTML là một trong các thành phần quan trọng, sử dụng để tạo ra phần tử nhất định trên trang web.
- Có 2 loại là thẻ đầy đủ và thẻ khuyết: 0 Thẻ đầy đủ bao gồm thẻ mở và thẻ đóng: 80 Thẻ khuyết [hay thẻ tự đóng]:
  0
2. Thuộc tính của thẻ
- Mỗi thẻ HTML có thể được coi là một đối tượng, lúc này sẽ có các thuộc tính mô tả cho nó
- Ví dụ:
  1 thẻ input bao gồm các thuộc tính như
  2,
  3,
  4…
3. Các thẻ định dạng văn bản
Một số thẻ thông dụng:
- Thẻ
  5: phân đoạn văn, kết thúc cặp thẻ
  5 văn bản sẽ tự động ngắt dòng.
- Thẻ
  7: văn bản sẽ ngắt dòng khi gặp thẻ
  7.
- Thẻ
  9: tạo chữ in đậm.
- Thẻ 0: nội dung được bôi đậm nhằm nhấn mạnh.
- Thẻ 1: tạo chữ in nghiêng.
- Thẻ 2: tạo chữ gạch chân.
- Thẻ 3: tạo chữ nhỏ.
- Thẻ 4: tạo hightline
- Thẻ 5: tạo chữ nhỏ nằm dưới so với đoạn văn.
- Thẻ 6: tạo chữ nhỏ nằm trên so với đoạn văn.
4. Thẻ định dạng Heading và list
- Thẻ định dạng Heading: bao gồm các cặp thẻ từ 7 đến 8, dùng để tạo tiêu đề chính và tiêu đề phụ cho trang web, rất có lợi cho việc SEO.
  
  Hiển thị:
- Thẻ định dạng list: dùng để tạo một nhóm danh sách liên quan.
5. Thẻ định dạng bảng
- Mỗi bảng sẽ gồm 2 thành phần là cột và hàng, và được tạo bởi các thẻ 9,
  0,
  1,
  2,
  3,
  4,
  5.
- Thuộc tính border=“1” là khai báo đường viền của table.
- Thuộc tính cellspacing=“0” là khai báo khoảng cách giữa viền trên và viền dưới của đường viền.
- Thuộc tính cellpadding=“5” là khai báo khoảng cách giữa nội dung trong ô so với đường viền.
- Nếu muốn thêm một cột thì bổ sung một td.
- Nếu muốn thêm một hàng thì bổ sung một tr.
- Thuộc tính
  6 và
  7:
  - 8: dùng để gộp 2 hay nhiều ô lại với nhau.
  - 9: dùng để gộp 2 hay nhiều dòng lại với nhau.
6. Thẻ liên kết
- Trong một trang web luôn tồn tại các link liên kết với nhau , giúp liên kết trang web hiện taị đến một trang web khác hoặc liên kết các vị trí trên cùng một trang web với nhau.
- Liên kết trang này đến trang khác:
  0
  - 1 là đường link đến địa chi website đích
  - 2 là các giá trị dành cho SEO
  - 3 là các tùy chọn, nếu nó có giá trị [giá trị mặc định là _self]:
    - 4 thì nó sẽ chuyên link trên tab mới
    - 5 thì nó sẽ chuyển link trên tab hiện tại
    - 6 thì nó sẽ chuyển link tới tab mở tab hiện tại. Ta còn hay gọi là tab cha của tab hiện tại
    - 7 thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc luôn.
- Liên kết vị trí này đến vị trí khác: Với cú pháp
  8 để khi người dùng click vào thì nó sẽ nhảy tới vị trí của thẻ HTML có
  9 trong trang hiện tại.
Ví dụ: 0Xem thêm1 0Xem thêm1
Và tại ví trí hiển thị nội dung: 2Chi tiết sản phẩm3 2Chi tiết sản phẩm3
7. Tạo hình ảnh
- Sử dụng thẻ 4 để hiển thị hình ảnh với cú pháp sau:
  5
- Một số thuộc tính của thẻ 4:
  - 7: chứa đường dẫn trỏ đến hình ảnh.
  - 8: thuộc tính sẽ hiển thị nội dung khi việc hiển thị ảnh gặp sự cố [ví dụ: truyền đường dẫn sai, không hiển thị ảnh do gặp vấn đề kết nối internet,…]
  - 9, 0: thiết lập chiều rộng, chiều cao cho hình ảnh.
Kết luận
- Bài viết này mình đã giới thiệu với các bạn làm quen với HTML, cú pháp cơ bản rất dễ học dễ nhớ phải không nào. Hãy cùng mình tìm hiểu tiếp về HTML Sematic để xem có điều gì thú vị nhé!
- Bất ký thắc mắc hay góp ý gì thì hãy comment hoặc inbox trực tiếp để mình cải thiện trong những bài viêt sau nha.
@hoangpn - Better every day!