Trang chủDiễn đànThư viện TutorialsTin tứcĐăng kýLiên hệ
DANH MỤC

QUẢNG CÁO


THỐNG KÊ
Số bài giảng: 224
Số chuyên mục: 35
Số thành viên: 767827
Đang online: 5131

Trang chủ >> Thiết kế web tĩnh >> HTML
Bài 1 - HTML là gì, cấu tạo một trang web dưới dạng HTML, màu chữ, màu nền...
Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. 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. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

Cấu trúc cơ bản

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> </html>). Nhờ có cặp TAG này mà Browser biắt được đó là HTML - document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> </body>. Trong một document html, chú thích được dùng 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>



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&#7841;n, &#273;ây là dòng ch&#7919; vi&#7871;t b&#7857;ng font Arial, màu          &#273;en, c&#7905; 2
</font><br><br>
<font face="Verdana" size="3" color="navy"> 
Còn &#273;ây là dòng ch&#7919; vi&#7871;t b&#7857;ng font Verdana, màu xanh n&#432;&#7899;c bi&#7875;n, c&#7905; 3

</font><br><br>
<font face="Bodoni" size="4" color="red"> 

Dòng này l&#7841;i là font Bodoni, màu &#273;&#7887;, c&#7905; 4 </font><br>
</body>
</html> 

face thể hiện cho mẫu chữ, size thể hiện cho cỡ chữ (số càng lớn thì chữ càng to) và color thể hiện cho màu sắc của chữ, #000000 là màu đen, #FF0000 là màu đỏ, #FFFF00 là màu vàng.

TAG
<br> cho phép bạn chuyển sang dòng mới. Bạn có thể dùng nhiều <br> như bạn muốn. Cứ mỗi lần có <br> là một lần xuống dòng. Bạn có thạ dùng mouse phải gõ vào nền của một trang web nào đó rồi chọn source code để 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 đề.



<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> 
 


<h1></h1>
là to nhất và <h6></h6> là 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. 

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> </title> là tên của trang web được browser 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 browser, search engine... Cái đó sẽ được đề cập đến trong một mục riêng
Bài mới nhất cùng chuyên mục Xem bài tiếp theo
Bài 10 - Cascading Style Sheets (05-09-2009 | 03:17:37 PM)
Bài 9 - Form, List và một mớ bòng bong ;-) (05-09-2009 | 03:16:24 PM)
Bài 8 - JavaScript - gia vị cho homepage (05-09-2009 | 03:10:32 PM)
Bài 7 - Âm nhạc, phim ảnh trong trang web (05-09-2009 | 02:58:02 PM)
Bài 6 - Frames - "Windows Explorer" trong trang web (05-09-2009 | 02:57:07 PM)
 
 
© Copyright 2009 SINHVIENIT.NET, All right reserved
Thư viện bài giảng nghành công nghệ thông tin SinhVienIT.Net  
Xây dựng và phát triển bởi các thành viên SinhVienIT.net
Liên hệ: Admin@SinhVienIT.Net | VuThanhLai@Gmail.Com
Ghi rõ nguồn http://sinhvienit.net khi sao chép bài ở đây.