tổng quan về html trong lập trình web, Summaries of Acting

Download tổng quan về html trong lập trình web and more Summaries Acting in PDF only on Docsity! FO Thiét ké web: HTML,CSS,JQUERY,BOOTSTRA p THS: T6ng Thanh Van SV: Doan Quéc Bao - 1911060012 1. HTML Ia gi ? = HTML tam dich la ng6n ngiv danh dau siéu van ban. Ngudi ta thudéng su dung HTML trong viéc phan chia cac doan van, heading, links, blockquotes.... Mét Website thudng chtta nhiéu trang con va mdi trang con nay lai cé mét tap tin HTML riéng. Luu y, HTML khéng phai la ng6n ng@ lap trinh. Diéu nay cé nghia la né khéng thé thuc hién cdc chttc nang “déng”. Hiéu mét cach don gian hon, citing tuong tu nhu phan mém Microsoft Word, HTML chi cé tac dung bé cuc va dinh dang trang web. HTML khi két hop vdi CSS va JavaScript sé tré thanh mét nén tang vitng chac cho thé gidi mang. HTML document cé dudi file dang .html hoac htm. Ban cé thé xem chung bang cac trinh duyét web hién hanh nhu Google Chrome, Firefox, Safari,... Nhiém vu cla trinh duyét la doc nhting file HTML nay va “bién déi” ching thanh mét dang néi dung visual tré cho ngudi dting cé thé xem va hig HEADER NAVIGATION CONTENT SIDEBAR FOOTER + header: header la phan dau tién cila trang web, chia logo trang web, banner chinh ngang, menu phu nihu théng tin, 6 tim kiém, ngay thang, thoi fdt,.. + navigation: thanh diéu hudng (hay la menu chinh), la mat thanh ngang, chita cdc myc chinh (thé loai chinh) cla trang web. Phan menu nay rat quan trong giip nguoi ding va co ché tim kiém dinh hinh hiéu 16 vé cau tric website cla ban. * content: chia ndi dung chinh website, « sidebar: thanh bén, chia céc phan ién quan dn ndi dung chinh nhw céc menu phy, cdc bai viet lin quan, quang céo,... M6t sO website o6 1 thenh bén, 2 thanh bén hoéc hon nia la tly theo bd cuc, « footer: phan chan (day) trang, chita thdng tin vé trang web nhu tinh trang ban quyén « Ngoai ra con nhigu thanh phan khéc, ban sé tu hoc duo théng qua kinh nghiém thu té khi tht ké va lam viée voi cac du an web. 1. Uu diém cia HTML _—— HTML duoc str dung dé tao b6 cuc, cau truc trang web. Né cé mot sé uu diém sau: Cé nhiéu tai nguyén hé tro vdi cong déng ngudi ding v6 clung |6n Cé thé hoat déng muot ma trén hau hét moi trinh duyét hién nay Hoc HTML kha don gian Cac markup st dung trong HTML thudng ngan gon, cé dé déng nhat cao Su dung m& nguén mé, hoan toan mién phi HTML la chuan web dugc van hanh béi W3C Dé dang dé tich hap vdi cdc loai ngdn ngit backend (vi du nhu: PHP, Node js,...) — Chuong trinh NotePad++ = - Notepad ++ la mét céng cu soan thao mién phi duoc yéu thich. Day la phién ban manh mé hon ctia phan mém Notepad mac dinh ban cé thé tim thay trong Windows. N6é bao gém mot sé tinh nang nhu sé déng, ma mau, goi y va mét sd céng cu httu ich ma ting dung Notepad tiéu chuan khéng cé. Do vay Notepad ++ la tng dung ly tuéng cho ngudi thiét ké web va cAc nha phat trién front end. — 2. CSS Ia gi? = CSS la chi viét tat cla Cascading Style Sheets, no la mét ng6n ngif dugc st dung dé tim va dinh dang lai cac phan tt dugc tao ra bdi cac ngon ngif danh dau (HTML). Noi ngan gon hon Ia ng6n ngif tao phong cach cho trang web. Ban cé thé hiéu don gian rang, néu HTML dong vai tro dinh dang cac phan ttr trén website nhu viéc tao ra cac doan van ban, cac tiéu dé, bang,...thi CSS sé giip ching ta cé thé thém style vao cac phan ttr HTML do nhu déi b6 cuc, mau sac trang, déi mau ch&, font cht, thay déi cau truc... CSS dugc phat trién bdi W3C (World Wide Web Consortium) vao nam 1996, vi HTML khéng duc thiét ké dé gan tag dé gitip dinh dang trang web. Phuong thtrc hoat d6ng ctia CSS la no sé tim dua vao cac vung chon, vung chon co thé la tén mét thé HTML, tén mét ID, class hay nhiéu kiéu khac. Sau dé 1a n6 sé ap dung cac thuéc tinh can thay déi lén vung chon do. 2 ee <A 15 Tac dung cua CSS Ia tao cho website co giao dién nhu y mu6n va khéng Iam réi ma ngu6én HTML trén web voi cac dinh dang CSS (nhu in dam, in nghiéng, gach chan, mau chia...). Ngoai ra CSS con gitip: || i ie gon gang va tdi uu. Tach biét dugc web vdi CSS dé dé dang cap nhat ndi dung ma khéng phai lo vé dinh dang bai viét. | Ma nguén HTML cua web duoc 16 <!DOCTYPE html> <html> <head> <titlexay dyng website véi HTML, CSS va JevaScriptsjtitle> </nead> <body> <hbllebsite con gian cle tui</hi> <poHelle World! By 18 website don gién cle </o0dy> «fate Website khéng co CSS a=la 0 o Website don gian ctia tui Hello World! Day la website don gid: ca til < DOCTYPE hems chend> chew etitlesXsy dung uebsize vét HTML, CES va Javaseript</tstle> background-color: LigrtbLues ha € cles 65 ; 3 verdaras 265 eoosy> chet ote: vine Latest epsvallo horld! Say 1a website den aida cla tua </2 aan efosdy> <html> Website c6 CSS @= . S O BB Hello World! Bay I& website gon gian ctia tui! —— 2. Cau truc don gian cua CSS Selector{ properties: value; : la cAc déi tugng ma ching ta muén tac d6ng vao. VD: div,p hay cac class,id trong HTML. : la cac thuéc tinh trong css nhu: backgorund,color,... : la cAc gia tri cla thuéc tinh. 3. JQUERY a <a ——aa—aarr lll 3. JQUERY Ia gi? Duoc phat hanh vao 1/2006 tai BarCamp NYC bdi John Resig, jQuery la thu vién JavaScript phé bién ( \ nhat duoc st’ dung ngay nay. jQuery la mét tap hop Code JavaScript (thu vién JavaScript) nhanh, nho va giau tinh nang. N6 lam cho moi hoat déng nhu chuyén déi va thao tac : tai ligu HTML, xu ly su kién, hoat hinh va Ajax jQuery don gian hon nhiéu vdi API dé str dung, hoat d6éng trén v6 sé trinh duyét. Véi su két hop gitra tinh linh hoat va kha nang mé réng, jQuery da thay déi cach hang triéu ngudi viét JavaScript. — 3. Tinh nang cua JQUERY = Thao tac DOM — jQuery gitip dé dang lua chon cdc phan tt DOM dé traverse (duyét) mét cach dé dang nhu str dung CSS, va chinh stra néi dung cia ching bdi str dung phuong tién Selector ma ngu6én mé, ma dugc goi la Sizzle. Xu ly su kién — jQuery gitip tuong tac vdi ngudi dung tét hon bang viéc xt ly cdc su kién da dang ma khdéng lam cho HTML code réi tung l€n vdi cac Event Handler. H6 tro AJAX — jQuery gitip ban rat nhiéu dé phat trién médt site gidu tinh nang va phan héi tét bdi st dung céng nghé AJAX. Hiéu ung déng — jQuery di kém védi rat nhiéu hiéu ting déng dep ma ban cé thé st dung cho cac website cia minh. Gon nhe — jQuery la thu vién gon nhe - né chi cé kich c6 khoang 19KB (gzipped). Dugc hé tro hau hét bi cac trinh duyét hién dai — jQuery dugc hé tro hau hét béi cdc trinh duyét hién dai, va lam viéc t6t trén IE 6.0+, FF 2.0+, Safari 3.0+, Chrome va Opera 9.0+. Cap nhat va hé tro cdc céng nghé modi nhat — jQuery hé tro CSS3 Selector va cli phdp XPath co ban. — 3. Bootstrap a. <a 4. Lich su cua Bootstrap = Bootstrap la san phaéam cua Mark Otto va Jacob Thornton tai Twitter. NO dugc xuat ban od are nhu la mdtma nguén moévao ngay- 19/8/2011 trén GitHub. Tén goi ban dau la Twitter Blueprint.. ———a—aarr lll 4. Bootstrap la gi? as Cj Bootstrap - Bootstrap |& mét framework bao gém cac HTML, CSS va JavaScript template dung dé phat trién website chuan responsive. - Bootstrap cho phép qua trinh thiét ké website dién ra nhanh chéng va dé dang hon dua trén nhitng thanh t6 co ban san cé nhu typography, forms, buttons, tables, grids, navigation, image carousels... - Bootstrap |& mot bd suu tap mién phi cua cA4c ma nguén me va cong cu dung dé tao ra mét mau webiste hoan chinh. Vdi cdc thudc tinh vé giao dién duoc quy dinh san nhu kich thudc, mau sac, d6 cao, dé réng..., cdc designer cé thé s4ng tao nhiéu san phém mdi mé nhung van tiét ki€m thdi gian khi lam viéc vdi framework nay trong qua trinh thiét ké giao dién website. — 30 Boo rap Gitta mu6n van tng dung thiét ké website hién nay, Bootstrap van cé kha nang canh tranh cao Ia nhoé nhting dac diém néi bat sau: Dé dang thao tac Tuy chinh dé dang Chat lugng san phaém dau ra hoan hao DO tuong thich cao eee 4. Cach cai dat Bootstrap [:} a Bootstrap Cach cai dat va su dung Bootstrap nhu thé nao? Cé hai cach phé bién dé tai Bootstrap vé cua ban: Tai truc tiép ti trang cung cap Bootstrap : Download Compiled CSS and JS Théng qua CDN Bootstrap : nhing Bootstrap thing qua CDN (Content Delivery Network - mang phan phdoi_ ngj simgpM conten ele Wear an mh FO Em xin cam on thay va cac ban da chu y lang nghe!