Tải bản đầy đủ (.pdf) (12 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Quản trị Web

Ngôn ngữ đánh dấu siêu văn bản_ 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 (224.74 KB, 12 trang )

Bùi V Anh - Bài gi ng HTML

08-08-2005

•
•
•
•
•

Bài 1

Ngơn ng đá
đánh d u siêu v n b n
(Highper Text Markup Language – HTML)
Ths. Bùi V Anh
B môn Tin h c
Khoa Toán – C – Tin h c

N i dung

Khái ni m

Khái ni m c b n
C u trúc trang Web
M t s th thông d ng
M t s th đ c bi t
C u trúc th Script

• Web (World Wide Web): M ng tồn c u,
s d ng ngơn ng đánh d u siêu v n b n


(HTML – Highper Text Markup Language)
đ mơ t n i dung.
• Có 2 lo i trang Web: T nh và đ ng BVA1
• Thông tin đ c khai báo b ng cách dùng
BVA5
các th theo m t quy lu t khai báo.
• Ng i dùng s d ng các trình duy t đ
đ c các thông tin



Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

2

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

Trình duy t và k ch b n

Trình ch và ngơn ng script

Trình ch và ngơn ng script…

• Internet Explorer, Nescape, FireFox…
• K ch b n (script): Có 2 lo i, ch y trên máy
ch (server script) và máy khách – máy

duy t web (client script). ó là d ng l p
trình dùng đ nâng cao hi u qu , tính
n ng c a trang web.
• Các h CSDL g n v i trang web dùng đ
l u thơng tin: Access, SQL Server,
MySQL, Oracle…

• Trình ch (web server): N i cung c p d ch
v web, đ t và ch y trên máy tính
• Mơi tr ng ch y trình ch :

• Client script khơng ph thu c vào Server
script và Web server (t ng đ i)
• Có th dùng nhi u lo i client script trong
cùng m t trang Web nh ng không đ c
khai báo l n l n

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

B môn Tin h c, Khoa Toán - C - Tin h c, Tr

– Windows: IIS (Internet Information Server),
Apache
– Linux: Apache, JRUN, Weblogic…

3

• Ngơn ng script: ASP (Active Server

Page), JSP (Java Server Page), Servlet,
PHP, Perl, ASP.NET
– Ph bi n: VB Script và Java Script
4

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

ng H Khoa h c T nhiên

5

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

6

1


Slide 3
BVA1

- Web t nh: Không k t n i CSDL, thông tin hi n lên đ c l u tr trên file text hay các file riêng bi t.
- Web đ ng: Có k t n i t i CSDL, khi trang web đ c làm t i, d li u đ c trình b y đ c đ c t CSDL
Bui Vu Anh, 7/23/2005

BVA5


Th : Tag, th
đ ng c a th

ng g m 2 th , th m đ

Bui Vu Anh, 7/23/2005

c đ t trong < > và th đóng đ t trong </ >. Chúng có cùng tên và ph n n m trong 2 th s ch u tác


Bùi V Anh - Bài gi ng HTML

08-08-2005

C u trúc trang Web
• Là m t file text có c u trúc
• Tên file l u tr : .htm, .html, .jhtm, phtm…
• Tên th khơng phân bi t ch hoa/th ng
<html>
<head>
<title>Tiêu đ … </title>
<meta…>
<link …> … </link>
<script> … </script>
</head>
<body> … </body>
</html>
Hà N i 08-08-2005


Bùi V Anh - Bài gi ng v HTML

Ý ngh a các th

Các th đ nh d ng

• Head: Thông tin không xu t hi n trên
trang web, m c đích cung c p thơng tin…
• Title: Tên trên thanh tiêu đ c a trình
duy t
• Body: Thơng tin xu t hi n trên trang web,
có th che d u m t ph n thông tin tu theo
ph ng th c c a client script

• Div: Canh l đo n v n b n

7

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

Mã 16 màu

• Font: Quy đ nh font cho đo n v n b n

aqua
gray
navy
silver


– <font face=“tên font” color=“màu” size=“kích th c”>
… </font>
– Tên font s d ng: font vi t tr c quy đ nh s dùng
n u máy đã cài đ t, font th 2 đ c dùng n u font
th nh t không cài đ t…
– H 16 màu chu n thì có th dùng tên: red, blue…, h
màu 24bit, dùng 6 s h hexa d ng #FFFFFF (d u #
tr c)
– C ch 1, 2, 3…7 ho c dùng kích th c t ng đ i so
v i trình duy t, dùng –n, +n
size=+1, size=-2
Bùi V Anh - Bài gi ng v HTML

B mơn Tin h c, Khoa Tốn - C - Tin h c, Tr

• P: nh d ng câu, sau th k t thúc s sang m t
dòng m i, tách nhau b ng m t kho ng cách


…



• <blockquote>....</blockquote> : Làm n i b t
đo n v n b n b ng cách lùi vào phía trong trang
web, gi nguyên đ nh d ng

TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>

Các th đ nh d ng…


Hà N i 08-08-2005

<div align=“justify” | “center” | “left” | “right”>
…
</div>

10

Hà N i 08-08-2005

black
green
olive
teal

8

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

9

Các th đ nh d ng…
blue
lime
purple
white


Bùi V Anh - Bài gi ng v HTML

ng H Khoa h c T nhiên

• B, I, U: Quy đ nh font ch
chân

fuchsia
maroon
red
yellow

đ m, nghiêng, g ch

<b> … </b>, <i> … </i>, <u> … </u>

M t s th khác làm thay đ i hình th c c a ch .
•
•
•
•
•
•
11

Heading: H1 đ n H6, Typewriter: tt
<BIG>...</BIG>, <SMALL>...</SMALL>
<sup>...</sup> : superscript - ch s trên
<sub>...</sub> : subscript - ch s d i
<strike> … </strike> : g ch ngang qua

<basefont size=n> : Quy đ nh ch trong trang, ch thay
đ i khi có m t basefont khác xu t hi n

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

12

2


Bùi V Anh - Bài gi ng HTML

08-08-2005

Ng t dòng và đo n

Chèn b ng

Chèn b ng…
BVA8

• D u tr ng, d u ng t đo n trên trình duy t ch
đ c tính 1 l n
•
tách đo n, dùng th p, div
• Dùng th 
 … </pre> n u mu n trình
duy t hi n đúng v n b n nh đã trình b y
trong trang web.


Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

13

Danh sách

nh d ng b ng

–Tr: Khai báo hàng
–Td: Khai báo c t
BVA7
BVA6
width=l>
…
</table>
Thi t k b ng ch quan tâm chi u r ng, th tr
quan tâm chi u cao, th td quan tâm chi u r ng.
n v dùng tính theo đi m
Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

14

Danh sách mơ t


• Khơng th t (unorder list)

<ol type=“1 | A | a | I | i” start=y>
<li type= “1 | A | a | I | i”> Item 1
<li> Item 2
</ol>
• Danh sách s đánh s th t t y (y là s , type tu ý)
• Danh sách có th l ng nhau nh ng không đ c đan chéo
Bùi V Anh - Bài gi ng v HTML

B môn Tin h c, Khoa Tốn - C - Tin h c, Tr

</dl>
Khi trình b y, danh sách s lùi đ u dòng theo s
phân c p
16

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

ng H Khoa h c T nhiên

BVA10

…

BVA11

</td> : Khai báo c t

<tr> … </tr> : Khai báo hàng
• Dùng th <th>…</th> đ đ nh d ng tiêu đ c t c a
b ng
• Dùng th <caption> … <caption> đ c n đ u theo
chi u r ng m t dòng tiêu đ trong b ng. Th này
đ t trong th <table>
Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

15

• “đ ng d n URL/UNC” border=n height=x width=y
border=m alt=“x”>
• Imag khơng có th đóng, align dùng đ dóng v n b n so
v i nh, m c đ nh là bottom. N u dùng left | right, v n
b n sau đó c ng b tác đ ng (t ng quan text-image)
• nh có th b bi n d ng n u cung c p chi u cao, r ng
sao t l => Không nên ch chi u cao và r ng n u khơng
c n thi t.
• N u mu n nh khơng có vi n, ch n border m=0
• Khi khơng n p đ c nh, xâu trong alt s hi n thay th
• Các lo i nh h tr : .GIF, .JPG, .PNG

<dt> description title1
<dd> description description1
<dt> description title2
<dd> description description2
…

<dt> description titleN
<dd> description descriptionN

• Có th t (order list)

BVA9

Th chèn nh

<dl>

<ul type=circle | square | disc >
<li type=circle | square | disc > Item 1
<li> Item 2
</ul>

Hà N i 08-08-2005

• Table:

| bottom | middle” rowspan=m colspan=k>

17

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

18


3

 
Slide 14
BVA6

đ mđ

ng vi n, 0 t c là không có vi n.

n v là đi m

Bui Vu Anh, 8/2/2005

BVA7

Kho ng cách gi a các hàng và c t.

n v là đi m

Bui Vu Anh, 8/2/2005

Slide 15
BVA8

r ng c a c t so v i b ng tính theo %
Bui Vu Anh, 7/23/2005

BVA9


Dóng n i dung trong ơ
Bui Vu Anh, 7/23/2005

BVA10

K t h p m hàng
Bui Vu Anh, 7/23/2005

BVA11

K th pkc t
Bui Vu Anh, 7/23/2005

 
Bùi V Anh - Bài gi ng HTML

08-08-2005

Các ký t đ c bi t
• D u xu ng dịng: 
. Clear
dùng đ xoá vi c c n dịng v n b n bao quanh hình nh do
th imag t o ra.
• > (>), < (<), & (&),   (d u tr ng khơng b trình duy t hu
- non breacking space), © (â), ® (đ), é (é)
• Dùng &xxxx; đ chèn các ký t ISO trong đó xxxx là mã.
Tham kh o t i:  />•
ng k ngang (hard rules):
<hr size=N width=X [noshade]>
X có th dùng %, t l v i đ r ng c a trang hi n hành. N

m c đ nh là 2. noshade : khơng có bóng
Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

Th chèn liên k t

Th chèn liên k t…

• G n v i v n b n: BVA16
URL/UNC”> … </a>
• G n v i nh
<a href=“đ a ch liên k t URL/UNC”>
border=n height=x width=y>
</a>
• Dùng “mailto:đ a ch email” đ liên k t đ n
đ a ch g i th

• G i ph

Các th input

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

BVA17


• Khai báo nh m t Bookmark trong chính trang
web”
– Khai báo: <a name="NAME">Dịng thơng báo v trí,
có th khơng có</a>
– Tham kh o tr l i: <a name=“NAME">Dịng thơng
báo đi đ n v trí có tham kh o n</a>
Có th dùng bookmark trong m t trang khác:
name=<đ a ch trang>#tên tham kh o

URL: Universal/Uniform Resource Locator
19

ng th c c a JavaScript:

href=“javascript:window.external.AddFavorite
(‘’)”> Bookmark this URL </a>

20

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

Th text và password

Th text và password…

• Nh p d li u d ng text
• Quy đ nh chi u dài l n nh t (maxlength) và kích

th c (size) trên trang web
• Phù h p (khơng l n h n) chi u dài c a đi u
khi n/th ch a nó
• C n cung c p tên đ tham chi u trên Client và
Server Side
• Cung c p giá tr m c đ nh n u c n

size=20 maxlength=10>
name=“txtPassword”
type=“password”
value=“” size=20 maxlength=10>

21

BVA18

• Cho phép ng i dùng nh p d li u
• Th c hi n ch th hay hành đ ng
• G m: text, password, submit, button,
reset, checkbox, radio, hidden, image

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

B môn Tin h c, Khoa Toán - C - Tin h c, Tr

22


Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

ng H Khoa h c T nhiên

23

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

24

4

 
Slide 20
BVA16

URL: Universal Relate Link - đ a ch internet, mail hay intranet
UNC: a ch m ng c c b
Bui Vu Anh, 7/23/2005

Slide 21
BVA17

Máy c n h tr Java Virtual Machine
Bui Vu Anh, 7/23/2005


Slide 22
BVA18

Các th này dùng đ khai báo d li u nh m k t n i đ n k ch b n ch y trên trình ch
Bui Vu Anh, 7/23/2005

 
Bùi V Anh - Bài gi ng HTML

08-08-2005

Th checkbox

Th radio

Dùng cho tu ch n
• Quan tâm đ n thu c tính checked (true/false) khi s
d ng Client Script.
• Server side tham chi u th d i d ng giá tr c a th
thông qua tên nên c n đ nh ngh a giá tr tr c.
• Khi khai báo trùng tên, chu i giá tr nh n đ c cách
nhau b i d u ph y (,)

• Dùng cho ch n 1 trong nhi u l a ch n
• Các radio ph i có cùng tên, khác nhau v giá tr
• Ch m t m c đ c checked, u tiên m c cu i
cùng n u c tình check nhi u m c
• Khi tham chi u b ng Server Script s nh n
đ c giá tr c a tu ch n đ c ch n


How can you know us:
checked>Newspaper
checked>Television
Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

Th submit
Dùng ch p nh n nh ng d li u nh p trong input
phía trình ch b ng ph ng th c Post (trong th
form) hay Get (trong QueryString)
Chuy n các giá tr lên QueryString, khai b o th
form v i ph ng th c Get; mu n Server Script l y
d li u t th form, khai báo th form v i ph ng
th c Post

Gender:
<input type="submit" value="Save" name= "Submit">
(value là giá tr caption trên nút)

checked>Male
<input type="radio" value="F" name="rdGender">Female
25

Th button


Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

26

Th reset

• Ch p nh n nh ng d li u nh p trong các th
input lên trình khách (n u dùng ph ng th c
submit(), nút s g i th form lên trình ch
web). Mu n tính tốn trên trang web => dùng
th này
• Th c thi ph ng th c Client Script

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

27

Th hidden

• Ph c h i d li u nh p trong các th input,
select, textarea
•
c khai báo trong th form dùng đ reset
d li u trên trang web

• T ng t th text nh ng không hi n th trên

trang web, không cho phép ng i dùng nh p
d li u mà c n đ nh ngh a tr c giá tr cho
nó, nh m th c hi n m c đích ti m n.
<input type=“hidden" value=“Y" name= “txtYN”>

<input type=“reset" value=“Cancel" name= “Reset”>

Ví d : Quay v trang tr c
onClick=“window.history.go(-1);”>
Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

B mơn Tin h c, Khoa Tốn - C - Tin h c, Tr

28

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML

ng H Khoa h c T nhiên

29

Hà N i 08-08-2005

Bùi V Anh - Bài gi ng v HTML


30

5

 
Bùi V Anh - Bài gi ng HTML

08-08-2005

Th image

Th textarea

• Hình nh trên trang web g n v i m t ch c
n ng (ví d g n kèm các nút submit, reset,
button).
file nh”>

ng d n đ n

Th select

• Nh p d li u trên nhi u dịng (khơng gi i
h n tr c chi u dài l n nh t)
• H n đ nh s dòng (rows) và c t (cols) ph c
v vi c hi n th
• Trình b y trong b ng đ c n hàng, c t

• Ch n các ph n t trong danh sách (ListBox,

ComboBox)
• Cho ch n m t (ComboBox) ho c nhi u m c
(ListBox)
• Ph n t đ c ch n thì thu c tính selected
nh n đúng

Description: