************************************************************
Back to Basics
Most of you reading this newsletter have a pretty
good idea how to create web pages. There are some, however, who are apparently
just starting out. If this group includes you, please allow me to welcome you to
the web developer community. We’re all very glad you’re here! The Goodies
Thoughts in this edition of our newsletter are dedicated to you.
First, let me list a few statements of fact that are so important and
fundamental that they are often assumed to be known and are therefore
overlooked.
A web page is a document. The web page document is held in a file. The root
language for web pages is HTML. Files containing HTML documents almost always
have either .htm or .html as a suffix in their filename. When viewed in a
browser, such as the Internet Explorer, a web page can include a picture. The
picture does not become part of the HTML document (it is not part of the
document file) but is held in its own file, and is referenced by the HTML code
in the HTML document.
Pictures are usually in either JPEG of GIF formats, held in files with .jpg or
.gif suffixes, respectively. Pictures are referenced in web page documents by
their file name, including the suffix. The picture file must either be in the
same folder (directory) as the web page document, or the reference in the HTML
code must include the necessary path information to correctly reference the file
— it’s easiest for now to keep the picture files along side the HTML document
files that reference them.
As I mentioned, these two paragraphs contain some very basic information, but it
is surprising how many questions we receive that are answered by these simple
facts. Armed with this information, you should now be ready to proceed. The best
place to go from here are the Non-Technical Introduction (for some good
background information —
https://www.htmlgoodies.com/introduction/intro) and the HTML primers to learn
the code (https://www.htmlgoodies.com/tutorials/getting_started)
Happy (and sucessful) coding!
Thanks for Reading!
– Vince Barnes
************************************************************
Q & A Goodies
***********************************
Questions are taken from submissions to our Community
Mentors. You can ask a Mentor a question by going to
https://www.htmlgoodies.com/mentors
Q.
Im trying to have 2 pictures on the same webpage that flip
(rollover) pictures.
I think I have done it as the tutorial said but it
gives me 2 pictures which are like the same flip picture e.g. you can move
your mouse over each of them, but only one flips.
The code Im using for
this part is as follows:
<
HTML
>
<
HEAD
>
<
SCRIPT LANGUAGE=
"
JavaScript
"
>
<
!
–
hide from non JavaScript Browsers
Image1 = new Image
Image1.src =
"
Home2.bmp
"
Image2 = new Image
Image2.src =
"
Home1.bmp
"
function SwapOut() {
document.imageflip1.src = Image2.src; return true; }
function SwapBack() {
document.imageflip1.src = Image1.src; return true; }
//
–
stop hiding
–
>
<
/SCRIPT
>
<
SCRIPT LANGUAGE=
"
JavaScript
"
>
<
!
–
hide from non JavaScript Browsers
Image1 = new Image
Image1.src =
"
AboutUs2.bmp
"
Image2 = new Image
Image2.src =
"
AboutUs1.bmp
"
function SwapOut() {
document.imageflip2.src = Image2.src; return true; }
function SwapBack() {
document.imageflip2.src = Image1.src; return true; }
//
–
stop hiding
–
>
<
/SCRIPT
>
<
/HEAD
>
<
IMG onMouseOver=
"
SwapOut()
"
onMouseOut=
"
SwapBack()
"
NAME=
"
imageflip1
"
SRC=
"
Home2.bmp
"
>
<
P
>
<
IMG onMouseOver=
"
SwapOut()
"
onMouseOut=
"
SwapBack()
"
NAME=
"
imageflip2
"
SRC=
"
AboutUs2.bmp
"
>
<
/HTML
>
Here is an example that will work with multiple image flips on the
same page:
<
html
>
<
head
>
<
title
>
Multi Image Flip
<
/title
>
<
SCRIPT LANGUAGE=
"
JavaScript
"
>
function swap(image,imgname)
{
document.images
[
imgname
]
.src=image
}
<
/SCRIPT
>
<
/head
>
<
body
>
<
CENTER
>
<
BR
>
<
BR
>
<
A HREF=
"
page.html
"
onMouseOver=
"
swap(
‘
0.gif
’
,
’
img1
′
)
"
onMouseOut=
"
swap(
‘
1.gif
’
,
’
img1
′
)
"
>
<
IMG SRC=
"
1.gif
"
NAME=
"
img1
"
BORDER=
"
0
"
>
<
/A
>
<
br
>
<
A HREF=
"
page.html
"
onMouseOver=
"
swap(
‘
3.gif
’
,
’
img2
′
)
"
onMouseOut=
"
swap(
‘
2.gif
’
,
’
img2
′
)
"
>
<
IMG SRC=
"
2.gif
"
NAME=
"
img2
"
BORDER=
"
0
"
>
<
/A
>
<
br
>
<
/body
>
<
/html
>
Q. Is there anyway that I can make multiple frames load at a time
without using a form, and using just a regular link?
There are a couple of different ways you can accomplish this.
The
first example uses
"
inline JavaScript
"
to load two frames:
<
a href=
"
#
"
onClick=
"
parent.frame_name1.location=
’
page1.html
’
;parent.frame_name2.location=
’
page2.html
’
"
>
Click
Me
<
/a
>
The second example uses a function that is passed the documents to load when
you click on a link:
<
script type=
"
text/javascript
"
>
function Doframes(page1,page2)
{
parent.frame_name1.location=page1
parent.frame_name2.location=page2
}
<
/script
>
<
a href=
"
#
"
onClick=
"
Doframes(
‘
page1.html
’
,
’
page2.html
’
)
"
>
Click Me
<
/a
>
In both examples you need to specify the name of the frame that you want the
documents to load in.
Q.I have a question about backgrounds and style sheets.
Is there
any way (such as using the
"
repeat-y
"
function) to get the background to
border down the right as opposed to the left side?
Also, is there a way to
get it to tile down both sides?
I am essentially interested in getting the
look of a border on both the left and right side of the page, but i want it
to appear correctly on all screen resolutions, so of course, making a very
long image with the desired left and right backgrounds simply on opposite
sides or the image would be impractical.
A.I have one way for this to work; however, it doesn
’
t work in IE
5.5 (I don
’
t currently have access to IE 6 at the moment, but can check
later). It does work in NN 6 and above, Mozilla, and Opera.
Add two divs to the bottom of your HTML file:
<
div id=
"
left
"
>
<
/div
>
<
div id=
"
right
"
>
<
/div
>
Then add the following CSS:
#left {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100%;
border: 1px solid red;
margin: 0;
padding: 0;
background: url(ava.gif) repeat-y top left fixed; }
#right {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 100%;
border: 1px solid red;
margin: 0;
padding: 0;
background: url(ava.gif) repeat-y top right fixed; }
This will set backgrounds for the two extra divs in your HTML, and should
tile the length of the page. IE 5.5 doesn
’
t recognize the
"
fixed
"
property
for anything other than background images for the BODY tag, so the extra
divs scroll with the page.
Q.I am constantly creating files (pdf or word) files that I need to
show to many co-workers. Instead of having to email everyone everytime I
finish a file, I would like to upload the file to my server and have them
view the list of files online and download the ones they want. These files
need to be password protected as different people in different departments
should only see files pertaining to them. Here was my idea, create a bunch
of password protected folders on a server
–
one for each department, and I
will upload the file to any folder that should be allowed to view these
files.
Two questions: 1) I put the files in a folder, but when I try to
view the folder in a browser it tells me I don
’
t have permission to access
this folder (I assume because I never created an index file). How can I set
it up that I should be able to view a list of files that are in the folder?
2) how can I create a page that will allow me to upload files to folders
using a browser?
A.I believe you are correct in that you do not have an INDEX file
for the server to show when you try to access the folder. You could create
an INDEX file with the links to the documents for downloading. I am assuming
that you have already password protected the folder? An even easier way
would be to use a password log in feature for your pages. The application
would allow users to sign up themselves and you would control which group
the user should be in and only the documents or files you allow each group
or person to view. There is a nice web application called ASPLogin. It has
to run on a server that supports ASP. For example, to make a document
available to all users in a group called
‘
management
’
, members of a group
called
‘
administrators
’
and a user called
‘
fred
’
(who may or may not be in
either of the groups), you would add the following code to the top of the
document:
<
%@ LANGUAGE=VBScript %
>
<
%
Set asplObj=Server.CreateObject(
"
ASPL.Login
"
)
asplObj.Group(
"
management
"
)
asplObj.Group(
"
administrators
"
)
asplObj.User(
"
Fred
"
)
asplObj.Protect
Set asplObj=Nothing
%
>
Any other group or person trying to see that document will not be allowed to
see it. It is a pretty slick application You can take a look here:
To create a page to allow you to upload documents would call for some
scripting. This all depends on what type of server you site is hosted on. If
it is a Windows server then it will support Active Server Pages (ASP).
Q.Is there was a way to position a background image in the center of
a page regardless of screen resolution?
A.This code will position the image in the center:
body {
background-image : url(image.jpg);
background-position : center center;
background-repeat : no-repeat;
}
To position in the center of a table, try using this (be sure to replace __
with the height and width of the image):
<
body
>
<
table height=
"
100%
"
width=
"
100%
"
>
<
tr
>
<
td valign=
"
center
"
align=
"
center
"
>
<
table height=
"
__
"
width=
"
__
"
background=
"
image.jpg
"
>
Any text on the background
<
/table
>
<
/td
>
<
/tr
>
<
/table
>
<
/body
>
***********************************
Intel Said To Win Apple’s Eye[
June 6, 2005
]
CEO Steve Jobs will reportedly announce that Apple will
switch from the PowerPC to the Intel x86-based chip.
Read the article:
[
June 6, 2005
]
Macromedia
’
s animation software is blanketing the software
ecosystem.
Read the article:
[
June 6, 2005
]
Redmond
’
s communications sector strategy includes new
partnerships with an eye toward converged voice, media and applications.
Read the article:
[
June 6, 2005
]
Think compliance and distributed computing isn
’
t top of mind
for corporations? HP says think again.
Read the article:
[
June 6, 2005
]
Recent well-publicized backup tape losses appear to be
pushing some storage users to consider disk-based alternatives.
Read the article:
[
June 3, 2005
]
Community Linux project to be run by Fedora Foundation under
new plan. Skeptics abound.
Read the article:
[
June 3, 2005
]
A new bill would prohibit state and local governments from
competing with private-sector providers.
Read the article:
[
June 3, 2005
]
UPDATED: ICANN
’
s given its initial approval for an Internet
red-light district, but will anyone show up?
Read the article:
[
June 3, 2005
]
Legislation offers tax incentives for rural broadband
providers.
Read the article:
[
June 3, 2005
]
Trojan makes rounds again, searching for PCs to turn into
zombies.
Read the article:
***********************************
Did you ever wish your newsletter was an easy two way communications
medium?
Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on
something you have seen in here, you can now send your input to:
mailto:nlfeedback@htmlgoodies.com
We already receive a lot of email every day.
This address helps us sort out
those relating specifically to this newsletter from all the rest.
When you
send email to this address it may wind up being included in this section of
the newsletter, to be shared with your fellow readers.
Please don
’
t send
your questions to this address.
They should be sent to our mentors: see
Thanks for all your feedback!
***********************************
Implementing AJAX Using ASP.NET 1.1AJAX is an acronym that stands for Asynchronous JavaScript and XML.
AJAX
’
s
strong point is that it allows data on a page to be dynamically updated
without the browser having to reload the page.
This article offers a brief
introduction and description of AJAX and then provides some sample code
illustrating its usage.
In a previous 4Guys
’
article I introduced a number of little known, but
highly useful methods for working with file paths. Today
’
s installment will
look at methods and properties useful for programmatically working with
colors.
While there
’
s technically nothing wrong with using
"
Select *
"
within a
query, using that syntax could be stealing away precious performance from
your application, and even it it
’
s not now, it might someday soon.
And Remember This …***********************************
On this day in
…
1844Thee Young Men
’
s Christian Association (YMCA) was founded in
London;
188925 downtown blocks were destroyed in the Great Fire in
Seattle;
1925Walter Percy Chrysler founded Chrysler Corp.;
1933the first drive-in theater opened (in Camden NJ);
1934the US
Securities and Exchange Commission was established;
1944D-Day, the
150,000 strong Allied Expeditionary Force landed at Normandy, France;
Bill Haley
&
the Comets hit #1 with
"
Rock Around the Clock
"
;
Roy Orsbison recorded
"
Only The Lonely
"
;
1962The Beatles
recorded
"
Besame Mucho
"
with Pete Best on drums;
1966activist James
Meredith was shot in Mississipi;
1975British voters decided to
remain in the Common Market;
1975the Provisional Revolutionary
Government of South Vietnam was established;
2012the next Transit of
Venus will occur (see
);
Born today were: in
1755patriot Nathan Hale;
1868explorer
Robert Falcon Scott;
1875auto manufacturer founder Walter Percy
Chrysler;
1918actor Richard Crane;
1932English actress
Billie Whitelaw;
1935Tibetan spiritual leader, the Dalai Lama;
actor Richjard Lewis;
1949actor Robert Englund;
1955comedian/actor Dana Carvey;
1955comedienne/actress Sandra Bernhard;
acrtess Marilyn Jones;
1959actress Amanda Pays;
1960actor Gary Graham;
1961actress Sydney Walsh
1967actor
Max Casella;
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
