Quá trình học lập trình thường khá dài và hầu hết mọi người đều muốn nhanh chóng bước vào các bài lý thuyết lập trình và thực hành các ví dụ thực tế. Những bài viết đầu tiên một khóa học lập trình web chủ yếu giới thiệu các thông tin xoay quanh ngôn ngữ, các thuật ngữ liên quan tuy nhiên cũng rất quan trọng bởi khi bạn đã nắm được HTML5 là gì? thì việc học các cấu trúc, các thẻ html chỉ là công cụ để xây dựng website mà thôi. Có rất nhiều bạn đã vào nghề lập trình web rất lâu nhưng không hiểu rõ bản chất HTML là gì hay còn mơ hồ về siêu văn bản, tại sao lại phải sử dụng HTML?… mà chỉ nhăm nhăm muốn code ngay. Những kiến thức cơ bản là nền tảng để phát triển tư duy công việc sau này, bạn không chỉ là một người lập trình [coder] mà biết đâu bạn có thể trở thành một người nghiên cứu, một người phát triển những ngôn ngữ, những công nghệ mới? Dài dòng một chút những chia sẻ về nghề và giờ là lúc chúng ta cùng đi vào tìm hiểu kiến thức HTML cơ bản. Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML.

1. Ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản

Trong suốt khóa học HTML cơ bản chúng ta sẽ sử dụng hai công cụ để tiện demo và show code cho các bạn là Sublime Text và JsFiddle. Ok, bạn hãy mở Sublime Text tạo một file hello-world.html với nội dung sau:

  
  
    
      
    Ví dụ HTML đầu tiên - Chào mừng đến với Khóa học HTML cơ bản  
    
    
    
Khóa học HTML cơ bản
  
    
Chào mừng bạn đến với khóa học HTML cơ bản từ website allaravel.com, chúng ta sẽ cùng nhau tìm hiểu từ những vấn đề cơ bản nhất của HTML và những gì mới nhất trong phiên bản HTML5.
  
    

Kết quả khi chạy file hello-world.html chúng ta được như sau:

[jsfiddle url=”//jsfiddle.net/allaravel/808ahvjg/” height=”200px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]

Chú ý, phần kết quả thay vì chụp lại nội dung hiển thị trên trình duyệt thì chúng ta sẽ mặc định dùng JsFiddle để xem được nhanh chóng và trực quan.

Trong ví dụ HTML đầu tiên này, chúng ta tạm coi như đã biết code HTML, các phần tiếp theo sẽ diễn giải những gì đã sử dụng. Mã HTML ở trên khá nhiều nhưng khi xem trên trình duyệt, nội dung lại rất ít, còn toàn văn bản vì HTML là ngôn ngữ đánh dấu siêu văn bản, nó cho trình duyệt biết chỗ nào phải hiển thị như là tiêu đề [thẻ

Khóa học HTML căn bản

1. và chỗ nào là đoạn văn mô tả [thẻ

Khóa học HTML căn bản

4].

2. Các khái niệm HTML cơ bản

Trong ví dụ HTML đầu tiên nếu bạn mới bắt đầu học HTML cơ bản, bạn sẽ thấy hơi hoa mắt chút nhưng đảm bảo rằng sau khi được giới thiệu các khái niệm HTML cơ bản, bạn sẽ làm chủ được đoạn code này dễ dàng.

2.1 HTML element vs thẻ HTML

Để ý trong ví dụ HTML đầu tiên, có rất nhiều các chuỗi ký tự được mở đầu bằng

Khóa học HTML căn bản

5 hoặc

Khóa học HTML căn bản

6 và kết thúc bằng

Khóa học HTML căn bản

7. Mỗi chuỗi ký tự đó được gọi là thẻ HTML, ví dụ

Khóa học HTML căn bản

8,

Khóa học HTML căn bản

3… chúng ta gọi đây là thẻ title hoặc thẻ h1. HTML element là các thành phần của HTML, ví dụ

  
  
    
      
    Tiêu đề của trang  
    
  
    

0 là thành phần h1 của HTML, nó được bắt đầu bằng thẻ mở

Khóa học HTML căn bản

3 và kết thúc bằng thẻ đóng

  
  
    
      
    Tiêu đề của trang  
    
  
    

2. Vậy mỗi thành phần HTML sẽ bao gồm:

• Thẻ mở bắt đầu bằng

  Khóa học HTML căn bản

  5 và kết thúc bằng

  Khóa học HTML căn bản

  7, ví dụ

  Khóa học HTML căn bản

  3,

  Khóa học HTML căn bản

  4.
• Thẻ đóng bắt đầu bằng

  Khóa học HTML căn bản

  6 và kết thúc bằng

  Khóa học HTML căn bản

  7, ví dụ

    
  Tiêu đề của trang  
  

  2,

  0.

Nội dung giữa thẻ mở và thẻ đóng của một HTML element sẽ là nội dung được hiển thị trên trình duyệt, thẻ mở và thẻ đóng sẽ “đánh dấu” [markup] để trình duyệt hiểu được cụm từ “Khóa học HTML cơ bản” là tiêu đề loại lớn nhất [h1 – Heading 1].

Trong thực tế, chúng ta cũng không cần quá phân biệt HTML element với HTML tag [thẻ HTML] mà có thể gọi chung là thẻ h1, thẻ p, thẻ body… chúng ta thống nhất trong suốt Khóa học HTML cơ bản, khi nói đến thẻ HTML chúng ta coi đó là HTML element.

Như vậy trong ví dụ trên chúng ta có các thẻ HTML là html, head, title, meta, body, h1, p.

2.2 Thuộc tính của thẻ html

Trong thẻ

1, chuỗi class=”text-success” là thuộc tính của thẻ HTML, nó cung cấp thông tin thêm cho thẻ HTML. Ở đây có thể có nhiều các thẻ h1 và chúng ta phân biệt các thẻ này bằng thuộc tính class, tức là các thẻ h1 có thuộc tính class là text-success sẽ được nhóm chung vào một nhóm để có thể tô màu, tăng giảm kích thước chữ, chọn font chữ sau này.

Thuộc tính của một thẻ HTML có những tính chất như sau:

• Tất cả các thẻ HTML đều có có thể các thuộc tính.
• Các thuộc tính cung cấp thêm các thông tin cho thẻ HTML.
• Các thuộc tính luôn được đưa vào thẻ mở trong thẻ HTML.
• Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị thuộc tính, ví dụ class=”text-success”.

Thuộc tính class của thẻ h1 trong ví dụ trên chưa thực sự rõ ý nghĩa sử dụng do chúng ta chưa sử dụng đến thẻ này, chúng ta cùng xem một số ví dụ tiếp theo bạn sẽ hiểu rõ hơn thuộc tính trong HTML sử dụng làm gì?

Ví dụ 1: thuộc tính src của thẻ giúp chỉ rõ đường dẫn đến ảnh cần hiển thị