html basics iml 140 (weeks 2-3)
DESCRIPTION
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.TRANSCRIPT
• 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)
<html>
</html>
<html>
</html>
<head></head>
<body></body>
<html>
</html>
<head></head>
<body></body>
commands
page content
<head>
</head>
<title> Evan's page</title>
links to other non html documents that change the look or function of
the site
<body>
</body>
Hello World! (element)
(tag)
Create sandwich...Oops, I mean .html document
<html> <head> <title> Evan's Site </title> </head>
<body>Hello World!</body> </html>
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
<body>
</body>
Hello World! (element)
(tag)
get sample text: www.lipsum.com
paste lorem ipsum (element)
<body>
</body>
add basic formatting tags
lorem ipsum <p>lorem ipsum</p> lorem ipsum
<p>Hello World!</p>
<body>
</body>
add basic formatting tags
lorem ipsum <p>lorem ipsum</p> lorem ipsum
<h1>Hello World!</h1>
<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>
<body bgcolor="#cccccc">
</body>
add attribute to modify element
lorem ipsum <p>lorem ipsum</p> lorem ipsum
<h1>Hello World!</h1>
<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>
use attribute to remove bullets
<ul style="list-style: none"><li>home</li><li>about</li><li>contact</li></ul>
add image (both ways!)
<img src="http:url.jpg" />
<img src="file" />
change image attributes
<img src="http:url.jpg" />
<img src="file" height="200" width="200" />
wrap text around image by adding "align" attribute
<img src="file" height="200" width="200" align="left"/>
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
a link is an attribute
<h1> Hello<a href="http:www.usc.edu"> USC!</a>
</h1>
wrap links with <a> tags
<a href="index.html">Home</a><a href="about.html">About</a>
<a href="contact.html">Contact</a>
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