Thiết kế website bằng html là gì

HTML là gì?

HTML theo wikipeadia  là chữ viết tắt của cụm từ HyperText Markup Language. Người sáng lập là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium

Một tài liệu HTML bao gồm các phần tử HTML được quy định bằng các thẻ và được bao bọc trong dấu ngoặc kép ví dụ: <html>, <head> ,<body> và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví <strong> dụ </strong> và ). Các đoạn văn bản nếu muốn nhấn mạnh có thể sử dụng các thẻ <u></u>. đây là thẻ dùng để gạch chân đoạn văn bản, <i></i> dùng cho đoạn văn bản in nghiêng. Ngoài ra còn một số thẻ đặc biệt không dùng thẻ đóng như <img> dùng để tải ảnh lên website.

Một tập tin HTML là các phần tử html hay còn gọi là element và được lưu dưới dạng tệp mở rộng .html hoặc .htm.

HTML được xử lý ra sao?

Khi một tập tin HTML được hình thành việc đọc tập tin html do các trình duyệt đảm nhiệm bằng việc đọc tập tin bao gồm các thẻ, ảnh. video, nhạc theo tự từ trên đến dưới sau đó hiển thị thành giao diện trên trình duyệt web.

Cấu trúc một đoạn HTML

Như mình đã nói ở trên, HTML được khai báo bằng các cặp từ khóa là các thẻ đóng và thẻ mở. Nội dung nằm bên trong cặp từ khóa sẽ dùng để định dạng hiển thị cho văn bản. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản.

01
<p>Đây là một đoạn văn bản trong HTML.</p>

Ngoài ra, thẻ định dạng còn có thể chứa các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, thuộc tính  sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ form có sử dụng thuộc tính action để điều hướng người dùng đến địa chỉ trang web https://thachpham.com.

01
<form action="https://thachpham.com"> </form>

Trong một thẻ ta có thể sử dụng nhiều thuộc tính khác nhau và được ngăn cách bởi dấu phẩy

Dùng chương trình gì để tạo tập tin HTML?

HTML là một tập tin siêu văn bản nên bạn có thể dùng các trình soạn thảo hỗ trợ gõ văn bản bất kỳ để nhập . Trong Windows, bạn có thể trình soạn thảo có sdùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phải lưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó.

HTML có thể được soạn thảo bởi bất kỳ một trình soạn thảo văn bản đơn giản.

Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo, nên từ các bài sau chúng ta sẽ dùng một chương trình khác tương tự để soạn thảo HTML. Và mình cũng không bao giờ khuyến khích bạn sửa một tập tin HTML bất kỳ bằng chương trinh Notepad để tránh gặp các lỗi hiển thị ký tự tiếng Việt.

HTML đóng vai trò gì trong website?

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.

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

Điều đó không có nghĩa là 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. Ví dụ một website như Thachpham.com sẽ được hình thành bởi:

  • HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
  • CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
  • Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).
  • PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).
  • MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).

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

Như vậy, dù website thuộc thể loại nào, giao tiếp với 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.

Nhân tiện đây mình cũng nói luôn, website có hai loại chính:

  • Website tĩnh (static web) – Là một website không giao tiếp với 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.
  • Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. Ví dụ như một website làm bằng WordPress là website động.

Tài nguyên tham khảo HTML

Trong serie này mình không có nói hết về các thẻ trong HTML mà chỉ nói qua các thẻ quan trọng nhất vì bạn sẽ sử dụng nó thường xuyên. Vì vậy, bạn hãy vào trang HTML Reference để tham khảo ý nghĩa và cách sử dụng của tất cả các thẻ HTML.

Lời kết

Ở trên mình đã giải thích khá chi tiết và cặn kẽ về HTML và vai trò của nó trên website là như thế nào. Thoạt nhìn có thể bạn sẽ tưởng các thông tin này chỉ mang tính tham khảo nhưng đó lại là các thông tin cực kỳ quan trọng, vì bạn đã làm web thì phải hiểu rõ về nó.

Ở các bài sau, chúng ta sẽ đi vào việc chuẩn bị để soạn thảo một tập tin HTML đầu tiên và chạy thử nó nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *