Xin chào các bạn quay lại blog của mình. Trong bài này thì minh xin giới thiệu cách cài đặt Visual Studio Code để tạo được một file HTML và giới thiệu cấu trúc cần có trong một file HTML.
Cài đặt Visual Studio Code:
Mình chọn phần mềm này vì nó rất hữu ích và nhiều tiện ích mở rộng trong việc các bạn học lên cao hơn. Sau đây chúng ta sẽ đi vào phần cài đặt nhé!
Đây là link để các bạn tải phần mềm về:
Link tải Visual Studio Code
Và các bạn cần lưu ý là nếu tải và cài đặt mà chạy không được thì có thể do các bạn thiếu .Net Framework. Phần mềm này yêu cầu là phải từ .Net Framework 4.5.2 trở lên:
Link tải .Net Framework
Tạo một file HTML:
Sau đây mình sẽ cùng nhau tạo một file HTML nhé! Sau khi cài đặt xong thì mình mở Visual Studio Code lên và tạo thư mục với tên là "HTML bài 2". Dưới đây là từng bước hướng dẫn các bạn thực hiện:
Khi mình mở Visual Studio Code thì trình soạn thảo sẽ hiện thị như hình bên dưới:
Tiếp theo chúng ta chọn "File" -> "Open Folder" để xác định thư mục mà mình sẽ tạo file HTML (Các bạn phải tạo thư mục này trong ổ đĩa của máy tính và có thể đặt tên thư mục tùy theo sở thích của các bạn còn mình ở đây đặt là "HTML bài 2"):
Sau khi chọn xong thư mục thì các bạn tạo một file HTML dùm mình với tên là htmlBai2.html. Mình có nhiều cách để tạo một file là "File" -> "New File"(hoặc Ctrl + N) thì nó sẽ tạo một file với tên mặc định thì sau đó mình cần đổi tên lại nữa nên hơi mắc công tí nhé.Cách hai là mình làm như hình bên dưới nhấp vào biểu tượng và đặt tên cho file HTML. Khi đặt tên thi các bạn nhớ có đuôi html, nếu không thì trình soạn thảo sẽ không xác định được loại file và có thể gây ra lỗi khi chúng ta mở file:
Khi các bạn đã tạo xong thì mình sẽ có một thư mục HTML bài 2 chứa file là htmlBai2.html. Nếu như các bạn khó hiểu hay không làm được chỗ nào thì liên hệ để mình xem giúp được gì không nhé!
Cấu trúc file HTML:
Các bạn có thể hình dung cấu trúc HTML như một căn nhà thì các thẻ HTML đóng vai trò như là những viên gạch góp phần tạo nên căn nhà. Do vậy chúng ta cùng nhau đi tìm hiểu thành phần cấu tạo của một thẻ HTML nhé:
Đa số các thẻ trong HTML thì sẽ có cấu tạo như hình trên nhưng còn một số thẻ đặc biệt không theo định dạng này như là thẻ hình ảnh (<img>)... và cũng có những thẻ không cần có nội dung chứa bên trong nó như thẻ nhập liệu (<input />)... thì mình sẽ nói sau.Tên thẻ thì không phân biệt chữ hoa và chữ thường vì vậy dù mình có ghi là <img>, <Img>, <IMG> thì trình duyệt đều có thể hiểu được. Nhưng các bạn nên dùng chữ thường cho tất cả tên thẻ như là <html>, <img>, <p>... để tạo tính nhất quán cho trang web của bạn.
Tiếp theo mình sẽ giới thiệu tới cấu trúc của một file html ta cần những thẻ nào nhé!
Như các bạn đã thấy được cấu trúc thì dưới đây mình có giới thiệu đến các bạn một đoạn code của cấu trúc HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 2</title>
</head>
<body>
Nội dung
</body>
</html>Đây là ví dụ về hiển thị nội dung khi người dùng truy cập vào web của chúng ta:
See the Pen Cau truc File HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bài tập HTML:
Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ những gì mà mình đã học trong ngày hôm nay.
- Các bạn tạo một file tên là HTML2baitap.html
- Các bạn bắt đầu nhập cấu trúc của một file HTML.
- Các bạn chèn nội dung vào trang web của mình trong thẻ <body>:
Vào vụ Đông Xuân, chim én bay về đây nhiều vô kể, có những thửa ruộng cùng một lúc có đến hàng trăm con én chao liệng trên tấm thảm nhung xanh. Dọc những bờ ruộng, cò trắng đứng thành hàng, im phăng phắc. Nhưng chỉ cần nghe tiếng động nào đó như tiếng khua đuổi cá của dân chài lưới thì những chấm trắng ấy vội bốc mình lên không trung, dang rộng hai cánh, trôi thành từng đàn về tận tít trời xa... Đứng ở giữa cánh đồng vào thời điểm lúa đang thì con gái, mới thưởng thức được vẻ đẹp rất nên thơ của cánh đồng. Đẹp nhất là ngắm nhìn những đợt sóng lúa đuổi nhau vội vàng, nhấp nhô lên xuống, giống hệt như một tấm thảm nhung xanh mà ai đó đang tung lên hạ xuống. Người làng em đi xa, mỗi lần về quê, không ai không dừng lại để ngắm đồng lúa quê mình, để tìm lại ở đây những kỉ niệm của một thời thơ ấu: đẹp, hồn nhiên và ấm áp hương đồng.
Đây là file lời giải của bài tập các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 2</title>
</head>
<body>
Vào vụ Đông Xuân, chim én bay về đây nhiều vô kể, có những thửa ruộng cùng một lúc có đến hàng trăm con én chao liệng trên tấm thảm nhung xanh. Dọc những bờ ruộng, cò trắng đứng thành hàng, im phăng phắc. Nhưng chỉ cần nghe tiếng động nào đó như tiếng khua đuổi cá của dân chài lưới thì những chấm trắng ấy vội bốc mình lên không trung, dang rộng hai cánh, trôi thành từng đàn về tận tít trời xa...
Đứng ở giữa cánh đồng vào thời điểm lúa đang thì con gái, mới thưởng thức được vẻ đẹp rất nên thơ của cánh đồng. Đẹp nhất là ngắm nhìn những đợt sóng lúa đuổi nhau vội vàng, nhấp nhô lên xuống, giống hệt như một tấm thảm nhung xanh mà ai đó đang tung lên hạ xuống. Người làng em đi xa, mỗi lần về quê, không ai không dừng lại để ngắm đồng lúa quê mình, để tìm lại ở đây những kỉ niệm của một thời thơ ấu: đẹp, hồn nhiên và ấm áp hương đồng.
</body>
</html>Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML2baitap.html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé.
Tổng kết:
Qua bài này chúng mình đã hiểu sơ lược cấu trúc và tạo được một file HTML. Bài tiếp theo mình sẽ hướng dẫn các bạn các thẻ HTML cơ bản làm việc với văn bản, chữ... Nếu các bạn có gì thì cứ liên hệ mình sẽ liên lạc vói các bạn sớm nhất có thể!
