Thiết kế Web - Chương 2_Ngôn ngữ HTML
HTML, viết đầy đủ là Hyper Text Markup Language – Ngôn ngữ đánh dấu
siêu văbản, là ngôn ngữnền tảng của Web.
HTML được thiết kế bởi các nhà vật lý học tại viện CERN. Cùng với trình
duyệt Mosaic và World Wide Web, HTML đã giúp mang đến một bộmặt mới cho
Internet. Internet đã trởnên dễsửdụng hơn và có thể đến với đông đảo người dùng
trên toàn thếgiới thông qua các trang web.
HTML mô tảcách thức dữliệu được hiển thịtrên trình duyệt thông qua các tập
ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻHTML”. Khi một trang web được tải
vềtrình duyệt, trình duyệt sẽcăn cứtrên các tag HTML để định dạng nội dung hiển
thị.
Tóm tắt nội dung Thiết kế Web - Chương 2_Ngôn ngữ HTML, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
web site. Thay vì thêm
rule này vào file CSS chung, ta có th s d ng header style.
Dư i ây là ví d v header styles:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"">
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
Lesson 4 - listing 2
p
{
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...
3. External Style Sheets
Ph ươ ng cách th ba áp d ng style lên v n b n web là liên k t n t p tin
CSS. Style sheet t bên ngoài v n b n HTML là l a ch n kh d nh t v i nh ng
web site s d ng style. N u c n ph i thay i style, chúng ta ch c n s a i trên
m t file CSS duy nh t thay vì ph i th c hi n ch nh s a trên t ng trang HTML.
File CSS có n i dung là t p h p các rule có d ng t ươ ng t nh ư rule sau ây:
p
{
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
Gi s chúng ta t i m t file CSS v i n i dung nh ư trên và l ưu v i tên laF
style.css . Vi c áp d ng style s ư c th c hi n b ng cách dùng th link trên v n b n
HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"">
<meta http-equiv="content-type" content="text/html;
Biên so n: Đ ng Thanh Bình Trang 26
Thi t k Web
charset=utf-8">
Lesson 4
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...
4. @import Styles
Header và external style sheets có th import nh ng style sheets khác b ng
cách s d ng @import rule. @import rule ph i ư c t bên trên t t c nh ng rule
khác trong header ho c trong file CSS.
@import "advanced.css";
p
{
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
V. CSS Box Model
1. Inline Element và Block Level Element
Block level element th ư ng ư c hi n th nh ư nh ng kh i v i nh ng ký t ng t
dòng bên trên và bên d ư i kh i ó. M t s ví d v block level element là
paragraph, heading, div, và block quote.
Inline element không ư c hi n th nh ư m t kh i. N i dung ư c hi n th trên
các dòng và không có d u ng t dòng. i n hình cho nh ng thành ph n lo i này là
các tag , , và .
Hình 13: Phân bi t Block level element và Inline element
C block level và inline element u s d ng mô hình “h p” (box model). C
hai lo i thành ph n HTML này u có th dư c nh d ng v i các thu c tính c a
box model nh ư margin , background-color , background-image , padding , và border .
Biên so n: Đ ng Thanh Bình Trang 27
Thi t k Web
Hình 14: Mô hình 3 chi u c a CSS Box Model
2. Thi t l p r ng c a box
r ng c a m t thành ph n trên trang
web ư c áp d ng cho ph n n i dung
(content area). Nh ng con s khác, ch ng
h n d i (padding), khung (border), l
(margin), s c ng thêm vào r ng này.
Ch ng h n, n u m t thành ph n trên
trang web ư c ch nh r ng b ng o n
mã sau width: 200px; , thì khu v c dành cho
n i dung c a thành ph n ó s r ng 200
pixel. N u padding, khung ho c l ư c áp
d ng cho thành ph n ó, r ng c a nh ng
ph n này s ư c c ng thêm vào r ng
chung.
Tuy nhiên, Internet Explorer 5 for
Hình 15: Thi t l p r ng Box c a Internet
Windows (và Internet Explorer 6 for Explorer ch ưa chính xác
Windows - trong m t vài tr ư ng h p) s
d ng m t ph ươ ng cách khác tính toán
r ng c a các box. N u m t thành ph n HTML có padding và border, giá tr c a
chúng s ư c tr kh i r ng chung.
3. L (margin)
Biên so n: Đ ng Thanh Bình Trang 28
Thi t k Web
Chúng ta có th áp d ng l cho m t thành ph n block level ho c inline b t k .
Chúng s t o ra kho ng cách gi a c nh c a m t thành ph n trên trang web v i c nh
c a các thành ph n li n k .
L có th ư c áp d ng cho m t c nh riêng l c a box.
p { margin-top: 0; }
p { margin-right: 2em; }
h2 { margin-bottom: 3em; }
h3 { margin-left: 1em; }
Chúng ta hoàn toàn có th dùng shorthand property t i ây.
• N u ch m t giá tr ư c gán cho thu c tính margin , giá tr ó s ư c áp
d ng cho t t c các c nh c a i t ươ ng ang ư c t l :
p { margin: 1em; }
• N u có hai giá tr ư c gán cho thu c tính margin , l trên và l dư i s
ư c set theo giá tr th nh t, l trái và l ph i s ư c set theo giá tr th
hai:
p { margin: 1em 0; }
• N u có ba giá tr ư c gán cho thu c tính margin , l trên s ư c set theo
giá tr th nh t, l trái và l ph i s ư c set theo giá tr th hai, l dư i s
ư c set theo giá tr th ba:
p { margin: 1em 0 2em; }
• N u có b n giá tr ư c gán cho thu c tính margin , vi c set l tuân theo
th t top, right, bottom, left :
p { margin: 1em 2em 2em 1em; }
4. Padding
Padding t o ra kho ng cách gi a c nh c a thành ph n trên trang web v i n i
dung c a nó.
Padding c ng tuân theo nguyên t c nh ư v i margin. D ư i ây là m t s ví d
v padding:
p { padding: 1em; }
h1 { padding-top: 0; }
h2 { padding-right: 2em; }
h2 { padding-bottom: 3em; }
h3 { padding-left: 1em; }
p { padding: 1em 0; }
p { padding: 1em 0 2em; }
p { padding: 1em 2em 2em 1em; }
5. Khung (border)
Thu c tính border ch nh các thông s width , color , style c a khung c a m t
i t ư ng.
p { border-top: 1px solid red; }
p { border-right 1px solid red; }
p { border-bottom: 1px solid red; }
Biên so n: Đ ng Thanh Bình Trang 29
Thi t k Web
p { border-left: 1px solid red; }
p { border: 1px solid red; }
6. Khu v c n i dung (content area)
Khu v c n i dung có th ư c thi t l p các thông s v r ng, chi u cao và
màu s c. r ng và chi u cao có th thi t l p theo các ơ n v o sau: point (b ng
v i 1/72 c a m t inch), pica (b ng v i 12 points), pixel, em, ex, millimeter,
centimeter, inch, ho c ph n tr m (percent).
p { width: 100pt; }
p { height: 20pc; }
p { width: 300px; }
p { height: 40em; }
p { width: 50ex; }
p { height: 600mm; }
p { width: 70cm; }
p { height: 8in; }
p { width: 50%; }
Thu c tính color s ư c dùng quy nh màu ch . Color có th ư c ch
nh b ng t khóa, hexadecimal RGB, và functional notation RGB.
T khóa cho color bao g m aqua , black , blue , fuchsia , gray , green , lime ,
maroon , navy , olive , purple , red , silver , teal , white , và yellow .
Màu có th ư c ch inh b i ba c p s hexadecimal (ch ng h n #ff0000). Nó
có th ư c làm cho ng n b t b ng cách b i m t s trong t ng c p s (#f00). Màu
RGB có th ư c ch nh b ng ba s nguyên ho c các giá tr ph n tr m cách nhau
b ng d u ph y. Ví d , màu có th ư c ch nh b ng rgb(255, 0, 0) ho c
rgb(100%, 0%, 0%) .
p { color: red }
p { color: #f00 }
p { color: #ff0000 }
p { color: rgb(255,0,0) }
p { color: rgb(100%, 0%, 0%) }
VI. S d ng CSS thi t l p hình n n
Trong ph n khai báo CSS, ta s d ng thu c tính background-image trong ph n
khai báo rule .
Giá tr c a thu c tính background-image có th là m t URL ( xác nh xem
file hình dùng làm n n trang web ang n m âu) ho c là không có gì (t c là trang
web s không có hình n n).
Gi s chúng ta dùng url(chapter6.jpg) . ư ng d n n file hình n m trong
c p d u nháy ho c không u ư c.
body
{
background-image: url(chapter6.jpg);
}
Dư i ây là k t qu :
Biên so n: Đ ng Thanh Bình Trang 30
Thi t k Web
Vào lúc này, file hình n n ang ư c l p l i theo b ngang màn hình. Ta có th
i u ch nh tr ng thái này b ng cách s d ng thu c tính background-repeat.
Nh ng giá tr background-repeat có th nh n bao g m repeat (hình n n s
ư c l p l i theo c chi u ng l n chi u ngang), repeat-x (hình n n s ch ư c l p
l i theo chi u ngang), repeat-y (hình n n s ch ư c l p l i theo chi u ng), và
no-repeat (hình n n s không ư c l p l i).
o n mã :
body
{
background-image: url(chapter6.jpg);
background-repeat: repeat-y;
}
s cho k t qu nh ư sau:
Hình n n hi n nay ang n m phía bên trái. hình n n ư c nh v phía
bên ph i c a trang web, ta ph i dùng thu c tính background-position .
Nh ng giá tr background-position có th nh n là ph n tr m (ví d 0 100% ),
dài (ch ng h n 2px 20px ), và t khóa (ch ng h n left top ). Trong m i tr ư ng h p,
v trí theo chi u nga s ư c ch nh tr ư c, theo sau m i là ch nh v trí theo
chi u ng. C p giá tr 0% 0% s t góc trên cùng bên trái c a t m hình lên góc
trên cùng bên trái c a ph n n i dung trong box. Giá tr 0 100% t góc d ư i cùng
bên trái c a t m hình lên góc d ư i cùng bên trái c a ph n n i dung trong box. Giá
Biên so n: Đ ng Thanh Bình Trang 31
Thi t k Web
tr 2px 20px s t góc top-left c a t m hình cách l trái c a box 2 pixel và c nh trên
c a hình cách l trên c a box 20 pixel.
N u ch có m t giá tr ph n tr m ho c dài, trình duy t s dùng giá tr này
set v trí theo chi u ngang và v tri theo chi u ng s là 50%. N u hai giá tr u
ư c cung c p thì giá tr ban u s là v trí theo chi u ngang. S k t h p gi a
dài và ph n tr m c ng ư c ch p nh n (ch ng h n 50% 2cm ). Nh ng v trí âm c ng
ư c phép (ví d 20px 10px).
o n mã
body
{
background-image: url(chapter6.jpg);
background-repeat: repeat-y;
background-position: 100% 0;
}
S cho k t qu là
Biên so n: Đ ng Thanh Bình Trang 32
File đính kèm:
Thiết kế Web - Chương 2_Ngôn ngữ HTML.pdf
