Home » » HTML - Layout

HTML - Layout

Written By 1 on Chủ Nhật, 24 tháng 6, 2012 | 06:43

Rất nhiều trang web bạn có thể thấy rằng trang của họ được thiết kế dạng cột giống như tờ báo vậy, đó là họ sử dụng cột của HTML.
HTML Fonts
Việc sử dụng thẻ <font> trong HTML không được tán thành và sẽ bị loại bỏ ở những phiên bản HTML mới hơn. Dù cho rất nhiều người dùng nó, nhưng bạn nên cố gắng tránh dùng nó và dùng style để thay thế.
Thẻ HTML <font>
Với một dòng code HTML như sau, bạn có thể cụ thể kích cỡ và loại font cho trình duyệt.
Thuộc tính
Ví dụ
Mục đích
size="number"
size="2"
Xác định kích cỡ
size="+number"
size="+1"
Tăng kích cỡ font
size="-number"
size="-1"
Giảm kích cỡ font
face="face-name"
face="Times"
Xác định tên font
color="color-value"
color="#eeff00"
Xác định màu chữ
color="color-name"
color="red"
Xác định màu chữ

VD:
<html>
<body>
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
<p>The font element is deprecated in HTML 4. Use CSS instead!</p>
</body>
</html>


HTML Style

Đầu tiên bạn hãy kiên trì học cho xong hết các chương về HTML!!! ở những chương sau chúng tôi sẽ giải thích tại sao một vài thẻ như <font> lại bị loại bỏ từ HTML và làm cách nào để chèn một style Sheet vào một tài liệu HTML.
Để học thêm về style sheet bạn học ở đây: CSS Tutorials

Với HTML 4.0 tất cả định dạng có thể được di chuyển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet.
Thẻ
Miêu tả đặc tính
Xác định đặc tính của style
Xác định nguồn của style
Xác định phần vùng trong tài liệu
Xác định phần vùng trong tài liệu
Không được ưa chuộng, dùng Style
Không được ưa chuộng, dùng Style
Không được ưa chuộng, dùng Style
Cách sử dụng Style
Khi trình duyệt đọc thông tin của Style Sheet, nó sẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML.
Style Sheet "ngoại"
Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file. Mỗi trang phải liên kết đến style sheet bằng cách sử dụng thẻ <link>. Thẻ <link> được đặt ở phần head của mỗi trang.
Ví dụ hướng dẫn bạn cách định dạng một tài liệu HTML với thông tin style được thêm vào phần <head>.

<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
</body>
</html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>
</body>
</html>

Sử dụng thuộc tính style để tạo ra hiệu ứng đường link không có gạch chân.
<html>
<body>
<a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a>
</body>
</html>
Cách sử dụng thẻ <link> để liên kết đến một style sheet "ngoại vi".
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
</body>
</html>


0 nhận xét:

Đăng nhận xét