Mở đầu - 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> và </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> và </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: Code:
<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> [Xem ví dụ] Tất nhiên, một Homepage còn có nội
dung (lời viết và hình ảnh): Code:
<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>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 .đề Code:
<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> và </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: Code:
<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 Cách đưa tranh ảnh vào một trang web
Trong trang trước, chúng ta đã đề cập đến
cách trình bày chữ trong trang web.
Ðể làm cho trang web sinh động hơn,
hấp dẫn hơn, bạn có thể đưa thêm tranh
ảnh vào. Có những trang web liên quan đến số liệu, đồ thị và đồ thị cũng là một
dạng ảnh (images). Sau đây là cách đưa
một bức ảnh vào trong trang web. * Ảnh cho vào trang web nên save
dưới dạng .GIF hoặc .JPG
* Không nên to quá, đây không nói
đến kích thước (cm) mà nói đến kính cỡ file
(số KB).
* Khi scan, bạn hãy chọn 72 dpi (dots per inch) bởi vì đa phần các màn hình
máy tính làm việc với độ phân giải này.
* Khi upload trang web, nhớ upload
cả ảnh.
* Tên của các file nên sử dụng chữ
thường, không nên sử dụng chữ hoa. Ví dụ: myphoto.jpg chứ không
Myphoto.jpg. Sau đây là HTML Code để đưa hình ảnh
vào trang web: Code:
<html>
<body bgcolor="#ffffff">
<center>
<img src="myphoto.jpg"
width="200" height="400" border="0" alt="Here is my first
photo">
</center>
</body>
</html>Bạn thấy không, điều đó rất đơn giản.
Chỉ riêng <img src="myphoto.jpg"> đã đủ để đưa một bức ảnh vào trang web. img
là image và src là source. Tất cả những
cái đi đằng sau chỉ để trình bày bức ảnh đó đẹp
hơn thôi. width là chiều rộng của bức ảnh
mà bạn muốn, nó không phụ thuộc vào
kích thước gốc của bức ảnh. height là chiều cao. Tất cả đều đo bằng pixel. border="0"
báo cho Browser biết là ảnh này sẽ được
trình bày không có khung. alt có ích
khi ảnh chưa hoặc không được nạp (nhiều
người surf không ảnh để đỡ tốn thời gian) Khi
đó người xem biết được mình sẽ được xem cái gì.

XtGem Forum catalog