Html file for freshers

2 Nesting Tags  How do you write the following in HTML?  The wrong way: This is really, REALLY fun! This is really, REALLY fun!  Tags must be correctly nested.  A closing tag must match the most recently opened tag.  The right way:

3 Spacing And Indentation  Which tag is not closed? <html><head><title>Can you find it?</title></head> <body><ul><li>Not it!</li><li><ol><li>Is it here? </li><li>Or maybe it's this one?</li></ol></li><li> More words here</li><li>This is very hard to read</li></body></html>

4 How About Now? <html> <head> <title>Can you find it?</title> </head> <body> <ul> <li>Not it!</li> <li> <ol> <li>Is it here?</li> <li>Or maybe it's this one?</li> </ol> </li> <li>More words here</li> <li>This is very hard to read</li> </body> </html>

5 Spacing And Indentation Guidelines  If the tag's content fits on one line, open and close the tag on the same line.  Otherwise, the tag's content should be indented more than the starting and closing tags.  If the starting and closing tags are on separate lines, they should line up vertically, like above. <li>Is it here</li> <ol> <li>Is it here?</li> <li>Or maybe this tag is not closed?</li> </ol>

6 Spacing And Indentation Guidelines  Use newlines to structure the HTML.  The wrong way:  The right way: <ol> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ol> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

7 Extensible HTML: XHTML  Newer version of HTML, standardized in 2000  XHTML tags must always be …  … in lowercase  … closed  … nested properly  XHTML 1.0 Strict is the standard we will be using.  Reference: http://www.december.com/html/x1/

8 Why Use Standards?  Ensure interoperability across different browsers  Can easily verify if standards-compliant  XHTML Validation Service: http://validator.w3.org/  Alas, not all web browsers (particularly Internet Explorer) adhere to the standards  http://www.webdevout.net/browser-support-summary

9 Basic XHTML Template <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>page title goes here</title> </head> <body> page content goes here </body> </html>

11 Block vs. Inline Elements  Block elements create "larger" structures than inline elements.  In general,  block elements may contain text, inline elements, and other block elements.  inline elements may contain only text and other inline elements.  Block elements begin on new lines, inline elements do not.

12 Block or Inline?  Block  h1, h2, ..., h6  p  ul, ol  hr  Inline  br  em  strong  a  img

13 Document Flow: Block Elements

14 Document Flow: Inline Elements

16 Why Important? Elements allowed in body element Only block elements are directly allowed inside the body element. Image snapshot from XHTML 1.0 Strict Reference http://www.december.com/html/x1/element/body.html

17 What About Links?  Allowable content for body:  Illegal:  How can a web page have links?  One solution is to put the link in a block element. <body> <a href="http://www.yahoo.com">Yahoo!</a> </body> No a! <body> <a href="http://www.yahoo.com">Yahoo!</a> </body>

18 Images In XHTML  Requires an alt attribute describing the image <img src="hamster.jpg" alt="Hamster eating carrot" />  Image missing:  Image present:

19 XHTML Validation  Make sure your files validate!  XHTML Validation Service: http://validator.w3.org/  When fixing errors, fix the first error and then try validating again.  For example, a single missing closing tag might be confused for several errors.  Validation does not check for proper indentation.

21 HTML/XHTML Resources  W3Schools HTML Tutorial  http://www.w3schools.com/html/default.asp  W3Schools XHTML Tutorial  http://www.w3schools.com/xhtml/default.asp  Complete list of HTML tags  http://www.w3schools.com/tags/default.asp  XHTML 1.0 Strict Reference  http://www.december.com/html/x1/

22 Cascading Style Sheets (CSS)  Describe the appearance, layout, and presentation of information on a web page  Describe how information is to be displayed, not what is being displayed

23 Basic CSS Rule  A CSS file contains one or more rules.  Rule syntax:  selector: HTML element you wish to style  property: attribute you wish to change selector { property: value; property: value; ... property: value; }

24  CSS:  HTML: Example Can you see me now? p { font-family: sans-serif; background-color: yellow; }

25 Color Properties  color: color of the element's text  background-color: color that will appear behind the element

26 Colors  Colors are defined by three numbers (from 0 to 255) representing the amount of red, green, and blue (RGB)  Can specify colors by:  Pre-defined name  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow  RGB triplet  rgb(R,G,B) where R, G, and B are each numbers from 0 to 255  RGB triplet in hexadecimal format*  #RRGGBB where RR, GG, BB are the red, green, and blue values in hexadecimal  ColorSchemer: http://www.colorschemer.com/online.html *You do not need to understand hexadecimal.

27 Colors Example  Ways to specify teal h1 { color: teal; } h1 { color: rgb(0,128,128); } h1 { color: #008080; }

28 More Properties: Font  font-family: which font will be used  font-size: how large the letters will be drawn  font-style: used to enable/disable italic style  font-weight: used to enable/disable bold style  For examples on how to set these and other properties, see:  http://www.w3schools.com/css/css_reference.asp  http://www.tizag.com/cssT/reference.php

29 Attaching a CSS File: <link />  Copy the rel and type attributes and their corresponding values verbatim  Use the href attribute to specify the location of a stylesheet file  Path location may be absolute or relative <head> <title>...</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

30 CSS Resources  CSS property references:  http://www.w3schools.com/css/css_reference.asp  http://www.tizag.com/cssT/reference.php  CSS tutorial:  http://www.tizag.com/cssT/  CSE 190 M (Web Programming) lecture notes:  http://www.cs.washington.edu/education/courses/cse190m/Curre ntQtr/lectures/slides/lecture03-basic_css.html

Html file for freshers

More Related Content

Similar to Html file for freshers

Recently uploaded

Html file for freshers