Published on

Published in: Technology
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. HTML HTML is a language for describing web pages. * HTML stands for Hyper Text Markup Language * 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
  2. 2. HTML Elements: The <p> element: <p>This is my first paragraph.</p> The <body> element: <body> <p>This is my first paragraph.</p> </body The <html> element: <html> <body> <p>This is my first paragraph.</p> </body> </html>
  3. 3. HTML 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=&quot;value&quot; Attribute Example: HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href=&quot;;>This is a link</a>
  4. 4. HTML Headings: Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. Examples: <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML Lines: The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to separate content: <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
  5. 5. HTML Paragraphs: Paragraphs are defined with the <p> tag. Examples: <p>This is a paragraph</p> <p>This is another paragraph</p> HTML Line Breaks: Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: <p>This is<br />a para<br />graph with line breaks</p>
  6. 6. HTML Formatting Tags: Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text
  7. 7. HTML Styles: Style Example - Background Color <html> <body style=&quot;background-color:yellow&quot;> <h2 style=&quot;background-color:red&quot;>This is a heading</h2> <p style=&quot;background-color:green&quot;>This is a paragraph.</p> </body> </html> Style Example - Font, Color and Size <html> <body> <h1 style=&quot;font-family:verdana&quot;>A heading</h1> <p style=&quot;font-family:arial;color:red;font-size:20px;&quot;>A paragraph.</p> </body> </html> Style Example - Text Alignment <html> <body> <h1 style=&quot;text-align:center&quot;>This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
  8. 8. HTML Links: Syntax <a href=&quot;url&quot;>Link text</a> Example: <a href=&quot;;>Visit W3Schools</a> The target Attribute: The example below will open the linked document in a new browser window: <a href=&quot;; target=&quot;_blank&quot;>Visit W3Schools!</a> The name Attribute: Example: A named anchor inside an HTML document: <a name=&quot;tips&quot;>Useful Tips Section</a> Create a link to the &quot;Useful Tips Section&quot; inside the same document: <a href=&quot;#tips&quot;>Visit the Useful Tips Section</a>
  9. 9. HTML Images: Syntax for defining an image: <img src=&quot;url&quot; alt=&quot;some_text&quot;/> The Alt Attribute : <img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot; /> Note: <ul>The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text. </ul>
  10. 10. HTML Tables: <table border=&quot;1&quot;> <tr> <th>Heading</th> <th>Another Heading</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> How it looks in a browser: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
  11. 11. HTML Lists: Unordered Lists: <ul> <li>Coffee</li> <li>Milk</li> </ul> Here is how it looks in a browser: <ul><li>Coffee
  12. 12. Milk </li></ul>Ordered Lists: <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: <ul><li>Coffee
  13. 13. Milk </li></ul>An ordered list is also a list of items. The list items are marked with numbers. An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
  14. 14. Forms: Text Fields: <form> First name: <input type=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; /> </form> <form> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> Male <br /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; /> Female </form> Male : Female : First name: Last name: Radio Buttons:
  15. 15. Checkboxes: <form> I have a bike: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot; /> <br /> I have a car: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Car&quot; /> <br /> I have an airplane: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Airplane&quot; /> </form> The Form's Action Attribute and the Submit Button: <form name=&quot;input&quot; action=&quot;html_form_submit.asp&quot; method=&quot;get&quot;> Username: <input type=&quot;text&quot; name=&quot;user&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </form> Username: I have a bike: I have a car: I have an airplane: submit
  16. 16. <html> <body> <p style=&quot;background-color:#FFFF00&quot;> Color set by using hex value </p> <p style=&quot;background-color:rgb(255,255,0)&quot;> Color set by using rgb value </p> <p style=&quot;background-color:yellow&quot;> Color set by using color name </p> </body> </html> HTML Colors:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.