Scribd
Upload
139 views20 pages

Web Design & Development Practical

The document provides a comprehensive guide on setting up a web development environment, including installing necessary tools like Visual Studio Code and XAMPP. It covers HTML basics, including creating a simple webpage, using browser developer tools, and adding semantic elements for accessibility. Additionally, it discusses CSS styling, layout techniques using Flexbox, and creating navigation bars for responsive design.

Uploaded by

islaamam55
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
139 views20 pages

Web Design & Development Practical

The document provides a comprehensive guide on setting up a web development environment, including installing necessary tools like Visual Studio Code and XAMPP. It covers HTML basics, including creating a simple webpage, using browser developer tools, and adding semantic elements for accessibility. Additionally, it discusses CSS styling, layout techniques using Flexbox, and creating navigation bars for responsive design.

Uploaded by

islaamam55
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
et Le yates: *+ Seti Up Seuy, Development’ wevonment é- >O0 ‘ec Hive: Yee nfo intl’ touls, Confijuye he entivenmend, an creaLe a bode YM gfe. DVachiol #A Trstalleg Tools cul Environnent” Seip s. 4-Snslall ys cock: Download and caSlall Visual Atulio Cece 2-Ingtall bucab Server: Tnjted xampp er cofmp er PUP acl SL _Suefport - 3- Intall Bierrser: he « melern bewser fite Chrome Fite fox fer web cherelepment - ‘ Validation: x Open VS [Link] ensure XAipps_ Mpache Server #3 Youmigh- x Ohm Chrome ancl * check Lebpeystl Le Cenfitrr he Lol sever 4 woorkif | tactical #02 | ee a baste YT Fanplale s- B Cn ys Cede. onc! cane a new fe varie! tralex-htbnl - g-—lorife. jhe I lew basic Wont structue - ttl <|DOCTWE tel > 2 head» _ Basic im Template 2/pte > 2 hens! > < heolf > 2h1> Welcome fo web Design £/b1> Ths 4 a basic Mim Jaje 4 /P> ele 2 /boolf > 3- Swe fe _file ond oer if in a brneser pf simple webpage wih a heactinp ond ore Dacticl 7B Lxploring Browser Developer Tools - SHtefss 4- Open fer Him. file 9 Chrome. 2- Rit -Click anywhere on We Pye andl Chik Tobfect or press F1Q- | 3-9n He Flennds tb, Jeu Can view on ‘tthe Dom ree “panicaldy- 4- Make. o- tenporor] change by eld The teat 4 jer “e Ly ‘in We am Odput: Observe fhe bye changes made fe He webpage aicetty Browph The browser at Creetiof a Basic .}IMb SS oes cpr > Objective : . je basic Wim. tops such 2s deaoleph., Paveppophs,, Links ere” babs. nclica # O Addef Heacltifs andl Pari ffafles L-Fatterd the indore tal file: hil HTML Basics < /ht> Zh2Qr Leomniy Mecclinys 2 /ha> 2P>MIL Adenls per UpperTend Mer kup Agpucte _ St 4 Wee fo create web Popes 4 /p> Pa Bais pap erpleving te basics q Hi | Dtbpul: Sag ge ae : Diffs ley ctescrpplive pai te Coty ee eT , "Wacica) # oS” Adds ‘ aA D Pe S yf Links tte nafs ge Add a cleckable Linke ard on ongfe i Hiral 2a hg 2 "httbs :Murc0- exon . ter" Hujel- * Wank’ visit Lranfples 2/a> 2br> Lim Ste 2"Wilps : [via plecchelolr tm]}2o0" abt = ‘Seomple Ime fe" Lxphetnalion: ie & tered > "bank ensures the lnk opews in a au _fob- 6 We att chiles previcles alterralive Zend fev ingpes. Olt puls A clickable Link ancl an image iplyed on fhe coelpafe - — Rectice # ob eee Ordeted % Unordlered Lis :- t- Crecte bib: Fo mn | Abienced Aists s- 2ha> Qrlaed List £/hR> Lol 2li> HIM 4 /li> 2lis Css 27> Zales Foeseipt 2lir 2 fol> £ha> Unorolared Lisl 2 /ha> 2uls b> It) Tok 2/hi> Lbhir Set Lwiterment —LlirLeom Win Basics 2) > __< ful> Sees * byoleeal and wnorclered Lats w1 ty fem Liplifed- : "Fria or Lha> wsled Lil «thay Zul > | ele ds Bey Zul» 2 lis Mim (2 [> hr css. < [p> 2 bis TaveSeript 2/hir 2/li> Lb > Backenol Zuls 2 Li> PAP 4/hi> Zli> My S% 2 Mi> a 2/ul> Spey [by Se z/al > | Output pS Ee and Lockeol /beckenc! techenolopes- ly Tables % FPonns EEE | 7s Oecddies. Bee aq Create Pa Buchue aL pa Jorms. in Him. A nated! Lit sateporifing — praend jes “ i fables A S on aes Stulent yn Jrmatinr Fede é Itmed eha> Stuolent Table. Zable herder 2 1 > otr> Zth> Name 2/th> 2th > Mo 21th > ch bfede 2 /h> Ztt> Ltd > plice “2 /fel> ztd > Qo < (els Ltl> A 2/tol> Ltr eft > etd> Bob 2 /Yel> Ztol> ga Hel» J Z to)? B z/td>s 2/7Tr> _2/toble> output: | Outpul: ef tg eo: jets and a. Bubnjp butlen- A able, with rows andl Chun reprosentig steel es acticad # Desig Povens s- Steps: f- fold & pom: html 2ha> Student Kepstecton 2 Shas 4 perm > Z ba per 2 Name >Neme: £2 /la hel > . ZN uit pr 2 “teat” jos ‘nase name = Name > . “bys 42brs Zk fer = Emails 2 / Label > Z input ipe 2 temas tole ‘oail. Viames emails —— 2brs iby > cbutlon Ife = "sebnid "> keggter < butts ae fom wih pext anf email tip = + Sermntic MM 4% Accessibilify.— > & fect ties ‘ of the Aemantic _elenendh and ensute webpage ccceessibi lt x Vactica p #fLo =e Adllieg Semantic. Elements: _|__ Stee, f- Me ehevsky >. Lmains, zsechien>, andl JeeFers 77S : Aas Welcowie fo “Yy Website <2 /ht> 2 /hecdler> be 42medin> ez sections ——— ep 2ha> About ys We Piovicle web a sedprerd te vila Z/p> : 2 /sectien > : | J main > se _____£_fovter > Sega ya aaa : 4 fpreter> — Otpul’s pees /Seleen reaoless. Ou We p well Structured oupate with Hic jer heoole oY, Wain , and, F eler- —— Raclical #14 Addig Accessibililg Featores:- : Steps: _4-" the the prin - bebd attribute anc! ensure alternative fext ae cmejes: _Iiml ee cing Sie = “inogfe dy ald > Sinf ingfe pr Pecatlitys a we bof» Ps Pye. hint anita Label = "Nauijak pe / the Mein hye sclick hele zfar Lnhercos! access DiliTe i oy Accessihle jo Des why ! Md Mav chollis anol Alels ie My bus i | Dae Yea) Fd ‘42 | | | | )y hol | e pa w | “a hel’ fe “Username ~~ Weynantl + “Labels | . ” ” } einful } ‘ih tel ") » “Mer nanny ne Af co eserncne” Pacarader.” Ener cserne me” > yy ¥ brs cUibel or ayy!” Passer! 5 - io > J npel Mle e “Pasir fj . nn Tae nol” Ma whelolea ébyy «brs Jn hn ou Vidar te 's lutloy Ife a “sebmeea"s Submee LS patlu> 2 [form a accessible — form uth bebels aunol. Macehe haute Vs. é ena nee eee a Ee a ET * Apelftng Baste CSS => Objective ops. se css fe sie web Prcctical #13 | Lylne Siplin]s- Steps: t- Well inline styl po Yirid Elements : pinl 2P style > “Color shlte; pont-sife :20 px 5" > Wis ws a Aho!” pre, raf. Outpds — - av epi, text afpes. jn blue wit, hy ‘ Oy ler yen L ° pL PP pope eee Pesteebataele Ppt] — Ontpuls Lilernah CS¥ :- eps: tpl a este > section. within Zhead!> + him Z Style > hth § Cely : freen ; text = Lp: center cS PS font 2 feng : Pri, Sns—Serif 3 Z / site > BU chts element — are tes 7 ar and Peopisfis fo ‘ onl . Pruclica #15 Lternel CSS 3 Steps: ; 1- Creale a Vi named! Ailes: ess wit fhe [eter content: CSS. beclf § back frond color: #L4f4L4 ; fent “Se : BP ; Mg Color: reel s a-—_ Link it in fhe Hiri file + Khir ; - - 2 link l= ‘oflesheet bref = ye. ess > Outbul » a Sifts are offlied’ Je The entiye. ceebpape Via on extemal fie: | ¥ Maderctendiy te C58 Bo — rad. - > Objective ; Leam — her Ina pyos, pecltlerp, horelers, endl — content — work Hefeter ip the CSS pox - D, ica ¢ Lb Visyabipiyy the Box Meodlels Steps: t- Adbl a 4H ted colivs element’ fe _feer Hira fie: eos tml, ee Bee eye opfe 2 “wills: Qovprx:, _ ~ — hei : doo Px s Jj — backwSund- cler: Uighthlue ; ———} Pacliy t oll e boroler: "Spx soltol black ; ea margin: topn;"> his is a box mole excanple . Expluinalion: S We pacly alls Apace tins ide. ee ertel, — crtoundl the conLent. 6 Te borabr —_supourrcls He poole. OTe mraijin adh space vublsiole The elemenl. Opa’: . zee Observe — jhe Micha on. lucie arrunel jhe 2 dliv >. x Pactical # 17 — hefpustigg Woiffins % Packilnp. | __sepas:. = 4. fell canoer wit obifferen?” | magn and poclllg Velde; pe html z Ldly Siffe = “Wilh : 00 Pas pap: Lo Pus pachyound- Cofer : feechpulfs Podoting : to Px; messin; 30 Px; > 2 /di> aS Anofher__box wif Super fiddly ond wagin. aera! a Output SA The. two hones Lal. observe he offects of Afferent Velees.. Raclicab #18 Lxperinentig wile Borler SHyles s. Steps; 1 AY various border Ye po clenoil: html : dlp ste > boyoler: 3p clashed red: Paling: LoPxs "S Dashed Borolkr 2 Joliv> Zolv Sti > "horler: Spx clette! blue; Poclling : 15 px 3 "S Dotted! Borclr 4 Joliv> 2 clv she > "herder :hpn chuble eons padllig : Bopx;"> Double Bercler 2 divs ek ips Di fperod border Ales ale fg aarti fe. boxes- + Flexhox Lofout — Ohjecti lve: Learn how fo Wwe Flexbox fo. create reppon site Ayout Reactica) #14 Mtn Llems Horijontaly % Verily t Steps: 4- Creale a parent contamey wiff Flexbor: . Ait Zolv style= “Lospl: He x. f4 = Castles. center. or “pp ents be Zl Seo fx, och Wott - Color : Apiipray Weds Liv ih 2 "hacky Ljound © Le “phiblee: 2 Padding: dened > Centered gon splivy 4 fdly > s Lploinalion : : oe 6 Just; conturt; center Confers the —ifem heripnttdle ps reds + Ze on ce center Cenkrs fhe item wily —— ee Ontpyil: A box 4 centered! insicle The. Ceytainer- oa a a P abajatee Bars- Sep: 1- OMe a neviton Bar wig Flexbor: Zhav Site 2 diflog: “peas ; Jolly ify _ content space a4 hoch Nyotnd nae Gye! Prckele do pts La bref = a Ste = “Perf! Lleccradion : ‘mies > Heme a £4 hep 2"#" ste 2 “pert -clecaatin : hene;" > Ppeut 2/a> ca hie o"#" spe > "fext-cecomfion + none ip Services c/as La hiof = "2 “se ° “Sent clecosetion: none; s Contact L Ja > 2/nay> herijendel navifation ba wif wef Apeced Links.

You might also like