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,...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
-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 doanhBạ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 doanhSau đâ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
-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ênBấ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
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 doanhBạ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 doanh3. 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:
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 doanhTrê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.
website là bộ mặt online của mọi công ty, doanh nghiệp,cửa hàng,...
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
-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
Thiết kế website để phục vụ tốt việc kinh doanh
- 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
-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
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”
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
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
Để 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 doanhNgoà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
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ườ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
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
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
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.