Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
By Sahil Goel
◦To build User Interface:◦To allow users to interact with web. Whatever we deliverto the users is a combination of three t...
Benefits of using Specified technology onlyfor the intended purposes:  Accessibility(clean semantic HTML markup benefits ...
   HTML consists of a set of tags and rules for using those    tags in developing hypertext documents.   HTML is a Forma...
HTML Tags:  HTML tags are keywords (tag names) surrounded by angle brackets like   <html>  HTML tags normally come in pa...
   <!DOCTYPE> is used to tell the    document type i.e. version of HTML    used. It is not an HTML tag. It is an    infor...
   Headlines:                                  Lists:<h1></h1>,<h2></h2>,…<h6></h6                There are three types ...
   Tables:                                                 Div:A table is divided into rows (with the <tr> tag), and    ...
   HTML web forms are a composition of    buttons, checkboxes, and text input    fields embedded inside of HTML    docume...
   CSS stands for Cascading    Style Sheets                                      In addition to setting a style for a  ...
   id selector(#)                                     #para1Each definition contains:            {                       ...
   Dominating effects of properties defined on    elements works on the specificity.   There are rules to determine spec...
   Inline style    Internal style sheet                                              2. Embedded or internal styles    ...
3.      External style sheets       •   An external style sheet is a text file containing the style definition (declaratio...
   In CSS, the term "box model" is used    when talking about design and             Margin - Clears an area around    l...
   A block element is an element that takes up the full width     available, and has a line break before and after it.  ...
     Elements are floated horizontally, this means that an element can      only be floated left or right, not up or down...
   The CSS positioning properties allow us to position an element.1. Static Positioning (The default positioning for all ...
  CSS pseudo-classes are used to add special effects to some   selectors.selector:pseudo-class { property:value; }Eg:   ...
Submitted By:Sahil Goel
Upcoming SlideShare
Loading in …5
×

Html n CSS

715 views

Published on

HTML nd CSS by Sahil Goel..

  • Be the first to comment

Html n CSS

  1. 1. By Sahil Goel
  2. 2. ◦To build User Interface:◦To allow users to interact with web. Whatever we deliverto 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 technolo gy should be used only for its intended purpose)
  3. 3. Benefits of using Specified technology onlyfor 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)
  4. 4.  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
  5. 5. 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 OFFHTML Elements:  an HTML element is everything between the start tag and the end tag, including the tagsHTML 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"
  6. 6.  <!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
  7. 7.  Headlines:  Lists:<h1></h1>,<h2></h2>,…<h6></h6 There are three types of lists, ordered> lists, unordered lists & definition lists.H1 headings should be used as main Ordered:headings, followed by H2 headings, then 1. Applethe less important H3 headings, and so on. 2. Mango  Paragraphs: Unordered:HTML documents are divided into  Appleparagraphs.  Mango<p>……….. Text ………….</p> Definition :  Anchor: Apple<a href="url">Link text</a> - is red in colorThe <a> tag can be used in two ways: Mango  To create a link to another document, by using the href attribute - is yellow in color  To create a bookmark inside a document, by using the name attribute
  8. 8.  Tables:  Div:A table is divided into rows (with the <tr> tag), and  The <div> tag defines a division oreach row is divided into data cells (with the <td> a section in an HTML document.tag). td stands for "table data," and holds the contentof a data cell. A <td> tag can contain text, links,  The <div> tag is used to groupimages, lists, forms, other tables, etc. Header block-elements to format theminformation in a table are defined with the <th> tag. with styles.Example:  Each division in this page is made with the help of <div> tag .
  9. 9.  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).
  10. 10.  CSS stands for Cascading Style Sheets  In addition to setting a style for a Styles define how to display HTML element, CSS allows us to HTML element i.e. it specify our own selectors called "id" describes the presentation and "class". semantics. A CSS rule has two main  The id selector is used to specify a parts: style for a single, unique element. It a selector uses the id attribute of the HTML one or more declarations 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 "."
  11. 11.  id selector(#) #para1Each definition contains: { text-align:center;A property color:red; }A colon The style rule below will beA value applied to the element withA semicolon id="para1“Eg: h1 {font-size:12pt; color:red}  Class selector(.) .center { text-align:center; } all HTML elements with class="center" will be center- aligned:
  12. 12.  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 pointsEg:  p a { } =2 points  p.intro a { } =12 points  #about p.intro a { }=112 points
  13. 13.  Inline style  Internal style sheet 2. Embedded or internal styles  External style sheet  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 page1. Inline styles Example:  Add styles to each tag within the HTML <head> file. <title>Getting Started</title>  Use it when you need to format just a <style type=“text/css”> single section in a web page. h1 {font-family: sans-serif; color: orange}Example: </style><h1 style=“color:red; font-family: sans- </head>sarif”> Inline style</h1>
  14. 14. 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: .html file abc.css <head> h1 {font-family: sans-serif; color: orange} <title>Getting Started</title> b {color: blue} <link href=“abc.css” rel=“stylesheet” type=“text/css” /> </head>
  15. 15.  In CSS, the term "box model" is used when talking about design and  Margin - Clears an area around layout. the border. The margin does not have a background color, it The CSS box model is essentially a is completely transparent box that wraps around HTML elements, and it consists of:  Border - A border that goes margins, borders, padding, and the around the padding and actual content. 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
  16. 16.  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; }
  17. 17.  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; }
  18. 18.  The CSS positioning properties allow us to position an element.1. Static Positioning (The default positioning for all elements isposition:static, which means the element is not positioned andoccurs where it normally would in the document.)2. Relative Positioning (If we specify position:relative, then we canuse top or bottom, and left or right to move the element relative towhere it would normally occur in the document.)3. Absolute Positioning (When we specify position:absolute, theelement is removed from the document and placed exactly where wetell it to go.)4. Fixed Positioning (An element with fixed position is positionedrelative to the browser window. It will not move even if the window isscrolled)
  19. 19.  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 */
  20. 20. Submitted By:Sahil Goel

×