Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie How to add images and links to an HTML page
Ähnlich wie How to add images and links to an HTML page (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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