0
Web Design              HTML             Web Design Course                          Engsaad_aly@hotmail.com
Agenda   What is HTML.HTML Simple Example.     !DOCTYPE.         title.        h tag.        p tag.        Lists.     Attr...
HTML    Hyper Text Markup Language          Markup Language         Set of markup tags                   TagsKeywords surr...
HTML Basic Structure<!DOCTYPE html>  <html>    <head>      <title></title>    <head>    <body>    </body>  </html>
The <!DOCTYPE> Declaration
Page Titles
HTML Headings  <h1>………..<h6>
HTML Headings
HTML Paragraphs
Dont Forget the End Tag
Lists<ul>                       <ol>    <li>   </li>               <li>   </li>    <li>   </li>               <li>   </li>...
Lists
ListsOrdered Lists
Lists
HTML Attributes
HTML Links An anchor tag <a> is used to define a link, but you  also need to add the destination of the link.   The dest...
HTML Links
Mailto link To create a link on your Web site that opens an  email window .         <a href="mailto:e-mail">Send </a> S...
HTML Images  img Tag
HTML Images                        Alternate Text  < img src="facebook.jpg" alt= "facebook image" >                 Image ...
HTML Images                       Width & Height  < img src="facebook.jpg" alt= "facebook image"                width="300...
HTML Lines
HTML Comments <!--    -->
HTML Text Formatting    <b> …………………</b>
HTML Text Formatting   <em> …………………</em>
HTML Text Formatting
HTML Tables
HTML TablesTable      Table row   Table Data                          100              <tr>             </tr><table>      ...
HTML TablesTable      Table row   Table Data                        row 1, cell 1             <tr>            </tr>       ...
HTML Tables      Table          Table row   Table Data                                 row 1, cell 1                      ...
HTML Tables      Table          Table row   Table Data                                 row 1, cell 1                      ...
HTML Tables
HTML Tables
HTML Tables
End of HTML Coding Part 1
Forms used to send data across the web and are often  used as contact forms to convert information  inputted by a user in...
knowVisual Illusion
knowVisual Illusion
HTML
HTML
Upcoming SlideShare
Loading in...5
×

HTML

395

Published on

HTML tutorial (Basics)
language: English

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
395
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML"

  1. 1. Web Design HTML Web Design Course Engsaad_aly@hotmail.com
  2. 2. Agenda What is HTML.HTML Simple Example. !DOCTYPE. title. h tag. p tag. Lists. Attributes. Links. Images. Lines. Comments. Text format. Tables.
  3. 3. HTML Hyper Text Markup Language Markup Language Set of markup tags TagsKeywords surrounded by angle brackets Normally come in pairs Start Tag End Tag Opening Tags Closing Tags <> </>
  4. 4. HTML Basic Structure<!DOCTYPE html> <html> <head> <title></title> <head> <body> </body> </html>
  5. 5. The <!DOCTYPE> Declaration
  6. 6. Page Titles
  7. 7. HTML Headings <h1>………..<h6>
  8. 8. HTML Headings
  9. 9. HTML Paragraphs
  10. 10. Dont Forget the End Tag
  11. 11. Lists<ul> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li></ul> </ol>
  12. 12. Lists
  13. 13. ListsOrdered Lists
  14. 14. Lists
  15. 15. HTML Attributes
  16. 16. HTML Links An anchor tag <a> is used to define a link, but you also need to add the destination of the link.  The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as:"http://www.google.com", or it can be relative to the current page.
  17. 17. HTML Links
  18. 18. Mailto link To create a link on your Web site that opens an email window .  <a href="mailto:e-mail">Send </a> Send email to more than one address  <a href="mailto:e-mail1, e-mail2">Send </a>
  19. 19. HTML Images img Tag
  20. 20. HTML Images Alternate Text < img src="facebook.jpg" alt= "facebook image" > Image source Alternate textThe alt attribute provides alternative information for an image if a user for some reason cannot view it .
  21. 21. HTML Images Width & Height < img src="facebook.jpg" alt= "facebook image" width="300" height=“500">If the image cannot be displayed, the value of the alt attribute will be displayed
  22. 22. HTML Lines
  23. 23. HTML Comments <!-- -->
  24. 24. HTML Text Formatting <b> …………………</b>
  25. 25. HTML Text Formatting <em> …………………</em>
  26. 26. HTML Text Formatting
  27. 27. HTML Tables
  28. 28. HTML TablesTable Table row Table Data 100 <tr> </tr><table> 200</table> <tr> 100 </tr>
  29. 29. HTML TablesTable Table row Table Data row 1, cell 1 <tr> </tr> row 1, cell 2<table ></table> row 2, cell 1 <tr> </tr> row 2, cell 2
  30. 30. HTML Tables Table Table row Table Data row 1, cell 1 <tr> </tr> row 1, cell 2<table border=“ ”> </table> row 2, cell 1 <tr> </tr> row 2, cell 2
  31. 31. HTML Tables Table Table row Table Data row 1, cell 1 <tr> </tr> row 1, cell 2<table border=“ ”> </table> row 2, cell 1 <tr> </tr> row 2, cell 2
  32. 32. HTML Tables
  33. 33. HTML Tables
  34. 34. HTML Tables
  35. 35. End of HTML Coding Part 1
  36. 36. Forms used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.
  37. 37. knowVisual Illusion
  38. 38. knowVisual Illusion
  1. A particular slide catching your eye?

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

×