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.

Design Dream


Published on

These are the slides for Design Dream workshop at UVPCE on 19 august 2010

Published in: Education
  • Be the first to comment

  • Be the first to like this

Design Dream

  1. 1. HTML and CSS<br />Basics For Beginners<br />By- Rajesh Vishnani<br />IT Consultant<br />
  2. 2. Something Interesting<br />The first person ever to dream of programming a Computer was a WOMAN called <br />ADA LOVELACE <br />Ada Lovelace- First Programmer Ever<br />
  3. 3. Our List of To- Do<br />Basic tags in HTML and Basic Web Structure<br />Creating advance Web Template Structure<br />Writing simple powerful CSS<br />Design a simple Web Page with good Looks<br />
  4. 4. Basics of html<br />
  5. 5. What is HTML?<br />HTML is a language for describing web pages.<br />HTML stands for Hyper Text MarkupLanguage<br />HTML is not a programming language, it is a markup language<br />A markup language is a set of markup tags<br />HTML uses markup tags to describe web pages <br />
  6. 6. HTML Tags<br />HTML markup tags are usually called HTML tags<br />HTML tags are keywords surrounded by angle brackets “<>“ like <html><br />HTML tags normally are pairs like <b> and </b><br />The first tag in a pair is the start tag, the second tag is the end tag<br />Start and end tags are called opening tags and closing tags<br />
  7. 7. HTML Headings<br /><h1> defines the largest heading. <h6> defines the smallest heading.<br />
  8. 8. HTML Paragraphs<br />Paragraphs are defined with the <p> tag.<br />
  9. 9. HTML Text Formatting<br />
  10. 10.
  11. 11. HTML Text Formatting Tags<br />
  12. 12. HTML Hyperlinks (Links)<br />Links are specified in HTML using the <a> tag.<br />The <a> tag can be used in two ways:<br />To create a link to another document, by using the href attribute<br />To create a bookmark inside a document, by using the name attribute<br />
  13. 13. HTML Images<br />
  14. 14.
  15. 15. HTML Styles<br />
  16. 16.
  17. 17. HTML Lists<br />The most common HTML lists are ordered and unordered lists:<br />
  18. 18. <html><br /><body><br /><h4>An Unordered List:</h4><br /><ul><br /> <li>Coffee</li><br /> <li>Tea</li><br /> <li>Milk</li><br /></ul><br />
  19. 19. <h4>An Ordered List:</h4><br /><ol><br /> <li>Coffee</li><br /> <li>Tea</li><br /> <li>Milk</li><br /></ol><br /></body><br /></html><br />
  20. 20. HTML Tables<br />Tables are defined with the <table> tag.<br />A table is divided into rows (with the <tr> tag),<br /> each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. <br />A <td> tag can contain text, links, images, lists, forms, other tables, etc.<br />
  21. 21. <html><br /><body><br /><table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table> <br /></body><br /></html><br />
  22. 22.
  23. 23. HTML Form Tags<br />
  24. 24. CSS<br />In HTML 4.0 all formatting can be removed from the HTML document, and stored in a style sheet.<br />Because HTML 4.0 separates the layout from the document structure, we have what we always needed: Total control of layout, without messing up the document content<br />
  25. 25. How to Use Styles<br />When a browser reads a style sheet, it will format the document according to it.<br />There are three ways of inserting a style sheet:<br />External style sheet<br />Internal style sheet<br />Inline styles<br />
  26. 26. External Stylesheets<br />An external style sheet is ideal when the style is applied to many pages.<br /> With an external style sheet, you can change the look of an entire Web site by changing one file.<br /> Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:<br /><head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head><br />
  27. 27. Internal Stylesheets<br />An internal style sheet can be used if one single document has a unique style.<br /> Internal styles are defined in the <head> section of an HTML page, by using the <style> tag<br /><head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head><br />
  28. 28. Inline Stylesheets<br />An inline style can be used if a unique style is to be applied to one single occurrence of an element.<br />To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:<br /><p style="color:blue;margin-left:20px">This is a paragraph.</p><br />
  29. 29. CSS Syntax<br />A CSS rule has two main parts: a selector, and one or more declarations:<br />
  30. 30. CSS Id and Class<br />The id Selector<br />The id selector is used to specify a style for a single, unique element.<br />The id selector uses the id attribute of the HTML element, and is defined with a "#".<br />
  31. 31. CSS Id and Class<br />The style rule below will be applied to the element with id="para1":<br />Example<br />#para1{text-align:center;color:red;}<br />
  32. 32. The class Selector<br />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. <br />This allows you to set a particular style for any HTML elements with the same class.<br />
  33. 33. The class Selector<br />The class selector uses the HTML class attribute, and is defined with a "."<br />In the example below, all HTML elements with class="center" will be center-aligned:<br />.center {text-align:center;}<br />You can also specify that only specific HTML elements should be affected by a class.<br />In the example below, all p elements with class="center" will be center-aligned:<br /> {text-align:center;}<br />
  34. 34. CSS Background<br />CSS background properties are used to define the background effects of an element.<br />CSS properties used for background effects:<br />background-color<br />background-image<br />background-repeat<br />background-attachment<br />background-position<br />
  35. 35. Back Ground Examples<br />body {background-color:#b0c4de;}<br />body {background-image: url('paper.gif');}<br />body{background-image:url('gradient2.png');background-repeat:repeat-x;}<br />
  36. 36. CSS Text<br />
  37. 37. CSS Font<br />
  38. 38. CSS Float<br />This property is used to decide if the element can also accommodate other element beside it<br />There are two values for float property<br />Left: allows other elements on right of it<br />Right: allows other elements on right of it<br />Usually elements float left<br />.thumbnail {float:left;width:110px;height:90px;margin:5px;}<br />
  39. 39. Finally<br />Put all these elements together and create your home page. Make it attractive.<br />You don’t need flash, photoshop etc to do that<br />All you need is imagination<br />
  40. 40. Thanks<br />Speaker:<br />Mr. Rajesh S Vishnani<br />IT Consultant<br />