Chào mừng bạn đến với phần đầu của loạt bài viết về thiết kế web đơn giản bằng HTML. Để bắt đầu, tôi muốn chia sẻ với bạn một số khái niệm cơ bản về thiết kế web. Thay vì sử dụng các phần mềm thiết kế web, tôi đề xuất bạn nên bắt đầu với Notepad. Tạo ra một trang web đơn giản để hiểu và áp dụng kiến thức hiệu quả nhất.
Cập nhật các khái niệm cơ bản về HTML
Các thẻ HTML cơ bản
Trước khi đi vào chi tiết, hãy cùng xem qua cấu trúc cơ bản của một tài liệu HTML. Tài liệu này bao gồm các cặp thẻ như sau:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Tiêu đề bài giới thiệu</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>
Trong ví dụ trên, chúng ta sử dụng một số cặp thẻ sau:
HTML
: xác nhận rằng tài liệu này là một tài liệu HTML.meta
: xác định định dạng của tài liệu theo chuẩn UTF-8.HEAD
: xác định phần mở đầu của tài liệu.TITLE
: chỉ sử dụng trong phần mở đầu của tài liệu và nằm trong thẻ HEAD.BODY
: xác định phần nội dung chính của bài viết.H1
: định dạng đề mục, thường được sử dụng để đặt tiêu đề của trang.P
: định dạng một đoạn văn bản.BR
: chuyển xuống dòng mới.B
: in đậm một đoạn văn bản.I
: in nghiêng một đoạn văn bản.U
: gạch dưới một đoạn văn bản.UL
,LI
: định dạng danh sách thông thường.
Trong bài viết này, chúng ta chỉ tìm hiểu một số thẻ cơ bản như trên. Trong các bài viết tiếp theo, chúng ta sẽ tìm hiểu cách định dạng bài viết để tạo ra trang web hấp dẫn hơn.
Thiết kế trang web giới thiệu công ty thiết kế web 123CORP
Giờ đây, chúng ta sẽ áp dụng kiến thức đã học để thiết kế một trang web giới thiệu công ty thiết kế web 123CORP. Hãy mở chương trình Notepad và nhập nội dung HTML sau:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Thiết kế website - Design A website</TITLE>
</HEAD>
<BODY>
<h1>Công ty Thiết kế web 123CORP</h1>
<p>thietkeweb9999.com Chúng tôi sinh ra là để thiết kế website. Với phương thức kinh doanh "Tận tụy với Khách Hàng, Tận tâm với công việc" là yếu tố quan trọng nhất được 123CORP đặt làm phương thức kinh doanh, là nền tảng vững chắc để phát triển cao hơn, xa hơn và trên toàn Thế giới.</p>
<p>Cùng với một đội ngũ kỹ thuật viên trẻ đầy nhiệt huyết, thông thạo lập trình luôn tìm tòi học hỏi, nỗ lực không ngừng và sự góp phần của các chuyên gia giàu kinh nghiệm trong lĩnh vực CNTT, 123CORP đã phát triển công nghệ CMS NVA hoàn thiện đạt hiệu quả tối đa. Đảm bảo độ bảo mật của website đạt tiêu chuẩn Quốc tế, tính bản quyền tuyệt đối, tương thích với mọi trình duyệt, thân thiện với các công cụ tìm kiếm, không hạn chế tính năng, mở rộng dễ dàng, chiếm dụng ít tài nguyên, tốc độ tải trang rất nhanh... Hội đủ các yếu tố để tạo nên một website chuẩn tuyệt đối.</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 đúng chuẩn.</li>
<li>Quý Khách không mất một đồng chi phí nào nếu chưa hài lòng về sản phẩm, dịch vụ của 123CORP.</li>
<li><b><i>Khuyến mãi 10% đối với Quý Khách hàng đã có website.</i></b></li>
<li>Tặng 1 tên miền quốc tế.</li>
<li>Bảo hành website vô thời hạn.</li>
<li>Luôn có các chính sách hỗ trợ Khách hàng sau khi website online (<b>Tặng 1 tháng sử dụng dịch vụ chăm sóc web; Tư vấn, hỗ trợ quảng bá web trong suốt thời gian website online; Ưu đãi và tư vấn nhiệt tình khi Quý Khách có nhu cầu mở rộng website;…</b>)</li>
<li>Quản trị trang web dễ dàng, đơn giản bằng nhiều thứ tiếng theo yêu cầu của mỗi Quý Khách Hàng.</li>
<li>Tập trung tối đa, tận tình, tâm huyết vào mỗi sản phẩm của từng Khách hàng.</li>
</ul>
<b><i>Công ty thiết kế website ITPS chân thành cảm ơn Quý Khách Hàng đã quan tâm và ủng hộ Chúng tôi trong thời gian qua!</i></b>
</BODY>
</HTML>
Lưu tệp tin với tên bất kỳ và mở bằng trình duyệt để xem trang web của bạn.
Đó là những gì chúng ta đã học về thiết kế web đơn giản bằng HTML! Hãy luôn lưu ý các khái niệm và thực hành thường xuyên để nâng cao kỹ năng của bạn. Đừng quên theo dõi các bài viết tiếp theo trong loạt bài này để tìm hiểu thêm về cách định dạng bài viết để tạo ra những trang web đẹp mắt hơn.
Nguồn: aweb.vn