BÀI GIẢNG PHÁT TRIỂN ỨNG DỤNG WEB HTML

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin Lê Đình Thanh Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhldvnu.edu.vn Mobile: 0987.257.504 Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB HTML Chương 2 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Nội dung HTML CSS Javascript DOM Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Web Browser Mã nguồn trang web được thể hiện bằng HTML, CSS JavaScript Web Browser Do Web Server gửi tới. Trình diễn trên giao 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. Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 − lưu trữ theo cấu trúc DOM − đị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ụng web. 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 − Input text, text area, radio button, check box, list box, button, submit, hidden, hyperlink, text, image, … Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Thẻ HTML Các đối tượng tài liệu được khai báo bởi các thẻ HTML Thẻ đôi: Các đối tượng bên trongcon. Thẻ đơn: . Ví dụ: −

text text text

− … Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Bao hàm và định nghĩa kịch bản var n = document.getElementById(“note”); n.innerHTML = “Một bài viết đã được xóa.”; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Định kiểu trình diễn body {background-color: eee;} .container {position:relative;} note {color:red;} Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Các đối tượng văn bản Đầu mục Văn bản thường Cụm từ được nhấn mạnh Thuật ngữ và từ viết tắt Văn bản được xóa và thêm mới Mũ, chỉ số Địa chỉ Trích dẫn Mã nguồn máy tính Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Đoạn văn Bài viết Phân đoạn Đầu đề, chân đề Ngắt chủ đề Bẻ từ Tham chiếu ký tự Sử dụng bảng mã Đầu mục: - Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 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 Nội dung web Khai báo tài liệu HTML Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Nhấn mạnh: , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Thuật ngữ và từ viết tắt: , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Văn bản được xóa hoặc thêm mới: , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Viết cao Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Viết thấp: Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Địa chỉ: Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Trích dẫn: , , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Mã nguồn: , , , , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Đoạn văn:

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Bài viết: Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Phân đoạn: Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Đầu đề, chân đề: , Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ngắt dòng: Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ngắt chủ đề Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Tham chiếu ký tự: name; code; xCode; Ký tự Theo tên Theo số nbsp; 160; < lt; 60; > gt; 62; amp; 38; ¢ cent; 162; £ pound; 163; ¥ yen; 165; € euro; 8364; sect; 167; copy; 169; reg; 174; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Ví dụ trang văn bản Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. Siêu liên kết, điểm đánh dấu Siêu liên kết Điểm đánh dấu Lê Đình Thanh, Bài giảng Phát triển ứng...

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
tượng tài liệu được
− khai báo bằng HTML
− lưu trữ theo cấu trúc DOM
− đị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
− Input text, text area, radio button, check box, list box, button, submit, hidden, hyperlink, text, image, …
Trang 7
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
Trang 9
Content categories
Tham khảo
Trang 10
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Trang 11
Thông tin về trang -
Một vài meta thường dùng
<meta name=‛description‛ content=‛Thông tin tuyển sinh‛/>
<! Các từ khóa của trang >
<meta name=‛keywords‛ content=‛tuyển sinh, chỉ tiêu, điểm s|n‛/>
<! Kích thước và tỉ lệ phóng to/thu nhỏ vùng hiển thị >
<meta name=‛viewport‛ content=‛width=device-width,
initial-scale=1.0‛/>
<! Kiểu nội dung và bảng mã được sử dụng trong trang >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Trang 12
Liên kết tài nguyên
<head>
…
<link rel="icon“ href = “logo.ico" />
<link rel=stylesheet type=text/css
Trang 15
Các đối tượng văn bản
Trang 16
Đầu mục: <h1>-<h6>
Trang 17
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 18
Nhấn mạnh: <strong>, <em>
Trang 19
Thuật ngữ và từ viết tắt: <dfn>, <abbr>
Trang 20
Văn bản được xóa hoặc thêm mới:
<del>, <ins>
Trang 21
Viết cao <sup>
Trang 22
Viết thấp: <sub>
Trang 23
Địa chỉ: <address>
Trang 24
Trích dẫn: <cite>, <q>, <blockqoute>
Trang 25
Mã nguồn: <code>, <var>, <kbd>,
<samp>, <pre>
Trang 26
Đoạn văn: <p>
Trang 27
Bài viết: <article>
Trang 28
Phân đoạn: <section>
Trang 29
Đầu đề, chân đề: <header>, <footer>
Trang 30
Ngắt dòng: <br/>
Trang 31
Ngắt chủ đề <hr/>
Trang 32
Tham chiếu ký tự: &name; &#code; &#xCode;
Trang 33
Ví dụ trang văn bản
Trang 34
Siêu liên kết, điểm đánh dấu
• Siêu liên kết
• Điểm đánh dấu
Trang 35
Siêu liên kết: <a>
Trang 36
Điểm đánh dấu: <a>
• Tạo điểm đánh dấu
<h2 id=”pub”>Điểm đánh dấu</h2>
• 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 37
Điểm đánh dấu (tiếp)
• Tạo điểm đánh dấu ở Trangmoi.htm
<div id=“books”></div>
• 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 39
Danh sách có thứ tự <ol>
Trang 40
Danh sách không thứ tự <ul>
Trang 41
Danh sách mô tả <dl>
Trang 42
Bảng: <table>
Trang 43
Bảng: Trải cột
Trang 44
Trang 45
Trang 46
Bảng: Trải hàng
Trang 47
Bảng: Bảng hoàn chỉnh
Trang 48
• Khung nội tuyến
Trang 49
Đối tượng nhúng: <object>
Trang 50
Ảnh: <img>
Lazy loading:
Tham khảo
Trang 51
Ảnh: <picture>
Trang 52
Âm thanh, phim: <audio>, <video>
Trang 53
Plugin: <embed>
Trang 54
Khung nội tuyến:<iframe>
Trang 56
Cấu trúc trang
Trang 57
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 58
Tạo nhóm: <span>, <div>
Trang 59
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 60
Nhập văn bản: <textarea>
Trang 61
Dữ liệu liệt kê: <select>
Trang 62
Dữ liệu liệt kê: <select> (đơn chọn)
Trang 63
Dữ liệu liệt kê: <select> (đa chọn)
Trang 64
Dữ liệu tùy biến: <input>
Nhiều type khác nhau.
Trang 65
input: Nhập chữ
Trang 66
input: Hộp kiểm
Trang 67
input: radio
Trang 68
input: Mật khẩu
Trang 69
input: Tệp
Trang 70
input: nhập màu
Trang 71
input: nhập ngày
Trang 72
input: nhập giờ
Trang 73
input: ẩn
Trang 74
Trình bày biểu nhập: <label>, <fieldset>
Trang 75
Tự động hoàn thành: <datalist>
Trang 76
• 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 77
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 78
Trang 79
Trang 80
file:///D:/Web_Vidu/
Default.htm?hoten=Ho%C3%A0ng+B%C3%A1+Th%C3%A0nh&ngaysinh=12%2F 10%2F1984&gt=on
Trang 81
Trang 82
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 83
Tiếp theo
CSS

Định dạng
Số trang	83
Dung lượng	9,55 MB