0% found this document useful (0 votes)
9 views85 pages

ECD Unit 4

This is a File of Econtent development subject bangalore unverity syllabus classwork.. used to study

Uploaded by

Rishi Pavan.R.
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
0% found this document useful (0 votes)
9 views85 pages

ECD Unit 4

This is a File of Econtent development subject bangalore unverity syllabus classwork.. used to study

Uploaded by

Rishi Pavan.R.
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/ 85
10. 1. 12. 13. 14. cone SS US 5 cms pom weg are they ux principle that focuses on the efficiency of use, | Mention one IMteracy Ay digital ae an overview of graphic design ina 5 hy ‘ Oo ani messages? Is for j * Tole, ‘i name two widely used sorware 10018 TOF IMAGE editing ang brie ‘y a ®) Se concepts in image editing, and how do ag ™ vontrast and brightness impact the overall visual appeal lustrenty es Define the term “pixel” in the context of digital images, and explain 4 graphic design. ts "eta fit of using vector Can you outline one major benefit of using Graphics j how yon Itdiffer from raster graphics in terms of Scalability? IN graphic desig, ‘ What is the significance of file formats in graphic design, and how do usability and quality of design assets? {hey impact 000 OE Contrast Alignment Repetition Proximity Whitespace Text ure DIGITAL CONTENT TooLs AND TECHNIQUES 4.1 HTML BASICS The backbone of the World Wide Web is made of HTML files, which are specially- formatted documents that can contain links, as well as images and other media. HTML stands for Hypertext Markup Language, and it is the most widely used language todesign Web Pages. A webpage is a web document that is accessible through the internet using a web browser like intemet explorer. A webpage is accessed by entering a URL (Uniform Resource Locator- ‘mechanism used to locate a webpage on the internet.) addresses in the Address, field of web browser. webpage may contain text, graphics, and hyperlinks to other web pages and files, i location A website ig composed of a group of web pages linked together. It is a central t conta ntains more than one web page. i language. HTML (Hypertext M: arkup Language), as its name suggests, is a markup langu as HTML documents) are | , 5 es (| Hypertext refers to the way in which Web pag vou are using hypertes So, ‘gether. When you click a link in a Web in Ypertext is simply a piece of text that works as a link. a anguage is a Within documents, ° Note: HTML HTML w HTML spe documents are al Pages : Iso called wep aS Created by Bemers-Lee in late 199] but " aS Published in 1995, ersi Though HTML 4.01 Version j. HTML 2 Cification y hich wy, , — -O" Was the first Standen HTML 4.01 was a ™ajor version of HTML and it Was publishe din late 1999, S widely used but currently we are having HT Which is an extension to HTML ML-5 Version, 4.01, and this version Was publis| 4.1.1 HTML Tags A webpage can contain 'ext, graphics, audio, video and such contents to indicate animations. We how they should appear over a can mark up web page. To mark up the rs or TAGS contents, we can use various commands, called Markup Indicato Se, HTML Tags are basically H TMLb ased commands or key wort brackets like ds surrounded by angle Every tag consists of a tag name, sometimes followe d by an optional list of tag, attributes OF properties, all place 2 sii t tag is d between opening and closing brackets (< and >). The simples ‘ 8 cl an than a name @ppropriately enclosed in brackets, such as , , , or eve no difference equivalent. Note: HTML tags are not case sensitive. : contents 4.1.2 HTML elements a 7 1 Ag, rything from the start tag to the end tag element is every An HTML e cc gxample: (Content) 2 WELCOME To ALL OF op, (Start Tag) eon (End Tag) Fla. 4.1 (Tt gy ment Most HTML elements can be Nested i.e, they can Contain other HTML i ML elements Example: WELCOME 79 ALL OF yoy, In this exam ple, * The element, defines the bold effect over the text.) HTML elements wy 1th no content are called Empty elements, Example:
ig an empty element without a closing tag (the
tag defines a line break). Note: Adding a slash inside the stan tag, like
or etc, (i) Declaration: £ ach declaration consists of a Property and a value. The property is the Style attribute you want to change. Each property has a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets, S Yntax of Cog style rule is as follows: selector (property: value} Sample. Declaration Declaration ein We nersee ee) Property Value Property Value ie, rage | 4.12 Digital Content Tools ang Te ech, To make the CSS more readable, you ca" put one declaration on each line, lik, ™~ 7 HKe this. P,H1 ns { color: red; text-align: center; } You can also apply a sty given in the following example: Je to many selectors. Just separate the selectors with a c ‘ommMa as H1, H2, H3 { color: blue; font-weight: normal; text-transform: lowercase, } Example: at vy an Tools and Techniques a giPHEADING 21S AFFECTED BY STYLE aTMl> fter the execution of above code, the output would be look like: A Pea a ats ae eat view History Bookmarks — Tools Help r ents MM/HTML}CSS/SS.HTML |b fi ee +) events and Settings/Punt/Desktop/E_COMMIMTMLICSSIS5.+ > O- 2 \ (Bi ost Visted @ Getting Started Customize Links Free Hotmail __| Windows Marketplace HEADING-2 IS AFFECTED BY STYLE. » HEADING-3 IS AFFECTED BY STYLE. THIS PARAGRAPH IS AFFECTED BY STYLE |x 42.4 Css Properties Css Provides number of properties to change the look and feel of web pages. Here are Some basic css prope Tties to work with: Values RGB, hex, keyword al, num Sets the. distance between lines. - ength Increase or decrease the space between | normal, ‘leng _ Sharacters. | - page | 4.14 text-align text- decoration text-indent text-transform Aligns the text in an element. + - 7 Adds decoration to text. Indents the first line of text in an element ' Controls the letters in an element (2) Fo Font Properties ei: ety font-family font-size font-style font-variant font-weight (3) List Properties | Property list-style list-style mage Description Specifies the font family for tex! Specifies the font size of text Specifies the font style for text specifies whether or not 2 text shou displayed in a small-caps 10" Specifies the weight of & font Description Sets all the properti es for a list in ¢ declaration specifies an image 4° the list-item marker place the listitem marker list-style Specities where f position [ tyle-tyPe Specifies the type of list m marker jist-style* | (4) Border properties ; 77 Description |lett, tight center, justify. none, underline through length, % none, capitalize, Uppercase, lowercase Values family-name, generic-family xxsmall, \-small, small, medium large \-large, \-large, smaller, tle 1ormal plique ! ps a r, lighter Values / se. listestyte-position ist-s ‘ URL, none nside, outside fe, square none, aise circle, >4 values ,, porder widll porder-st¥ jer-wld Jools and Techniques ie, ——T.. — ee - snl On Gets all the bottom border properties in one border, 415 oe declaration. ie btm, = | sie bore . a ts the color of the bottom border. 12 border-bottom coor | border-color soe ait 1 Hh i = 446 the style of the bottom borde joer | Sets . r border-style wet - = +$———____ pottom- Sets the width of the bottom border. border-width ~ -bot ia ponder” wit | mor sets the color of the four borders color_name,her_numbe, pordet —hame, hex_number, a _ rgb_number, transparent, inherit srder left Sets all the left border properties in one border-left-width bordereftstle, declaration border-left-color “yder lett Sets the color of the left border. border-color color _ _ | ee “prderlett- Sets the stvle of the lett border. border-style style ee border-left- Sets the width of the left border. border-width width toderright Sets all the right border properties in one border-right-width, border-right: style, border-ightolor declaration. border-right- | Sets the color of the right border ‘color sl «| - ; a net Sets the stvle of the right border. border-style : | _——_j —~ ; : border-width border-color torderrons. - vith night |e the width of the right border ' den dtd dase f none, hidden, dotted. Sets the style of the four borders: re ie ee a border style outset, inherit one porder-top-width, pordertoP* porder-top-color _ ol Sets all the top border propertie> in ~~ __ | declaration. — Page 14.16 Dig Contnt Tot and Teh, border-top- | Sets the color of the top border. border-color color ff border-top- a the style of the top border. | border-style ——————~_] style | ye | — | border-top- Sets the width of the top border. border-width - width | ft thin, medium, thick, length, inherit | [border-width [sets the width of the fourborde. | 4.2.5 CSS - Id and Class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". (a) Id Selector You can define the style rules based on the Id attribute of the HTML elements. All the nts having that Id will be formatted according to the defined rule. The /d selector uses d is defined with a elemer the Id attribute of the HTML element, an symbol. Example: ind Techniques t Tools al conten ne execution of above code, the Output would be t after look like: ) Mozilla Firefox Edit File View — History Bookmarks. Tools Help file:///D:/Documents MIHTMLicssicis, HTML € % (Desktop/e COMMIT ICSSjc) ce. Q- Customize Links * sie | t Free Hotmail ALIGNED HEADING CENTER-ALIGNED PARAGRAPH ry Most Visited @ Getting Started { CENTER- » You can also specify that only specific HTML elements should be affected by a Class selector, Example: SHEAD> ‘STYLES Peis ( “ALIGN: CENTER; STYLES HEADS Bony, Sha , T YI 2> ? Cha: CLs" THIS HEADING IS NOT AFFECTED BY STYLE. CLs" >THIS PARAGRAPH IS AFFECTED BY STYLE.

You might also like