[HƯỚNG DẪN] Thiết Kế Giao Diện Web Bằng HTML - MyPage

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

Thiết kế giao diện web bằng HTML là một trong những chủ đề có tính chuyên môn. Nó đòi hỏi người học phải có kiến thức cơ bản về lập trình. Tuy nhiên, không phải ai cũng có cơ hội được học và có sự am hiểu về công nghệ.

Vậy nên, bài viết này sẽ khái quát cho bạn đọc, nhất là những người ngoài ngành hiểu hơn về HTML. Và làm thế nào để thiết kế giao diện web bằng HTML một cách đơn giản và dễ dàng nhất.

HTML là gì?

HTML là thuật ngữ chuyên ngành, được viết tắt từ chữ “Hypertext Markup Language”. HTML không được xem như là ngôn ngữ lập trình. Bởi nó không tạo ra những chức năng có tính thao tác. Nó chỉ hỗ trợ người dùng phân bổ bố cục, định dạng cấu trúc trang web theo từng phần.

Có thể hiểu một cách đơn giản, HTML có công dụng như một Microsoft Word. Giúp định dạng, phân chia văn bản, các khối, các phần.

Làm thế nào để tạo 1 file HTML?

Ngày nay, có rất nhiều chương trình hỗ trợ tạo file HTML. Thậm chí, người am hiểu lập trình có thể tự tạo file HTML bằng notepad++. Tuy nhiên, đối với những người không am hiểu, thì đây là việc không hề dễ dàng.

1. Một số phần mềm hỗ trợ tạo file HTML miễn phí

Sau đây, là một số phần mềm có hỗ trợ tạo file HTML miễn phí. Người dùng có thể dễ dàng tìm thấy link để tải các phần mềm này từ Google.

✧ Phần mềm NotePad ++

✧ Phần mềm Visual Studio Code

✧ Phần mềm Sublime Text

✧ Phần mềm Komodo Edit

✧ Phần mềm Eclipse

✧ Phần mềm NetBeans

✧ Phần mềm BlueGriffon

✧ Phần mềm Bluefish

✧ Phần mềm Emacs Profile

✧ Phần mềm Aptana Studio

✧ Phần mềm CoffeeCup Free HTML Editor

✧ Phần mềm Microsoft Visual Studio Community

Trong những phần mềm kể trên, chúng tôi khuyến khích người dùng, sử dụng Visual Studio Code. Bởi đây là chương trình của Microsoft. Quá trình cài đặt đơn giản, nhanh chóng. Giao diện dễ nhìn, dễ thao tác. Và là công cụ được các lập trình viên dùng nhiều nhất trên TG hiện nay.

2. Cài đặt Visual Studio Code

Truy cập vào trang cung cấp phần mềm gốc: https://code.visualstudio.com/ 

Chọn nút Download → lúc này sẽ có các phiên bản cho người dùng lựa chọn. Tùy theo cấu hình máy, mà chọn file tương thích.

Sau khi download xong, hãy chạy tệp cài đặt. Cụ thể như sau:

➢ Nhấp đúp vào tệp để bắt đầu cài đặt Visual Studio Code.

➢ Xác nhận các điều khoản của thỏa thuận.

➢ Nhấp vào nút “Next”.

➢ Sử dụng vị trí cài đặt mặc định, sau đó nhấp vào nút “Next“.

➢ Sử dụng cài đặt mặc định của menu Start, sau đó nhấp vào nút “Next“.

➢ Tại mục “Other”, tích chọn mục:

✧ 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ấp vào nút “Install”.

➢ Nhấp vào nút “Finish”.

Như vậy, bạn đã cài đặt xong bản Visual Studio Code rồi đó. Sau này, nếu bạn cần thêm các tiện ích hỗ trợ cho việc lập trình hoặc thiết kế giao diện web bằng HTML và CSS của mình thì bạn có thể mở phần mềm lên, tìm đến mục Extension để cài đặt.

Vì đây không phải là nội dung chính của bài viết, nên mình sẽ không làm hướng dẫn chi tiết, tránh lang mang, mất thời gian.

3. Tạo file HTML đầu tiên

Để cho đơn giản, bạn tạo sẵn một thư mục có tên là “HTML” ở trên ổ đĩa, tại vị trí mà bạn muốn lưu trữ dữ liệu.

Sau đó, mở chương trình Visual Studio Code lên.

Chọn File → chọn Open Folder… → Tìm đến thư mục “HTML” vừa tạo → Click chuột trái lên thư mục “HTML” để xác định file vừa chọn → Nhấn nút Select Folder.

Sau khi mở file thành công, bạn sẽ có giao diện như hình.

Click vào biểu tượng (New file) → tạo 1 file có tên là “index.html”.

Lưu ý: tất cả những file thiết kế giao diện web bằng HTML đều phải có đuôi chấm html (.html).

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

Khởi tạo một trang web bằng HTML

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

Gõ dấu “!” trên file index.html (hình), rồi nhấn Enter. Ta được một cấu trúc tổng quát cho một trang HTML (xem hình).

Trong đó, bạn đặt tên trang web của mình tại <title>Tên _trang_web</title>

Bố cục, chia phần và định dạng trang web tại <body>Nội_Dung</body>

2. Tạo nội dung cơ bản cho file HTML

Trước khi bài viết hướng dẫn bạn cách thiết kế giao diện bằng HTML. Thì bạn cần hiểu rõ phương thức hoạt động của chúng. Mặt khác, cần phải nắm được các thẻ cơ bản trong HTML.

<h1></h1> : Đây là thẻ tiêu đều lớn trong một trang web. Một trang web chuẩn SEO, chỉ nên có một thẻ H1.

<h2></h2> : Đây là thẻ tiêu đề lớn thứ 2, có kích thước chữ nhỏ hơn so với H1. Được sử dụng làm tiêu đề theo từng mục của một bài viết.

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

Cụ thể:

Bạn hãy gõ nội dung như hình.

Sau khi, viết nội dung xong. Bạn nhấn ctrl + S để hệ thống lưu file vừa viết.

Sau đó, click chuột phải → chọn Open in default browser (mở trình duyệt mặc định).

Lưu ý: nếu máy bạn có trình duyệt mặc định là Chrome thì chọn như trên. Nếu không phải thì chọn Open in other browsers (mở trình duyệt khác) → tìm đến chrome để chạy chương trình.

Vì sao chọn chrome mà không phải là một trình duyệt khác? Đơn giản, vì chrome phổ biến, hỗ trợ thiết kế giao diện web bằng HTML tốt, ít khi xảy ra lỗi.

Khi chương trình được khởi chạy, sẽ tự động mở thành tab như hình:

Như vậy, bạn đã hiểu được cơ bản cách khởi tạo một trang web bằng HTML.

Cách phân chia bố cục một trang web

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

Tuy nhiên, đó chưa phải là vấn đề bạn cần quan tâm lúc này. Chỉ khi nào bạn nắm được cách bố cục một trang web, chia layout cho chúng thì mới bắt đầu tìm hiểu về CSS cũng chưa muộn.

Bố cục cơ bản của một trang web thông thường

Một website cơ bản, đơn giản nhất mà bạn có thể dễ dàng hình dung lúc này, sẽ gồm các phần sau:

Header: Header là phần đầu tiên của trang web và chứa logo của trang web, banner chính nằm ngang, menu phụ (ví dụ: thông tin liên hệ), khung tìm kiếm, …

Navigation: Thanh điều hướng (hoặc menu chính) là một thanh ngang chứa các danh mục chính của trang web. Phần menu này rất quan trọng giúp 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.

Content: Nơi chứa các phần nội dung chính của trang web.

Sidebar: Thanh bên – nơi chứa các phần liên quan đến nội dung chính (như menu phụ, các bài viết liên quan, quảng cáo, …). Tùy thuộc vào bố cục, một số trang web có 1 thanh bên, 2 thanh bên hoặc nhiều hơn.

Footer: Chân trang (dưới cùng) của trang chứa thông tin về trang web. Thông thường là: Thông tin liên hệ của công ty, doanh nghiệp, cá nhân, .. và tình trạng bản quyền.

Ngoài ra, một trang web còn có thể được chia thành rất nhiều phần khác nhau. Và bạn sẽ phải dành rất nhiều thời gian để học và nghiên cứu chuyên sâu hơn.

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

Ngày nay, mọi người có xu hướng thiết kế giao diện web bằng HTML5. Vì HTML5 có hỗ trợ các thẻ ngữ nghĩa. Giúp các công cụ tìm kiếm hiểu được cấu trúc của trang web chặt chẽ hơn.

Vì vậy, bài viết sẽ giới thiệu đến bạn đọc cách thiết kế giao diện web bằng các thẻ HTML5 thay vì sử dụng HTML4.

1. Các thẻ phổ biến trong HTML5

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

Thẻ <header></header>: Xác định phần đầu của trang web.

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

Thẻ <section></section>: xác định các phần của trang web.

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

Thẻ <aside></aside>: xác định phần bên cạnh nội dung (sidebar).

Thẻ <footer></footer>: xác định cuối trang (chân trang).

Có một sự khác biệt khi phân bổ cấu trúc giữa HTML4 và HTML5 (xem hình). Bạn đọc cần lưu ý, để có thể hiểu rõ hơn về cách trình bày nội dung trang web.

2. Dựng layout cho trang web bằng HTML5

Để có thể thiết kế một trang web hoàn thiện, thì chỉ với HTML là không đủ. Bạn đọc cần biết thêm cả CSS. CSS giúp tinh chỉnh về màu sắc, kích thước, vị trí, … và rất nhiều vấn đề phức tạp khác. 

Vậy nên, nếu thiết kế giao diện web bằng HTML, thì chỉ có thể dựng layout (bộ khung sườn) cho trang web. Đây cũng là nền tảng cơ bản, trước khi bạn học và biết về CSS.

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

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

Ứng dụng thẻ nav để tạo menu cho trang web

Tiếp theo là tạo thanh menu điều hướng để người dùng dễ dàng thao tác hơn. Ở đây, bài viết sẽ sử dụng thẻ nav là thẻ HTML5 tiêu chuẩn để tạo menu điều hướng.

Đồng thời, chúng ta sử dụng tổ hợp thẻ ul và li để tạo các mục trên thanh menu. Nếu bạn muốn thêm các mục thì chỉ cần thêm dòng li là được.

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

Khi đã có phần header và thanh menu, chúng ta sẽ tiếp tục tạo nội dung của trang web. Ở đây, bài viết sử dụng thẻ <section></section> để tạo phần nội dung chính cho trang web.

Lưu ý: một website có rất nhiều phần khác nhau, người ta phân biệt nội dung cho chúng bằng <section></section>.

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

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

Cuối cùng, phần cuối của trang web cơ bản thường là nơi ghi tên của cá nhân hoặc tổ chức sở hữu trang web, và cũng là nơi chứa thông tin bản quyền.

Kết luận

Như vậy, bạn đã học được cách thiết kế giao diện web bằng HTML thông qua cách dựng layout cho trang web. Để định hình một trang web với bố cục rõ ràng, màu sắc sinh động, kích thước tùy chỉnh,  … bạn đọc cần tìm hiểu thêm về CSS. Từ đó, mới có thể hoàn thiện một giao diện website như mong muốn.

——————————————————————–

CÔNG TY THIẾT KẾ WEBSITE WORDPRESS – MYPAGE

Địa chỉ: 27 Hoàng Hoa Thám, Phường 6, Q. Bình Thạnh Tp HCM

SĐT: 028 66 828 883 – 0938 771 797

Email: support@mypage.vn