Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Html and css
Similaire à Html and css (20)
Plus de Sukrit Gupta
Html and css
- 1. HTML & CSS Sukrit Gupta sukritgupta91@gmail.com
- 2. • Invented in 1990 by a scientist called Tim Berners-Lee. • HTML stands for Hyper Text Markup Language. • Hyper- Not simply Linear (ex- HyperLinking). • Text- Collection of words. • Markup- Is what we do with the text.(ex Bold, Bullets). • Language- The system of linguistic signs or symbols. • HTML is not a programming language. • BUT it is a formatting language. • Used in developing Web Pages.
- 3. • Web Page can be further divided into :- • Structure-What the different part of content are and how they are related. • Presentation-How the content should be displayed and formatted Visually. • Behavior- How the content behaves on user Interaction. • HTML is used to maintain STRUCTURE of the document. • CSS is used to maintain PRESENTATION of the document. • JAVASCRIPT is used to maintain BEHAVIOR of the document. • Each piece should be separate from the other and only used for its intended purpose.
- 4. • HTML Tags<> • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags • SYNTAX -> <tagname attribute=“value”>content</tagname> • Example-> <p id=“p1”> First paragraph </p> • HTML Elements • HTML element is everything between the start tag and the end tag, including the tags. • HTML Element: <p>This is a paragraph.</p>
- 5. Sample Program OUTPUT:- <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 6. • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//en” http://www.w3.org/TR/html4/strict.dtd> • The Identifier: indicates to the user-agent that the enclosed information will define the type of document of the page. • The TOP Element: Indicates the top level element type declared in the DTD; for HTML it is <html>. • The Availability: field indicates whether the identifier is a publicly accessible object (PUBLIC) or a system resource (SYSTEM). • The Formal Public Identifier: This entire string is what identifies the Doctype. • The Url: This is an optional URL indicating where then DTD for this Doctype can be found. • DTD: DTD stands for Document Type Definition. • The text between <html> and </html> describes the web page. • The text between <body> and </body> is the visible page content.
- 7. • <head></head>: Do not contains any data to be displayed in Content area of web page. Contains vital info about page and other tags. • <title></title>: Defines a title in the browser toolbar. • <meta/>: Description and other information about page that is machine parsable. • <style></style>: To define style information for an HTML document. • Heading Tag: It is used to give different headings in the document. • These are from <h1> to <h6>..
- 8. • <p> Paragraph </p> • <table border="1"> //To make a • Unordered list: table <tr> //table row <th>Month</th> //column heading <th>Savings</th> • Ordered List: </tr> <tr> <td>January</td> // definition • <a href=“ abc.com”>ABC</a> <td>$100</td> • Used to create hyperlinks. </tr></table> • <em>TEXT<em> Month Savings • Emphasizes on text, Italics text, Text January $100 reader emphasizes more while speaking this text. February $80 • Width: Specifies the width of a table. • Cellspacing: Specifies the space between cells. • Border: Specifies the width of the borders around a table
- 9. • <form action="form_action.asp" method="get"> // fielset and legend • <form> tag is used to create an HTML form for user input. //<input type=“text”> • Action: Specifies where to send the form- data when a form is submitted //<input type=“text”> • Method: Specifies the HTTP method to use when sending form-data(get/post) • <input type="text" name="fname" /> //<text area> • To get input from the user. • <label for="male">Male</label> //<select> • To bind a Input field to some text. • <textarea rows="2" cols="20"> Hey!! its //<input type=“submit”> text Area </textarea> • Provides a Large TextArea. • <select ><option>Volvo</option> • Provides a Drop down Menu.
- 10. • NEVER use HTML for visual formatting and appearance purpose. • For example: • Do not use HEADING(<H1>……<H6>) tags just to increase or decrease the size. • Use these tags to differentiate logically between different kinds of Headings like Main heading, Section heading, Sub-section heading. • <Table> should not be used to manipulate LAYOUT. • For example : Table should not be used to make header for pages just because it can render data in a row smartly. • HTML shoul be only used to make the Structure of the page.
- 11. • CSS stands for Cascading Style Sheets. • Styles define how to display HTML elements. • CSS is used to manage the PRESENTATION part of the web page. • CSS separates HTML part from presentation part. • External Style Sheets can save a lot of work. • External Style Sheets are stored in CSS files. • Pages download faster, sometimes by as much as 50% • You have to type less code, and your pages are shorter and neater. • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.
- 12. • Three ways to implement CSS in a page are:- • Internal Stylesheet • An internal style sheet should be used when a single document has a unique style. It is embedded generally inside the <head> tag • Ex. <head><style type="text/css"> p {margin-left:20px;></style></head> • External Style Sheet (BEST APPROACH) • An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file. • An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet should be saved with a .css extension. • Ex. <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> • Inline Style Sheet • To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. • Ex. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
- 13. • CSS has three parts:- • Selector: Element which is to be modified. Here h1 is selector. • Property: Element’s which property is to be modified. Ex Color. • Value: Change the property to what. • SYNTAX: selector { property: value } • Combining selectors: • h1, h2, h3, h4, h5, h6 { color: #009900;font-family: Georgia, sans-serif;}
- 14. • The id Selector • The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a "#". • The style rule below will be applied to the element with id="para1": • Example • The class Selector • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. • This allows you to set a particular style for many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a ".“ • EX. .centerclass {text-align:center;}
- 15. • Psuedo Selectors • a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ • Values assigned to selectors(SPECIFICITY) • Id SELECTOR - 100points • Class SELECTOR – 10 points • Other element – 1 point each. • The style applied to a element depends upon declaration has the max points. • If more than one selector is applied to an element in a declaration then their points are added.
- 16. • All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about • Explanation of the different parts: design and layout. • Margin - Clears an area • The CSS box model is essentially a around the border. The box that wraps around HTML elements, and it consists of: margins, margin does not have a borders, padding, and the actual background color, it is content. completely transparent • The box model allows us to place a border around elements and space • Border - A border that goes elements in relation to other around the padding and elements. content. The border is • The image below illustrates the box affected by the background model: color of the box • Padding - Clears an area around the content. The padding is affected by the background color of the box • Content - The content of the box, where text and images appear
- 17. • BLOCK :A block element is an element that takes up the full width available, and has a line break before and after it. • Examples of block elements: • <h1> • <p> • <div> • EX. Span {display:block;} • INLINE: An inline element only takes up as much width as necessary, and does not force line breaks. • Examples of inline elements: • <span> • <a> • EX. Span {display:inline;}
- 18. • FLOAT • Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. • A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. • The elements after the floating element will flow around it. • The elements before the floating element will not be affected. • Ex {float: left} • CLEAR • The clear property specifies which sides of an element where other floating elements are not allowed. • EX. {clear:both;}
- 19. • Rules to check out if something gone wrong. • Is the element IN THE FLOW or OUT OF THE FLOW? • IN THE FLOW means below element respects the position of above element. • Is the element rendering in BLOCK display context or INLINE display context. • Always Remember the SPECIFICITY of the elements. Find which declaration is effecting the element in consideration.