MC4023 - WEB D MAILAM ENGINEERING COLLEGE Mailam ~ 604 304 Villupuram (Dt.) (Approved by AICTE, New Delhi. Affiliated to Anna University. Chennai & Accredited by ‘TCS, Chennai) DEPARTMENT OF COMPUTER APPLICATIONS- WEB DESIGN UNIT — 1 UI DESIGN a gavilank - z= padding and border ~ Inline and block elements . Structuring pages using Semantic lags, - Positioning with CSS: Positions, Floats. z-index - CSS with CSS Preprocessors: SASS | | | SVG- Iframes - HTMLS Video and Kadio tags - CSS Specificity - Box model - Margins. l i. Why SVG is preferred over other image formats? SVG images can be saved as the smallest size possible. Unlike bitmap image formats like JPG or PNG, it does not a fixed set of dots. So it is also @asy-to-print-with high quality at any resolution. SVG images can be zoomed to a certain level without degradation of the picturequality. 2. Define SVG. ‘The HTML SVG is an acronym which stands for Scalable Vector Graphics. HTML SVG is a modularized language which is used to describe graphics in XML. It describe two- dimensional vector and mixed vector/raster graphics in XML. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programslike ink space are preferred to create it. 3. Define Iframe. HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML we Here, “sre” attribute specifies the web address (Uf1.) of the inline frame page. <.Sivaraman AP/MCA Prepared By Mr.) ieeeMC4023 - WEB DE, What is meant by pecificity? browser Suet one conflictin né-rules of CSS indicates the same element, thenthe pn ‘iT Tollow some rales Tor determining the particular one. Specificity is theway which ilps the browsers to decide which property value is most relevant for the element. It | _dletermines which style declaration is applied to & What is meant by Inline and Block Elements? Inline Elements ‘Theclements that do-not begin on a new Jine are known asinline elements. They are combined as a part of the main text and not a separate action. ‘These elementsoccupy only the required space. Spaces to the left and right can be added to an inline clement, but there cannot be added height to the top or bottom padding or margin of an inline element. Block Elements The clements that begin on a new line are known as block elements. A block element acquires up the full width available for that content. Unlike inline, there existsa top and bottom margin for these elements. Block-level elements may only appear inside the body tay. Block- level clements create a larger structure than inline elements. 6. Define CSS z-index. ‘The z-index in CSS allows us to define a visual hierarchy on the 3-dimensional plane, ive. the z-axis. It is used to specify the stacking order of the positioned elements (elements whose position value is either fixed, absolute, relative, or sticky). The stacking order means that the element's position along the z-axis, which isperpendicular to the screen, @. Define CSS position. & ‘The CSS position property is used.to set position for an elemexy. it is also used to place an element behind another and also useful for Scripted animation effect. You can position an clement using the top, bottom, Jeft and right properties. ‘Theseproperties cai be used only after position property is st firs. A position element's computed position property is relative, absolute, fixed or sticky. =a - = . 8. What is meant by CSS z-index? allows us to define a visual hierarchy on the 3-dimensional plane, ic., the Z-axis. to specify the stacking order of the positioned elements (clements whose position value is either fixed, absolut, relative, or sticky). The stacking order means that the clement's position along the z-axis, which isperpendicular to the screen. Syntax z-index: numberjautojinherit{initial;:SIGN (UNIT-2) 3D ~ Mcd023 - WI s9. What is meant by CSS Opacity? The CSS opacity property is.used to speeify the tranypareney ofan clement, In simpleword, you ean say that it specities the clarity of the image Now to apply CSS opacity setting “y is defined ty. Opacity is y value Opacity setting is applied uniformly across the entire object term of digital value less than 1, The lesser opacity value di nov inherited nd the opac’ plays the greateropa 20. What is meant by CSS Float Property? The CSS float property-is.a positioning property. It 1s used to push an clement to the lett or right, allowing other element to wrap around it. It is generally used with images and layouts, 11. Describe video tags on HTMLS. [AU Nov / Dee 2022] IITML 5 supports