MODULE IN WEB DESIGN

Basic Terms in Web Design

HTML – it is a set of tags and mark-up that specify how the page will be displayed.
Internet – it is a worldwide network of computer system.
World Wide Web – this is a part of Internet that supports multimedia elements.
Webpage – consists of linked documents.
Website – collection of webpage.
Publishing – storing the website in a web server.
Text Editor – is a type of computer program that edits plain text.
Web Browser – it interprets HTML documents.

History of the Internet

Although the World Wide Web is often referred to as the Internet, they are not
the same thing. The Internet is a huge network of networks that links computers
together all over the world using wired and wireless technologies. The World Wide
Web is the collection of linked pages that are accessed using the Internet and a web
browser.
English physicist Sir Tim Berners-Lee is regarded as having invented the
World Wide Web in 1989. Since then he has continued the development of web
standards and other web related projects. Website addresses such as
http://www.fiveminded.com are known by the term Uniform Resource Locater (URL).
The domain name system of the Internet includes top level domains such as
.com, .info, .net, .org, .edu, .mil and .gov as well as country specific domains and
more. As well as the World Wide Web, the Internet is used for email, file sharing,
online chat, phone and video calls, online gaming and more.
Thanks to the increasing accessibility of the Internet, the popularity of the web
has exploded over the last 20 years. The web is now used for many different
purposes including online shopping, social networking, games, news, travel
information, business, advertising and much more.
Social networks such as Facebook, Instagram and Twitter have become popular
over the last few years. People now spend a large amount of their time online
keeping in touch with each other through these applications and services.
Security and privacy concerns have always been a problem on the Internet
with many people often unaware of the potential risks they take when inputting
confidential data, passwords and personal information into various websites. Viruses
and spam emails are other sources over security concerns which frequently cause
disruptions and headaches for users of the web.
One of the best and most common ways of finding information on the web is through
the use of search engines such as Google, Yahoo and Bing. Google is currently the
most popular search engine, receiving hundreds of millions of search queries every
day.

Web Design: Romnick P. Zano

Salagusog National High School 1
World Wide Web

The World Wide Web ("WWW" or "The Web") is the part of the Internet that contains
websites and webpages. It was invented in 1989 by Tim Berners-Lee at CERN,
Geneva, Switzerland. Sir Tim Berners-Lee created a new webpage called HTML.
Websites are composed of pages linked by hypertext links. They are all written in the
HTML page.
The World Wide Web is used to describe HTML webpages that are part of the
Internet.
In order to see the World Wide Web one needs a computer, and a modem.
One also needs a connection to the Internet.
Many companies nowadays offer limited website hosting allowing one to
make websites that can be displayed on the World Wide Web like any other domain
(www.stuff.com) site. These sites usually make money from advertisements instead
of fees.

Web Browsers
It is a software application used to locate, retrieve and display content on
the World Wide Web, including Web pages, images, video and other files.

Examples of Web Browsers

1. Nexus
- This is considered as the first browser which was invented.

2. Internet Explorer
- It was released in 1995 as a supportive package to Microsoft Windows line of
operating systems.
- There are regular Microsoft updates that IE supports.

3. Mozilla Firefox
- It was officially announced in February 2004.
- It has earlier named Phoenix and Firebird.

4. Safari
- This is a web browser from Apple Inc., which is compatible with Mac OS X,
Microsoft Windows, and the iPhone OS.
- It was released by Apple in January 2003

5. Opera
- This browser was developed by Opera Software in 1996.
- It is a well-known browser that is mainly used in Internet-activated mobile phones,
PDAs, and smartphones.

6. Google Chrome
- This web browser was developed by Google.

Web Design: Romnick P. Zano

Salagusog National High School 2
 - It was released in September 2008 for Microsoft Windows.
The main standout feature is the malware and phishing warning that the browser
suggests when the user wants to browse a site.

7. Konqueror
- This is an Open Source web browser with HTML 4.01 compliance, supporting Java
applets, JavaScript, CSS 1, CSS 2.1, as well as Netscape plugins.

8. Lynx
- This is a fully-featured World Wide Web browser for users on Unix, VMS, and other
platforms running cursor-addressable, character-cell terminals or emulators.

Parts of Web Browsers (Google Chrome)

Functions of Web Browser

1) Provide a way for users to access and navigate Web pages .

2) Provide technology to enable multimedia features.
3) Provide access to Internet services.
4) Perform authentication and encryption functions.

Web Design: Romnick P. Zano

Salagusog National High School 3
Web Design Principles

1. Purpose
Good web design always caters to the needs of the user. Each page of your website
needs to have a clear purpose, and to fulfill a specific need for your website users in
the most effective way possible.

2. Communication
People on the web tend to want information quickly, so it is important to
communicate clearly, and make your information easy to read and digest. Some
effective tactics to include in your web design include: organising information using
headlines and sub headlines, using bullet points instead of long windy sentences,
and cutting the waffle.

3. Typefaces
In general, Sans Serif fonts such as Arial and Verdana are easier to read online
(Sans Serif fonts are contemporary looking fonts without decorative finishes). The
ideal font size for reading easily online is 16px and stick to a maximum of 3
typefaces in a maximum of 3 point sizes to keep your design streamlined.

4. Colours
A well thought out colour palette can go a long way to enhance the user experience.
Complementary colours create balance and harmony. Using contrasting colours for
the text and background will make reading easier on the eye. Vibrant colours create
emotion and should be used sparingly (e.g. for buttons and call to actions). Last but
not least, white space/ negative space is very effective at giving your website a
modern and uncluttered look.
5. Images
A picture can speak a thousand words, and choosing the right images for your
website can help with brand positioning and connecting with your target audience. If
you don’t have high quality professional photos on hand, consider purchasing stock
photos to lift the look of your website. Also consider using infographics, videos and
graphics as these can be much more effective at communicating than even the most
well written piece of text.

6. Navigation
Navigation is about how easy it is for people to take action and move around your
website. Some tactics for effective navigation include a logical page hierarchy, using
bread crumbs, designing clickable buttons, and following the ‘three click rule’ which
means users will be able to find the information they are looking for within three
clicks.

7. Grid based layouts

Placing content randomly on your web page can end up with a haphazard
appearance that is messy. Grid based layouts arrange content into sections,

Web Design: Romnick P. Zano

Salagusog National High School 4
columns and boxes that line up and feel balanced, which leads to a better looking
website design.

8. “F” pattern design

Eye tracking studies have identified that people scan computer screens in an “F”
pattern. Most of what people see is in the top and left of the screen and the right side
of the screen is rarely seen. Rather than trying to force the viewer’s visual flow,
effectively designed websites will work with a reader’s natural behaviour and display
information in order of importance (left to right, and top to bottom).

9. Load time
Everybody hates a website that takes ages to load. Tips to make page load times
more effective include optimising image sizes (size and scale), combining code into
a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML,
CSS, JavaScript (compressed to speed up their load time).

10: Mobile Friendly

It is now commonplace to access websites from multiple devices with multiple
screen sizes, so it is important to consider if your website is mobile friendly. If your
website is not mobile friendly, you can either rebuild it in a responsive layout.

Web Design: Romnick P. Zano

Salagusog National High School 5
Evaluation:

I. Fill in the Blank.

1. ________________ developed the World Wide Web.

2. A collection of Web Page is called ________________.
3. The ________________ is a worldwide network of computer system.
4. Mozilla Firefox has earlier named of ________________. and Firebird.
5. ________________ is considered as the first browser which was invented.

II. Give at least 5 Principles in Web Design.

Web Design: Romnick P. Zano

Salagusog National High School 6
What is HTML?

HTML is the standard markup language devised to allow website creation.

These websites can then be viewed by anyone else connected to the Internet.

The definition of HTML is HyperText Markup Language.

 HyperText is the method by which you move around on the web — by clicking
on special text called hyperlinks which bring you to the next page. The fact
that it is hyper just means it is not linear — i.e. you can go to any place on the
Internet whenever you want by clicking on links — there is no set order to do
things in.
 Markup is what HTML tags do to the text inside them. They mark it as a
certain type of text (italicised text, for example).
 HTML is a Language, as it has code-words and syntax like any other
language.

Starting HTML with Notepad

1. Click the Start Menu Button

2. Choose Notepad. The Notepad Window appears.
Or
1. Press the Windows Logo Key + R from your keyboard. The Run Dialog Box
appears.
2. Type Notepad and then Click OK. The Notepad Window appears.

Web Design: Romnick P. Zano

Salagusog National High School 7
To make all your tags visible, make sure that the word wrap feature in the Edit menu
is checked.

What is a Tag?

Tags are element names surrounded by angle brackets. It is used to start

coding a certain HTML file. Tags are not case sensitive which means you can use
lowercase letters, uppercase letters, or combination of both. For uniformity, you will
use lowercase letters in coding the tags for organization purposes.

Tag Function
<html> </html> Indicates the beginning and end of an HTML
document.
<head> </head> Sets the document header information.
<title> </title> Display the title of the page on the title bar.
<body> </body> Displays the content of the webpage.

Structure of a Tag

A tag is enclosed with an angle bracket < and >. You can add multiple attribute to a
single tag.

Container and Empty Tags

Container Tags are always wrap around text or graphics and comes in a set with an
opening and a closing tag.

Tag Function
<b> Creates bold text.
<i> Italicizes text.
<u> Underlines text.
<tt> Creates typewriter-style text.
<strike> Strikes out text.
<sub> Subscripts text.
<sup> Superscripts text.

Web Design: Romnick P. Zano

Salagusog National High School 8
 <pre> Creates preformatted text.
<hn> Creates heading text.
<center> Centers selected text.

Empty Tags are stand-alone tag and do not use a closing tag.

Tag Function
<br> Creates a line break in text (carriage return)
<hr> Inserts a horizontal rule across the page.
<img> Inserts an image in a page.

Web Design: Romnick P. Zano

Salagusog National High School 9
Evaluation:

Give the tag of the following container and empty tags.

1. break
2. bold
3. center
4. subscript
5. image
6. horizontal rule
7. superscript
8. preformatted text
9. center
10. italic

Web Design: Romnick P. Zano

Salagusog National High School 10
Creating an HTML File

1. Open Notepad
2. Type the following in the notepad

Notice that all tags are bounded by the <html> and </html> tag and <title> is inside
the <head> tag.

3. To save our HTML document, click file in the Notepad menu bar.
4. Choose Save As. The Save As dialog box appears.
5. Choose the path in which you want to save your file (e.g. Documents)
6. In the file name box, enter the file name with its file extension.
7. Click Save.

HTML documents can be saved in either of the two file extensions along with its
filename: .html and .htm - whichever you prefer. If you failed to include the
extension, your document is saved into .txt file. Moreover, you will not able to see
the webpage in the browse, instead, the Notepad window will appear if you try to
open the .txt file.

Web Design: Romnick P. Zano

Salagusog National High School 11
Printing the Webpage (Using a Google Chrome Browser)

1. Open your webpage.

2. Ready your printer. Turn it on,
feed with a bond paper.
3. In your browser, click Customize
and Control Google Chrome icon in the
top right then choose Print.
4. Choose your printer. Click the
one you are currently using if you have
multiple printers installed.
5. Set the Print Options or
Preferences.
6. Click Print.

Web Design: Romnick P. Zano

Salagusog National High School 12
Body Tags

The <body> tag defines the document's body.

Body Attributes for Background

Attribute Function
bgcolor Defines the background color. Either the
color name or the hexadecimal value will
aply.
background Sets the background image.

Example:
Background color: <body bgcolor=”blue”>
Background image <body background=”filename.extension”> (web.jpg, web.png)

Heading Tags

HTML defines six levels of headings. A heading element implies all the font
changes, paragraph breaks before and after, and any white space necessary to
render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1
being the highest (or most important) level and H6 the least. For example:

Example:

1. Heading 1
2. Heading 6

Creating a New Paragraph

The <p> tag defines a paragraph. Browsers automatically add some space (margin)
before and after each <p> element.

Aligning a Paragraph

The align attribute specifies the alignment of the text within a paragraph.

Attribute Function
left Left-align text
right Right-align text
center Center-align text
justify Stretches the lines so that each line has
equal width (like in newspapers and
magazines)

Web Design: Romnick P. Zano

Salagusog National High School 13
Example:
<p align=”center”>This is some text in a paragraph. </p>

Output:
This is some text in a paragraph.

Quoting Passages

<q> element defines a short quotation.

Example:
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

Output:
WWF's goal is to: “Build a future where people live in harmony with nature.”

Web Design: Romnick P. Zano

Salagusog National High School 14
Evaluation:

True or False.

1. HTML document can only be saved using .html as a file extension.

2. There are two attributes of a body tag.
3. In heading tag, h1 has the highest value.
4. The default file extension of Notepad is .docx.
5. HTML is case sensitive.
6. HTML defines four levels of headings.
7. In heading tag, h4 has the lowest value.
8. Paragraph Tag is an example of container tag.
9. Closing is represented by backslash.
10. The <p> tag defines the document's body.

Web Design: Romnick P. Zano

Salagusog National High School 15
Line Breaks

The <br> tag inserts a single line break. It is an empty tag which means that it has
no end tag.

Example:
To break lines<br> in a text,<br> use the br element.

Output:
To break lines
in a text,
use the br element.

Horizontal Rule

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). It is
used to separate content (or define a change) in an HTML page.

Attribute Function
size Defines the size of the horizontal rule.
width Defines the width of the horizontal rule.
color Defines the color of the horizontal rule.

Example:
<hr color=”blue” size=”5”>

Output:

Invisible Comment

What Is a Comment?

A comment is a string of code within HTML, XML, or CSS that is not viewed
or acted upon by the browser or parser. It is simply written into the code to provide
information about that code or other feedback from the code developers.

How to Write Comments

Writing comments in HTML, XHTML, and XML is very easy. Simply surround
the text you want commented out with the following:

<!--
and
-->

Web Design: Romnick P. Zano

Salagusog National High School 16
 As you can see, these comments begin with a "less than symbol", plus an
exclaimation point and two dashes. The comment ends with two more dashes and a
"greater than: symbol. Between those characters you can write whatever you want to
make up the body of the comment.

Example:

<!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Remember to add more information here -->

Output:

This is a paragraph.

Laboratory Exercise: Setting a Background Image

Instructions:
1. Start notepad and enter the basic tags with Background as the title.
2. Look for any image which is available in your computer and set it as the
background of your page.
3. Type the following between the opening and closing body tag:

Good web design is about the

character of the content , not
the character of the designer

Note:
- Put a quoting tag in this quotation.
- Apply break tag after the word “the” and “not” (See the quotation above”

4. Save your document as background.htm.

5. Preview it in a browser. If it has an error, fix it.

Laboratory Exercise: Working with Basic Tags

Instructions:
1. Start notepad and enter the basic tags with Poem as the title.
2. Put a background attribute in the body tag with yellow as the value. Type the
following between the opening and closing body tag:

Web Design: Romnick P. Zano

Salagusog National High School 17
 The Road Not Taken
Robert Frost

Two roads diverged in a yellow wood,

And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;

Then took the other, as just as fair,

And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,

Note:
- The title of the poem should be formatted using the paragraph tag and it is
aligned in the center
- Put a quoting tag in the given title of the poem.
- Add a break after the title of the poem.
- Add horizontal rule after the author of the poem with a size of 3 and a color of
red.
- Put a single break after each line of poem. However put two line breaks after
the first stanza of the poem.
3. Save your document as poem.htm.
4. Preview it in a browser. If it has an error, fix it.

Web Design: Romnick P. Zano

Salagusog National High School 18