Scribd
Upload
9 views

Web Page Design: Terms

The document discusses web page design and HTML tags. It covers topics like deciding the number of pages, content, site maps and layouts. It also explains important HTML tags and how to use them to format text, add images, tables, hyperlinks and more. Steps for creating a webpage and testing websites are also provided.

Uploaded by

Jaden Zephyr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Web Page Design: Terms

The document discusses web page design and HTML tags. It covers topics like deciding the number of pages, content, site maps and layouts. It also explains important HTML tags and how to use them to format text, add images, tables, hyperlinks and more. Steps for creating a webpage and testing websites are also provided.

Uploaded by

Jaden Zephyr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Web Page Design

Four important features:


1.The number of pages needed
2.The content of each page
3.A site map
4.The layout of each page

Think about how many web pages will be needed and their content. All websites need a
home page. This is the parent page where all other pages link to. The home page usually
gives an overview of the function and purpose of the website.

Four important features:


1.The number of pages needed
2.The content of each page
3.A site map
4.The layout of each page

Think about how many web pages will be needed and their content. All websites need a
home page. This is the parent page where all other pages link to. The home page usually
gives an overview of the function and purpose of the website.

NOTE:
1.Avoid using too many different colours, fonts, animations and styles. Avoid very bright
colours as this makes the page difficult to read.
2.Do not use too many photos and graphics in high resolution. File size will be too large so it
will take a long time to open in a browser.
3.Make links visible and group them together. Every web page should have a link back to the
home page.
4.Headings or titles should be across the top of the page.
5.Keep things as simple as possible.

Terms
Website – a collection of web pages.

Web server – a computer that is connected to the internet. Internet content is stored on the
web server.

Upload – when you put content on a web server for other people to look at or use.

Download – when you take content from a web server on to your computer.

Web browser – software used to connect to the Internet.


Uniform Resource Locator(URL) – address of a webpage. Also called the domain name.
This identifies where the webpage is hosted and who controls or owns the website.

Web page – document that appears in the browser window which can include text, images
and animated or interactive content.

Hypertext transfer protocol (HTTP) – communication protocol for the Internet.

Web authoring tools


These provide an easy-to-use interface for building a website without having to do any of
the coding yourself. The program writes the code for you.
Examples:
1.Microsoft FrontPage 2003 has been replaced by Microsoft Expression Studio since Office
2007. Expression Studio is a separate suite of web authoring applications, whereas
FrontPage was part of the Office suite.
2.Microsoft Publisher – for very basic websites.
3.Adobe Dreamweaver – for professional web designers but very expensive.
4.NetObjects Fusion – used by professional web designers because it allows you to control
all aspects of website creation, design and management.

HTML is a language for describing web pages.


HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it is a markup language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web pages. A web browser (like Internet Explorer or
Firefox) reads HTML documents and displays them as web pages. The browser does not
display the HTML tags, but uses the tags to interpret the content of the page.

Introduction
•HTML tags are keywords surrounded by angle brackets like <html>

•HTML tags normally come in pairs like <b> and </b>

•The first tag in a pair is the start tag, the second tag is the end tag

•Start and end tags are also called opening tags and closing tags

•When you save an HTML file, you can use either the .htm or the .html file extension
Steps for creating a webpage
1.Decide on the information to be presented on the Web.
2.Collect the information and arrange it in the form of pages, headings and paragraphs.
3.Decide on the graphics to be inserted.
4.Create a HTML file containing the information as well as the HTML tags using a text editor
such as Notepad.
5.Run your web browser such as Microsoft Internet Explorer and open the HTML file.
6.Check the presentation style and information displayed on the Webpage.
7.Edit the HTML text file if required.
8.Contact the Internet webmaster with whom you have an Internet account to load the
webpage onto the Internet.

Example of HTML tags


<html>
<body>

<h1> My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

•The text between <html> and </html> describes the web page
•The text between <body> and </body> is the visible page content
•The text between <h1> and </h1> is displayed as a heading
•The text between <p> and </p> is displayed as a paragraph

<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
NOTE: Some HTML elements have empty content. HTML elements with no content are
called empty elements. Empty elements are closed in the start tag. For example, <hr> (the
<hr> tag creates a horizontal line) is an empty element without a closing tag. Adding a dash
inside the start tag, like <hr/>, is the proper way of closing empty elements.
Text alignment
<html>
<body>

<h1 ALIGN=CENTER>Center-aligned heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

Text formatting
<html>
<body>

<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>

<p><big>This text is big</big></p>

<p><i>This text is italic</i></p>

<p><em>This text is emphasized</em></p>

<p><code>This is computer output</code></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Fonts
<html>
<body>

<p>
<font size="5" face=“arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>

</body>
</html>

Background colour
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

Hyperlinks
A hyperlink, or link, is a piece of text or part of a picture that you can click and it takes you
to another web page, to another section of a web page, to an e-mail address, to an external
web page or to a user-created file.

<html>
<body>

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser
window/tab.</p>

</body>
</html>

Images

<html>
<body>

<p align=center><IMG SRC = “filepath.jpg” height=200 width=200> </p>

</body>
</html>
Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Additional tags
<!--> - Defines a comment
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph.

Testing a website
Test the website to see whether the website works properly in different internet browsers.
1.Check that the layout is correct – nothing is chopped off.
2.Check that the text displays correctly.
3.Check that your pictures display correctly. It is best to use common image types such as
JPEG.
4.Test all hyperlinks on every page to ensure that they work and link to the correct pages.

PROBLEM SOLVING
MOST PEOPLE REGARD PROBLEMS AS SOMETHING NEGATIVE, BUT A PROBLEM
CAN BE A MATTER OR SITUATION THAT COULD BE BETTER, THAT COULD BE
IMPROVED ON OR THAT REQUIRES A SOLUTION.

STEPS TO SOLVE A PROBLEM


1.IDENTIFY AND DEFINE THE PROBLEM.
2.ANALYSE THE PROBLEM AND BREAK IT INTO COMPONENTS.
3.DEVELOP AN ALGORITHM.
4.TEST THE ALGORITHM TO SEE IF IT WORKS.
5.WRITE A PROGRAM IN A PROGRAMMING LANGUAGE.
6.TEST AND DEBUG.

IDENTIFY AND DEFINE THE PROBLEM


FOR EXAMPLE, YOU ARE EXPERIENCING A LOT OF HEADACHES. YOUR
IMMEDIATE SOLUTION IS TO TAKE ASPIRIN, WHICH EASES THE PAIN FOR A FEW
HOURS, BUT THE HEADACHES OFTEN RETURN. THE PROBLEM IS NOT THE
HEADACHES. THE PROBLEM IS THAT SOMETHING IS CAUSING THE HEADACHES.
ONCE YOU HAVE REALIZED THIS, YOU CAN IDENTIFY THE ROOT OF THE PROBLEM.

ONCE YOU HAVE BEEN ABLE TO IDENTIFY THE PROBLEM, YOU SHOULD DEFINE
THE PROBLEM CLEARLY TO ENSURE THERE IS NO UNCERTAINTY OR AMBIGUITY.
WRITE THE PROBLEM CLEARLY WITH AS MANY IMPORTANT DETAILS AS POSSIBLE.

SBA POINTER: CAREFULLY IDENTIFY AND ANALYSE THE PROBLEM PRESENTED


TO YOU IN THE SBA

ANALYSING THE PROBLEM


ANALYSING THE PROBLEM HELPS YOU TAKE A COMPLEX PROBLEM AND BREAK
IT INTO EASILY MANAGEABLE COMPONENTS.
ONE GOOD APPROACH IS TOP-DOWN DESIGN. THIS ANALYSES THE PROBLEM
AND BREAKS IT INTO SMALLER PROBLEMS, OR SUB PROBLEMS. YOU THEN SOLVE
EACH SUB PROBLEM AND COMBINE THE SOLUTIONS TO SOLVE THE ORIGINAL
PROBLEM.
STEPWISE REFINEMENT IS A MORE PRECISE WAY TO DO TOP-DOWN DESIGN.
THIS BREAKS A PROBLEM INTO SMALLER PROBLEMS, THEN THOSE SMALLER
PROBLEMS ARE BROKEN INTO EVEN SMALLER PROBLEMS.

DETERMINE THE INPUT, PROCESS AND OUTPUT


IPO CHART
YOU ARE GIVEN A PROBLEM OF FINDING THE SUM OF THREE NUMBERS.
-THE INPUT OF THE THREE NUMBERS
-ADD THE THREE NUMBERS
-OUTPUT THE SUM OF THE THREE NUMBERS

Input Process Output

Number 1 reading three numbers Total

Number 2 Add the 3 numbers together

Number 3 Output the total of the


numbers
ALGORITHMS
AN ALGORITHM IS A SET OF PRECISE INSTRUCTION STEPS TO SOLVE A GIVEN
PROBLEM.
ALGORITHMS CAN BE WRITTEN AS A NARRATIVE, OR THEY CAN BE WRITTEN IN
PSEUDOCODE.
THEY CAN ALSO BE REPRESENTED ON FLOWCHARTS.

NOTE:
THE ASSIGNMENT STATEMENT IN AN ALGORITHM MUST HAVE THIS SYMBOL

PROPERTIES OF AN ALGORITHM
AN ALGORITHM MUST:

1.BE PRECISE
2.BE UNAMBIGUOUS
3.GIVE THE CORRECT SOLUTION IN ALL CASES
4.FLOW LOGICALLY
5.EVENTUALLY END

CATEGORIES OF DATA
JUST AS WE NEED CONTAINERS TO HOLD OR STORE INGREDIENTS FOR A
RECIPE, LIKEWISE, WHEN WE PERFORM COMPUTATIONS, WE NEED SOMETHING
TO STORE OR HOLD THE VALUES THAT WE MANIPULATE. IN THE COMPUTER ,
VALUES ARE STORED IN MEMORY LOCATIONS. IN ORDER TO KEEP TRACK OF
WHERE OUR VALUES ARE STORED, WE NEED TO PLACE AN IDENTIFIER OR A
LABEL ON A PARTICULAR MEMORY LOCATION. THE LABEL OR IDENTIFIER IS
CALLED A VARIABLE.
THEREFORE, A VARIABLE IS A SYMBOLIC NAME ASSIGNED TO A MEMORY
LOCATION THAT STORES A PARTICULAR VALUE.
NOTE: THE WORD VARIABLE IS DERIVED FROM THE VERB “TO VARY”. THIS MEANS
THAT THE VALUE STORED IN A PARTICULAR LOCATION CAN CHANGE FROM TIME
TO TIME, ALTHOUGH THE LABEL REMAINS THE SAME.

CONSTANTS – A CONSTANT IS DATA THAT HAS a known value THROUGHOUT A


PROGRAM. A CONSTANT DOES NOT CHANGE ITS VALUE. A CONSTANT CAN ALSO
BE A NON-NUMERICAL VALUE SUCH AS YOUR NAME OR ADDRESS.
FOR EXAMPLE, TO CALCULATE THE AREA OF A CIRCLE YOU USE THE FORMULA
∏R2 . YOU DO NOT KNOW WHAT THE RADIUS IS, BUT THE VALUE OF ∏ IS A
CONSTANT, ABOUT 3.14. THIS VALUE WILL NOT CHANGE AND DOES NOT DEPEND
ON THE SIZE OF THE CIRCLE.

DATATYPES
TO WRITE AN ALGORITHM, YOU MUST BE ABLE TO DISTINGUISH BETWEEN THE
DIFFERENT DATATYPES BECAUSE WHEN YOU WRITE A PROGRAM, THE COMPUTER
NEEDS TO KNOW WHAT TYPE OF DATA IT IS WORKING WITH.

INTEGERS – WHOLE NUMBER BOTH POSITIVE AND NEGATIVE. THEY CAN NOT
REPRESENT FRACTIONS OR HAVE ANY DECIMAL POINTS. FOR EXAMPLE, IF THE
PROBLEM YOU ARE SOLVING REQUIRES THAT YOU ENTER THE NUMBER OF EGGS
YOU BOUGHT AT A SHOP, THIS IS MOST LIKELY TO BE AN INTEGER BECAUSE YOU
WOULD NOT BUY A FRACTION OF AN EGG.

REAL NUMBER – NUMBERS THAT INCLUDE DECIMAL POINTS BOTH POSITIVE AND
NEGATIVE. THEY ARE SOMETIMES CALLED FLOATING POINT NUMBERS. FOR
EXAMPLE, MONETARY VALUES ARE ALMOST ALWAYS REPRESENTED AS REAL
NUMBERS.

CHARACTERS – A PROGRAM CAN OUTPUT MESSAGES SUCH AS “A” AND “F”, AND
INPUT VALUES CAN CONSIST F CHARACTERS OR SYMBOLS. CHARACTERS ARE
SINGLE LETTERS OF THE ALPHABET OR SYMBOLS. THE LETTER A IS A
CHARACTER AND THE SYMBOL ! IS A CHARACTER.

STRING – A STRING IS A GROUP OF CHARACTERS. A STRING CAN BE ANY NUMBER


OF CHARACTERS. FOR EXAMPLE, “LUCY WELLS” IS A STRING

ALGORITHM STRUCTURE
HEADER: ALGORITHM’S NAME OR TITLE.

DECLARATION: A BRIEF DESCRIPTION OF ALGORITHM AND VARIABLES


USED.

BODY: SEQUENCE OF STEPS.

TERMINATOR: AN END STATEMENT.

EXAMPLE OF AN ALGORITHM
ALGORITHM WELCOME {HEADER}

THIS ALGORITHM DISPLAYS A WELCOME MESSAGE TO THE USER ON THE


SCREEN. {DECLARATION}
START
DISPLAY “ENTER FIRST NAME:”
ACCEPT FIRST NAME BODY
DISPLAY “HELLO”, FIRST NAME
DISPLAY “HAVE A NICE DAY!”

STOP {TERMINATOR}

CONTROL STRUCTURES
A CONTROL STRUCTURE CAN BE A SEQUENCE, SELECTION OR A LOOP (THAT IS,
REPETITION). THE BODY OF THE ALGORITHM IS COMPRISED OF VARIOUS
STRUCTURES.
SEQUENTIAL STRUCTURES ARE:
INPUT STATEMENTS, FOR EXAMPLE:
GET NUM1, NUM2
READ PRICE, TAX-RATE
ACCEPT GUESS
INPUT NUM
FLOWCHARTS
A FLOWCHART IS A PICTORIAL REPRESENTATION OF AN ALGORITHM.
FLOWCHARTS USE SPECIAL GEOMETRICAL OBJECTS TO DESIGNATE THE BASIC
STEPS OF A PROGRAM.
●A PARALLELOGRAM IS USED TO REPRESENT THE INPUT OPERATION AS WELL AS
THE OUTPUT OPERATION.
●A RECTANGLE IS USED TO REPRESENT A PROCESSING/ASSIGNMENT STATEMENT.
●A DIAMOND IS USED TO REPRESENT A DECISION (IF-THEN-ELSE) STRUCTURE.
●AN ELLIPTICAL SHAPE IS USED TO REPRESENT THE TERMINAL INDICATORS,
START OR STOP.
●DIRECTIONAL ARROWS ARE USED TO INDICATE THE FLOW OF THE LOGIC IN THE
ALGORITHM.

You might also like