Các thẻ cơ bản của HTML

 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 -

Trang 1

Bµi gi¶ng ThiÕt kÕ Web

Vinh 6-2008

Trang 2

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

Trang 3

HTML

Lu ý:

- §Ó 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

Trang 4

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

Trang 6

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>

Trang 7

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”

Trang 8

Trang 9

 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

Trang 10

Trang 11

Bài 2: Gới thiệu các thẻ cơ bản

 ý nghĩa: Để tạo chỉ số dưới

 Cú pháp: <Sub> </Sub>

Ví dụ: Tạo dòng chữ sau : H2SO4

H<sub>2</sup>SO<sup>4</sup>

Trang 12

Trang 13

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

</UL>

Thuộc tính của thẻ <UL>

Trang 14

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:

</UL>

b- Danh sách có đánh số thứ tự:

Trang 15

HTML

b- Danh sách có đánh số thứ tự:

<OL>

</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

Trang 16

</OL>

Lu ý: 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>

Trang 17

Trang 18

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:

Trang 19

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: &nbsp

Trang 20

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

Trang 21

HTML

- Align= “C¨n lÒ”: C¨n lÒ cho ¶nh hay v¨n

b¶n bao quanh ¶nh (Top, middle,B«ttm, left, right)

Trang 22

HTML

Ví dụ : Tạo trang web theo mẫu sau:

Chương trình thiết kế Web

Trang 23

Trang 24

HTML

 ý 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)

Trang 25

• Slide:Dßng ch÷ ch¹y chíp råi t¾t

• Alternate: Dßng ch÷ ch¹y ®Ëp biªn

Trang 26

- Height=n: chỉ định độ cao của khung bao văn bản

- Width=n :chỉ định độ rộng của khung bao văn bản

Trang 27

HTML

- Loop=n :chỉ định số lần lặp cho đối tượng chạy

- Scrollamount=n: chỉ định khoảng cách tính

bằng Pixel các đoạn text cuộn

- Scrolldelay=n: chỉ định khoảng thời gian giữa các đoạn text, có tác dụng điều khiển thời gian

Trang 28

2- chÌn mét ¶nh vµo trang web vµ cho ¶nh ch¹y

<Marquee direction=Up loop=5><IMG src=

></Marquee>

Trang 29

HTML

 ý nghĩa: Dùng tạo liên kết từ vị trí này đến vị trí

khác trên cùng 1 trang web nó có ý nghĩa khi nội dung của trang web dài với nhiều trang màn hình

 Cú pháp: Các bước thực hiện

B1: Tạo điểm neo tại vị trí cần liên kết tới bằng lệnh:

B2: Tạo một liên kết tới điểm neo

Trang 30

HTML

 Ví dụ: Giả sử có 2 trang web t1.html, t2.html tao

liên kết giữa hai trang web này với nhau:

tại trang t1.html <a href=t2.html> Toi trang2</A> tại trang t2.html <a href=t1.html> Toi trang1</A> Chú ý: Nếu 2 trang web không cùng một thư một thì phải chỉ đường dẫn cụ thể đến từng trang

Trang 31

Trang 32

Trang 33

Trang 34

HTML

Bµi tËp thùc hµnh

Bµi 1: H·y t¹o trang Web theo mÉu sau:

Trang 35

HTML

Yªu cÇu:

- NÒn trang web mµu hång

- Dßng ch÷ “chµo c¸c b¹n ” lµ mét dßng ch÷ ch¹y tõ ph¶i qua tr¸i

- ¶nh chÌn vµo trang web lµ 1 ¶nh bÊt k×

- Cã nh¹c nÒn, cã thÓ chÌn thªm h×nh ¶nh vµ phim

Trang 36

HTML

Bµi 2: H·y t¹o trang Web theo mÉu sau:

i

Trang 37

Yêu cầu:

- Nền trang web màu Bất kỳ

- ảnh chèn vào trang web là 1 ảnh bất kì

- Các cụm từ gạch chân được kết nối đến một trang bất kỳ

Trang 39

Bài 3: Tạo bảng

Trong đó

<Table> </Table>: Thông báo cho trình

duyệt biết sự bắt đầu và kết thúc một

Trang 40

 ý nghĩa: Tạo và căn lề tiêu đề cho bảng

 Cú pháp:

Lưu ý : thẻ này phải được đặt dưới thẻ <table>

 Thuộc tính:

Align= căn lề: căn lề tiêu đề cho bảng (left, right, center)

Trang 41

 Border=n : dùng để đóng khung và kẻ viền cho bảng

 Width=“n, n%”: Dùng để quy định độ rộng cho bảng

 Bordercolor= màu: Quy định màu cho đường viền

 bgcolor=màu: quy định màu nền cho bảng

 Bordercolorlight= màu: tạo độ sáng cho bảng

 Background=“Địa chỉ”: quy định nền cho bảng là một bức

tranh

 Align=căn lề : căn lề dữ liệu trong bảng theo chiều ngang

 Cellpadding=n: Quy định khoảng cách từ viền ô tới nội dung

của ô, tính theo Pixel

Trang 42

 Border=n : dùng để đóng khung và kẻ viền cho hàng

 Bordercolor= màu: Quy định màu cho đường viền của hàng

 bgcolor=màu: quy định màu nền cho hàng

 Background=“Địa chỉ”: quy định nền cho hàng là một bức

tranh

 Align=căn lề : căn lề dữ liệu trong hàng theo chiều ngang

(left, right, center)

 VAlign=căn lề : căn lề dữ liệu trong hàng theo chiều dọc (top,

bottom, middle)

Trang 43

 Border=n : dùng để đóng khung và kẻ viền cho ô

 Bordercolor= màu: Quy định màu cho đường viền của ô

 bgcolor=màu: quy định màu nền cho hàng

 Background=“Địa chỉ”: quy định nền cho ô là một bức tranh

 Align=căn lề : căn lề dữ liệu trong ô theo chiều ngang (left,

right, center)

 VAlign=căn lề : căn lề dữ liệu trang ô theo chiều dọc (top,

bottom, middle)

 Colspan=n :chỉ định ô được trải dài trên n cột

 Rowspan=n : chỉ định ô được trải dài trên n hàng

Trang 45

Bµi 3: T¹o b¶ng

<tr><td>TT<td>Hä Vµ Tªn<Td>§Þa chØ

<tr><td>1<td>NguyÔn V¨n An<Td>Lª lîi - Vinh

<tr><td>2<td>NguyÔn ThÞ B×nh<Td>Hng b×nh - Vinh

</Table>

Trang 46

Bài 4: Thẻ tạo form

-Việc trao đổi thông tin giữa Administrator của 1Website và

khách hàng là rất cần thiết, Nó là một phần không thể thiếu

trong www Việc trao đổi thông tin đó được thực hiện qua Form

-Form cho phép thiết kế màn hình giao tiếp giữa người và trang

web với nhiều tác dụng như thu thập ý kiến, bán hàng

-Trên form có nhiều đối tượng như Textbox, Textarea, Radio

button, Check box

Trang 47

a- Thẻ tạo hộp văn bản Textbox

 ý nghĩa: Cho phép tạo hộp văn bản để người dùng có thể

gõ nội dung vào

Trang 48

b- Thẻ tạo hộp mật khẩu Password

 ý nghĩa: Cho phép tạo hộp văn bản để người dùng có thể

gõ nội dung vào, nội dung tương ứng được mã thành các dấu *

 Cú pháp:

<Input type=“Password“ Name=“Tên“ Size=n

Maxlength=n >

Trong đó:

- Name=“tên“: Chỉ định tên cho hộp mật khẩu

- Size=n: chỉ định kích thước cho hộp mật khẩu

- Maxlength=n : quy định số ký tự tối đa được phép gõ vào

Trang 49

c- Thẻ tạo nút lựa chọn Radio button

 ý nghĩa: Cho phép tạo các nút lựa chọn mà mỗi thời điểm trên một vùng chỉ được phép chọn duy nhất một giá trị

- Value=“Tên nút“ : Chỉ định tên cho tương ứng với mỗi nút

Trang 50

d- Thẻ tạo nút kiểm tra Checkbox

 ý nghĩa: Cho phép tạo các nút kiểm tra mà mỗi

thời điểm trên một vùng được phép chọn 1,2, hay không giá trị nào

- Value=“Tên nút“ : Chỉ định tên cho tương ứng với mỗi nút

Trang 51

Bµi 4: ThÎ t¹o form

e- ThÎ t¹o Menu th¶ xuèng

 ý nghÜa: Cho phÐp t¹o mét danh s¸ch th¶ xuèng, khi nhÊp vµo mòi tªn trá xuèng mét danh s¸ch ®

îc th¶ xuèng

 Có ph¸p:

<Select size=n name=“tªn“>

<Option value=“tªn môc 1“> ND HiÓn thÞ môc 1 trong danh s¸ch

<Option value=“tªn môc 2“> ND HiÓn thÞ môc 2 trong danh s¸ch

</Select>

Trang 52

Trong đó:

- Name=“tên vùng“: Chỉ định tên cho các nút seclect

- Value=“Tên mục“ : Chỉ định tên cho tư

ơng ứng cho các mục trong danh sách

- ND hiển thị: Là nội dung được hiển thị trên trang web

Trang 53

f- Thẻ tạo hộp văn bản có thanh cuộn

Textarea

 ý nghĩa: Cho phép tạo một hộp văn bản để người sử dụng

gõ nhiều nội dung trên nhiều dòng

Trang 54

- Name=“tên“: Chỉ định tên của nút Submit

- Value=“tên hiển thị“: Tên hiển thị trên nút Submit

- Accesskey=“Phím“:Quy định phím gõ tắt cho nút

Submit

Trang 55

- Name=“tên“: Chỉ định tên của nút Reset

- Value=“tên hiển thị“: Tên hiển thị trên nút

Reset

- Accesskey=“Phím“:Quy định phím gõ tắt cho nút reset

Trang 56

Hãy tạo trang Web trên đó có chứa Form theo mẫu sau

Trang 57

The end

Pls, contact via…

Tiêu đề	Gới Thiệu Các Thẻ Cơ Bản Của HTML
Trường học	Đại Học Vinh
Chuyên ngành	Thiết Kế Web
Thể loại	Bài Giảng
Năm xuất bản	2008
Thành phố	Vinh

Định dạng
Số trang	58
Dung lượng	891 KB