Embed Size (px)
DESCRIPTION
Follow along with this slideshow to dip your toes into basic HTML.
Citation preview
• 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> Bodie's page</title>
links to other non html documents that change the look or function of
the site (CSS)
<body>
</body>
Hello World! (element)
(tag)
Create your skeleton...Oops, I mean .html document
<html> <head> <title> Evan's Site </title> </head>
<body>Hello World!</body> </html>
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 TextWrangler to edit
• Keep both TextWranger and Chrome versions open so you can just refresh Chrome 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
