• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to HTML
 

Intro to HTML

on

  • 1,681 views

 

Statistics

Views

Total Views
1,681
Views on SlideShare
1,366
Embed Views
315

Actions

Likes
0
Downloads
54
Comments
1

1 Embed 315

http://pisaywebdev.wordpress.com 315

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • the download link is wrong
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Intro to HTML Intro to HTML Presentation Transcript

    • introduction to html Basic syntax and elements
    • what is html? • HTML: Hyper Text Markup Language • Language which defines webpages • Structure • Appearance • Description • Worldwide standard • Composed of HTML tags
    • html tags • Basic unit of an HTML document • Contained in brackets: <tag> • Usually in pairs • Opening: <tag> • Closing: </tag>
    • Basic Structure • HTML document: <html></html> • Head: <head></head> • Body: <body></body>
    • Basic Structure <html> <head> <!-- document information goes here --> </head> <body> <!-- visible content goes here --> </body> </html>
    • Basic Elements • Headings: <h1></h1>...<h6></h6> • Paragraphs: <p></p> • Links (anchors): <a></a> • Images: <img /> • Line breaks: <br />
    • 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
    • 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”>
    • 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>
    • 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”>
    • image attributes • Location and filename: <img src=“hi.gif” /> • Alternative text: <img alt=“My First Dog” />
    • tables • Declare a table: <table>...</table> • Define a row: <tr>...</tr> • Add divisions/cells: <td>...</td> • Put content inside the cells: <td>Content</td>
    • Sample Table Code <table> <tr> <td>Name</td> <td>Occupation</td> </tr> <tr> <td>Gloria</td> <td>Thief</td> </tr> </table>
    • Lists • Ordered list: <ol>...</ol> • Unordered list: <ul>...</ul> • List item: <li>Music</li>
    • 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>