csi315csi315 building web sites. what is a website a website is just a bunch of web pages connected...
TRANSCRIPT
CSI315CSI315CSI315CSI315
Building Web SitesBuilding Web Sites
What is a website• A website is just a bunch of web pages
connected together with something called a link.
• In HTML there is a special tag called the 'link' tag, and it looks like this in its most basic form:
• <a href=""> </a> • E.g, a href=" http://www.killersites.com
">) (</a>).
• The files (pages, images etc.) that make up your web site are organized in folders just like any other files that you store on your home computer. Your host will give you a space/directory on their server for you to place all your websites' files.
• This space/folder assigned to you will be the 'root' of your web site. This means that as far as the Internet is concerned, anything (html files, images other folders etc) in this folder is directly accessible by your domain name plus the name of the item.
Building a Web site• Define the purpose of web site • Diagram the structure of the website. • Write out the text for the web site • Choose a basic layout, color scheme
and fonts that will be used on all pages • Build out the website • Choose a domain name (pizzaden.com,
'discountHardware.com' )• Register your domain name • Find a hosting company• Upload your website to the hosting
companies servers
Registering a domain name
• com, .net, .org, .tv, .biz, etc .ca (Canada), .us (USA), .co.uk . Mopipi.bw
Find a hosting company
A web host provides you with the space, tools and support to create your web pages and email accounts ([email protected]).
Things that can affect selecting a web host Cost. • Cost• Top quality customer service • Email accounts ([email protected]) • Around-the-clock phone and email support • Ability to update your site 24 hrs/day, 7
days/week • No obligation to stay
Network Service Providers: • Owns and maintain routings at (Network
Access Point),NAP a point on the Internet where several connections converge.
• Own high speed and high capacity networks to provide global access and interconnectivity
• Sell wholesale internet connectivity services to ISP’s e.g. AT&T, BT.
Internet Service Providers: • Provide individuals, busiss, organization access
to the internet)
• Re-Sell or add value to and sell new services to customers
e.g AOL , UUNET, Mega, Botsnet, BBi (Broadband Botswana), Infotec Botswana
End Users: Include Residential, Business, Orgs
9
Hyperlinks
•Hyperlinks are the most fundamental part of the World Wide Web.•They tie pages together:
• Links should be text descriptive. phrases such as 'click here' should be avoided
– Alternatives to online forms should be provided.
– Pages should be tested using different viewers .
10
•There are three different kinds of links you can have on your website:
• Links to anchors on the current page (Internal).
• Links to other pages within the current site (Local)
• Links to pages outside the current site (Global).
Hyperlinks
11
•The tags used to produce links are the <a> and </a>.
•The <a> tells where the link should start and the </a> indicates where the link ends.
• The target of the link is added to the <a> tag as an attribute setting : (href=http://www.yahoo.com/).
Hyperlinks
12
Hyperlink Example<html> <head> <TITLE>My First Home Page</TITLE> </head> <body> <H1>Brian’s HTML Page</H1> <P>Hi World, welcome to <a href=“Tebogo.htm">my</a> HTML page!</P> <P>Enjoy!</P> </body> </html>
13
Hyperlink Example<html> <head> <TITLE>My Second Home Page</TITLE> </head> <body> <H1>Brian’s HTML Page</H1> <P>Hi World, this is my second HTML page!</P> <P> <a href=“index.htm"> Go Back To Page 1</a></P> </body> </html>
14
•The general color of text links is specified in the <body> tag:
•<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
Hyperlink
15
•link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).
vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080).
•alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).
Hyperlink
16
•You might want one or more links to have different colors than the rest of the page.
There are two methods for doing this:
•Placing font tags between the <a href> and the </a> tag.
•Using a style setting in the <a> tag.
Hyperlink
17
Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to Yahoo.
Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to Yahoo.
Hyperlink Example
18
Link Targets
By default, links will open in the current window or frame.
To open in another window or frame:
To do this you simply add a target="" to the <a href>.
<a href="http://www.yahoo.com" target="_blank">
19
Predefined targets are:_blank loads the page into a new browser window._self loads the page into the current window._parent loads the page into the frame that is superior to the frame the hyperlink is in._top cancels all frames, and loads in full browser window
Link Targets
20
Image Links
To make an image a link:<a href=“http://www.recipe.com"><img src=“../images/brownies.gif"></a>
To turn off a border, add border="0" to the <img> tag:
<a href=“http://www.recipe.com"><img src=“../images/brownies.gif" border="0"></a>
• Every graphic image should have text associated with it. This is achieved using ALT, for example, <IMG SRC="sima.gif" ALT="SIMA logo"></a> If a browser is not capable of displaying images, the text in the ALT statement is displayed instead.
• Always provide text alternatives to image maps .
22
Links in a Page
Normal links always point to the top of a page. Anchors point to a place within a page.
An anchor is created using the <a> tag. If you want to create an anchor called chapter4, you simply add this line where you want the anchor to be:
<a name="chapter4"></a>
23
•After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like this:
Click <a href="#chapter4">here</a> to read chapter 4.
•Note: When linking to an anchor on a page you need to put a # in front of the anchor.
Links in a Page
24
When you link to anchors on external pages use this syntax:
<a href="http://scitec.uwichill.edu.bb/cmp/online/CS36L/Assignment/project2001.html#_Toc506096144">CS36L Project-Directory of Students</a>
Links in a Page