Bài giảng Thiết kế web: Chương 2 - Trường ĐH Thủ Dầu Một
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 (1.41 MB, 13 trang )
TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT
NỘI DUNG
KHOA KỸ THUẬT - CƠNG NGHỆ
1. Khái niệm
2. Cơng dụng của HTML
THIẾT KẾ WEB
3. Tập tin định dạng HTML
4. Căn bản về thẻ
Chương 2
NGÔN NGỮ HTML
(HyperText Markup Language)
Phone: 0274. 3834930
5. Cấu trúc cơ bản của trang Web
6. Các thẻ định dạng khối
Website:
18/01/2019
1. HTML là gì?
Bài giảng Thiết kế Web
2
2. Cơng dụng của HTML
Thiết kế được nội dung và hình thức của trang Web.
HTML là ngôn ngữ để xuất bản siêu văn bản trên
World Wide Web.
HTML là ngôn ngữ xác định cấu trúc của thơng tin.
Nó sử dụng một loạt các thẻ và thuộc tính, được dùng
để hiển thị văn bản và các thông tin khác và cung cấp
siêu liên kết tới các tài liệu web khác
18/01/2019
Bài giảng Thiết kế Web
3
Xuất bản các tài liệu trực tuyến hay truy xuất các
thông tin trực tuyến bằng cách dùng các liên kết được
chèn vào trang Web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các
thông tin về người dùng, quản lí các giao dịch…
Thêm vào trang Web các đối tượng âm thanh, hình
ảnh, video…
18/01/2019
Bài giảng Thiết kế Web
4
3. Tập tin định dạng HTML
4. Căn bản về thẻ (Tag)
Là tập tin có phần mở rộng là .htm hay .html.
Các lệnh trong HTML được gọi là các thẻ. Các thẻ
Là tập tin văn bản thuần túy, có chứa các mã đặc biệt
gọi là Tag (thẻ), thường được đặt xung quanh một
khối văn bản nào đó.
Có thể được viết trên trình soạn: Microsoft
Frontpage, Adobe Dreamweaver, Notepad,…
18/01/2019
Bài giảng Thiết kế Web
5
này giúp định dạng, điều khiển nội dung và hình thức
trình bày của một trang Web.
Cú pháp tổng qt của 1 thẻ:
• hoặc đơn giản nhất là: <tên_thẻ>Chuỗi văn
bản</tên_thẻ>
Vd: <title> Trang Web dau tien cua toi </title>
Tên thẻ không phân biệt chữ hoa/thường.
18/01/2019
Bài giảng Thiết kế Web
6
1
5. Cấu trúc cơ bản của trang Web
5. Cấu trúc cơ bản …
5.1 HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu
HTML, tức là nó có sử dụng các thẻ HTML để trình bày.
Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Cú pháp:
<html>
... Toàn bộ nội của tài liệu được đặt ở đây
</html>
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <html>
như những tệp tin văn bản bình thường.
<html>
<head>
<title>Tiêu đề của tài liệu</title>
</head>
<body các thuộc tính nếu có>
... nội dung của tài liệu
</body>
</html>
18/01/2019
Bài giảng Thiết kế Web
7
18/01/2019
5. Cấu trúc cơ bản …
Bài giảng Thiết kế Web
8
5. Cấu trúc cơ bản …
5.2 HEAD
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:
<head>
... Phần mở đầu (HEADER) của tài liệu được đặt ở đây
</head>
5.3 TITLE
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài
liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp
thẻ <HEAD>.
Cú pháp:
<title>Tiêu đề của tài liệu</title>
Cặp thẻ: <title> định nghĩa những gì sẽ được thể hiện trên
thanh tiêu đề của trình duyệt.
18/01/2019
Bài giảng Thiết kế Web
9
18/01/2019
5. Cấu trúc cơ bản …
Bài giảng Thiết kế Web
10
5. Cấu trúc cơ bản …
5.4 BODY
Thẻ này được sử dụng để xác định phần nội dung chính của
tài liệu - phần thân (body) của tài liệu. Trong phần thân có
thể chứa các thông tin định dạng nhất định để đặt ảnh nền
cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho
trang tài liệu... Những thông tin này được đặt ở phần tham số
của thẻ.
Cú pháp:
<body các thuộc tính nếu có>
.... phần nội dung của tài liệu được đặt ở đây
</body>
18/01/2019
Bài giảng Thiết kế Web
11
Một số thuộc tính chính:
background= : Đặt một ảnh nào đó làm ảnh nền (background)
cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là
URL của file ảnh.
bgcolor= : Đặt mầu nền cho trang khi hiển thị. Nếu cả hai
tham số background và bgcolor cùng có giá trị thì trình duyệt
sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên.
text= : Xác định màu chữ của văn bản, kể cả các đề mục.
alink=,vlink=,link=: Xác định màu sắc cho các siêu liên kết
trong văn bản. Tương ứng, alink là liên kết đang được kích
hoạt - tức là khi đã được kích chuột lên; vlink chỉ liên kết đã
từng được kích hoạt;
18/01/2019
Bài giảng Thiết kế Web
12
2
5. Cấu trúc cơ bản …
5. Cấu trúc cơ bản …
Một số thuộc tính chính (tt):
Ví dụ 1: Mở Notepad và gõ vào nội dung như sau:
Leftmargin=“n”
Topmargin=“n”
Rightmargin=“n”
Bottommargin=“n”
Thiết lập lề cho trang, với giá trị n có đơn vị tính là pixel
Chú ý:
Chọn Font chữ và kiểu gõ Unicode để hiển thị được tiếng việt
18/01/2019
Bài giảng Thiết kế Web
13
5. Cấu trúc cơ bản …
14
Ví dụ 1: Chạy file Vd1.html với trình duyệt IE ta được kết
Khi lưu phải chọn mục Unicode ở phần Encoding.
Bài giảng Thiết kế Web
quả như sau:
15
5. Cấu trúc cơ bản …
18/01/2019
Bài giảng Thiết kế Web
16
Bài giảng Thiết kế Web
18
5. Cấu trúc cơ bản …
Ví dụ 3:
Ví dụ 2:
18/01/2019
Bài giảng Thiết kế Web
5. Cấu trúc cơ bản …
Lưu tập tin này lại với tên Vd1.html
18/01/2019
18/01/2019
Bài giảng Thiết kế Web
17
18/01/2019
3
6. Các thẻ định dạng khối
6.1. Các thẻ định dạng văn bản
6.1. Các thẻ định dạng văn bản
Thẻ
Để ngắt dòng tạo đoạn mới, tạo dòng trống:
Ý nghĩa
<b> ... </b>
In chữ đậm
<i> ... </i>
In chữ nghiêng
<u> ... </u>
In chữ gạch chân
<sup> ... </sup>
Định dạng chỉ số trên (SuperScript)
<sub> ... </sub>
Định dạng chỉ số dưới (SubScript)
Đặt văn bản trong cặp thẻ
...
Để ngắt dịng khơng tạo đoạn mới:
Chèn thẻ
tại vị trí muốn ngắt dịng.
Đặt câu ghi chú vào cặp thẻ
...
Một đoạn văn
Xuống dịng (khơng có )
color=color>…</font>
Chỉ định font, size, màu văn bản.
size=n: n từ 1 đến 7 (8,10,14,16,24,36),
mặc định là 3
color=color: màu văn bản
face=name: tên font
canh giữa
18/01/2019
Bài giảng Thiết kế Web
<!-- Câu chú thích-->
Nội dung câu chú thích khơng hiển thị trên trình duyệt
19
18/01/2019
Bài giảng Thiết kế Web
6.1. Các thẻ định dạng văn bản
6.1. Các thẻ định dạng văn bản
Ví dụ:
<html>
<head><title>Thu dinh dang van ban</title></head>
<Body>
<font size=4 color=red> ĐOẠN NÀY CĨ CÁC DỊNG:<BR>
<b>Dịng này đậm</b>
<i>Dòng này nghiêng</i>
<u>Dòng này gạch dưới</u>
<b><i>Dòng này vừa đậm vừa nghiêng</i></b> </font>
Giải và biện luận PT: aX<sup>2</sup>+bX+c=0
Cơng thức hố học: H<sub>2</sub>SO<sub>4</sub>
<font size=7> Đoạn này chữ lớn quá</font>
</Body> </html>
Ví dụ:
18/01/2019
Bài giảng Thiết kế Web
21
18/01/2019
6.2. Các thẻ định dạng danh sách
Bài giảng Thiết kế Web
20
22
6.2. Các thẻ định dạng danh sách
Danh sách không đánh số thứ tự
Danh sách có đánh số thứ tự
<ol>
<ul>
<li> Mục 1 của danh sách </li>
<li> Mục 2 của danh sách </li>
.......
<li> Mục n của danh sách </li>
<li> Mục 1 của danh sách </li>
<li> Mục 2 của danh sách </li>
.......
<li> Mục n của danh sách </li>
</ol>
</ul>
Thay đổi kiểu dáng cho chỉ mục
<ol Type=Trị> Kiểu STT cho toàn văn bản danh sách
<li Type= Trị> Kiểu STT cho 1 mục
Trị: 1,a,A,i,I tương ứng 1,2,3...; a,b,c...; A,B,C...; i,ii,iii...; hoặc
Thay đổi kiểu dáng cho chỉ mục
<ul Type=Trị thuộc tính>: Áp dụng cho tất cả các mục
<li Type= Trị thuộc tính>: Áp dụng cho 1 mục chỉ định
I,II,III...
Các trị thuộc tính: Disc: Dấu trịn đen (Mặc định), square:
Hình vng đen đặc, Circle: Hình trịn rỗng
18/01/2019
Bài giảng Thiết kế Web
23
18/01/2019
Bài giảng Thiết kế Web
24
4
6.2. Các thẻ định dạng danh sách
6.2. Các thẻ định dạng danh sách
Danh sách có đánh số thứ tự (tt)
Danh sách có đánh số thứ tự (tt)
CHƯƠNG TRÌNH ĐÀO TẠO NGÀNH WEBSITE
Chỉ định giá trị khởi đầu
<ol type="I">
<ol Start=Trị>: Tác động tất cả các mục
trong danh sách trừ khi mục trong dánh
sách chỉ định khác
<li Value = Trị>: Tác động mục chỉ
định và các mục sau đó nếu các mục này
khơng chỉ định khác.
<li><b> THIẾT KẾ WEBSITE </b>
<ol type = “1">
<li> Ngôn ngữ HTML và CSS </li>
<li> Ngôn ngữ kịch bản JavaScript </li>
<li> Thiết kế giao diện PhotoShop </li>
<li> Thiết kế WebSite Dreamweaver </li>
</ol>
<li><b> LẬP TRÌNH WEBSITE </b>
<ol type = "1">
<li> Phân tích và Thiết kế
CSDL </li>
<li> Lập trình CSDL
ASP.NET và SQL Sever </li>
<li> Quản trị Website </li>
</ol>
</ol>
18/01/2019
Bài giảng Thiết kế Web
25
18/01/2019
6.2. Các thẻ định dạng danh sách
Bài giảng Thiết kế Web
26
6.2. Các thẻ định dạng danh sách
Thẻ xác định danh sách (có đề mục và mô tả đề mục) là
một bộ gồm 3 thẻ:
<dl></dl> viết tắt của chữ "definition list" có nghĩa là sự
xác định (hay định nghĩa) danh sách.
<dt></dt> viết tắt của chữ "defines an item" có nghĩa là
xác định (hay định nghĩa) một mục.
<dd></dd> viết tắt của chữ "defines describe an item" có
nghĩa là xác định (hay định nghĩa) một mô tả của một mục.
18/01/2019
Bài giảng Thiết kế Web
27
6.2. Các thẻ định dạng danh sách
18/01/2019
Bài giảng Thiết kế Web
6.3. Các thẻ định dạng đề mục
Văn bản nằm trong các thẻ đề mục sẽ có cỡ chữ từ lớn
Danh sách (có đề mục và mơ tả đề mục)
đến nhỏ giảm dần từ đề mục 1 đến đề mục 6
...
...
...
...
...
...
18/01/2019
Bài giảng Thiết kế Web
28
29
18/01/2019
Định dạng đề mục cấp 1
Định dạng đề mục cấp 2
Định dạng đề mục cấp 3
Định dạng đề mục cấp 4
Định dạng đề mục cấp 5
Định dạng đề mục cấp 6
Bài giảng Thiết kế Web
30
5
6.4. Thẻ canh lề văn bản
6.4. Thẻ canh lề văn bản
Thuộc tính canh lề align được sử dụng để canh lề cho
các phần tử HTML trong trang Web như văn bản, hình
ảnh…Thuộc tính này được đặt trong các thẻ như
,
<hi>, <hr>, <body>,<img>,…
Các giá trị cho tham số align=left (Canh lề trái),
center (Canh giữa), right (Canh lề phải)
18/01/2019
31
Bài giảng Thiết kế Web
6.5. Vẽ một đường thẳng nằm ngang
= left / center / right
color
= color
noshade
size = n
width
= width
/>
Không có thẻ </hr>
Vẽ đường thẳng với lề, màu, có bóng hay khơng, độ dày
(size) và chiều dài (width).
33
Bài giảng Thiết kế Web
Bài giảng Thiết kế Web
Màu:
Để xác lập màu có thể dùng Tên màu hay Trị thập lục phân tương
ứng
18/01/2019
Bài giảng Thiết kế Web
6.6. Sử dụng màu và ký tự đặc biệt
6.7. Thẻ chèn âm thanh, hình ảnh
Ký tự đặc biệt:
a. Chèn hình ảnh:
Cú pháp:
Nhập Mã tên hay Mã số của ký tự tương ng
Ký t
Mó tờn
Mó s
â
©
©
TM
™
™
đ
®
®
Ký t
Mó tờn
"e;
Khong trng
32
6.6. S dng màu và ký tự đặc biệt
Cú pháp:
18/01/2019
18/01/2019
34
Vị trí văn bản bao quanh ảnh
alt
= text
Văn bản hiển thị khi hình khơng
border= n
thể hiển thị
src
= url
Độ
rộng đường viền quanh ảnh
width = width
Đường dẫn file ảnh
height = height
Kích thước hiển thị ảnh
hspace = hspace
vspace = vspace
Khoảng trống xung quanh ảnh
title
= title
Văn bản hiển thị khi rê chuột lên
Mã số
"
ảnh
18/01/2019
Bài giảng Thiết kế Web
35
18/01/2019
Bài giảng Thiết kế Web
36
6
6.7. Thẻ chèn âm thanh, hình ảnh
6.7. Thẻ chèn âm thanh, hình ảnh
b. Chèn video:
c. Nhúng video vào trang Web:
Cú pháp:
Cú pháp:
width="320" height="180" muted loop preload="auto"></video>
src=" frameborder="0"
allowfullscreen></iframe>
Autoplay: thuộc tính quy định với trình duyệt đoạn video sẽ được
chơi ngay khi trang được load
Control: Hiển thị trình điều khiển video trên trình duyệt
Poster: thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu
của video
Width, height: thuộc tính chỉ định kích thước của video
Muted: thuộc tính này cho phép tắt tiếng của video.
Loop: thuộc tính này sẽ kích hoạt đoạn video phát lại
Preload: cho phép tải đoạn video ngay khi tải trang web, giảm thời
gian tải video
width, height: thuộc tính chỉ định kích thước của video
src: Đường link của video.
frameborder: đường viền quanh video
allowfullscreen: cho phép xem video ở chế độ đầy màn hình.
Minh họa
18/01/2019
37
Bài giảng Thiết kế Web
6.7. Thẻ chèn âm thanh, hình ảnh
Minh họa
18/01/2019
38
Bài giảng Thiết kế Web
6.8. Thẻ định dạng bảng
e. Chèn âm thanh:
Cú pháp:
Bảng là một cấu trúc gồm nhiều hàng giao với nhiều cột là kỹ thuật
trình bày các thành phần trên trang web (Thiết kế bố cục trang web).
Cú pháp:
<table><caption> Nội dung tiêu đề bảng </caption>
<tr> <!-- tạo hàng-->
<th>nội dung tiêu đề cột 1</th> <!-- tạo ô tiêu đề cột-->
<th>nội dung tiêu đề cột 2</th>
....
</tr>
<tr>
<td>nội dung ơ 1 dịng 1 </td> <!-- tạo ơ -->
<td>nội dung ơ 2 dịng 1 </td>
....
</tr>
.......
</table>
preload="auto"> </audio>
<audio controls>
<source src=‘video/BigBuck.ogg’>
<source src=‘video/BigBuck.mp3’>
</audio>
Minh họa
18/01/2019
Bài giảng Thiết kế Web
39
18/01/2019
40
Bài giảng Thiết kế Web
6.8. Thẻ định dạng bảng
6.8. Thẻ định dạng bảng
Định dạng Table
Tạo đường viền.
Định dạng Table
Xác lập màu, ảnh nền cho bảng, hàng, ơ
<table border=n bordercolor=“trị màu”>
.......
</table>
Thuộc tính
Thiết lập độ rộng, chiều cao và canh lề bảng
<table width=n height=n alight= “center” / ”left”/ ”right” >
.......
</table>
n: Độ rộng, chiều cao cố định tính bằng pixel Hoặc % kích
thước cửa sổ .
“Center” / ”Left”/ ”Right”: Canh giữa, Canh trái, Canh phải
cửa sổ trình duyệt, văn bản sẽ cuộn quanh bảng.
18/01/2019
Bài giảng Thiết kế Web
41
Ý nghĩa
<table bgcolor=“trị”>
Màu nền cho toàn bảng
<table background=“image.gif”>
Ảnh nền cho toàn bảng
<tr bgcolor=“trị”>
Màu nền cho toàn hàng
<tr background=“image.gif”>
Ảnh nền cho toàn hàng
<td bgcolor=“trị”>
Màu nền cho ô
<td background=“image.gif”>
Ảnh nền cho ô
<th bgcolor=“trị”>
Màu nền cho ô tiêu đề
<th background=“image.gif”>
Ảnh nền cho ô tiêu đề
18/01/2019
Bài giảng Thiết kế Web
42
7
6.8. Thẻ định dạng bảng
6.8. Thẻ định dạng bảng
Định dạng Table
Định dạng ô
Định dạng Table
Trộn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ TD, TH
Thuộc tính
Ý nghĩa
<td align=“hướng”>
Canh theo chiều ngang: Left, Right, Center
<td valign=“hướng”>
Canh theo chiều dọc: Top, Bottom, Middle
<th align=“hướng”>
Canh hàng tiêu đề theo chiều ngang
<th valign=“hướng”>
Canh hàng tiêu đề theo chiều dọc
<tr align=“hướng”>
Canh theo chiều ngang các ô trong hàng
<tr valign=“hướng”>
Canh theo chiều dọc các ơ trong hàng
Thuộc tính
<td rowspan=“n”>
Ý nghĩa
Tạo ơ có độ cao n hàng
<td colspan=“n”>
Tạo ơ có độ rộng n cột
<th rowspan=“n”>
Tạo ơ tiêu đề có độ cao n hàng
<th colspan=“n”>
Tạo ô tiêu đề có độ rộng n cột
CellSpacing=“n” Khoảng cách giữa các ô.
CellPadding=“n” Khoảng cách quanh nội dung ô Pixel.
18/01/2019
43
Bài giảng Thiết kế Web
6.8. Thẻ định dạng bảng
45
Bài giảng Thiết kế Web
18/01/2019
Bài giảng Thiết kế Web
46
6.10. Thẻ tạo liên kết
Khái quát
Các siêu liên kết (Hyper Link) là cốt lõi của tập tin HTML
Loop=n1
cho phép truy cập đến các trang khác trên cùng máy tính
hay ở máy tính khác.
Tài liệu liên kết có thể là các tập tin: Hình ảnh, âm thanh,
Multimedia, HTML . . . Khi Click vào liên kết sự truy cập
tại địa chỉ truy cập sẽ thực hiện tự động
ScrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu” >
Chuỗi văn bản chạy
</marquee>
Hiệu ứng:
Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia
Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia
Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia
Hướng: Left, Right, Up, Down Hướng bắt đầu
n1: Số lần lặp
n2: Khoảng cách(Pixel) giữa mỗi lần lặp
n3: Thời gian chờ giữa mỗi lần lặp.
18/01/2019
44
Ví dụ:
6.9. Thẻ di chuyển văn bản
Behavior=“Hiệu ứng”
Bài giảng Thiết kế Web
6.8. Thẻ định dạng bảng
Ví dụ:
18/01/2019
18/01/2019
Bài giảng Thiết kế Web
Cú pháp:
<a href=url name= name title=title>
... siêu văn bản
</a>
href
name
title
47
18/01/2019
Địa chỉ của trang web được liên kết, hay tên một bookmark nào đó.
Đặt tên cho bookmark.
Văn bản hiển thị khi di chuột trên siêu liên kết.
Bài giảng Thiết kế Web
48
8
6.10. Thẻ tạo liên kết
6.10. Thẻ tạo liên kết
Liên kết cục bộ (Local Link)
Là liên kết đến các tài liệu Trên cùng máy .
Là liên kết đến tài liệu lưu trữ trên máy khác. Liên kết đến 1 địa chỉ
Liên kết từ xa (Remote Link)
URL
<a href =“Địa chỉ liên kết”> Nhãn liên kết </a>
<A HREF =“http://URL”>
Nhãn liên kết </A>
VD: <A HREF =“”> Website tin tức VN</A>
VD: <a href =“Gioithieu.html”>Giới thiệu</a>
Liên kết đến 1 địa chỉ Email
<A HREF =“Mailto: Địa chỉ Email”>Nhãn liên kết </A>
VD:<A HREF =“Mailto:”>Gởi Mail</A>
Sẽ mở chương trình mail mặc định để soạn và gửi thư.
Dùng hình ảnh làm nhãn liên kết.
<A HREF=“http://URL”><Img Src=“Tập tin ảnh”></A>
Mở liên kết trong 1 cửa sổ riêng.
Target=“_Blank”>Nhãn liên kết </A>
Đến 1 vị trí trên cùng trang Web
<a href =“#danh_dau”>Nhãn liên kết </a>
Khai báo đích đến: <a name =“danh_dau”> . . . </a>
Ghi chú: Tên đích ở bất cứ vị trí nào trên cùng tập tin.
Đến 1 vị trí trên trang web khác:
<a href = "Gioithieu.html#name”> Text </a>
Minh họa
18/01/2019
Bài giảng Thiết kế Web
49
18/01/2019
Bài giảng Thiết kế Web
50
6.10. Thẻ tạo liên kết
6.11. Các thẻ FORM
Ví dụ:
Các HTML Form có thể có các hộp văn bản, hộp danh sách
lựa chọn, nút bấm, nút chọn...
a. Tạo Form
target= frame_name/_blank/_self >
<!-- các phần tử điều khiển của form được đặt ở đây -->
<input ...>
</form>
action
method
name
target
18/01/2019
Bài giảng Thiết kế Web
51
6.11. Các thẻ FORM
18/01/2019
Bài giảng Thiết kế Web
52
6.11. Các thẻ FORM
Dạng 1: Chỉ trình bày khơng gửi dữ liệu
<Form Name=Tên>
Các đối tượng trong Form
</Form>
Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail
<Form Name=Tên Method=Post Action=”Mailto:ĐC mail”>
Các đối tượng trong Form
</Form>
Dạng 3: Thông tin từ Form chuyển lên Webserver
<Form Name=Tên Method=Post Action=”Trang xử lý”>
Các đối tượng trong Form
</Form>
18/01/2019
Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một
chương trình CGI, một trang ASP...).
Phương thức gửi dữ liệu.
Tên của form.
Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.
Bài giảng Thiết kế Web
fieldset
<fieldset>
<legend> Thông tin cá nhân</legend>
<label>First name:<input type="text” name="firstname"> </label>
</fieldset>
Là thành phần khơng bắt buộc
Để nhóm các phần tử form trên trang
Kết hợp với thành phần <legend> để thêm tiêu đề cho form
53
18/01/2019
Bài giảng Thiết kế Web
54
9
6.11. Các thẻ FORM
6.11. Các thẻ FORM
Label:
Đặt các đối tượng cho phép người sử dụng nhập dữ liệu trên
<label>First name:<input type="text” name="firstname"> </label>
trang web (như hộp văn bản, ô kiểm tra, nút bấm...).
<label>Last name:<input type="text” name="lastname"> </label>
Cú pháp thẻ INPUT:
type = button | checkbox | file | image | password | radio | reset |
submit | text
value = “value” name=“name”>
Là thành phần không bắt buộc
Tăng khả năng truy cập cho form
18/01/2019
Bài giảng Thiết kế Web
55
18/01/2019
Bài giảng Thiết kế Web
6.11. Các thẻ FORM
6.11. Các thẻ FORM
Hộp nhập văn bản 1 dòng (Oneline Textbox)
Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật
khẩu
Thẻ: <input>
Thuộc tính:
Hộp nhập văn bản 1 dịng (Oneline Textbox)
Ví dụ:
name=“tên_đt”: quan trọng
type=“text”:Ơ nhập văn bản thường
type=“password”: ơ nhập mật khẩu
value=“giá trị mặc định”
maxlength=”m”: Số ký tự tối đa có thể nhập
size=“n”: Chiều dài tính bằng số ký tự
required: Bắt buộc phải nhập thông tin vào.
placeholder=“text”: Văn bản hiển thị khi chưa nhập thông tin
18/01/2019
Bài giảng Thiết kế Web
56
<form>
ĐĂNG NHẬP DIỄN ĐÀN
Tên đăng nhập: <input type="text" size="20">
Mật khẩu: <input type="password" size="20">
<input type="submit" value="Đăng nhập">
<input type="reset" value="Phục hồi">
</form>
57
18/01/2019
Bài giảng Thiết kế Web
6.11. Các thẻ FORM
6.11. Các thẻ FORM
Checkbox
Option Button (Radio Button)
Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được
Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.
58
Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.
đưa ra bằng cách đánh dấu (“tích”).
Thẻ <input>: Mỗi ô cần 1 thẻ
Thẻ <input>: mỗi ô nhập cần 1 thẻ
Thuộc tính:
Thuộc tính:
name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm.
name=“tên_đt”: quan trọng
type=“radio”
type=“checkbox”
value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ơ này.
value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn
checked: nếu có thì nút này mặc định được chọn
ơ này.
checked: nếu có thì nút này mặc định được chọn
18/01/2019
Bài giảng Thiết kế Web
59
18/01/2019
Bài giảng Thiết kế Web
60
10
6.11. Các thẻ FORM
6.11. Các thẻ FORM
Thêm các kiểu <input> mới:
Nút lệnh (Button)
Sử dụng để NSD ra lệnh thực hiện cơng việc.
Trên web có 3 loại nút:
submit: Tự động ra lệnh gửi dữ liệu
reset: đưa mọi dữ liệu về trạng thái mặc định
normal: người lập trình tự xử lý
Thẻ: <input>
Thuộc tính:
name=“tên_ĐT”: thường không quan trọng
type=“submit”: nút submit
type=“reset”: nút reset
type=“button”: nút thơng thường (normal), ít sử dụng.
value=“tiêu đề nút”
Có thể dùng:
<button Type=“Submit”> <img src=“ảnh”> </button>
Để tạo nút lệnh.
18/01/2019
Bài giảng Thiết kế Web
61
Thêm các kiểu <input> mới:
search
range
datetime
date
color
url
month
tel
week
number
time
18/01/2019
Bài giảng Thiết kế Web
62
Thêm các kiểu <input> mới:
<input type=“search” name=“search">
required>
<input type=“url” name=“url" required>
18/01/2019
Bài giảng Thiết kế Web
63
Thêm các kiểu <input> mới:
18/01/2019
Bài giảng Thiết kế Web
64
Thêm các kiểu <input> mới:
min=“5” max=“18” step=“1”>
id=“tel” required>
18/01/2019
Bài giảng Thiết kế Web
65
18/01/2019
Bài giảng Thiết kế Web
66
11
Thêm các kiểu <input> mới:
Thêm các kiểu <input> mới:
max=“100”>
id=“dob”>
18/01/2019
Bài giảng Thiết kế Web
67
Thêm các kiểu <input> mới:
18/01/2019
Bài giảng Thiết kế Web
68
6.11. Các thẻ FORM
Combo Box (Drop-down menu)
Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1 phần tử được
chọn
id=“color”>
NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên
bên phải hộp danh sách.
Thẻ tạo hộp danh sách:
<select>Danh sách phần tử</select>
Thuộc tính:
name=“tên_ĐT”: quan trọng
Thẻ tạo 1 phần tử trong danh sách:
<option>Tiêu đề phần tử</option>
Thuộc tính:
value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn
selected: nếu có thì phần tử này mặc định được chọn
Ghi chú: Để thực hiện liên kết khi người dùng chọn 1 giá trị từ
ComboBox. Thêm thuộc tính sau vào thẻ <Select>
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
18/01/2019
Bài giảng Thiết kế Web
69
6.11. Các thẻ FORM
18/01/2019
Bài giảng Thiết kế Web
70
6.11. Các thẻ FORM
Combo Box (Drop-down menu)
Ví dụ:
Listbox
<form name=links>
Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần
liên kết website
tử cùng lúc, có thể lựa chọn nhiều phần tử
Thẻ: <select>…</select>
<option selected>-------- Tin tuc ---------</option>
Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác:
<Option value=“”>Tin Việt Nam</option>
size=“số dòng”
<option value=“”>Báo lao động</option>
multiple: cho phép lựa chọn nhiều phần tử cùng lúc
<option value=“”>Báo Tuổi Trẻ</option>
Thẻ <option>…</option> tương tự của combo box
</select>
</form>
18/01/2019
Bài giảng Thiết kế Web
71
18/01/2019
Bài giảng Thiết kế Web
72
12
6.11. Các thẻ FORM
6.12. Các thẻ cấu trúc trang
Hộp nhập văn bản nhiều dòng (TextArea)
Thẻ:
<textarea>
Nội dung mặc định
</textarea>
Thuộc tính:
<header>
<nav>
<article>
<section>
name=“tên_ĐT”: quan trọng
cols=“số cột”
<section>
rows tính theo số dịng văn bản,
cols tính theo số ký tự chuẩn trên dòng.
18/01/2019
<aside>
<section>
rows=“số dòng”
Bài giảng Thiết kế Web
<footer>
73
6.12. Các thẻ cấu trúc trang
18/01/2019
74
Bài giảng Thiết kế Web
6.12. Các thẻ cấu trúc trang
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<section id="layout">
<header>
</header>
<nav>
</nav>
<article>
<section id="content">
</section>
<aside>
</aside>
</article>
<footer>
</footer>
</section>
</body>
</html>
Minh họa
18/01/2019
Bài giảng Thiết kế Web
75
18/01/2019
Bài giảng Thiết kế Web
76
6.12. Các thẻ cấu trúc trang
Thẻ div:
<div id=“layout”>
Nội dung trong thẻ div
</div>
Tạo ra một khối
Thẻ span:
<span id=“định dạng font”>
Nội dung trong thẻ span
</span>
Không tạo khối,
Dùng để chèn một số định dạng css vào trong cùng một dòng.
18/01/2019
Bài giảng Thiết kế Web
77
Phone: 0274. 3834930
Website:
13
