Ngày nay đi đâu hay ngồi đâu các bạn cũng bất chợt nghe nói nhiều đến cụm từ Website, có bao giờ bạn suy nghỉ chính bạn sẻ tạo ra cho riêng ban một Website.
Bạn đang lo lắng không biết bắt đầu tư đâu và làm như thế nào? Vậy thì bạn hãy yên tâm Webhagia.com xin giới thiệu đến các bạn các thiết kế website đơn giản bằng HTML.
Bạn đang lo lắng không biết bắt đầu tư đâu và làm như thế nào? Vậy thì bạn hãy yên tâm Webhagia.com xin giới thiệu đến các bạn các thiết kế website đơn giản bằng HTML.
Bài 1: CẤU TRÚC CƠ BẢN CỦA MỘT FILE HTML
Một tài liệu HTML cơ bản cần có cấu trúc như sau:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE></TITLE>
</HEAD>
<BODY>
<h1></h1>
<p></p>
<p></p>
</BODY>
</HTML>
Môt cặp thẻ trong file html được nghĩa như sau:
<tên thẻ>Nội dung</tên thẻ>, ngoài ra cũng có một số thẻ được định nghĩa khác ví dụ như thẻ meta <meta nội dung thẻ />, <br />
<tên thẻ> là dấu hiệu bắt đầu của một thẻ
</tên thẻ> là dấu hiệu kết thúc một thẻ
Trong cấu trúc trên có nhứng cặp thẻ sau:
<HTML>
Là cặp thẻ được sử dụng để xác nhận đó là một file HTML.
</HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Xác định file được định dạng theo chuẩn utf-8
<HEAD>
Được dùng để xác định phần mở đầu cho file
</HEAD>
<TITLE>
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, nó phải nằm trong thẻ HEAD, thể hiện tiêu đề của trang HTML này khi được chạy trên Internet hoặc Localhost.
</TITLE>
<BODY>
Thẻ này được sử dụng để xác định phần nội dung chính của bài viết thể hiện trên file này
</BODY>
<h1>
Thẻ định dạng đề mục, thường người lập trình sẽ đặt tiêu đề bài viết vào cặp thẻ định dạng này.
</h1>
<p>
Được sử dụng để định dạng một đoạn văn bản.
</p>
</BR> là thể không có mở đầu và kết thúc thẻ, thẻ này xuất hiện ở đâu thì phần nội dung dưới đó sẻ sang dòng mới.
<B>
Được sử dụng để định dạng một đoạn văn bản được in đậm.
</B>
<i>
Được sử dụng để định dạng một đoạn văn bản được in nghiêng.
</i>
<u>
Được sử dụng để định dạng một đoạn văn bản được nghạch dưới.
</u>
<UL> Cặp thể kết hợp dùng để định dạng danh sách thông thường:
<li> Mục thứ nhất </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
<li> Mục thứ hai </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
</UL>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
Trong bài 1 này các bạn chỉ làm quen với các thẻ cơ bản thông dụng như trên, các bài tiếp theo Webhagia.com sẻ giới thiệu nhiều hơn tác tính năng làm đẹp cho website.
Bây giờ chúng ta sẻ thử làm một trang HTML đơn giản về cty nhé.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Thiết kế website | Thiet ke website | Thiết kế web | Thiet ke web - Webhagia.com</TITLE>
</HEAD>
<BODY>
<h1>Giới thiệu về Webhagia.com</h1>
<p>Webgiare.net </p>
<p>Webgiare.net</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</li>
<li>Quý khách không hài lòng chúng tôi không thu phí.</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 Việt Nam</li>
<li>Bảo hành website vô thời hạn.</li>
<li>Luôn có các chính sách chăm sóc Khách hàng sau khi website chạy trên Internet.</li>
<li>Với trang Admin cập nhật dể dàng và thông dụng, mới nhất hiện nay bằng công nghệ <b>Web 2.0</b></li>
<li>Tinh thần phục vụ tối đa, chất lượng luôn đảm bảo hoàn hảo nhất. </li>
<br />
<br />
<b><i>Webhagia.com 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>
Một tài liệu HTML cơ bản cần có cấu trúc như sau:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE></TITLE>
</HEAD>
<BODY>
<h1></h1>
<p></p>
<p></p>
</BODY>
</HTML>
Môt cặp thẻ trong file html được nghĩa như sau:
<tên thẻ>Nội dung</tên thẻ>, ngoài ra cũng có một số thẻ được định nghĩa khác ví dụ như thẻ meta <meta nội dung thẻ />, <br />
<tên thẻ> là dấu hiệu bắt đầu của một thẻ
</tên thẻ> là dấu hiệu kết thúc một thẻ
Trong cấu trúc trên có nhứng cặp thẻ sau:
<HTML>
Là cặp thẻ được sử dụng để xác nhận đó là một file HTML.
</HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Xác định file được định dạng theo chuẩn utf-8
<HEAD>
Được dùng để xác định phần mở đầu cho file
</HEAD>
<TITLE>
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, nó phải nằm trong thẻ HEAD, thể hiện tiêu đề của trang HTML này khi được chạy trên Internet hoặc Localhost.
</TITLE>
<BODY>
Thẻ này được sử dụng để xác định phần nội dung chính của bài viết thể hiện trên file này
</BODY>
<h1>
Thẻ định dạng đề mục, thường người lập trình sẽ đặt tiêu đề bài viết vào cặp thẻ định dạng này.
</h1>
<p>
Được sử dụng để định dạng một đoạn văn bản.
</p>
</BR> là thể không có mở đầu và kết thúc thẻ, thẻ này xuất hiện ở đâu thì phần nội dung dưới đó sẻ sang dòng mới.
<B>
Được sử dụng để định dạng một đoạn văn bản được in đậm.
</B>
<i>
Được sử dụng để định dạng một đoạn văn bản được in nghiêng.
</i>
<u>
Được sử dụng để định dạng một đoạn văn bản được nghạch dưới.
</u>
<UL> Cặp thể kết hợp dùng để định dạng danh sách thông thường:
<li> Mục thứ nhất </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
<li> Mục thứ hai </li>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
</UL>Cặp thể kết hợp dùng để định dạng danh sách thông thường:
Trong bài 1 này các bạn chỉ làm quen với các thẻ cơ bản thông dụng như trên, các bài tiếp theo Webhagia.com sẻ giới thiệu nhiều hơn tác tính năng làm đẹp cho website.
Bây giờ chúng ta sẻ thử làm một trang HTML đơn giản về cty nhé.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Thiết kế website | Thiet ke website | Thiết kế web | Thiet ke web - Webhagia.com</TITLE>
</HEAD>
<BODY>
<h1>Giới thiệu về Webhagia.com</h1>
<p>Webgiare.net </p>
<p>Webgiare.net</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</li>
<li>Quý khách không hài lòng chúng tôi không thu phí.</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 Việt Nam</li>
<li>Bảo hành website vô thời hạn.</li>
<li>Luôn có các chính sách chăm sóc Khách hàng sau khi website chạy trên Internet.</li>
<li>Với trang Admin cập nhật dể dàng và thông dụng, mới nhất hiện nay bằng công nghệ <b>Web 2.0</b></li>
<li>Tinh thần phục vụ tối đa, chất lượng luôn đảm bảo hoàn hảo nhất. </li>
<br />
<br />
<b><i>Webhagia.com 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 File HTML sau khi đã nhập code
Chọn các chi tiết lưu để file tốt hơn
Và đây chúng ta chiêm ngưởng thành quả mà chúng ta vừa tạo và lưu nhé!
Quỳnh Châu Blog
Chính Trực Blog
0 nhận xét:
Đăng nhận xét