Bài 01: Giới thiệu HTML

HTML - CSS 14/02/2015 07:00 683
Trong các ngôn ngữ lập trình để tạo ra một trang web, thì có thể nói rằng HTML là ngôn ngữ quan trọng nhất. Bạn không cần PHP hoặc cũng không cần Javascript, css thì bạn cũng vẫn có thể tạo ra một trang web và nó được gọi là website tĩnh.

1. HTML là gì ?

HTML là một ngôn ngữ dùng để mô tả các trang web.

  • HTML là viết tắt của Hyper Text Markup Language
  • HTML là một ngôn ngữ đánh dấu
  • HTML là một tập hợp các thẻ ( tagname) đánh dấu.
  • Các thẻ này sẽ đóng vai trò mô tả nội dung văn bản chứa trong nó
  • Các Văn bản HTML chứa các thẻ HTML và văn bản thuần
  • Các văn bản HTML cũng được gọi là các trang web

2. Thẻ HTML

  • Thẻ HTML là các từ khóa được bao quanh với dấu ngoặc nhọn e.g <html>
  • Thẻ HTML bắt đầu bởi một cặp thẻ thẻ mở & thẻ đóng.
  • Thẻ đóng có cú pháp như thẻ mở, nhưng có thêm dấu dấu gạch chéo phía trước thẻ.
  • Thẻ HTML chứa trong nó nhiều thuộc tính(attributes) và sự kiện(events)

Cú pháp:

<Tên thẻ>Nội dung</Tên Thẻ>

hoặc

<tagname>Nội dung</tagname>

3. Phần từ HTML

Phần tử HTML hay thẻ HTML  đều được dùng để chỉ cùng một thứ. Nhưng nếu xét một cách nghiêm túc, một phần tử HTML là tất cả những gì nằm giữa thẻ mở và thẻ đóng, bao gồm cả tên thẻ.

Ví dụ:

<p>Chào mừng các bạn tới website chiasephp.net.</p>

4. Các trình duyệt web

Các trình duyệt web(Web Browser) phổ biến, như Google Chrome, Internet Explorer, Firefox, Safari được dùng để đọc các văn bản HTML và hiển thị chúng dưới dạng các trang web. Các trình duyệt không hiển thị các thẻ HTML, chỉ sử dụng các thẻ đó để định dạng cho nội dung của văn bản.

5. Cấu trúc một trang HTML

Như trên mình có giới thiệu HTML dùng để tạo nên bổ cục của giao diện website. Nó có rất nhiều thẻ khác nhau và mỗi thẻ sẽ có những nhiệm vụ nhất định. Vậy bạn có thắc mắc mắc cách chia các thẻ cho một trang web như thế nào không? 

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>Đây là đoạn tiêu đề</h1>
        
        <p>Đây là đoạn văn bản</p>
        
        <img src="./images/hinh_anh.jpg" />
        
        <a href="/">Đây là một liên kết</a>
    </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> và </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> và </head> là phần khai báo thông tin của trang web
  • <title> và </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.

Xem kết quả

 

6. Sử dụng gì để code HTML

File HTML nó cũng không có gì đặc biệt nên hâu hết các trình soạn thảo hiện này đều hỗ trợ. Mình sẽ liệt kê số phần mềm thông dụng cho phép bạn soạn nội dung file HTML.

  • Notepad or Notepad++
  • NetBeans
  • PHPDesigner
  • Sumblime Text
  • Dreamweaver

Lưu ý: Một file HTML phải có phần mở rộng là .html hoặc .htm

7. Tổng kết

Nói thì nghe có vẻ hầm hố thế thôi chứ khi bạn sử dụng một trình soản thảo nào đó. Bạn tạo mới một file HTML thì nó sẽ chèn vào những thành phần mặc đinh của một trang HTML cơ bản. Bạn chỉ cần quan tâm tới thẻ Head & Body xem bạn sẽ thêm cái gì vào nó thôi. Bạn ko cần quan tâm tới nó sẽ có đuôi là gì vì mặc định trình soạn thảo sẽ lưu phần mở rộng là .html

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.