Html basics IML 140 (weeks 2-3)
•Download as PPT, PDF•
1 like•1,358 views
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.
![[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/htmlbasicsiml140week3-120126223547-phpapp01/85/Html-basics-IML-140-weeks-2-3-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to Html basics IML 140 (weeks 2-3)
More from Evan Hughes
More from Evan Hughes (20)
Recently uploaded
Recently uploaded (20)
Html basics IML 140 (weeks 2-3)
- 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>
- 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>