grade 8 - web designing
TRANSCRIPT
-
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
-
7/25/2019 Grade 8 - Web Designing
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
-
7/25/2019 Grade 8 - Web Designing
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 paragraphCREATING 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 -
7/25/2019 Grade 8 - Web Designing
4/18
The example above contains 3 HTML elements.
HTML Example Explained
The
element:
This is my first paragraph.
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:
This is my first paragraph.
The element defines the body of the HTML document.
The element has a start tag and an end tag .
The element:
This is my first paragraph.
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
-
7/25/2019 Grade 8 - Web Designing
5/18
bold Example
body of
HTML
document
The content of yourHTMLpage
line break The contents of your page
The contents of your pagecenter 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)
(Align Paragraph to the Left)
(Align Paragraph to the Left)
horizontal
rule
Color Chart Sample
Color Red Green Blue Hexadecimal
17
-
7/25/2019 Grade 8 - Web Designing
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
The elements contains
Ordered List.
Required Compact, type,
start
The element is used for
each line of list.
Optional Type, value
The elements contains
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/25/2019 Grade 8 - Web Designing
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:
-
7/25/2019 Grade 8 - Web Designing
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!
-
7/25/2019 Grade 8 - Web Designing
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:
-
7/25/2019 Grade 8 - Web Designing
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.
-
7/25/2019 Grade 8 - Web Designing
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 -
7/25/2019 Grade 8 - Web Designing
12/18
-
7/25/2019 Grade 8 - Web Designing
13/18
-
7/25/2019 Grade 8 - Web Designing
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.
-
7/25/2019 Grade 8 - Web Designing
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...
-
7/25/2019 Grade 8 - Web Designing
16/18
ARGUS MAXIMUS
Footer
-
7/25/2019 Grade 8 - Web Designing
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:
-
7/25/2019 Grade 8 - Web Designing
18/18
3. Save your
html
documents a
Headers.html.
4. Open your browser and view your Headers.html.
30