Info Sheet 1: The World Wide Web

The World Wide Web (WWW), also called the Web, is an information space where documents
and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext
links, and accessible via the Internet.

List of Terms on the Web:

• Website – is a collection of one or more Web Pages. It is a location on the web that publishes some
kind of information when you view a web page, your browser connects to the websites.
• Web Page – It is single page of a Website.
• Hypertext – It enables you to read and navigate text and visual information in a non-linear way based
on what you want to know next.
• Browser – It is view web page and other information on the World Wide Web. It is a program that
you can use to view web pages and navigate the World Wide Web (WWW). Given a pointer to a
piece of information on the net (a URL), the browser has to be able to access that information, operate
in some way based on the contents of the point.
• Cross Platform – you can access web information equally well from any computer hardware running
any operating system using display.
• Uniform Resource Locator (URL) – a pointer to a specific bit of information on internet.
• Web Server – It is a computer that runs on a website and responsible for replying web browser
request for files you need, a server to publish documents on the web is a system on the internet
containing one or more website.
• Web Content – It is the stuff that you put on the web such as information, images, art, program,
humor, diagrams and games. Here are some of the kinds of content that are popular on the Web: o
Personal Information o Hobbies or Special Interests
o Publications o Company Profiles
o Online Documentation (Interactive
Tutorial / Training Modules) o Online Stores
o Shopping Catalogs o Polling and Opinion
Gathering o Online Education

• IP Address (Internet Protocol Address) – It is a number that uniquely identifies each computer or
device connected to the internet.
• Domain Name – It is the text version of an IP address.
• Uploading – It is the process of sending a data to a remote system such as a server or another client
so that the remote system can store a copy.
• Downloading – It is the process of receiving information such as web page into your computer from
a server on the internet.
• Hyper Text Transfer Protocol (HTTP) – It is the communication standard that enables pages to
transfer on the web.
 Info Sheet 2: Web Publishing

Web Publishing is the development and maintenance of the web pages. To develop a web pages,
you do not have to be a computer programmer. Web publishing is fairly easy as long as you have the proper
tools.

Five Major Steps on Web Publishing

1. Planning a Website
It involves thinking about issues that could affect the design of the website. You should identify the
purpose of the website and the characteristics of the people that you want to visit the website. Determine
ways to differentiate your website with similar ones. Decide how to keep the content of the website
current and existing.

2. Analyzing and Designing a Website

In this step, you determine specific ways to meet the goals identified in the previous step. You design
the layout of elements of the web page such as text, graphics, audio, video and virtual reality. Decide if
you have the mans to include all the elements of the design into the website.

3. Creating a Website
It involves working on the computer to compose the website. Many current words processing package
include web page authoring features that help you to create basic web page that contains text and graphics.
4. Deploying a Website
After the web pages are created, you store them on a web server. Once you have created a website
and located a web server to store it, you need to upload a website, or copy it from your computer to the
web server.
5. Maintaining a Website
Owning a website comes with certain responsibilities. You can’t just build it and forget it. Well you
can, but regular website maintenance is a must if you want your site to be successful.

Types of Web pages

1. Portal Web Page – It offers a variety of internet services from a single location.
2. News Web Page – It contains new worthy material including stories and articles relating the current
events, life, money, sports and weather.
3. Informational Web Page – It contains factual information many government agencies have
informational web pages providing such as census data, tax codes and other congressional budget
public transportation.
4. Business/Marketing Web Page – It contains content that promotes or sell products or services.
5. Advocacy Web Page – It contains content that describe cause, opinion or idea.
6. Personal Web Page – It is a private/individual who’s normally is not associated with any
organization offer maintains a personal web page.
 Info Sheet 3: Web Authoring Software
Web authoring software is allowing users to navigate the tricky environment of HTML and web
coding by offering a different kind of graphical user interface.

What is WYSIWYG?
WYSIWYG Web Builder 12 is an all-in-one software solution that can be used to create
complete web sites. What-You-See-Is-What-You-Get (WYSIWYG) means that all elements of the page
will be displayed on the exact same position as in the designer unlike fluid (dynamic) layouts (generated
by traditional HTML editors) where the position of objects depends on the position and size of the
objects surrounding it. WYSIWYG Web Builder generates HTML tags while you point and click on
desired functions; you can create a web page without learning HTML. Just drag and drop objects to the
page position them 'anywhere' you want and when you're finished publish it to your web server. A Web
Builder project file can hold multiple web pages, so you can easily manage all your page from within one
file.

Start WYSIWYG Web Builder

When WYSIWYG Web Builder is started, an empty page is displayed. On the left side you see
all the available tools which you can use to build your web site. This part is called the Toolbox. On the
right side there is the so-called Site Manager, which can be used to Add, Remove or Edit pages. By
default, one page is already added; this is the index page usually the first page (also called Home page) of
a web site. The center of the screen is the workspace, where you can drag and drop objects from the
toolbox. On the bottom of Site Manager is the Page Properties where you set some general page
options.
 Setting-up your first Page
How to change Web Page Title?
1. Go to the Properties > General Group > Title.
2. Enter the title you desire.

How to apply Background Color?

1. Go to the Properties > Background Group.
2. In the Background Mode > Solid.
3. In the Background Color > enter the hexadecimal value or click the drop-down arrow to
select the color you desire.

How to apply Background Image?

1. Go to the Properties > Background Group.
2. In the Background Mode > Image.
3. In the Background Image > enter the filename and file extension of the image or click the
“…” to browse image.
 Background Size – Specifies the size of the background image.
• Empty (default) – The background-image has the default size and scrolls
with the content.
• Fixed – A fixed background is a background image that will stay in one
place while the rest of your text and images scroll over the top of it.
• Cover – Scale the background image to be as large as possible so that the
background area is completely covered by the background image.
• Contain – Scale the image to the largest size such that both its width and its
height can fit inside the content area.
• Percentage (100% 100%) – will stretch the images to 100% of the object's
width/height. Other values like '50% 50%' are also possible.
• Pixels (50px 50px) – will display the image in the specified size.
 Horizontal Align - Sets the horizontal position for the background image.
 Repeat - Sets the tiling attributes for the background image.
 Vertical Align - Sets the vertical position for the background image.

How to add Icon on Web page?

1. Go to the Properties > General Group > Favorite Icon > enter the filename and the file
extension .ico or click the “…” to browse icon.
Note: you can only use .ico file as your icon.

Saving your File (Publishing your work).

1. Go to the File Menu then click Publish.
2. In the Publish Web Site dialog box, in the Location Group click New….
3. In the Add Publish Location dialog box, use Local Folder, and on the Folder click “…”.
4. Click Desktop, then click Make New Folder. Change the folder name then click Ok.
 5. Then lunch by pressing F5 on the keyboard. Or on the Home menu under Publish Group
click Preview.
Site Manager
The Site Manager must be used to manage the structure
of your web site. When your web site has more than one page,
they must all be part of the same Web Builder project file. The
Site Manager can be used to add, edit, remove pages and
organize your web site. There's also a button to open the
properties of the selected page. The New Folder command give
you the possibility to organize your pages in folders.

New Page – Insert new page.

New Mobile Page – Insert new mobile page.
New Page from Template – create new page based from
template.
Insert External File – Insert an external file.
New Folder – create new folder.
Edit Page – open the selected page.
Clone – duplicate the selected item.
Delete Item – remove the selected item.
Page Properties – open the page properties window.
Move Up – move up the selected item.

The root can have one of more pages and each page can also have subpages. Web sites always have
a home page which is often called index, so for this reason Web builder automatically adds this page to
each new project. The names of the items (pages) in the site tree are the actual file names of the target
HTML files, so if you named a page 'index' is will publish as index.html.

Adding a new page

1. Select the position where you want to insert the page, for example select the root (the top level
item) to insert the page to the first level.
2. Click the first button on the toolbar (New Page)
3. Web Builder adds the new page to your project and will automatically open it, so you can start
building the page.

Note: To insert a new page as child of an existing page or folder, first select the parent and click 'New Page'
 Imus Computer College Website Development

Info Sheet 4: Working with Fonts

How to Insert Text?

1. In the Toolbox under Standard Group click and drag Text in your workspace.
2. A text box will appear in your workspace. Double click it to edit.

To change the Font color

1. Highlight the word(s)/text. Go to Format Menu, under Font Group click Font Color or click
the down arrow on the left side to select a variety of different colors.

To change the Font size

1. Highlight the word(s)/text. Go to Format Menu, under Font Group in the Font Size enter
the size you desire or click the down arrow on the left side to select the size.
2. Or you can click Grow font to increase the font size and Shrink font to decrease.

To change the Font face To apply Heading

1. Highlight the word(s)/text. Go to Format Menu, under Font Group in the Font enter the name
of the font you desire or click the down arrow on the left side to select the font.

1. Highlight/select the word(s)/text. Go to Format Menu, under Styles Group select any
Heading from Heading 1 to Heading 6.
• Bold - It make the selected text bold.
• Italic - It italicize the selected text.
• Underline - It underline the selected text.
• Strikethrough - It draw a line through the middle of the selected text.
• Subscript - It create a small letter below the text baseline.
• Superscript - It create a small letter above the line of text.
To center the Textbox
1. If you are inside the textbox, deselect it first.
2. Right-click the textbox that you want to center. In the menu click Center in Page and click:
 Horizontal
 Vertical
Insert Bulleted List
1. In the Toolbox under Standard Group click and drag
Bulleted List in your workspace.
2. Enter the Initial number of items.
3. Then select the Bullet style you want and click OK.
4. A new textbox will appear with bulleted list, double
click the list to edit it.

1 JLV Prelim