Lập trình ứng dụng mạng - Bài 3: HTML cơ bản

HTML là một ngôn ngữ để mô tả các trang web.

 HTML là viết tắt của Hyper Text Markup Language

 HTML không phải là một ngôn ngữ lập trình, nó là một

ngôn ngữ đánh dấu

 Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu

(markup tags)

 HTML sử dụng thẻ đánh dấu để mô tả các trang web

pdf97 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 1727 | Lượt tải: 4download
Tóm tắt nội dung Lập trình ứng dụng mạng - Bài 3: HTML cơ bản, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
separate style sheet (file CSS)
  Trong các style element trong ph n u HTML
  Trong các style attribute trong các th  HTML
 36
Lập trình ứng dụng mạng
 S dng các thu c tính Style HTML
− S dng thu c tính CSS l ng vào các th  HTML. 
 37
Lập trình ứng dụng mạng
 S dng các thu c tính Style HTML
− Thu c tính background-color mi làm cho thu c tính bgcolor
 c li th i.
 38
Lập trình ứng dụng mạng
 HTML Style - Font, Color và Size
− Các thu c tính font-family , color và font-size xác nh font ch , 
 màu s c và kích th ưc c a v n b n
 39
Lập trình ứng dụng mạng
 HTML Style - Text Alignment
− Thu c tính text-align canh l  vn b n theo chi u ngang
 40
Lập trình ứng dụng mạng
 HTML Style - Text Alignment
− Thu c tính text-align làm cho th  c  li th i
 41
Lập trình ứng dụng mạng
 Các th  và thu c tính b  ph n i
− Trong HTML 4, nhi u th  và thu c tính b  ph n i (deprecated).
− Nó sưc h  tr  trong phiên b n t ươ ng lai c a HTML.
 42
Lập trình ứng dụng mạng
 HTML Links
− Giúpưi dùng nh p chu t  t trang này sang trang khác.
 43
Lập trình ứng dụng mạng
 HTML Hyperlinks (Links)
− Mt siêu liên k t (ho c liên k t) là :
  mt t , nhóm t , ho c hình nh 
  có th  click vào  chuy n n m t tài li u m i ho c m t ph n 
 mi trong ph m vi các tài li u hi n hành.
− Khi ta di chuy n con tr  trên m t liên k t trong m t trang Web, 
 mi tên s  bi n thành m t bàn tay nh .
− Liên k t ưc quy nh b ng th  .
− Th  có th  s dng trong hai cách:
 1. To m t liên k t n tài li u khác, s  dng thu c tính href
 2. To m t ánh d u trang trong m t tài li u, s  dng thu c tính 
 name
 44
Lập trình ứng dụng mạng
 Cú pháp HTML Link
− Mã lnh HTML cho m t liên k t ơ n gi n. Nó có dng nh ư sau: 
− Thu c tính href xác nh im n c a m t liên k t.
 Ví dụ
− Kt qu : Visit W3Schools
− Nh p vào liên k t Visit W3Schools s liên k t n trang 
 W3Schools.
 45
Lập trình ứng dụng mạng
 HTML Links – Thu c tính target
 − Cú pháp :
 Linked content 
 − Thu ộc tính target c ủa tag 
  name : t i trang web vào frame có tên NAME
  _blank : t i trang web vào c a s  mi
  _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
 − Ví dụ :
 46
Lập trình ứng dụng mạng
 HTML Links – Thu c tính target
− Các thu c tính target xác nh n ơi  m tài li u liên quan.
− Ví d: m  tài li u trong m t c a s  trình duy t m i hay m t tab 
 mi:
 47
Lập trình ứng dụng mạng
 HTML Links – Thu c tính name
− S dng  ánh d u trang (bookmark) trong m t tài li u HTML.
 Lưu ý:
  HTML5 s  dng thu c tính id thay vì thu c tính name  ch nh tên 
 ca m t neo (anchor). Thu c tính id cng ho t ng trong HTML4.
  Bookmarks không ưc hi n th , nó vô hình v i ng ưi c.
 Ví dụ:
− Mt anchor ưc t tên trong m t tài li u HTML:
− To m t liên k t n "Useful Tips Section" trong cùng m t tài li u: 
− Ho c t o ra m t liên k t n "Useful Tips Section" t  mt trang khác:
 48
Lập trình ứng dụng mạng
 Ví d
− To mt liên k t bng hình nh
 49
Lập trình ứng dụng mạng
 Ví d: Liên k t v i m t v  trí trên cùng m t trang
 50
Lập trình ứng dụng mạng
 HTML Images
− Chèn hình nh vào tài li u HTML
 51
Lập trình ứng dụng mạng
 HTML Images
− Chèn hình nh ng vào tài li u HTML
 52
Lập trình ứng dụng mạng
 HTML Images
− Chèn hình nh t a ch  trang web khác vào tài li u HTML
 53
Lập trình ứng dụng mạng
 HTML Images
− Canh l  hình nh trong v n b n
 54
Lập trình ứng dụng mạng
 HTML Images
− To mt liên k t bng hình nh
 55
Lập trình ứng dụng mạng
 HTML Images
− To hình nh b n , mi khu v c là mt hyperlink
 56
Lập trình ứng dụng mạng
 HTML Image Tags
 57
Lập trình ứng dụng mạng
 HTML Tables 
− Tables ưc nh ngh a v i th  
− Mt table ưc chia thành:
  Các dòng (v i th  ), 
  Mi dòng ưc chia thành các ô (v i th  ). 
  td là vi t t t c a "table data". 
 58
Lập trình ứng dụng mạng
 HTML Tables 
 59
Lập trình ứng dụng mạng
 HTML Tables - Border
− Nu không ch nh thu c tính border, table s hi n th  mà không 
 có border. 
 60
Lập trình ứng dụng mạng
 HTML Tables - Border
 61
Lập trình ứng dụng mạng
 HTML Tables - th
 62
Lập trình ứng dụng mạng
 HTML Tables - Caption
− Table vi chú thích (caption)
 63
Lập trình ứng dụng mạng
 HTML Tables – tách + tr n dòng c t
 64
Lập trình ứng dụng mạng
 HTML Tables – Cell padding
− To không gian tr ng gi a n i dung trong cell v i border.
 65
Lập trình ứng dụng mạng
 HTML Tables – Cell spacing
− S dng cellspacing ng cách gi a các cell.
 66
Lập trình ứng dụng mạng
 HTML Tables – frame
− Kim soát border quanh table.
 67
Lập trình ứng dụng mạng
 HTML Table Tags
 68
Lập trình ứng dụng mạng
 HTML Lists
− Gm danh sách ưc s p x p có th  t và không có th  t
 HTML Unordered list : danh sách không có th  t
  Bt u v i th  . 
  Mi m c danh sách b t u v i th  . 
  Các m c danh sách ưc ánh d u bullets (hình tròn nh ).
 69
Lập trình ứng dụng mạng
 HTML Ordered list
− Danh sách có th  t bt u v i th  . 
  Mi m c trong danh sách b t u v i th  . 
  Các m c danh sách ưc ánh d u b ng con s .
 70
Lập trình ứng dụng mạng
 HTML Definition Lists
− Th  nh ngh a m t danh sách t nh ngh a.
− Th  s dng k t h p v i:
  (nh ngh a các m c trong danh sách) 
  (mô t  các m c trong danh sách):
 71
Lập trình ứng dụng mạng
 HTML Forms
− Truy n d  li u n m t máy ch .
− Form có th  ch a các thành ph nu vào nh ư: text fields, 
 checkboxes, radio-buttons, submit buttons,... 
− Form c ng có th  ch a các thành ph n: select lists, textarea, 
 fieldset, legend, label.
 72
Lập trình ứng dụng mạng
 HTML Forms and Input
− S dng ưi dùng nh p ki u d  li u u vào cho trang web.
 Text field : ngưi dùng có th  vi t v n b n trong m t text field.
 73
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
− Thành ph n quan tr ng nh t c a form là input
− input ưc s  dng  ch n thông tin ng ưi dùng.
− Thành ph n input: textfield, checkbox, password, radio button,…
 Text Fields
 74
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Password Field
 75
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Radio Buttons
 76
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Checkboxes 
 77
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Submit Button
– Gi form d  li u n m t máy ch . 
– D li u ưc g i n trang ưc quy nh trong thu c tính action
– file trong thu c tính action s x lý các d  li u input nh n ưc
 78
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Drop-down list đơ n gi ản
 79
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Drop-down list với giá tr ị ch ọn s ẵn
 80
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Textarea : t o iu khi n nh p li u v n b n g m nhi u dòng.
 81
Lập trình ứng dụng mạng
 HTML Forms - The Input Element
 Button : to ra m t nút
 82
Lập trình ứng dụng mạng
 HTML Frames
− Frames: giúp hi n th  nhi u trang HTML trong cùng m t c a s 
 trình duy t. 
− Mi trang HTML g i là mt frame, m i frame c l p v i nh ng 
 frame khác.
− Khó :
  Frames không ưc h  tr  trong phiên b n t ươ ng lai c a HTML.
  Frames khó s dng (in toàn b  trang là rt khó ).
  Các nhà phát tri n web ph i theo dõi nhi u trang HTML.
 83
Lập trình ứng dụng mạng
 HTML Frames
 Vertical frameset : khung th ng ng v i ba trang khác nhau.
 84
Lập trình ứng dụng mạng
 HTML Frames
 Horizontal frameset : khung ngang v i ba trang khác nhau.
 85
Lập trình ứng dụng mạng
 HTML Frames
 Nested framesets : ba file kt h p trong các dòng và ct.
 86
Lập trình ứng dụng mạng
 HTML Frames - Navigation frame
− To frame u h ưng ch a danh sách liên k t v i frame th  hai.
− File là "tryhtml_contents.htm " ch a ba liên k t:
− Frame th  hai s  hi n th  các tài li u liên quan
 87
Lập trình ứng dụng mạng
 HTML Frames - Navigation frame
− Khi click Fame b thì khung frame bên ph i s  chuy n n trang 
 frame_b.htm
 88
Lập trình ứng dụng mạng
 HTML Iframes
− Hin th  mt trang web bên trong m t trang web.
− Cú pháp:
− URL: tr  ti v  trí ca các trang riêng bi t.
 Iframe - Height and Width
− height và width xác nh chi u cao và chi u r ng c a iframe.
− Giá tr ưc quy nh là pixels ho c ph n tr m ("80%").
 89
Lập trình ứng dụng mạng
 HTML Iframes
 90
Lập trình ứng dụng mạng
 Iframe - Remove the Border
− Thu c tính frameborder hi n th  ho c không hi n th  ưng vi n.
− Thi t l p giá tr  thu c tính là "0"  lo i b  ưng vi n:
 91
Lập trình ứng dụng mạng
 Iframe – link
− Thu c tính target tham chi u n thu c tính name c a iframe
 92
Lập trình ứng dụng mạng
 HTML Colors
− Màu s c là s kt h p ca ba màu RED , GREEN , BLUE .
 Color Values 
− S dng ký hi u th p l c phân (HEX) k t h p c a ba màu c ơ b n 
 Red , Green , Blue (RGB).
− Giá tr  th p nh t ca màu là 0 (HEX: 00). 
− Giá tr  cao nh t là 255 (HEX: FF).
− Giá tr nh là 3 c p s  hai ch  s, b t u v i d u #.
 93
Lập trình ứng dụng mạng
 HTML Colors - Color Values 
 94
Lập trình ứng dụng mạng
 HTML Colors - Color Values 
 95
Lập trình ứng dụng mạng
 HTML Colors - Color Values 
 16 Million Different Colors
− S kt h p c a Red, Green, Blue có giá tr  t 0n 255, cung c p 
 cho h ơn 16 tri u màu (256 x 256 x 256).
− Xem bảng màu trong sách.
 96
Lập trình ứng dụng mạng
Stop!
 97

File đính kèm:

  • pdfLập trình ứng dụng mạng - Bài 3_HTML cơ bản.pdf
Tài liệu liên quan