Your SlideShare is downloading. ×
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



Published on

Published in: Technology

1 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 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. 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. 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. 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. 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. 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. 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. 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. 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:
      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.
  • 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. HTML Lists: Unordered Lists: <ul> <li>Coffee</li> <li>Milk</li> </ul> Here is how it looks in a browser: Ordered Lists: <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: 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. 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. 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. <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: