Hôm nay mình xin tiếp tục với bài 2, như trong bài 1 mình đã giới thiệu các bạn về HTML và các công cụ cần dùng.
Bài hôm nay mình sẽ hướng dẫn các bạn tạo một trang web đầu tiên.
Chuẩn bị
- Bạn nên tạo một thư mục ở ổ đĩa, vd: HTML Basic. Lưu ý là không nên đặt tiếng việt có dấu nhé :)
Cấu trúc cơ bản của HTML
<!DOCTYPE html>
<html>
<head>
<!-- Nội dung Head -->
</head>
<body>
<!-- Nội dung Body -->
</body>
</html>
Ta có: <!DOCTYPE html>
Đây là phần khai báo chuẩn của HTML, và html là chuẩn HTML5.
Và website của bạn sẽ nằm trong tab mỡ đầu <html> và hết thúc bằng </html>, bạn sẽ viết code trong thẻ này nhé.
Tiếp theo ta có thẻ <head> và kết thúc bằng </head>, trong thẻ này bạn sẽ thường khai báo tiêu đề website bằng thẻ <title>Tiêu đều </title>, khai báo thẻ meta, css, javascript,.... Lưu ý là phần này nó sẽ không hiển thị ra trang nhé. Nó chỉ khai báo và xử lý thôi, còn khi bạn thấy ngoài trang thì nó sẽ hiễn thị trong thẻ <body> và kết thúc bằng </body>. Phần body là nơi bạn trình bày nội dung, hình ảnh,...để thể hiện ra trang web và mọi người có thể thấy.
Mình sẽ đi vào thực hành và ví dụ để các bạn dễ hiểu, cứ học lý thuyết dễ bùn ngủ + chán lắm :D
TẠO TRANG HTML ĐẦU TIÊN
Đầu tiên các bạn mở Sublime Text lên, nhấn Ctrl + N (Command + N trên Mac) để tạo trang mới và nhấn Ctrl + S (Command + S trên Mac) để lưu vào thư mục với tên là 1_First.html
Sau đó bạn gõ những dòng lệnh bên dưới, Lưu lại (Ctrl + S).
<!DOCTYPE html>
<html>
<head>
<title>Bài HTML Đầu Tiên</title>
</head>
<body>
<h1>Đây là bài đầu tiên</h1>
</body>
</html>
Sau đó click phải chọn Open in Browse và xem kế quả là gì?
Bạn sẽ thấy lỗi không đọc được chữ, tuy nhiên bạn gõ thêm dòng này vào bên dưới thẻ head (Sau <head>) rồi bạn sẽ thấy không lỗi nữa:
<meta charset="utf-8" />Dòng này xác định file html mình được định dạng theo chuẩn utf-8.
Hì, hôm nay mình xin tạm ngừng ở đây vì bài sau sẽ hơi dài nên mình sẽ giới thiệu kỹ hơn, những bài đầu chỉ giúp bạn nhìn tổng quan, hơi dài dòng, phần sau các bạn sẽ làm việc với các thẻ từ meta, các thẻ tag,...
Nếu các bạn có thắc mắc gì vui lòng để lại comment bên dưới nhé.
Nguồn: Tự Học IT Online - http://tuhocit.net
0 nhận xét:
Đăng nhận xét