›
›

Bài giảng Thiết kế Web - Chương 2: Ngôn ngữ HTML

pdf 54 trang phuongnguyen 11570
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Chương 2: Ngôn ngữ HTML", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_web_chuong_2_ngon_ngu_html.pdf

Nội dung text: Bài giảng Thiết kế Web - Chương 2: Ngôn ngữ HTML

  1. 2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB Ngôn ngữ HTML ÌNH WEB R R P T Ậ GV: Trần Đình Nghĩa VÀ L Ế tdnghia1977@gmail.com KK T Ế THI 1 1
  2. 2/16/2011 Nội dung buổi học trước 1. Các bướcthiếtlậpwebsite 2. Thiết kế lập trình website • Thiếtkế giao diện 3. Xây dựng website dướigóc ÌNH WEB RR P T Ậ nhìn ngộ nghĩnh VÀ L Ế KK T Ế THI 2 2
  3. 2/16/2011 Nội dung 1. Giớithiệuvề HTML 2. Cấu trúc 1 tài liệu HTML 3. Các tag (thẻ) HTML 4. Hướng dẫnthựchànhHTML ÌNH WEB RR P T Ậ 5. Gợiýchọn đề tài cho đồ án VÀ L Ế KK T Ế THI 3 3
  4. 2/16/2011 Giớithiệu về HTML HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu vănbản, dùng để xây dựng một webpage. HTML: chứa các thành phần định dạng để báo cho browser biết cách hiểnthị một webpage. Một trang web thông thường gồm:  Dữ liệu (văn bản, âm thanh, hình ảnh, )  Các tag (thẻ) HTML để định dạng mô tả cách thứccácdữ liệuhiển thị trên trình duyệt ÌNH WEB RR Web broser: phântích & “hiểu” cáctags HTML, hiển thị nội dung P T Ậ web cho người dùng VÀ L Ế Webppgage HTML: 1 file *.htm || *.html KK T Ế THI 4 4
  5. 2/16/2011 Trình duyệt – Trình soạn thảo Web browser – trình duyệtweb Notepad ÌNH WEB RR P T Ậ VÀ L Ế Dreamweaver KK T Ế THI 5 5
  6. 2/16/2011 HTML cănbản - Tag (thẻ) HTML HelloWorld.html Hello world ÌNH WEB Hello world! RR P T Ậ It's my first html. VÀ L Ế KK T Ế THI 6 6
  7. 2/16/2011 Cú pháp, đặc tính của HTML Dữ liệu HTML tag:  Tên gợinhớ  Tag được quy định trong cặp dấu ngoặc và đóng  Mộtsố tag chỉ có 1 phần& khôngcódữ liệu: ,  Cấutrúclồng ÌNH WEB RR  Thuộc tính của tag cung cấp thông tin bắt buộc/tùy chọn cho tag P T Ậ  Mộtsố web browser không hiểumộtsố tag hoặcthuộctính VÀ L  Không phân biệt chữ hoa, thường Ế KK T  Bỏ qua cáckhoảng trắng Ế THI 7 7
  8. THIẾT KẾ VÀ LẬP TRÌNH WEB C Bắt đầuvàkết thúc 1 trang ấ utrúc m Phần đầutrang Phầnnội dung ộ t webpageHTML 8 Hello world! It's my firsthtml. Hello world 2/16/2011 8
  9. 2/16/2011 Cấu trúc 1 tài liệu HTML  : Định nghĩa phạm vi của văn bản HTML  : Định nghĩa các mô tả về trang HTML. Thông tin trong tag này không được hiển thị trên trang web  : Mô tả tiêu đề trang web ÌNH WEB RR P T Ậ  : Xác định vùng thân của trang web, VÀ L Ế nơi chứa các thông tin KK T Ế THI 9 9
  10. 2/16/2011 Các tag HTML cơ bản  Tag xử lý định dạng văn bản Tag danh sách Tag tạobảng Tag liên kếttrang ÌNH WEB Tag hình ảnh RR P T Ậ Tag âm thanh VÀ L Ế KK T Ế THI 10 10
  11. 2/16/2011 Tag xử lý định dạng văn bản  Tiêu đề - headi ng tags: , , , Đoạnvănbản: Định dạng chuỗi: , , , và Đường kẻ ngggang: Xuống dòng ÌNH WEB RR Hiểnthị cácký tự đặcbiệt P T Ậ VÀ L Ế KK T Ế THI 11 11
  12. 2/16/2011 Ví dụ: Tag Heading Nội dung hiện thị Trong trình duyệt ÌNH WEB RR P T Ậ Ngôn ngữ HTML VÀ L Trong trình soạnthảo Introduction_HeadingTag.html Ế KK T Ế THI 12 12
  13. 2/16/2011 Ví dụ: Tag Paragraph Thuộc tính của tag Paragrap hForma t. html ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 13 13
  14. 2/16/2011 Horizontal rules Thuộc tính : HorizontalRules.html 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ẻ ngggang noshade : Không có bóng ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 14 14
  15. 2/16/2011 Định dạng chữ  font>HllHello world  Hello world  This text is bold  This text is strong  This text is big  This text is emphasized ÌNH WEB RR  This text is italic P T Ậ  This text is small VÀ L Ế KK This text contains a 2 T Ế This text contains x 2 = a x a THI 15 15
  16. 2/16/2011 Định dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences TextFormat.html Computer Sciences ÌNH WEB Computer Sciences RR P T Ậ Computer Sciences VÀ L Ế Computer Sciences KK T Ế Computer Sciences THI 16 16
  17. 2/16/2011 Định dạng theo tag Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag, ) PreTag.html ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 17 17
  18. 2/16/2011 Các ký tự đặc biệt .Hiển thị các ký tự đặc biệt Result Description Entity name Entity number Khoảng trắng     & Dấuvà & & “ Ngoặckép " " Lớn hơn > > Ví dụ:Để hiểnthịđược: & “SGU” ÌNH WEB RR <Dai hoc sai Gon>  ; & P T Ậ ;   ; "SGU" VÀ L Ế KK HTML special character Google T SpecialCharacter.html Ế THI 18 18
  19. 2/16/2011 Tag hình ảnh  : Không có thẻ đóng  Các thuộc tính của tag : ImageTag.html scr : Đường dẫn đến file hình ảnh alt : Chú thích cho hình ảnh ÌNH WEB width: chiều rộng của hình khi hiển thị RR P T Ậ height: chiềudàicủa hình khi hiểnthị VÀ L Ế KK position: Top, Bottom, Middle T Ế border : Độ dày nét viền quanh ảnh (default=0) THI 19 19
  20. 2/16/2011 Tag hình ảnh Giá trị mặc định của 2 thuộc tín h width, hei ght là kíc h thướcthậtcủa file ảnh. Đặt ảnh nền cho trang web Sử dụng thẻ  ví dụ: ÌNH WEB RR VÀ L Ế KK T Ế THI 20 20
  21. 2/16/2011 Tag âm thanh  : Không có tag đóng Thuộc tính của tag Sound.html SRC : Đường dẫn đến file âm thanh Loop : Số lầnlặp(bằng -1 : Lặpvôhạn)  Thường đặt trong tag củaweb. ÌNH WEB RR Ví dụ: P T Ậ VÀ L Tag comment – Ghi chú trong HTML Ế KK T Ế THI 21 21
  22. 2/16/2011 Tag danh sách Types Tags Items in List Ordered List Unordered List Lis t Item User-defined List ,  Thuộctínhtype của các tag danh sách ÌNH WEB Xem các ví dụ RR P T Ậ VÀ L Ế KK T Ế THI 22 22
  23. THIẾT KẾ VÀ LẬP TRÌNH WEB Tag danhsách  d ahsc óth có sách Vd: Danh ứ t ự : 23 OrderedList.html 2/16/2011 23
  24. THIẾT KẾ VÀ LẬP TRÌNH WEB ahsc óth Danh sáchcó ứ OrderedListType.html t ự 24 2/16/2011 24
  25. 2/16/2011 Danh sách không có thứ tự Vd: Danh sách không có thứ tự: UnOrderedList.html ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 25 25
  26. THIẾT KẾ VÀ LẬP TRÌNH WEB ahsc t Danh sách ự đị nh ngh 26 ĩ a DefinitionList.html 2/16/2011 26
  27. 2/16/2011 Tag liên kết trang - URL  protoco l: //s ite address /direc tory /filename  Các dạng địa chỉ HTTP:     ÌNH WEB  httppy://server/directory/ RR P T Ậ  VÀ L  Ế KK T Ế  THI 27 27
  28. 2/16/2011 Tag liên kết trang - URL     a  ÌNH WEB  RR P T l Ậ VÀ L Ế KK T Ế THI 28 28
  29. 2/16/2011 Tag liên kết trang - URL Tag liên kết trang – Tag  Thuộc tính target củatag  name: tải trang web vào frame có tên là name  blank: tải trang web vào cửa sổ mới  parent: tải trang web vào cửasổ cha củanó  self: tải trang web vào chính cửasổ hiệnhành ÌNH WEB RR  top: tải trang web vào cửasổ cao nhất P T Ậ  Ví dụ: VÀ L Ế KK T Ế THI 29 29
  30. 2/16/2011 Phân loại liên kết Phânloại: Liên kếtngoại (external link) Liên kết nội (internal link) ÌNH WEB RR P T Ậ Liên kết email (email link) VÀ L Ế KK T Ế THI 30 30
  31. 2/16/2011 Liên kết ngoại (external link) PAGE B PAGE A Mouse-Click . ÌNH WEB Trang có địachỉ URL RR . P T Ậ PageB.html Trang hiệnhành VÀ L Ế KK PageA.html T Ế THI 31 31
  32. 2/16/2011 Liên kếtnội (internal link) anchor.html Text đại diện . Text đại diện Vị tri bat dau Mouse-Click abc123xyz . ÌNH WEB Vị tri bat RR dau P T . Ậ Nội dung trang khi abc123xyz . VÀ L Ế Nội dung trang khi bấm liên kết KK T Ế chưa liên kết THI 32 32
  33. 2/16/2011 Liên kết email (email link) Liên hệ Admin Mouse-Click ÌNH WEB RR P T Ậ VÀ L . Ế KK T Ế THI 33 33
  34. 2/16/2011 Phân loạiURL Địachỉ URL phân làm 2 loại: Địachỉ tuyệt đối: là vị trí tuyệt đối so vớimạng Internet Địachỉ tương đối: là vị trí tương đối so vớitrang web hiệnhànhđang chứa liên kết. Mộtsố ký hiệu đường dẫn đặcbiệt: ÌNH WEB RR Ký hiệuÝnghĩa P T Ậ / Trở về thư mụcgốccủasite VÀ L Ế ./ Thư mụchiệntạicủa webpage sử dụng link (mặc KK T định) Ế THI / Quay ra thư mục cha/ đingược1 cấpthư mục 34 34
  35. 2/16/2011 Phân loạiURL file A có link đến file B, vậy file A có HTML element: URL = ÌNH WEB RR /demo /Thumuc1/fil eB .ht ml P T Ậ ./Thumuc1/fileB.html VÀ L Ế KK Thumuc1/fil e B.ht m l T Ế THI 35 35
  36. 2/16/2011 Phân loạiURL file B có link đến file C, vậy file B có HTML element: URL = ÌNH WEB eC.html RR P T Ậ /demo/Thumuc1/Thumuc1_1/fileC.html VÀ L Ế ./Thumuc1_ 1/fileC.html KK T Ế THI Thumuc1_1/fileC.html 36 36
  37. 2/16/2011 Phân loạiURL file C có link đến file D, vậy file C có HTML element: URL = ÌNH WEB eD.html RR P T Ậ /demo/Thumuc1/Thumuc1_2/fileD.html VÀ L Ế ./// /Thumuc1_ 2/fileD.html KK T Ế THI /Thumuc1_2/fileD.html 37 37
  38. 2/16/2011 Phân loạiURL file D có link đến file F, vậy file D có HTML element: URL = ÌNH WEB RR /demo /Thumuc2/fil eF .ht ml P T Ậ ./ / /Thumuc2/fileF.html VÀ L Ế KK //Th/ /Thumuc 2/filFhtl2/fileF.html T Ế THI 38 38
  39. 2/16/2011 Phân loạiURL file F có link đến file E, vậy file F có HTML element: URL = humuc1_2_1/fileE.html ÌNH WEB RR /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/file P T Ậ E.html VÀ L Ế KK /Thumuc1/Thumuc1_2/Thumuc1 _2 _1/fileE.ht T Ế ml THI 39 39
  40. 2/16/2011 Phân loạiURL file E có lin k đến file A ở vị títrí xác định X, vậy file E có HTML element: ÌNH WEB URL = //// / /fileA.html#positionX RR P T Ậ VÀ L Ế KK T Ế THI 40 40
  41. 2/16/2011 Phân loạiURL Bài tập: ÌNH WEB RR P T Ậ Nội dung về: Phân loại các URL VÀ L Ế Reference from: GV. Trần Thị Bích Hạnh (2007) KK T Ế Bài giảng Môn Lập trình và thiếtkế web, K.CNTT, ĐHKHTN THI 41 41
  42. 2/16/2011 Tag kẻ bảng - Table Tên thẻ và các thuộc tính của thẻ Tên thẻ / T. tính Mô tả Khởitạo1 bảng Tạo1 dòng, thẻ nằmtrongthẻ Tạo1 ô tiêuđể, thẻ nằmtrongthẻ Tạo1 ô, thẻ phảinằmtrongthẻ Colspan Thiếtlậpô cóđộ rộng bằng bao nhiêu cột ÌNH WEB RR Rowspan Thiếtlập ô có độ cao bằng bao nhiêudòng P T Ậ Background Thiếtlập ảnh nềnchothẻ , , VÀ L Ế KK T BlBgcolor Thiết lậpmàunềncho thẻ , , Ế THI 42 42
  43. 2/16/2011 Tag kẻ bảng - Table Code STT Ho va Ten 1 Tran Van Coc 2 SimpleTableTag.html Le Thi Oi ÌNH WEB RR P T Ậ 3 VÀ L Ế Nguyen Le Let KK T Ế THI 43 43
  44. 2/16/2011 Colspan Table Tag CdCode ColspanTableTag.html Name "2"> Cellphone Dai Hoc Sai Gon 88352100 86251160 ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 44 44
  45. 2/16/2011 Rowspan Table Tag Code First Name: Dai Hoc Sai Gon RowspanTableTag.html Cellphone: 86251160 88352100 ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 45 45
  46. 2/16/2011 Attribute Table Tag Show Code Bac kgroun dTa ble Tag. html Background Puppy Piggy Kitty Mummy Bgcolor Puppy Piggy ÌNH WEB RR P T Ậ Kitty Mummy VÀ L Ế KK T Ế THI BackColorTableTag.html 46 46
  47. 2/16/2011 Mộtsố ví dụ Table ÌNH WEB RR P T Ậ VÀ L Ế KK Picture reference from: GV. Trần Thị Bích Hạnh (2007) T Ế Bài giảng Môn Lậptrìnhvàthiếtkế web, K.CNTT, ĐHKHTN THI 47 47
  48. THIẾT KẾ VÀ LẬP TRÌNH WEB M ộ ts ố íd ví ụ Table 48 2/16/2011 48
  49. 2/16/2011 Tham khảo http:// www.w3 sch ool s.com/ht ml/   css/tutorials/ Lisa Fiedor, HTML Basics, DELTA Instructional Services, ÌNH WEB 2007 RR P T Ậ Bài tập: VÀ L Ế KK T Ế THI 49 49
  50. 2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT BÀI THỰC HÀNH Ngôn ngữ HTML ÌNH WEB R R P T Ậ VÀ L Ế KK T Ế THI 50 50
  51. 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án  Bán sách  Quảng cáo phim, cho thuê đĩa ÌNH WEB RR P T Ậ VÀ L Ế KK . vn/ T Ế THI 51 51
  52. 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án . Bán game .net/ . Bán máy tính ÌNH WEB RR http:// www.viti n hp hongvu.com / P T Ậ VÀ L Ế KK T .com/ Ế THI 52 52
  53. 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án . Bán điện thoại di dộng . Các trang tương tự khác ÌNH WEB RR P T Ậ VÀ L Ế KK T Ế THI 53 53
  54. 2/16/2011 Bài thựchànhHTML  Bài tập: HTML cơ bản, Introduction Thời gian giao: Buổi đầuTuần02 Thời gian nộp: Buổi đầu Tuần 03  Yêu cầu: Viết ít nhất 4 trang *.html (1 homepage) Giớithiệuthôngtincánhânvàcácsở thích liên ÌNH WEB quan, chủđềtùy ý. RR P T Ậ Các trang phảiliênkếtvớinhauvàsử dụng tấtcả VÀ L Ế các tag đãhọc. KK T Ế THI 54 54