W1-3 How to link to a website?

<a href="http://www.google.com">Google
LINKS Home</a>

(Hypelink)
• href: attribute
• Link • "http://www.google.com": the attribute
- Text value
- Images
- Buttons • Google Home: link text (it is visible and
clickable to the user)
• The essence of the World Wide Web
How to link to another page of a website?
Anchor (a) <a href="http://www.google.com">Google
- The anchor tag (<a>) defines a Home</a>
hyperlink used to link from one page,
section or website to another.
- 2-sided tag • href: attribute
• "http://www.google.com": the attribute
Syntax: <a href="url"> link text</a> value
• Google Home: link text (it is visible and
clickable to the user)

How to link to another page of a website?

<a href=" file name of the page.htm">Link
Text</a>

A link is specified using HTML tag <a>. This

tag is called anchor tag, and anything between
the opening and the closing <a> tag becomes
(Link color) part of the link, and a user can click that part to
- By default, links will appear as follows reach the linked document. The words, phrases,
in all browsers: or images between the opening and closing
• An unvisited link (hover link) is anchor tag will be displayed as a hyperlink.
underlined and blue. Links can be a text, image, buttons or other
• A visited link is underlined and purple HTML elements.
• An active link is underlined and red.
The following are the attributes of the
<a> attributes <a>tag:
• href
- Hypertext reference. • href-tells the address of the document or
- Specifies a target or destination for the anchor page we are linking to. The title attribute
element. • title- gives users an important indication
- Indicates the link's destination. as to where they will be directed to
• target when they click on a link.
• title • target- specifies how the destination
• id page or the target document should be
opened.
• id- enable users to "jump" to a specific
point on a page
WEBSITE PLANNING 3. Determining content

1. Creating a goal for your website After settling on your site's particular audience,
think of incentives which will motivate them to
The purpose of the website should be clear to come back and linger in your site. Here are some
you. What do you want to achieve by creating examples:
the website? Is your goal to impress? To make a
profit out of it? To amuse yourself? Write these • For a website about clothing: to be up to
goals down to keep you focused on what you date about current trends in fashion.
want. Reading these written goals comes in • For a social site: to enable the users to
handy in those times when you get confused and meet cute and smart people.
overwhelmed.
Take these things into account when deciding
2. Identifying your target audience what functionalities and website sections will be
used; more about this in the next section.
More often than not, you will be creating a
website for an audience, which is the group of It is easy to get lost when choosing what content
people who are expected to visit your website, to include in your website, as there are many
such as your friends, if it is a personal website, things you can do. Keeping your goals and target
or potential customers if it is a commercial audience in mind will help you narrow down
website. You need to think like your audience to your choices significantly.
identify their needs. Think of something that
would make them want to visit your website 4. Visualizing the page flow.
again and stay longer. To help envision the
possible audience of your site, ask yourself the For this step, imagine that you are the user of the
following: system. Think of how you would mora from
page to page, and think of how the system will
audience characteristics - what will be the react to every action. An example of page flow
gender, the age range, the kind of work (or is:
school) of the people whom you want to visit
your website? Also, take into consideration their
habits, cultural affiliation and interests. If the
members of your audience are high school
students, for example, it isn't likely they'll be
interested in nursing homes for the aged.

computer specifications - what will be the

computer and Internet bandwidth speed of
potential website audience? Graphics-heavy
websites will take a long time to load on
computers with slow processing and Internet
bandwidth speeds.

web experience - what is the computer

proficiency of users? If your audience consist of
elementary school kids who are just starting to
learn how to use computers, making them
navigate through hundreds of webpages would
only frustrate them.
5. Sketching the essential features of the look 7. Creating your website.
and feel of your website.
This is the part when you dirty your hands and
This part requires a bit of imagination and start coding. HTML basics and other
design. Layout is how things will appear, and are techniques in creating a website are discussed in
arranged in your page. The following sketch is the succeeding lessons.
an example of a pen and paper derived from:
http://webdesienfromscratch.com/design- 8. Performing usability testing.
process/web-design-process.php
Once the website is created, the next step is to
The person who created this somewhat vague have people test the site and to give their
sketch apparently visualized the website name to recommendations on how to make the site more
go on the topmost part of the page and that the user-friendly. Although a lot of people think this
succeeding lines are to contain the page sections is a waste of time or is too expensive, large
and the logo. The body or the content would be companies say otherwise. According to IBM, for
found in the middle of the page, and thumbnails every $1 spent for making your website easy to
of images would be found on the right side, use, a return of $10 to $100 is made.
while at the bottom of the page would be the
footers. How would you conduct usability testing for
your new website? Show five to ten people the
Do not discount the use of pen and paper to finished product, and have them comment on the
visualize your page! When an idea comes to following areas:
mind, chances are you will forget what it is
when you don't jot it down right away, and • Do they see the whole point and purpose
doing so on pen and paper is a lot faster than of the website?
opening up your computer. You can always • From the homepage, where would they
recreate a cleaner version of your layout on your click next? After that?
computer from your usually very rough pen and • Is it easy to navigate from page to page?
paper notes.
Website Sections
6. Planning site maintenance and update. A website is a collection of webpages. When
you start making your own site, the home page
It is best to design a website which is easy to (i.e., your main page) must be saved as
maintain. This usually means automating certain "index.html" or "default.html" regardless of the
features so that you don’t need a lot of manual contents of the site. Browsers look for these files
updates as time goes by. first whenever a web user types a URL without a
For example, if one of the features of your specific filename.
website is to show the present date, it would be
absurd for you to be the one to update the date in Should you decide to make a striking entrance
the site every midnight. Instead, use or create a page, which is called a splash page, for your site,
program to take care of this. you can save this page as index.html, instead of
your home page. The splash page usually
Future-proofing your website does not only consists of your sit's logo or any image or
entail automation, it also means being flexible illustration that best represents your site, and the
for possible expansion. Recreating your site links to your main pages. You can use different
from ground up whenever a new idea comes in, kinds of animation, slide shows- anything (as
for example, is sure to be a time waster. Your long as they don't take a long time to load)
website must thus be easy to modify to take new because the chief goal of the splash page is to
ideas in account. entice web users and at the same time act as your
website's title page.
Aside from the home page, there are other About Me/Contact Me Section
sections that your website can include. The Your site can be about anything, and it could
following are examples of website sections of also have an "about me" section which gives
the tech Factors site: information about yourself as the site's creator.
• Homepage A copyright section or a "contact me" section
• About Us should be on every page of your site, just like
• Learning Systems this example:
• Technical Support

Site Map Section

Another important section that you might want
to include in your website is the site map. This is
a separate page consisting of all the links in your
site -from your have page address up to every
link to your picture in the photo gallery. This
page doesn't need to have images because its
Website sections vary from website ro website.
main purpose is to direct the visitors to where
There is really no hard or fast rule in grouping
they want to go. It is, after all, a map.
information to create website sections; it really
all depends on how you
NOTE - Site maps are optional and are only
would group topics into different sections. Here
required when your website is very large.
are other website sections.
Nevertheless, most corporate websites have
removed their site maps altogether because of
Site Section
the dynamic nature of their contents.
One of the website sections you can include is
the "about the site" section, which essentially
Site Links Section
shows your reasons for making the site.
The site links section is not the same as the site
Examples of these are:
map. Since your site is now on the Web, it is
assumed that your site will not be an isolated
• Explanations of what inspired
work. Take advantage of what the Web has to
you/required you/pushed you into
offer by creating a separate page in your site that
producing the website.
presents all the other sites you find interesting
• Story about the hard work you went
and/or which has material which could be
through to create the website.
related to your site. You can start by including
• State the significance of your site's title,
your classmates' web addresses in your links
logo, choice of background and images.
page.

Guestbook Section
A guestbook is a webpage where your site's
visitors can enter in their comments about your
site or yourself. You can create the guestbook
section yourself or avail of a free guestbook
service. The good thing about creating the
guestbook yourself is that you can make the
design pattern of the guestbook consistent with
the rest of your webpages.
On the other hand, if you avail of a free
guestbook service, this will save you from Explanation:
creating a program to save comments received, • First Name==uses the default size
but you have no control over data storage and which is 20(size of the text box)
retrieval. For instance, after you have registered • <br>== to bring down the Second line
for a free guestbook at Last Name)
http://www.bravenet.com/
• Last Name== formatted as bold (< b>
webtools/guestbook/index.php, the content
and the text box size is 50
administrators will notify you every time a
visitor drops in and leaves a message in your • M.I.== on the same line with the Last
guestbook. This way, you can reject or approve Name because we did not insert the
whatever the visitor said and even reply to that <br> tag
person. However, when a span of time lapses • To set the maximum number of
without anybody leaving a message in your characters, use the maxlength
guestbook, the host will close your guestbook
and you will have no way of retrieving your Ex: First Name: <input type="text"
visitors' entries. maxlength="10" >

One alternative is to create a guestbook page in B. Checkbox

your website and provide an e-mail link - Allows the user to select ZERO or
for the visitors who wish to have their messages MORE options of a limited number of
posted on your guestbook page. choices.
- SYNTAX: <input type=“checkbox”>
W4-5

INPUT TAG

<input> tag
• input control that presents users with an
interactive control for entering data.
• represents text fields, checkboxes, dropdowns,
buttons, and other inputs C. Radio
• It tells where a user can enter data. - Allows a user to select ONE of a limited
• The input tag is empty or one-sided, meaning number of choices.
there is no closing tag. - SYNTAX: <input type=“radio”>
Syntax: <input type="value">

A. Text
D. Password J. Email
- Used to create a field that conceals the - A field for an email address
entered text. - SYNTAX: <input type=“email”>
- SYNTAX: <input type=“password”>
K. Button
- A clickable button.
- SYNTAX: <input type=“button”>

E. File
- A file-select field and a “Browse” button
(for file uploads).
- SYNTAX: <input type=“file”> W6-7

MULTI-MEDIA ELEMENTS
Warning!
Copyright issues:
• You own the image.
F. Date • You have received explicit, written permission
- A date and time control. from the image owner.
- Users can enter their birth day, month • You have ample proof that the image is in the
and year only. public domain.
- SYNTAX: <input type=“date”>
<img>
• The <img> tag is empty-meaning-it does
not have a closing tag, and it contains
attributes only.

To insert image
<img>
• One-sided
G. Datetime-local • attributes :
- Allows users to input the date, and time - src
with timezone. - alt
- SYNTAX: <input type=“datetime-
local”> src- (source)
• Specifies the path(URL) to the image.
H. Number • The sre attribute tells the browser where
- Required to create a field for enterting a to find the image.
numeric value.
- SYNTAX: <inout type=“number”> To insert image
src- (source) Specifies the path(URL) to the
I. Month image. The src attribute tells the browser where
- Defines month and year control. to find the image.
- SYNTAX: <input type=“month”>
alt (alternate) • Use the HTML <img> element to define
• Specifies an alternate text for the image an image.
• Meaningful substitute for the image. • Use the HTML <video> element to
define a video.
To modify image • Use the HTML <audio> element to
• width- specifies the width of the image define an audio.
• height- sets the height of the image • Use the HTML src attribute to define
• border- sets the border thickness of the the URL of the image.
image • Use the HTML alt attribute to define an
alternate text for an image, if it cannot
To insert image as background be displayed.
<body ="Y:backgroundl • Use the HTML width and height
HSLab3\Hslab3Shared\mam attributes to specify the size of the
ann(2d grading) |TOONI image or the video.
google.png">

Example.
<img src=Y:\HSLab3|Hslab3Shared\mam
ann(2d grading)\TOONIcartoon4.gif" alt="my
image">

Note: type the correct name and type of image

To insert video
‹video controls>
<source Y:\HSLab31
Hslab3Shared\mam ann(2nd
grading) \TOONI ITOONIvideo-
CAT.mp4">

To insert audio
<audio controls>
<source src=" Y:|HSLab3)
Hslab3Shared\mam ann(2nd
grading) \TOONI ITOON
audioSAMPLE.mp3">