html and css
TRANSCRIPT
HTML & CSSSukrit [email protected]
HTML - Introduction
• 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.
HTML - Introduction
• 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.
HTML - Basics
• 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>
HTML- Example
Sample Program<!DOCTYPE html><html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
OUTPUT:-
HTML – Basic Tags• <!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.
HTML – Basic Tags• <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>..
HTML- Tags & attribute
• <p> Paragraph </p>• Unordered list:
• Ordered List:
• <a href=“ abc.com”>ABC</a>• Used to create hyperlinks.
• <em>TEXT<em>• Emphasizes on text, Italics text,
Text reader emphasizes more while speaking this text.
• <table border="1"> //To make a table <tr> //table row <th>Month</th> //column heading <th>Savings</th> </tr> <tr> <td>January</td> // definition <td>$100</td> </tr></table>
• Width: Specifies the width of a table.• Cellspacing: Specifies the space between
cells.• Border: Specifies the width of the borders
around a table
Month Savings
January $100
February $80
HTML- Tags & attribute
• <form action="form_action.asp" method="get"> • <form> tag is used to create an
HTML form for user input.
• Action: Specifies where to send the form-data when a form is submitted
• Method: Specifies the HTTP method to use when sending form-data(get/post)
• <input type="text" name="fname" />• To get input from the user.
• <label for="male">Male</label>• To bind a Input field to some text.
• <textarea rows="2" cols="20"> Hey!! its text Area </textarea>• Provides a Large TextArea.
• <select ><option>Volvo</option>• Provides a Drop down Menu.
// fielset and legend
//<input type=“text”>
//<input type=“text”>
//<text area>
//<select>
//<input type=“submit”>
HTML – Always Remember
• 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.
CSS – Intoduction
• 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.
CSS – Basics• 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>
How CSS works?• 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;}
• Commenting : /* This is a comment */
CSS Id and Class Selectors
• 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;}• Class selector can also work on partial matching ID’s also.
CSS Styles• 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.
The CSS Box Model• All HTML elements can be considered
as boxes. In CSS, the term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
• The box model allows us to place a border around elements and space elements in relation to other elements.
• The image below illustrates the box model:
• Explanation of the different parts:
• Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is affected by the background 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
CSS Display• 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;}
CSS FLOAT & CLEAR
• 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;}
Something Gone wrong..• 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.
Thank you!