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 7: Setting-Up Table
Before table functionally was added to HTML, all images and text aligned on the left side of a
web page by default. Originally, tables were used to simplify presenting tabular data, such as scientific
reports, but clever designers quickly realized that tables could also be used to increase the design option.

Inserting Tables
1. In the Toolbox under Standard Group click and drag Table in your workspace.
2. In the Insert Table dialog box, go to General Tab. Inside Rows & Columns Group enter the
numbers of rows and columns you want.
3. Inside the Cell Group enter the amount of cell padding and cell spacing you want.
• Cell padding – refers to the amount of space between the cell content and cell wall.
• Cell spacing – refers to the space between individual cell.
4. Then click Ok.
5. Double click in the cell to add text or images.

Applying Background Color

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

Applying Border Color

1. Select the table you want to add border color.
2. Go to Properties > Border Group.
3. In the Border Color > enter the hexadecimal value or click
the drop-down arrow to select the color you desire.
4. Change the thickness of your border in Border Width.
5. Change the style of your border in Border Style.

Merging and Splitting Cells

• To Merge cells
1. Select number of cells you want to combine by holding CTRL and click the adjacent cell you
want to combine.
2. In the Table Tools inside the Layout Menu, go to Merge Group and click Merge.
• To Split Cell
1. Select the cell you want to split.
2. In the Table Tools, inside the Layout Menu, go to Merge Group and click Split.

To Add more Cells

1. Select the table you want to add more cells.
2. In the Table Tools, inside the Layout Menu, go to Rows & Columns Group and click:
• Insert Above – to add new row directly above the current row.
• Insert Below – to add new row directly below the current row.
• Insert Left – to add new column directly to the left of the current column
• Insert Right – to add new column directly to the right of the current column.
 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 8: Working with Images
Most basic web pages are composed of combination of images, links, animations and text. Images
can add information to a page, or you can use a web page as a vehicle to display important images such as
artworks, product illustrations or portraits. Most web browsers display two image formats GIF and
JPEG.
Joint Photographic Expert Group (JPEG) format – it is designed for digitized color photographs.
JPEGs can support millions of colors and they are commonly used in designing web pages.
Graphics Interchange Format (GIF) format – it can support up to 256 colors. GIF format is the best
choice for images with large area of flat color, most non-photographic images and some black and white
or grayscale photographs, as well as many black and white graphics

Inserting Image
1. In the Toolbox under Images Group click and drag Image in your workspace.
2. Open dialog box will appear, select the image you want to insert.
3. If you want to resize the image. Go to Properties > General Group > Size. Enter the width and
height value of the image, or click the arrow on the left side of Size to show the height and width
textbox.
4. Or you can use the resizing handle around the image. In the left and right side of the image it is
use to specify the width and in the top and bottom of the image to specify the height, or in the
side to scale it. Hold Shift key to scale it uniformly.

The Difference between Image and Picture

In HTML image is a single object within your workspace. Picture on the other hand is use Picture
element in HTML5 which is a container used to specify multiple images for different viewport or screen
resolutions. The browser will choose the most suitable image according to the current layout of the page
and the device it will be displayed on.

Inserting Picture
1. In the Toolbox under Images Group click and drag Picture in your workspace.
2. Open dialog box will appear, select the image you want to insert.
3. Right-click the Picture container, in the menu select Object Properties.
4. Inside Picture dialog box, in adaptive Images group. Add different image with different
resolution.
5. When you lunch your page and resize your browser the image will change according to current
layout of the page.

Inserting Rollover Image

1. In the Toolbox under Images Group click and drag Rollover Image in your workspace.
2. Open dialog box will appear, select the image you want as original image.
3. In the Properties > Behavior Group > Hover Image > enter the filename and file extension of
the image or click the “…” to browse the rollover image.
 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'
 Info Sheet 9: Working with Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks. You can click on a link and jump to another document. When you move the
mouse over a link, the mouse arrow will turn into a little hand.

To create Hyperlink
1. Highlight the text or image that will be the link and select Insert Menu > Link Group > Link.
2. This will display the Insert Hyperlink dialog box.
➢ Link to a page on another web site
1. Set the Link To option to External web address.
2. Enter the full URL (Internet Address) of the destination page in the URL box.
3. External URLs MUST begin with "http://" or they will not work.
➢ Link to a page on your own web site
1. Set the Link To option to Page in this project.
2. Click 'Select' to choose a page. This will list all pages which are part of the current
project. Select one of the pages and a relative link will automatically be created (eg
./products.html).
➢ Link to a file
1. Set the Link To option to File.
2. Browse for the file you wish to create a link for.
➢ Smart Links – can be used to link to the next, previous, parent or child of the current page.
If you change the structure of your website, these links will automatically update to represent
the current state.
The following smart link options are available:

• Parent Page - Link to the parent of the current page.

• Child Page - Link to the first child of the current page.
• Next Page - Link to the sibling to the right of this page.
• Previous Page - Link to the sibling to the left of this page.
• Back - Go back to the previous page in the browser's history.
• Close the current browser window - Close the current browser window, this feature is
not supported by all browsers!
• Print the current page - Clicking the link will print the current page.
• Reload Page - Clicking the link will reload/refresh the current page.

Target Window or Frame

1. Open in the same browser window - this option will set the target of the link to _self
2. Open in a new browser window - this option will set the target of the link to _blank
3. Open in another window or frame - this option lets you specify a custom target.
• _blank – makes the link open in a new black browser window.
• _top – makes the link replace the content of the current window.
• _parent – makes the link open in the parent page.
• _self – makes the link open in the same page as the link.
4. Open in a popup window - this option will open the linked page in a (javascript) popup window.
 • Left - Specifies the left position, in pixels. This
value is relative to the upper-left corner of the
screen. If you enter -1 then the window will be
horizontally centered on the screen.
• Top - Specifies the top position, in pixels. This
value is relative to the upper-left corner of the
screen. If you enter -1 then the window will be
vertically centered on the screen.
• Height - Sets the height of the window in
pixels. The minimum value is 150 for Internet
Explorer!
• Width - Sets the width of the window in
pixels. The minimum value is 250 for Internet Explorer!
• Status Bar - Enable the status bar at the bottom of the window.
• Tool Bar - Enable the standard browser toolbar, with buttons such as Back and Forward.
• Location Bar - Enable the Location entry field where you enter the URL.
• Menu Bar - Enable the menu bar of the window.
• Resizable - Allow/Disallow the user to resize the window.
• Scrollbars - Enable the scrollbars if the document is bigger than the window
5. Open in a Lightbox - this option will open the linked page in a Light Box. In 'Options' you can
specify additional options for the Fancy Lightbox. Each option must be on a new line and
separated by a comma:
width: 350,
height: 250,
overlayShow : true,
overlayColor : '#FF0000'
Note: With the width and height options you can control the size of the lightbox.
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

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.

To apply Heading
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
 Info Sheet 10: Image Mapping
An image-map is an image with clickable areas. Creating an image map is useful for images such
as a floor, campus map or world map that you want to contain links to different pages. You can define
each clickable area (hotspot) on the map using three shape values: rectangle, circle or polygon (irregular
shape).

To create an Image Map

1. In the Insert Menu, under Images Group click Image Map.
2. In your workspace click and drag your mouse to create a placeholder for your image.
3. In the Open dialog box, select your desire image.
4. Right-click the image, in the menu select the type of Hotspot you want:
• Add Circle Hotspot
• Add Rectangle Hotspot
• Add Polygon Hotspot
5. Once you select the type of Hotspot you want, the Edit Hotspot dialog box will appear.
If you select Add Circle Hotspot
• Y Coordinate – Identify the
center of the Hotspot in Y axis.
• X Coordinate – Identify the
center of the Hotspot in X axis.
• Radius – Identify the radius of
your Hotspot.

If you select Add Rectangle Hotspot

• Left (X) – Identify the center of
the Hotspot in X axis.
• Top (Y) – Identify the center of
the Hotspot in Y axis.
• Width – Identify the width of
the Hotspot.
• Height – Identify the Height of
the Hotspot.
If you select Add Polygon Hotspot
• Coordinates – It is a list of
coordinates of the corner of a
polygon.
• Add – add another corner of a
polygon
• Edit – edit the selected X and Y
coordinates of the existing corner of a
polygon.
• Remove – delete the selected
coordinates.
 6. Next is add the link for your hotspot, under the Link Group. Select what type of Link you want to
perform.
7. If you select External Web Address. Enter the full URL (Internet Address) of the destination page
in the URL box. External URLs MUST begin with "http://" or they will not work.
8. When you are done, click OK.

Visually modifying the coordinates using the mouse

A more efficient way to modify the coordinates of the hotspots is by visually dragging them.
1. Right click the image map to display the context menu.
2. Select the hotspot type you want to insert.
3. A window will popup where you can set the initial
coordinates, the URL and alternate text of the area. By
default, Web Builder will insert the shape in the center of
the image map.
4. After you have clicked OK, the shape will be inserted to
the image map, you can now select it and drag it around
or change its size using the size handles.
5. To edit or remove the hotspot, right click the area to
display the context menu and select Edit Hotspot or
Delete Hotspot.