Html basics IML 140 (weeks 2-3)

5,433 views
5,323 views

Published on

This PowerPoint is a basic overview of HTML elements and attributes. At the end of the lesson your will create a simple website with three pages.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,433
On SlideShare
0
From Embeds
0
Number of Embeds
4,166
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html basics IML 140 (weeks 2-3)

  1. 1. <ul><ul><li>get an image onto your desktop </li></ul></ul><ul><ul><li>rename the image in simple terms! </li></ul></ul><ul><ul><li>find an image URL (should end in .jpg or some image file type) </li></ul></ul>
  2. 2. <html> </html>
  3. 3. <html> </html> <head> </head> <body> </body>
  4. 4. <html> </html> <head> </head> <body> </body> commands page  content
  5. 5. <head> </head> <title>   Evan's page </title> links to other non html documents that change  the look or function of the site
  6. 6. <body> </body> Hello World! (element) (tag)
  7. 7. Create sandwich...Oops, I mean .html document   <html>       <head>          <title>          Evan's Site          </title>     </head> <body> Hello World! </body>   </html>
  8. 8. <ul><li>Save document as index.txt </li></ul><ul><li>  </li></ul><ul><ul><li>File>export </li></ul></ul><ul><ul><li>Send to desktop and name index.txt </li></ul></ul><ul><ul><li>Once saved on desktop click and rename txt suffix to .html </li></ul></ul><ul><ul><li>Right click and open in Firefox to make sure you did everything correctly </li></ul></ul><ul><ul><li>Right click again and open with TextWrangler to edit </li></ul></ul><ul><ul><li>Keep both TextWranger and Firefox versions open so you can just refresh Firefox when you make changes </li></ul></ul>
  9. 9. <body> </body> Hello World! (element) (tag) get sample text: www.lipsum.com paste lorem ipsum (element)
  10. 10. <body> </body> add basic formatting tags       lorem ipsum  <p> lorem ipsum </p>         lorem ipsum <p> Hello World! </p>
  11. 11. <body> </body> add basic formatting tags       lorem ipsum  <p>lorem ipsum</p>        lorem ipsum <h1> Hello World! </h1>
  12. 12. <body> </body> create an unordered list     lorem ipsum  <p>lorem ipsum</p>        lorem ipsum <h1>Hello World!</h1> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul>
  13. 13. <body bgcolor=&quot;#cccccc&quot; > </body> add attribute to modify element       lorem ipsum  <p>lorem ipsum</p>        lorem ipsum <h1>Hello World!</h1>
  14. 14. <body bgcolor=&quot;#cccccc&quot;> </body> add font tag with attributes    <font face=&quot;arial&quot; color=&quot;#ffffff&quot;> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul>    </font>
  15. 15. use attribute to remove bullets <ul style=&quot;list-style: none&quot; > <li>home</li> <li>about</li> <li>contact</li> </ul>
  16. 16. add image (both ways!)   <img src=&quot;http:url.jpg&quot; />   <img src=&quot;file&quot; />   
  17. 17. change image attributes   <img src=&quot;http:url.jpg&quot; />   <img src=&quot;file&quot; height=&quot;200&quot; width=&quot;200&quot; />   
  18. 18. wrap text around image by adding &quot;align&quot; attribute     <img src=&quot;file&quot; height=&quot;200&quot; width=&quot;200&quot; align=&quot;left&quot; />   
  19. 19. add margins to make  &quot;style&quot; attribute       <img src=&quot;file&quot; height=&quot;200&quot; width=&quot;200&quot; align=&quot;left&quot; style=&quot;margin: 10px 10px 0px 0px&quot; />    top-right-bottom-left
  20. 20. a link is an attribute   <h1> Hello<a href=&quot;http:www.usc.edu&quot; > USC! </a>   </h1>   
  21. 21. wrap links with <a> tags   <a href=&quot;index.html&quot; >Home</a> <a href=&quot;about.html&quot; >About</a> <a href=&quot;contact.html&quot; >Contact</a>     
  22. 22. create new pages <ul><li>  </li></ul><ul><ul><li>right click and copy page </li></ul></ul><ul><ul><li>paste new page onto desktop </li></ul></ul><ul><ul><li>rename new page about.html </li></ul></ul><ul><ul><li>change some basic colors of page </li></ul></ul><ul><ul><li>do this again, but name contact.html </li></ul></ul><ul><li>   </li></ul>

×