SlideShare a Scribd company logo

Design Dream

•Download as PPTX, PDF•
•
I
IEEE UVPCE

1. The document provides an introduction to HTML and CSS basics for beginners. It covers important HTML tags like headings, paragraphs, links, images, lists and tables. It also discusses CSS syntax, selectors using id and class, and properties for text, background, font and float. 2. The document is presented by Rajesh Vishnani, an IT consultant, and provides step-by-step instructions on using basic HTML and CSS to design simple yet attractive web pages without advanced tools.

1 of 40
HTML and CSSBasics For BeginnersBy- Rajesh VishnaniIT Consultant
Something InterestingThe first person ever to dream of programming a Computer was a WOMAN called ADA LOVELACE Ada Lovelace- First Programmer Ever
Our List of To- DoBasic tags in HTML and Basic Web StructureCreating advance Web Template StructureWriting simple powerful CSSDesign a simple Web Page with good Looks
Basics of html
What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text MarkupLanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages
HTML TagsHTML markup tags are usually called HTML tagsHTML 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 tagStart and end tags are called opening tags and closing tags
HTML Headings<h1> defines the largest heading. <h6> defines the smallest heading.
HTML ParagraphsParagraphs are defined with the <p> tag.
HTML Text Formatting
Design Dream
HTML Text Formatting Tags
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 attributeTo create a bookmark inside a document, by using the name attribute
HTML Images
Design Dream
HTML Styles
Design Dream
HTML ListsThe most common HTML lists are ordered and unordered lists:
<html><body><h4>An Unordered List:</h4><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
<h4>An Ordered List:</h4><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></body></html>
HTML TablesTables 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.
<html><body><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> </body></html>
Design Dream
HTML Form Tags
CSSIn 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
How to Use StylesWhen 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 sheetInternal style sheetInline styles
External StylesheetsAn 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>
Internal StylesheetsAn 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>
Inline StylesheetsAn 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>
CSS SyntaxA CSS rule has two main parts: a selector, and one or more declarations:
CSS Id and ClassThe id SelectorThe 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 "#".
CSS Id and ClassThe style rule below will be applied to the element with id="para1":Example#para1{text-align:center;color:red;}
The class SelectorThe 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.
The class SelectorThe 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:p.center {text-align:center;}
CSS BackgroundCSS background properties are used to define the background effects of an element.CSS properties used for background effects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Back Ground Examplesbody {background-color:#b0c4de;}body {background-image: url('paper.gif');}body{background-image:url('gradient2.png');background-repeat:repeat-x;}
CSS Text
CSS Font
CSS FloatThis property is used to decide if the element can also accommodate other element beside itThere are two values for float propertyLeft: allows other elements on right of itRight: allows other elements on right of itUsually elements float left.thumbnail {float:left;width:110px;height:90px;margin:5px;}
FinallyPut all these elements together and create your home page. Make it attractive.You don’t need flash, photoshop etc to do thatAll you need is imagination
ThanksSpeaker:Mr. Rajesh S VishnaniIT Consultant

More Related Content

Design Dream

  • 1. HTML and CSSBasics For BeginnersBy- Rajesh VishnaniIT Consultant
  • 2. Something InterestingThe first person ever to dream of programming a Computer was a WOMAN called ADA LOVELACE Ada Lovelace- First Programmer Ever
  • 3. Our List of To- DoBasic tags in HTML and Basic Web StructureCreating advance Web Template StructureWriting simple powerful CSSDesign a simple Web Page with good Looks
  • 5. What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text MarkupLanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages
  • 6. HTML TagsHTML markup tags are usually called HTML tagsHTML 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 tagStart 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 ParagraphsParagraphs are defined with the <p> tag.
  • 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 attributeTo create a bookmark inside a document, by using the name attribute
  • 17. HTML ListsThe most common HTML lists are ordered and unordered lists:
  • 18. <html><body><h4>An Unordered List:</h4><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
  • 19. <h4>An Ordered List:</h4><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol></body></html>
  • 20. HTML TablesTables 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><body><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> </body></html>
  • 24. CSSIn 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 StylesWhen 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 sheetInternal style sheetInline styles
  • 26. External StylesheetsAn 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 StylesheetsAn 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 StylesheetsAn 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 SyntaxA CSS rule has two main parts: a selector, and one or more declarations:
  • 30. CSS Id and ClassThe id SelectorThe 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 ClassThe style rule below will be applied to the element with id="para1":Example#para1{text-align:center;color:red;}
  • 32. The class SelectorThe 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 SelectorThe 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:p.center {text-align:center;}
  • 34. CSS BackgroundCSS background properties are used to define the background effects of an element.CSS properties used for background effects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
  • 35. Back Ground Examplesbody {background-color:#b0c4de;}body {background-image: url('paper.gif');}body{background-image:url('gradient2.png');background-repeat:repeat-x;}
  • 38. CSS FloatThis property is used to decide if the element can also accommodate other element beside itThere are two values for float propertyLeft: allows other elements on right of itRight: allows other elements on right of itUsually elements float left.thumbnail {float:left;width:110px;height:90px;margin:5px;}
  • 39. FinallyPut all these elements together and create your home page. Make it attractive.You don’t need flash, photoshop etc to do thatAll you need is imagination
  • 40. ThanksSpeaker:Mr. Rajesh S VishnaniIT Consultant