Embed Size (px)
DESCRIPTION
HTML nd CSS by Sahil Goel..
Citation preview
By Sahil Goel
◦To build User Interface:◦To allow users to interact with web. Whatever we deliver to the users is a combination of three technologies :1. HTML for Structure(tells the different parts of
content and how they are related)2. CSS for Presentation(tells how the content should
be displayed and formatted)3. JavaScript for Behavior(tells how the content reacts
and changes based on user interaction)
◦(each technology should be used only for its intended purpose)
Why are we using HTML, CSS & JavaScript??
Benefits of using Specified technology only for the intended purposes: Accessibility(clean semantic HTML markup benefits
users that consume the net through non visual browsers like screen readers.)
Portability(drop in new style sheet and implement changes OR we can also use same CSS for multiple projects)
Maintainability(make changes only in the CSS file when content need not to be changed)
Reduced latency(CSS files are usually same for all pages of a project, need not to download them repeatedly)
Using Specified technology
HTML consists of a set of tags and rules for using those tags in developing hypertext documents.
HTML is a Formatting/Markup language, not a programming language.
HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
HTML:(HyperText Markup Language)
HTML Tags: HTML tags are keywords (tag names) surrounded by angle brackets like
<html> HTML tags normally come in pairs like
<b> (start tag) and </b> (end tag) First tag turns the action ON and second turns it OFF
HTML Elements: an HTML element is everything between the start tag and the end tag,
including the tags
HTML Attributes: HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
HTML Basics:
<!DOCTYPE> is used to tell the document type i.e. version of HTML used. It is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in. By default it is Html 5.
The <head> element is a container for all the head elements like title, meta, styles and scripts
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
HTML page Structure:
Headlines:<h1></h1>,<h2></h2>,…<h6></h6>H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
Paragraphs: HTML documents are divided into paragraphs.<p>……….. Text ………….</p> Anchor:
<a href="url">Link text</a> The <a> tag can be used in two ways:
To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute
Lists:There are three types of lists, ordered lists, unordered lists & definition lists.Ordered:1. Apple2. MangoUnordered:
Apple Mango
Definition :Apple - is red in colorMango - is yellow in color
Some basic tags:
Tables:A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Header information in a table are defined with the <th> tag. Example:
Div: The <div> tag defines a division
or a section in an HTML document. The <div> tag is used to group
block-elements to format them with styles.
Each division in this page is made with the help of <div> tag .
Some basic tags:
HTML web forms are a composition of buttons, checkboxes, and text input fields embedded inside of HTML documents with one goal in mind: to capture user input. By doing things such as providing fields for user data such as names, phone number, and email addresses, web forms give users the opportunity to interact directly with a webpage.
HTML forms are placed on a web page using the <form> tag. This tag should encapsulate a series of other form elements, identifying them as a single cohesive web form.
HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method).
Forms:
CSS stands for Cascading Style Sheets
Styles define how to display HTML element i.e. it describes the presentation semantics.
A CSS rule has two main parts:
a selector one or more declarations
In addition to setting a style for a HTML element, CSS allows us to specify our own selectors called "id" and "class".
The id selector is used to specify a style for a single, unique element. It uses the id attribute of the HTML element, and is defined with a "#".
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. It uses the HTML class attribute, and is defined with a "."
CSS:
Each definition contains:A propertyA colonA valueA semicolon Eg: h1 {font-size:12pt; color:red}
id selector(#)#para1{text-align:center;color:red;}
The style rule below will be applied to the element with id="para1“ Class selector(.)
.center { text-align:center; }
all HTML elements with class="center" will be center-aligned:
Basic Structure of a Style
Dominating effects of properties defined on elements works on the specificity.
There are rules to determine specificity. Briefly it works on point system: An element is worth=1 point A class is worth =10 points An id is worth =100 points
Eg: p a { } =2 points p.intro a { } =12 points #about p.intro a { }=112 points
Specificity
Inline style Internal style sheet External style sheet
1. Inline styles Add styles to each tag within the HTML
file. Use it when you need to format just a
single section in a web page.
Example:
<h1 style=“color:red; font-family: sans-sarif”>
Inline style
</h1>
2. Embedded or internal styles
A style is applied to the entire HTML file. Use it when you need to modify all
instances of particular element (e.g., h1) in a web page
Example:
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: orange}
</style>
</head>
There are three ways of inserting a style sheet:
3. External style sheets• An external style sheet is a text file containing the style definition (declaration)• Use it when you need to control the style for an entire web site
Example:
<head>
<title>Getting Started</title>
<link href=“abc.css” rel=“stylesheet” type=“text/css” />
</head>
h1 {font-family: sans-serif; color: orange}
b {color: blue}
abc.css.html file
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.
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
The Box Model
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>
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements: <span> <a>
We can change the block to inline and vice-versa:
Eg: p { display:inline; }
CSS Display - Block and Inline Elements
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. If an image is floated to the right, a following text flows around
it, to the left:Eg:
img{
float:right;}
CSS Float:
The CSS positioning properties allow us to position an element.
1. Static Positioning (The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.)2. Relative Positioning (If we specify position:relative, then we can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.)3. Absolute Positioning (When we specify position:absolute, the element is removed from the document and placed exactly where we tell it to go.)4. Fixed Positioning (An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled)
CSS Position:
CSS pseudo-classes are used to add special effects to some selectors.
selector:pseudo-class { property:value; }Eg: a:link {color:RED;} /* unvisited link */
a:visited {color:YELLOW;} /* visited link */a:hover {color:GREEN;} /* mouse over link */a:active {color:BLUE;} /* selected link */
Pseudo-classes
Thank you!Submitted By:Sahil Goel
