Cách thiết kế giao diện web bằng html và css có vai trò quan trọng cho bất kỳ ai khi thiết kế web, đây là 2 phần mà làm web với nền tảng nào cũng cần. Bài viết sau đây sẽ giới thiệu cách hướng dẫn bạn thiết kế giao diện web bằng html và css.
Cách thiết kế giao diện web bằng html và css
Cấu trúc của giao diện website sử dụng html5
Bài trước chúng ta đã biết thiết kế web html là gì? Phần này chúng ta sẽ tìm hiểu kỹ hơn về html. Một tập tin html được coi là tài liệu của website phải đáp ứng những điều kiện như sau:
- Có thẻ dùng để khai báo tập tin hay tài liệu web.
- Có các thể đóng và mở trong html.
- Trong phần nội dung của web có phần đóng mở hoàn chỉnh.
- Những phần này sẽ được giới thiệu chi tiết dưới đây để giúp bạn có cách thiết kế giao diện web bằng html và css hoàn chỉnh.
- Trước đây bạn cần tạo ra một tập tin riêng của html chứa nội dung, rồi lưu lại.
Thẻ khai báo tập tin
Đoạn đầu tiên khi khai báo html chính là thẻ khai báo tập tin, thẻ này có tính năng khai báo rằng đây là html. Ví dụ như: <! Document | htmtl>
Thẻ <!Document> có tham số kèm theo là html, đây là tham số để khai báo cho hệ thống biết đây là html5, có thể bạn không sử dụng phiên bản html5 nhưng vẫn có thể khai báo thẻ này, dễ sử dụng và có thể thêm html5 nếu muốn.
Thẻ <!Document> không thuộc html, thẻ này chỉ có tác dụng khai báo tài liệu, giúp trình duyệt hiểu được phiên bản sử dụng của html bạn sử dụng khi thiết kế websitte supper beautifull thôi.
Thẻ đóng mở tài liệu html
Đoạn thứ 2 của trang web với thẻ đóng mở <html> </html> là phần nội dung nằm trong html. Tại đây có thêm 1 thẻ nữa là thẻ language mã lệnh: <html lang=”vi”> đây là thẻ khai báo ngôn ngữ sử dụng trên website, khi thiết kế website lệnh vi nghĩa là tiếng Việt.
Chú ý là thẻ đóng mở <html> </html> có chứa thẻ <!DOCTYPE> bên trong.
Thẻ đóng mở trong phần thông tin website
Phần khai báo thông tin của website thường bên trong cặp thẻ <head></head>, trong cặp thẻ này thường chứa các thẻ như css, javascript, bootrap, thẻ title. Những thẻ nằm thường không hiển thị tại giao diện web khi thiết kế website, nhưng sẽ có tác dụng chứa các thông tin cần thiết của web.
Thẻ đóng mở phần nội dung trang web
Thẻ đóng mở phần nội dung trang web nằm trong cặp thẻ đóng mở <body></body>, đây là phần khai báo trong trình duyệt biết vùng chứa nội dung của website. Tại đây những nội dung dạng text, hình ảnh, video sẽ được hiển thị ra giao diện thiết kế website supper beautifull.
Cấu trúc css
Phần css là cách để trang trí cho website đẹp mắt và sống động hơn, đối với css có thể chứa bên trong cặp thẻ <head></head>, hoặc bạn có thể tách thành file riêng với đuôi là .css, rồi kết nối với tập tin html, mã lệnh kết nối: <link rel=”stylesheet” href=”đường dẫn file.css” type=”text/css”>.
Mọi ý kiến thắc mắc xin được gửi về thiết kế web 180 công ty thiết kế website uy tín tại hà nội thông qua số điện thoại:0363280183 hoặc email:dtn.cntt@gmail.com.
