- To understand the basics of HTML
- To understand that formatting HTML is done with Cascading Style Sheets
- To become familiar with "code view" of Dreamweaver
Test page with styles-1
Test page with styles-2
Sample CSS stylesheet
Introduction to HTML
- All HTML pages have a basic structure:
<html>
<head>
<title>What you type here shows in the tab of your browser window</title>
</head>
<body>
Everything that shows in the screen of the browser is placed here. Inside the body tags.
</body>
</html>
- All tags (also called elements) must close. Two categories of tags:
- Tags that have an opening and closing tag:
<h2> This is a heading two tag. Notice the '/' in the closing tag </h2>
Notice there are 2 tags; An opening tag <h1> and a closing tag </h2>. Closing tag has a '/'
- Tags that just use one tag (closes with a '/') : <img src="images/gorilla.jpg" alt="picture of gorilla" />
Notice there is only 1 tag. But to close this tag, we use a '/' at the end
- Tags that have an opening and closing tag:
- Some tags have 'attributes'. Attributes give extra information about a tag:
Below in bold are examples of common attributes:
- <a href="http://www.google.ca">Go to google</a>
- <img src="images/gorilla" alt="image of gorilla" height="200px" width="100px" />
- <p class="mycssclass"> I am a paragraph. </p>
notice that attributes are put in the 'opening tag'
- Good practices:
- Always use lowercase for tags (also called elements).
- Do not worry about spacing.
- Indentation makes it easier to read HTML but is not essential.
- Always use lower case in file names for the web.
- Never leave spaces in files name for web ('my_puppy.jpg' is better than 'My Puppy.jpg').
- Assume that all file names are case sensitive (MyDog.jpg is not the same as mydog.jpg).
- A good HTML reference and tutorials (for beginners and advanced):
http://www.w3schools.com/Html/default.asp
Exercise - Write a Simple HTML Page Using Notepad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to my homepage</title>
</head>
<body>
<h1>Welcome to UNCG at Greensboro</h1>
<img width="182px" height="130px" src="http://wilbaer.uncg.edu/templates/tate.jpg" alt="tate street" />
<h2>Recommended Restaurants and Cafes on Tate Street</h2>
<p>Below is a list of restaurants and cafes close to UNCG</p>
<ul>
<li>BoBo House</li>
<li>Thai restaurant</li>
<li>Indian restaurant</li>
<li>Japanese Restaurant</li>
<li>Tate St. Coffee Shop</li>
</ul>
<p>For more info visit: <br />
<a href="http://www.downtowngreensboro.org/citylight/dining">Downtown Greensboro Dining</a></p>
<p>For more information, please visit <span>Thanks for visiting!</span></p>
</body>
</html>
CSS - Cascading Style Sheets
CSS is used to format HTML.
Add the following tag to the section of your document to add a CSS stylesheet
- Look at your page in a browser.
You have just attached a stylesheet that defines how your page should look.
- Each departmental website has its own style sheet. It defines styles like this (a simple version of a stylesheet):
body {
background-color:#284B7E;
color:white;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
h1 {
background-color:#052F6D;
color:white;
padding:10px;
}
h2 {
border-bottom:1px dashed #CCC;
}
ul {
border:1px solid black;
background-color:#F5F5F5;
color:#333333;
width:180px;
padding-top:10px;
padding-bottom:10px;
}
a {
color:white;
}
img {
padding:4px;
border:1px solid black;
background-color:white;
}
The UNCG Wrapper
Essentially the "UNCG wrapper" divides up the page into three parts. The head, the body, and the footer.
You will notice the following tags in each page, if you look at the page in "code view".
If you remove these elements, you will no longer see the UNCG header and colors and so on.
<!--#set var="UNIT_VARS" value="/hhp/inc_unit/unit_variables.html" -->
<!--#set var="PAGE_TITLE" value="The University of North Carolina at Greensboro, School of Health & Human Performance" -->
<!--#include virtual="/inc_uncg/header.html" -->
<h2>School of Health and Human Performance 2003 - 2008 Goals for the <acronym title="The University of North Carolina at Greensboro">UNCG</acronym> Plan</h2><br />
<h3>Strategic Direction #1</h3>
<!--#include virtual="/inc_uncg/footer.html" -->
- <!--#set var="UNIT_VARS" value="/hhp/inc_unit/unit_variables.html" -->
<!--#set var="PAGE_TITLE" value="The University of North Carolina at Greensboro, School of Health & Human Performance" --> - <!--#include virtual="/inc_uncg/header.html" -->
- <!--#include virtual="/inc_uncg/footer.html" -->
The first - sets the text for the <title> tag, and also some other department specific information (phone numbers, address etc. )
The second - includes the <html><header><title> <body> tags
The third - includes the closing tags </body> </html>