Html basics IML 140 (weeks 2-3)
Download as PPT, PDF1 like1,365 views
The document provides a step-by-step guide for creating a simple HTML webpage, including instructions for saving, renaming, and editing files. It covers basic HTML elements such as headers, paragraphs, lists, links, and images, along with attributes for customization. The document emphasizes the importance of using text editors and browsers to visualize changes made to the code.
Html basics IML 140 (weeks 2-3)
- 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)
- 3. <html> </html> <head> </head> <body> </body>
- 4. <html> </html> <head> </head> <body> </body> commands page content
- 5. <head> </head> <title> Evan's page </title> links to other non html documents that change the look or function of the site
- 6. <body> </body> Hello World! (element) (tag)
- 7. Create sandwich...Oops, I mean .html document <html> <head> <title> Evan's Site </title> </head> <body> Hello World! </body> </html>
- 8. Save document as index.txt File>export Send to desktop and name index.txt Once saved on desktop click and rename txt suffix to .html Right click and open in Firefox to make sure you did everything correctly Right click again and open with TextWrangler to edit Keep both TextWranger and Firefox versions open so you can just refresh Firefox 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