HTML là gì ? Và các phần tử cơ bản nhất

HTML là ngôn ngữ đánh dấu theo 1 chuẩn nhất định , hiểu đơn giản nhất là văn bản HTML sẽ có rất nhiều đoạn nhỏ, và mỗi đoạn này được đánh dấu bằng những loại riêng, mục đính của việc đánh dấu này là để cho trình duyệt hiểu và hiển thị đúng những gì mà chúng ta mong muốn. Mỗi 1 đoạn nhỏ trong tài liệu HTML đó chúng ta gọi nó là 1 phần tử của tài liệu HTML.

Cách chúng ta sắp xếp các phần tử HTML đó sẽ tạo nên bộ khung, bộ xương trang website của chúng ta. Hiểu được cách thức hoạt động và hiển thị của mỗi phần tử là điều cực kỳ quan trọng và rất cơ bản để làm nên 1 website chuẩn chỉ.

Bắt đầu thôi

Để soạn thảo văn bản thuần túy chúng ta hay dùng Microsoft Word, để soạn thảo mã HTML mình dùng đó là Visual Studio Code hay còn gọi là VS Code nó có nhiều tính năng tự động rất hay và miễn phí các bạn có thể tải nó tại đây Tải VS Code

Sau khi tải và cài đặt VS Code về máy, bạn hãy tạo 1 thư mục, thư mục đó ở đâu ? Tên gì ? bạn hãy đặt theo sở thích của bạn nhé. Trong bài này mình sẽ tạo 1 thư mục ngoài Desktop có tên là xyzabc , sau đó mình vào VS Code chọn File chọn Open Folder và chọn đến thư mục xyzabc sau khi xong rồi thì mình sẽ được màn hình như sau :

Vscode

Màn hình này có thể không giống với màn hình của các bạn vì mình đã cá nhân hóa VS Code của mình và cũng khác phiên bản VS Code so với các bạn nữa , nhưng không sao cả vấn đề là nội dung của mã và cấu trúc VS code thì vẫn vậy cả. Bạn hãy tìm hiểu thêm về VS code nhé. Sau đây mình sẽ giải thích 2 chỗ mình khoanh đỏ số 1 là tạo file nhanh, và số 2 là tạo folder nhanh, đơn giản chỉ có vậy, nhưng 2 chõ này mình sẽ dùng rất thường xuyên sau này.

Lan man quá rồi

Bài viết về HTML mà đến đây vẫn chưa thấy dòng mã nào, thôi nào vào việc chính thôi, các bạn hãy vào lại VS Code click vào số 1 và tạo 1 file htmt và đặt tên cho file là là index.html.

Vscode

Trên hình phần A là chứa cấu trúc thư mục xyzabc của chúng ta sau nay trong phần này sẽ chứa rất nhiều file và các thư mục khác nữa. Phần B là phần làm việc chính của chúng ta , nơi mà chúng ta sẽ soạn thảo ,viết những dòng mã. Để có được dòng mã như trên hình bạn nhấn chọn phím "Shift + 1" sẽ ra dấu chấm than, sau đó bạn nhấn phím "Tab" VS Code sẽ tạo nhanh cấu trúc file html đơn giản nhất cho chúng ta.

Chi Tiết

  • <!DOCTYPE html > Tuyên bố đây là văn bản dạng HTML
  • "Vòng 1" <html >..... </html > là phần tử gốc bao bọc mọi phần tử khác của tài liệu HTML,các phần tử các muốn hoạt động bình thường thì đều phải nằm trong phần tử này
  • "Vòng 2" <head >..... </head > Nằm trong phần tử 1, Chứa nhiều phần tử khác mục đính là miêu tả tài liệu HTML cung cấp thông tin về tài liệu đó
  • "Vòng 3" <body >..... </body > Nằm trong phần tử 1, Các phần tử nằm trong phần tử vòng 3 này sẽ hiển thị lên màn hình cho chúng ta thấy.

Đây là kết quả của chúng ta khi chạy trên trình duyệt, dòng chữ "Xin chào XYZABC - Blog tự học viết mã" cỡ chữ to, màu đen tại sao nó lại hiện thị lên như vậy, vì nó là 1 phần tử của tài liệu HTML nó được Đánh dấu bằng phần tử <h1 >..... </h1 > và trình duyệt sẽ hiển thị màu, chữ cỡ chữ theo quy định của phần tử <h1 >..... </h1 >. Từ bây giờ thay vì gọi là phần tử chúng ta sẽ gọi là các thẻ nhé các bạn. Sẽ có rất rất nhiều thẻ trong 1 tài liệu HTML chúng ta sẽ cùng tìm hiểu những thẻ hay dùng nhất trong các bài tiếp theo.

Vscode

Tổng Kết Lại

Văn bản HTML được cấu trúc làm 3 phần với dòng đầu tiên <!DOCTYPE html > báo cho trình duyệt đây là tài liệu loại cấu trúc html. Phần 1 là thẻ <html >..... </html > bao bọc toàn bộ tài liệu HTML, trong thẻ này chứa 2 thẻ <head >..... </head >, và <body >..... </body >. Phần 2 là thẻ <head >..... </head > tất cả các thẻ khác nằm trong thẻ này thì sẽ không hiển thị lên trên trình duyệt các thẻ này với nhiều chức năng khác nhau có tác dụng mô tả văn bản HTML. Phần 3 thẻ <body >..... </body > các thẻ trong phần này sẽ được hiển thị trên trình duyệt cho người đọc thấy được, tùy theo thẻ đó thuộc loại nào mà trình duyệt sẽ hiển thị khác nhau cho mỗi thẻ.

Mục đính của bài viết này là để bạn có thể hiểu được cấu trúc cơ bản của 1 tài liệu HTML cũng như viết được dòng mã đầu tiên hi vọng các bạn sẽ có hứng thú để xem các bài viết tiếp theo.

Tag: HTML