Hiện nay, để thiết kế được một trang web bạn có thể sử dụng khá nhiều phần mềm như: Notepad++ (miễn phí), web PHPdesigner, Dreamweaver, E-Texteditor, Komodo Edit (miễn phí), web NetBeans,..và một số phần mềm không phổ biến khác. Nhưng để thiết kế web với HTML thì tôi khuyên bạn nên sử dụng Notepad++. Bài viết hôm này Ideas Unlimited sẽ hướng dẫn các bạn cách thiết kế web đơn giản bằng HTML chi tiết từ A – Z.

Tham khảo: Hướng dẫn thiết kế giao diện web cho mobile

Hướng dẫn thiết kế web đơn giản bằng HTML

Hướng dẫn thiết kế web bằng ngôn ngữ HTML

Thiết kế web bằng HTML

1. Cấu trúc cơ bản của một tài liệu HTML

Dưới đây là một cấu trúc tài liệu HTML cơ bản:

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<TITLE>Tiêu đề của bài viết</TITLE>

</HEAD>

<BODY>

<h1>Giới thiệu công ty</h1>

<p>Đoạn văn bản chứa nội dung bài viết</p>

<p>Đoạn văn bản chứa nội dung bài viết 2</p>

</BODY>

</HTML>

Dưới đây tôi sẽ giải thích cụ thể từng thẻ TAG:

- HTML: Một tài liệu (document) HTML luôn bắt đầu bằng thẻ hay TAG <html> và kết thúc bằng </html>. Cặp thẻ <html></html> này cho phép trình duyệt nhận biết được đó là HTML. Vì thế trước khi bạn làm bất cứ điều gì, bạn cần khai báo cho trình duyệt biết bạn sẽ “Nói” với nó bằng ngôn ngữ gì, dòng đầu tiên bao giờ cũng phải là thẻ <html> và để đảm bảo bạn không quên thẻ đóng </html> thì bạn hãy gõ luôn 2 thẻ này sau đó chèn các phần tử khác vào giữa chúng.

- Dòng <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> dùng để xác định định dạng của tài liệu theo chuẩn utf-8

- HEAD: Dùng để xác định phần mở đầu, cung cấp thông tin về trang HTML của bạn

- TITLE: Thẻ này dùng để xác định tiêu đề của trang (Khi bạn di chuột lên tap của trình duyệt sẽ thấy tiêu đề này xuất hiện), thẻ này chỉ có thể sử dụng trong thẻ HEAD

- BODY: Nơi chứa tất cả nội dung chính của trang web

- H1: Thẻ định dạng đề mục, thông thường thì người lập trình sẽ đặt tiêu đề vào cặp thể này

- P: Được dùng để định dạng nội dung hay đoạn văn bản

Ngoài ra, còn một số thẻ thường được sử dụng như:

- B: Thẻ này gọi là thẻ bôi đậm, dùng để định dạng một đoạn văn bản in đậm

- I : Thẻ in nghiêng, dùng định dạng một đoạn văn bản in nghiêg

- U: Thể gạch dưới, dùng để định dạng một đoạn văn bản gạch dưới

- UL, LI: Cặp thể kết hợp dùng để định dạng một list văn bản thông thường:

<UL>

<li> Mục thứ nhất </li>

<li> Mục thứ hai </li>

</UL>

Ok. Trong phạm vi bài này thì ta sẽ chỉ tìm hiểu một số thẻ ở trên, bài kế tiếp tôi sẽ hướng dẫn các bạn cách chỉnh sửa sao cho trang web đẹp mắt hơn. Bây giờ tôi sẽ thiết kế demo một trang web giới thiệu Công ty thiết kế web IUL bằng những gì mình đã hướng dẫn ở trên nhé. Mở notepad và nhập vào đoạn HTML sau:

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<TITLE>IUL – Cung cấp dịch vụ thiết kế website chuyên nghiệp số 1 VN</TITLE>

</HEAD>

<BODY>

<h1>Công ty thiết kế web Ideas Unlimited</h1>

<p>Thietkewebshop.vn được thành lập và phát triển từ năm 2010, chúng tôi hoạt động với phương trâm “Tận tụy với khách hàng, tận tâm với công việc” chính điều đó đã giúp chúng tôi thành công tới thời điểm bây giờ. Trong suốt quá trình gần 7 năm hoạt động trong lĩnh vực thiết kế web, IUL đã tư vấn và hỗ trợ gần 1000 doanh nghiệp lớn nhỏ trong và ngoài nước, hầu hết các doanh nghiệp sử dụng dịch vụ thiết kế web của chúng tôi đều có phản hồi tốt về việc dinh doanh của họ.</p>

<p>Tại Ideas Unlimited chúng tôi sở hữu đội ngữ kỹ thuật viên trẻ đầy nhiệt huyết và sự sáng tạo, hầu hết đều được đào tạo từ FPT APTECH đào tạo lập trình viên quốc tế, thông thạo lập trình hầu hết các ngôn ngữ, họ luôn nỗ lực học hỏi, không ngừng sáng tạo và đóng góp vào sự phát triển thịnh vượng của công ty. Với đầy đủ kỹ năng và kinh nghiệm chúng tôi cam kết sẽ đem đến cho quý khách một website không chỉ đẹp trong mắt người dùng mà còn thân thiện với công cụ tìm kiếm (Chuẩn SEO), tương thích với tất cả trình duyệt cũng như thiết bị di động (Smartphone, ipad), nhiều tính năng mạnh mẽ và hiện đại, tốc độ tải trang nhanh chóng, dễ dàng cập nhật và chỉnh sửa, đặc biệt giao diện website chúng tôi luôn cập nhật theo xu hướng chuẩn quốc tế. Vì thế bạn có thể yên tâm sẽ không đụng hàng với bất cứ đơn vị doanh nghiệp nào khác.</p>

<p>Một số dịch vụ thiết kế web chuyên nghiệp của chúng tôi như: Thiết kế web bán hàng, thiết kế web cho mobile, thiết kế website nhà hàng khách sạn, thiết kế website bất động sản, web thương mại điện tử hay website tin tức online</p>

<b>Các ưu điểm trong sản phẩm - Dịch vụ của chúng tôi:</b>

<ul>

<li>Thiết kế website theo đúng chuẩn quốc tế</li>

<li>Hoàn tiền 100% nếu quý khách không hài lòng về website chúng tôi thiết kế</li>

<li>Giao diện website thân thiện, độc đáo, thiết kế theo yêu cầu của khách hàng</li>

<li>Tặng 1 tên miền quốc tế và miễn phí hosting trong vòng 1 năm</li>

<li>Website đảm bảo chuẩn SEO và tương thích với mobile</li>

<li>Chế độ bảo mật website cao, không sợ bị nhâm nhập bởi các hacker</li>

<li>Quản trị trang web dễ dàng, đơn giản và hiện đại bằng nhiều ngôn ngữ theo yêu cầu của mỗi quý khách hàng </li>

<li>Thời gian thiết kế web nhanh chóng, chỉ 3 – 7 ngày không để quý khách phải chờ đợi lâu</li>

<li>Cam kết bảo hành và hỗ trợ trọn đời</li>

<br />

<b><i>Công ty thiết kế website Ideas Unlimited chân thành cảm ơn quý khách hàng đã sử dụng dịch vụ và ủng hộ chúng tôi trong suốt thời gian vừa qua. Một lần nữa xin cảm ơn rất nhiều</i></b>

</BODY>

</HTML>

Ok. Như vậy là tôi đã thiết kế xong một trang web đơn giản với HTML rồi, giờ thì ta lưu lại với tên bất kỳ rồi mở bằng trình duyệt để xem thành quả nhé. Bì kết tiếp hướng dẫn thiết kế web đơn giản với HTML phần 2 tối sẽ giới thiệu với các bạn cách để viết một trang web đẹp hơn và một số thẻ HTML phổ biến khác. Các bạn nhớ theo dõi Blog của Thietkewebshop.vn nhé