[HTML CSS căn bản] Bài 1: Khởi tạo một dự án website

Các serie bài viết của mình sẽ không nói quá sâu vào html và css, mà mình sẽ chỉ cho các bạn đủ hiểu và cần thiết để có thể làm một trang web từ A-Z. Các bạn chỉ cần làm theo serie của mình từ đầu đến cuối là có thể hiểu và tự tay làm một website tĩnh với html và css căn bản.

Nào không nói nhiều nữa vào chủ đề luôn thôi!

HTML CSS căn bản khởi tạo một dự án website

Một điều đầu tiên trước khi vào bài học là bạn cần phải chuẩn bị cho mình một máy tính cài sẵn Notepad++ hoặc bất cứ một chương trình phục vụ cho việc code html css nào mà bạn biết.

Bước đầu tiên là bạn cần phải tạo một thư mục để chứa dự án web của mình trong máy tính nhé, bạn tạo ở đâu cũng được, như mình là mình tạo trong ổ đĩa (E) của mình và mình đặt tên cho thư mục này là LAOVUWEB.

Tạo thư mục chưa dự án website của bạn

Tiếp theo bạn khởi tạo một file index.html, các bước khởi tạo như sau:

Bước 1: Bên trong thư mục chứa dự án web mà bạn mới tạo ra click chuột phải chọn New -> Text document.

Tạo file index.html

Bước 2: Đổi tên file mới tạo thành index.html, các bạn nhấn chuột phải vào file Text document.txt chọn Rename và đổi lại thành index.html, các bạn nhớ là xóa đuôi .txt của nó đi và thay bằng đuôi .html nhé!

Đổi tên file thành index.html

Bước 3: Tạo các thư mục css, js và images.

Tạo 3 thư mục css js và images

Giải thích về các thư mục xíu nha!

Thư mục css: Nó dùng để chứa các file *.css các file này sẽ được chúng ta nhúng vào file html để căn chỉnh cho web thật đẹp.
Thư mục js: Đây là thư mục chứa các file *.js các file này là file javascript cũng sẽ được nhúng vào file html để tạo ra các hiệu ứng đẹp mắt cho web.
Thư mục images: Thư mục này sẽ chứa toàn bộ hình ảnh cho website.

Vậy là xong phần khởi tạo bây giờ chúng ta sẽ mở file index.html lên và bắt đầu code những dòng code đầu tiên nhé!

Các bạn click chuột phải lên file index.html sau đó chọn Open with Notepad++.

Mở file index.html bằng Notepad ++

Đầu tiên các bạn khai báo cấu trúc trang html nhé nó gồm có:

Cấu trúc html của một trang web

Thẻ <!DOCTYPE html>: Thẻ này nhằm mục đích khai báo với trình duyệt rằng đây là một trang html.
Cặp thẻ <html lang=”vi”> </html>: Mục đích của nó là khai báo với trình duyệt nơi bắt đầu và nơi kết thúc của một trang web, à còn về cái thuộc tính lang=”vi” thì nó nhằm mục đích khai báo loại ngôn ngữ mà website sẽ sử dụng để cho trình duyệt biết đấy nhé!
Cặp thẻ <head> </head>: Đây là phần đầu của trang web nó khai báo tất cả các thuộc tính của website như tiêu đề, thẻ mô tả, thẻ keyword… Và thường chứa các mã để nhúng css, js…
Cặp thẻ: <body> </body>: Đây là phần chứa tất cả nội dung trang web, phần này sẽ hiển thị ra ngoài màn hình.

Tại sao mình lại nói là cặp thẻ, bởi vì trong html luôn có một thẻ mở và một thẻ đóng, mục đíc của mình là nhắc nhở các bạn luôn luôn đóng thẻ ngay sau khi mở thẻ rồi mới tiến hành viết nội dung bên trong cặp thẻ đó để hạn chế tối đa lỗi sinh ra khi thẻ không được đóng. (Trừ một số thẻ đặc biệt không có thẻ đóng nhé, mình sẽ nói đến chúng trong bài viết sau). Xong! đấy là những cặp thẻ cơ bản của một trang html.

Toàn bộ code như sau:

<!DOCTYPE html>
 <html lang="vi">
   <head>
     <title>Đây là tiêu đề trang web</title>
   </head>
   <body>
     <div>
       <h1>Tiêu đề trang web đầu tiên của tôi</h1>
       <p>Nội dung trang web đầu tiên của tôi<p>
     </div>
   </body>
 </html>

Một lưu ý nhỏ nữa đó là các bạn sẽ gặp lỗi phông chữ khi viết bằng bộ gõ Tiếng Việt trong Notepad++, nguyên nhân là do bộ mã hóa của nó không hỗ trợ Tiếng Việt. Để khắc phục tình trang này các bạn chọn lại bộ mã hóa cho Notepad++ nhé.

Cách làm như sau:

Trong trình soạn thảo của Notepad++ các bạn click chuột trái vào mục Encoding -> Encode in UTF-8.

Chọn lại bảng mã cho Notepad++

Mình đã hướng dẫn xong các bạn cách để khởi tạo một dự án web đơn giản nhất, hẹn gặp lại các bạn trong những bài tiếp theo của serie học HTML CSS căn bản.

Tôi là một freelance, mọi kiến thức mà tôi chia sẻ cho bạn đều là miễn phí!

Chia sẻ: