1. Diễn đàn SEO chất lượng, rao vặt miễn phí có PA, DA cao: chuanmen.edu.vn | batdongsan24h.edu.vn | aiti.edu.vn | vnmu.edu.vn | dhtn.edu.vn
    Dismiss Notice
    • ĐT: 0939 713 069
    • Mail: tanbomarketing@gmail.com
    • Skype: dangtanbo.kiet
    Dismiss Notice

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


NHÀ TÀI TRỢ CHÍNH:

* Okmen diễn đàn SEO miễn phí
* Cong ty cửa tự động tại Tp HCM
* Cong ty cổng tự động tại Tp HCM
* Lắp cửa tự động – Cửa cổng tự động châu âu bảo hành 3 năm
* Công ty lắp đặt Cửa Tự Động, Cổng Tự Động tại thành phố Hồ Chí Minh
* Thi công lắp đặt cổng tự động tại hcm
* Đại lý cửa tự động tại Tp. Hồ Chí Minh nhập khẩu chính hãng
* Chuanmen Froum Diễn Đàn Marketing Online Việt Nam | Nơi Chia Sẻ Kiến Thức SEO
* Batdongsan24h Froum Diễn Đàn Rao Vặt, SEO Bất Động Sản Online Việt Nam

Thảo luận trong 'Mua Bán Tên Miền - Hosting - Website' bắt đầu bởi levi72, 15/2/22.

  1. levi72
    Offline

    levi72 admin

    (Nhà tài trợ chính: Công ty cua tu dong hcm - https://baophuc.vn)
    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.
     

    Nguồn: okmen.edu.vn

Chia sẻ trang này