COMPUTER REVIEWER (QUARTER 1)

Understanding the Principles of WedDesign

and Web Development
Web design and web development

• terms frequently used interchangeably.

• these are two different things.
• Web Design
-is the creation of the lay out of website visual elements.

• Example of a software that allows us to design our programs is Adobe

Creative Cloud
• Web Development

-creation of web pages using HTML, CSS, JavaScript.

• Web Designer - focuses on the appearance

• Web Developer - specializes in coding and making websites
• Web Designer - considers various design principles to achieve a pleasing or

an aesthetic layout
• Web Developer (programmer)- converts a static layout Into a dynamic
website
Static - Fixed content, faster load times, simpler technology, best for small,
unchanging sites.
Dynamic - Variable content, potentially slower load times, more complex
technology, best for large, interactive, or frequently updated sites.

• Web designer and web Developer - work in hand in to create a website

that offers a quality user experience

Principles of Web Designer

• Manimalism
- Less is more. Simplicity is always the key
-achieved by using more space
• Typhography
- element of design that refers to the visual aesthetic, style or appearance of
text.
 • Modern Web Design
-uses striking and expressive Bold and bright colors will help focus the users
attention.
• Color scheme
-impact in how users think and feel about the website
-vibrant and dramatic colors catch more attention
• Display
-smoother navigation and more continous story like presentation
• Animation
- users crave a more entertaining experience can help us capture maximum
attention
• Mobile Friendliness
-make sure the users can access and browse it on any devices.

Principles of Web Development

• User focus
-key principle to provide users with a great user experience.
• Quality focus
- very important to dovelop a mindset of Quality
-provides relevant and valuable consent and a good user experience
• Simplicity
- less is indeed more, keep our website simple and well-organized
• Efficiency of codes
-write's codes efficiency also try to reduce the amount of Codes

• Fewer codes mean less time spent on maintenance.

Undergoing the Wet Design and Web

Development Process
Web Design and Web Development Process

• Information gathering
- get a clear understanding of the website
purpose of the website, goals
we wish to accomplish, target audience, content our target audience will be looking
for on our site
• Planning
• we perform by creating a site map.
• Site Map how the entire site will look like. shows the relationship among
pages of the web site
Parts of Website
• Home page
-start the main page of a website important features of the website should be
available here
• Product or services
• allows wisitors to see sufficient information about the different products
or services
• it shows other features and aminities as well.
• About
• introduces the creator/company to the website visitors including history,
people, and others
• • Contact
• Dynamic
providescontent
ways on how they can contact the website

-example of blog, video, photo gallery, news events. frequently asked question,
testimonials.
• Site Links
• also create a wireframe to describe
the websites user interface
• Design
-determins the look and feel of our website, Themes, colors, logos
• Content Writing ang Assembly
-very important part of the process is writing the content
• Coding
- we start creating the website itself. The web designer will take all the graphic
elements and use them to create the actual pages. technical aspect is the web
developer
• Testing, delivery and launching
- website should be tested links, forms, typhography.
-We use an FTP (File Transfer Protocol) software to do this
• Maitenance and regular updating
- development of the website does not stop when it has been launched and we
regularly make changes and additions.
HTML

• Hyper Text Markup Languge

• most used languge
• Hypertext are link together quailable on a webpage
• Markup describes the structure of web pages
History
• Jim Borners-Lee
 • Father of the World Wide Web (www) No Created HTML in late 1991

HTML - ( 1991 )
HTML 2 -HTML3 (1993)
HTML 3.2 - HTML4 (1997)
HTML 4.01 - (1999)
HTML 5- (2014)
HTML 5.1- (2016)
HTML 5.2 (2017)

Notepad++
•
- is a free source code editor for use with Microsoft Windows
Notepad++ Environment
* Titte bar - shows the file name
* Tab bar -access to all opened files.
* Line number -identifies the location of a
line of codes
* Text area -working space when the codes are typed in
* Status bar -location of the cursor
* Menu bar -commands used on Notepad++
* Tool bar - area commands when editing a file

Basic Commands

• Open a file
• Save a file
•
• Run a file
• Choose a file
• Exit Notepad++
File

-the file name extension of an HTML file is htm or html.

Example:
<!DOCTYPE html>
<head>
<title> HONESTY </title>
</head>
<body>
<p> Good morning </p>
</body>
</html>
Lesson 4
• Heading Tag
- HTML has a heading
- There are six levels of heading.
- defined as <h1> to <6> tags
- <h1> as most important and <h6>for the least important
- Heading six is the smallest heading while Heading one is the largest
heading

• Paragraph Tag
- the <p> defines as paragraph
- automatically add one line before and one line after the paragraph

• Line Break Tag

- <br>
- produces a new line without starting a new paragraph
- doesn’t need opening and closing tag

• Preformatted tag
- <pre>
- preserves the formatting of the spaces and line breaks of text

• Horizontal Rule tag

- <hr>
- creates a horizontal line to divide the sections of a web page

NON BREAKING SPACE

- to add spaces to our text we use the &nbsp
- if we simplify add spaces, HTML will remove it
COMMENT TAG
• Comments can be placed anywhere in the document but will not be displayed
by the browser
• comments should be hidden from users and only programmers should see
these

Lesson 5
FORMATTING TAGS
• used to display special types of text with special meaning

• Bold tag
- <b>
 - display bold text

• Strong tag
- <strong>
- displays a strong text with added importance in meaning

• Italic tag
- <i>
- displays an italic text

• Emphasized tag
- <em>
- displays an emphasized text with added importance in meaning

• Superscript tag
- <sup>
- displays superscript text

• Subscript tag
- <sub>
- displays superscript text

• Nested tag
- <tag> or Nested tag
- Can be nested which means that we can put tags inside a pair of tags

Lesson 6
HTML LIST TAGS
• Unordered list
- no specific order
- each item in the list starts with the <li> tag marked with a bullet
Ex:
<ul>

<li> Peace </li>

<li> Honesty</li>
</ul>

Result:

• Peace
• Honesty
 Ordered List
•
- with a specific order
- starts with <ol>
Ex: <ol>
<li> Peace </li>
<li> Honesty </li>
</ol>

Result:

1. Peace
2. Honesty

Ex:
<ol type=“a” >or <ol type=“A” >
<ol type=“a” >

<li> Peace </li>

<li> Honesty </li>
</ol>

Result:
a. Peace
b. Honesty

• Definition List
- terms with a definition or description of each term
- <dl>

Ex:
<dl>
<dt> HONESTY </dt>
<dd> Honesty is the best policy </dd>
</dl>
Result:
HONESTY
Honesty is the best policy

• Nested List
-can put a list inside a list to create what we call a sublist or nested list
Ex:
<ol>
<li> integrity </li>
<li> loyalty </li>
<ul>
<li> modesty </li>
<li> creativity</li>
</ul>
<li> honesty </li>
<li> serenity </li>
<li> industry </li>
</ol>
Result:

1. Integrity
2. Loyalty
•modesty
• creativity
3. honesty 4.
serenity 5.
industry