cơ bản về HTML

BÀI 1: C CuuDuongThanCong.com B N V HTML WEB1012 - Xây d ng trang Web Bài https://fb.com/tailieudientucntt M C TIÊU BÀI H C  Nh ng khái ni m v website: • Thành ph n c a trang web • Tên mi n, a ch IP • Client – server  Công vi c thi t k website  Nh ng ki n th c c b n v HTML CuuDuongThanCong.com https://fb.com/tailieudientucntt KHÁI NI M V WEBSITE CuuDuongThanCong.com https://fb.com/tailieudientucntt KHÁI NI M V WEBSITE  T p h p trang web (webpages)  Ch a v n b n, i t ng h a (âm thanh, hình nh, …)  c l u tr máy ch web (web server)  Truy c p thông qua Internet trình t web (ph n m m client) Cách th c hi n th trang web: Máy ch ch a web Web Client (trình t) URL HTML Web server CuuDuongThanCong.com https://fb.com/tailieudientucntt TÊN MI N, A CH IP c  M i m t máy tính tham gia vào m ng máy tính u gán m t a ch IP Các máy tính khác s có a ch IP khác  Có phiên b n a ch IP: 32 bit 64 bit  Tên mi n tên t ng ng v i a ch IP  Máy ch DNS n i th c hi n nhi m v ánh x gi a tên mi n a ch IP DNS 64.233.181.99 a ch IP www.google.co m Tên mi n CuuDuongThanCong.com https://fb.com/tailieudientucntt CLIENT – SERVER – WEB HOST  Client – Server lo i ki n trúc thông d ng cho nhi u lo i ng d ng m ng, ó: • Server – máy ch : Là máy tính chuyên cung c p tài nguyên, d ch v cho máy tính khác M t máy ch có th c dùng cho m t ho c nhi u m c ích khác Ph i c trì k t n i internet 24h/ ngày • Client – máy tr m: Là máy tính khai thác d ch v cung c p b i máy ch Vi c khai thác th ng hi n thông qua ph n m m CuuDuongThanCong.com https://fb.com/tailieudientucntt c c th c THI T K WEBSITE CuuDuongThanCong.com https://fb.com/tailieudientucntt THI T K WEBSITE Xác nh yêu c u & phân tích T ch c phác th o website B o trì Thi t k Graphic Tri n khai Thi t k HTML/ CSS/ Js Ki m th Vi t mã l p trình CuuDuongThanCong.com https://fb.com/tailieudientucntt THI T K WEBSITE  Xác nh u c u phân tích: • Là q trình thu th p phân tích chi ti t t t c yêu c u liên quan n website c n xây d ng • M c tiêu tr l i cho câu h i sau: • M c ích c a website ? • i t ng s d ng website ? • Website bao g m n i dung gì, liên k t gi a n i dung ? • u c u v hình th c cho website ? • … • a sitemap (c u trúc website) cho toàn b website 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt THI T K WEBSITE  Thi t k Graphic: • Thi t k q trình xác nh rõ v m t n i dung hình th c cho website • S n ph m c a q trình thi t k Graphic: • Thi t k d ng prototype (phác th o) giao di n cho t ng trang web (mock-up) • Thi t k m n giao di n t ng trang web (photoshop, flash, firework, …) 11 CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML  Là ngôn ng ánh d u siêu v n b n (HyperText Markup Language)  Là c s ho t ng c a web  Trình t c x lý mã HTML b c c nh d ng cho thành ph n (v n b n, hình nh, video, …) trang web  Xây d ng th d ng …: • Th óng th m • Ví d : …  T o ch nh s a HTML b ng công c so n th o v n b n: • Notepad • TextEdit 17 CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML  C u trúc th & thu c tính • HTML s d ng th ho c t khóa ( t d u < >) • Th m kèm theo th óng: … • Th óng: Mã HTML File BasicHTML.html th m c dw01lessons K t qu hi n th 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML  C u trúc trang HTML: Ph n mô t Ph n n i dung tiêu website My First Heading

My first paragraph.

• : nh ngh a ki u tài li u, giúp trình t hi n th web xác • …: n i dung mơ t trang web • …: hi n th n i dung trang web • …: th HTML, hi n th n i dung nh m t nhóm •

…

: th HTML, hi n th n i dung nh m t o n v n b19n CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML Vi t mã HTML trình so n th o Notepad Trang web hi n th trình t firefox 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML  Phân c p th HTML: • Th HTML tuân theo th t phân c p th • các th khác n m d i CuuDuongThanCong.com https://fb.com/tailieudientucntt NH NG THÀNH PH N C A HTML CuuDuongThanCong.com https://fb.com/tailieudientucntt NH NG THÀNH PH N C A HTML  Nguyên t c chung làm vi c v i thành ph n HTML: • S d ng nguyên t c th m , th óng • N i dung hi n th n m gi a th • M t s thành ph n khơng có n i dung hi n th • M t s thành ph n HTML b t bu c ph i có thu c tính  Ví d : T N

Đ N T dung web trang

23 CuuDuongThanCong.com https://fb.com/tailieudientucntt NH NG THÀNH PH N C A HTML  Thu c tính c a thành ph n HTML: • Thu c tính cung c p thêm thơng tin v m t y u t • Thu c tính ln ln quy nh th b t u • Thu c tính n tên / c p giá tr nh : name="value” This is a link  M t s thu c tính th T tính ng g p c a thành ph n HTML: Đ Quy quan CSS) id C quan CSS) Style Xác title Quy tooltips) class hay CuuDuongThanCong.com tính cho thành tính id cho thành tính (liên CSS Inline cho thành thông tin thêm cho thành https://fb.com/tailieudientucntt (liên ( THÀNH PH N LÀM VI C V I V N B N  M t s thành ph n HTML làm vi c v i v n b n: • HTML Headings • HTML Paragraphs • HTML Text Formatting • HTML Links 25 CuuDuongThanCong.com https://fb.com/tailieudientucntt THÀNH PH N LÀM VI C V I V N B N  HTML Headings: • c s d ng nh ngh a thành ph n tiêu • c nh ngh a t th n This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 26 CuuDuongThanCong.com https://fb.com/tailieudientucntt THÀNH PH N LÀM VI C V I V N B N HTML Paragraphs: • Tài li u HTML c chia thành nhi u o n • o n c nh ngh a b i c p th

This is a paragraph.

This is a paragraph.

This is a paragraph.

27 CuuDuongThanCong.com https://fb.com/tailieudientucntt THÀNH PH N LÀM VI C V I V N B N HTML Text Formatting: • S d ng and cho bold, italic nh d ng u ra, nh d ng

This text is bold

This text is strong

This text is italic

This text is emphasized

This is computer output

This is subscript and superscript

28 CuuDuongThanCong.com https://fb.com/tailieudientucntt THÀNH PH N LÀM VI C V I V N B N HTML Links: • S d ng nh ngh a d ng siêu liên k t (link) • Liên k t có th s d ng thông qua m t t , c m t , hình nh, x y s ki n click s chuy n t i tài li u khác • Theo m c nh, liên k t s xu t hi n nh sau t t c trình t: • M t liên k t unvisited c g ch d i màu xanh • M t liên k t ã xem c g ch d i màu tím • M t ho t ng liên k t c g ch d i màu Visit W3Schools.com! 29 CuuDuongThanCong.com https://fb.com/tailieudientucntt T NG K T  Trang web m t trang n i dung, có th ch a: ký t , hình nh, âm thanh, flash i t ng h a khác H u h t trang web c trình bày d a chu n HTML  HTML ngôn ng ánh d u siêu v n b n (HyperText Markup Language), c s c a trang web  Khi s d ng HTML c n tuân th theo lu t phân c p th  Khi thi t k website, nên b t u b ng vi c t o m t site t ng ng v i tr c 30 CuuDuongThanCong.com https://fb.com/tailieudientucntt XIN C M N! 31 CuuDuongThanCong.com https://fb.com/tailieudientucntt ... Mã HTML File BasicHTML .html th m c dw01lessons K t qu hi n th 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt C B N V HTML  C u trúc trang HTML: Ph n mô t Ph n n i dung CuuDuongThanCong.com https://fb.com/tailieudientucntt NH NG THÀNH PH N C A HTML CuuDuongThanCong.com... n HTML làm vi c v i v n b n: • HTML Headings • HTML Paragraphs • HTML Text Formatting • HTML Links 25 CuuDuongThanCong.com https://fb.com/tailieudientucntt THÀNH PH N LÀM VI C V I V N B N  HTML