Recomendados
Más contenido relacionado
La actualidad más candente
Similar a 01b udpt html
Similar a 01b udpt html (20)
Último
Último (20)
01b udpt html
- 1. LOGO Ứng dụng phân tán Chủ đề 1b HTML GV: Nguyễn Trường Sơn
- 2. Giới thiệu http://www.example.com/page1.html 3 Internet WWW Servers 4 6 (WWW) 5 Users (clients) 2 Browse 1 4 4resources (HTML files) Authors write HTML Cơ chế hoạt động của ứng dụng web - static 2
- 3. Giới thiệu http://www.example.com/page2.php 3 Internet WWW Servers 5 4 7 5 Biên dịch và (WWW) Users (clients) phát sinh 2 Browse trang HTML 4 4resources 1 (PHP, ASP, Authors write ASPX, JSP PHP, ASP, files) ASPX, JSP, … Cơ chế hoạt động của ứng dụng web - dynamic 3
- 4. Giới thiệu về HTML • HTML (Hyper Text Markup Language) -‐ Ngôn ngữ đánh dấu siêu văn bản • Là một ngôn ngữ dùng để xây dựng một trang Web. • Chứa các thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị một trang Web. • Một trang web thông thường gồm có 2 thành phần chính: – Dữ liệu của trang web (văn bản, âm thanh, hình ảnh,...) – Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt. 4
- 5. Trình duyệt và trình soạn thảo Trình duyệt web (Browser) Trình soạn thảo (Editor) 5
- 6. Thẻ (TAG) • Một tài liệu HTML được tạo thành bởi dữ liệu và các thẻ (TAG) mô tả cấu trúc tài liệu và cách trình bày của dữ liệu đó. Thẻ mô tả cấu trúc: <HTML> HTML HEAD <HEAD> TITLE <TITLE> Welcome to HTML</TITLE> BODY Thẻ trình bày nội </HEAD> dung: <BODY BGCOLOR = lavender> H3 B <H3> My first HTML document</H3> I <B> This is content </B> P FONT </BODY> TABLE LI </HTML>
- 7. Thẻ (TAG) • <Tag mở> Dữ liệu </Tag đóng> <b> Dòng chữ này được in đậm </b> • Tên Tag à mang ynh gợi nhớ – Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph • Đôi khi không cần Tag đóng <br>, <hr> • Cú pháp chung <TAG Tên_thuộc_Znh=‘giá_trị’ ……..> Dữ liệu </TAG>
- 8. Thẻ (TAG) Mã HTML Hiển thị <b> Đây là một dòng được in Đây là một dòng được in Đậm Đậm</b> Mức chữ ở ‚êu đề 3 <h3> Mức chữ ở ‚êu đề 3 </h3> Mã HTML Hiển thị <font FACE=‘Arial’ Size=‘3’> Hello Hello </font> Lưu ý : • Giá trị Thuộc ynh của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép • Không phân biệt chữ HOA và thường • Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng 8
- 9. Cấu trúc 1 tài liệu HTML <html> <head> <‚tlte> Tiêu đề </‚tle> Phần đầu trang HTML </head> Bắt đầu và Kết thúc của trang <body> HTML Nội dung 1 Nội dung Nội dung 2 trang HTML Nội dung 3 </body> </html> 9
- 10. Cấu trúc 1 tài liệu HTML • <html></html> : Định nghĩa phạm vi của văn bản HTML • <head></head> : Định nghĩa các mô tả về trang HTML: ‚êu đề, khai báo CSS, mã nguồn Javascript – Thông ‚n trong tag này không được hiển thị trên trang web • <‚tle></‚tle> : Mô tả ‚êu đề trang web • <body></body> : Xác định vùng thân của trang web, nơi chứa các thông ‚n • Các thẻ trong tài liệu HTML nên lồng nhau tuyệt đối 10
- 11. Cấu trúc 1 tài liệu HTML – Ví dụ <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <H3>My first HTML document</H3> </BODY> </HTML> 11
- 12. Trình bày nội dung tài liệu HTML • Thẻ cơ bản – Các thẻ xử lý văn bản • Định dạng chuỗi • Định dạng khối – Thẻ hình ảnh – Thẻ âm thanh • Thẻ danh sách • Thẻ liên kết trang • Thẻ kẻ bảng • DIV/SPAN
- 13. Thẻ định dạng văn bản • Các thẻ định dạng khối văn bản – Tiêu đề (Heading) : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Đoạn văn bản (Paragraph): <p> – Danh sách (List Items): <li> – Đường kẻ ngang (Horizontal Rules): <hr> • Các thẻ định dạng chuổi văn bản – Định dạng chữ : <em>, <i>, <b> và <font> – Tạo liên kết : <a> – Xuống dòng : <br> 13
- 14. Ví dụ - Heading (H1, H2, …, H6) <HTML> <HEAD> <TITLE>Introduc‚on to HTML</TITLE> </HEAD> <BODY> <H1> Introduc‚on to HTML -‐ H1</H1> <H2> Introduc‚on to HTML -‐ H2</H2> <H3> Introduc‚on to HTML -‐ H3</H3> <H4> Introduc‚on to HTML -‐ H4</H4> <H5> Introduc‚on to HTML -‐ H5</H5> <H6> Introduc‚on to HTML -‐ H6</H6> </BODY> </HTML>
- 15. Ví dụ: Paragraph (P) <html> <head> <‚tle>Welcome to HTML</‚tle> </head> <body bgcolor=‘lavender’> <h3>My first HTML document</h3> <p> This is going to be real fun <h2>Using another heading</h2> </p> <p align=‘center’>Another paragraph element</p> </body> </html> 15
- 16. Ví dụ: Horizontal rules (HR) • <HR …> – Thuộc ynh : • align : Canh hàng đường kẻ ngang so với trang web • width : Chiều dài đường kẻ ngang • size : Bề rộng của đường kẻ ngang • noshade : Không có bóng <body> This is a horizontal rule: <hr size=“15” align=“center” width=“80%” /> </body> 16
- 17. Ví dụ khác … • Định dạng 17
- 18. Ví dụ khác 18
- 19. Ví dụ khác … Thẻ PRE • Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag,…) Ví dụ: <FONT SIZE=4> <pre> Ban co the xuong dong va cach khoang trang thoai mai </pre> </FONT> 19
- 20. Trình bày ký tự đặc biệt • Làm sao hiển thị các ký hiệu đặc biệt ? • Dấu <, >, & • Dấu nháy kép “ • Các ký tự đặc biệt : @ © ® • …… 20
- 21. Trình bày ký tự đặc biệt Result Descripson Ensty Name Ensty Number " quota‚on mark " " & ampersand & & < less-‐than < < > greater-‐than > > Để hiện thị được <Khoa hoa tu nhien> "Khoa hoc tu nhien" thì mã HTML tương ứng là : <Khoa hoa tu nhien> "Khoa hoc tu nhien" 21
- 22. Thẻ hình ảnh: IMG • Có thể không cần thẻ đống • Các thuộc ynh của tag <img>: – SRC : Đường dẫn đến file hình ảnh – ALT : Chú thích cho hình ảnh – Height, Width: Chiều cao và rộng của hình ảnh (pixel) – Border : Độ dày nét viền quanh ảnh (default=0) – Align: top, middle, bo¯om, le°, right • Đặt ảnh nền cho trang web – Sử dụng thẻ <body Background=‘Image Path’> 22
- 23. Thẻ hình ảnh 23
- 24. Tag hình hảnh Align = “LEFT” Align = “BOTTOM” (Mặc định) 24
- 25. Tag âm thanh • <bgsound> : Không có tag đóng • Thuộc ynh của tag <bgsound> – SRC : Đường dẫn đến file âm thanh – Loop : Số lần lặp (bằng -‐1 : Lặp vô hạn) – <bgsound> Thường đặt trong tag <head> của trang web. • Ví dụ: <BGSOUND src=‘batman.mid’ LOOP=‘1’> 25
- 26. Trình bày nội dung tài liệu HTML • Thẻ cơ bản – Thẻ xử lý văn bản • Định dạng chuỗi • Định dạng khối – Thẻ hình ảnh – Thẻ âm thanh • Thẻ danh sách • Thẻ liên kết trang • Thẻ kẻ bảng • DIV/SPAN
- 27. Các loại thẻ danh sách Kiểu danh sách Thẻ Phần tử trong DS Danh sách có thứ tự <OL> <LI> Danh sách không có thứ tự <UL> <LI> Danh sách tự định nghĩa <DL> <DT>, <DI> Danh sách lồng nhau Dạng khác <menu> <dir> 27
- 28. Các tag Danh sách – Danh sách có thứ tự 28
- 29. Các tag Danh sách – Danh sách có thứ tự 29
- 30. Các tag Danh sách – Danh sách không có thứ tự 30
- 31. Trình bày nội dung tài liệu HTML • Thẻ cơ bản – Thẻ xử lý văn bản • Định dạng chuỗi • Định dạng khối – Thẻ hình ảnh – Thẻ âm thanh • Thẻ danh sách • Thẻ liên kết trang • Thẻ kẻ bảng • DIV/SPAN
- 32. Thẻ liên kết trang - URL • protocol://site address/directory/filename • Các dạng địa chỉ HTTP: TH1: h¯p://server/ Ví dụ: h¯p://www.yahoo.com/ TH2: h¯p://server/file Ví dụ: h¯p://games.yahoo.com/index.php TH3: h¯p://server/directory/ h¯p://games.yahoo.com/games/ TH4: h¯p://server/directory/file h¯p://games.yahoo.com/download/ Dominoes.exe 32
- 33. Tag liên kết trang - URL TH5: h¯p://server/directory/file#marker h¯p://games.yahoo.com/index.php# Puzzle TH6: h¯p://server/directory/file?parameters h¯p://www.google.com.vn/search?hl=vi&q=Teach&meta= TH7: h¯p://server:port/directory/file h¯p://www.microso°.com:8080/products/gree‚ngs.html 33
- 34. Thẻ liên kết trang <a> (anchor) • Cú pháp : <a href="URL“ target=‘……’> Linked content </a> • Thuộc ynh target của tag <a> – name: tải trang web vào frame có tên NAME – _blank: tải trang web vào cửa sổ mới – _parent: tải trang web vào cửa sổ cha của nó – _self: tải trang web vào chính cửa sổ hiện hành – _top: tải trang web vào cửa số cao nhất 34
- 35. Ví dụ 35
- 36. Thẻ liên kết – Phân loại • Phân loại : – Liên kết ngoại (external link) – Liên kết nội (internal link) – Liên kết email (email link) 36
- 37. Liên kết ngoại (External Link) <a href=“URL”> Text đại diện </a> ………………… ………………… ………………… ………………… ………………… Click ………………… ………………… chuột ………………… Bài học 2 ………………… ………………… Trang có địa chỉ ………………… xác định từ URL Trang hiện tại baihoc2.htm baihoc1.htm 37
- 38. Liên kết nội (Internal Link) <a name=“TenViTri"> Vi tri bat dau </a> <a href=“#TenViTri"> Text đại diện </a> .………………… .………………… ………………… Text đại diện Nội dung ………………… Click ………………… Nội dung trang khi Text đại diện ………………… chuột trang khi ………………… ………………… chưa liên ………………… bấm liên ………………… kết ………………… Vi tri bat dau kết ………………… .…abcdefgh… Vi tri bat dau ...01234567… .…abcdefgh… .………………… ...01234567… .………………… .………………… .………………… 38 .………………… .…………………
- 39. Liên kết email ………………… ………………… Click chuột ………………… Liên hệ Admin ………………… ………………… <a href=“mailto:emailAddress">Liên hệ Admin</ a> 39
- 40. Phân loại địa chỉ URL <a href="URL“ target=‘……’> Linked content </a> • Địa chỉ URL phân làm 2 loại : – Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với Mạng Internet – Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang chứa liên kết. § Một số ký hiệu đường dẫn đặc biệt: Ký hiệu Ý nghĩa / Trở về thư mục gốc của website ./ Thư mục hiện tại của trang web sử dụng link (mặc định) ../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục 40
- 41. Ví dụ # 127.0.0.1/demo file A có link đến file B, vậy trong file A có HTML element: <a href=“URL”>liên kết đến B</a> URL = http://127.0.0.1/demo/Thu muc 1/file B.htm /demo/Thu muc 1/file B.htm ./Thu muc 1/file B.htm Thu muc 1/file B.htm 41
- 42. Ví dụ # 127.0.0.1/demo file B có link đến file C, vậy trong file B có HTML element: <a href=“URL”>liên kết đến C</a> URL = http://127.0.0.1/demo/Thu muc 1/ Thu muc 1_1/file C.htm /demo/Thu muc 1/Thu muc 1_1/file C.htm ./Thu muc 1_1/file C.htm Thu muc 1_1/file C.htm 42
- 43. Ví dụ # 127.0.0.1/demo file C có link đến file D, vậy trong file D có HTML element: <a href=“URL”>liên kết đến D</a> URL = http://127.0.0.1/demo/Thu muc 1/ Thu muc 1_2/file D.htm /demo/Thu muc 1/Thu muc 1_2/file D.htm ./../Thu muc 1_2/file D.htm ../Thu muc 1_2/file D.htm 43
- 44. Ví dụ # 127.0.0.1/demo file D có link đến file F, vậy trong file F có HTML element: <a href=“URL”>liên kết đến F</a> URL = http://127.0.0.1/demo/Thu muc 2/file F.htm /demo/Thu muc 2/file F.htm ./../../Thu muc 2/file F.htm ../../Thu muc 2/file F.htm 44
- 45. Ví dụ # 127.0.0.1/demo file F có link đến file E, vậy trong file F có HTML element: <a href=“URL”>liên kết đến E</a> URL = http://127.0.0.1/demo/Thu muc 1/ Thu muc 1_2/Thu muc 1_2_1/file E.htm /demo/Thu muc 1/Thu muc 1_2/ Thu muc 1_2_1/file E.htm ../Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/ file E.htm 45
- 46. Ví dụ # 127.0.0.1/demo file E có link đến file A ở vị trí xác định, vậy trong file A có HTML element: <a name=“positionB”></a> <a href=“URL”>liên kết đến A tai vi tri B</a> URL = ../../../file A.htm#positionB 46
- 47. Trình bày nội dung tài liệu HTML • Thẻ cơ bản – Thẻ xử lý văn bản • Định dạng chuỗi • Định dạng khối – Thẻ hình ảnh – Thẻ âm thanh • Thẻ danh sách • Thẻ liên kết trang • Thẻ kẻ bảng • DIV/SPAN
- 48. Tag kẻ bảng - Table STT Thẻ Ý nghĩa Ghi chú 1 <table> </table> Định nghĩa bảng 2 <tr> </tr> Định nghĩa dòng Phải nằm trong thẻ <table> 3 <td> </td> Định nghĩa ô Phải nằm trong thẻ <tr> 4 <th></th> Định nghĩa ô ‚êu đề Phải nằm trong thẻ <tr> <table border=“1”> <tr> <th>STT</th> <th>Thành phố</th> </tr> STT Thành phố <tr> 1 Hà Nội <td>1</td> <td>Hà Nội</td> 2 Hồ Chí Minh </tr> <tr> <td>2</td> <td>Hồ Chí Minh</td> </tr> 48 </table>
- 49. Tag kẻ bảng – Table (tt) • Colspan: Thiết lập độ rộng của ô cột • Rowspan: Thiết lập chiều cao của ô theo dòng <table border=“1”> <table border=“1”> <tr> <tr> <th>Name</th> <th>Name</th> <th colspan=“2”>Telephone</th> <td>Bill Gates</td> </tr> </tr> <tr> <tr> <td>Bill Gates</td> <th rowspan=“2”>Telephone</th> <td>3333333</td> <td>3333333</td> <td>2222222</td> </tr> </tr> </table> <tr> <td>2222222</td> </tr> Name Telephone Name Telephone </table> Bill Gates 3333333 2222222 Telephone 3333333 49 2222222
- 50. • Border: – thiết lập độ rộng đường viền cho thẻ <table> <tr> <td> <th> • Background – Thiết lập hình nền cho thẻ <table> <tr> <td> <th> • Bgcolor – Thiết lập màu nền cho thẻ <table> <tr> <td> <th>
- 51. Sử dụng thẻ table • Thiết kế giao diện cho website Logo Header Content Menu Footer 51
- 52. Các thành phần của một layout 52
- 53. Các loại layout phổ biến 53
- 54. Ví dụ: Sử dụng thẻ table 54
- 55. Topleft.png Top.png Topright.png left.png right.png bottomleft.png Bottom.png bottomright.png 55
- 56. 56
- 57. DIV / SPAN • Không mang ngữ nghĩa • Dùng để gom nhóm các khối phần tử. – DIV: tách khối – SPAN: không tách khối • Thường dùng với CSS
- 58. XML (eXtensible Markup Language) • XML: Ngôn ngữ đánh dấu văn bản • Làm dễ dàng cho việc chia sẽ / trao đổi thông ‚n qua internet, giữa các hệ thống. • Có khả năng tự mô tả 58
- 59. Ví dụ về một tài liệu XML <?xml version="1.0" encoding="UTF-‐8"?> <group> <student id=“0112123” > Thẻ con <name>Nguyễn Văn A</name> Cặp thuộc Znh = giá Thẻ gốc: </student> trị Bao toàn bộ tài liệu <student id=“0112124” > XML Thẻ <name>Trần Thị B</name> con </student> </group> 59
- 60. XHTML • XHTML: Extensible HyperText Markup Language • Chuẩn đưa ra bởi W3C (ngày 26/2/2000) • Là ngôn ngữ thoả XML + HTML • Cú pháp chặt chẻ hơn 60
- 61. HTML và XHTML • Các phần tử phải được lồng nhau tuyệt đối HTML <b> <i> This text is bold and italic </b> </i> XHTML <b> <i> This text is bold and italic </i> </b> 61
- 62. HTML và XHTML • Tên của thẻ đều phải viết thường • Tất cả các phần tử XHTML phải được đóng lại HTML <p>This is a paragraph <p>This is another paragraph XHTML <p>This is a paragraph</p> <p>This is another paragraph</p> 62
- 63. HTML và XHTML • Các phần tử rỗng cũng phải được đóng lại HTML This is a break<br> Here's an image <img src="happy.gif" alt="Happy face” > XHTML This is a break<br /> Here's an image <img src="happy.gif" alt="Happy face" /> 63
- 64. HTML và XHTML • Không sử dụng rút gọn HTML XHTML <input checked> <input checked="checked" /> <input readonly> <input readonly="readonly" /> <input disabled> <input disabled="disabled" /> 64
- 65. LOGO Ứng dụng phân tán Hết