Expansion of a HOME PAGE

Question

balinda_wilson 0 Newbie Poster

15 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="">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="">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="">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="">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="">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="">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....

html-css web-design

Edited 13 Years Ago by Reverend Jim because: Fixed formatting

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

Dani AI

Generated 9 Months Ago

Quick practical plan for to make those topic words link to other pages and let users come back to Home.

Put each page in the same project folder (for example index.html, about.html, programs.html, contact.html) and use relative links so navigation works offline and on the server. If a page lives in a subfolder, adjust the path (for example ../index.html to go up one level). Name the home page index.html so web servers will serve it automatically.

To avoid editing the same navigation on every page, keep the nav markup in one file and include it. One simple server-side option is PHP; save your menu as inc/nav.html and include it like this:

<?php include 'inc/nav.html'; ?>

That keeps links consistent and makes adding a “Back to Home” link trivial.

Clean-up checklist and gotchas (fix these before your instructor grades it): remove duplicate <body> tags and misplaced tags (the <title> must be inside <head> and not wrapped in formatting tags), stop using deprecated presentational tags/attributes (<font>, bgcolor, align, background) — use CSS instead, give every image an alt attribute, correct the email link to mailto:info@yourdomain.com, and prefer target="_blank" rel="noopener noreferrer" when opening external sites in a new tab. Also drop any IE-only homepage scripts like setHomePage — they are obsolete and browser support is gone.

Final steps: validate the cleaned pages with an HTML validator and test in at least two browsers and on mobile. Helpful references: the MDN learning docs for HTML and the W3C validator will catch mismatched tags and accessibility issues. was right to flag deprecated markup, and ’s idea of a single stylesheet and a list-based nav is a good foundation — use those ideas, tidy the HTML structure, and the linking behavior you want will work reliably.

All 4 Replies

Cool&Awesome 7 Junior Poster in Training

15 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="">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="">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="">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="">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="">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="">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:// ');"></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:">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;
}

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

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers