Thứ Hai, 29 tháng 7, 2013

html nâng cao


HTML nâng cao
HTML layout
Bài viết hướng dẫn các bạn học html từ cơ bản đến nâng cao
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.
Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML.
Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo.

Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải.

Dòng chữ bên này ở cột bên trái
Code HTML <table> được sử dụng để chia một phần của trang thành hai cột.

Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng.
Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó.

Vẫn layout cũ nhưng với màu được thêm vào
Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML.
Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo.

Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải.

Dòng chữ bên này ở cột bên trái
Code HTML <table> được sử dụng để chia một phần của trang thành hai cột.

Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng.
Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó.

Ví dụ
Chia đôi một trang HTML thành cột và hàng là việc làm khá đơn giản. Để cho bạn thực hành với nó, tôi đã tạo ra ví dụ này cho bạn.
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
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p><p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
Xem ví dụ

Thuộc tính của font
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ữ

Cách làm đúng nhất là sử dụng Style

Chọn font cho chữ
Chọn font, kích cỡ và màu cho chữ
Học thêm về Style Sheet
Đầ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
HTML Style
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.
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.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Style sheet "nội"Nếu một tài liệu nào đó chỉ cần duy nhất một style thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Style "địa phương"
Style "địa phương" nên được sử dụng nếu bạn muốn dùng một style duy nhất cho một thành phần nào đó của trang.
Để sử dụng style "địa phương" bạn sử dụng thuộc tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi màu và canh lề trái của đoạn văn.
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

Thẻ style

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

Thành phần của head
Thành phần của head bao gồm những thông tin chung, hay còn được gọi là meta-information về tài liệu. Meta có nghĩa là "thông tin về". Bạn có thể nói rằng meta-data có nghĩa rằng thông tin về data, hoặc meta-infomation có nghĩa rằng thông thin về thông tin.
Thông tin trong thành phần head.
Theo như tiêu chuẩn của HTML, chỉ một vài thẻ được chính thức đặt trong phần head đó là: base>, <link>, <meta>, <title>, <style>, and <script>.

Đây là một ví dụ hợp quy định
<head>
  <p>This is some text</p>
</head>
Trong trương fhợp này trình duyệt có hai lựa chọn:
  • Hiển thị chữ bởi vì nó nằm trong thành phần đoạn văn là <p> và </p>
  • Ẩn chữ bởi vì nó nằm trong thành phần Head.
Nếu bạn muốn thêm một thành phần HTML là <h1> hoặc <p> vào phần head như trên, hầu hết các trình duyệt sẽ hiển thị chúng thậm chí như thế là không hợp lệ.

Trình duyệt có nên bỏ qua những lỗi như thế không? chúng tôi không nghĩ thế! nhưng người ta lại cho thế là đúng!
Đọc thêm »
Người đăng: vào lúc Không có nhận xét nào:
Đăng ký: Bài đăng (Atom)