PRINCIPLES OF GOOD WEBSITE DESIGN

When designing a website there are many key factors that will contribute to
how it is perceived. A well-designed website can help build trust and guide
visitors to take action. Creating a great user experience involves making sure
your website design is optimised for usability (form and aesthetics) and how
easy is it to use (functionality).
Below are some guidelines that will help you when considering your next web
project.

1. WEBSITE PURPOSE
Your website needs to accommodate the needs of the user. Having a simple
clear intention on all pages will help the user interact with what you have to
offer. What is the purpose of your website? Are you imparting practical
information like a ‘How to guide’? Is it an entertainment website like sports
coverage or are you selling a product to the user? There are many different
purposes that websites may have but there are core purposes common to all
websites;
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care

2. SIMPLICITY
Simplicity is the best way to go when considering the user experience and the
usability of your website. Below are ways to achieve simplicity through design.

Colour
Colour has the power to communicate messages and evoke emotional
responses. Finding a colour palette that fits your brand will allow you to
influence your customer’s behaviour towards your brand. Keep the colour
selection limited to less than 5 colours. Complementary colours work very well.
Pleasing colour combinations increase customer engagement and make the user
feel good.
Type
Typography has an important role to play on your website. It commands
attention and works as the visual interpretation of the brand voice. Typefaces
should be legible and only use a maximum of 3 different fonts on the website.
Imagery
Imagery is every visual aspect used within communications. This includes still
photography, illustration, video and all forms of graphics. All imagery should
be expressive and capture the spirit of the company and act as the embodiment
of their brand personality. Most of the initial information we consume on
websites is visual and as a first impression, it is important that high-quality
images are used to form an impression of professionalism and credibility in the
visitors’ minds.

3. NAVIGATION
Navigation is the wayfinding system used on websites where visitors interact
and find what they are looking for. Website navigation is key to retaining
visitors. If the website navigation is confusing visitors will give up and find
what they need elsewhere. Keeping navigation simple, intuitive and consistent
on every page is key.

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a website.
Eye-tracking studies have found that most of what people see is in the top and
left areas of the screen. The F shaped layout mimics our natural pattern of
reading in the West (left to right and top to bottom). An effectively designed
website will work with a reader’s natural pattern of scanning the page.

5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements in order of importance. This is
done either by size, colour, imagery, contrast, typography, whitespace, texture
and style. One of the most important functions of visual hierarchy is to establish
a focal point; this shows visitors where the most important information is.
6. CONTENT

An effective website has both great design and great content. Using compelling
language great content can attract and influence visitors by converting them into
customers.

7. GRID BASED LAYOUT

Grids help to structure your design and keep your content organised. The grid
helps to align elements on the page and keep it clean. The grid-based layout
arranges content into a clean rigid grid structure with columns, sections that line
up and feel balanced and impose order and results in an aesthetically pleasing
website.

8. LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less and they will potentially leave a site
that isn’t loaded within 3 seconds. Optimising image sizes will help load your
site faster.

9. MOBILE FRIENDLY
More people are using their phones or other devices to browse the web. It is
important to consider building your website with a responsive layout where
your website can adjust to different screens.

WEB DESIGN SERVICES

Website Development Planning Process

1. RESEARCH AND GOAL SETTING

As with any project, it is important to do proper research and set goals before
beginning. By setting goals, it will help the website to have a direction and will
also help your business to achieve specific accomplishments. The planning and
goal setting process could take about 1-2 weeks to complete. It is a very
important first step to creating a website that sells. There are a few questions
you should ask yourself during this phase:
What do I hope for my website to accomplish?

Who is the audience I would like to target?

What are the main goals of the website?

By setting goals for your website, you will be helping the site to have a clear
direction and purpose. This is important to the rest of the steps. When setting
your goals, you should think about outlining what you would like the rest of the
steps to look like. Step 1 will guide you through the rest of the process
smoothly.

The research part of this step has a few different purposes. There are so many
examples out there that it might be beneficial for you to look at and use some of
the websites of your competitors. This can help you to determine what you want
and don’t want your website to have. It is also important to do some research on
the target audience you hope to draw in.

Different age groups may be looking for something different when they visit a
website. Understanding what your audience wants is crucial to planning the rest
of your website. It is also important to research keywords you’d like to use with
your website. By developing your website with SEO in mind, you will save
yourself a lot of work in the future.

2. PLANNING THE SITE

Planning the website involves creating a wireframe and sitemap. This is an

important step because it is kind of like the skeleton of your site. This process
can take about 2-6 weeks to complete. The sitemap allows the developer to get
an outline of what the site will look like, what pages there will be and how they
will interact with each other. This not only helps with planning but is also
beneficial to the user experience.

A user should be able to easily navigate a site, and this begins with the
development of the sitemap. Before you begin to plan content, a sitemap lets
you design what the structure will look like. Once the sitemap is completed, the
other part of this step is to create a wireframe or mock-up. These are just visual
representations of what the site will look like. This does not include the layout
details. That comes next.

3. DESIGNING THE LAYOUT

The details of the layout are what will give your website character. This is the
step where you get to be creative with pictures, videos and what kinds of things
the customer will notice when they come to your site. This process can take
about 4-12 weeks from start to finish. The timing depends on experience, time
spent on the project, and how thorough the developer is. During this step, it is
especially important to keep referring back to the target audience you wish to
focus on.

Consider colors, logos, and anything that will encourage your audience to
interact with the site. By considering how you will create the layout of the
website, you are attempting to bring the website to life. It should help the
audience to get a feel for your business or product. Please note this step does not
yet involve written content. That is the next step. The written content is so
important that it needs its own step.

4. WRITING THE CONTENT

This step may be going on simultaneously with the other development planning
steps. The written content of a website is so important to its success. While this
step may be happening during other steps, it is one that is crucial and deserves a
lot of expertise. It could take from 5 to 15 weeks. The written content on a
website is going to help a visitor determine their next steps. It is vital to drawing
customers in and keeping them. There is a lot to consider when working on the
content of the website.

When determining what words to use, it is important that they are not too hard
to understand. A general rule is that you have to assume not everyone is going
to want to read words that are higher vocabulary. A website should have a
vocabulary that the average person can understand.

Again, considering the target audience is extremely important, especially when

it comes to the text being used to give customers information. This can
determine what kinds of words and voice will be used in the writing, which can
create the mood for the content, whether it be good or bad. It also involves
creating catchy titles and headlines to draw people in.

Additionally, it is also a good idea to be well-versed in writing a call-to-action.

This is what you want the user to do after reading the content on the site. The
content should get customers excited about buying a product or service. A
website that has well-written content is going to be much more successful than
ones that do not.

5. CODING THE WEBSITE

Now that all aspects of your website have been created, you are ready to
actually begin creating the website itself. The coding typically begins with the
homepage and gradually branches out to the other pages included in the site.
This would be where the sitemap is followed to ensure everything is coded
correctly. The coding step could take from 6 to 15 weeks, depending on how
much content and how intricate you would like your website to be. It is also
important to set up frameworks and CMS to make sure that everything will fit
onto the server during the installation process. You wouldn’t want to do all that
work only to find out it doesn’t fit.

Once the website is laid out according to the sitemap, it should be tested before
moving any further. If all works well, then the rest of the content should be
added, and formatting should be completed. This phase involves having a deep
understanding of the technology you are using. In fact, if you are looking to do
most of the work yourself, you should at least consider getting a developer to
code for you, so that you can make sure everything works as planned.

During coding, don’t forget to consider factors such as SEO, CMS plugins, and
any additional tools you might be using for analyzing and testing the website in
the future. If you consider these things now, you will save yourself time and
energy later. By keeping SEO in mind, you will get better results, and more
people will be exposed to your page. Anything worth doing is worth doing
right.

6. TESTING AND LAUNCHING

Before the website is launched, it is crucial that it is tested out by real users. All
the links and content should be tested to see if it works. Not only is it important
to test out all the buttons and everything on the site, but it is also important to
test out what users think of it. There is user testing that can be completed to
make sure the website is giving users what they need to be successful on the
test.

Again, there are tools that can be used to determine if anything needs to be
changed. Make sure to check all written content, including spelling and
grammar. If your website has forms, ensure that they are working correctly as
well. These might be important ways the users can get in touch with you or sign
up for alerts and messages. Without these working properly, it can be very
difficult for the user and also will be difficult for you to have a successful
website.

Don’t just check the website once, but check it over multiple times. When you
are confident that everything is in working order, you can go ahead and launch
your website live. When it comes to launching, you are finally ready and can do
this by uploading it to the server. You will need FTP (File Transfer Protocol)
for this process. It is also important to make sure everything is running
smoothly immediately after launching. Testing and launching may take 2-4
weeks to complete.

7. MAINTENANCE

You might think your job is done once the website is launched, but this is not
the case. Since technology and products are changing more rapidly than ever
before, it is important to stay up-to-date with what is happening on the internet.
Maintaining a website is hard work, but the more effort put into its
maintenance, the better. There are a few different pieces to website upkeep.

For one, it should constantly be checked out for errors. When a user encounters
an error, this may be frustrating and may cause them to find what they are
looking for somewhere else. Errors can also completely block them from the
information they need to make a decision on purchasing a product or service.
This is why it is important to not only test your website for user experience
before the launch, but after as well.

User-experience should be tested often, and it should be ongoing. This will

ensure that if something comes up, it can be fixed right away. A website that
has constant broken links or outdated content will not make its users happy. By
having regular maintenance on a website, bugs can be fixed as soon as they are
detected. A problem cannot be fixed if it is not known. An unhappy user means
that you are losing current or potential customers.
Another important aspect of maintaining a website is to ensure that all content is
current. This means that the correct information is on the website such as
contact information, pricing, and customer reviews. By giving bad or outdated
information, a customer will not be able to get in touch with the business owner,
complete a purchase, and it can be frustrating.

While maintaining a website can be important, it might seem like hard work. It
is important to know that there are many tools out there that can be downloaded
right onto the website. Reports can be sent daily or in other time increments to
give you data and information about how the site is performing.

What is a domain name

A domain name is the address people type into a browser in order to reach a site. Much like a
fingerprint, each domain name is unique to a specific website and cannot be shared or
duplicated with other web pages. If you look at the very top of this page, you’ll see that the
domain name of this website is wix.com.

Domains were created as a human-friendly way to access the Internet Protocol

(IP), which represents a website’s online locator. An IP address is a string of
numbers assigned to every computer, consisting of four decimal numbers
ranging from 0 to 255 separated by periods. While these seemingly random
series of numbers are great for computers, it’s much easier for humans to use
words they can remember. And similar to saving a number on your phone,
domain names allow us to save 172.217.3.196 as google.com

All domain name registrations are overseen by the Internet Corporation for
Assigned Names and Numbers (ICANN), which allocates and assigns IP
addresses, runs accreditation systems for domain registrars and keeps a
centralized database of all domain names and their IPs. As we’ll see in more
detail later in this guide, the ICANN also has the authority to approve new
domain extensions (also known as TLDs), manage them and shut them down if
they don’t follow the determined rules.
It’s important to keep in mind that, while domain names are commonly referred
to as URL (Universal Resource Locator) or web address, they’re actually just a
part of it (albeit a crucial one). The basic form of a domain name consists of two
elements: name and extension. In our case, “wix” is the name and “.com” is the
extension. However, if you take a look at your browser’s address bar you’ll
notice there are a lot more parts to it, all of which come together to make up this
page’s web address. Take a look at the image below to see the function of each
part of the URL.

How do domains work

The internet is a massive worldwide network of computers connected to each

other through a global submarine grid of cables. Each of these computers,
regardless of whether they operate as personal devices or servers, is identified
by an IP address that allows them to communicate with each other in order to
send, find and retrieve web data.

As we saw in the previous section, domain names are simply user-friendly

versions of these IP addresses, connected to specific websites. In order for
computers to be able to find the right web pages, however, the seemingly-
random word strings have to be converted back to numbers. This is where the
domain name system comes in.

Also known simply as DNS, the domain name system translates any domain
name entered in a browser into a computer-readable IP. The system is overseen
by ICANN, and is commonly compared to old-school phone books where you
would search for anyone’s name in order to find their number. If you’re too
young to understand that reference, think of it as a smartphone contact list that
contains numbers you’ve never interacted with.

When you enter a domain name into a web browser, a request is sent to DNS
servers who search for the name servers connected to that specific domain and
forward your request to them. These name servers are managed by the web
hosting provider, and after finding the relevant IP, they will send the request to
the web server where the website files are stored. The web server uses the IP to
find all files associated with it and send all the data back to the browser. All of
which happens in under 3 seconds.

The difference between domain and hosting

To create a website you need both a domain name and web hosting. Because of
their codependent nature and the fact that - more often than not - they’re
provided by the same company, there is often a lot of confusion around the
purpose of each of them and how they relate to each other.

The easiest way to understand what is web hosting and how it differs from a
domain name is to imagine your website as an apartment complex, where each
apartment is a different page of your site. For this building to exist, you’ll first
need a piece of land to construct it on. On the internet, the land upon which you
build your website is known as web hosting. All the files and data that make up
your site - think of them as the foundations of the apartment complex - are
stored on web servers that send them out to people who visit your site.

In order for people to be able to visit your site, however, they’ll need to know
where to find it. Like we saw early on in this guide, you could technically just
share your site’s IP with them and call it a day. Then again, we could
technically just share geographic coordinates instead of giving names and
numbers to every street and building. As you might have already guessed,
domain names serve as the address of your metaphorical apartment complex.
If you want to take it one step further and direct visitors to a specific page of
your site, you simply need to add a path after your domain name. Having
something like “/blog” is the online address equivalent to adding an apartment
number to your physical address.

And, of course, the street people take to visit your virtual apartment complex
represents the internet.

Different types of domains

The DNS uses an inverted-tree hierarchical structure to manage its distributed

database system. On this structure, a dot serves as the root domain and sits at
the top of the framework. Below the dot, the domain name space is divided into
different levels depending on their position in reference from the root domain.

This results in different types of domains, all of which serve a different purpose:

 Top-level domains (TLD)

 Second-level domains (SLD)
 Third-level domains

Top-level domains (TLD)

A top-level domain, generally referred to as TLD or domain extension, is the

rightmost segment of a domain name, located after the last dot and serves to
recognize certain characteristics of a website address such as location and
purpose.

There are currently 1,503 TLDs available for registration, the majority of which
have been added in the last decade, distributed across several types of TLDs.
Let’s take a look at the most popular categorizations:

Generic top-level domains (gTLD)

Commonly known simply as gTLDs, generic top-level domains are made of
three or more characters and are open for registration by anyone. gTLDs
account for the vast majority of domain extension options, with more than a
thousand added in recent years through ICANN’s New gTLDs programm.
Available options range from the traditional .org, .com and .net to rising options
such as .icu, .app and .wyz.

Sponsored top-level domains (sTLD)

As the name implies, sponsored top-level domains are those supported and
supervised by private organizations. There is a small limited number of sTLDs
available, and all registrations must be approved by the agencies or businesses
in charge of them and comply with a series of predefined community theme
concepts.

Country Code top-level domains (ccTLD)

There are 312 country code top-level domains established for specific countries
or territories, identifying them with a two-letter string.

While country code top-level domains were originally intended for business and
individuals operating in specific geographical areas, there is also a significant
number of website owners who register ccTLDs for branding purposes or to
take advantage of certain benefits. This is the case with extensions such as .ai
(Anguilla), which is particularly popular within companies in the artificial
intelligence industry, and .gg (Bailiwick of Guernsey), which has seen a
significant popularity rise in the gaming sphere

The most remarkable case, however, is that of Tokelau’s .tk domain extension.
This small New Zealand-owned territory allows individuals and businesses to
register any number of domain names for free, and for years has held the title of
largest ccTLD and second-largest TLD overall. While it looks like China may
finally get ahead of the small oceanic island, according to Verisign's latest
report, as you can see on the graph below .tk still has nearly 10 million
registered domain names more than the next domain extension on the ranking.
Second-level domains (SLDs)

A second-level domain, also known simply as SLD, is the part of a domain

name that comes before the top-level domain. SLDs generally refer to the
custom section of a domain name, meaning the words you come up with to
represent your brand and website with. For example, in “www.wix.com” “wix”
is the second-level domain.

In some cases, SLDs may be considered part of the domain extension, as

registries use them to indicate a specific use of a TLD. This is especially
common on sites using ccTLDs, as second-level domains are used to signal the
type of site within a region. Depending on the domain registries these SLDs
might match gTLDs or use a slight variation or adaptation of them. For
example, commercial websites in Spain may be registered with the domain
extension .com.es whereas in the UK they appear as .co.uk. Likewise, in these
same countries academic institutions may be registered under .edu.es and .ac.uk
respectively.
Third-level domains

Third-level domains appear immediately to the left of a second-level domain. In

the majority of cases, where domains have only three levels, they’re commonly
known as subdomains. A subdomain is a prefix added to a domain name in
order to create stand-alone sites. This helps to manage extensive areas that
require their own hierarchy, such as an online store or a blog.

In certain cases, third-level domains are offered as a free domain name that
allows you to publish a site at zero cost. For example, when you build a Wix
website, the format of your free site’s URL will include your user name as a
subdomain, resulting in username.wixsite.com/siteaddress. After purchasing
your own domain name, you’ll be able to create your own subdomains and
connect them to the relevant areas of your site.

It’s important to keep in mind that, while third-level domains are usually the
same as subdomains, this might not always be the case. As we saw with second-
level domains, certain TLDs can have multiple nodes and result in longer
domain names with a higher number of levels. For example, you might
encounter four-level domains such as news.bbc.co.uk, or even five-level
domains like www.village.fairport.ny.us. While there is virtually no limitation
as to how many levels a domain can have, a single domain name with more than
four levels is considered quite a rare sight.

What is web hosting

Web hosting is a service that stores your website or web application and makes
it easily accessible across different devices such as desktop, mobile, and tablets.
Any web application or website is typically made of many files, such as images,
videos, text, and code, that you need to store on special computers called
servers. The web hosting service provider maintains, configures, and runs
physical servers that you can rent for your files. Web site and web application
hosting services also provide additional support, such as security, website
backup, and website performance, which free up your time so that you can
focus on the core functions of your website.
Why is web hosting important
Hosting your business website on an internal server can be n an internal server
can be time-consuming and expensive. Web hosting providers offer the
following benefits.

Performance

A web hosting company that manages hardware resources for multiple websites
has greater purchasing power. It invests in cutting-edge technology so that you
get high-performing web servers with processing power, internal memory, and
other computing resources. This improves website performance, and your
visitors can load pages quickly.

Reliability

Web hosting service providers take away the stress of ongoing server
maintenance. They perform regular system upgrades to maintain high security
standards. By doing so, they free up your IT resources so that you can focus on
application delivery instead of server management.

Technical support

Most web hosting services offer comprehensive support for troubleshooting

performance issues. They also streamline website monitoring and analytics, data
backup and recovery, and other similar features that make your website run
more smoothly.

Security and compliance

Web hosting services use an end-to-end approach to secure infrastructure,

including physical, operational, and software measures that meet all compliance
requirements.

What is the difference between web hosting and a domain name

Web hosting gives your website or web application a server or a machine on the
internet. But a domain name gives your applications an address so that your
users can find you.

Domain name
On the internet, every machine has a unique number, called an IP address. Users use this IP address to find the
machine and the website or resources on that machine. IP addresses can be hard
to remember. That is why domain name registries use a Domain Name System
(DNS) to map IP addresses to easy-to-remember website names. These
registries map the website names, which are called domain names, to the web
hosting servers’ IP addresses.

To visit any website, you enter its domain name into the browser. For example,
the domain name for the AWS website is aws.amazon.com.

Domain name registration

To make your site accessible on the World Wide Web, you require both a web
hosting service account and a registered domain name. You can choose the
name, but you need to pay a small fee to register it with the domain name
registry. You can then link your web hosting account to your registered domain
name as your official website address.

Responsive Web Design

Responsive Web Design comprises two words i.e., responsive and web
design. Responsive means to respond and web design means to design website.
Therefore, responsive web design generally means website that respond to or
resize or adjust itself depending upon screen size it is being seen through. It
automatically adjusts to fit user’s screen whether it’s desktop, laptop, mobile,
tablet, etc. It only uses one layout for web page and it can be done either using
CSS and HTML or CSS3 and HTML5.
When to use it?
Responsive web design is a way by which website that contain flexible layout
that automatically scale its content and elements according to screen size on
which it is viewed. It simply resizes, shrink, enlarge, hide web pages so that it
can look better on all type of devices and does not have to zoom and pan to see
any content on website. But still some people get confused in deciding when to
use responsive web design. Below given are some points to clear this
confusion:
 Responsive web design is best for small to large scale business or company
that want to grow their business. For growth and success, they need to
update their existing website and get it converted into responsive website
that not only help one to rank higher in search engine, but also offer better
user experience to visitors.
 Responsive web design is best for new business that wants to build a new
brand site and get ahead to other competitors. They need to create a
responsive web design because of responsive design reach more audience,
stay in touch with customers through mobile, increase conversions, etc.
 Responsive web design is best for service-based industries because it
includes creative UX and UI design and is made up of images and text.
Images and graphics are also clear and crisp when viewed on mobile
device.
 Responsive web design is also best for companies that have less or tight
budget and limited resources because responsive design is budget friendly.
One has to invest their money and effort only in one rather because of its
flexibility.
How to check whether the Website is Responsive?
One should know that not all Websites are responsive. Non-responsive
websites display perfectly on desktop, laptop but not on mobile or tablets.
Below are some steps given that one can follow to determine whether website
is responsive or not.

Step 1: Go to Google Chrome and Open it.

Step 2: Go to website that you want to check for responsive design.
Step 3: Press Ctrl + Shift + I. This will open Chrome DevTools. These are
web developer and debugging tools built into browser and help one to edit
page and identify problem easily.
Step 4: Press Ctrl + Shift + M. This will toggle device toolbar i.e.; toolbar will
appear at top of page and enable one to see appearance of website on mobile
device.
Step 5: View website from mobile, tablet perspective.
Conclusion: If the website view fits according to screen size, everything looks
clear and crisp, images and text are clear, etc., then one can say that website is
responsive. All images, fonts, and HTML elements will be scaled properly,
and fit whatever screen size is.

Static vs Dynamic Website

What is Website?
Website is the collection of web pages, different multimedia content such as
text, images, and videos which can be accessed by the URL which you can see
in the address bar of the browser. For
example: https://www.geeksforgeeks.org
How to access Websites?
When we type a certain URL in a browser search bar, the browser requests the
page from the Web server and the Web server returns the required web page
and its content to the browser. Now, it differs how the server returns the
information required in the case of static and dynamic websites.
Types of Website:
 Static Website
 Dynamic Website
Static Website: In Static Websites, Web pages are returned by the server
which are prebuilt source code files built using simple languages such as
HTML, CSS, or JavaScript. There is no processing of content on the server
(according to the user) in Static Websites. Web pages are returned by the
server with no change therefore, static Websites are fast. There is no
interaction with databases. Also, they are less costly as the host does not need
to support server-side processing with different languages.
 Architecture of Static Website

Note: Static does not mean that it will not respond to user actions, These
Websites are called static because these cannot be manipulated on the server or
interact with databases (which is the case in Dynamic Websites).
Dynamic Website: In Dynamic Websites, Web pages are returned by the
server which are processed during runtime means they are not prebuilt web
pages but they are built during runtime according to the user’s demand with
the help of server-side scripting languages such as PHP, Node.js, ASP.NET
and many more supported by the server. So, they are slower than static
websites but updates and interaction with databases are possible.
Dynamic Websites are used over Static Websites as updates can be done very
easily as compared to static websites (Where altering in every page is
required) but in Dynamic Websites, it is possible to do a common change once
and it will reflect in all the web pages.
Architecture of Dynamic Website
 Difference Between Static and Dynamic Websites :
Static Website Dynamic Website

Content of Web pages can not be Content of Web pages can be

change at runtime. changed.

Interaction with database is

No interaction with database possible. possible

It is faster to load as compared to

dynamic website. It is slower then static website.

Cheaper Development costs. More Development costs.

Feature of Content Management

No feature of Content Management. System.

HTML, CSS, Javascript is used for Server side languages such as PHP,
developing the website. Node.js are used.

Same content is delivered everytime Content may change everytime the

the page is loaded. page is loaded.

 Teacher Hugo Delgado

 2022/08/22 05:56:35
 Learn HTML
 49 Votes
 5,943 Visited

What are Web standards

 They are Web languages, protocols and inter-operative and international
technologies created with the purpose of guiding the Web towards its
maximum potential through the development of standardized protocols and
guidelines.

In order for the Web to reach its maximum potential, the most prominent
Web technologies must be compatible with each other and allow any
hardware and software to access the Web to work together.

W3C refers to this objective as "Web interoperability"

Why do I need Web standards

 Have you ever visited a Website and could not see the contents correctly?
 Do you use an Internet browser such as Mozilla Firefox, Opera or Safari
different from the majority one (Internet Explorer) and you are tired of seeing
that the elements of the website do not look or work properly?
 Do you have vision problems and can not change the font size because the
pages are broken or look bad?
Well, if this has ever happened to you and it was quite annoying, think now that
you are a visitor to your own website ...

The most logical thing is that you have just lost a potential client without even
having the possibility of offering your services or articles and that you may not
visit your website again.

What is a Standard
A standard is a set of formerly planned rules that describe the requirements that
must be met by a product, process or service, with the aim of establishing a base
mechanism to allow different hardware or software elements that use it to be
compatible with each other.

W3C, an independent and neutral organization, develops Web-related standards

also known as Recommendations, which serve as a reference to build an
accessible, interoperable and efficient Web, in which more robust applications
can be developed.

What is W3C
The World Wide Web Consortium (W3C) is an international
community where Member organizations, full-time staff and the general
public work together to develop Web standards.
HTML Introduction
HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>