Labels

Season 1: HTML Tutorial


Trước khi bắt đầu loạt bài về lập trình và thiết kế web, xin có đôi lời tới bạn đọc. Loạt bài viết tác giả muốn giới thiệu tới những người đã, đang và sẽ làm việc với công việc thiết kế và lập trình web, loạt bài viết nhằm giúp tác giả hệ thống lại nền tảng kiến thức cũng như chia sẻ tới những người mới bắt đầu tìm hiểu nó. Loạt bài viết dẫn nguồn chủ yếu từ w3schools và tác giả sẽ cố gắng trình bày một cách ngắn gọn và đầy đủ nhất !

Ngôn ngữ HTML là gì ?


  • HTML (HyperText Markup Language – ngôn ngữ đánh dấu siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web. 
  • HTML mô tả cấu trúc của các trang Web sử dụng thẻ đánh dấu
  • Các phần tử HTML là các khối xây dựng nên các trang HTML
  • Các phần tử HTML được biểu diễn bởi các thẻ (tags)
  • Các thẻ HTML biểu diễn các mẩu nội dung như 'tiêu đề', 'đoạn', 'bảng',...
  • Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để hiển thị nội dung của trang
  • HTML không có cơ chế báo lỗi, toàn bộ chỉ là đánh dấu và hiển thị đúng khi đúng cú pháp

Ví dụ về tập tin HTML cơ bản
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Trong đó
  • <!DOCTYPE html> mô tả đây là tài liệu HTML5
  • <html> là phần tử gốc của 1 trang HTML
  • <head> là phần tử chứa thông tin meta về tài liệu
  • <title> xác định tiêu đề của tài liệu
  • <body> chứa nội dung trang hiển thị
  • <h1> phần tử định nghĩa một tiêu đề lớn, trong HTML có 6 thẻ từ h1 tới h6 với kích thước giảm dần
  • <p> thành phần định nghĩa 1 đoạn

Thẻ HTML


Các thẻ HTML là các phần tử được bao quanh bởi các dấu ngoặc nhọn:

<tagname>Content</tagname>

Các thẻ HTML thường đi theo cặp như <p></p>, <b></b>, trừ một số ngoại lệ như <br />, <hr />, <img />. Thẻ đầu tiên trong cặp là thẻ bắt đầu, thẻ thứ hai là thẻ kết thúc.

Thẻ kết thúc được viết như thẻ bắt đầu, nhưng với dấu gạch chéo phía trước chèn vào trước tên thẻ. Thẻ bắt đầu còn được gọi là thẻ mở và thẻ kết thúc thẻ đóng .

Cấu trúc 1 trang HTML


<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Trong đó chỉ có nội dung nằm trong <body></body> mới được hiển thị trên trình duyệt

<!DOCTYPE>


Phần tử này khai báo cho tài liệu HTML, nó giúp trình duyệt xác định được trang web và hiển thị chúng một cách chính xác

Ví dụ với HTML 5 bạn cần khai báo
<!DOCTYPE html>
Còn với HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Điều đó cho thấy khai báo với HTML5 cực đơn giản

Lịch sử HTML


Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

Tạo tài liệu HTML


Trên PC của mình bạn tiến hành mở Notepad bằng cách mở RUN vào gõ vào notepad. Soạn nội dung cho tài liệu HTML sau đó lưu lại với đuôi .htm hoặc .html và Encode dạng UTF-8.


Mở tài liệu bằng 1 trình duyệt có trong máy của bạn. Bên cạnh đó bạn cũng có thể sử dụng công cụ chỉnh sử online tại đây.

HTML cơ bản


Tất cả các tài liệu HTML phải bắt đầu với <!DOCTYPE html>
Tài liệu HTML bắt đầu bằng <html> và kết thúc bằng </html>
Phần hiển thị của tài liệu HTML nằm giữa <body> và </body>

Tiêu đề HTML


Như đã trình bày ở trên tiêu đề trong HTML được đánh từ <h1> tới <h6>
<!DOCTYPE html>
<html>

<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
</body>

</html>

Đoạn HTML


Đoạn được định nghĩa bằng thẻ <p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Siêu liên kết HTML


Liên kết trong HTML được định nghĩa bởi thẻ <a> qua thuộc tính href
<a href="#">This is a link</a>

Thẻ hình ảnh


Được định nghĩa bằng <img /> dùng để chèn ảnh vào tài liệu HTML
<img src="image.jpg" width="104" height="142">


Button HTML


Được định nghĩa bằng <button>.
<button>Click me</button>


Danh sách


Danh sách trong HTML có 2 dạng, dạng đánh số và dạng không đánh số
- Dạng đánh số quy định bởi <ol>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
- Dạng không đánh số quy định bởi <ul>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Phần tử HTML rỗng


Các phần tử HTML không có nội dung thì được gọi là phần tử rỗng. Ví dụ thẻ <br /> dùng để chỉ định dấu ngắt dòng tương tự như phím Enter. Lưu ý trong tài liệu HTML để xuống dòng bạn phải sử dụng thẻ <br />, có bấm hàng nghìn lần phím enter thì văn bản cũng sẽ không tự động xuống dòng. Trong HTML5 không yêu cầu bạn phải đóng thẻ rỗng, bạn có thể sử dụng <br /> hoặc <br> đều được

Chữ hoa chữ thường trong thẻ


HTML 5 không phân biệt chữ hoa chữ thường, bạn có thể dùng <P> hoặc <p> đều như nhau nhưng khuyên bạn nên sử dụng tất cả thẻ chữ thường để đáp ứng chuẩn XHTML