Scribd
Upload
34 views33 pages

WEB Development: 8:00-12:00 PM - Saturday Lecture March 28, 2020

The document discusses web design trends and HTML document structure. It covers topics such as responsive web design, large photo backgrounds, typography, infographics, parallax effects, flat design, and HTML tags and structure. The document provides information on key visual elements for web design including layout, color, graphics, fonts, and content.

Uploaded by

Raymond Benuya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views33 pages

WEB Development: 8:00-12:00 PM - Saturday Lecture March 28, 2020

The document discusses web design trends and HTML document structure. It covers topics such as responsive web design, large photo backgrounds, typography, infographics, parallax effects, flat design, and HTML tags and structure. The document provides information on key visual elements for web design including layout, color, graphics, fonts, and content.

Uploaded by

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

WEB

DEVELOPMENT

8:00-12:00 PM -
SATURDAY LECTURE
March 28, 2020

VIVERLIE N. FAJARDO
TOPICS
1. Introduction to Web Design
2. Web Trends
3. HTML Document Structure
4. HTML TAGS IN TEXT
What is web design?
DESIGN
1 2 3

Collect Implement these ideas Apply


design
principles
WEB DESIGN
Follows the same process in design

Present the design through web pages


Create an effective web
design by applying key
visual elements
ELEMENT 2 :

LAYOUT

Maintain balance,consistency
and the integrity of the design
ELEMENT 2 :

COLOR

Color should represent your


personality or the brand of the
organization
ELEMENT 3 :

GRAPHICS

Logos , images , and the graphics


that can help enhance your
design.
ELEMENT 4:

FONTS

Typography can enhance your


design when used wisely.
ELEMENT 5:

CONTENT

Should be useful and relevant.

Optimize for search engines.


Keep yourself updated by
knowing the different
web design trends.
WEB DESIGN TREND #1

RESPONSIVE WEB
The idea is to create web layouts that are
compatible with any forms of devices.
WEB DESIGN TREND #2

LARGE PHOTO
BACKGROUNDS
Use your best photos or graphic
designs as the main background photo
of your website.
WEB DESIGN TREND #3

TYPOGRAPHY

Most websites now use multiple fonts,


making the page easier to read and
more attractive.
WEB DESIGN TREND #4

INFOGRAPHICS

Infographics present a lot of


information in such a small space.
WEB DESIGN TREND #5

PARALLAX

Creating an animation or 3D
feel.
WEB DESIGN TREND #6

FLAT DESIGN

It’s about keeping it simple, clean ,


and modern.
HTML STRUCTURE
1. Document Type Declaration
2. HTML Tags
3. Document Header
4. Document Title
5. Body
6. Metadata
1.Document Type Declaration

- DOCTYPE DECLARATION
- To specify which tags a browser can expect to see in
HTML document
2.HTML Tags

The <HTML > and </HTML> tags at the beginning and


end of a text document identify as HTML Code.
3. Document Header

To add descriptive and accessory information to your


web page .
Document header tags , <HEAD> and </HEAD> ,
immediately follow the opening <HTML>tag.
4. Document Title

To help people and search engines identify your Web


page.
•The<TITLE> and </TITLE> , tags define a page title
and appear inside a document header.
•Limit the title to 64 characters in length
5. Body

The visible content that makes up your Web page ,


including paragraphs , lists , tables, and images.
•The<BODY> and </BODy> , comes after the header of
the document.
6. Metadata
Means “data about data. ”
Include :
-Author Information
-Type of Editor
-Description of the content
-Relevant keywords
-Copyright Information
Tips and Notes
Note: <meta> tags always go inside the <head> element.
Note: Metadata is always passed as name/value pairs.
Note: The content attribute MUST be defined if the name or the http-
equiv attribute is defined. If none of these are defined, the content
attribute CANNOT be defined
REFERENCES

WEB DESIGN:
. http/www.trendwhatiswebdesign

RESPONSIVE WEBSITES:
.www.thinkedu.com

CSS3/HTML
.http//www.lempens-design.com
Thank you!

You might also like