Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à How to add images and links to an HTML page
Similaire à How to add images and links to an HTML page (20)
Dernier
Dernier (20)
How to add images and links to an HTML page
- 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)
- 5. <head> </head> <title> Bodie's page </title> links to other non html documents that change the look or function of the site (CSS)
- 7. Create your skeleton...Oops, I mean .html document <html> <head> <title> Bodie's Site </title> </head> <body> Hello World! </body> </html>
- 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. <body> </body> Hello World! (element) (tag) get sample text: www.lipsum.com paste lorem ipsum (element)
- 10. <body> </body> add basic formatting tags lorem ipsum <p>lorem ipsum</p> lorem ipsum <p>Hello World!</p>
- 11. <body> </body> add basic formatting tags lorem ipsum <p>lorem ipsum</p> lorem ipsum <h1>Hello World!</h1>
- 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. <body bgcolor="#cccccc"> </body> add attribute to modify element lorem ipsum <p>lorem ipsum</p> lorem ipsum <h1>Hello World!</h1>
- 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. use attribute to remove bullets <ul style="list-style: none"> <li>home</li> <li>about</li> <li>contact</li> </ul>
- 16. add image (both ways!) <img src="http:url.jpg" /> <img src="file" />
- 17. change image attributes <img src="http:url.jpg" /> <img src="file" height="200" width="200" />
- 18. wrap text around image by adding "align" attribute <img src="file" height="200" width="200" align="left"/>
- 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. a link is an attribute <h1> Hello<a href="http:www.usc.edu"> USC!</a> </h1>
- 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. 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