HTML cơ bản dành cho những người mới học Web
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 (601.92 KB, 33 trang )
HTML CƠ BẢN
2
Mc tiêu bi hc
Khi qut v HTML
Vit mt ti liu HTML đơn gin
S dng cc thẻ trong HTML
Thực hnh tạo trang web trên Macromedia
Dreamweaver 8.0 hoặc frontpage
3
Đặt vấn đề
Hiển thị nội dung Web
Trang web khác với các văn bn khác được tạo ra bởi
Word, NotePad… Trang Web được thit k để có thể hiển
thị được trên các trình duyt (Internet Explorer, Mozilla
FireFox, Nestcape…)
Các trình duyt sẽ dịch và hiển thị ni dung trang Web
của bạn do nó được định dạng bằng ngôn ngữ HTML
(HyperText MarkupLanguage).
4
Gii thiu HTML
HTML (HyperText Markup Language) l mt ngôn
ngữ đnh du siêu văn bn, được thit k ra để
tạo nên các trang web với các mẩu thông tin được
trình bày trên World Wide Web.
Phiên bn chính thức mới nht của HTML là HTML
4.01 (1999). Sau đó, các nhà phát triển đã thay
th nó bằng XHTML
5
XHTML là vit tắt của cm từ eXtensible
HyperText Markup Language”, là ngôn ngữ đnh
du siêu văn bn mở rng.
XHTML là b thẻ mở rng của HTML theo kiểu
XML (là ngôn ngữ đnh du mở rng, với cu
trúc tự do, gồm các thẻ do người dùng tự định
nghĩa).
Gii thiu XHTML
Gii thiu XHTML
Các thẻ do người dùng tự định nghĩa được mô t
trong mt tài liu mô t được gọi là DTD
(Document Type Definition)
Do tương thích với XML, XHTML vượt qua được
những hạn ch của HTML (chỉ có thể s dng được
các thẻ được quy định sẵn) và có thể mở rng
thêm các thẻ
Hin nay, HTML đang được phát triển tip với
phiên bn HTML5 hứa hẹn mang lại din mạo mới
cho Web
6
Gii thiu HTML(tt)
S dng cc thẻ v cc phn t HTML, ta có thể :
Điu khiển hnh thức v ni dung của trang
Xut bn cc ti liu trực tuyn v truy xut
thông tin trực tuyn bằng cch chn cc liên kt
vo ti liu HTML
Tạo cc biểu mu trực tuyn để thu thp thông
tin v người dng, qun l cc giao dịch
7
8
Công c phc tho ni dung web: MockFlow, Pencil Project
(miễn phí), Balsamiq Mockups…
Công c đồ họa hỗ trợ vic thit k giao din: Photoshop
CS3, Flash CS3…
Trình soạn tho văn bn : Notepad, Frontpage 2003 hoặc
Dreamweaver CS3
Trình duyt: Internet Explorer, fireFox, Chrome…
Các công cụ khi thiết kế web
9
Tổ chức cu trúc thư mc cho website như đã học ở bài
“Cc khái nim cơ bn”
Dùng trình soạn tho trong Notepad, frontpage, hoặc
dreamweaver, nhp các thẻ và các đoạn văn bn, lưu lại
dưới dạng *.htm hoặc *.html
Nạp lên trình duyt xem kt qu
Quay lại trình soạn tho chỉnh sa, lưu lại sau đó trở lại
trình duyt refresh (nhn F5) để xem kt qu.
Lưu ý: HTML dùng để xác định cách trình bày văn bn
chứ không điu khiển sự hiển thị văn bn ph thuc
vào trình duyt.
Các bưc thiết kế web
10
Cu trc ca mt ti liu HTML
<html>
<head>
<! Tiêu đ chứa thông tin mở rng của ti liu, không hiển thị trên web-
->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<! Cc thẻ v ni dung hiển thị >
</body>
</html>
Phần HTML
Phần tiêu đề
Phần thân
11
Ví dụ:
<html>
<head>
<title> Welcome to html</title>
</head>
<body>
<h3> My first html document</h3>
</body>
</html>
12
Hin th trang
Cấu trúc trang XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
<html xmlns="
<head>
<! Tiêu đ chứa thông tin mở rng của ti liu, không hiển thị
trên web >
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<! Cc thẻ v ni dung hiển thị >
</body>
</html>
13
14
Cc th trong HTML
Thẻ (tag) dùng để mô t cách trình bày văn bn
Không được hiển thị bởi trình duyt
Có 2 loại thẻ:
Thẻ có chứa thông tin: có dạng đóng mở
<tag_name> </tag_name>
Thẻ rỗng
<tag_name/>
Các thẻ không phân bit chữ thường và chữ hoa
(đối với HTML), tuy nhiên XHTML quy định các
thẻ và thuc tính phi vit chữ thường
15
Cc th trong HTML (tt)
Mt thẻ trong HTML bao gồm :
<element attribute = “value”>
Element – Nhn dạng thẻ (tag_name)
Attribute – Mô t thẻ/ thuc tính thẻ
Value – Gi trị được thit lp cho thuc tính, , XHTML
quy định cc gi trị thuc tính phi được bao bởi cặp
du nhy đôi.
Ví d: <font face=“Arial” size=“4” color=“red”>
Thẻ HTML được s dng để đnh du sự bắt đu
v kt thc của ti liu HTML
<html> . . . </html>
16
Thẻ HEAD
Thẻ<HEAD> </HEAD>:
Định nghĩa các mô t v trang HTML
Các thông tin này sẽ không hiển thị dưới dạng ni
dung của trang web.
HEAD có thể chứa các thành phn:
<BASE> : Khai báo địa chỉ cơ bn cho file HTML
<TITLE>: Đặt tiêu đ cho tài liu
<META>: Các thông tin khác v tài liu
17
Thẻ BASE
Thẻ <BASE>:
Thành phần dùng để chỉ định địa chỉ cơ bản cho
các mối nối liên kết , coi như đây là địa chỉ cơ
bản cho các mối nối liên kết.
Ví dụ :
<BASE HREF="">
Ngoài ra còn có một thẻ mở rộng : <BASE
TARGET> dùng để chỉ định frame mặc nhiên
mà các đối tượng liên kết được nạp vào.
18
Thẻ TITLE
Thẻ <title> </title>:
Mô t tiêu đ của trang web, tiêu đ của trang
thường được hiển thị như là tiêu đ của ca sổ
hiển thị trang web
Thông tin này cũng có thể được dùng bởi mt
số máy tìm kim để xây dựng chỉ mc cho các
trang web.
Ví d:
<title> website tin tức thể thao</title>
19
Thẻ META
Thẻ <meta http-equiv=“ ” content=“ ” name=“ ”/>:
Dùng để khai báo loại font s dng, tìm kim, xóa cache, chuyển
trang,…
Ví d:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Tự đng chuyển font ting Vit
<meta name=”keywords” content=”mywebsite.org, diễn đn CNTT”>
Giúp cho các công c tìm kim, tìm thy trang web của bạn thông qua
các thông tin khai báo trong phn content.
<meta http-equiv=“refresh” content=“15; URL=
sau 15 giây thì nó sẽ tự đng chuyển đn trang
<meta http-equiv=”pragma” content=”no-cache” >
Không lưu trang web này vào b nhớ cache khi truy nhp vào mt trang
web.
20
Thẻ BODY
Thẻ <body> </body>:
Xác định vùng thân của trang web, đây là
phn mà các dữ liu cùng với các thẻ
HTML được dùng để định dạng mt trang
web.
<body background=“url”
bgproperties=“fixed”> đặt nn cho trang
web, đặt thuc tính nn là fixed
<body bgcolor=“color”>: đặt màu nn
21
Các thẻ dùng cho vic chú thích
Thẻ <! content >
Để thêm những dòng chú thích trong file HTML
Ni dung văn bn nằm giữa "<! " " >" sẽ được chương trình bỏ qua.
Cho phép có khong trắng giữa và >, nhưng không được có khong
trắng giữa <! và
Thẻ <comment>
Giống thẻ <! >, dùng để nhp những dòng ghi chú
cho file HTML, đoạn text nằm giữa thẻ
<comment> </comment> sẽ không được hiển thị khi
trình duyt đọc file.
22
Thẻ tiêu đề
Các thẻ HEADER:
HTML có 6 mức chuẩn cho tiêu đ (Heading). Gồm các
thẻ từ <h1> đn <h6>.
Cú pháp: <h1>text</h1>
23
Ví dụ về thẻ HEADER
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1252">
<title>Cho mừng bạn đn với Dreamwaver CS3</title>
</head>
<body>
<h1>Cho mừng bạn đn với Dreamwaver CS3.</h1>
<h2>Công c thit k Website trực quan.</h2>
<h3>Cch nhanh nht để bạn xut bn thông tin của mnh đn với mọi
người</h3>
<h4>No, hãy bắt đu </h4>
</body>
</html>
24
Các thẻ định dạng văn bản
Thẻ <font> </font>:
Cú pháp:
<font size=“value” >
giá trị value là từ 1-7, mặc định là 3. giá trị thay đổi tương
đối là + hoặc
<font color=“#value”> hay <font color=name>
xác lp màu cho văn bn , value là các giá trị trong h thp
lc phân.
<font face=“name[,name][,name]” >
[name] chỉ định font chữ khi hiển thị text, có thể không cn
dùng thuc tính này khi các bạn có mt trình convert font cho
web.
25
Các thẻ định dạng văn bản
Thẻ <b>:
Dng tô đm dòng văn bn được chỉ định
Cú pháp: <b>text</b>
Thẻ <i>:
Dng in nghiêng dòng văn bn được chỉ định
Cú pháp : <i>text</i>
Thẻ <u>:
Dng gạch chân dòng văn bn được chỉ định
Cú pháp : <u>text</u>
Thẻ <s> hay <strike>:
Tạo du gạch ngang giữa text.
Cú pháp <s> text </s>
