Grade 8 - Web Designing

7/25/2019 Grade 8 - Web Designing

1/18

Lesson 6

WEB DESIGNING

WEB DESIGNING

Web Designingis the process of planning and creating a website. Text, images, digitmedia and interactive elements are shaped by a Web Designer to produce the pa

seen on the web browser.

Web Designer utilizes mark-up language through HTMLfor structure andCSSf

presentation to develop pages that can be read by web browsers.

The purpose of a Web Browser is to read and interpret HTML documents and compo

them into visible or audible web pages.

Example of Web Browser:

Internet Explorer

Mozilla Firefox

Google Chrome

HTML was invented in 1990 by a scientist calledTim Berners-Lee. The purpose w

to make it easier for scientists at different universities to gain access to each other

research documents. The project became a bigger success than Tim Berners-Lee ha

ever imagined. By inventing HTML he laid the foundation for the web as we know

today.

What is HTML?

HTML is a language for describing web pages.

HTML is used to make websites. It is as simple as that!

HTML stands forHyperTextMarkupLanguage.

A markup language is a set ofmarkup tags.

HTML usesmarkup tagsto describe web pages.

13


2/18

HTML Tags

HTML markup tags are usually called HTML tags.

HTML tags are keywords surrounded byangle bracketslike .

HTML tags normallycome in pairslike and .

*The start tag is often called theopening tag. The end tag is often called theclosing

tag.

Start tag * Element content End tag *

This is a paragraph

This is a link

HTML Documents = Web Pages

HTML documents describe web pages.

HTML documentscontain HTML tagsand plain text.

EXAMPLE:

My First Heading

My first paragraph.

14

Example Explained


3/18

The text between and describes the web page.

The text between and is the visible page content.

The text between and is displayed as a heading.

The text between

and
is displayed as a paragraph
CREATING AND EDITING HTML

HTML can be written and edited using many different editors like Dreamweaver and

Visual Studio.

But the we can use a plain text editor (like Notepad) to edit HTML.

SAVING YOUR FILE

When you save an HTML file, you can use either the .htm or the .html file extension.

There is no difference, it is entirely up to you.

HTML Headings

HTML headings are defined with the to tags.

Example:

This is a heading

This is a heading

This is a headingTry it yourself

HTML Paragraphs

HTML paragraphs are defined with the

tag.

Example:

This is a paragraph.

This is another paragraph.

15

HTML DOCUMENT EXAMPLE

This is my first paragraph.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headershttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers


4/18

The example above contains 3 HTML elements.

HTML Example Explained

The

element:


The

element defines a paragraph in the HTML document.

The element has a start tag

and an end tag
.
The element content is: This is my first paragraph.

The element:


The element defines the body of the HTML document.

The element has a start tag and an end tag .

The element:


The element defines the whole HTML document.

The element has a start tag and an end tag .

The element content is another HTML element (the body element).

16

HTML Tags Chart

Start Tag Name Code Example/Description End Tag


5/18

bold Example

body of

HTML

document

The content of yourHTMLpage

line break The contents of your page
The contents of your page

center This will center your contents

fontExample

Example

italic Example

deleted text Example

strong

emphasisExample

hypertext

markup

language

HTML is a Language for describing web pages.

Title of our

PageTitle of your web page

Underline Underline Me

Paragraph

Web Designer utilizes mark up language through HTMLfor structure and CSS for presentation to develop pages that

can be read by a web browser.

(Align Paragraph to the Left)



horizontal

rule

Color Chart Sample

Color Red Green Blue Hexadecimal

17


6/18

Black 0 0 0 #000000

White 255 255 255 #FFFFFF

Red 255 0 0 #FF0000

Green 0 192 0 #00C000

Blue 0 0 255 #0000FF

Yellow 255 255 0 #FFFF00

HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red,

Green, and Blue color alues (RGB)!

The lo"est alue that can be gien to one of the light sources is # (in HEX$ ##)! The highes

alue is %&& (in HEX$ '')!

HEX alues are secified as airs of t"o*digit numbers, starting "ith a + sign!

COMMON ELEMENTS OF LIST TAGS

ELEMENT DESCRIPTION END TAG ATTRIBUTES

The elements contains

Unordered List.

Required Compact, type


Ordered List.

Required Compact, type,

start

The element is used for

each line of list.

Optional Type, value


Definition List.

Optional None

The elements create a

Definition Term, before

each tag.

Optional Compact

The block element is

used for each definition.

Optional None

18

Getting Started With HTML


7/18

INSTRUCTIONS:

1. Open Notepad

2. Try the HTML Codes below:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

3. Save your work.* Click File, then select Save (Ctrl + S)

*File Name: My First HTML Document.html

4.Open a Web Browser (Chrome or Mozilla) and select your

document.

5. Let the Teacher check your work.

19

CREATING A PARAGRAPH

INSTRUCTIONS:


8/18

1. Launch Notepad.

2. Type the Codes below:

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser

ignores it.

The number of lines in a paragraph depends on the size of your browser window. If you resithe browser window, the number of lines in this paragraph will change.

3. Save your work and view your web page on a browser.

4. Let the Teacher check your work.

20

PARAGRAPH WITH ALIGNMENT

INSTRUCTIONS:

1. Open Notepad

2. Try the codes below:

This is an examle dislaing the use of the aragrah tag! -. This "ill create a line brea

and a sace bet"een lines!


9/18

0ttributes$

-html.-bod.

Examle 1$-br 2.-br 2.This is an examle-br.

dislaing the use-br.of the aragrah tag!-2.

Examle %$-br.-br.

This is an examle-br.dislaing the use-br.

of the aragrah tag!-2.

Examle $-br.

-br.This is an examle-br.

dislaing the use-br.of the aragrah tag!-2.

-2bod.

-2html.

! 3ae our "or/4 50ctiit %!html6

7! 8en in Bro"ser!

21

FONT PROPERTIES

INSTRUCTIONS:

1. Open Notepad

2. Try the codes below:


10/18

This paragraph is in Arial, size 5, and in red text color.

This paragraph is in Verdana, size 6, bold and in blue text color.

Web Designing is the process of planning and creating a website. Text, images,

digital media and interactive elements are shaped by a Web Designer to produce the

page seen on the web browser.

3. Save and open in a browser.

22

USING HEADING, PARAGRAPH AND FONT PROPERTIES

INSTRUCTIONS:

1. Open Notepad

2. Type and familiarize the codes below:

3. Save and open with browser.

4. Let the teacher check your work.


11/18

FACEBOOK 101

Facebook is a Social Networking website intended to connect friends, family, an

business associates. It is the largest of the networking sites, with the runner u

being MySpace. It began as a college networking website and has expanded to inclu

anyone and everyone.

Facebook was founded by 2004 by Harvard student Mark Zuckerberg and origina

called thefacebook . It was quickly successful on campus and expanded beyon

Harvard into other Ivy League schools. With the phenomenon growing in popularity, Zuckerbe

enlisted two other students, Duston Moskovitz and Chris Hughes, to assist. Within month

thefacebook became a nationwide college networking website.

Zuckerberg and Moskovitz left Harvard to run thefacebook full time shortly after taking the si

national. In August of 2005, thefacebook was renamed Facebook, and the domain w

purchased for a reported $200,000 US Dollars (USD). At that time, it was only available schools, universities, organizations, and companies within English speaking countries, but h

since expanded to include anyone.

23

ADDING BACKGROUND TO YOUR WEB PAGE AND

USING BREAK

INSTRUCTIONS:

1. Launch Notepad.

2. Carefully type the codes below:
http://www.wisegeek.com/what-is-a-social-networking-site.htmhttp://www.wisegeek.com/what-is-myspace.htmhttp://www.wisegeek.com/what-is-a-social-networking-site.htmhttp://www.wisegeek.com/what-is-myspace.htm


12/18


13/18


14/18

Row1 Col1

Row2 Col2

Row3 Col3

Row2 Col1

Row2 Col2

Row2 Col3

Row3 Col1

Row3 Col2

Row3 Col3

3. Save your work. File Name: html table

26

INSTRUCTIONS:

1. Open Notepad.


15/18

2. Create the source code to reproduce the same web page output below:

3. Save your

html

documents a

tables.html

4. Open you

browser and

view your

tables.html.

27

HTML

LAYOUT

WITH

TABLES

INSTRUCTION:

1. Open MS Notepad.2. Type and familiarize the codes below:

3. Save and let the teacher check your work.

Header

Left menu

Item 1

Item 2

Item 3...


16/18

ARGUS MAXIMUS

Footer


17/18

Today mans scientific knowledge is very wide and high

advanced. It has helped him to discover and invent many things for his ease, comfort and efficiency. Computer

the latest and most brilliant child of science.

Many of the routine activities today at home and in business are done by computers. The computer has proved

friend and servant of science, technology and industry. Most offices, shops, factories and industries u

computers. The Internet is a storehouse of information. The computer is a boon to all. Telecommunication a

satellite imageries are computer based. Computers have made the world a global village today.

By:(Your Name)

29

INSTRUCTIONS:

1. Open Notepad.

2. Create the source code to reproduce the same web page output below:


18/18

3. Save your

html

documents a

Headers.html.

4. Open your browser and view your Headers.html.

30