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

Intro to HTML

1,491

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,491
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
60
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. introduction to html Basic syntax and elements
  • 2. what is html? • HTML: Hyper Text Markup Language • Language which defines webpages • Structure • Appearance • Description • Worldwide standard • Composed of HTML tags
  • 3. html tags • Basic unit of an HTML document • Contained in brackets: <tag> • Usually in pairs • Opening: <tag> • Closing: </tag>
  • 4. Basic Structure • HTML document: <html></html> • Head: <head></head> • Body: <body></body>
  • 5. Basic Structure <html> <head> <!-- document information goes here --> </head> <body> <!-- visible content goes here --> </body> </html>
  • 6. Basic Elements • Headings: <h1></h1>...<h6></h6> • Paragraphs: <p></p> • Links (anchors): <a></a> • Images: <img /> • Line breaks: <br />
  • 7. HTML Syntax • Two types of elements: 1.Container elements • Has content inside <p>Hello world</p> • Closed by a closing tag </p> 2.Empty elements • Content in itself <img src=“hi.gif” /> • Self-closing <br /> • Elements can have attributes
  • 8. Coding Tips • Always close the element • <h1>Header</h1>, <br /> • Use lower case • <p>, <body>, <html> • First-opened, last-closed • <p><a href=“#”>Link</a></p> • Always quote attributes • <img src=“major.jpg”>
  • 9. TExt-formatting • Bold: <b>Bold text</b> • Italic: <i>Italicized text</i> • Big: <big>Big text</big> • Small: <small>Small text</small> • Emphasized: <em>Emphasized text</em> • Strong: <strong>Strong text</strong> • Subscript: <sub>Subscript text</sub> • Superscript: <sup>Superscript text</sup>
  • 10. Anchor Attributes • Destination file/location • Another webpage: <a href=“sample.html”> • Open a picture: <a href=“me.jpg”> • Go to an area: <a href=“#chapter”> • Where to open the link • New window: <a target=“_blank”> • Declare an anchor-area: <a name=“chapter”>
  • 11. image attributes • Location and filename: <img src=“hi.gif” /> • Alternative text: <img alt=“My First Dog” />
  • 12. tables • Declare a table: <table>...</table> • Define a row: <tr>...</tr> • Add divisions/cells: <td>...</td> • Put content inside the cells: <td>Content</td>
  • 13. Sample Table Code <table> <tr> <td>Name</td> <td>Occupation</td> </tr> <tr> <td>Gloria</td> <td>Thief</td> </tr> </table>
  • 14. Lists • Ordered list: <ol>...</ol> • Unordered list: <ul>...</ul> • List item: <li>Music</li>
  • 15. Sample List Code <ol> <li>Charm</li> <li>Electron</li> <li>Gluon</li> <li>Graviton</li> <li>Muon</li> <li>Photon</li> <li>Tau</li> <li>Truth</li> </ol>

×