17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút

Mặc dù các trang web hiện đại thường được xây dựng với giao diện thân thiện với người dùng, nhưng sẽ rất tốt nếu bạn biết một số code HTML cơ bản. Nếu bạn biết 17 thẻ (tag) HTML sau đây, bạn sẽ có thể tạo một trang web cơ bản hoặc chỉnh sửa code HTML được tạo bởi các ứng dụng như WordPress. Mình đã cung cấp các ví dụ về code HTML kèm theo kết quả cho hầu hết các thẻ, nên sẽ rất dễ hiểu cho dù bạn mới học code HTML.

17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút

17 về code HTML đơn giản mà bạn có thể học trong 10 phút

Trước tiên, bạn nên setup ứng dụng để viết code, mình đề xuất kiến nghị dùng Sublime Text cho nó đẹp. Bây giờ mở màn gõ những ký tự tiên phong để học code HTML nào. Thường thì mình hay học ở w3shool, nhưng bạn nên nắm 17 ví dụ về code HTML này trước khi học sẽ dễ tiếp thu hơn

1.

Bạn sẽ cần thẻ này ở đầu mỗi file HTML. Thẻ này bảo vệ rằng trình duyệt sẽ sử dụng HTML5, phiên bản HTML mới nhất .
Mặc dù đây thực sự không phải là một thẻ HTML, nhưng nó vẫn là 1 thẻ rất thiết yếu .

2.

Đây là thẻ cho trình duyệt biết rằng nó đang đọc HTML. Thẻ này nằm ngay dưới thẻ DOCTYPE và bạn đóng thẻ đó bằng thẻ ở cuối file. Mọi thứ khác trong file HTML của bạn đều nằm giữa thẻ này.

3.

Thẻ bắt đầu cho phần tiêu đề của file HTML. Nội dung ở đây không xuất hiện trên trang web của bạn. Thay vào đó, nó chứa dữ liệu cho các công cụ tìm kiếm và thông tin cho trình duyệt của bạn.

Đối với các trang cơ bản, thẻ sẽ chứa tiêu đề của trang web. Nhưng cũng có một số thứ khác mà bạn có thể bao gồm sử dụng trong thẻ này.

4.

mẹo học html nhanh

Thẻ đặt tiêu đề cho trang của bạn. Tất cả những gì bạn cần làm là điền tên tiêu đề của bạn vào thẻ và đóng thẻ lại như thế này:


My Website

Đây là tiêu đề được hiển thị dưới dạng tiêu đề tab trong trình duyệt .

5.

Giống như thẻ tiêu đề, được đưa vào vùng header của đầu file. chủ yếu được sử dụng bởi các công cụ tìm kiếm và là thông tin về những gì trên trang của bạn. Có một số trường meta khác nhau, nhưng đây là một số trường được sử dụng phổ biến nhất:

  • description: Mô tả cơ bản về trang của bạn.
  • keywords: Một lựa chọn các từ khóa áp dụng cho trang của bạn.
  • author: Tác giả của trang.
  • viewport: Thẻ này đảm bảo rằng trang của bạn hiển thị tốt trên tất cả các thiết bị.

Đây là một ví dụ về thẻ :




Thẻ “ viewport ” phải luôn có “ width = device-width, initial-scale = 1.0 ” để bảo vệ trang của bạn hiển thị tốt trên thiết bị di động và máy tính để bàn .

6.

Sau khi đóng tag header, bạn sẽ đến tag body. Bạn tag và đóng tag . Đóng tag

ở cuối file HTML, trước tag .
Tất cả nội dung trong website của bạn sẽ nằm giữa thẻ này :


Everything you want displayed on your page.

7.

Để dễ hình dung thẻ

,

,

… giống như mục lục vậy.

Thẻ

xác định tiêu đề cấp 1 trên trang của bạn. Đây thường sẽ là tiêu đề và chỉ nên có 1 thẻ

trên mỗi trang web.

xác định tiêu đề cấp hai chẳng hạn như tiêu đề phần,

là tiêu đề phụ cấp ba,… Ví dụ: tên của các thẻ trong bài viết này là tiêu đề cấp 3.

Big and Important Header

Slightly Less Big Header

Sub-Header

Kết quả:

17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút 13

Như bạn hoàn toàn có thể thấy, chúng nhỏ dần ở mỗi Lever .

8.

Thẻ mở màn một đoạn văn mới. Thẻ này sẽ tạo 2 ngắt dòng giữa đoạn văn trên và dưới .

Your first paragraph .
Your second paragraph .

Kết quả:

Your first paragraph .

Your second paragraph .

Bạn cũng có thể sử dụng CSS trong thẻ, như dưới đây để biến hóa kích cỡ văn bản :

This is 50 % larger text .

17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút 14

9.

Thẻ
chèn một ngắt dòng. Khi có thẻ
thì đoạn văn đứng sau đó sẽ tự xuống dòng.

The first line.
The second line (close to the first one).

Kết quả:

17 ví dụ về code HTML đơn giản mà bạn có thể học trong 10 phút 15

Tương tự thẻ


. Thẻ này thường dùng để tách các đoạn văn bản.

10.

Thẻ này in đậm các văn bản quan trọng. Bạn cũng có thể sử dụng CSS để tùy chỉnh văn bản.

Very important things you want to say.

Kết quả:

Very important things you want to say.

Nếu bạn đã quen với thẻ để in đậm văn bản, bạn vẫn có thể sử dụng nó.

11.

Thẻ xác định các văn bản cần được nhấn mạnh, và in nghiêng chúng.

An emphasized line.

Kết quả:

An emphasized line .

Thẻ vẫn hoạt động tương tự thẻ , nhưng có thể thẻ sẽ không được dùng nữa trong các phiên bản HTML tương lai.

12.

Thẻ cho phép bạn tạo những link. Một link đơn thuần trông như thế này :

Go to Anonyviet

Kết quả:

Go to Anonyviet
Thuộc tính “href” xác định đích của liên kết. Trong nhiều trường hợp, đây sẽ là một trang web khác. Nó cũng có thể là một tệp, như hình ảnh hoặc PDF.

Các thuộc tính khác gồm có “ target ” và “ title ”. Thuộc tính target phần đông chỉ được sử dụng để mở link trong tab hoặc hành lang cửa số mới :

Go to Website in a new tab

Kết quả:

Go to Anonyviet in a new tab
Thuộc tính “ title ” tạo tooltip. Di chuột chuột tới link bên dưới để xem cách nó hoạt động giải trí :

Hover over this to see the tool tip

Kết quả:

Rê chuột vào đây để xem tác dụng

Tooltip hiển thị như vậy nè

13.

Nếu bạn muốn chèn hình ảnh vào trang của mình, bạn sẽ cần sử dụng thẻ . Thông thường, bạn sẽ sử dụng nó cùng với thuộc tính “src”. Thuộc tính “src” chỉ định nguồn của ảnh:

Kết quả:

ví dụ code html chèn ảnh

Các thuộc tính khác ví dụ điển hình như “ height ”, “ width, ” và “ alt ” :

the name of your image

Thuộc tính “ height ” và “ width ” đặt chiều cao và chiều rộng cho bức ảnh. Nói chung, bạn chỉ nên sử dụng 1 trong 2 thuộc tính này để hình ảnh hiển thị theo tỷ suất đúng mực .
Thẻ “ alt ” cho trình duyệt biết văn bản nào sẽ hiển thị nếu hình ảnh không hề được hiển thị. Nếu ai đó có liên kết chậm hoặc trình duyệt cũ, họ vẫn sẽ thấy văn bản trong thuộc tính “ alt ” khi không load được ảnh .

14.

    Thẻ

      cho phép bạn tạo một danh sách có thứ tự được đánh số. Mỗi mục trong danh sách cần một thẻ

    1. :
    1. First thing
    2. Second thing
    3. Third thing

    Kết quả:

    1. First thing
    2. Second thing
    3. Third thing

    Trong HTML5, bạn có thể sử dụng

      để đảo ngược thứ tự đánh số. Và bạn có thể đặt giá trị bắt đầu bằng thuộc tính start.

    Thuộc tính “ type ” cho trình duyệt biết loại ký hiệu nào sẽ sử dụng cho những mục trong list. Nó hoàn toàn có thể được đặt thành “ 1, ” “ A, ” “ a, ” “ I ” hoặc “ i ”, đặt hình tượng được chỉ định của list như sau :

      15.

        Danh sách không có thứ tự và đơn giản hơn nhiều so với thẻ

          . Nó chỉ đơn giản là một danh sách có dấu đầu dòng.

        • First item
        • Second item
        • Third item

        Kết quả :

        • First item
        • Second item
        • Third item

        Thẻ

          cũng có thuộc tính “type” và bạn có thể đặt nó thành “disc”, “circle” hoặc “square”.

        16.

        Mặc dù việc sử dụng bảng để định dạng còn nhiều khó khăn vất vả, nhưng có nhiều lúc bạn sẽ cần sử dụng hàng và cột để phân đoạn thông tin trên trang của mình. Ví dụ :

        1st column 2nd column
        Row 1, column 1 Row 1, column 2
        Row 2, column 1 Row 2, column 2

        Thẻ

        chỉ định phần đầu và phần cuối của bảng. Thẻ

        chứa tất cả nội dung của bảng.

        Thẻ

        định nghĩa một hàng trong một bảng. và thẻ

        định nghĩa phần header (dòng đầu tiên) của bảng. Thẻ

        định nghĩa 1 ô của bảng.

        Kết quả:

        1st column 2nd column
        Row 1, column 1 Row 1, column 2
        Row 2, column 1 Row 2, column 2

        17.

        Khi bạn đang trích dẫn một câu nói của  trang web hoặc người khác và bạn muốn làm nổi bật câu trích dẫn, hãy sử dụng thẻ

        . Tất cả những gì bạn cần làm là viết câu trích dẫn trong thẻ

        .

        Đoạn trích dẫn này được viết bởi AnonyViet

        Kết quả:

        Đoạn trích dẫn này được viết bởi AnonyViet

        Và trên đây là 17 ví dụ về code HTML đơn thuần mà bạn hoàn toàn có thể học được trong 10 phút. Còn những thẻ cơ bản nào thì những bạn phản hồi ở dưới nhé. Ngoài ra, bạn còn hoàn toàn có thể đọc bài viết này để biết cách tạo website github trong 15 phút .