phát triỂn Ứng dỤng web · pdf filephát triỂn Ứng dỤng web. nộ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: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.comMobile: 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><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 >

</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

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><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><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

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

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

– 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><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

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

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

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

obj10 obj11 obj12 obj13

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

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: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

obj18 obj19

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5

windowtop

bottom

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 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

left right

bottom

center

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

#container

#left#right

#bottom

#center

#container

#middle

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

</div>

#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

#left#righ

#bottom

#center

#container

#child

#middle

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

</tr></table>

</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

phát triỂn Ứng dỤng web · pdf filephát triỂn Ứng dỤng web. nội...

Documents

lactase và ứng dụng

bài 6 - quản lý ứng dụng web asp.net

máy chủ web bỏ túi & ứng dụng (pocket sized web...

bảo mật cho ứng dụng web

hƯỚng dẪn sỬ dỤng Ứng dỤng

nghiÊn cỨu Ứng dỤng mỘt sỐ cÔng cỤ kiỂm...

ng dẪn sỬ dỤng Ứng dỤng calendar (l ch) tin...

phÁt triỂn Ứng dỤng web · pdf filebộ môn mạng...

ứng dụng cnsh

khai báo y tế toàn dân trên ứng dụng ncovi · web...

Ứng dỤng ansys

web và thiết kế web ứng dụng trong dạy học

phÁt triỂn Ứng dỤng web - itest

evnhanoi.vnevnhanoi.vn/images/media/huong_dan_su_dung_ung_dung_cs… ·...

sử dụng hiệu ứng

toán ứng dụng - hpu2.edu.vn · pdf filetoán ứng...

bài giảng phát triển ứng dụng web - itest

hƯỚng dẪn sỬ dỤng Ứng dỤng myopac

Định hướng ứng dụng

phÁt triỂn Ứng dỤng web t triỂn Ứng dỤng web 2...