PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối

Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN

E-mail: [email protected], [email protected]: 0987.257.504

Bài giảng

PHÁT TRIỂN ỨNG DỤNG WEB

Nội dung webBài 3

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Nội dung

• HTML • CSS• JavaScript• DOM• Sự phát triển: HTML5, CSS3


Web Browser

Mã nguồn trang web được thểhiện bằngHTML, CSSjavascript Web Browser

Do Web Servergửi tới.

Trình diễn trêngiao diện

người dùng

•Gửi yêu cầu và nhận nội dung (mã nguồn HTML, CSS, javascript) trang web từ Web Server.•Thông dịch mã nguồn trang web và trình diễn kết quả trên giao diện người dùng.


Nội dung web

• Một trang web bao gồm một tập các đối tượng tài liệu được

– khai báo bằng HTML– tổ chức lưu trữ theo cấu trúc DOM– định dạng hiển thị bởi CSS– quản lý bởi javascript

Quan tr ngọ


HTML: HyperText Markup Language

• Ngôn ngữ đánh dấu siêu văn bản.• Dùng để khai báo các đối tượng tài liệu

– Các đối tượng nội dung: Input text, text area, radio button, check box, list box, button, submit, hidden, hyperlink, text, image, …

– Các đối tượng định dạng: font, italic, bold, …


Các thẻ HTML• Các đối tượng tài liệu được khai báo bởi

các thẻ HTML• Thẻ đôi: <tenThe thuoctinh1=“giatri1”

thuoctinh2=“giatri2” …> Các đối tượng bên trong/con</tenThe>.

• Thẻ đơn: <tenThe thuoctinh1=“giatri1” thuoctinh2=“giatri2” …/>.

• Ví dụ:– <p> text text text </p>– <img src=“pic.png" />


Cấu trúc trang HTML

<!DOCTYPE html> <html>

<head><title> Tiêu đề </title><meta …><link …><script …>

</head><body>

Các đối tượng tài liệu được khai báo bởi các thẻ HTML 

</body>

</html>


Đặt bảng mã ký tự cho trang

<head> …<meta http-equiv="content-type"

content="text/html; charset=utf-8">

…</head>


Đặt logo trên thanh địa chỉ trình duyệt

<head> …<link rel="Shortcut Icon“ href =

“logo.ico" /> …</head>


Các thẻ định dạng văn bản

• Tạo đầu mục • Làm đậm, nghiêng, gạch chân, gạch

ngang• Thay đổi font chữ• Xuống dòng• Ngắt đoạn• Mũ trên, mũ dưới• Dấu cách• Ký tự đặc biệt


Tạo đầu mục: <hi> </hi>, i = 1, 2, …


Làm đậm: <b> </b>


Làm nghiêng: <i> </i>


Kết hợp nhiều thẻ: Thẻ lồng nhau


Gạch chân: <u> </u>


Gạch ngang: <s> </s>


Mũ trên <sup> </sup>


Mũ dưới: <sub> </sub>


Thay đổi font: <font> </font>

Kích thước font: -7, …, 7Màu chữ theo tên: red, green, blue, yellow, …

Màu chữ theo RGB: #rrggbb


Ngắt dòng: <br>


Tạo đoạn văn: <p> </p>


Ký tự đặc biệt: &name; &#code


Ký tự đặc biệt: &name; &#codeKý tự Mã chữ Mã số

< < <> > >& & &¢ ¢ ¢£ £ £¥ ¥ ¥€ € €§ § §© © ©® ® ®

™ ™ ™Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Ví dụ trang văn bản


Hiển thị ảnh: <img src = …>


Hiển thị audio/video: <embed>


Tạo đường kẻ ngang: <hr>


Danh sách có thứ tự <ol>


Danh sách không thứ tự <ul>


Danh sách định nghĩa <dl>


Tạo siêu liên kết: <a href=…></a>

<a href = "Default.htm"> Về trang đầu </a>


Tạo siêu liên kết: <a href = …></a>


Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>

• Tạo điểm đánh dấu<a name=“bookmark1”><a>

• Tạo liên kết đến điểm đánh dấu<a href=“#name”>Chuyển đến điểm

đánh dấu</a>


Tạo điểm đánh dấu và liên kết đến điểm dánh dấu <a name=…></a>

• Tạo điểm đánh dấu ở Trangmoi.htm<a name=“bookmark1”><a>

• Tạo liên kết đến điểm đánh dấu<a href=“trangmoi.htm#name”>Sang

trang mới và chuyển đến điểm đánh dấu trên trang mới</a>


Tạo bảng: <table>…</table>


Tạo bảng: Đường viền

Lê Đình Thanh, Bài giảng Lập trình web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Tạo bảng: Đường viền 1 nét


Tạo bảng: Tô màu


Tạo bảng: Căn lề chữ


Tạo bảng: Trộn cột






Tạo bảng: Trộn hàng


Tạo bảng: Bảng hoàn chỉnh


Tạo bảng: Cách chữ


Tạo điều khiển nút bấm


Tạo điều khiển nút kiểm


Tạo điều khiển radio


Tạo điều khiển ô chữ


Tạo điều khiển ô mật khẩu


Tạo điều khiển ô văn bản


Tạo điều khiển danh sách (đơn chọn)


Tạo điều khiển danh sách (đa chọn)


Tạo điều khiển nhãn


Tạo điều khiển upload tệp


Tạo điều khiển phân đoạn


Khoanh vùng có nhãn


Tạo điều khiển ẩn


Khung nội tại <iframe>

• Khung nội tại (iframe) cho phép nhúng các trang (con) trong trang (cha)


Khung nội tại <iframe>


Tạo tập khung (frameset)

• Frameset (tập khung) được sử dụng để chia màn hình client thành nhiều vùng khác nhau, mỗi vùng cho hiển thị một trang riêng.

• Ví dụ: Chia màn hình thành 2 frames theo chiều ngang

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0"> <frame src=“Defaut.htm"

name="topFrame" scrolling="NO" noresize >

<frame src=“Trang2.htm" name="mainFrame">

</frameset>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Tạo tập khung


Ví dụ: Sử dụng frameset để xây dựng cấu trúc trang

Banner trang web

Nội dung bản quyền

Các mụcchọn(menu)

Trang nội dung

Một cấu trúc trang điển hình


Sử dụng frameset để xây dựng cấu trúc trang

Banner trang web



Trang nội dung

Trước hết, chia màn hình thành 3 frames theo chiều ngang

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src="" name="topFrame" scrolling="NO" noresize> <frame src="" name="mainFrame">

<frame src="" name=“bottomFrame"></frameset>



Banner trang web



Trang nội dung

Tiếp theo, chia frame thứ 2 (giữa) thành hai frames theo chiều dọc

Lê Đình Thanh, Bài giảng Lập trình web.

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src="" name="topFrame" scrolling="NO" noresize> <frameset cols = “200, *” border = “0”>

<frame src = “” name = “menu”><frame scr = “” name = “noidung”>

</frameset><frame src="" name=“bottomFrame">

</frameset>



Banner trang web



Trang nội dung

Cuối cùng, đặt các trang vào các frames (thuộc tính src của frame)

Lê Đình Thanh, Bài giảng Lập trình web.

<frameset rows="80,*, 60" frameborder="NO" border="1" framespacing="0"> <frame src=“Top.htm" name="topFrame" scrolling="NO" noresize> <frameset cols = “200, *” border = “0”>

<frame src = “Menu.htm” name = “menu”><frame scr = “Noidung.htm” name = “noidung”>

</frameset><frame src=“Bottom.htm" name=“bottomFrame">

</frameset>


Tạo Form

• Một Form là một phân đoạn của trang web được sử dụng để quản lý các điều khiển web (các đối tượng tài liệu).

• Client muốn gửi các giá trị do người dùng nhập vào các điều khiển phải để các điều khiển này vào Form và đệ trình (submit) Form lên Server.

• Khi một Form được đệ trình lên Server, tất cả các điều khiển trên Form đó đều được đệ trình.

• Một trang web có thể có nhiều form khác nhau (thông thường chỉ cần sử dụng 1 form/trang)

– (:- Form giống như một con thuyền chở khách qua sông, bên bờ này là client, bên bờ kia là server. Các điều khiển là hành khách, muốn sang sông phải lên thuyền. Tất cả hành khách trên cùng chuyến thuyền sẽ được chở sang bờ server cùng lúc).


Tạo Form

Các thuộc tính của Form:- id: Định danh của form- Request method: GET/POST- Action: Trang được yêu cầu

khi đệ trình form- Các điều khiển trên form.

Sử dụng nút submit để đệ trình form


Tạo Form


Tạo Form


Tạo Form

file:///D:/Web_Vidu/Default.htm?hoten=Ho%C3%A0ng+B%C3%A1+Th%C3%A0nh&ngaysinh=12%2F10%2F1984&gt=on


Tạo Form


Tạo Form

Nhắc lại: Với phương thức POST, các tham số + giá trịđược đệ trình nhưng không được nối vào URL


Bảng định dạngCSS: Cascade Style Sheet


Lý do sử dụng CSS

• Nguyên lý Nhất quán trong thiết kế giao diện– Nhiều đối tượng cần được định dạng theo một kiểu thống nhất. Ví dụ,

tất cả các bảng có cùng một kiểu, tất cả các siêu liên kết có cùng một kiểu. Nhiều trang cần được dàn trang một cách thống nhất

• Nguyên lý W1U

n

– Kiểu định dạng cần được định nghĩa một lần và sử dụng nhiều lần, nhiều nơi.

• Nguyên lý tách biệt nội dung và trình diễn– Dùng HTML khai báo các đối tượng tài liệu (nội dung)– Dùng CSS để xác định cách trình diễn các đối tượng tài liệu


Bảng định dạng (Style Sheet - SS)

• Bộ chọn {thuộc tính: giá trị; thuộc tính: giá trị; …}– Bộ chọn theo kiểu phần tử HTML: tenLopHTML

● Chọn các đối tượng được khai báo bằng thẻ tenLopHTML – Bộ chọn theo định danh: #tenBochon

● Chọn đối tượng có id=“tenBochon”– Bộ chọn theo lớp: .tenBochon

● Chọn các đối tượng có class=“tenBochon”– Bộ chọn theo thuộc tính:[thuoctinh], [thuoctinh=giatri],

[thuoctinh~=giatri], [thuoctinh|=giatri]● Chọn các đối tượng có thuộc tính thuoctinh

– Bộ chọn không tên (nội tuyến): {}● Đặt thuộc tính style = {} của đối tượng tài liệu

– Khác


SS: Bộ chọn theo kiểu phần tử HTML

• HTML {} – Chọn đối tượng html• BODY {} – Chọn đối tượng body• TD {} – Chọn các đối tượng td• TEXTAREA {} – Chọn các đối tượng textarea• LABEL {} – Chọn các đối tượng span• INPUT {} – Chọn các đối tượng input• SELECT {} – Chọn các đối tượng select• A {} – Chọn các đối tượng liên kết <a>• UL{} – Chọn các đối tượng danh sách không sắp xếp• OL{} – Chọn các đối tượng danh sách sắp xếp• DL{} – Chọn các đối tượng danh sách định nghĩa• UL LI {} – Chọn các đối tượng mục trong danh sách không thứ tự• OL LI {} – Chọn các đối tượng mục trong danh sách không thứ tự• DL DT/DD - Chọn các đối tượng mục trong danh sách định nghĩa


SS: Bộ chọn theo kiểu phần tử HTML

• Ví dụ:<style type=“text/css”>

span{color: #ff0000;}

</style><span>This is a styled text.</span><p>This is a normal text.</p>This is another normal text.


SS: Bộ chọn theo định danh

• Chọn đối tượng tài liệu có id=“tenBochon”• Ví dụ:

<style type=“text/css”> #note1{color: #ff0000;}

</style><span id=“note1”>This is a styled text.</span><span id=“note2”>This is a normal text.</span><span>This is another normal text.</span>


SS: Bộ chọn theo lớp

• Chọn các đối tượng có class=“tenBochon”

• Ví dụ:<style type=“text/css”>

.note{color: #ff0000;}

</style><span class=“note”>This is a styled

text.</span><span>This is a normal text. </span>


SS: Bộ chọn theo thuộc tính

• Chọn các đối tượng có thuộc tính thỏa

– [thuoctinh]– [thuoctinh = giatri]– [thuoctinh ~= giatri] (chứa giá trị)– [thuoctinh |= giatri] (bắt đầu bằng giá

trị)


SS: Một số bộ chọn khác

• *: Chọn tất cả các đối tượng• container e: Chọn đối tượng được chọn bởi e

ở bên trong đối tượng được chọn bởi container

• parent>e: Chọn đối tượng được chọn bởi e có cha được chọn bởi parent

• prev-sibling + e: Chọn đối tượng được chọn bởi e có đối tượng liền trước được chọn bởi prev-sibling

• …


Bộ chọn giả

selector:pseudo-class {} selector.class:pseudo-class {}

:hover – Đưa chuột vào:focus – Được đặt tâm điểm:link – Liên kết thường:visited – Liên kết đã được thăm:active – Liên kết đang được thăm:first-child – Nút con đầu tiên


Phần tử giả

selector:pseudo-element {} selector.class:pseudo-element {}

:first-letter – Ký tự đầu tiên:first-line – Dòng đầu tiên:before – Phía sau:after – Phía trước:lang(language) – Ngôn ngữ (thuộc tính

lang)


Bộ chọn lồng nhau

• Đối tượng tài liệu áp dụng CSS phải được chọn bởi tất cả các bộ chọn

S1 S2 … Sn {attribute1: value1;attribute2: value2;…

}


Nhóm các bộ chọn

• Nhiều bảng CSS có cùng nội dung/thân

S1, S2, …, Sn {attribute1: value1;attribute2: value2;…

}


Chú thích

/*Chú thích trong CSS*/


Khai báo CSS trong

<head><style type=“text/css”>#note {color:sienna;}.menuItem {background-image:url("images/back40.gif");}</style></head><body><span class=“menuItem”>Trang nhất </span><span id=“note”>Hãy chọn thực đơn </span></body>

• Nếu CSS không cần dùng ở các trang khác


Khai báo CSS ngoài

• Các bảng kiểu được định nghĩa và lưu trong tệp có đuôi .css.

• Bao hàm tệp .css trong tệp HTML.


Tạo CSS ngoài: style.css


Bao hàm CSS ngoài


Nối các bảng định dạng

• Khi có nhiều bảng định dạng cùng chọn một đối tượng HTML, đối tượng HTML sẽ được định dạng bởi VSS (như một bảng định dạng ảo được tạo bằng cách nối các bảng định dạng):

– VSS = Các thuộc tính của SS nội tuyến– VSS += Các thuộc tính của SS trong không có trong VSS– VSS += Các thuộc tính của SS ngoài không có trong VSS– VSS += Các thuộc tính mặc định của trình duyệt không có

trong VSS


Hiển thị đối tượng tài liệu – Box model

• Mỗi đối tượng tài liệu được hiển thị trong một vùng hình chữ nhật (box model)

padding-right

height

border-right

margin-right

padding-left

border-left

margin-left

margin-bottomborder-bottompadding-bottom

margin-top border-top padding-top

width


Hiển thị đối tượng tài liệu – Box model - Vùng hiển thị nội dung

• Chiều cao và chiều rộng vùng hiển thị nội dung của đối tượng tài liệu thường được tính toán tự động để toàn bộ nội dung được nhìn thấy

• nhưng có thể ấn định bằng các thuộc tính– width, height– max-width, max-height, min-width, min-heightvới giá trị được xác định bằng độ dài (pixel, pt, …) hoặc phần

trăm so với đối tượng chứaVí dụ width:50%; height:10px;


Hiển thị đối tượng tài liệu – Box model - Vùng đệm

• Vùng đệm là vùng trống nằm giữa vùng hiển thị nội dung và đường viền, được xác định bởi các thuộc tínhpadding-toppadding-bottompadding-rightpadding-left

với giá trị tính theo chiều dài hoặc phần trăm.

• Viết tắt:padding: top right bottom leftpadding: top right(left) bottompadding: top(bottom) right(left) padding: top(right, bottom, left)


Hiển thị đối tượng tài liệu – Box model - Viền

• border-[side-]style: none/solid/dashed/dotted/double/groove/ridge/inset/outset/hidden

• border- [side-]width: thin/medium/thick/#px

• border- [side-]color: color-value• border[-side]: style width color


Hiển thị đối tượng tài liệu: Box model - Lề

• Lề là khoảng trống bao bên ngoài• margin[-side]: auto/inherit/#

%/#length


Hiển thị đối tượng tài liệu: Tính chất

• Kiểu hiển thị– display: none/inline/block;

• Khả năng nhìn thấy– visibility: hidden;

• Độ trong suốt– opacity: 0.4;

inlineinline

Block

Các đối tượng có thể đứng cạnh nhau

Đối tượng không thể đứngcạnh đối tượng khác


Vị trí hiển thị đối tượng• position:static

– Các đối tượng liên tiếp nhau được hiển thị theo luồng bình thường (normal flow), tức là cạnh nhau từ trái sang phải rồi từ trên xuống dưới (đối tượng có kiểu hiển thị block không thể hiển thị bên cạnh (liền trái, liền phải) các đối tượng khác)

obj1 obj2 obj3 obj4

obj7

obj5

obj8

obj6

obj9

obj10 obj11 obj12 obj13

obj16

obj14

obj17

obj15

obj18 obj19

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5


Vị trí hiển thị đối tượng• position:relative

– Vị trí hiển thị đối tượng có thể được di rời trái (left), phải (right), lên trên (top), xuống dưới (bottom) so với vị trí tĩnh/trong luồng của nó.

– Vùng hiển thị trong luồng vẫn được giữ chỗ– Đối tượng di rời có thể hiển thị chồng lên các đối tượng khác

obj1 obj2 obj3 obj4

obj7

obj5

obj8

obj6

obj9


obj16

obj14

obj17

obj15

obj18 obj19

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5

obj13


Vị trí hiển thị đối tượng• position:fixed

– Vị trí hiển thị đối tượng được xác định tương đối so với vị trí cửa sổ, không thay đổi khi cửa sổ được cuộn

– Đối tượng hiển thị cố định có thể hiển thị chồng lên các đối tượng khác

obj1 obj2 obj3 obj4

obj7

obj5

obj8

obj6

obj9


obj16

obj14

obj17

obj15

obj18 obj19

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5

obj20

windowtop

right

bottom

left


Vị trí hiển thị đối tượng

• position: absolute;– Vị trí hiển thị của đối tượng được xác định

tương đối so với vị trí của đối tượng tổ tiên gần nhất không theo dòng, được xác định bằng độ dời

● top, right, bottom, left– Có thể hiển thị chồng lên các đối tượng

khác● z-index


Vị trí hiển thị đối tượng bên trong

Nút

Nút con 1

Nút con 2 nút con 3

Nút con 4

Nút con 5

Nút con 6 Nút con 7

Nút con 8

Nút cha

Nút trước

Nút sau


Vị trí hiển thị đối tượng: Đặt trôi

• float: left/right;• Đối tượng được đặt trôi sẽ trôi về một

phía (trái/phải) xa nhất có thể• Các đối tượng sau đối tượng đặt trôi

chảy theo đối tượng được đặt trôi. Sử dụng

• clear: left/right/both;• để xóa dừng trôi.


Giá trị màu

• Tên: “red”, …• RGB: “rgb(255, 0, 0)”, …• Hexa: “#ff0000”


Định dạng nền

• background-color: #6495ed;• background-image:url('paper.gif'); • background-repeat:repeat-x; • background-attachment:fixed;• background-position:right top;

• background:#ffffff url('img_tree.png') no-repeat right top;


Định dạng văn bản

• color:#00ff00;• text-align:center/left/right/justify;• vertical-align:bottom/top/middle;• text-decoration:none/underline/ line-

through/ overline/blink;• text-transform:uppercase/ lowercase/

capitalize;• text-indent:50px;


Định dạng font chữ

• font-family:"Times New Roman", Times, serif;

• font-size:40px;• font-style:normal/italic/bold;


Định dạng danh sách

• list-style-type: none/ circle/ square/ upper-roman/ lower-alpha/…;

• list-style-image: url('sqpurple.gif');


Địng dạng bảng

• border-collapse:collapse;


Hiển thị một miếng ảnh

• background:url(img_navsprites.gif) 0 0;

• width:46px;• height:44px;


Ví dụ: Dàn trang

• Sử dụng div (nên dùng)• Sử dụng table

top

left right

bottom

center


Ví dụ: Dàn trang sử dụng div

#container

#top

#left#right

#bottom

#center

#container

#middle


Ví dụ: Dàn trang sử dụng div

HTML

<div id="container"><div id="top"></div><div id="middle"><div id="left"></div><div id="center"></div><div id="right"></div><div class = "spacer"> </div></div><div id="bottom"></div>

</div>

CSS

#left, #right, #center {display: inline;float:left;

}.spacer {clear:both;}

Lê Đình Thanh, Bài giảng Lập trình web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Ví dụ: Dàn trang sử dụng table

#container

#top

#left#righ

t

#bottom

#center

#container

#child

#middle


Ví dụ: Dàn trang sử dụng table

<table id=“container”><tr id=“top”><td></td></tr><tr id=“middle”>

<td><table id=“child”>

<tr><td id=“left”></td><td id=“center”></td><td id=“right”></td>

</tr></table>

</td>

</tr><tr id=“bottom”><td></td></tr>

</table>


Ví dụ: Thực đơn

• Single vertical• Single horizontal• Dropdown• Flyout• Dropline


Tiếp theoDOM + javascript + jQuery

Documents

PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Nội dung web Bài 3 Lê Đình Thanh, ... sử dụng để quản lý các điều khiển web (các đối