Art301MW – Week 2A Notes and Assignment
Anatomy of HTML
<tag> content </tag>
<h1> thru <h6>
<h1> content </h1>
<h1>content <b>content</b> other content</h1>
<html>
<head>
</head>
<body>
</body>
</html>
<p style=”color:red;” alt=”something goes here”>content</p>
<a href=”path/page.html”>
<img src=”image.jpg”/>
What is the <head> tag?
4 file naming rules:
1. don’t use caps – use lowercase
2. don’t use spaces – use _ or –
3. don’t use special characters ?&%$!@-+
4. always use a file extension – .html .jpg .png .gif .pdf
block level element
creates a new line/section of content
inline level element
alter block level and not create new line/section
LISTS
ordered list
<ol>
unordered list
<ul>
Links
<a href=“http://www.website.com”>content</a>
if leaving your root folder must have http://website.com – absolute link.
relative are to files within your root folder.
SAME FOLDER
<a href=“index.html”></a>
CHILD FOLDER
<a href=“about/about.html”></a>
GRANDCHILD FOLDER
<a href=“contact/joe/joe.html”></a>
PARENT FOLDER
<a href=”../index.html”></a>
GRANDPARENT FOLDER
<a href=“../../index.html”></a>
Image links
<img src=“nameoffile.jpg” alt=“describe the image HERE”/>
mailto link
<a href=“mailto:email@email.com”>content</a>
Assignment DUE WEDNESDAY – SAMPLE FILES HERE.
ASSIGNMENT #2:
5 PAGE WEBSITE
TOPIC: YOUR FIRST PET
- Home/About/Photos/Contact/News
- must nav on top of every page
- nav must be unordered list
- image on every page
- ordered list – on one page
- email link – contact page
- one or more links to outside websites
- add hr and br
- add some inline – em and strong
- add some block type – h1 – h6 and p