Performance Task in Computer Group 3

1. BUILDING A WEBSITE
Planning your Website
Creating your Website
Using a Website Content Management System
Promoting your Website
Lesson 8
Learning Objectives

2. What is Website?
A website is a collection of publicly accessible, interlinked Web pages that share a single
domain name. Websites can be created and maintained by an individual, group, business or
organization to serve a variety of purposes.
What is Building a Website?
A website builder is a software that empowers users to develop a site that meets their
needs without knowledge of the code. It usually has a drag-and-drop editor so clients can
add specific elements and build a professional website for their business.
Building a Website 01

3. In the novel The Time Machine (1895), the Time Traveler invented an apparatus that
enabled him to travel to the future, which is A.D. 802,701. There he discovers a future
society that is peaceful and pastoral. It's ironic though that the future society the Time
Traveler discovers is nothing technological, because as we all know, today's world is virtually
one that relies heavily on technologies such as the Internet to make it, as they say, go 'round.
100
In this lesson, you'll learn skills on how to make a website the creative way that is, to use
coding, particularly Hypertext Markup Language (HTML), and create the design and
elements of your website. It's how you can actually play a more concrete part in the online
world, by knowing how to create the basic unit of the Internet-the website.
Building a Website 02

4. Here are some guide questions for planning your website:
1. What is your objective?
Determine your goals for your website. Is it simply to have your own Permanent space online where you
can upload memorabilis and share your thougher Is it to promote a busines of service! Whatever your
goals are you have to write them down became the way you plan and build your website will always take
cues from your objectives
2. What will be the content of your website?
Once you've written down your goals for your wehalte, it's time to envision the information that will be
found on your site. Though there are lots of valuable factors when it comes to website creation nuch as
design and promotion, at the end of the day conment is what will make your visitors go back again and
again to your site, Well-written content is not only a treat to the readers but also makes your website
more credible in general.
Building a Website 03

5. 3. How will your website be named?
Once you've determined your goals for your website and the specific content, it's time to pick a domain name
and a website title. The domain name is the main address of your website, such as www.lagunaorange.com.
Your domain name is important because it is a reflection of what your website is all about. Your domain
name should be catchy enough to attract visitors to visit your website and at the same time short enough so
they won't forget it. Choosing a good domain name these days is tricky because someone might already be
using the domain name you want. Thus, you have to check the availability of each domain name that appeals
to you.
4. How will your website look?
If you want to meet your objectives in creating a website, establishing a design is important, particularly if
you're creating a professional website to promot something. A good, professional website design not only
attracts but also builds creativity. As with content, your website design should be attractive to your target
audience to make it effective and stand out from the competition. It would be hel to create a professional
logo that will create a sense of recognition for the product service you offer.
Building a Website 05

6. Here is a checklist of some of the features of a good website design:
Easy to navigate. A well-designed website won't confuse visitors.
No graphical overload. If you're the visual type of person who likes a lot of images and pictures,
remember to control the images you will post on your website because too many graphics can be
straining to the eyes and can also decrease the loading speed of your Web pages.
Has a color theme. Use the same colors for the background and text of your Web pages to achieve
uniformity.
Consistent banners, headers, logos, and other elements. If you're going to use logos, footers, buttons, and
other similar elements, make sure you use the same ones on every page to maintain consistency.
Encourages interactivity. Your website should encourage participation from visitors to pique their
interest even more and encourage them to continue visiting the site. Make sure you leave a contact
address, comment boxes, or a feedback page where visitors can express their thoughts and reactions.
Building a Website 06

7. Creating Your Website
Now that you've planned your website, it's time to start making it. There are four main aspects to building a
website: finalizing your domain name, finding a Web host, learning HTML for building your site, and
uploading the site itself.
Finalizing Your Domain Name
As mentioned earlier, picking a good domain name is important because it is what points the world to your
website. It is important to pick the perfect domain name that represents you or your business because it is
going to be with you for the life of your website.
Below are some tips on how to choose a good domain name:
Building a Website 07

8. Keep it short and simple. A very long domain name such as www. shoessandalsandslippers.com will be
harder to remember and share. Keep your domain name simple yet memorable, such as
www.sexyfootwear.com.
Make sure your domain name is related to the overall theme of your website. If you're selling
generic hats, don't use www.glitzyglam.com which is vague and doesn't immediately give a clue as to
what the website is about.
Ask for opinions. You may like certain domain names and you think one of them can represent you or
your business well, but what do others think? Ask your trusted family and friends, especially those who
are Internet savvy, about their honest opinion on your possible domain names.
It's best to use a dotcom (com) extension for your website because it’s still the most used
extension on the on the Web especially if the site is a commercial one. However this usually
requires a subscription from the registrar. If shelling out a fee for your domain name is not to your liking,
there are great alternatives such as net, biz, or info which may be available for a lesser fee or even for
free.
Building a Website 08

9. Finding a Web Host
The next step after choosing and registering your domain name is to find a Web host. Like choosing a
domain registrar, it is vital to research first on the best Web host for your website. Here are the things
to look for when choosing one;
speed and reliability
price (free hosting is available)
storage/disk space
technical support
other offered features and services
Building a Website 09

10. Learning HTML
HTML or Hyper Text Markup Language, is the code or language used in the creation of websites. While
you can always opt to have your website created by a professional, it would benefit you more in the long run
and save you a lot of costs if you know how to write HTML yourself.
HTML is written in plain text, so you can create and experiment with it using any text application on your
computer such as Notepad in Microsoft Windows. Simply open Notepad and use it to type your HTML
codes in. You will find a few basic coding that deals with basic tags in the section that follows. Use them
with Notepad for practice. When you're done, save the Notepad file as (filename).html or (filename).htm.
These two extensions allow your Web browser to recognize that these are documents created for the Web.
When you are ready to view your document, all you have to do is double-click on the filename and it will
appear on your computer screen just like a Web page accessed over the Internet.
Building a Website 10

11. Basic Tags
In HTML, tags are used to tell the browser how to display the text or graphics in a
document. Tags usually come with a start and end tag, with the text content
between the tags. An example of a start tag is <text> while its end tag would be
</text>. An end tag has a forward slash (/) after the first bracket. Knowing how to
use tags will help facilitate further learning of HTML coding
Building a Website 11

12. The following are some of the most basic HTML tags:
<html> </html> - tells the browser that the document is an HTML document. All HTML files must
begin and end with these tags.
</head> - holds all of the document header's information
<title> </title> - tells the title of the page, such as <title> Jerry's Online Space <title>
<body> body> - where you will put all the things (i.e., text and images) you want displayed in the
window by the Web browser
<p> </p> - paragraph tags used to skip a line
<br>- break tag used to start a new line
<hr> </hr> - inserts a horizontal line on your Web page
<center> </center> - used to center text, image, or any content on a page
Building a Website 12

13. Font and Text Styles
Here are the basic tags to use when formatting font and text styles:
<font></font> - used to start and end any font attribute
<font size=" (insert size of font)"> size="5"> to determine actual size of font, c.g., <font
<font face="(insert font face)"> - to determine font type, e.g., <font face="Courier New">
<font color="(insert font color)"> - to determine color of font, e.g.. <font color="red">
<b> </b> - used to make any text bold
<i> </i> - used to italicize text
Building a Website 13

14. Inserting Links
When inserting a link to another website, this is the format you use:
<a href=" (insert web address)">(insert text to identify the link)</a>
Example:
<a href="www.abs-cbn.com">ABS-CBN website</a>
In the webpage, what will appear is simply this:
ABS-CBN website
which, when clicked, will direct you to www.abs-cbn.com.
Building a Website 14

15. Inserting Graphics and Images
When inserting graphics or images, this is the format you use:
<img src=" (insert file name of your image file saved on your computer)" />
For example:
<img src="flower1.jpg"/>
You can also make the image bigger or smaller by changing the height and/or the width. This is the format
you use:
<img src="flower1.jpg" width="25" height="50"/>
Building a Website 15

16. There are lots of tools and programs online that will help you build a website even if you're not
an HTML expert. What follows is a list of some of these tools:
Building a Website
Website Creation
Tool
web address
Wix
IM Creator
Weebly
Yola
Moonfruit
http:/www.wix.com
Sitey
Webs
http:/www.imcreator.com
http:/www.weebly.com
http:/www.yola.com
http:/wwwmoonfruit.com
http:/www.sitey.com
http:/www.webs.com
16

17. Uploading the Website
Once you have created your Web pages using HTML, it's time to publish your website on the Web by uploading
your wur web pato your chosen Web host server. Two common to to upload your website are Microsoft front
Page and File Transfer Protocol (FTP). Use Micros FrontPage if that's the program you used in creating your
website. If you used some other program, use FTP.
Uploading Your Website Using Microsoft FrontPage
1. Make sure your Web host server has enabled FrontPage Server Extensions in your account for you to be able
to use FrontPage with their website uploading service.
2. In your computer, create a specific folder where all your website files will be located. For example, your folder
may be located at D:website. This is your root folder.
3. In FrontPage, open the Web page (.html file) you want to publish by selecting File > Open Web from the
menu.
Building a Website 17

18. 4. Highlight your root folder and select File > Publish Web from the menu. This will display the Publish
Destination window. Type your destination URL, such as http://yourdomain.com, and then click OK.
5. Insert your name and password in the Login window.
6. On the Publish Web window, click Options and choose whether you want to drag and drop selected files
individually, publish all files (designated with a check mark) outright, or prevent FrontPage from
automatically publishing a checked file by rig by right-clicking on a file and choosing Don't Publish on the
menu.
7. Click Publish. You will see the files you uploaded displayed in FrontPage Explorer. Once you open a Web
browser, you should begin to see your site on the Internet.
Building a Website 18

19. Uploading Your Website Using File Transfer Protocol (FTP)
1. Download a free FTP client such as SmartFTP and install it. There are lots of free FTP clients online.
2. Open your FTP client and fill out the following boxes:
Profile Name- the name of your website
Host Name or Address - name of the server that your home page is being hosted on. It would look
something like ftp.hostname.com.
3. Log in to the Web server using the FTP username and password provided to you by your Web host. Under
Local Browser, choose your website files that you want to upload by highlighting them. Drag and drop them
into the window of the Web server. Once transferred, your website will be live.
4. Whenever you edit your website or add anything new to it, you would need to upload it again for the
changes to be effected in the files in the host's server. Re-uploading may not be necessary if your hosting
service has provisions for a website content management system.
Building a Website 19

20. Using a Website Content Management System
Web content management (WCM) can be a tricky business, especially when you have to keep uploading your
website every time a change is made. A website content management system (CMS) is basically an
application that makes things easier for a Web designer or developer to edit a website online instead of
having to deal with the modifications to update the files on the server offline. Generally, to an und regladly by
people was gode to or have to deal with thing he wirling HTML and poder to meet and mean
In making a website,the developer should be able to ideally separate content and design.
Content- as defined in the eZ Publish website,is information that is stored for later retrieval.
Design- considered as the presentation of information.
Building a Website
eZ the content management ecosystem
20

21. Templates make it easier fur wedsite developers to manipulate content elements to produce a
meaningful and effective design. In a CMSm, the tempilane is the basic unit of design. A CMS semplate wully
cakes the form of HTML pre-anded to display Web page elements in a definine and pescathed manner
Stylesheen, or more specifically Cascading Style Sheets (CSS), may be onsidered as templates. CHS are
HTML design tools that are simply attached to ructured content is onder to specify style like fum, spacing,
and color to comment and design elemenes of your Web page. They give fleshillity so the developer by
enabling changes to one or multiple Web pages though a single file without the need to create more HTML
tags.
What follows is a style sheet segment which defines the color and
font-size properties for two headline(H1 and H2) elements
Building a Website
<HEAD.
<TITLE>CSS Example</TITTLE>
<STYLE TYPE=’’text/ css’’>
H1 { font-size: x-large; color:red}
H2 { font-size: large; color:blue}
</STYLE>
</HEAD>
21

22. Pomoting Your Website
There are various ways to promote your website on the Internet. Below are just two of the main ways to do it.
1. Spread the news.
No one will go to your website if no one knows about it. So once your site is all set up, go tell all your friends, family,
and acquaintances about it. There are lots of ways to do this. You can send a message to them online to announce that
you have a new site that they can check out. You can post a link on all your online accounts including your social
networks so your online friends can immediately see a link to your site once they view your profile. You can create an e-
mail signature with a link to your site so that the link will be viewed every time someone reads an e-mail you sent.
2. Search Engine Optimization
Search Engine Optimization or SEO is the process of increasing the number of visitors to a website by ranking high in
the results of search engines. The higher a website ranks in the search engine results, the better the chances that the site
will be visited by those looking for sites of the same topic.
Many people who practice SEO read books on SEO, undergo training, or self-learn through materials on the Internet for
several weeks to have a solid grasp of the process, SEO's ever-changing tricks, and the tools available online to help you
get the most of it. To give you an overview, here are some of the main facets of SEO which you can start applying to your
website.
Building a Website 22

23. Website Design and Text Content
Create a simple Web design that would make your website load easily. Use of too many images and
videos on a Web page may make it harder for the search engine robot programs to index your site.
List down keyword phrases relevant to your personal site or business that your targer visitors may search
for in search engines. Make sure to add these keyword phrases to your website. Useful and free tools for
this are the Google Keyword Tool and Google Insights for Search.
The sizes of your Web page must not be too large-make sure each page is not over 50 kb.
Maintain 200-800 words per webpage.
Building a Website 23

24. SUMMARY
Building a successful website entails planning. You have to determine your goals and content as well as
visualize how your website will be called and how it will look. The actual creation of a website requires
several basic steps, which include choosing and registering a good domain name, finding a Web host, and
learning HTML. Once your website is created, you need to test and optimize it for content and appeal,
then promote it by spreading the news and applying SEO.
Building a Website 24

25. Domain Registrar - company that registers Internet domain names
File Transfer Protocol (FTP) - common method to upload files on a Web hosting account
FTP Client - software designed to transfer files back and forth between two computers over the Internet
Content Management System (CMS) - basically an application that makes things easier for a Web designer
or developer to edit a website online instead of having to deal with the modifications to update the files on
the server offline
Content - as defined in the eZ Publish website, is information that is stored for later retrieval
Design - presentation of information in a website
CSS - HTML design tools that are simply attached to structured content in order to specify style like font,
spacing, and color to content and design elements of your Web page
Search Engine Optimization (SEO) - process of increasing visits to a website by improving its ranking on
search engine results
Web Design - creative process of designing pages to be displayed as a website
Building a Website 25

26. Prepared by
Group 3 St.Augustine
Samantha Escosio
Samantha Minelle Soldao
Stanley Dave Chavez
Novel Jr Sabonsolin
Building a Website 26
SuBmmited to
Sir Arvin Abalos