Expansion of a HOME PAGE

Question

balinda_wilson 0 Newbie Poster

13 Years Ago

I need some opinions from experienced web designers. This was my Week 2 assignment:
Expand the basic homepage to a site which includes at least three web pages. Incorporate the following into your expanded website:

Apply Cascading Style Sheets (CSS) to format elements
Integrate graphics effectively into the site
Organize page content using structural elements, such as headings, paragraphs, tables and lists.

Now this is what I came up with but want to make sure that I covered all aspects of the questions:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,td,th {
    color: #F00;
}
</style>
<b><title>PRATT STREET LEARNING CENTER</title></b>

</head>


<body bgcolor="#660066" background="Images/2335.jpg" text="#9966CC" link="#9966CC">
<a name="HOME"></a><font size="5" color="red"><center>PRATT STREET LEARNING CENTER</center></font><br>

<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">HOME</a></font> <br>
        <LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">About Us</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">History</a></font><br>
        <LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Programs</a></font><br>
        <LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Locations</a></font><br>
        <LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Contact Us</a></font><br>
        <LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red">

<FORM>
<font size="2" color="red"><INPUT TYPE="button" VALUE="Register" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('Page URL beginning with http:// prattstreetlearningctr.com');"></font></br>
</FORM>          

<a href="PRATT STREET LEARNING CENTER.html" target="_new"><img src="2417.jpg" width="402" height="700" border="5" align="left"></a>
        <div id="welcome">
            <span id="welcome">
            <h1>
<font size="3" color="red">Welcome to Pratt Street Learning
<!--#include file="Templates/index.html" -->
Center
<h1>
<div>
<right><font size="2" color="black">The center where children can be themselves and prepare for Kindergarten at the same time. The center is here to assist working parenting on reaching there goal with juggling work and preparation of school at the same time for their children. The center is like a second home to some children and a relief to most parents due to there hours and days available. 
  <right></font><br>
<div>

<h2><font size="3" color="red">Pratt Street Learning Moto</font><br>

<div>

    <right><font size="2" color="black">Pratt Street is a place to join the neighborhood family community. Your children here to grow and expand their minds.
  <right></font><br>
<div>
<h3><font size="3" color="red">Pratt Street Learning Staff Experience</font><br>

<div>

<right><font size="2" color="black">Pratt Street staff is there to assist children in reaching there goals. The staff is like an extended family from home that the children to love the atmosphere.The children are being cared for by experienced and licensed teacher who give the best service to families that they do not want to leave to center.
<right></font><br>
<div>


 <body background="img src="2417.jpg">

</body>

    <right><font size="2" color="red"><a href="mailto:prattstreetlearningctr.com">Comments</a><right></font><br>

But my questions is how do I link the topic words on the homepage to another document on the web and still be able to go back to home. That would be a complete site...Can someone check it out....

web-design

Edited 11 Years Ago by Reverend Jim because: Fixed formatting

4 Contributors
4 Replies
92 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Cool&Awesome

All 4 Replies

Cool&Awesome 7 Junior Poster in Training

13 Years Ago

I need some opinions from experienced web designers. This was my Week 2 assignment:
Expand the basic homepage to a site which includes at least three web pages. Incorporate the following into your expanded website:
1) Apply Cascading Style Sheets (CSS) to format elements
2)Integrate graphics effectively into the site
3)Organize page content using structural elements, such as headings, paragraphs, tables and lists.
Now this is what I came up with but want to make sure that I covered all aspects of the questions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,td,th {
color: #F00;
}
</style>
<b><title>PRATT STREET LEARNING CENTER</title></b>
</head>

<body bgcolor="#660066" background="Images/2335.jpg" text="#9966CC" link="#9966CC">
<a name="HOME"></a><font size="5" color="red"><center>PRATT STREET LEARNING CENTER</center></font><br>
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">HOME</a></font> <br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">About Us</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">History</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Programs</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Locations</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red"><a href="http://www.prattstreetlearningctr.com">Contact Us</a></font><br>
<LINK rel="next" href="home.html">
<link type="text/css"><link href="2417.jpg" rel="HISTORY" rev="HOME" hreflang="en">
<font size="3" color="red">
<FORM>
<font size="2" color="red"><INPUT TYPE="button" VALUE="Register" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('Page URL beginning with http:// prattstreetlearningctr.com');"></font></br>
</FORM>
<a href="PRATT STREET LEARNING CENTER.html" target="_new"><img src="2417.jpg" width="402" height="700" border="5" align="left"></a>
<div id="welcome">
<span id="welcome">
<h1>
<font size="3" color="red">Welcome to Pratt Street Learning

Center
<h1>
<div>
<right><font size="2" color="black">The center where children can be themselves and prepare for Kindergarten at the same time. The center is here to assist working parenting on reaching there goal with juggling work and preparation of school at the same time for their children. The center is like a second home to some children and a relief to most parents due to there hours and days available.
<right></font><br>
<div>
<h2><font size="3" color="red">Pratt Street Learning Moto</font><br>
<div>
<right><font size="2" color="black">Pratt Street is a place to join the neighborhood family community. Your children here to grow and expand their minds.
<right></font><br>
<div>
<h3><font size="3" color="red">Pratt Street Learning Staff Experience</font><br>
<div>
<right><font size="2" color="black">Pratt Street staff is there to assist children in reaching there goals. The staff is like an extended family from home that the children to love the atmosphere.The children are being cared for by experienced and licensed teacher who give the best service to families that they do not want to leave to center.
<right></font><br>
<div>

<body background="img src="2417.jpg">
</body>
<right><font size="2" color="red"><a href="mailto:prattstreetlearningctr.com">Comments</a><right></font><br>

But my questions is how do I link the topic words on the homepage to another document on the web and still be able to go back to home. That would be a complete site...Can someone check it out....

Hi Balinda,

First, the not so cool news are that most of this code, if not all of it would be fine (and nothing more than fine) like 10 years ago.

But the cool news is...things are way simpler today, and you can achieve more in much less code, so basically things are about to get easier and more fun for you, hopefully this post can start it off, but whatever your learning source(s) are, you need to update to some today's literature.

I'll run through your code here like speedy Gonzales, so if I omit anything, just ask:)

let's start:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">

This is to define what kind of document you're starting. This doctype is pretty old + doesn't look fun at all, so just dump it and replace it with something like this:

<!DOCTYPE HTML>

With this you declare it's a HTML document, as it is - simple and clear.

Possible remarks from professors (or whoever gives you these assignments):

"This is not standard" - well sorry, yes it is
"It's incomplete, you didn't declare blah,blah.." - yes, I did, this is the HTML5 doctype
"This doesn't work" - works for Google, and they get quite a few visits daily

----

But my questions is how do I link the topic words on the homepage to another document on the web and still be able to go back to home. That would be a complete site...

It's easy, you'll do it in a snap + while we do it you'll also start accomplishing this:

3)Organize page content using structural elements, such as headings, paragraphs, tables and lists.

Here's how. To allow navigation between pages of your site, usually there is some kind of menu. Now, to cover the 3) from your assignment, let's make this menu using some structural elements, such as an unordered list:

<div id="navbar">
<ul id="mainmenu">
<li><a href="index.html">HOMEPAGE</a></li>
<li><a href="other.html">SOME OTHER PAGE</a></li>
<li><a href="fun.html">FUN PAGE</a></li>
<li><a href="contact.html">CONTACT PAGE</a></li>
</ul>

Ok, so now you replace filenames with your actual filenames, and put this code on each of those pages, and you'll have a simple menu for navigating between them.

--------------

Ok, now let's start making this more serious, and cover this too:

1) Apply Cascading Style Sheets (CSS) to format elements

So, we created the menu, but now we want to format it's elements,
or style it up as i'd like to say:)

Put the below code anywhere between

<head>

and

</head>

tags of your page, and do it on each page:

<link type="text/css" rel="stylesheet" href="style.css" />

I'll explain it all, it's simple, for now just do it:)

Now..open a new file in your editor and paste this code in it:

#navbar {
height:40px;
background:#F6C;
}

#mainmenu li {
float:left;
display:inline;
}

#mainmenu a {
display:block;
width:100px;
height:16px;
padding:12px 0 12px 0;
text-align:center;
color:#EEE;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: none;
letter-spacing: 0.2px;
line-height: 1.5em;
text-decoration:none;
}

#mainmenu a:hover {
background-color: #FF91DB;
}

Save this file as style.css, and save it to the same place where your
html pages are.

Now go check out your pages, and you should see a nice horizontal pink
menu (or ugly horizontal pink menu:))

Now, lets shortly go back to see what have we actually done here:

1 - we created a main menu using logical elements:

div - we've put our menu into a separate container on page, a div, and we gave it an identifier, id="navbar" - you'll see why

ul - we created an unordered list, with some items in it (li), and each item contained a link (a) which when clicked on the text in between, leads you to the document defined with (href) - we also gave this list an identifier, id="mainmenu"

2 - we linked a style.css file to every page of your site.

3 - and then, using the element identifiers that we created for our elements, we have styled them up with the code of style.css file

Now, about steps 2 and 3, you can apply the css other ways too, as you did here:

<style type="text/css">
body,td,th {
	color: #F00;
}
</style>

This will also work, but..the way we did it now, doing all css in a separate file, and then calling that file from each page will allow you to control the look of the entire site from one place...convenient..go ahead and play with some of the self explanatory values in style.css and see

----------

and to not forget..

2)Integrate graphics effectively into the site

Wow, this can be done in too many ways..but looks from your code like you did it, you added some background image at the very least - can't comment as i can't see it

Kraai commented: This was a very goog css101 explanation done with great enthusiasm and energy, and understandable. +3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

This was a very goog css101 explanation done with great enthusiasm and energy, and understandable.

Arkinder 93 Posting Pro in Training · Answer 1 · 2010-11-24T01:53:47+00:00

Please use code tags when posting code. Most of the code you're using is deprecated. For example:

<body bgcolor="#660066" background="Images/2335.jpg" text="#9966CC" link="#9966CC">

Can be done with CSS.

body {
    background-color: #660066;
    background-image: url('Images/2335.jpg');
    background-repeat: no-repeat;
    color: #9966CC;
}

a:link {
    color: #9966CC;
}

Here is a list of deprecated elements. Also, you have the body element twice - this is not aloud. I'm not sure what you want that image to do, but I can provide an alternate way to accomplish it if you would like.

Regards, Arkinder

Kraai 56 Senior Poster Featured Poster · Answer 2 · 2010-11-24T23:43:13+00:00

Cool&Awesome, this was one cool and awesome post, very good and great energy in it.

Cool&Awesome 7 Junior Poster in Training · Answer 3 · 2010-11-25T05:21:00+00:00

Thanks Kraai, I get a lot of friendly help on this site, so I love giving back some, (+ this purple design gets me in the mood:))

Expansion of a HOME PAGE

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers