Các thẻ cơ bản của HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.93 MB, 58 trang )
Bµi gi¶ng
ThiÕt kÕ Web
Vinh
6-2008
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
I- Giới thiệu các mã màu phổ biến
Tên màu Giá trị Hexa Tên màu Giá trị Hexa
Black #000000 Green #008000
Silver #C0C0C0 Lime #00FF00
Gray #808080 Olive #808000
While #FFFFFF Yellow #FFFF00
Maroon #800000 Navy #000080
Red #FF0000 Blue #0000FF
Purple #800080 Teal #008080
Fuchsia #FF00FF Aqua #00FFFF
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
Lưu ý:
-
Để lấy màu ta có thể gõ tên màu
Ví dụ: color=Red hoặc color=#FF000
-
Ta cũng có thể pha màu bằng giá trị Hexa của nó
Ví dụ: #AABBBB hoặc #123BEF
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
II- Giới thiệu các thẻ cơ bản của HTML
1- Thẻ BODY
ý nghĩa : Quy định sự bắt đầu và kết thúc nội dung của một trang Web,
nó có tác dụng trên toàn trang Web
Cú pháp: <Body>...</Body>
Các thuộc tính của thẻ Body
- Background=Địa chỉ : Chỉ định ảnh nền cho trang Web
- Bgcolor=Màu : Chỉ định Màu nền cho trang Web
- Text=Màu : Chỉ định màu văn bản cho trang Web
- Bgproperties=pixed: Chỉ định ảnh nền cho trang web không cuộn
khi cuộn thanh Scrollbar
- Leftmargin=n : Chỉ định canh lề trái cho trang Web, với n
là một số nguyên dương tính theo Pixed
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
- Topmargin=n: Chỉ định canh lề trên cho trang Web, với n là
một số nguyên dương tính theo Pixed
- Link=Màu : Chỉ định màu cho các Hyperlink khi chưa đư
ợc duyệt trong trang Web
- Vlink =Màu: Chỉ định màu cho các Hyperlink khi được
duyệt trong trang Web
- Alink=Màu : Chỉ định màu cho các Hyperlink đang được
duyệt trong trang Web
Ví dụ: Tạo một trang Web có một bức ảnh nền, màu của văn
bản trên trang Web là màu đỏ: <Body>
background=C:\anh.jpg text=red </Body>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
2- Thẻ Định dạng kiểu chữ
a- Thẻ tạo chữ đậm <B>:
ý nghĩa: Cho phép tạo chữ đậm
Cú pháp: <B>...</B>
Ví dụ: Tạo dòng chữ đậm Lớp K3A1
<B>Lớp K3A1</B>
b- Thẻ tạo chữ nghiêng <I> :
ý nghĩa: Cho phép tạo chữ nghiêng
Cú pháp: <I>...</I>
Ví dụ: Tạo dòng chữ nghiêng Lớp K3A1
<I>Lớp K3A1</I>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
c- Thẻ tạo chữ gạch chân <U>:
ý nghĩa: Cho phép tạo chữ gạch chân
Cú pháp: <U>...</U>
Ví dụ: Tạo dòng chữ đậm Lớp K3A1
<U>Lớp K3A1</U>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
3- Thẻ xuống dòng<Br>
ý nghĩa: Để xuống dòng trên trang Web
Cú pháp: <Br>
4- Thẻ định dang phông chữ <Font>
ý nghĩa: Để định dạng phông chữ trên trang Web
Cú pháp: <Font>...</Font>
Các thuộc tính của thẻ Font
Face=Phông chữ: Chỉ định font chữ được áp dụng
Size=Cỡ chữ : Chỉ định kích thước cho phông chữ
Color= Màu : Chỉ định Màu cho phông chữ
Ví dụ: Tạo dòng chữ nghiêng Công ty CP SARA với phông chữ vntime cỡ
14 màu xanh
<Font color=blueface=.vntimesize=14><I> Công ty CP SARA</I></Font>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
5- Thẻ tạo đoạn văn bản <P>
ý nghĩa: Để tạo một đoạn văn bản và căn lề cho
đoạn văn bản đó
Cú pháp: <P align=Căn lề>...</P>
align=Căn lề dùng căn lề cho đoạn văn bản
- left: Căn lề trái
- right: Căn lề phải
- Center: Căn bằng ở giữa
Ví dụ: Tạo một đoạn văn bản bất kỳ trên trang web và
căn lề trái cho đoạn văn bản đó.
Bài 2: Gới thiệu các thẻ cơ bản
của HTML
6- Thẻ tạo chỉ số trên <Sup>:
ý nghĩa: Để tạo chỉ số trên
Cú pháp: <Sup>...</Sup>
Ví dụ: Tạo dòng chữ sau : x
3
+ x
2
+2=0
x<sup>3</sup>+x<sup>2</sup>+2=0
7- Thẻ tạo chỉ số dưới <Sub>:
ý nghĩa: Để tạo chỉ số dưới
Cú pháp: <Sub>...</Sub>
Ví dụ: Tạo dòng chữ sau : H
2
SO
4
H<sub>2</sup>SO<sup>4</sup>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
8- Thẻ tạo chủ đề
ý nghĩa: dùng để mô tả ngắn gọn chủ đề của phần
đứng sau nó, có 6 cấp độ heading có sẵn từ cấp độ1
(cao nhất) đến cấp độ 6 (thấp nhất)
Cú pháp: <H1>Nội dung</H1>
....
<H6>Nội dung</H6>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
9- Thẻ tạo Danh sách
ý nghĩa: Cho phép tạo một danh sách có đánh số
thứ tự hoặc không đánh số thứ tự trên trang Web với
nhiều mục
Cú pháp:
a- Danh sách không dánh số thứ tự:
<UL>
<Li>Mục 1 trong danh sách
<Li>Mục 2 trong danh sách
...
</UL>
Thuộc tính của thẻ <UL>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
-
Type= Disc: mặc định, đĩa tròn
-
Type= Square : Một hình vuông nhỏ được tô đầy
-
Type= Cricle : Một hình tròn không được tô đầy
Ví dụ: Tạo một danh sách sau:
Danh sách lớp K3A1
<UL type=>
<Li>Nguyễn Văn A
<Li>Nguyễn Văn B
<Li>Nguyễn văn C
...
</UL>
b- Danh sách có đánh số thứ tự:
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
b- Danh sách có đánh số thứ tự:
<OL>
<Li>Mục 1 trong danh sách
<Li>Mục 2 trong danh sách
...
</OL>
Thuộc tính của thẻ <UL>
-
Type= 1: Đánh danh sách theo thứ tự 1,2,3...
= a: Đánh danh sách theo a,b,c...
= A : Đánh danh sách theo A,B,C...
= i : Đánh danh sách theo i,ii,iii...
= I : Đánh danh sách theo I,II,III...
- Star= Giá trị: Xác định giá trị khởi đầu cho danh sách
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
Ví dụ: Tạo một danh sách sau:
Danh sách lớp K3A1
<OL type=1 start=4>
<Li>Nguyễn Văn A
<Li>Nguyễn Văn B
<Li>Nguyễn văn C
...
</OL>
Lưu ý: Có thể tạo danh sách nhiều cấp bằng cách sử dụng các thẻ
<OL> và <UL> lồng nhau
Ví dụ: tạo danh sách mục lục của môn học TKW
<HTML>
<Body>
<font size=12 face=.vntime color=Red> Mục lục <font>
Bµi 2: Gíi thiÖu c¸c thÎ c¬ b¶n cña
HTML
<HTML>
<Body>
<font size=12 face=“.vntime“color=“Red“>Môc lôc <font>
<OL type=“I“>
<Li> Lý thuyÕt
<OL>
<Li> Bµi 1
<Li> Bµi 2
</OL>
</OL>
</Body>
</HTML>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
10- Thẻ tạo chú thích
ý nghĩa: Thẻ này dùng để tạo chu
thích cho một trang HTML,nội dung
của thẻ này không xuất hiện trên
trình duyệt
Cú pháp:
<Comment>... </Comment>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
11- Thẻ tạo đường gạch ngang
ý nghĩa: Dùng để tạo các đường gạch ngang phân cách các
đoạn trong trang Web
Cú pháp: <HR>... </HR>
Các thuộc tính của thẻ <HR>
- Align= Căn lề: Dùng căn lề cho đường gạch ngang
- Color= Màu: Chỉ định màu cho đường gạch ngang
- Size =n: Chỉ định Kích thước cho đường gạch ngang
- Noshade: Chỉ định độ bóng cho đường gạch ngang
- Width=n :Chỉ định độ rộng cho đường gạch ngang
12- Thẻ tạo kí tự trắng
ý nghĩa: Cho phép tạo ký tự trắng ở trên trang Web
Cú pháp:  
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
13- Thẻ chèn hình ảnh vào trang Web
ý nghĩa: Cho phép chèn 1 ảnh bất kỳ vào trang Web
Cú pháp: <IMG src=Địa chỉ>
Các thuộc tính của thẻ IMG
- src=Địa chỉ: Chỉ ra đường dẫn chứa ảnh cần
chèn
- Alt=Text : cho tạo dòng chữ khi di chuyển chuột
lên ảnh được chèn
- Border=n : chỉ định đường viền cho ảnh
- Height=n : chỉ định độ cao cho ảnh
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
-
Width=n : chỉ định độ rộng cho ảnh
-
Align= Căn lề: Căn lề cho ảnh hay văn
bản bao quanh ảnh (Top, middle,Bôttm,
left, right)
-
Hspace =n : Chỉ định khoảng cách từ ảnh
đến văn bản bao quanh nó theo chiều dọc
-
Vspace =n: Chỉ định khoảng cách từ ảnh
đến văn bản bao quanh nó theo chiều
ngang
Bµi 2: Gíi thiÖu c¸c thÎ c¬ b¶n cña
HTML
VÝ dô : T¹o trang web theo mÉu sau:
Ch¬ng tr×nh thiÕt kÕ Web
Ch¬ng tr×nh thiÕt kÕ Web
Bµi 2: Gíi thiÖu c¸c thÎ c¬ b¶n cña
HTML
Bµi lµm :
<html>
<body>
<img src=“C:\anh1.bmp” align=“right” width=200 height=100>
Ch¬ng tr×nh thiÕt kÕ web
<br>
<hr width=300 align=center>
<br>
<img src=“C:\anh2.bmp” align=“right” width=200 height=100>
Ch¬ng tr×nh thiÕt kÕ web
</body>
</html>
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
14- Thẻ Tạo chữ chạy
ý nghĩa: Tạo hiệu ứng chữ chạy trong file HTML,
dòng văn bản hay 1 dối tượng bất kỳ nằm giữa thẻ
này chạy theo kiẻu quy định trước. Thẻ này chỉ dành
riêng cho trình duyệt Internet Explore
Cú pháp: <Marquee>... </Marquee>
Các thuộc tính của thẻ Marquee
- Align= Căn lề : Căn lề văn bản so với khung chứa
văn bản đó (left, right, middle,bottom)
Bài 2: Gới thiệu các thẻ cơ bản của
HTML
-
Align= Căn lề : Căn lề văn bản so với khung
chứa văn bản đó (left, right, middle,bottom)
-
Behavior= Hướng chạy: Chỉ định kiểu chạy
chữ (Scroll, Slide, Alternate)
Scroll: Mặc định, Dòng chữ chạy theo một hư
ớng nhất định và lặp đi lặp lại quá trình đó
Slide:Dòng chữ chạy chớp rồi tắt
Alternate: Dòng chữ chạy đập biên
