Bài giảng phát triển ứng dụng web chương 2 lê đình thanh

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  định kiểu trình diễn bởi CSS  quản lý bởi JavaScript Quan trọng Lê Đình Thanh, Bài giảng Phát triển ứng dụ

Trang 1

Lê Đình Thanh

Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn Mobile: 0987.257.504

Bài giảng

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

Trang 2

Chương 2

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

Trang 4

Web Browser

Mã nguồn

trang web

được thể hiện bằ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

Trang 5

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

 định kiểu trình diễn bởi CSS

 quản lý bởi JavaScript

Quan trọng

Trang 6

HTML : H yper T ext M arkup L anguage

• 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, … (ngày càng

ít được dùng, mà thay bằng CSS)

Trang 7

Thẻ HTML

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

Trang 9

!DOCTYPE

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Trang 10

Thông tin về trang -

Một vài meta thường dùng

<! Các từ khóa của trang >

<! Kích thước và tỉ lệ phóng to/thu nhỏ vùng hiển thị >

initial-scale=1.0‛/>

<! Kiểu nội dung và bảng mã được sử dụng trong trang >

Trang 11

Liên kết tài nguyên

<head>

…

Trang 14

Các đối tượng văn bản

Trang 15

Đầu mục: <h1>-<h6>

Trang 16

Văn bản thường

• Dãy các ký tự nằm giữa hai thẻ liên tiếp

• Ví dụ, ba đối tượng text cùng một h1, một h2

<h1> Nội dung web </h1> <h2> Khai báo tài liệu HTML </h2>

Trang 17

Nhấn mạnh: <strong>, <em>

Trang 18

Thuật ngữ và từ viết tắt: <dfn>, <abbr>

Trang 19

Văn bản được xóa hoặc thêm mới:

Trang 20

Viết cao <sup>

Trang 21

Viết thấp: <sub>

Trang 22

Địa chỉ: <address>

Trang 23

Trích dẫn: <cite>, <q>, <blockqoute>

Trang 24

Mã nguồn: <code>, <var>, <kbd>,

Trang 25

Đoạn văn: <p>

Trang 26

Bài viết: <article>

Trang 27

Phân đoạn: <section>

Trang 28

Đầu đề, chân đề: <header>, <footer>

Trang 29

Ngắt dòng: <br/>

Trang 30

Ngắt chủ đề <hr/>

Trang 31

Tham chiếu ký tự: &name; &#code; &#xCode;

Ký tự Theo tên Theo số

Trang 32

Ví dụ trang văn bản

Trang 33

Siêu liên kết, điểm đánh dấu

• Siêu liên kết

• Điểm đánh dấu

Trang 34

Siêu liên kết: <a>

Trang 35

Điểm đánh dấu: <a>

• Tạo điểm đánh dấu

• Tạo liên kết đến điểm đánh dấu

<a href=“#pub”>Chuyển đến điểm đánh dấu</a>

Trang 36

Điểm đánh dấu (tiếp)

• Tạo điểm đánh dấu ở Trangmoi.htm

• Tạo liên kết đến điểm đánh dấu

<a href=“trangmoi.htm#books”>Sang trang mới và chuyển đến điểm đánh dấu trên trang mới</a>

Trang 38

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

Trang 39

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

Trang 40

Danh sách mô tả <dl>

Trang 41

Bảng: <table>

Trang 42

Bảng: Trải cột

Trang 43

Trang 44

Trang 45

Bảng: Trải hàng

Trang 46

Bảng: Bảng hoàn chỉnh

Trang 47

• Khung nội tuyến

Trang 48

Đối tượng nhúng: <object>

Trang 49

Ảnh: <img>

Trang 50

Ảnh: <picture>

Trang 51

Âm thanh, phim: <audio>, <video>

Trang 52

Plugin: <embed>

Trang 53

Khung nội tuyến:<iframe>

Trang 55

Cấu trúc trang

Trang 56

Cấu trúc trang

• <body>

• <header> Nội dung đầu các trang </header>

• <nav> Thực đơn của trang </nav>

• <main>

• Nội dung chính: <article>, <section>

• <aside> Nội dung liên quan gián tiếp </aside>

Trang 57

Tạo nhóm: <span>, <div>

Trang 58

Nhập liệu

• Dữ liệu văn bản

• Dữ liệu kiểu liệt kê

• Dữ liệu tùy biến

• Đệ trình dữ liệu

• Hỗ trợ nhập liệu

Trang 59

Nhập văn bản: <textarea>

Trang 60

Dữ liệu liệt kê: <select>

Trang 61

Dữ liệu liệt kê: <select> (đơn chọn)

Trang 62

Dữ liệu liệt kê: <select> (đa chọn)

Trang 63

Dữ liệu tùy biến: <input>

Nhiều type khác nhau

Trang 64

input: Nhập chữ

Trang 65

input: Hộp kiểm

Trang 66

input: radio

Trang 67

input: Mật khẩu

Trang 68

input: Tệp

Trang 69

input: nhập màu

Trang 70

input: nhập ngày

Trang 71

input: nhập giờ

Trang 72

input: ẩn

Trang 73

Trình bày biểu nhập: <label>, <fieldset>

Trang 74

Tự động hoàn thành: <datalist>

Trang 75

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

Trang 76

Biểu nhập: <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

Trang 77

Trang 78

Trang 79

file:///D:/Web_Vidu/

Default.htm?hoten=Ho%C3%A0ng+B%C3%A1+Th%C3%A0nh&ngaysinh=12%2F 10%2F1984&gt=on

Trang 80

Trang 81

Nhắc lại : Với phương thức POST, các tham số + giá trị

không được nối vào URL, mà được đặt vào thân của gói HTTP request

Trang 82

Tiếp theo

CSS

Tiêu đề	Bài giảng Phát triển ứng dụng web
Tác giả	Lê Đình Thanh
Trường học	Trường Đại học Công nghệ, Đại học Quốc gia Hà Nội
Chuyên ngành	Công nghệ Thông tin
Thể loại	Bài giảng
Thành phố	Hà Nội

Định dạng
Số trang	82
Dung lượng	4,6 MB