HTML là gì?
Hiện nay website là công cụ đã quá phổ biến với tất cả mọi người, Ai cũng biết cách tìm kiếm và truy vập Website. Nhưng Bạn đã biết gì về Website và cách hoạt động của website trên internet chưa?
Nếu bạn chưa biết thì bạn có thể xem lại bài viết:
HTML là ngôn ngữ không thể thiếu của một trang web! Vậy HTML là gì? hãy cùng Myboxst tìm hiểu về HTML trong bài viết dưới đây!
HTML là gì ?
HTML là ngôn ngữ được tạo ra bởi nhà vật lí học người Anh – Tim Berners-Lee.
| Phiên bản | Năm update |
| HTML 1.0 | Công khai 1991 |
| HTML 2.0 | 1995 |
| HTML 3.0 | 1997 |
| HTML 4.0 | 1999 |
| XHTML | 2000 |
| HTML 5 | 2012 – Hiện nay |
HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ được sử dụng rộng rãi nhất để viết các trang Web. Trong đó:
- Hypertext là cách mà các trang Web (các tài liệu HTML) được kết nối với nhau. Và như thế, đường link có trên trang Web được gọi là Hypertext.
- Như tên gọi đã gợi ý, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language), nghĩa là bạn sử dụng HTML đánh dấu một tài liệu text bằng các thẻ (tag) .
- HTML dùng để mô tả cấu trúc của một trang Web bằng nhiều phần tử khác nhau.
- Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung trên trang web.
Lưu ý: HTML là ngôn ngữ dùng để đánh dấu văn bản, và không phải ngôn ngữ lập trình! nó dùng để mô tả cách mà thông hiển website như: in đậm, in nghiên, ….. .
Tập tin (file) html là gì?
Tập tin (file) HTML là một loại tập tin văn bản có chứa các thẻ HTML,
Có phần đuôi là .html hoặc .htm
Lưu ý: Một tập tin HTML có tên gọi khác là: Một tài liệu HTML hoặc trang HTML
Phần tử (element) của html là gì?
Trong một website bất kì nội dung nào cũng có thể được xem như là một phần tử (element).
Ví dụ:
Đoạn Code HTML
<html lang="en"><head> <title>Ví dụ về phần tử (element) của html</title></head><body> <p style="text-align:center;"> Chào mừng bạn đến với series tự học html của Myboxst.com </p> <img src="https://www.myboxst.com/wp-content/uploads/2021/04/01.jpg"/></body></html>Kết Quả hiển thị:
Chào mừng bạn đến với series tự học html của Myboxst.com
Trong ví dụ trên thì đoạn văn giới thiệu và hình ảnh đều là một phần tử của html.
Nói dễ hiểu hơn thì Phần tử (element) của html chính là tất cả những thẻ (gồm cả nội dung hiển thị trong thẻ) của thẻ HTML.
Lưu ý: Nếu nhìn vào đoạn code thì gồm có các phần tử như sau:
- phần tử trong cặp thẻ <html></html> : gồm 2 phần tử con là -> cặp thẻ <head> và cặp thẻ <body>.
- Trong phần tử con thứ 1 (cặp thẻ head) : có một phần tử con nữa là -> cặp thẻ tiêu đề <Title>
- Trong phần tử con thứ 2 (cặp thẻ body) : có phần tử con như trong kết quả hiển thị là -> cặp thẻ <p> và thẻ <img> hiển thị hình ảnh như trong kết quả hiển thị.
- Như vậy chúng ta có tổng cộng tất cả 6 phần tử là: html, head, title, body, p và img (hình ảnh).
Tại sao cần phải biết HTML?
- HTML là ngôn ngữ quan trọng và cần thiết để xây dựng một trang web
- Bạn không thể xây dựng một trang web nếu không biết HTML. Vì HTML là ngôn ngữ thiết kế web đầu tiên bạn cần học để tiếp cận với những thứ khác như : CSS, Javascript, php, ….
- Khi bạn đã biết cơ bản về HTML, CSS, Javascript sẽ giúp bạn có thể tối ưu hóa trang web của mình, để tăng tốc độ và hiệu suất của nó.
- HTML là tấm vé không thể thiếu để bạn trở thành một nhà thiết kế website chuyên nghiệp.
Cấu trúc cơ bản của một file html
!DOCTYPE HTML là một đoạn định dạng không phải là thẻ html, nó có tác dụng khai báo cho trình duyệt biết được website của bạn đang sử dụng phiên bản ngôn ngữ đánh dấu là html5.
Cấu trúc cơ bản của một file HTML gồm có:
- Nội dung của file html được bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng </html>
- Phần trong thẻ HTML bao gôm 2 thẻ chính là:
- Thẻ <head> dùng để chứa tiêu đề <title> và các thẻ khai báo thông tin cho trang web </head>.
- Thẻ <body> Chứa nội dung hiển thị trên trang web </body> .
Những điều cần lưu ý khi soạn thảo tập tin html
- Cần soạn đúng quy tắc / cú pháp: vì khi soạn sai tập tin html sẽ hiển thị không như ý muốn.
- Những thẻ html không phân biệt chữ hoa và chữ thường.
- Nên trình bày code một cách logic để dễ phân biệt giữa các phần tử cha và con.
- Đừng soạn thiếu thẻ đóng</tên_thẻ> của thẻ đôi : <tên_thẻ>nội dung thẻ</tên_thẻ> vì khi soạn thiếu thẻ đóng thì những phần tử phía sau thẻ đó sẽ được xem là nội dung của thẻ.
- Không nên soạn sai thứ tự giữa các thẻ vì khi đó vấn đề xảy ra sẽ tương tự như thiếu thẻ đóng.
Hướng dẫn chạy file .HTML trên VScode và những TextEditor khác (HTML là gì?)
Tạo File HTML
Trước tiên bạn hãy Download VSCode tại trang : https://code.visualstudio.com/ và cài đặt.
Nếu bạn chưa biết cách cài Extension để code nhanh và thao tác dễ hơn bạn có thể xem lại bài viết:
Hướng dẫn cài đặt Visual Studio Code để code nhanh và dễ hơn
Sau khi cài xong bạn mở VSCode lên sau đó chọn Open Folder để mở thư mục thực hành!
Bạn cũng có thể tạo một thư mục mới!
Sau đó click Select folder để tiến hành thao tác trên thư mục đã chọn!
Kế đến click biểu tượng New file để tạo một file HTML mới!
Ví dụ: Như hình trên Myboxst tạo một file chuong1.html .
Bạn có thể đặt tên file sau đó gõ .html => gõ nút Enter trên bàn phím để hoàn tất thao tác tạo file.
Tương tự nếu bạn muốn tạo một file Css và Javascript thì gõ đuôi .css hoặc .js
Tiếp theo chúng ta sẽ tạo cấu trúc file html cơ bản bằng cách click vào file vừa tạo và gõ “html“.
VSCode sẽ hiển thị 3 dạng cấu trúc đã tích hợp sẵn! Chúng ta sẽ chọn HTML:5 là phiên bản html mới nhất hiện đang sử dụng.
Cách chạy file .html và hiển thị kết quả trên trình duyệt. (html là gì?)
Để dễ hiểu hơn hãy cùng với Myboxst thực hành tạo một Website đơn giản!
Đây là cấu trúc của một website đơn giản hiển thị “Welcom To Myboxst!” trên trình duyệt:
Đoạn Code HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tạo website đơn giản đầu tiên</title></head><body> <h1>Chương 1</h1> <p>Welcom To Myboxst!</p></body></html>Kết Quả hiển thị:
Chương 1
Welcom To Myboxst!
Bạn có thể Copy đoạn code trên vào file html trong VSCode để chạy bằng cách:
Copy code => Past code vào file HTML trong VSCode => Click vào nút Go live bên dưới thanh menu Để hiển thị kết quả!
Lưu ý: Nút Go live chỉ hiển thị khi bạn cài Extension Live Server bạn có thể xem hướng dẫn cách cài đặt tại bài viết: Hướng dẫn cài đặt Visual Studio Code để code nhanh và dễ hơn.
Ngoài ra bạn cũng có thể Copy và past code để test bằng Texteditor online tại đây!
Hiện nay đã có rất nhiều công cụ Text Editor online nên việc thực hành code html, css, javascript rất dễ!
Điển hình là: W3school, Codepen,….
Myboxst đề nghị bạn nên dùng VSCode để thực hành cho dễ hiểu và dễ quản lí thư mục thực hành của bạn!
Lời kết
Vậy là bạn và Myboxst đã tìm hiểu xong tổng quan về HTML. cũng như những cách chạy và hiển thị kết quả trên trình duyệt web.
Hãy thực hành đừng đọc lý thuyết suông vì “Học phải đi đôi với hành!”.
Khi Bạn viết code thực hành sẽ phát sinh một số lỗi (bug) như: viết sai code, sai cấu trúc,…..
Khi đó kết quả hiện thị sẽ không như mong muốn! Và bạn sẽ nhớ lâu hơn khi giải quyết những xong những vấn đề đó!
Nếu có vấn đề cần giải đáp hãy đánh giá bài viết và bình luận bên dưới!
Myboxst sẽ trả lời sớm nhất có thể!
Chúc bạn thành công và có một khởi đầu tốt!
▼ Hãy share bài viết nếu bạn thấy bài viết có ích! Hoặc xem lại khi bạn quên!▼
Không có nhận xét nào:
Đăng nhận xét