LESSON 1: OVERVIEW OF Web Design Terminology
WEBPAGE DESIGN Web page - a formatted page within a
website that contains text, graphics,
video and multimedia.
A web page is a simple document
Home Page - first webpage of a website
displayable by a browser that is
which provides information about the
accessible through the internet.
website.
-access by entering a URL address
Splash Page - multimedia, designed to
(uniform resource Locator)
be attractive and intriguing.
-may contain text, graphics and,
Web Browsers - Test your website on
hyperlinks
browsers to ensure it works for most
users.
Website
-collection of web pages
Accessing the Web
Web Browser
• Dial-Up connection
-a software application to find websites
• DSL
in the internet
• Cable Internet
When was the FIRST WEB PAGE
• Wireless Internet
CREATED?
• Dedicated line
-created of CERN by Tim Berners-Lee
on August 6, 1991
Kinds of Web Browsers
Web designer / web developer
-Internet Explorer
-responsible for design, layout and
-Mozilla Firefox
coding of a website.
-Safari
-Google Chrome
PURPOSE OF WEB PAGE DESIGN
-Opera
(CUHPC)
-Netscape
-Showcase Creativity
-Flock
- Usable and Helpful
-Persuade users
Basic Web Design Principles
- Generate a business Career
-Balance
-Proximity
Basic Web Concepts
-White spaces
Internet - worldwide collection of
-Contrast
computers interconnected to one
-Focus
another.
-Unity
Network - several computers connected
-Alignment
together for sharing resources
World Wide Web -collection of
resources and information via the
internet.
Essential Elements of Web Contents
- Accuracy Body Attributes
-Readability -description of each html tag
-Understandable There are many attributes in the <body>
- Concise tag, listed below:
-Ethical and legal
FOCUS ON BG
History of the Internet Background: used to set the background
Leonard Kleinrock image. contain the url of the
DARPA logo today background.
bg color: to specify the color of an image
LESSON 2: GETTING STARTED WITH FOCUS ON HYPERLINKS
HTML alink: color of the active link
What is Hypertext Markup Language text: color of the text in a document.
(HTML)? link: specifies the color of visited links
- the language to create a web page /
HTML documents.
- Foundation of website LESSON 3: FORMATTING TEXT
The header tag:<hn> - uses predefined
Hypertext - document presented on a header text. sizes usually vary from 1-6 .
computer. The syntax for header is:
Markup Language - for processing <hn> your Heading Text here</hn>
definition and presentation of text
HTML - set of tags used to create a Guide to header text and sizes
webpage. Hn size (in Application
order) s
HTML tags - keywords (tag names)
enclosed by angle brackets <> h1 biggest main title
- comes in pairs with a Start tag and and size and section
headings
End tag
h2 second chapters &
Basic structure of HTML Document biggest important
subheadin
g
h3 third sub-sub
headings
h4 middle size most
paragraph
text
(default
text size) Enhancing Text: Logical Formatting
Logical formatting
h5 second less -The appearance of the text is controlled
smallest important by the browser being used.
Emphasising text for logical formatting
h6 smallest avoid using
- <em> tags are displayed in italics
- <strong> tags are displayed boldface.
The address tаg: <address> - indicates
the name and the e-mail address of the Carcading tags - you can use two tags
designer of the page. to affect the same text area
The address is displayed in 12 pt. Putting Quotes - enclose content with
Times, Italic, flushed to the left <blockquotes> tag pair
Pre formatting text
LESSON 4: ENHANCING TEXT - displays text how you exactly typed
Two Types of Text Formatting them in your code. Use <pre> tag.
• Logical Formatting Text alignment
• Physical Formatting -Heading and paragraph tags can be set
by using each tags align attribute.
Enhancing Text: Physical Formatting Attribute means the modifier to the
Physical Formatting- you can have more element.
control over how the text will appear. Syntax to align header is <hn align=
alignment>
HTML Formatting Elements Syntax to align paragraph is. <p align=
TAG Description alignment>
<b> bold text
Enhancing Text: Handling Font
<em> emphasized text -you can change the properties of the
font you want to use by using <font>.
<i> italic / alternate The <font> tag has attributes: FACE,
voice or mood SIZE and color.
<small> small text
To change the font style:
<strong> important text font face - <font face=fontname>
<sub> subscripted text </font>
font size - <font size=n></font>
<sup> superscript text font color - <font color=ncolor></font>
<del> deleted text
The Face Attribute
<mark> highlighted text <font face=fontname> </font>
Fontname is the font style that you want - when you move the mouse over a link,
to use the mous arrow will turn into a little
hand.
HTML STYLES
-add styles to an element, such as color. HTML LINKS: Target Attributes
Font size, etc. Target attribute specifles where to open
STYLE ATTRIBUTES the linked document
<tagname style = "property: value;"> _Self. Opens the document in the same
window/tab as it was clicked
LESSON 5: HTML IMAGE _blank. Opens the document in a new
tab window.
HTML IMAGES SYNTAX _parent-Opens the documents in the
- <img> is to embed an image in a web parent frame
page. It has 2 required attributes: _top - opens the document in the full
src - Specifies the path to the image body of the window
Alt - Specifies an alternate text for the
image Syntax
- The <img> tag is empty and no <a rel="value">
closing tag. Only attributes.
Attribute Values:
LESSON 6: HTML TABLES noreferrer - Makes the referrer
-allow web developers to arrange data unknown.
into rows and columns.
Table Cells The rel attribute specifies the
- each table cell is defined by a <td > tag relationship between the current
- td stands for table data document and the linked document.
Table rows Only used if the href attribute is present.
- each table row is defined by <tr> tag.
- tr stands for table row HTML <a> rel Attribute
<a rel="nofollow"
LESSON 7: HTML HYPERLINKS href="https://www.w3schools.com/">W3
Links allow users to click their way from Schools.co m</a>
page to page.
The HTML tag <a> defines a hyperlink it Link to an Email Address
has the following syntax: Use mailto: inside the href attribute to
<a href = "url" link text </a> create a link that opens the user's email
HTML LINK HYPERLINKS program.
the html links are hyperlinks you can <ahref="mailto:
[email protected]click on a link and jump to another ">Send email</a>
document
ADDITIONAL: LINKS To change the default numbering of a
Using Lists - In order for readers to list in HTML, you can use the start
easily get an idea of what information attribute in the <ol> tag to indicate what
they can see on your page. number or letter the bullet will start. The
Ordered Lists - If the information you syntax for this:
want to present on a list shows a <ol start=3>
defined sequence such as an <li> This item starts with 3.
instruction. This is sometimes called <li> List item 2
numbered lists. <li> List item 3
<li> List item 4
The syntax for creating an ordered </ol>
list is:
<ol type=bullet_type> Aside from start attribute, the number or
<li> List item 1 letter of a particular list item can be
<li> List item 2 changed and the succeeding lists will be
</ol> affected. The syntax to do this is:
<li value=n>
Where as bullet_type is either:
1 - numeric where n is the list's new line number.
a - lowercase letters
A - uppercase letters
i - lowercase Roman
I - uppercase Roman
Unordered Lists - These are presented
with bullets before each list item.
Sometimes called bulleted lists.
The syntax for creating an unordered
list is:
<ul type=bullet_type>
<li> List item 1
<li> List item 2
</ul>
where as bullet_type is either square or
round.
<li> indicates an item on the list
