HTML

Lesson 1: Using Hypertext MarkUp Language

Word Cloud

What word/s can you associate with the term WEBSITE?

Understanding the Principle of WEB Design and WEB Development

Business Websites

are used to promote a company's products or services. They typically include information about the company's history, team members, products or services, and contact information.

Website Types

E-commerce Websites

are used to sell products or services online. They typically include a shopping cart, checkout process, and payment gateway.

Website Types

Blogging Websites

are used to share information, news, and opinions on a particular topic. They typically include articles, photos, and videos.

Website Types

Social networking websites

are used to connect people with similar interests or backgrounds. They typically include user profiles, messaging features,

and discussion forums.

Website Types

Educational websites

are used to provide information and resources

on a particular topic. They can be used for online courses, tutorials, and research.

Website Types

Entertainment websites

are used to provide entertainment to

visitors. They can include games, videos, and music.

Website Types

Web Design

Is the creation of the layout of the website's visual elements using various design programs

Visually appealing

Easy to navigate

Optimized for different devices

Provides a clear and concise message

Adobe Creative Cloud

is a collection of software used for graphic design, video editing, web development, photography, along with a set of mobile applications and optional cloud services. Subscribers can access this collection through a monthly or annual subscription.

Web Development

is the creation of webpages using HTML, CSS, Javascript, and other scripting languages. It involves all the codes that makes a website work

Open Ended

What is the work of a Web Designer?

focuses on the appearance of a website (including layout, color scheme, typography, and imagery).

Web Designer

Open Ended

What is the work of a Web Developer?

• Also known as programmer.

• Converts a static layout into a dynamic website using links, buttons, and other interactive elements.

• Web Designer and Web Developer work hand-in-hand to create quality websites.

Web Developer

Graphic artist responsible for designing the layout, usability, and visual appearance of a website.

Web Designer

Tasked with converting the web design into functional website using coding languages such as HTML, JavaScript, PHP, and Python

Web Developer

Principles of Web Design

Open Ended

Define Principle

uare generally defined as rules or guidelines that we follow.

uThey are ideas that serve as a basis for how something works.

Principles

Simplicity is always the key
Keep the design clean and uncluttered. Focus on the essential elements and prioritize clear communication over visual complexity.

​​Minimalism

an element of design that refers to the visual aesthetics, style, or appearance of the text. It sets the tone and theme of the website.

Typography

Color Combination
Vibrant Dramatic Colors catch more attention from the users.

Color Scheme

-Use a borderless user interface display

-Use one-page website screen better than the multiscreen grid-based interface

-user can browse the website's content in a simple and linear fashion

www.andyhau.com

-Can help capture maximum user attention
-use animated icons and micro-interactions to ensure fluidity in the user's experience

Animation

User can access and browse on any device such as smartphone, tablet, or desktop computer

To test mobile friendliness visit developers.google.com/search/mobile-sites/

Mobile-friendliness

Display

www.apple.com/services

Multiple Choice

Keep the design clean and uncluttered

• Minimalism

• Typography

• Color Scheme

Multiple Choice

The pages are connected in a linear manner, following a logical path of action

• Typography

• Display

• Mobile-friendliness

Multiple Choice

Has the power to communicate messages and evoke emotional responses

• Animation

• Minimalism

• Color Scheme

Multiple Choice

The user can access and browse it on any device such as a smartphone, tablet, or desktop computer

• Mobile Friendliness

• Mobile Scheme

• Mobile Display

Multiple Choice

is the technique of structuring letters and words in a way that improves the legibility, readability and even navigation of a website

• Animation

• Typography

• Graffiti

Multiple Choice

Use animated icons and micro-interactions to ensure fluidity in the user’s experience

• Transition

• Transfiguration

• Animation

Lateral Puzzle: Confusing Website

A web designer made a website with bright colors, big fonts, and lots of moving parts. It looked great on their computer. But people using phones said it was messy, hard to read, and slow.

The Situation

Hint: The designer liked how it looked. Think about how others see and use websites. Consider how design choices affect reading, speed, and who can use the site on different devices.

Open Ended

What basic web design ideas did the designer probably get wrong?

The designer probably didn't realize:

Less is more (Minimalism): Too much stuff made it confusing.

Text needs to be clear (Typography): Big fonts can be hard to read.

Colors matter (Color Scheme): Bright colors can be hard on the eyes.

It needs to work on phones (Mobile-Friendliness): It wasn't designed for small screens.

Too much moving stuff is bad (Animation): It made the site slow and distracting.

Principles of Web Development

The accessibility and functionality of the website depend much on the developer

uUser Needs

uUser Experience
uPerformance Optimization – loading time

User focus

uA high-quality website provides relevant and valuable content  and a good user experience

u“How can we identify a good work and how to improve it?

Quality Focus

uKeep it simple and well organized

Simplicity

uWrite codes efficiently.

uFewer codes mean less time spent on maintenance

uUse comments to make code programmer–friendly.

uCode Responsibly </>

Efficiency of Codes

Any Questions?

LAS #1 Activity title: Definition of Terms

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can define terminologies used on the internet.

Instruction: Define the following terms used on the Internet using VISUWORDS.com

1. Internet

2. IP Address

3. Domain Name

4. World Wide Web

5. Web browser

PROCESS QUESTIONS:

1.     How does the Internet work?

 

2.     What are the devices used to connect to the internet?

Conclusion: _______________________

6. Web document

7. Web page

8. Website

9. Hypertext

10. Hyperlink

LAS #2 Activity title: Search for Websites

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can search for websites that follow each web design principle.

Activity: Concept Notes

PAGES 8-10

LAS #3 Activity title: Evaluate the Websites

Lesson 1: Understanding the Principles of Web Design and Web Development

Learning Target: I can evaluate if the website follows the principles of web design

Activity: Concept Notes

PAGES 10-11