Scribd
Upload
9 views5 pages

Ict Q2 Reviewer

reviewer for ict

Uploaded by

Ji Ghorl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views5 pages

Ict Q2 Reviewer

reviewer for ict

Uploaded by

Ji Ghorl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like