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 dng 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 dng style. N u c n ph i thay i style, chúng ta ch cn s a i trên
mt 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 dng @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. in 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 dng 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 rng c a box
rng c a m t thành ph n trên trang
web ưc áp d ng cho ph n ni dung
(content area). Nh ng con s khác, ch ng
hn di (padding), khung (border), l
(margin), s cng thêm vào rng này.
Ch ng h n, nu m t thành ph n trên
trang web ưc ch nh rng b ng on
mã sau width: 200px; , thì khu v c dành cho
ni dung c a thành ph n ó s rng 200
pixel. Nu padding, khung ho c l ưc áp
dng cho thành ph n ó, rng c a nh ng
ph n này s ưc c ng thêm vào rng
chung.
Tuy nhiên, Internet Explorer 5 for
Hình 15: Thi t l p rng 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
dng m t ph ươ ng cách khác tính toán
rng c a các box. Nu m t thành ph n HTML có padding và border, giá tr ca
chúng s ưc tr kh i rng 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 to 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
ca các thành ph n li n k .
L có th ưc áp d ng cho m t c nh riêng l ca 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.
• Nu ch mt giá tr ưc gán cho thu c tính margin , giá tr ó s ưc áp
dng cho t t c các c nh c a i t ươ ng ang ưc t l :
p { margin: 1em; }
• Nu 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; }
• Nu 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; }
• Nu 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 ca 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 rng, chi u cao và
màu s c. rng và chi u cao có th thi t l p theo các ơ n v o sau: point (bng
vi 1/72 ca m t inch), pica (bng 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
bng 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 dng CSS thi t l p hình n n
Trong ph n khai báo CSS, ta s dng thu c tính background-image trong ph n
khai báo rule .
Giá tr ca 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
cp 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
iu ch nh tr ng thái này b ng cách s dng 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
li 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).
on 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. Cp 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 ca t m hình cách l trái c a box 2 pixel và cnh trên
ca hình cách l trên c a box 20 pixel.
Nu 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%. Nu hai giá tr u
ưc cung c p thì giá tr ban u s là v trí theo chi u ngang. S kt 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).
on 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
