- Trần Thị Thúy
- 01/09/2021, 04:01 pm
- 1,741
Tạo giao diện web bằng html hoặc css là bước đầu tiên để bạn lập trình ra một website. Đây là công việc phức tạp, đòi hỏi nhiều kiến thức về lập trình. Và bài viết sau đây sẽ hướng dẫn bạn tạo giao diện web đơn giản bằng html và css. Để từ đó có thể hiểu rõ hơn về công việc của người thiết kế và cách họ tạo ra một website.
Mục lục [Ẩn]
- 1. Tìm hiểu về HTML và CSS
- 1.1. HTML là gì?
- 1.2. CSS là gì?
- 2. Hướng dẫn tạo giao diện web đơn giản bằng html
- 2.1. Tạo phần đầu trang web
- 2.2. Tạo menu cho website
- 2.3. Tạo nội dung cho website
- là tiêu đề lớn,
- là tiêu đề nhỏ.
- 2.4. Tạo chân trang cho website
- 3. Tạo giao diện web đơn giản bằng CSS
- 3.1. Thiết lập thuộc tính cơ bản cho website
- 3.2. Chia khung cho trang web
- 3.3. Trang trí nội dung trang web
- 3.4. Trang trí cho call to action
- 3.5. Trang trí cho chân trang web
- 4. Lời kết
1. Tìm hiểu về HTML và CSS
1.1. HTML là gì?
HTML được viết tắt từ HyperText Markup Language. Hiểu đơn giản là một loại ngôn ngữ dùng để thiết kế giao diện website.
Mỗi thẻ HTML được đánh dấu bằng một dấu . Bên trong ký tự đóng mở ngoặc đó là các ký tự lập trình tạo nên thẻ HTML hiển thị một nội dung riêng.
Khi tạo giao diện website bằng html cần nhớ các quy tắc sau.
- Thẻlà thẻ tiêu đề, thường chứa các thông tin khai báo, lời chào
- Thẻlà nội dung chính của trang web
- Thẻ
- Thẻ
Xem chi tiết tại: HTML là gì? Vai trò của HTML
1.2. CSS là gì?
CSS viết tắt từ Cascade Style Sheet. Một kiểu ngôn ngữ giúp trình duyệt hiểu được định dạng và bố cục của website. HTML dựng khung xương cho website thì CSS làm đầy khung xương đó để website toàn diện hơn.
Một thẻ CSS gồm 3 phần chính
VÙNG CHỌN {
Thuộc tính 1: giá trị 1
Thuộc tính 2: giá trị 2
}
Trong đó:
- Thông tin vùng chọn quy định cách xác định thẻ html. Ví dụ qua tên lớp, id,...
- Thuộc tính: yếu tố muốn thay đổi của thẻ html trong vùng chọn
- Giá trị: giá trị cụ thể của thuộc tính. Ví dụ thuộc tính chiều dài thì giá trị là mét, thuộc tính là màu thì giá trị là mã màu.
Xem thêm: CSS là gì? Hướng dẫn dùng CSS chi tiết
2. Hướng dẫn tạo giao diện web đơn giản bằng html
Để tạo giao diện web bằng html thì bạn cần gõ code. Và dưới đây là những đoạn code đơn giản để bạn thiết kế website.
2.1. Tạo phần đầu trang web
2.3. Tạo nội dung cho website
Mỗi trang web sẽ có nội dung khác nhau. Để phân biệt các đoạn nội dung trong trang, bạn dùng thẻ
là tiêu đề lớn,
là tiêu đề nhỏ.
Ví dụ như đoạn code dưới đây
2.4. Tạo chân trang cho website
3. Tạo giao diện web đơn giản bằng CSS
3.1. Thiết lập thuộc tính cơ bản cho website
Dưới đây, ta có ví dụ 1 đoạn code bằng CSS để thiết lập cỡ chữ, màu chữ và kiểu chữ cho website.
3.2. Chia khung cho trang web
- Thiết lập khung menu dọc cho website với độ rộng toàn cửa sổ trang, ta có đoạn code sau.
- Trang trí menu
- Thiết lập chiều cao cho từng mục trong menu
3.3. Trang trí nội dung trang web
3.4. Trang trí cho call to action
3.5. Trang trí cho chân trang web
Với các đoạn code css trên ta được một giao diện web cơ bản như sau.
Xem thêm: Hướng dẫn tự viết plugin wordpress
4. Lời kết
Bài viết trên là hướng dẫn của Nhân Hòa để tạo giao diện web đơn giản bằng html và css. Đây chỉ là những đoạn code và thao tác rất đơn giản. Để tạo ra một website người ta phải lập trình rất nhiều thông số khác. Vì thế, hãy để phần việc này cho những công ty thiết kế website chuyên nghiệp như Nhân Hòa
Chúng tôi giúp tạo lập website với các dịch vụ như đăng ký tên miền, thuê hosting, VPS giá rẻ, máy chủ, thiết kế website,... Bạn liên hệ thông tin sau để được tư vấn kỹ hơn.
+ Tổng đài: 1900 6680
+ Website: //nhanhoa.com/
+ Fanpage: //www.facebook.com/nhanhoacom
+ Chỉ đường: //g.page/nhanhoacom
+ Khuyến mãi Nhân Hòa: //nhanhoa.com/khuyen-mai.html