Hướng dẫn thiết kế website đơn giản bằng html và css

• Công ty cua tu dong hcm - https://baophuc.vn)
• Báo giá Trọn gói Thi công Cửa Tự Động
• Cách lấy mã xác nhận để có thể đăng ký, đăng bài, bình luận trên diễn đàn này
• Kho giao diện đẹp dành cho Blogspot
• Bộ tài liệu Khóa Học hỗ trợ Marketing Online, SEO, MMO miễn phí hàng đầu tại Việt Nam

Bạn đang có nhu cầu thiết kế website cho các mục đích bán hàng, quảng bá thương hiệu và sản phẩm, dịch vụ của công ty bạn? Sau đây hãy cùng mình tìm hiểu cách tạo giao diện web đơn giản bằng html và css nhé.



website là bộ mặt online của mọi công ty, doanh nghiệp,cửa hàng,...


1. Thiết kế website chuẩn SEO bằng HTML

1.1 HTML là gì?

Hypertext Markup language hay còn được biết đến với tên gọi tắt là HTML. Có một hiểu lầm là HTML là ngôn ngữ lập trình, thật chất html không phải là ngôn ngữ lập trình do nó không thể tạo ra những chức năng có tính thao tác.HTML chỉ có nhiệm vụ hỗ trợ người dùng sắp xếp bố cục, định dạng website theo từng phần.

1.2 Cách để tạo 1 file HTML

Một số phần mềm dùng để tạo html

• NotePad ++
• Visual Studio Code
• Sublime Text
• Komodo Edit
• Eclipse
• NetBeans
• BlueGriffon
• Bluefish
• Emacs Profile
• Aptana Studio
• CoffeeCup Free HTML Editor
• Microsoft Visual Studio Community

Đây là những phần mềm phổ biến giúp bạn thiết kế website html.Đặc biệt nhất trong số đó là visual studio code. Chương trình thiết kế website html của microsoft được nhiều người lựa chọn bởi nó là phần mềm khá nhẹ, giao diện đơn giản, cài đặt nhanh chóng và còn miễn phí.


-Cách cài đặt visual studio code


Bạn truy cập vào: https://code.visualstudio.com/




Thiết kế website để phục vụ tốt việc kinh doanh


Bạn bấm chọn download. Visual studio code có nhiều bản cho bạn lựa chọn để phù hợp với cấu hình máy tính của bạn.



Thiết kế website để phục vụ tốt việc kinh doanh

Sau đây mình sẽ hướng dẫn bạn một số bước cài đặt cơ bản phần mềm Visual studio code

• Nháy đúp chuột vào tệp, bắt đầu cài đặt Visual Studio Code
• Bấm xác nhận tất cả điều khoản
• Chọn Next
• Sử dụng vị trí cài đặt mặc định, tiếp tục bấm Next
• Sử dụng cài đặt mặc định của menu Start, bấm Next
• Tại mục “Other”, bấm chọn các mục sau:
• Add “Open with code” action to Windows Explorer file context menu.
• Add “Open with code” action to Windows Explorer directory context menu.
• Register Code as an editor for supported file types.
• Add to PATH
• Nhấn vào nút Install
• Bấm Finish là xong

Vậy là mình đã cơ bản hướng dẫn xong các bạn cách cài đặt Visual studio code. Nếu bạn cần thêm tiện ích để hỗ trợ trong quá trình thiết kế giao diện web bằng html và css, bạn hãy tìm đến mục Extension để cài đặt thêm.

-Tạo file HTML
Đầu tiên, bạn hãy tạo thư mục có tên “HTML” trên ổ đĩa - ngay vị trí bạn muốn lưu trữ dữ liệu.

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh



Mở chương trình Visual Studio Code lên

Bấm File → chọn Open Folder… → Tìm thư mục HTML bạn vừa tạo → Nhấp chuột trái lên thư mục HTML, để xác định file vừa chọn → Bấm Select Folder

hình ảnh

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Khi đã mở file thành công, giao diện như hình bên dưới hiển thị

Chọn biểu tượng New file → tiến hình tạo file có tên Index.html

hình ảnh

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Lưu ý: toàn bộ những file thiết kế giao diện web bằng HTML đều có đuôi chấm html

Khi hoàn thiện bước này, bạn sẽ có giao diện như các hình ở mục bên dưới

2. Bắt đầu tạo trang web bằng HTML

2.1 Tạo 1 cấu trúc HTML cơ bản

Gõ dấu ! trên file index.html như hình bên dưới. Tiếp tục bấm Enter sẽ được một cấu trúc tổng quát cho một trang HTML.

hình ảnh

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

• Trong đó, bạn đặt tên của web thay vào chữ “viewreport”
• Bố cục, chia phần và định dạng trang web ở phần content=”nội dung”

2.2 Tạo nội dung cơ bản cho File HTML vừa tạo

Trước khi bắt tay vào thiết kế giao diện bằng HTML, bạn cần nắm rõ phương thức hoạt động và các thẻ cơ bản trong HTML.

<h1></h1>: Thẻ tiêu đều lớn nhất trong trang web, chỉ nên có một thẻ H1 trong trang web chuẩn SEO

<h2></h2>: Thẻ tiêu đề lớn thứ 2, kích thước chữ nhỏ hơn thẻ H1, thường dùng làm tiêu đề theo từng mục của một bài viết

<p></p>: Thẻ chứa các đoạn văn bản trong từng mục của thẻ H2

Cụ thể:

Bạn có thể gõ nội dung như hình bên dưới

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Khi viết xong nội dung, bấm ctrl + S để hệ thống lưu file vừa viết

Nhấp chuột phải → bấm Open In Default Browser

Lưu ý: nếu bạn sử dụng Chrome thì thực hiện như trên. Nếu không thì chọn Open in other browsers → tìm Chrome để chạy chương trình.



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Bạn nên chọn Chrome vì đây là trình duyệt phổ biến nhất, ít xảy ra lỗi khi hỗ trợ thiết kế website html.

Chương trình sau khi được khởi chạy sẽ mở thành tab như hình sau:



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

3. Phân chia bố cục website bằng HTML

Để thiết kế website html, bạn cần am hiểu về thiết kế giao diện web bằng CSS. CSS là công cụ hỗ trợ người dùng định dạng cỡ chữ, màu sắc, cỡ chữ, … để giao diện đẹp mắt, sinh động hơn.

Tuy nhiên, trước khi tìm hiểu về CSS, bạn cần nắm được cách bố cục một trang web và chia layout cho chúng.

Một website cơ bản thường gồm các phần:

• Header: Phần đầu tiên của trang, chứa logo banner nằm ngang, logo, menu phụ
• Navigation: Thanh điều hướng (hoặc menu chính) nằm ngang, chứa các danh mục chính của trang web. Người dùng và công cụ tìm kiếm định hình hiểu biết về cấu trúc trang web sẽ dựa vào thanh menu này.
• Content: Chứa những phần nội dung chính của trang web.
• Sidebar: Thanh bên chứa các phần liên quan đến nội dung chính (bao gồm menu phụ, quảng cáo, bài viết liên quan,...). Tùy thuộc bố cục trang web mà có 1, 2 hoặc nhiều thanh bên.
• Footer: Chân trang chứa thông tin về trang web như: thông tin liên hệ và tình trạng bản quyền.

Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Ngoài các phần cơ bản trên, một trang web còn được chia thành nhiều phần. Để hiểu rõ hơn, bạn cần dành thêm thời gian để nghiên cứu.

4. Thiết kế giao diện website chuyên nghiệp bằng HTML

4.1 Các thẻ phổ biến trong HTML

Các thẻ HTML được dùng để xây dựng bố cục bao gồm:

Thẻ <header></header>: Phần đầu của trang web

Thẻ <nav></nav>: Thanh điều hướng (menu)

Thẻ <section></section>: Các phần của trang web

Thẻ <article></article>: Định nghĩa độc lập về nội dung trong bài viết

Thẻ <aside></aside>: Phần bên cạnh nội dung (sidebar)

Thẻ <footer></footer>: Chân trang



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Để hiểu rõ về cách trình bày trong trang web, bạn cần tìm hiểu thêm về sự khác biệt khi phân bổ cấu trúc giữa HTML4 và HTML5.

4.2 Sử dụng layout cho trang web bằng HTML

HTML không đủ để thiết kế nên một trang web toàn diện. Do đó, cần tìm hiểu thêm về CSS để chỉnh vị trí, kích thước, màu sắc,... và nhiều yêu cầu phức tạp khác.

Vì thế, nếu thiết kế giao diện web bằng HTML, bạn có thể dựng layout cho trang web. Đây chính là nền tảng cơ bản cần quan tâm trước CSS.

Ứng dụng thẻ Header tạo phần đầu cho trang web

Header là phần mở đầu của các trang web, là nơi đặt logo (hình) hoặc tên website (chữ). Để đơn giản, có thể chọn chữ làm tiêu đề cho phần mở đầu.



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Ứng dụng thẻ Nav tạo menu cho trang web

Để người dùng thao tác dễ hơn cần tạo thanh menu điều hướng. Bài viết này hướng dẫn sử dụng thẻ nav là thẻ HTML5 tiêu chuẩn để tạo menu này.

Kết hợp sử dụng tổ hợp thẻ ul và li để tạo các mục trên thanh menu. Khi có nhu cầu thêm các mục, chỉ cần thêm dòng li là xong.



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Ứng dụng thẻ Section và Article để dựng nội dung cho trang web

Bài viết này hướng dẫn sử dụng thẻ <section></section> để tạo nội dung chính cho trang web.

Lưu ý: Trong website thường có nhiều phần khác nhau và <section></section> dùng để phân biệt nội dung các phần.

Bài viết này hướng dẫn sử dụng thẻ <article></article> để bao gồm các nội dung nhỏ ví dụ như nội dung bài viết, quảng cáo,… Bên cạnh đó, bộ thẻ ol và li được sử dụng để liệt kê các phần tử có đánh số thứ tự. Thẻ <a></a> dùng để chèn link với thuộc tính là “href”.



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanhDoanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Ứng dụng thẻ footer để tạo chân trang website

Phần cuối của trang web ghi thông tin tổ chức, cá nhân sở hữu trang web. Đây cũng là nơi chứa thông tin bản quyền.



Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh

Trên thực tế, việc thiết kế website html chưa bao giờ là dễ dàng, đặc biệt là với những người không có kinh nghiệm hoặc không rành về các yếu tố liên quan đến HTML. Bạn có thể làm sai, thao tác nhầm hoặc gặp rắc rối với những thuật ngữ mình không hiểu.

Vì thế, để tiết kiệm thời gian, công sức, bạn nên cân nhắc lựa chọn những dịch vụ thiết kế web chuyên nghiệp.