Cấu tạo một trang web dạng HTML - Hướng dẫn cách thiết kế
Bài viết này Namkna sẽ giới thiệu và hướng dẫn các bạn các bước để làm quyen với cấu tạo của một trang web dưới dạng HTML. Nếu bạn muốn trở thành một webmaster thật sự thì đừng bỏ qua bài viết nhập môn này nha. 

Để viết HTML cho trang Web, bạn hãy bắt đầu với chương trình NotePad của Microsoft có đi kèm theo với Windows (Để mở nó bạn truy cập theo đường dẫn: Start - All program - Accesserioes - Notepad). Ðó là một ASCII Editor. Viết xong, bạn hãy Lưu nó vào một folder nào đó dễ nhớ. (Ngoài ra bạn cũng có thể sử dụng trình editor trực tuyến mà namkna đã thiết kế để chỉnh sửa trực tiếp trên đó)

Khi lưu file bạn chú ý, tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: start.htm (Nếu bạn có sử dụng tiếng việt thì xem bài này để biết cách lưu tiếng việt nha). Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một trình duyệt (Browse) bất kỳ trên máy của bạn.

» Cấu trúc cơ bản của một trang web HTML

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <HTML> và </HTML>). Nhờ có cặp Tag này mà trình duyệt (browser) biết được đó là document HTML để hiển thị nội dung chứa trong đó. Những chữ đó chỉ để dành riêng cho trình duyệt, người đọc chỉ nhận được những gì viết giữa cặp Tag gồm <body> và </body>. 

- Trong một document html, thường được người viết thêm vào những đoạn chú thích để phân biệt từng vị trí hay từng đoạn code khác nhau. Những dòng chú thích đó sẽ không được trình duyệt đọc và tất nhiên nó sẽ không hiển thị trên trang html, người ta sử dụng chú thích bằng cách đặt nó vào giữa 2 đoạn <!-- và --> như sau:
<!-- Ðây là dòng chú thích, chỉ dành riêng cho bạn, browser bỏ qua dòng này -->

- Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:
<html>
<body>
<!-- Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. -->
</body>
</html>

- Một trang trống, không có nội dung với nền màu da cam sẽ được viết như sau:
<html>
<body bgcolor="orange">
<!-- Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn. -->
</body>
</html>
Ở trên mình khai báo trực tiếp vào thẻ body, Tất nhiên sau này am hiểu bạn có thể khai báo nó bằng các thuộc tính CSS tách rời để tránh làm dài code và phải sử dụng nhiều lần.

- Tất nhiên, một Homepage còn có nội dung (lời viết và hình ảnh):
<html>
<body bgcolor="beige">
<font face="Arial" size="2" color="black">
Chào bạn, đây là dòng chữ viết bằng font Arial, màu đen, cỡ 2
</font><br><br>
<font face="Verdana" size="3" color="navy">
Còn đây là dòng chữ viết bằng font Verdana, màu xanh nước biển, cỡ 3
</font><br><br>
<font face="Bodoni" size="4" color="red">
Dòng này lại là font Bodoni, màu đỏ, cỡ 4 </font><br>
</body>
</html>
Trong đó:
  • font thể hiện cho mẫu chữ
  • size thể hiện cho cỡ chữ (số càng lớn thì chữ càng to).
  • Color thể hiện cho màu sắc của chữ, Có rất nhiều màu chữ khác nhau bạn có thể xem và lựa chọn chúng tại đây.
  • Thẻ <br> cho phép bạn chuyển sang dòng mới (xuống dòng - tương tự như Enter trong word office). Bạn có thể dùng nhiều <br> như bạn muốn. Cứ sử dụng 1 thẻ <br> là một lần xuống dòng. Bạn có thể Click right Mouse (chuột phải) vào lề của một trang Web bất kỳ và chọn source code (Xem mã nguồn của trang)để tham khảo xem nó được viết như thế nào. Ðấy là cách tốt nhất để khám phá ra những điều "bí mật" của các website đẹp.

- Như vậy là bạn đã có thể viết được một trang web đơn giản rồi đó. Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có thể dùng size lớn hơn và cũng có thể dùng những Tag đã được định sẵn cho tiêu đề gồm các thẻ từ <h1> đến <h6>.
<html>
<body bgcolor="#000080">
<center>
<font face="Verdana, Tahoma, Arial" color="#ffffff">
<h1>Tiêu đề của trang web</h1><br>
<h2>Welcome to my Homepage!</h2><br>
<h3>Tiêu đề của trang web</h3><br>
<h4>Tiêu đề của trang web</h4><br>
<h5>Tiêu đề của trang web</h5><br>
<h6>Tiêu đề của trang web</h6><br>
</font>
</center>
</body>
</html>
Trong đó: 
  • <h1>.....</h1> là to cỡ chữ to nhất và <h6>....</h6> là cỡ chữ nhỏ nhất . Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải dùng thêm một cặp Tag nữa : <center> ....</center> Tất cả những gì nằm giữa cặp Tag này đều được định hướng vào phía giữa của trang.
  • Trong ví dụ này, nền của trang là xanh nước biển (#000080) chữ màu trắng (#ffffff).

» Bổ sung:

Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag <head>....</head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là <title>....</title> Giữa <title> và </title> là tên của trang web được trình duyệt trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ có cấu trúc như sau:
<html>
<head>
<title>Trang web dau tien cua toi</title>
</head>
<body>
Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.
</body>
</html>
Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho trình duyệt và máy tìm kiếm (search engine),... Đây cũng là phần thường được sử dụng để thêm các đoạn mã javascripts, Jquery để tạo nên sự sinh động và hấp dẫn cho trang web của bạn.

Kết: Như vậy các bạn đã hiểu được cấu trúc cơ bản của một trang web dưới dạng HTML, Bài viết tiếp theo mình sẽ hướng dẫn chi tiết hơn với trang blogger. Mời các bạn cùng đón đọc. Nếu có bất cứ vướng mắc nào trong quá trình thực hiện hướng dẫn này hãy để lại nhận xét của bạn ở dưới phần comment namkna sẽ giải đáp bạn.