Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Basics - IML 140


Published on

Follow along with this slideshow to dip your toes into basic HTML.

Published in: Technology, Design

HTML Basics - IML 140

  1. 1. • get an image onto your desktop • rename the image in simple terms! • find an image URL (should end in .jpg or some image file type)
  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> Bodie's page </title> links to other non html documents that change the look or function of the site (CSS)
  6. 6. <body> </body> Hello World! (element) (tag)
  7. 7. Create your skeleton...Oops, I mean .html document <html> <head> <title> Bodie's Site </title> </head> <body> Hello World! </body> </html>
  8. 8. Save document to desktop as index.html • Right click and open in Chrome to make sure you did everything correctly • Right click again and open with SublimeText to edit • Keep both SublimeText and Chrome versions open so you can just refresh Chrome when you make changes
  9. 9. <body> </body> Hello World! (element) (tag) get sample text: 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="#cccccc"> </body> add attribute to modify element lorem ipsum <p>lorem ipsum</p> lorem ipsum <h1>Hello World!</h1>
  14. 14. <body bgcolor="#cccccc"> </body> add font tag with attributes <font face="arial" color="#ffffff"> <ul> <li>home</li> <li>about</li> <li>contact</li> </ul> </font>
  15. 15. use attribute to remove bullets <ul style="list-style: none"> <li>home</li> <li>about</li> <li>contact</li> </ul>
  16. 16. add image (both ways!) <img src="http:url.jpg" /> <img src="file" />
  17. 17. change image attributes <img src="http:url.jpg" /> <img src="file" height="200" width="200" />
  18. 18. wrap text around image by adding "align" attribute <img src="file" height="200" width="200" align="left"/>
  19. 19. add margins to make "style" attribute       <img src="file" height="200"  width="200" align="left" style="margin: 10px 10px 0px 0px" />      top-right-bottom-left
  20. 20. a link is an attribute    <h1>  Hello<a href=""> USC!</a>  </h1>     
  21. 21. wrap links with <a> tags    <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a>        
  22. 22. create new pages    • right click and copy page • paste new page onto desktop • rename new page about.html • change some basic colors of page • do this again, but name contact.html