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>
- <!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>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
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
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên