Slide HTML

THIẾT KẾ WEB
Giảng viên: Nguyễn Đức Cương

Email:cuongnguyenduc@gmail.com
Khoa CNTT- Trường Đại Học Công Nghiệp

TP.HCM
1
KHÁI QUÁT VỀ TRANG WEB
Các khái niệm cơ bản:

 Internet:
 TCP (Tranmission Control Protocol):
 Mô hình Client/Sever:
 Internet Server:
 Internet Service Provider(ISP):
 Internet Protocol:
 World Wide Web (WWW)
2
Các khái niệm cơ bản (tt)
 Web Browser (trình duyệt):
 Home Page (trang chủ):
 Hosting Provider:
 HyperLink:
 Publish:
 URL (Uniform Resource Locator):
 Web Server:
3
 Web là gì?
Là một ứng dụng chạy trên mạng (Client – Server),
tương tự như các ứng dụng khác. Nhưng được chia sẻ
toàn cầu thông qua mạng Internet và các dịch vụ của
nó.
 Trang web là gì?
Là tập tin văn bản đơn giản (simple text) lưu trữ
với đuôi .html; .htm. Gồm các tag, đoạn mã đặc biệt mà
trình duyệt có thể hiểu và thông dịch được.
4
Chương 1. NGÔN NGỮ HTML
(HyperText Markup Language)
I. Giới thiệu:
II. Tạo tài liệu HTML đầu tiên
III. Các tag (thẻ) cơ bản trong HTML
IV. Table
V. Frame.
VI. Tạo Form trong HTML.
5
I. Giới thiệu:
HTML (ngôn ngữ đánh dấu siêu văn bản) là
hàng lọat các đọan mã chuẩn với các quy ước
được thiết kế để tạo các trang Web và được
hiển thị bởi trình duyệt Web (Web Browser).
HTML cho phép liên kết các lọai âm thanh,
hình ảnh bên trong các trang Web.
HTML không phải là ngôn ngữ lập trình.
6
I. Giới thiệu:
 Tag HTML là gì?
 Định dạng chung:
<TagName ListProperties>Object</TagName>
 Trong đó:
– <TagName> : thẻ mở.
– </TagName> : thẻ đóng.
– ListProperties : thuộc tính 1= giá trị 1 thuộc tính 2=
giá trị 2 …
– Object : Đối tượng định dạng.
 Có thể lồng các tag theo thứ tự.
 Các ví dụ:
7
II.Tạo tài liệu HTML đầu tiên.
1. Định dạng chung của các tài liệu HTML.

2. Môi trường soạn thảo:
3. Ví dụ:
4. Hiển thị trang HTML:
5. Điều chỉnh tài liệu HTML.
8
1. Định dạng chung của tài liệu HTML
<HTML>
<HEAD>
<TITLE>Tên Tiêu Đề </TITLE>

</HEAD>
<BODY>

Phần thân của trang Web
</BODY>
</HTML>
9
2. Môi trường soạn thảo:
 Trình soạn thảo đơn giản: NotePad,

TextPad,..
 Trình soạn thảo có sự hỗ trợ thiết kế:
MSFrontPage, Visual InterDev,
DreamWeaver,…
10
3. Ví dụ:
<HTML>
<HEAD>
<TITLE>Design Web Class </TITLE>
</HEAD>
<BODY>
<font face=“Times New Roman” color=“magenta” size=5>
Chào mừng các bạn đến với Lớp học “Thiết Kế Web” </font>
</BODY>
</HTML>
11
4. Hiển thị tài liệu HTML
Các cách hiển thị tài liệu:
Sử dụng trình duyệt IE (Internnet Explorer)
Double Click vào tập tin .html; htm cần hiển
thị.
Drag and Drop:
12
Các bước biên tập tài liệu HTML.
• Tạo một thư mục để chứa các tài liệu HTML.
• Khởi động trình soạn thảo.
• Nhập nội dung tài liệu. Lưu lại với đuôi .html;
.htm.
• Hiển thị tài liệu HTML.
13
5. Hiệu chỉnh tài liệu HTML
 Khởi động trình soạn thảo.
 Mở tập tin .html cần sửa.
 Thay đổi nội dung:
 Lưu trữ lại.
 Chuyển sang cửa sổ trình duyệt. Nhấn F5.
Một số thao tác trong IE

 Xem mã nguồn: View/Source.
 Chỉnh bảng mã: View/ Encoding/ Chọn các bảng
mã sau: Western European; User Defined; Unicode
(UTF-8). 14
III. Các tag (thẻ) cơ bản trong HTML
Có 2 lọai tag cơ bản: Containter tag (thẻ mang thông tin) và

Empty tag (thẻ rỗng).
Containter tag: Được thiết kế để chứa một số thứ khác: thường
là các đọan hay các thẻ HTML (bao giờ cũng có tag mở và tag
đóng)
Ví dụ: <TITLE> Hello! </TITLE>
 Empty tag: chỉ có một tag.
Ví dụ: <HR>: Kẻ một đường ngang
<br> : xuống dòng.
15
1. Các tag trong phần đầu của tài liệu:
Nằm trong <HEAD> và </HEAD>
<TITLE> Hello! </TITLE>
<BASE>: URL gốc cho các mối liên kết
<BASE HREF="http://www.myhost.com/">
<META>: Nhúng thêm một số thông tin
16
2. Các tag trong phần thân của tài liệu
2.1. <BODY> </BODY>: thân tài liệu.
2.2. <P>văn bản </P>: Định dạng đoạn văn bản.
2.3. <BR>: Ngắt dòng, xuống đầu dòng mới.
2.4. <B>Chữ đậm </B>
2.5. <I>Chữ nghiêng</I>
2.6. <U>Chữ gạch dưới</U>
2.7. <SUB> … </SUB>: SubScript
2.8. <SUP> … </SUP>: SuperScript
2.9. <HR>: Thêm đường kẻ ngang:
17
2.1/ Tag <Body>
Bắt đầu phần thân của trang HTML, Cho phép định ảnh nền,
màu nền, màu chữ, canh lề,…
Một số thuộc tính:
 BGCOLOR=màu: Màu nền
 BACKGROUND= file ảnh: Ảnh nền
 TEXT=màu> : Màu văn bản mặc địng trong trang WEB.
 LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb": Màu
liên kết chưa xem, đã xem, và đang xem.
2.2/ Tag <p>

-Xuống dòng thêm 1 khoảng trắng.
Tag <p align = left| right| center> văn bản </p>
18
2. Các tag trong phần thân của tài liệu(tt)
- Tag <sub> văn bản </sub>: Tạo chỉ số dưới.
 Ví dụ: H2SO4
- Tag <sup>văn bản </sup>: Chỉ số trên.
 VD: AX3 + BX2 + CX + D.
- Tag <HR color= màu width=n|x% align=vị trí>
 size = “n”: Độ dày của đường kẻ ngang.
 width = “n (px) | x %”: Độ rộng bằng Pixel hay tỉ lệ % của
cửa sổ.
 Align = left; right; center: Canh trái, phải, giữa.
 shade/Noshade: Tạo bóng/ Không tạo bóng.
 color = “#rrggbb”: Màu đường kẻ ngang.
 Ví dụ: <hr color="#FF0000" width="80%" size="4" noshade

align="left">
19
2. Các tag trong phần thân của tài liệu(tt)
2.3/ Tag Font: Định dạng font chữ, màu sắc, kích thước văn bản.
<FONT face=“font 1[, font 2,..]” color=màu size= “giá trị” > Văn
bản</FONT>
Thuộc tính <Font>:
• SIZE=value: Giá trị value từ 1-7. Mặc nhiên, size là 3. Giá
trị thay đổi tương đối là '+' hay '-' so với giá trị chuẩn
(BaseFont)
• Ví dụ:
• COLOR = màu : xác lập màu của văn bản.
• Ví dụ:
• FACE= font1[, font2,..]: Chỉ định font chữ khi hiển thị
text
• Ví dụ:
20
2. Các tag trong phần thân của tài liệu (tt)
2.3/ Các Heading:
<H1> Chữ lớn </H1>
……………………….
<H6> Chữ nhỏ </H6>
2.4/Tạo chú thích cho trang WEB

2.5. Chèn hình ảnh vào trang WEB:
 Đường dẫn tuyệt đối: C:\MyWeb\images\coso.jpg
 Đường dẫn tương đối: “../images/coso.jpg”
<img border=“n" src= “URL của ảnh" width=“bề rộng”
height=“chiều cao” alt = “Văn bản thay thế”>
 Các thuộc tính của hình ảnh
21
<html>
<body>
<b>This text is bold</b>
<br>
<strong> This text is strong </strong> <br>
<big>This text is big </big> <br>
<i> This text is italic </i><br>
<small> This text is small </small> <br>
This text contains
<sub> subscript </sub> <br>
This text contains
<sup> superscript </sup>
</body>
</html>
22
Tag <pre> </pre>: Văn bản định dạng trước
<html>
<body>
<pre>Văn bản định dạng trước là dạng văn bản giữ nguyên
khoảng trắng và các dấu xuống hàng của trình soạn thảo..
</pre>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
23
<html>
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as plain text.
</p>
</body>
</html>
24
2.9. <CENTER>.. </CENTER>:
Dùng để canh giữa văn bản so với lề trái và phải
<CENTER>All this text would be centred in the page</CENTER>
25
2.10. Tạo danh sách (tt).
Có 2 loại danh sách: Có thứ tự và không thứ tự:

Danh sách không có thứ tự:
Bắt đầu danh sách: <ul type = {circle, square, disc}>
Kết thúc danh sách: </ul>
Đầu mỗi phần tử: <li>
Ví dụ:
o Hoa hồng
 Hồng nhung
 Hồng bạch
o Hoa huệ
o Hoa lan
26
Ví dụ:
<UL type =Circle>
<LI>Hoa hồng.
<UL type = Square>
<LI>Hồng nhung
<LI>Hồng bạch
</UL>
<LI>Hoa huệ
<LI>Hoa lan
</UL>
27
Ví dụ
Máy tính gồm 4 khối:
1. Input
o Keyboard.
o mouse
2. Output
o Monitor
o printer
3. Cpu
4. Store:
• Ram
• rom
28
Danh sách có thứ tự:

<OL type = a start = 2>
<LI>Dòng 1
<LI>Dòng 2
<LI>Dòng 3
</OL>
TYPE: Chỉ định cách đặt ký hiệu đầu dòng:
(TYPE=A) - Chữ hoa. Ví dụ: A, B, C ...
(TYPE=a) - Chữ thường. Vídụ: a, b, c ...
(TYPE=I) - Số La Mã hoa. Ví dụ: I, II, III ...
(TYPE=i) - Số La Mã thường. Ví dụ: i, ii, iii ...
(TYPE=1) - Số (mặc định). Ví dụ: 1, 2, 3 ...
START: Khai báo số dùng làm mặc định và sẽ được chuyển đổi qua TYPE trước
khi hiển thị.
Ví dụ: START=5 sẽ được hiển thị là 'E', 'e', 'V', 'v', hay '5' theo các TYPE 29ở trên.
Ví dụ:
Danh sách không thứ tự <html>
<html> <body>
<body> <h4>An Ordered List:</h4>
<h4>An Unordered <ol>
List:</h4> <li>Coffee</li>
<ul> <li>Tea</li>
<li>Coffee</li> <li>Milk</li>
<li>Tea</li> </ol>
<li>Milk</li> </body>
</ul> </html>
</body>
</html>
30
Bài 3: Liên kết
1. Khái niệm:
2. Các loại liên kết:
3. Các ví dụ:
31
1. Khái niệm:
1.1/Khái niệm:
1.2/Tạo siêu liên kết:
 Địa chỉ hoặc URL của file liên kết.
 Điểm liên kết: Văn bản, ảnh,..
- Các dạng URL:
– URL tuyệt đối: http://www.vnn.vn/index.htm
– URL tương đối: Nếu Url trỏ đến cùng thuộc một site với trang
hiện hành, thì có thể dùng URL tương đối.
- Sử dụng tag <A> (anchor) để tạo các liên kết. Anchor có
thuộc tính là HREF dùng để cho trình duyệt biết nơi
nào đang được tham khảo bởi siêu liên kết.
32
2.Các loại liên kết
Liên kết tới một trang trong website.
Liên kết tới cùng trang.
Liên kết tới một vị trí trong trang web khác.
Liên kết E-mail.
33
2.1/ Liên kết tới một tài liệu web trong website
<A HREF = URL target= “vị trí”> văn bản</A>.
 url: Đường dẫn đến tập tin liên kết.
 Target = _top; _blank; _self; _parent
Ví dụ:
<A HREF="http://www.hcmuns.edu.vn">Trườg Đại
học Khoa học Tự nhiên</A>
<A HREF=“Bai tap1.html">Thắng cảnh</A>
34
2.2/ Liên kết tới cùng một trang.
B1: Đặt tên cho nơi đến (tạo Bookmark).
<A name=“tên nơi đến”>Văn bản </A>
Ví dụ: <A Name=“ditich”>Di tích ..</a>
B2: Tạo liên kết tới Bookmark.
<A href = “#Tên nơi đến”>Văn bản </A>
Ví dụ: <A HREF=“#ditich”>Di tích văn hoá </a>
35
2.3/ Liên kết tới một vị trí ở trang khác.
B1: Đặt tên cho nơi đến (tạo Bookmark) – tại tài liệu
liên kết.
<A name=“tên nơi đến”>Văn bản </A>
Ví dụ: <A Name=“ditich”>Di tích ..</a> - tại trang
dulich.html
 B2: Tạo liên kết tới Bookmark - đặt tại tài liệu chứa
SLK.
<A href = “file lien ket#Tên nơi đến”>Văn bản
</A>
Ví dụ: <A HREF=“dulich.html#ditich”>Di tích văn hoá
</a> - tại trang “index.html”
36
2.4/ Liên kết e – mail:
<A Href=“mailto: địachỉmail”>Văn bản</A>
Ví dụ: Mọi chi tiết xin liên hệ
<A href = mailto:hcuongnguyen@yahoo.com>
Nguyễn Đức Cương </A>
37
2.5/ Liên kết hình ảnh:
<A Href=“URL”><img src=“file ảnh”></A>
Ví dụ:
<A Href= “chitiet.html”><img src=“h1.gif”></a>
38
Ví dụ:
<html>
<body>
<p>
<a href="lastpage.htm"> This text</a>
is a link to a page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on
the World Wide Web.
</p>
</body>
</html>
39
Ví dụ: Liên kết bằng hình ảnh:
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
40
Ví dụ:Liên kết vào cửa sổ mới
<html>
<body>
<a href="lastpage.htm" target="_blank">Last
Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
41
Ví dụ: Liên kết cùng trang
<html>
<body>
<p> <a href="#C4"> See also Chapter 4. </a> </p>
<p><h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<a name="C4"><h2>Chapter 4</h2></a>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2> 42
Ví dụ:
<html>
<body>
<p>
This is a mail link:
<a
href="mailto:npdai@hcm.vnn.vn?subject=Hello%20again
">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced
by %20 to <b>ensure</b> that the browser will display
your text properly.
</p>
</body>
</html> 43
Bài 4. Table
Định dạng tổng quát.

Các thuộc tính của bảng.
Mở rộng ô theo hàng, cột.
Các bảng lồng nhau.
44
1.Định dạng tổng quát
 Bắt đầu bảng: <table các thuộc tính>
 Bắt đầu dòng: <tr>
 Kết thúc dòng: </tr>
 Bắt đầu ô (cell): <td>
 Kết thúc ô (cell):</td>
 Kết thúc bảng </table>
 Dữ liệu nằm giữa ô (giữa cặp <td></td>)
45
1. Định dạng tổng quát:
Có bao nhiêu cặp <td>, <tr> trong bảng m dòng, n cột ?
<TABLE>
<Caption>Tiêu đề </Caption>
<TR><TH>Column1</TH><TH>Column2</TH></TR>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
46
2.Các thuộc tính của bảng (tt):
bgColor = Màu nền.
BackGround = Hình nền.
Border =Độ dày đường viền quanh Table.
BorderColor = Màu đường viền.
Cols = Số cột
CellPadding = Khoảng cách vách ô là bao nhiêu.
CellSpacing = Khoảng cách giữa các ô.
Height = Chiều cao Table.
Width = Chiều rộng Table.
47
2.Thuộc tính của bảng (tt):
<Caption>
Align = Left,right,Center.
Valign = Top, bottom>
<TR>…</TR>: Tạo ta một hàng trong bảng.
<TR
Align = Left,right,Center.
Valign = Top, middle, bottom>
<TH>…</TH>: Tiêu đề cho mỗi cột.
<TD>…</TD>:Đưa dữ liệu vào ô (định nghĩa Cell)
48
Ví dụ:
<html><body>
<h4>One column:</h4>
<table border="1">
<tr> <td>100</td> </tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr> <td>100</td> <td>200</td> <td>300</td> </tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
</table>
</body>
</html>
49
Ví dụ:
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr> <td>First</td> <td>Row</td></tr>
<tr> <td>Second</td> <td>Row</td></tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
</table>
<h4>With a very thick border:</h4>
<table border="15">
</table>
</body></html> 50
Ví dụ:
<html><body>
<h4>Table headers:</h4>
<table border="1">
<tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr>
<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr> <th>First Name:</th> <td>Bill Gates</td></tr>
<tr> <th>Telephone:</th> <td>555 77 854</td></tr>
<tr> <th>Telephone:</th> <td>555 77 855</td></tr>
</table>
</body>
</html>
51
Ví dụ:
<html>
<body>
<h4>
This table has a caption,
and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr> <td>100</td> <td>200</td> <td>300</td></tr>
<tr> <td>400</td> <td>500</td> <td>600</td></tr>
</table>
</body>
</html>
52
3./Mở rộng ô
Theo hàng: <td rowspan=n> dữ liệu</td>

Theo cột : <td colspan = n>Dữ liệu </td>
->n là số ô cần mở rộng.
Ví dụ:
53
4. Các bảng lồng nhau:
 Các bảng có thể lồng nhau

 Đặt trong cặp <td> </td>
 Nên sử dụng bảng lồng nhau để địnhvị trí cho dữ liệu.
54
Ví dụ:
<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="red">
</table>
<h4>A background image:</h4>
<table border="1" background="winxp.gif">
</table>
</body>
</html>
55
Ví dụ:
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr> <td bgcolor="red">First</td>
<td>Row</td></tr>
<tr> <td background="winxp.gif"> Second</td>
<td>Row</td></tr>
</table>
</body>
</html>
56
Bài 5. FRAME
1. Khái quát.
2. Các thuộc tính của tag <Frame>
3. Khung lồng nhau.
4. Phần tử <NoFrames>.
5. Khung trong dòng <IFRAME></IFRAME>
57
1. Khái quát.
1.1/ Giới thiệu.

1.2/ Sử dụng Frame.
1.3/ Tạo Frame.
58
1.Khái quát.
1.1/Giới thiệu:
Frame dùng để chia cửa sổ trình duyệt thành nhiều phần khác
nhau, mỗi phần có thể hiển thị được một trang web riêng biệt.
Các trang web có thể liên kết với nhau.
1.2/Sử dụng Frame khi:
 Tạo liên kết chỉ mục.
 Những thành phần giao diện cố định:
 Giao diện dạng xem tài liệu:
59
1. Khái quát (tt)
1.3/ Cú pháp:
Cặp <Body>..</Body> thay bởi <Frameset></frameset>
 Bắt đầu chia khung: <Frameset Cols | Rows=“value list”>
 Mỗi khung là một tag <Frame>.
 Kết thúc chia khung: </Frameset>.
Trong đó:
 Cols: chỉ ra chia theo cột.
 Rows: chỉ ra chia theo hàng.
 Value List: danh sách độ rộng của khung.
 n: tuyệt đối (pixel).
 %: tương đối so với khung cha.
 *: Trình duyệt tự tính.
60
2./ Các thuộc tính của Tag <Frame>
 Name: Tên khung.

 Src: Tập tin sẽ hiển thị trong khung.
 Noresize: Không cho thay đổi kích thước.
 Scrolling: Yes/ No/ Auto.
 Marginwidth: lề phải, lề trái của khung.
 Marginheight: lề trên, lề dưới của khung.
61
3./ Khung lồng nhau.
 Thay tag <Frame> bằng cặp
<Frameset>..</Frameset>.
 Đặt một tag <Frame> thay Banner
cho một khung.
 Ví dụ: Tạo khung như hình menu content
bên.
 Khung menu hiển thị trang
chứa các siêu liên kết.
 Khung Banner hiển thị trang
chứa hình, logo quảng cáo.
 Khung “content” chứa nội
dung của các trang web.
62
3./ Khung lồng nhau (tt)
☺Tạo liên kết trong khung.
 Xác định tên của khung đích.
 Thiết lập thuộc tính của siêu liên kết.
 Một số target:
 Thiết lập nhiều siêu liên kết có cùng đích
tag <Base target=“tên khung”>
☺Ví dụ:
63
4./Tag <Noframes>
 Sử dụng khi trình duyệt không hỗ trợ việc chia
khung.
 Đặt trong cặp <Frameset>.. <Frameset>
 Cú pháp:
<Noframes> Nội dung hiển thị </Noframes>
64
5./ Khung trong dòng <Iframe>
 Khái niệm:
 Cấu trúc:
<Iframe src=“file” width = value height = value scrolling =
value name= value>Nội dung khi trình duyệt không hỗ trợ
khung </Iframe>
Trong đó:
src: URL của tập tin cần hiển thị.
width: chiều rộng khung, pixel hoặc %.
height: chiều cao của khung
scrolling: yes/ no/ Auto
name: tên của khung.
65
2. Tạo FrameSet
Frameset có thể lồng nhau:
<FRAMESET Cols = “25%,75%”>
<FRAMESET Rows = “50%, 50%”>
</FRAMESET>
</FRAMESET>
3. Thêm các frame:
<FRAMESET Cols = “25%,75%”>
<Frame SRC = “URL1”>
<Frame SRC = “URL2”>
</FRAMESET>
66
4. Đưa các trang Web vào Frame khác:
Đặt tên cho Frame: name = “Tên Frame”.
Thêm thuộc tính Target cho các siêu liên kết cần nạp vào trang
Frame.
5. Một số Target:
Target = “_blank”: Kết nối một liên kết tới một trang mới.
Target = “_parent”: Kết nối một liên kết tới cha của cửa sổ hiện
tại.
Target = “_self”: Nạp một liên kết tại cửa số chứa liên kết này.
Target = “_top”: Tài liệu được nạp vào phần frame của cửa sổ,
tạo ra một trang Web không dùng frame.
67
Bài 6. FORM
1. Giới thiệu.
2. Cấu trúc:
3. Các phần tử Form.
4. Điều khiển các phần tử.
68
1. Giới thiệu.
Form dùng để nhận thông tin từ người sử dụng hay phản hồi
thông tin về người sử dụng. Người sử dụng có thể có các yêu
cầu:
Gõ vào câu trả lời, ý kiến.
Chọn câu trả lời từ danh sách.
Chọn câu trả lời từ một hoặc một số tùy chọn.
Dữ liệu sẽ được gửi đến WebServer và được xử lý, sau đó có thể
trả kết quả về cho người sử dụng.
69
2./ Cấu trúc Form
<form method=“Cách gửi" action=“URL của Script“

name=“tên”>
<!--Các phần tử Form -- >
</form>
Trong đó:
Method: nhận một trong 2 giá trị: POST, GET
Action: URL của Script xử lý dữ liệu cho
FORM.
70
3./Một số phần tử form
Các phần tử nhập liệu.
Các phần tử chọn lựa.
Các phần tử nút nhấn.
Một số phần tử khác.
71
3.1/ Các phần tử nhập liệu.
Ý nghĩa:
Cấu trúc:
<input type=“loại phần tử” name=“tên” value = “giá trị”
size=n maxlength = n>
Trong đó:
 “Loại phần tử”: text  textbox.
 password ptử password.
 Name: tên của phần tử.
 Value: Giá trị khởi tạo.
 Size: chiều dài phần tử.
 Maxlength: chiều dài tối đa của dữ liệu nhập.
Ví dụ:
72
3.2/ Các phần tử nút nhấn.
Ý nghĩa:
Cấu trúc:
<input type=“loại phần tử” name=“tên” value =“giá trị”>
Trong đó:
 Type: loại phần tử có các giá trị sau.
o Button:
o Submit:
o Reset:
 Name: tên phần tử.
 Value: dòng chữ hiển thị trên pt.
Ví dụ:
73
3.2/ Các phần tử chọn lựa.
Ý nghĩa:
Cấu trúc:
<input type=“loại phần tử” name=“tên” value=“giá trị”
checked>
Trong đó:
 Type “loại phần tử”:Checkbox;
Radio
 Name: tên phần tử.
 Value: giá trị của phần tử.
 Checked: mặc định chọn/ không chọn
 Ví dụ:
74
3.2/ Các phần tử khác.
 ListBox.
 Text area.
 Phần tử Label.
75
ListBox
Cấu trúc:
<select name=tên sise=n multiple>
<option selected value=“giá trị 1”>Văn bản 1
..
</select>
Trong đó:
o <select>: bắt đầu của một ListBox
o <option>: đầu mỗi dòng trong
listBox.
o Multiple: cho phép chọn nhiều hàng.
o Selected: mặc định chọn.
o Size: số hàng hiển thị.
76
TextArea:
Cấu trúc:
<Textarea cols=m rows = n>value
</Textarea>
Trong đó:
 Cols: số ký tự một dòng.
 Rows: số dòng.
 Name: tên của phần tử.
77
3. Một số phần tử form
3.1. TEXTAREA
<TextArea Name =“Tên của TextArea" ROWS = “Số dòng” cols = “Số cột”>
</TextArea>
3.2. TEXTBOX
<INPUT TYPE = “TEXT” NAME = “Tên TextBox” Size = “Chiều rộng”
MaxLength = “chiều dài tối đa”>
Ví dụ:
<html>
<body>
<form>
First name:
<input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
78
</html>
3.3. Password
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field,
the browser displays asterisks or bullets instead of the
characters.
</p>
</body>
</html> 79
3.4. CheckBox
<html>
<body>
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
80
3.5. Radio
Radio Button được thiết kế cho phép người sử dụng lựa chọn một
trong các tùy chọn được định trước. Giá trị thuộc tính NAME
phải giống nhau và giá trị VALUE phải khác nhau.
<html>
<body>
<form>
<input type="radio" checked name=“Computer" value=“P">
Pentium<br>
<input type="radio" name=“Computer" value=“4"> 486
<br>
<input type="radio" name=“Computer"
value=“M">Macintosh<br>
<input type="radio" name=“Computer" value=“O">Other…
<br>
</form>
</body>
81
</html>
3.6. Button
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
3.7. Reset và Submit Button

<INPUT TYPE = “RESET”>
<INPUT TYPE = “RESET” VALUE =“Reset Form”>
<INPUT TYPE = “SUBMIT”>
<INPUT TYPE = “SUBMIT” value = “Send…”>
82
Ví dụ:
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password"><br>
<input type="reset" value="reset">
<input type="submit" value="Submit">
</form>
</body>
</html>
83
3.8. ComboBox và ListBox
<html>
<body>
<form>
<select name="cars” size =3 Multiple>
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
84

Slide HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slide HTML

Uploaded by

Copyright:

Available Formats

THIẾT KẾ WEB

Giảng viên: Nguyễn Đức Cương

Khoa CNTT- Trường Đại Học Công Nghiệp

Các khái niệm cơ bản:

1. Định dạng chung của các tài liệu HTML.

 Trình soạn thảo đơn giản: NotePad,

Một số thao tác trong IE

Có 2 lọai tag cơ bản: Containter tag (thẻ mang thông tin) và

2.2/ Tag <p>

 width = “n (px) | x %”: Độ rộng bằng Pixel hay tỉ lệ % của

 shade/Noshade: Tạo bóng/ Không tạo bóng.

 color = “#rrggbb”: Màu đường kẻ ngang.

 Ví dụ: <hr color="#FF0000" width="80%" size="4" noshade

Có 2 loại danh sách: Có thứ tự và không thứ tự:

Danh sách có thứ tự:

Định dạng tổng quát.

Theo hàng: <td rowspan=n> dữ liệu</td>

 Các bảng có thể lồng nhau

1.1/ Giới thiệu.

 Name: Tên khung.

<Noframes> Nội dung hiển thị </Noframes>

<form method=“Cách gửi" action=“URL của Script“

3.7. Reset và Submit Button

You might also like