Tải bản đầy đủ (.pdf) (83 trang)

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

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 (9.55 MB, 83 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>Lê Đình Thanh</b>

Khoa Cơng nghệ Thơng tin

Trường Đại học Công nghệ, ĐHQGHN

E-mail: Mobile: 0987.257.504Bài giảng

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

Chương 2

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Web Browser

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

JavaScript<sub>Web Browser</sub>

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.

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="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

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Thẻ HTML

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

• Thẻ đơi:<i><tenThe thuoctinh1=“giatri1” </i>

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

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Cấu trúc trang HTML

<!DOCTYPE html> <html>

<title> Tiêu đề </title><meta …>

<link …><script …><style></head><body>

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Content categories

Tham khảo

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<i><!DOCTYPE html></i>

<i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Đình Thanh, Bài giảng Phát triển ứng dụng web.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="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, scale=1.0‛/>

initial-<!--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"/>

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

<head> …

<link rel="icon“ href = “logo.ico" /><link rel=stylesheet type=text/css href=”default.css”/>

<link rel=alternate type=text/html href=”/en-us” hreflang=en title=”English"/>

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Bao hàm và định nghĩa kịch bản

<i><script type=”text/javascript” src=”form.js”></script><script></i>

<i>var n = document.getElementById(“note”);n.innerHTML = “Một bài viết đã được xóa.”;</script></i>

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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ã

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="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

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

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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

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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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

<del>, <ins>

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

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Viết cao <sup>

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

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Viết thấp: <sub>

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

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Địa chỉ: <address>

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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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

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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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

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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

Đoạn văn: <p>

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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

Bài viết: <article>

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

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

Phân đoạn: <section>

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

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

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

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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

Ngắt dịng: <br/>

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

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

Ngắt chủ đề <hr/>

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

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

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

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

Ví dụ trang văn bản

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

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

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 dụng web.

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

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

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

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="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>

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

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="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>

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

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

Danh sách, bảng biểu• Danh sách có thứ tự

• Danh sách khơng có thứ tự• Danh sách mơ tả

• Bảng biểu

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

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

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

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

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

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

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

</div><span class="text_page_counter">Trang 41</span><div class="page_container" data-page="41">

Danh sách mô tả <dl>

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

</div><span class="text_page_counter">Trang 42</span><div class="page_container" data-page="42">

Bảng: <table>

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

</div><span class="text_page_counter">Trang 43</span><div class="page_container" data-page="43">

Bảng: Trải cột

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

</div><span class="text_page_counter">Trang 44</span><div class="page_container" data-page="44">

Bảng: Trải cột

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

</div><span class="text_page_counter">Trang 45</span><div class="page_container" data-page="45">

Bảng: Trải cột

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

</div><span class="text_page_counter">Trang 46</span><div class="page_container" data-page="46">

Bảng: Trải hàng

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

</div><span class="text_page_counter">Trang 47</span><div class="page_container" data-page="47">

Bảng: Bảng hồn chỉnh

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

</div><span class="text_page_counter">Trang 48</span><div class="page_container" data-page="48">

Nội dung nhúng• Đối tượng nhúng

• Hình ảnh

• Âm thanh, phim• Plugin

• Khung nội tuyến

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

</div><span class="text_page_counter">Trang 49</span><div class="page_container" data-page="49">

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

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

</div><span class="text_page_counter">Trang 50</span><div class="page_container" data-page="50">

Ảnh: <img>

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

<b>Lazy loading: </b>

Tham khảo

</div><span class="text_page_counter">Trang 51</span><div class="page_container" data-page="51">

Ảnh: <picture>

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

</div><span class="text_page_counter">Trang 52</span><div class="page_container" data-page="52">

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

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

</div><span class="text_page_counter">Trang 53</span><div class="page_container" data-page="53">

Plugin: <embed>

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

</div><span class="text_page_counter">Trang 54</span><div class="page_container" data-page="54">

Khung nội tuyến:<iframe>

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

</div><span class="text_page_counter">Trang 55</span><div class="page_container" data-page="55">

Cấu trúc trang, nhóm gộp• Cấu trúc trang

• Tạo nhóm

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

</div><span class="text_page_counter">Trang 56</span><div class="page_container" data-page="56">

Cấu trúc trang

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

</div><span class="text_page_counter">Trang 57</span><div class="page_container" data-page="57">

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

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

•<sub><footer></sub><sub>Nội dung cuối các trang</sub><sub></footer></sub>•<sub></body></sub>

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

</div><span class="text_page_counter">Trang 58</span><div class="page_container" data-page="58">

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

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

</div><span class="text_page_counter">Trang 59</span><div class="page_container" data-page="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

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

</div><span class="text_page_counter">Trang 60</span><div class="page_container" data-page="60">

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

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

</div><span class="text_page_counter">Trang 61</span><div class="page_container" data-page="61">

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

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

</div><span class="text_page_counter">Trang 62</span><div class="page_container" data-page="62">

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

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

</div><span class="text_page_counter">Trang 63</span><div class="page_container" data-page="63">

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

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

</div><span class="text_page_counter">Trang 64</span><div class="page_container" data-page="64">

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

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

Nhiều type khác nhau.

</div><span class="text_page_counter">Trang 65</span><div class="page_container" data-page="65">

input: Nhập chữ

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

</div><span class="text_page_counter">Trang 66</span><div class="page_container" data-page="66">

input: Hộp kiểm

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

</div><span class="text_page_counter">Trang 67</span><div class="page_container" data-page="67">

input: radio

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

</div><span class="text_page_counter">Trang 68</span><div class="page_container" data-page="68">

input: Mật khẩu

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

</div><span class="text_page_counter">Trang 69</span><div class="page_container" data-page="69">

input: Tệp

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

</div><span class="text_page_counter">Trang 70</span><div class="page_container" data-page="70">

input: nhập màu

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

</div><span class="text_page_counter">Trang 71</span><div class="page_container" data-page="71">

input: nhập ngày

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

</div><span class="text_page_counter">Trang 72</span><div class="page_container" data-page="72">

input: nhập giờ

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

</div><span class="text_page_counter">Trang 73</span><div class="page_container" data-page="73">

input: ẩn

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

</div><span class="text_page_counter">Trang 74</span><div class="page_container" data-page="74">

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

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

</div><span class="text_page_counter">Trang 75</span><div class="page_container" data-page="75">

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

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

</div><span class="text_page_counter">Trang 76</span><div class="page_container" data-page="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).

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

</div><span class="text_page_counter">Trang 77</span><div class="page_container" data-page="77">

Biểu nhập: <form>

<b>Các thuộc tính của Form:</b>

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

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

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

</div><span class="text_page_counter">Trang 78</span><div class="page_container" data-page="78">

Biểu nhập: <form>

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

</div><span class="text_page_counter">Trang 79</span><div class="page_container" data-page="79">

Biểu nhập: <form>

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

</div><span class="text_page_counter">Trang 80</span><div class="page_container" data-page="80">

Biểu nhập: <form>

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

</div><span class="text_page_counter">Trang 81</span><div class="page_container" data-page="81">

Biểu nhập: <form>

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

</div><span class="text_page_counter">Trang 82</span><div class="page_container" data-page="82">

Biểu nhập: <form>

<i>Nhắc lại</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

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

</div><span class="text_page_counter">Trang 83</span><div class="page_container" data-page="83">

<i>Tiếp theo</i>

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

</div>

×