Menu
GIỚI THIỆU
  • Bài này ta tìm hiểu về HTML là gì? Bố cục HTML của một trang web như thế nào? Học css căn bản qua khái niệm html là gì và các vị trí như header footer trong trang web

Bài 01: Tìm hiểu HTML là gì? Bố cục rõ ràng của một trang web

Chào mừng bạn đến với series HTML và đây cũng là phần mở đầu, kiến thức nền móng để bạn biết rõ HTML là gì và nó được vận dụng ra sao, hiểu được tại sao nó lại quan trọng dù bạn là một lập trình viên lâu năm, hay mới tìm hiểu về lập trình. Với series HTML cơ bản này ngay cả những người làm việc không đúng chuyên ngành công nghệ thông tin như biên tập viên, SEOR cũng cần đến những kiến thức này.

1.HTML là gì?

HTML được viết đầy dủ là HyperText Markup Language và cũng có thể hiểu theo lời dịch của các chuyên gia là ngôn ngữ đánh dấu siêu văn bản. HTML dùng để tạo khung và bố bục rõ ràng cho một trang web, với mỗi trang web đều có thể lên tới hàng trăm, hàng nghìn trang và mỗi trang đều được quy là một định dạng HTML (hiểu đơn thuần là một file, tập tin HTML).

Tim Berners-Lee là người đã sáng lập ra HTML và là cha đẻ của World Wide Web cùng với đó Berners-Lee là chủ tịch của World Wide Web Consortium.

HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.

Các lập trình viên có thể rạo ra và xử lý bởi các số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản. Có thể viết vào ngay từ những dòng đầu tiên cho đến những công cụ xuất bản WYSIWYG phức tạp bằng cách dùng HTML động và Ajax để xử lý.

File HTML được tạo nên bởi những phần tử của HTML (HTML Elements) và được quy định sẵn bởi các thẻ, cặp thẻ (tag) các thẻ này được bao bọc bởi dấu ngoặc nhọn [ Ví dụ: <head> ]. Đối với các cặp thẻ  thì cần một thẻ mở và một thẻ đóng [ VD: <span> </span> ]. Còn lại là các trường hợp đặc biệt như thẻ [ <img />, <input /> ].

Một số trình soạn thảo thông dụng, chuyên nghiệp HTML như Notepad++, Notepad,...HTML được lưu dưới đuôi mở rộng là .html hoặc .htm, các bạn có thể tham khảo thêm tại bài viết công cụ nào để viết code.

2.Cách xử lý HTML

- Lúc một tập tin HTML được viết xong, việc xử lý nó sẽ do trình duyệt web phụ trách. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ những thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do những bot máy tính làm việc).

- Để kiểm tra, bạn có thể sử dụng khung bên dưới và chuyển tab giữa phần HTML và Result để xem kết quả của một đoạn mã HTML sau và trước khi được xử lý.

3.Bố cục HTML

Ở 2 phần trên mình giới thiệu qua HTML là gì? Cách xử lý HTML phần này sẽ nói rõ về bố cục của một website sử dụng HTML.

Thông thường bổ cục HTML của một website sẽ có dạng nhu sau:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
 
        <h1>My First Heading</h1>
        <h2>Heading 2</h2>
        <span>My first paragraph.</span>

    </body>
</html>

Trong đó:

  • <!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để trình duyệt (Browser) biết.
  • <html></html> là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại. Thẻ này là bát buộc.
  • <head></head> là phần khai báo thông tin của trang web
  • <title></title> nằm bên trong thẻ <head> và đây chính là khai báo tiêu đề cho trang web.
  • <body> và </body> là thành phần quan trọng nhất, nó chứa nhưng đoạn mã HTML dùng để hiển thị trên website
  • Các thẻ còn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu.

Như vậy trong một website chúng ta chia làm 2 phần chính:

  • Phần 1: Là nhũng khai báo thông tin cho trang web và ta đặt nó trong thẻ head.
  • Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong thẻ body.

Và được diễn tả như sau:

<html>
    <head>
        <title>Học HTML cơ bản miễn phí</title>
    </head>
    <body>
 
        <h1>Trang học lập trình</h1>
        <p>Một website học lập trình miễn phí</p>
 
    </body>
</html>

​4.Vai trò của từng ngôn ngữ trong website

Điều ấy có nghĩa là không phải chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. thí dụ một website như Hocmot.net sẽ được hình thành bởi các ngôn ngữ:

  • HTML – vun đắp cấu trúc và định dạng những siêu văn bản.
  • CSS – Định dạng các siêu văn bản dạng thô tạo ra trong khoảng HTML thành 1 bố cục website, sở hữu màu sắc, ảnh nền,….
  • Javascript – Tạo ra những sự kiện tương tác mang hành vi của quý khách (ví dụ nhấp vào nút tìm kiếm nó sẽ hiện input gõ từ khóa tìm kiếm).
  • PHP – ngôn ngữ lập trình để xử lý và thảo luận dữ liệu giữa máy chủ tới trình phê duyệt (ví dụ như những bài viết sẽ được lưu trong máy chủ).
  • MySQL – Hệ quản trị hạ tầng dữ liệu truy tìm mang cấu trúc (SQL – tỉ dụ như những bài viết sẽ được lưu lại sở hữu dạng dữ liệu SQL).
  • Cron: thực thi những tác vụ tự động theo định kỳ ( ví dụ tự động cho hết hạn bài đăng)

Nhưng ở đây, tạm thời bạn chỉ cần quan tâm tới HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng giả dụ website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể ấy, nó như là 1 chiếc khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, viết từ ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.
Có 2 khái niệm về website bạn cần biết

  • Website tĩnh (static web) – Là 1 website không giao tiếp mang máy chủ web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc.( Chính là cái chúng ta đang học trong serie này)
  • Website động (dynamic web) – Là một website sẽ giao thiệp với 1 máy chủ để gửi nhận dữ liệu, những dữ liệu đấy sẽ gửi ra ngoài cho các bạn bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để 1 website giao tiếp được với máy chủ web thì phải sử dụng 1 số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. ví dụ như 1 website làm cho bằng thachpham.com là website động.

5. Sử dụng công cụ gì để code HTML

HTML cũng chỉ là một file bình thường nên mọi editor đọc text đều có thể sư dụng để code như notepad, noted++, netbeans, sublime text, .... (xem thêm công cụ nào để viết code)

#Lời Kết

Qua bài này mình đã giới thiệu xong các khái niệm căn bản của HTML, đồng thời bạn cũng biêt được các thành phần chính tạo nên một giao diện website, hẹn gặp lại các bạn trong các bài viết tiếp theo Tìm hiểu HTML Elements và Attributes.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 01: Tìm hiểu HTML là gì? Bố cục rõ ràng của một trang web

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha