Scribd
Upload
22 views175 pages

Group 1 Report

The document provides information about HTML and CSS. It discusses the different types of CSS (external, internal, inline), as well as the differences between HTML and XHTML. Some key points include: - CSS allows adding style to web documents through fonts, colors, spacing, etc. The three types are external style sheets in separate files, internal style sheets in <head> of document, and inline next to element. - XHTML is a more strict version of HTML that is XML-based and requires documents to be "well-formed". It has elements like <DOCTYPE>, <html> tags be mandatory. - HTML is the standard markup language used to display web pages in browsers, along with technologies like CSS

Uploaded by

Carlo Diaz
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
22 views175 pages

Group 1 Report

The document provides information about HTML and CSS. It discusses the different types of CSS (external, internal, inline), as well as the differences between HTML and XHTML. Some key points include: - CSS allows adding style to web documents through fonts, colors, spacing, etc. The three types are external style sheets in separate files, internal style sheets in <head> of document, and inline next to element. - XHTML is a more strict version of HTML that is XML-based and requires documents to be "well-formed". It has elements like <DOCTYPE>, <html> tags be mandatory. - HTML is the standard markup language used to display web pages in browsers, along with technologies like CSS

Uploaded by

Carlo Diaz
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/ 175

GROUP 1 REPORT

GOODEVENING EVERYONE!
CASCADING STYLE SHEETS
 Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
WHAT IS CSS?
 Most web pages are made from HTML, or hypertext
markup language. This is the standard way to
decorate plain web text with fonts, colors, graphic
doodads, and hyperlinks (clickable text that
magically transports the user somewhere else).
WHAT ARE THE THREE TYPES OF CSS?

 In a separate file (external) At the top of a web


page document (internal) Right next to the text
it decorates (inline)
EXTERNAL STYLE SHEETS
 External style sheets are separate files full of CSS
instructions (with the file extension .css). When any
web page includes an external stylesheet, its look and
feel will be controlled by this CSS file (unless you
decide to override a style using one of these next two
types).
INTERNAL STYLE SHEETS
 Internal styles are placed at the top of each web page
document, before any of the content is listed. This is
the next best thing to external, because they're easy to
find, yet allow you to 'override' an external style
sheet -- for that special page that wants to be a
nonconformist!
INLINE STYLE SHEETS

 Inlinestyles are placed right


where you need them, next to the
text or graphic you wish to
decorate.
EXTENSIBLE HYPER TEXT MARKUP
LANGUAGE
 Extensible hypertext markup language (XHTML) is a
hybrid language between XML and HTML and is
also an accepted standard in the coding world. It is
similar to HTML 4.01 and is considered as HTML
defined as an application of XML.
WHAT IS XHTML?
 XHTML stands for EXtensible HyperText Markup
Language XHTML is a stricter, more XML-based
version of HTML XHTML is HTML defined as an
XML application XHTML is supported by all major
browsers
WHY XHTML?
 XML is a markup language where all documents must be marked up
correctly (be "well-formed"). XHTML was developed to make
HTML more extensible and flexible to work with other data formats
(such as XML). In addition, browsers ignore errors in HTML pages,
and try to display the website even if it has some errors in the
markup. So XHTML comes with a much stricter error handling.
THE MOST IMPORTANT DIFFERENCES
FROM HTML
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
What is HTML?
Hyper – link or reference
Text – data or information
Markup – predefined text or
statement
Language – for communication
 The HyperText markup Language or
HTML is the standard markup language
for documents designed to be displayed in
a web browser.

 It can be assisted by technologies such as


Cascading Style Sheets (CSS) and
scripting language such as JavaScript.
Elements of HTML
1.Heading
• This HTML element is used to determine
Headings on a webpage.
• There can be up to 6 heading levels
define by tags such as H1, H2, H3, and
so on…
2. Images
• The image elements can be used to
add images to, your webpage.
• The image element has an anttribute
of src with a relative or absolute file
path to the image that you have
selected.
3. Links
• This is used to connect to different pages.
• The link element can be used to link
different pages of the website.
• The link element can also be used to link
an external style sheet to a webpage.
4.Cascading Style Sheet
• This is used to define headings fonts,
images, positioning, background color.
• Sytle sheets can be embedded on the
webpage or be defined in an external style
sheet file, with an extension.
5. External CSS
• This used to define the formatting
style for pages in websites.
• External CSS are held in file with
a .css extension
• Embedded style sheets will over ride
external style sheets.
Useful HTML Practices
1.Use proper document structure
-HTML documents will still work without
elements such as <html>, <head>, and body.
However, the pages will not render correctly
in every browser so it’s important to be
consistent using the proper document
structure.
2. Declare the correct doctype
-when creating an HTML document, the first
thing to declare is the doctype. This will tell the
browser the standard you are using to render your
markup correctly. The doctype goes before the
<html> tag at the top of the page. If you are unsure
about what declaration to use, W3.org
providesinformation on choosing the right doctype.
3. Always close tags
- To avoid encountering
validation errors always
remember to have a closing tag
for every tag you create.
4. Don’t use inline styles
- Inline styles are not good coding
practice because it makes it harder to
update and maintain a website.
Instead, keep your style separate from
your HTML mark up.
5. Use alt attribute with images
- It is not required to have an alt attribute with
images, which makes it easy to ignore. However, it
is important to have a meaningful alt attribute for
validation and accessibility reasons. The alt
attribute provides context to screen readers so it
should be descriptive as to what the image
contains.
6. Validate frequently
-instead of waiting until you are finished with
your HTML document, validate your code
multiple times as you work. This will save
some time in the end by indentifying errors
early on, especially if your document is
lengthy. One popular HTML validator to use
is W3C’s marup validation service.
7. Place external style sheets within
the <head> tag
- Although external style sheet can be
placed anywhere in the HTML
document, it is best practice to place
them within the <head> tag. This will
allow your page to load faster.
8. Use Meaningful Tags
-each section of your web page should be
built using the most appropriate HTML5 tag
for the content. It best to avoid excessive use
of generic tags, such as <div>, when there
could be a more descriptive tag for the job
such as <section>, <article> and so on.
9. Use lowercase markup
- Your HTML markup can be written in
lowercase up uppercase and the web page
will be render correctly. However, it is
best practice to keep tag names in
lowercase because it is easier to read and
maintain.
10. Reduce the number of elements
on a page
- HTML documents can become complicated,
especially for webpages with a lot of content. To
reduced the sized of your pages, check for
opportunities to further optimize your code once
you are finished with your mark up.
HTML Version
HTML 1.0
 1991- Tim Bernes Lee invents HTML.
 HTML 1.0 was the first release of HTML to the
world. Not many people were involved in website
creation at the time, and the language was very
limiting. There really wasn’t much you could do
with it bar getting some simple text onto the web.
HTML 2.0
1995- HTMl 2.0 is published.
This contains the features of HTML 1.0
plus new features.
This remained the standard markup
language for designing and creating
websites until 1997.
HTML 3.0
 In 1997 HTML 3.0 was invented.
 Here, Dave Raggett introduced a fresh draft on
HTML, which improved new features of HTML and
gave more powerful characteristics for webmasters
in designing websites. Unfortunately, the powerful
features slowed down the browser in applying
further improvements.
HTML 3.2
 The browser-specific tags kept coming, and it became
increasingly apparent that a standard needed to be
found. To this end, the » World Wide Web Consortium
(abbreviated to the W3C) was founded in 1994 to
standardise the language and keep it evolving in the
right direction. Their first work was code-named
WILBUR, and later became known as
HTML 3.2.
HTML 4.0
 In 1999 the widely-used HTML 4.0 comes out. It is very
successful.
 HTML 4.0 was a large evolution of the HTML standards, and
the last iteration of classic HTML. Early in development it
had the code-name COUGAR. Most of the new functionality
brought in this time is from the ill-fated HTML 3.0 spec, as
well as a host of trimmings on old tags, a focus on
internationalisation, and support for HTML’s new supporting
presentational language, cascading stylesheets.
HTML 4.01
 Once HTML 4.0 had been out for a little
while, the documentation was revised and
corrected in a few minor ways and was
entitled HTML 4.01; the final version of the
specification.
XHTML 1.0
 Close to the beginning of the 21st century the W3C issued their »
specifications of XHTML 1.0 as a recommendation. Since January
26, 2000 it stands as the joint-standard with HTML 4.01. XHTML
marks a departure from the way new specs have worked — it is an
entirely new branch of HTML, incorporating the rigours of »
XML, so that code must be properly written if it is to work once it
reaches the reader’s browser. There weren’t many new or
deprecated tags and attributes in XHTML, but some things
changed with a view of increased accessibility and functionality.
It’s mainly just a new set of coding rules. Read all about it
properly in XHTML Explained.
HTML 5.0
 2014- HTML 5.0 is released and used
worldwide. It is said to be the extended
version of HTML 4.01 which was published in
2012.
• WHAT IS INTERNET ?

A global computer network


providing a variety of information
and communication facilities
consisting of interconnected
networks using standardized
communication protocols the
guide is also available on the
internet.
@google
WHAT IS WEBSITE
 It’s a collection of linked web pages(plus their
associated resources)that share a unique domain
name.
 A group of world wide web page usually
containing links to each other and made available
online by an individual, company, or organization.

 Slideshare.net
2 TYPES OF WEBSITE
 STATIC WEBSITE-webpages with
fixed content.Each page is coded in
html and displays the same
information to every visitor.
 DYNAMIC WEBSITES-webpages that
display different content each time
its viewed.It’s has two type the client
side scripting and the server side
scripting.
BASIC TYPES OF
WEBSITES
1.PERSONAL WEBSITES

 Your internet services


provider may offer you free
www.Lucie Anderson.com server space for you to
create your own website
that might include some
family photos and an online
diary and have web
address.
2.PHOTO SHARING
WEBSITES
 This pages could easy be
Example over a hundred such sites
that offer free photo
sharing paid for by their
online advertising.
3.MOBILE
WEBSITES
 Although it’s infancy, the use
of this mobile devices will
became much more
widespread and
prevalent.One problem is
that standard websites are
difficult to view and take
long time to download of
some of small screen and
wireless connection

ANDROID/IPHONES
4.BLOG WEBSITES

 People took the world.this web


pages shortened to blogs.It’s
an online diaries,journals,or
editorials, and may how blogs
have taken over the internet.

Example/trip adventure
5.COMMUNITY
BUILDING WEBSITES

 These online communities


of peoples who want to
interact with other people
socially or meet people
who share their
interest.Facebook and my
space.com are the best
website example of this
site.

Example our
community
6.Ecommerce websites

There’s a millions
online product of
small bussinesses
who used their
ecommerce site to
sell their product
over the internet.

Shoppe websites/Example
7.INFORMATIONAL
WEBSITE

 A major informational
wikipedia.om.org the online
encyclopedia. Allow visitors to
contribute and edit articles.

Example ; ENCYCLOPEDIA
8.Online bussiness
brochure/catalog websites

 This websites cast a large


net,reaching literally millions
of people with just one
website .with your own
catalog you can show anyone
who looks for and finds your
photo and disciptions of your
products or services.

Online catalog
FUNCTION OF WEBSITE
 Ease of how a user can navigate your site.
 Get the information they are seeking.
 Purchase the product that they want.
 Enable users to complete tasks
 Submitting an online form.
PURPOSE OF WEBSITE
 Make money
 Sell product
 Save money
 Build online presence
 Sell services
 Branding
 Showcase authority and stablish trust
HTML TOOLS
HTML tools are the tools that are used to create and edit the
HTML code.
BENEFITS OF USING HTML
TOOLS
There are many benefits of using the HTML editor tools over
simple Notepad for web development

 The use of HTML editors makes editing and development faster.


 It helps the beginners to learn the HTML more quickly.
 It makes the code more readable, as it includes the comments and other
notes in coding.
 Easy to develop a website and put online.
 It provides a real-time preview of the HTML code.
 It offers to autocomplete code features.
 It facilities the platform for the easy learning of the HTML code.
ATOM
Developed By – GitHub
Initial Release – February 26, 2014
Written in – Electron, CoffeeScript, JavaScript, HTML,
Less

This HTML editor is full-featured, including the other programming


languages for web development like JavaScript, Node.js, CSS.

Featured for this HTML Editor


 Atom supports the multiple panes to compare
and write code side-by-side.
 Atom allows faster and smarter coding with a
flexible autocompletion feature
 Atom is a free and open-source HTML editor
Notepad++
Developed By – Don Ho
Initial Release – November 25, 2003
Written in – C++

Notepad++ is a free HTML editing tool for Window users.It is very simple
and easy to learn and code on Nodepad++. Notepad++ handles several
useful languages for WordPress developers that include HTML, CSS, PHP,
and JavaScript.

Features of Notepad++ Editor Tool


 Notepad++ provides a simple, lightweight, and fast user interface.
 Notepad++ supports a multi-language coding environment.
 Nodepad++ is a free and open-source HTML editor.
 Nodepad++ offers the features for the addition and customizations
of the plugins.
SUBLIME TEXT
Developed By – Sublime HQ
Initial Release – January 18, 2008
Written in – C++, Python

The Sydney-based development company develops sublime Text


HTML editor. It is a premium HTML editor tool that you can use for free,
but you need a license to access all features of Sublime Text.

Featured of Sublime Text Editor


 Sublime Text is known for the functionality expansion as it supports
Python APIs
 Sublime Text automatically generates the class, method, and function
definitions.
ADOBE DREAMWEAVER
CC
Developed By – Adobe Inc.
Initial Release – December 1997
Written in – C++

Adobe Dreamweaver CC is a premium tool for Web Developers that


fulfills both the front-end and back-end web development needs. Adobe
Dreamweaver CC is one of the best HTML editors supporting both the
textual and WYSIWYG methods for code editing.

Featured of Adobe Dreamweaver CC


 Adobe Dreamweaver allows coding in any programming language
 Adobe Dreamweaver is known for its high-end performance and
community support from Adobe Inc.
 It allows the real-time preview of the end product while coding.
 It provides user access to creative cloud libraries.
VISUAL STUDIO CODE
Developed By – Microsoft Corporation
Initial Release – April 29, 2015
Written in – TypeScript, JavaScript, CSS

Visual Studio Code is one of the popular HTML editor tools used for
HTML code editing by the maximum number of web developers. Visual
Studio Code is a free code editor with an immense number of features,
including the smart autocompletion and syntax highlighter.

Featured of Visual Studio Code


 It enhances the exposure to the advanced features with the
IntelliSense integration.
 Visual Studio Code provides the customizations by adding
extensions for plugins, debuggers, and other features.
 It allows the debugging feature for real-time results.
CoffeeCup HTML
Developed By – CoffeeCup Software
Initial Release – August 1996
Written in – HTML, CSS

CoffeeCup is one of the best premium tools for HTML editing.The


premium version of CoffeeCup provides unlimited web developers’
complete features, ranging from FTP connections, HTML/CSS
validation, code cleaning, etc

Features of CoffeeCup HTML


 CoffeeCup is an HTML editor has better for customer support and
easy to use.
 CoffeCup provides both free as well as a premium package for the
developers.
 It has large community support and regular upgrades.
 It allows integration with the HTML and CSS languages
Netbeans
Developed By – Apache Software Foundation, Oracle
Corporation
Initial Release – 1997
Written in – Java

Netbeans is also known as Apache Netbeans. Netbeans is not similar to


most of the HTML editors as it provides the features of version control.
Netbeans is a free and open-source HTML editor tools used by numerous
giant companies for versatile web development services.

Features of Netbeans
 It allows you to code in multiple programming languages like
HTML5, PHP, JavaScript, and other programming languages.
 It provides features like version control and autocompletes coding.
The HTML editor tools’ selection relies on
several factors like the size of the project, project
requirements, the features you want, etc.
some developers want version control; however,
others only want the autocompletion feature for
faster coding. So, it completely depends on the
developer’s preference. You can choose the best
for yourself from this list of HTML editors for
website development.
Website Planning
 Website planning is a strategic
activity that aims to define and
document what kind of a
website you want to build, how
exactly do you want it built, and
why (what your goals are).
How to plan a website

 Identify your website goals.


 Identify your target audience.
 Define your unique selling proposition.
 Secure a domain name (and hosting).
 Pick a website builder.
 Create and collect design elements.
 Create content for your core website pages.
WEBSITE ANALYSIS
WHAT IS WEBSITE ANALYSIS
 A website analysis is the process of testing and reviewing a website’s performance
for key metrics such as speed, traffic, search engine optimization (SEO), and user
experience. Each of these elements is a factor in your website’s success, meaning
they directly affect the performance of your company.
Website Analysis: What It Is and Why
You Need It
 Optimizing your website for easy browsing and searching not
only helps bring users to your site, but it encourages them to
come back. Elements like user-friendly navigation, quick loading
speeds, and functioning links help your website appear more
professional and increase your visitor’s satisfaction. But in order
to improve your webpages and content, you need to perform a
thorough website analysis.
4 Types of Traditional
Website Analysis
1. Search Engine Optimization (SEO)

 SEO helps you understand what people are searching for when they encounter your
website online. There are multiple options for analyzing your website for SEO
2. Speed
 Analyzing the speed of your website helps you understand how fast your content
loads on different devices. Speed is important because both users and search
engines prefer a fast-loading website to a sluggish one. Learning what elements
slow down your loading speed—such as large images, unclean code, or too many
plugins—can help you make improvements. Depending on the tools you use, you
may be able to decide which elements slow down your site on specific devices.
Many free tools can help you with a speed analysis
4. User experience
 Reviewing the user experience can help you understand what a visitor does when
they get to your website. Unlike some other types of website analysis that may be
similar for all companies in the same market, the user experience is something only
you can provide. This metric also focuses more heavily on human preference and
behavior rather than strictly on metrics and numbers.
How To Run a Website Analysis
1. Set An Analysis Goal
 You can run a website analysis at any time and for any reason. In fact, running
analyses can often help you better understand new updates to search engines or
optimization trends across the internet. Even if you conduct analyses regularly, each
one should still have a purpose in order to maximize its effectiveness. To establish a
purpose for your analysis, look for an issue, problem, or challenge your website is
facing.
2. Create an Analysis Road Map
 After you’ve set your goal, it’s helpful to have an ideal scenario or benchmark in
mind that you can compare your results against. This can help you determine
exactly what you’re hoping to achieve from your analysis and how you’ll take
action after the analysis to meet that standard. Consider creating a step-by-step plan
for how you expect a user to progress through your conversion cycle or how you
expect them to browse and use your website.
3. Collect Data
 The next step is to use analytics tools to collect the appropriate data from your
website and those of your competitors. This helps you understand your actual
performance metrics and ways you can improve your website. The type of data you
collect, the tools you use, and the tests you run during data collection depend on
your analysis goal. Consider only collecting information that directly relates to your
goal. If you find other information that needs to be addressed throughout data
collection, you can plan to run a separate analysis for another goal or purpose.
4. Review and Understand the Data
 Once you’ve established your goal for your website and collected the data about
how it actually performs, you can review both and see how they compare to one
another. Consider areas such as where the two plans diverge or road map steps that
don’t function as intended. Understanding your collected data can make it easier to
decide how and where to make changes that benefit both the website users and the
company as a whole.
5. Brainstorm Solutions To Improve Your
Website
 Knowing what you want or need to fix is only one part of the analysis process. The
other is deciding how to make these improvements and create actual change. Make
a bulleted list of the ways you can update certain aspects of your website with
minor adjustments. For more complex revisions, consider listing step-by-step
instructions during your brainstorming sessions. Then, choose the teams or
individuals to which you can assign each portion.
6. Continue To Make Changes and Optimize
Your Website
 After implementing your changes, continue to run periodic analyses on all areas of
your website, not just the ones you previously altered. This can help ensure that
your changes are working or clarify if they need further adjustments. It also lets
you know if other areas of your website, over time, can benefit from going through
the same improvement process.
Tools For Easy Website Analysis
1. CopyPress Content Marketing Analysis Tool
 CopyPress now offers a free content marketing analysis tool that compares your website
and its content with your top three competitors. When you request your content analysis,
you’ll receive a spreadsheet in your inbox with detailed reports on your webpage’s
ranking, backlinks profile, and potential syndication partners. Use these metrics in
whatever way is most helpful to your business and its content marketing goals.
 Or schedule a call with CopyPress. We’d be happy to go over the results with you and
help you find ways to boost your content marketing strategy. Whether you need trending
blog articles or in-depth white papers, we have the writers and resources to help.
2. Ahrefs
 The Ahrefs program crawls the internet 24/7 to collect, store, and host data for you
to discover and analyze. This data hub allows users to conduct SEO audits and
analyze social metrics to study their competitors’ content marketing strategies and
review backlink patterns.
 Ahrefs is a paid program for all users, even for basic functions. You can test this
program for a nominal fee to decide if it’s right for your analysis needs.
3. MixRank
 The MixRank tool provides detailed information about a company and its affiliates. This is
good for conducting competitive analysis and looking for new leads by helping you discover
which products and services your competitors offer. Some data points from MixRank
include:
 Advertisers sorted by category, keyword, and traffic source
 Contact information for company management and owners
 Directories of registered businesses
 Information about each company’s marketing channels
 Technology profiles for each company
4. Moz
 Moz is a popular tool for monitoring SEO and social marketing campaigns. You
can also use it to monitor rank tracking, review backlink analysis, undertake
keyword research, and run site audits. The Pro version allows users to crawl their
own websites and competitor websites. The crawl feature also notifies you when
you have a new site issue to fix.
5. Quantcast
 The Quantcast program focuses on demographics and behavior. It tags websites,
blogs, videos, and widgets to measure statistics such as users’ ages, genders, and
interest areas. It also tracks user retention and interaction statistics for a variety of
factors and allows for real-time analysis to monitor changes as they occur.
6. SEMrush

 SEMrush monitors competitors’ display advertising and search engine marketing (SEM)
strategies. It can also monitor your own website performance in organic search results
and compare them with competitors. Other information SEMrush provides includes:
 Changes in the search volume with data for up to two years
 Nofollow and dofollow backlinks
 Organic and paid search traffic volume
 Ranking keywords for competitors’ websites
 Target competitor websites
7.Similar Web
 Similar Web can help you see how much traffic your competitors receive and which successful advertising channels they use. It includes
data mining and analysis tools to extract data from local and global data partnerships, local ISPs, web crawlers, and web surfers. Variables
considered in each analysis include:
 Audience interest
 Average time visitors spend on the website
 Bounce rate
 Display ad banner pictures
 Estimate monthly visitors
 Keywords for paid search traffic
 Percentage of traffic from individual channels
 Top referring websites
 Traffic proportions for social networks
WEB DEVELOPMENT LIFE CYCLE
WEB SITE PLANNING
-Understanding the Web site purpose

WEB SITE ANALYSIS


- During this phase, the Web designer needs to make
decisions about the Web site content and
functionality.
 Web Site design and Development

 Web site layouts


 Websites are designed using several different layouts, including
linear, hierarchical, and Webbed.
 LINEAR WEB SITE LAYOUT
 A linear Web site layout connects Web pages in a straight line.

 HIERARCHICAL WEB SITE LAYOUT


 A hierarchical Web site layout connects Web pages in a tree-like
structure.
 WEBBED WEBSITE LAYOUT
 A Webbed Web site layout has no set structure.

 WEBSITE TESTING
 A Web site should be tested at various stages of the Web design and development.
•Reviewing for accurate spelling and proofreading content including page titles.
•Checking links to ensure that they are not broken and are linked correctly
•Checking graphics to confirm they display properly and are linked correctly
•Testing forms and other interactive page elements
•Testing pages to check for speed of loading on lower speed connection
•Printing each page to check how pages print
•Testing each Web in several different browser types and versions to verify they display correctly

SITE IMPLEMENTATION AND MAINTENANCE

Once the Web site testing is complete and any required changes have been made.
the Web site can be implemented.
Implementation of a Web site means publishing the Web site or uploading it into a Web server.
Gmail Images …
…
…

WELCOME
TO
Web Design and Development
Type here Type here Type here Type here Type here

Type here

What is Web design and Development?

Web design and development is an umbrella term


that describes the process of creating a
Website.It involves two major skill sets.
-Web Design
-Web Development.

Web design determines the look and feel of a


website, while web development determines how
it functions
What is Web Testing ?
It is designed to check all aspects of the web
application's functionality, including looking for
bugs with usability, compatibility, security, and
general performance.
Web testing is a standard software testing practice to
test websites and applications to identify potential
bugs before it is accessible to web users. The issues
like security, compatibility with multiple devices,
performance, functionality, and ability to handle
traffic and real-time users are tested.
Type here Type here Type here Type here Type here

Type here

How Web Testing is done?

These tests can compare real-world results


with predicted ones to ensure there's no
discrepancy.
Step 1: Functional Testing
Step 2: Usability Testing
Step 3: Interface Testing
Step 4: Compatibility Testing
Step 5: Performance Testing
Step 6: Security Testing
Step 1: Functional testing
is a type of testing that seeks to establish whether each
application feature works as per the software requirements. Each
function is compared to the corresponding requirement to
ascertain whether its output is consistent with the end user’s
expectations.

Step 2: Usability Testing


When thinking about how to test a website, the second step
should be usability testing. This type of testing combines the
previously mentioned functionality testing with the overall user
experience.

Step 3: Interface Testing


This web page test checks whether or not all interactions
between the app server and the web server run smoothly. Not only
the communication process needs to be tested, but the displaying
of error messages as well. Also, this test is used to determine
whether the interruptions by the server and/or by the user are
handled properly.
Step 4: Compatibility Testing
The developers need to run the browser compatibility test to check if the
app is displayed correctly in different browsers. Another test to run is the
mobile browser compatibility which, as the name suggests, is supposed to
confirm that the app displays correctly across mobile browsers
Step 5: Performance Testing
Once you know your app is functional and responsive, you need to check its
performance under a heavy load. Performance testing includes testing under
different internet speeds as well as under normal and peak loads.
Step 6: Security Testing
Here are the basic steps of security testing:
• Understanding the security goals and planning the test by considering the
security needs of each of them
• Identifying the app’s security needs
• Gathering the info about the elements used to develop the app including
the OS, hardware, technology etc.
• Identifying and listing all potential threats and vulnerabilities
• Preparing the threat profile based on the listed vulnerabilities and
risks
• Preparing the test plan
• Automated testing on top of the manual testing
• Preparing the Security tests case document
• Carrying out the Security test cases execution, fixing identified
defects, retesting
• Creating a detailed report on the security testing, including the solved
issues and the risks that still persist
Type here Type here Type here Type here Type here

Type here

What does Web maintenance mean?

Website maintenance is the process of keeping a website up-


to-date and running smoothly as well as performing
optimally. Website maintenance includes tasks like ensuring
all the links on your site are working, regularly updating
content, and fixing any broken links.

Implementation is the process of building the web according


to its design. A web implementor creates hypertext markup
language (HTML), Common Gateway Interface (CGI) programs,
and/or Java scripts and/or applets.
Basic
Webpage
Structure ​

Jerwin Angelo Geronimo


There are 4 Basic Parts of Webpage
Structure:​
1. Header & Menu​
2. Image​

3. Content​

4. Footer​
1. Header & Menu​
• This is the uppermost of the website. This is the first
thing that visitors see when they enter the site and it
contains the logo as well as the website menu. ​
• Website menu – this is the map of the site that helps
visitors find what they are looking for, whether is details
about your product or information about your company.​
2. Image​
 Below the header is form of image, series of image or sometimes video.
It is one of the important part of website that helps to create a good
first impression to it. ​

 This images must convey something important that all about your
company. Whether it features images of your product or service, or
just gives the user a feel of what your brand is all about.​
3. Content​
• Allsite contain content. Content typically means
the words written on your site that explains why
your website is about, what you have to offer
and how site visitors can take advantage of your
offerings.
4. Footer​
• This is the bottom most part of any site. It usually contains site map with
links to the pages available on your site. This can help visitor find all your
offerings, including those that may have not made the cut for your header.

• It also contain some basic contact information that helps to enable the users
to reach out to you. Footer also might include small icons that lead users to
your social media platforms, ultimately bringing about greater brand
awareness and potential business growth.
Example of Webpage Structure : Header​
(source: wixblog)​
​

Emmanual castillo
Saving
organizing
files

El jay sta.ana
11/28/2023 Sample Footer Text 143
11/28/2023 Sample Footer Text 145
Using a
browser to
view a
webpage
Evangerine bautista
WEB BROWSER
Each website can be recognized using a unique
address called "Uniform Resource Locator" or
simply a URL. Once you provide URL of a
specific page in address bar, web browser will
find the corresponding page and displays result to
the user
Open Your Web Page in Your Browser

To view your new page in your browser First,


open up your HTML editor. In the top menu, click
File > Open File. Navigate to the location you
saved your web page. Click on your web page file
and then click Open. You should see your web
page.
View the HTML Page in
Your Browser

•Open the saved


HTML file in your
favorite browser
(double click on the
file, or right-click - and
choose "Open with").
11/28/2023 Sample Footer Text 149
7 Ways to
Improve Your
Website’s
Appearance
NICA JOY NUNEZ
1.Use a clean and modern design: A
clean and modern design can make
your website look more professional
and appealing to visitors. Avoid
cluttered and outdated designs that can
make your website look
unprofessional.
2.Choose a color scheme: A consistent
color scheme can help tie your website
together and create a cohesive look.
Choose colors that complement your brand
and the overall tone of your website.
3.Use high-quality images and graphics:
High-quality images and graphics can make
your website look more visually appealing
and engaging. Make sure to use images and
graphics that are relevant to your content and
fit with the overall look and feel of your
website.
4.Make your website easy to
navigate: A website that is easy to
navigate can improve the user
experience and keep visitors on your
site longer. Use clear and concise
menus and organize your content in
a logical way.
5.Use readable fonts: Use fonts that
are easy to read and not too small
or too fancy. Sans-serif fonts like
Arial or Helvetica are usually
easier to read on digital screens.
6.Optimize for mobile devices: With more and
more people accessing the internet on their
mobile devices, it's important to ensure that your
website is optimized for mobile viewing. Use
responsive design to ensure that your website
looks good on different screen sizes.
7.Test and refine: Continuously
test and refine your website's
appearance to ensure that it is
meeting the needs of your
visitors. Ask for feedback from
your audience and make changes
based on their input.
Gmail Images

Group 6
Elements of a Web Page

Browser Text Image Hyperlink


Window Elements Elements Elements
Elements
Nwanwa
Topic What is Web Page?

Web Element

What is a web element?


An element is a part of a webpage. In XML and
HTML, an element may contain a data item or
a chunk of text or an image, or perhaps
nothing. A typical element includes an opening
tag with some attributes, enclosed text
content, and a closing tag.
Topic What is Web Page?

A Web page is a representation of a document


that is stored at a remote location. A Web
browser, such as Internet Explorer, Mozilla
Firefox, or Google Chrome, is used to display
the information on a Web page online. The
Web browser connects to the Web server,
which hosts the website's contents via HTTP.
Every Web page corresponds to different types
of information that is visually and readable to
the visitor.
Topic 1 Browser Window Elements

STATUS BAR

The status bar is


located at the very
bottom of your
browser window. In
essence, it describes
what you are doing
right now. It mostly
displays the load time
and URL of whatever it
is that your mouse is
hovering on.
Topic 1 Browser Window Elements

ADDRESS BAR

This bar, which is located at the top of your browser


window, serves to display the complete URL or
website address for you.
Topic 1 Browser Window Elements

TITLE BAR

This bar, which may be found at the very top of your browser, is
blue in color on most popular browsers. The Title bar’s function
is to show the title of the webpage you are now browsing on the
internet.
Topic 1 Browser Window Elements

SCROLL BARS

You can “scroll” (move


down or up the web page)
to view information that is
below or above what is
now in the Display
Window by using the
Scroll bars, which are
typically located to the
right of the Display
Window.
Topic 1 Browser Window Elements

TOOLBAR ICONS

The Toolbar is located just beneath the Title Bar. The return
button, home button, refresh button, and other buttons are
located on the toolbar.
Topic 1 Browser Window Elements

DISPLAY
WINDOW

The area where


you are currently
viewing this
page is known
as the Display
window.
Topic 1 Browser Window Elements

MENU BAR

At the very top of the browser window is a menu bar. You can use the
buttons or a variety of options to quickly access files or your favorite
websites, or you can type the URL into the box to go to a certain page.
Topic 2 What is Text Element?

Some of the most common HTML


elements that make up a webpage
are text elements. All the text you
read on this website, for example,
whether it's the titles at the top of
the page, the section headers, or
this very text, is made from HTML
text elements.
Topic 3 What is Image Elements?

The <picture> HTML element contains zero or more <source>


elements and one <img> element to offer alternative versions
of an image for different display/device scenarios.
The browser will consider each child <source> element and
choose the best match among them. If no matches are found
—or the browser doesn't support the <picture> element—the
URL of the <img> element's src attribute is selected. The
selected image is then presented in the space occupied by
the <img> element.
Topic 3 What is Image Elements?

To decide which URL to load, the user agent examines


each <source>'s srcset, media, and type attributes to select a
compatible image that best matches the current layout and
capabilities of the display device.
The <img> element serves two purposes:
1.It describes the size and other attributes of the image
and its presentation.
2.It provides a fallback in case none of the
offered <source> elements are able to provide a usable
image.
Topic 3 What is Image Elements?

Common use cases for <picture>:

• Art direction. Cropping or modifying images for


different media conditions (for example, loading a
simpler version of an image which has too many
details, on smaller displays).
• Offering alternative image formats, for cases where
certain formats are not supported.
• Saving bandwidth and speeding page load
times by loading the most appropriate image for
the viewer's display.
What is Hyperlink Elements?

The capability of linking Web resources is


what makes the Web so fascinating. By
following links, you can be looking up job
opportunities one moment and then be
reading up on the latest mixed drink recipes
the next! Linking between documents is
accomplished with the one simple element
described in this section.
What is Hyperlink Elements?

<a>
Type:

Container

Function:

The <a> element can do one of two things, depending on which attributes you use. Used with
the href attribute, the <a> element sets up a hyperlink from whatever content is found within
the <a> element and the document at the URL specified by href (see Figure
3.13). When you use the <a> element with the name attribute, you set up a named anchor
within a document that can be targeted by other hyperlinks. This helps make navigating a large
document easier because you can set up anchors at the start of major sections and then place
a set of links at the top of the document that points to the anchors at the beginning of each
section.

Figure
3.13
The hyperlinks on Microsoft's home page are set up using the <a> element.
What is Hyperlink Elements?

Attributes:
The <a> element can take a host of attributes, including
• accesskey
• charset
• href
• hreflang
• name
• rel
• rev
• tabindex
• target

You might also like