Your SlideShare is downloading. ×
Design Dream
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Design Dream


Published on

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

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

Published in: Education

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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