Impact logo

Thiết kế giao diện web bằng html

Như bài trước các bạn cũng biết để thiết kế một giao diện web Website designer cần biết sử dụng ngôn ngữ HTML basic. Và HTML là gì, bài viết này sẽ cung cấp cho các bạn một số thông tin cơ bản về thiết kế giao diện web bằng html.

Xem thêm: Thiết kế web chuyên nghiệp

Html là gì?

- HTML (Hypertext Markup Language): Là “ngôn ngữ đánh dấu (markup). Đây là một siêu văn bản” để tạo trang web. Theo cách hiểu một cách đơn giản, HTML chính là cốt lõi của giao diện trang web. Nó có chức năng xác định bố cục web và đánh dấu chúng lại bằng các thẻ tag. Sau đó hệ thống sẽ tự động xác định vai trò riêng của các đối tượng được đánh dấu.
- Đây là một trong số các ngôn ngữ phổ biến trong thiết kế web bên cạnh CSS, JavaScript… Tuy nhiên, HTML không phải ngôn ngữ lập trình mà chỉ sử dụng để định dạng, bố cục trang web
- Đuôi file tài liệu HTML có dạng: .html; htm

Có thể bạn quan tâm: thiết kế web seo tổng lực

Vai trò của HTML

+ HTML để xây dựng cấu trúc siêu văn bản
+ Khai báo tệp file media (kỹ thuật số) hình ảnh, nhạc, video…
- Phiên bản mới nhất của HTML: HTML5.

Ưu điểm, hạn chế của Thiết kế giao diện web bằng html

Ưu điểm

- HTML là mã nguồn mở và nó hoàn toàn miễn phí
- Thao tác sử dụng vô cùng đơn giản
- Dễ dàng vận hành trên các trình duyệt web
- Tích hợp được nhiều loại ngôn ngữ khác nhau như: PHP, Node.js…

Hạn chế
- Mỗi trang HTML cần được tạo riêng dù trùng lặp header/ footer
- Khó khăn trong việc kiểm soát việc đọc, hiển thị tập tin HTML
Đối với các bạn chưa học về html muốn Thiết kế giao diện web bằng html có thể tìm các mẫu html thiết kế web sẵn để chỉnh sửa trên các mẫu đó là cách nhanh chóng để có được một giao diện web đẹp. Chúc các bạn thành công

Các bước thiết kế giao diện web bằng html

Bố cục website gồm 3 phần

  • Header
  • Main bao gồm: Content và Sidebar
  • Footer

Khi dựng Layout bạn dựa theo các phần đó để dựng HTML.

Phần Header

Code:


Phần header là phần chúng ta sẽ hiển thị nội dung, hình ảnh và video

Phần Content

Đây là phần cho bạn sẽ hiển thị video, hình ảnh nội dung

Code:

Phần sidebar

Sidebar là phần hiển thị bên trái hoặc phải của website dọc theo nội dung chính. 
Code:

Phần Footer

Đây chính là phần chân của một trang web
Code: