Learning Html

1,314 views

Published on

This presentation will show you the basic to learn and create an HTML documents, it will give you the basic information to build a website.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,314
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learning Html

  1. 1. Introduction to Hyper-Text Markup Language Learning HTML
  2. 2. HTML <ul><ul><li>Markup Language </li></ul></ul><ul><ul><li>Identifies and organizes elements of a page </li></ul></ul><ul><ul><li>Rendered by Web Browsers </li></ul></ul>
  3. 3. HTML Markup <ul><ul><li>Elements </li></ul></ul><ul><ul><li>Delimited by tags </li></ul></ul><ul><ul><ul><ul><li>Keywords enclosed by angle brackets </li></ul></ul></ul></ul><ul><ul><ul><ul><li><> </> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>All tags must be closed </> </li></ul></ul></ul></ul><ul><ul><li>HTML is not Case Sensitive </li></ul></ul>
  4. 4. Creating HTML <ul><li>HTML can be created using plain text editors like Notepad or Emacs </li></ul><ul><li>It can also be created with tools like Adobes Dreamweaver. </li></ul><ul><li>Saved with the extension .htm or .html </li></ul><ul><li>The first page is called index.html browser will load it automatically when you save it on the root folder of the web server. </li></ul>
  5. 5. Basic HTML <ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li><head> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li></head> </li></ul>
  6. 6. Headers <ul><li>Elements that divide a page in subsections </li></ul><ul><li>h1-h6 </li></ul><ul><li>Size is browser specific. </li></ul><ul><li><h1>h1 Header</h1> </li></ul><ul><li><h2>h2 Header</h2> </li></ul><ul><li><h3>h3 Header</h3> </li></ul><ul><li><h4>h4 Header</h4> </li></ul><ul><li><h5>h5 Header</h5> </li></ul><ul><li><h6>h6 Header</h6> </li></ul>
  7. 7. Headers Example
  8. 8. Links <ul><li>Links are the glue that keep a web site together. </li></ul><ul><li>Good and descriptive links have anchor text. </li></ul><ul><li>You can use text or images </li></ul><ul><li>It requires a href attribute. </li></ul><ul><li><a href=“mysite.com”>This links will go to mysite</a> </li></ul>
  9. 9. Images <ul><ul><li>Images require the Element img and the attribute src which shows the image location </li></ul></ul><ul><ul><li>Images also have height, width and alt attribute. </li></ul></ul><ul><ul><li><img src=“logo.png” height=“100” width=“300” alt=“This is where we write the image description for search engines and for screen readers.”> </li></ul></ul><ul><ul><li>Image link <a href=“index.html”> <img src=“logo.png” height=“100” width=“300” alt=“logo of the website.”></a> </li></ul></ul>
  10. 10. Learn More <ul><li>To learn more advance HTML and CSS click on this link HTML CSS and XHTML </li></ul>

×