Cách thiết lập dự án trang web CSS và HTML của bạn
Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.
Trong hướng dẫn này, bạn sẽ cài đặt các folder và file cần thiết để xây dựng một trang web bằng HTML và CSS. Bạn cũng sẽ chuẩn bị một index.html để nó sẵn sàng nhận nội dung HTML trong các hướng dẫn phía trước.
Yêu cầu
Nếu bạn đang theo dõi loạt bài hướng dẫn này, bạn có thể tiếp tục sử dụng folder css-practice project, index.html , folder images , folder css và file styles.css mà bạn đã tạo trước đó trong loạt bài. Nếu bạn chưa theo dõi loạt hướng dẫn này và cần hướng dẫn để cài đặt các folder và file này, vui lòng xem hướng dẫn trước đó của ta trong loạt bài Cách cài đặt dự án thực hành CSS và HTML của bạn .
Lưu ý : Nếu bạn quyết định tạo tên của riêng mình cho các folder hoặc file , hãy đảm bảo tránh các khoảng trắng ký tự, các ký tự đặc biệt (chẳng hạn như!, #,% Hoặc các chữ cái khác) và chữ in hoa, vì chúng có thể gây ra sự cố sau này. Cũng xin lưu ý bạn cần phải sửa đổi đường dẫn file của bạn trong một số bước trong suốt phần còn lại của loạt bài hướng dẫn này đảm bảo rằng chúng tương ứng với tên file của bạn.
Bạn nên có một folder dự án có tên css-practice chứa các folder và file sau đây cần thiết để khám phá CSS trong loạt bài hướng dẫn này:
- Một folder có tên
csschứa filestyles.css - Một folder trống có tên là
images - Tệp có tên là
index.html
Trong bước đầu tiên của hướng dẫn này, bạn sẽ chuẩn bị index.html để nó sẵn sàng nhận nội dung trong phần hướng dẫn phía trước.
Cách Chuẩn bị Tệp index.html Cho Nội dung HTML
Để chuẩn bị index.html của bạn làm trang chủ cho trang web , ta cần thêm một vài dòng HTML quan trọng. Những dòng HTML này sẽ đóng role là hướng dẫn cho trình duyệt và sẽ không được hiển thị trên chính trang web. Đảm bảo rằng index.html của bạn trống (nếu bạn có nội dung từ các hướng dẫn trước đó) và thêm đoạn mã sau vào tài liệu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sammy the Shark</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> </body> </html> Đảm bảo thay đổi tiêu đề trang web được đánh dấu bằng tiêu đề bạn chọn. Sau đó lưu index.html . Trước khi tiếp tục, hãy xem lại ngắn gọn mã mà bạn vừa thêm để hiểu mục đích của nó:
- Khai báo
<!DOCTYPE html>cho trình duyệt biết loại HTML nào đang được sử dụng trong tài liệu này. Điều quan trọng là phải khai báo giá trị này vì tiêu chuẩn HTML có nhiều version và các trình duyệt cần biết cách sử dụng. Trong khai báo này,htmlchỉ định tiêu chuẩn web hiện tại của HTML, đó là HTML5. - Các
<html>mở và đóng cho trình duyệt biết rằng tất cả nội dung được chèn giữa hai thẻ này phải được hiểu là HTML. Bên trong thẻ này, bạn cũng đã thêm thuộc tínhlang, thuộc tính này chỉ định ngôn ngữ của trang web. Trong ví dụ này, ngôn ngữ được đặt thành tiếng Anh bằng thẻenlanguage. Để có danh sách đầy đủ các thẻ ngôn ngữ, hãy truy cập Cơ quan đăng ký thẻ phụ ngôn ngữ IANA . - Các
<head>mở và đóng tạo một phần trong trang HTML thường chứa thông tin về trang, chứ không phải chính nội dung trang. Trình duyệt không hiển thị thông tin trong phần<head>. - Thẻ
<meta charset="utf-8">chỉ định bộ ký tự của tài liệu phải là UTF-8, một định dạng unicode hỗ trợ phần lớn các ký tự từ nhiều ngôn ngữ viết. - Thẻ
<title>cho trình duyệt biết tên của trang web. Tiêu đề này xuất hiện trên tab trình duyệt và khi trang web được liệt kê trong kết quả tìm kiếm nhưng nó không hiển thị trên chính trang web đó. Đảm bảo thay thế "Sammy the Shark" bằng tên của bạn hoặc tiêu đề bạn chọn nếu bạn muốn cá nhân hóa trang web. -
<link rel="stylesheet" href="css/styles.css">cho trình duyệt biết nơi tìm biểu định kiểu có chứa các luật kiểu. Nếu bạn đã làm theo các hướng dẫn trước đó trong loạt bài Cách Cài đặt Dự án Thực hành CSS và HTML của Bạn, thì biểu định kiểu của bạn sẽ được đặt tại đường dẫn file này. - Các
<body>mở và đóng sẽ chứa nội dung chính của trang web. Bạn sẽ thêm nội dung HTML giữa các thẻ này trong phần hướng dẫn phía trước.
Kết luận
Đến đây bạn đã tạo tất cả các folder và file cần thiết để tạo một trang web bằng HTML và CSS. Bạn cũng nên có một index.html được chuẩn bị với nội dung HTML cần thiết để dùng làm trang chủ cho trang web . Trong hướng dẫn tiếp theo, bạn sẽ khám phá cách trang web trình diễn được xây dựng và các bước bạn sẽ thực hiện để tạo lại nó.
Các tin liên quan
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
Cách hiểu và tạo quy tắc CSS
2020-10-12
So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Tích hợp và sử dụng các khung CSS với Vue.js
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23
