Frames:
A sample index.html that creates a page with a narrow “banner” at the top, a side “navbar” and a “main” section:
<html>
<head>
<title>A Web Page With Frames</title>
</head>
<body>
<frameset rows="50,*" frameborder="0">
<frame src="frame_top.html" name="top" scrolling="no" noresize>
<frameset cols="150,*" frameborder="0">
<frame src="frame_side.html" name="side" scrolling="no" noresize>
<frame src="main.html" name="main" scrolling="yes">
</frameset>
</frameset>
</body>
</html>
Then create separate pages and save as “frame_top.html”, “main.html”, and “frame_bottom.html”. Note rows and cols if you want to alter the layout.
When making links in one frame that change the content of another, use “target=nameofframe”. In the example above, I put these links in frame_side.html, but I wanted them to open in the frame named “main”:
<p><a href="main.html" target="main">Main</a>
<p><a href="cheatsheet1.html" target="main">HTML Cheatsheet</a>
<p><a href="resume.html" target="main">Marion's Resume</a>
Frames are not commonly used in professional sites because they can complicate users’ navigation of the site, and because they sometimes confuse search engines.
Cascading Style Sheets:
Used to simplify and enhance the details of the appearance of your page, not the content.
Best if created in a separate file ending in “.css” and then referenced by all of your webpages. For example, I might put all my style definitions in a file called “styles.css” -- then, to use them in a webpage, I would add this line to the <head> section of the webpage:
<link href="styles.css" type="text/css" rel="stylesheet">
The styles.css file would contain some stuff that looked like this:
.greentable
{
width: 400px;
border: 0px;
padding: 5px;
background-color:lightgreen;
font-family:Arial;
color:navy;
text-align:center;
}
.main
{
font-family: Arial;
font-size: 10pt;
position: absolute;
left: 120px;
top: 90px;
background-color: orange;
width: 620px;
padding: 15px;
}
etc. And to apply these styles to parts of my webpage, I’d write my html with things like
<table class=”greentable”>
Pay attention to “punctuation” in this code, it matters. : ; . { }