Hướng dẫn thiết kế website cơ bản bằng HTML

Hướng dẫn thiết kế website cơ bản bằng HTML

Nội dung bài viết

    Bạn có nhu cầu thiết kế website phục vụ việc bán hàng, quảng bá thương hiệu và sản phẩm, dịch vụ? Hãy đọc bài viết sau để tìm hiểu cách thiết kế website html đơn giản, hiệu quả.

    Website là bộ mặt của mọi công ty, doanh nghiệp, cửa hàng,...
    Website là bộ mặt 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ì?

    HTML là một thuật ngữ viết tắt của cụm từ “Hypertext Markup Language”. Bản chất của HTML không phải là ngôn ngữ lập trình vì không thể tạo ra những chức năng có tính thao tác. HTML làm nhiệm vụ hỗ trợ người dùng sắp xếp bố cục, định dạng cấu trúc website theo từng phần.

    Nhiều người cho rằng HTML có công dụng tương tự một Microsoft Word vì sử dụng để định dạng, phân chia các khối, các phần và cả văn bản.

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

    Một số phần mềm 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

    Trên đây là một số phần mềm thiết kế website html phổ biến. Trong đó, Visual Studio Code - chương trình của Microsoft được nhiều người lựa chọn. Ưu điểm của chương trình này là giao diện đơn giản, dễ thao tác và quá trình cài đặt nhanh chóng.

    - Cài đặt Visual Studio Code

    Truy cập vào trang web: https://code.visualstudio.com/

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

    Bấm chọn Download → có nhiều phiên bản hiển thị cho bạn lựa chọn. Tùy thuộc cấu hình máy mà bạn chọn file tương thích.

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

    Sau khi download xong, bạn tiến hành chạy tệp cài đặt theo các bước sau:

    • 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ới các thao tác trên, bạn đã cài đặt xong bản Visual Studio Code. Trường hợp cần thêm các tiện ích hỗ trợ cho thiết kế giao diện web bằng HTML và CSS hoặc lập trình, bạn hãy mở phần mềm lên và tìm mục Extension để tiến hành cài đặt.

    - Tạo file HTML đầu tiên

    Đầ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
    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

    Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh
    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

    Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh
    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.

    Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh
    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 trang web của mình tại
    • Bố cục, chia phần và định dạng trang web tạiNộ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
    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
    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
    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
    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
    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
    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
    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 doanh
    Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh
    Doanh nghiệp, nhà máy,... cần thiết kế website để phục vụ tốt việc kinh doanh
    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ẻ 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
    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. Trên thị trường hiện nay có nhiều đơn vị uy tín mà bạn có thể lựa chọn. Trong đó Cánh Cam là đơn vị tiêu biểu với 14 năm kinh nghiệm, là chuyên gia trong lĩnh vực thiết kế web.

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

    Cánh Cam mang đến dịch vụ thiết kế website html với yếu tố khác biệt, thể hiện được thương hiệu quả doanh nghiệp. Với việc sử dụng các công nghệ thiết kế hiện đại, bạn sẽ có được trang web với giao diện đẹp, hệ thống quản trị thông minh và thuận tiện.

    Chúng tôi mang đến những trang web có đầy đủ tính năng, hệ thống bảo mật cao phù hợp với nhu cầu sử dụng của khách hàng. Ngoài việc thiết kế web, chúng tôi còn giúp xây dựng thương hiệu của khách hàng trên online bằng cách sắp xếp nội dung, bố cục, hình ảnh đẹp mắt.

    Sau 14 năm phát triển, chúng tôi đã thực hiện hơn 2000 website lớn nhỏ cho Nam Á Bank, Sony, PVoil, The Pizza Company, KFC, Domino Pizza, FPT Edu,.. Với đội ngũ IT, Dev chuyên nghiệp, Cánh Cam luôn hỗ trợ mọi nhu cầu của khách hàng nhằm đảm bảo mang đến một website hoạt động ổn định, bền vững.

    Danh sách câu hỏi thường gặp:
    HTML là gì?
    HTML là một thuật ngữ viết tắt của cụm từ “Hypertext Markup Language”. Bản chất của HTML không phải là ngôn ngữ lập trình vì không thể tạo ra những chức năng có tính thao tác. HTML làm nhiệm vụ hỗ trợ người dùng sắp xếp bố cục, định dạng cấu trúc website theo từng phần.
    Những phần mềm để tạo HTML là gì?
    • NotePad ++
    • Visual Studio Code
    • Sublime Text
    • Komodo Edit
    • Eclipse
    • NetBeans
    • BlueGriffon
    • Bluefish
    • Emacs Profile
    • Aptana Studio
    • CoffeeCup Free HTML Editor
    • Microsoft Visual Studio Community
    Chia bố cục website bằng HTML như thế nào?

    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.

    Giữ vai trò lãnh đạo trong công ty, tôi mong muốn góp phần gia tăng cơ hội cạnh tranh thương hiệu Việt thông qua cánh cửa thần kỳ internet.

    CEO Hứa Thiện Vương

    Chia sẻ về dự án!

    Hãy chia sẻ những yêu cầu cơ bản về dự án của bạn để có được báo giá phù hợp từ Cánh Cam.