Scribd
Upload
28 views59 pages

HTML Unit-4

Uploaded by

Anil Kumar
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
28 views59 pages

HTML Unit-4

Uploaded by

Anil Kumar
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
You are on page 1/ 59
mental coneept known a the Box Model lps us Agu out how ized and take up space on a We page tik tis eventing you see ona web pages ike somthing placed inside eee ee aed poston of that box ee deteined by fourimpartant things: nd the cent) Padding pe trovnd he bo, Borde border a athe content nd the border, Content (ve border padding content Border re akeady fared about borders We wiltake closer look at the other * as you contin this course sn more deta 35 fing blocks of box model? th of these options are the bi Eeencutcy Ore i 2 Binsin © @ a weve ° ‘ content’ with and heights to 100 task {segn the class nome as bot to the fist iv and fre wo box to the second it a bs Od Ine content’ with and eights set to 10 pies task ort othe it ath these iv oto tt a B82 Ord ipedding 2 sto gue an element te ame amount of Jon al sides you can wit tik this s sane, righe-s8pa, be i 7 this order: ist to [Popptes the pin of 0p Stone npn baton and ie ie ant to have diferent padding forthe horizontal Fran gpd. vertial oo ad Bottom) sides. OU DOs peddingis3 horthand for padding-top pading- | Chango an edge onl tte gue an slement the sna scant of pang n you can wre ke this [rept the padeing of 1p in this order: fist tothe the ight bottom and let ies fren padding for the horizontal ef nd Se acon tet es the margin ths order fst hem, bottom and left sides sotto hve eteret magia forthe horizon (et ompdgboten) ses yOu ae eis Poet ve ferent et top and bottom) ies you can i rete an ight are elated when bor sing R= a content box she (ppeopeny sett content Ste expe blo wath ofan clement wth oxsizing S89 jven below and select the total width of te the CSS code gi Ord tenes bt rent peed wa » border box 6 ty of an element with Box sting Proper + the C55 code given below and select the total width of io: a fo) Crews ‘order box. | pv oed pan ge nck border wth dete He sree rw td So ope tending anh to 2 rd aprentbebetom the top, 3px the bot jpeone nt Postar nee Bye lado with 2 2px horizontal offset wrod an 3h Dp est sh Pret ofet 2 1B Ota ey fe sass name b-box, add a text Border poo aatameoe 1 mI nt the Ss bor ae Seone th and ight 2009 soe are nck border with 2 dotted se. a Mengreenddopcon eben, van the tp, 306¢09 Morenita a son meitectwaceinthetest 2 he izontal offset ee sdius, and a white color. Pe eee px ods ol Mier © CRD + wevew {tables ave used to organize and represent dataina | gb Namel| Role [Monthy Sate lar format on 8 web page Telos are made up of rv taba [CHO tm urns, and these rows end columns are filed with data Iam Hacked Develop (noo | ‘dvi cal f [Rakes Frontend Deeper 4000 ‘conten of every table is enclosed by element specifies the| 22 co en ns B inaechint of the server-side appliation or resource tha 5 data when the user submits. This etal pat ofan HTML element cil fer collecting and procesing user input Aetion URL the below code snippet, rogister.j=p isthe server-side applcation/rezource that handles the ls sent when submit button is clicked, Sieeakent iat er eed eee Cee tract wth data The omental part of HTML : as sof form controls ee cin “ bute that defines the ype toe form cont wil creat. 8 crea 15. on overview ofthe clement in HTML Basic Syntax <: As shown in snippet, does TTT Erinn eee pe usages that be applied ‘element of ype sic Tet Input: 1 ‘ te forename" ner sieea> 1 put field of ype shenl>s Pasewort [Ee Pas penne srcforn mtbcn"peet™ act Lon"legi.3ee"> mation like passwords . ord txt input eld, butt 2 one significant iference: haracters entered into & ord flare masked or hen to protect the privacy nd secunty af the entered scoholdor~"Enter foto ‘cxmation, Below ean 7 iain ‘romp code snippet of om 7 atte inthe the np fl PN Ae tein ges of descriptions the sngle-line tert input wide a larger space for 7 fie Symtan sonra Tithe i ng and closing ag Sune cy Ord i Co ere GB cect eee uvevew . or BY) sed to ceat dropdown lens rslaton lt Informs so options, nd they can ect one or more tems fom the lement are enclosed with «pir 3 ption» tag. Below ian lrent in HIM: Base Syntax for Single x Selection Dropdown: Seamed Oe Q ariene tem inset = hy used for bia options ns : re ort aleced) cr fs oka re cave stwith types" £416" is used in HTML forms to create a file lect and upload files from therlocal devices toa noren te input tag's type attribute ic used to create # fle input type. attribute is set to £26 to indicate that this input is ens The tion. 12s attribute is used to idetily the file input when the form is tis used during the server-side processing ofthe form data attribute provides unique identifier forthe fle input element. is ing labels wth the input and for sing. be selected ve atibute sp Itheis iter the types of les displayed inthe file selection ‘eto alow only image files, you can sett to "amage/*". To sftibute allows users to select multiple se fle input field. This is useful when one needs to upload rm] Siete lat 7 ee jut non-eitable and ee 1m C35, deplay propery plays @crucel role in managing the i re Tayout and postioning of web page elements accepts s ntne, block, nine-blck, lex, gid thd table each with its own purposs Lets focus onthe display property when ts stole for va ow. and wel explore ather values later in this couse A hen you us ipay: lin it ensures that an element “ ec ony the width necessary forts content wAhout git takes up space ts fh MEE nc pith of oe gar I er ANY Hes gp exe on iQ t0 property Your task Add ahead seton and ink “inset element inside the or paragraph elements wth test wo parap Paragraph 1, Paragraph 2. Shot on OneP a es shen you set the display propery to block, element are arranged on Tang up the entre avable with This propery essentially ransorms elements = Tats Lisi lov! laments, ensuring they ocupy the fll with of their contsine res how you can set the spay property to Bock cr Your task ° Inline of fncex. nt Add ahead section atin fe eesti element inside the pody element and give ea dass name of container. a three lees W108 eS ang enponment ‘apple, Safle. OMe fs effec Se Annet con andl ip the fisted psoudo clos the dpa to block > das abgn the wth, Ao seth ep By tent olor of ed nat the ight a 2B indechin! © @ syegs OM nese youve probably encountered «shen text neatly wrapping around ssp images on many websites, but ot isis accomplished with CSS? Lotus know about float property which plays a crucial pages. t helps the ‘ements to sift ether othe toe the float property in CS: . 1 the float property rm] Sa Ore GB indechini © EJ syleess © MH logo © ° ae bly encountered text neatly | images on many websites < ‘rapping around images en many web 4 tut have you ever wondered how this is : someones : plished with CSS? ites med te normal flow of the dt us know about flat property which Boat carat yea cui len lament postonng aa 7 ecb pages els the elements to shit] 3 / —— rier ta te ight orthe lett of heir poet er. Here's ow you can use the float ie nora ow of When you set the float property to let for sent wl be moved tothe left and ert on the night of lated element nd ths floated element. rm] Sresenkentiait Ore In C55 clear property determines whether an element should be fosting elements. t's ofton positioned below any preceding floating ele {ised in conjunction withthe lst propery. The clear property accepts thee value: none -This the defolt value which makes the elem not move below any floated elements : «eft The elements moved dow to clear past ft oats oar 1 right-The element moved down to dear past ight y ‘oats + both The element is moved down to clear past eft end right Boats Here's the how you can use the cer propery Your task 3 ted and right flated classes and apply these ply 0 sod blue boxe of 1px width selec ‘ase and apply tse properties: a Seamed Lee B iden © GO veces 0 0 CD © The len property bk tlt Fetes to Saned blow te he ear oper Cools fr bot eatin Fiedapijed slow dh Cee inden © OD dear © 0 uw ements ona web page typically follow the order in which = they are writen in the HTML document, creating a natural write your code below flow on aweb page. However in CS, we have the power to ace ee eer eer ‘manipulate and control the position ofthese elements using é hea he position propery. + boy The position propery in SS ie pivotal in achieving this 4 ol and it accepts five distinc values ic relative, 4 fixed, absolut, snd sticky. By default, elements are Positioned a static which doesn't resutin any visible change in ther layout. Ost properties such as top bottom leftand right ere not applied when the poston is tat Heres how you can use the positon property Your task Inline 4 of cncex. news + Add ahead section and lnk the extemal syle Inside the body and give names of boxt and boxe with te {Ws being Box and Box 2 them class 2 content inside the inline 2 of fhe er eed Elements on a web page typically folow the order in which they inthe HTML document, creating @ natura flow on @ wweb page. However, in CSS, we have the power to manipulate ontol the poston of these elements using the position GB incextm © @ propery. ‘The position property in CSS is pivotal in achieving this control near 1s five cstnet valves: stati, relative, fixed, widens 100527 it tbbsolut, and sticky. By default elements are positioned as statie which doesn't result in any visible change in ther layout Offset properties such as top, bottom, left and right are not soples when the po how you can use the position propery: Your task and link the external styles file insert two dvs inside the body and give them class names of bort and box2 with tert content inside the divs and Box 2. Pm Seon) eee) nes 0 0 uvewe This is onal di Relative positioning allows you oe {0 adjust an element’ position relative to where it would naturally appear in the document flow. When you set an element's position to relative in CSS, you ‘an use offset properties ike top, right, bottom, and let to shi the element from ijefault position. Here's how «can use the position ‘property and sett to relative: Your task Relative postioning allows you to adjust an element's posto vamtive to where it would naturally eppearin the document flow. when you set an element's postion to relative in CSS, you con ere oet properties ike top, ight bottom, and eft to shit the avant from ts default postion Here's how you can use the postion property and sett to relative Your task Inline 4 of index. htm had nea section and tink the extemal 17°06 fie. vee a tra dvs insie te body each wth cise SASS seems 28 pestatic and prrelative ses ru wth casas patio ad a conten 28 2 vrais normal div with static positioning crm ares iv th class as peat ade ott positioning GB indexhind og reer Om yang © 6 MD wee weve me browsing verious ely noticed navigation remain in pce while a.youve spent websites, youve i ars and sidebars that aa et ofthe content sro This effects o achieved by fixed positioning sy seting a elements poston to Feed, searean make sayin ane spot onthe web vrage, regardless of scroing Ths CodeTantra erly useful for elements Te : that you want to keep ‘ te through th| I part navigation menus ‘users as they navigt how you can use the th fixed positioning visile content. Here's position property ments poston to fixed use oft properties ‘and left. These ‘you to precisely ton the web PAGE. you gein the ail ine top. right, bottom cffet properties ao Gn thefved oleme fe wtescaes (Cea G indexim © BD syiecs © in CSS that allows you a ~ "to position an element relative to its nearest ancestor * element that has a spe Absolut positioning i techni fied positioning, which means i's rot the default state positioning When you set an element's postion to absolute, you can . so make use of offset properties ike top, left ight, and bottom to precisely contro the element’ placement within its postioned ancestor. Here's how you can set the Position property to absolute: vee xian: ine z Your task + Add a no. section an ink the eaternal containing the test Top te GB indextrm © GD stjecs © © eee wevew Be iAbsolute positioning is a technique in CSS that allows you to position an eloment relative toits nearest ancestor element that has a specified postioning, which means it’s not the default static positioning, ‘When you set an element's position to absolute, you can also make use of offset properties like top, left, right, and bottom Ha to preciely control the element's placement within its positioned ancestor. Here's how you can set the position propery to absolute: ee Netti aie I Your task Inline 4 of index. nem + Add a head section and link the external tye + Inside the body of HTML document insert 2 iv element + Inside this container ai, add another div and give it 1s name of top-tight containing the tert Top Right. ae (ooo 7 Sticky Positionir queblend ofbehavors, | a, ed postioning. sticky positioning CSS oles a but then trastlon 1 fiaed position ence the| page scold 16a specie oft Your task i “ Using type selector, sc he body and apply these properties * Set the height © 1500 ss selector, select the sy navbar as and apply apply te postion of sky 1 set the op oft oO and eto 0px color to Back a Se umen cy ABHISHEK ° eee uveview G indexhint © BD sya ays» major ole when it ‘ores to determining the stacking order of laments ona wette yo webpage parlor when they ovelap. Elements with higher zindex values ae positioned above elements with by def the znd vale i set to auto which mane ha enteevtis 25 lement ce tacked based on thelr onde inthe HTML rma cument However, this 2-index property only taker eect when te postion value et 0 relativ, fixed, or beolte 11 you can se the zndex propery Your task Inne of inde. nem + Add a hee vction ad nk the enteral st + Inside the body of HTML document, ad wo d's sch wth dint cls names as bot and box? and Seamed ered GD evew tn CS, the asindex property pays @ major ole when it comes to determining the stacking order af elements ona web page, carly when they everap Elements with higher index sluts are postioned above elements wth lowe values. by etal the index value ie et to auto, which means that ‘clement are tacked based on ther orerin the HTML document. Homever, thi zindex property oly takes fect when the poston value fatto relative fixed cr absolute, Here's how you can use the z-index propery Cement wth zindex property sett 2 will tack upon element vith index ce 1. Your task "Add hed scion and ink the external sty10.c fle Inside the dy of HTML document. dd two v's, each vith distinct class names ax box an box? ond wit text Certs Box and Box 2. t nine 2 of a Seamed eed (Ones In C55, leis commonly referred to a¢Flexbox. Flexbox 3 one-dimensional layout | ‘ode! designed to create flexible and complex layouts. It helps to align content dynamically within a container, even f the sizeof the elements is unknown itis particulary useful in cresting responsive and dynamic web layouts. In a Flexbox layout, We wil hve a container andthe tems orchid elements within the container. The container ie often referred 8s flex container, and the tems are referred to as flex items “wo anes of Flxbox The main ais fe flex container isthe primary axis along which fle items are nid out + cross axis = The costa is perpendicular tothe main ax ait re stag ad ending po , sian - These teste sng ¢ ‘where the main axis begins, and main-end # yfitsdin-tortis Se Alef nes ae placed within the container, starting fom Oca [secon ame | adechini © Bayley 0 Driiencs © © CD Fexbox is layout model that primary Fellows one direction, meaning it arranges the flex tems either horizontally in rows or In C55, flex-direction allows you to specity ‘whether your fx ters shouldbe lai out , a rom left to ight (a row direction) or fom 2 top to bottom (8 column direction. giving you control over the overal flow of your layout The flex-dretion property accepts four * row (default) - ems wil be placed in ‘let to right manner, + row-reverse- items wil be placed it ‘right to left monner + column - ers wil be ps top to bottom manner + columnereverse- tems wil be placed in a bottom to top manner. her's how you can ure the flex-irection Sankey a On eenn eee j In C55, lex-wrap property helps to control the alignment of ems in a single or multiple lines By default al the flexitems tye placed to ft ontoa singe Tne The ex strap property helps to wrap them “Considering the avalabe space. ‘The flexcwrap property accept three values nowrap (fot ~All fexitems wil wrap Flex ites wil wrap ont Truttple lines from top to bottom - wrapereverse Flex items will ™0P ‘ate multiple ines from bottom to op Here's how you can use the flex-w property | <— B invent © Bayles © @ hitsencs © © © secs © © tiene © B indent tn C55, lex flow ie 2 shorthand property for lexdirection an flexrap, defines te use the flexflow Here's ow you c property default fesflow property wil have the ‘ale of row nowrap Your task Inline 2 of se and height t $00px blue border of 25x the wit ‘Apply a dashed wath + Set the display to Fx «Goethe flex flow shorthand t and lex sex direction to Colum wrap to wrap B iesitms © BD swleess © @ riosenas © ve justity-content pr ing the rain as ety allows you tn C35 Flebox. Feips to align the tems ofa flex containe. Th to speci how the avail Gjatnbuted among the flexitems wh sume al the avilable P= ropery accepts these ‘he jusity-content sar ems 1 the writing mode di tnd ems ae placed at the ond of oy start ems ore pS rar of x-direction. - oncend: ers ae places of fie-drection. placed at the start of ig mode direction 1 atthe end 1 the + space-between: 1h Beunbutes the space betes Your task Inline 2 of styie.c8 + Set the width ond height to 500 + Apply a red dashed border of 2px ved, + Set the dsp to flex + Alow wrapping of lx tems inside the container. GB svccchin! © B syecs © E hissincs © © GHB eee wevew ty CSS, the flex-basis property sets the 2 y comma for alex tem. t accept ifferent 2 v has specifying the width in ; different units ke TOpx, 50%, ec. Also, you ‘ the keyword values, suchas, auto, min-content, max-content, it content. Here's how you can use the flex basis property: wt 3 Your task Inne 2 of = For the container * Set the width and height to SOOpx + Apply a border of solid red border of 1px wide + Set the cepiy to flex For the cvs inside container I + Set the fex-grow and flex shrink to 0. + Ago set the flecbasis to 5p For the 2th div inside the containe + Set the flex-basis to 1009x using nh ‘oftyped selector. tr CSS, the flex ia shorthand property for flax-grow, flex ‘hin and flex-bass. The defi vals ate 1 auto where O is for fex-grow, Vs forfxhrink and ate efor excbais. how you cn use the lex property Your task Inte 2of ty2e.c For the containe: 1 Set the with and height to 0p » + Set the cepay to flex 2 + Allon wrapping of tems inside the container 2 + Apply 9 dashed blue border of px wd For the flactternt, et the fx-grow to 2 using lex shorthand Forthe ec ite-2, atthe fexgrom to 3 and Nlexshink to 2 (Ce G ieociorl © sviegy OE hittencss © In CSS, you se the align-slf property to control the alignment of individual flex items within flex ca er This prop silos you to over the alignment set by the containers align-tems property for & specie flex item, Ieaccaptsthece values: start flexcstart, a 2 ‘ond, laxend, center, baseline stretch. 2 Here's how you can use the align-tlf propery: | Aeterna { Your task Intine2 of For the container + Set the with and height to So0px + Apply a px dashed red border. + Set the diplay to fe, Apply fete Mex direction of column, ‘alg it to the end sing flex Sieeakencaits er eed a

You might also like