1 / 24

CSI315

CSI315. Building 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>

mdao
Download Presentation

CSI315

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSI315 Building Web Sites

  2. 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>).

  3. 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.

  4. 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

  5. Registering a domain name • com, .net, .org, .tv, .biz, etc .ca (Canada), .us (USA), .co.uk . Mopipi.bw

  6. Find a hosting company A web host provides you with the space, tools and support to create your web pages and email accounts (you@yourdomain.com).  Things that can affect selecting a web host Cost. • Cost • Top quality customer service • Email accounts (you@yourdomain.com) • Around-the-clock phone and email support • Ability to update your site 24 hrs/day, 7 days/week • No obligation to stay

  7. 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

  8. 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 .

  9. Hyperlinks • 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).

  10. Hyperlinks • 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/).

  11. 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>

  12. 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>

  13. Hyperlink • The general color of text links is specified in the <body> tag: • <body link="#C0C0C0" vlink="#808080" alink="#FF0000">

  14. Hyperlink • 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).

  15. Hyperlink • 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.

  16. Hyperlink Example 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.

  17. 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">

  18. Link Targets 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

  19. 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>

  20. 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 .

  21. 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>

  22. Links in a Page • 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.

  23. Links in a Page 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>

More Related