PROGRAM TITLE: DATABASE

UNIT TITLE: Unit 1: Programming

ASSIGNMENT NUMBER: 1

ASSIGNMENT NAME: WEB

SUBMISSION DATE: 23/3/2022

DATE RECEIVED: 23/3/2022

TUTORIAL LECTURER: NGUYEN DUC GIANG

WORD COUNT:

STUDENT NAME: Nguyễn Lê Lợi

STUDENT ID: BKC12205

MOBILE NUMBER: 0363074734

Summative Feedback:

Internal verification:
Higher Nationals                                                              

Assignment Brief – BTEC (RQF)

Higher National Diploma in Computing

Student Name/ID Number

Unit Number and Title 10: Website Design & Development

Academic Year 2020 - 2021

Unit Tutor Nguyen Ngoc Tan

Assignment Title BKC Antiques and Auctions

Issue Date

Submission Date

IV Name & Date

Submission Format
The submission is in the form of two documents/files:

1. A technical information report for the IT administrator

2. A 15-20 slide presentation to be presented to the owners of BKC with accompanying notes.

3. A design document for the website

4. Evidence of a multipage website for BKC

5. Documentary/visual supporting evidence for the website to include a test plan and critical evaluations
of the process

Unit Learning Outcomes

LO1 Explain server technologies and management services associated with hosting and

managing websites.
LO2 Categorize website technologies, tools and software used to develop websites.

LO3 Utilize website technologies, tools, and techniques with good design principles to create a
multipage website.

LO4 Create and use a Test Plan to review the performance and design of a multipage

website.

Assignment Brief and Guidance

Scenario and activity

You work for a creative web solutions and marketing company as a designer and content developer. A
client ‘BKC Antiques and Auctions’ has asked if you could provide a web-based solution to support the
digital marketing and selling of their antique and auction items.

There is some resistance by the owners who do not see the benefit of having a website or online
provision as the client is a very traditional ‘brick’ only based company.

Lack of understanding about the costs, mechanics, and benefits of ecommerce, has held them back.
However, two of their competitors have started selling antiques online and are getting much wider
interest internationally, a market that BKC need to embrace if they are going to grow their customer
base over the next two years.

You will be expected to work alongside their newly appointed IT administrator who will be taking over
after the project once a solution has been implemented.

As the IT administrator has a limited knowledge regarding websites, your first task is to provide an
understanding about server technologies, hosting, performance, user experience and requirements in
terms of hardware and software.

LO1 and LO2

Create a technical information report with sections addressing the following key areas for

the IT administrator:

● DNS – purpose and types, including explanations on how domain names are organized

and managed

● Communication protocols, the purpose and relationship between server hardware,

operating systems and web server software with regards to designing, publishing and
accessing a website

● Front-end and back-end website technologies, review the capabilities and

responsibilities of the technologies. Ensure that these are explained to in your report to

the administrator in terms of how these relate to the presentation and application layers.

● Discuss the differences between online website creation tools and custom-built sites

with regards to design flexibility, performance, functionality, User Experience (UX) and

User Interface (UI)

As you will need to also create more awareness amongst the owners, who are still skeptical.

about the costs and projected benefits, you have decided to put together a presentation.

that looks at the options available in terms of user experience, search engine types and the

tools and techniques that can be used when designing a custom-built website.

Design a presentation 15-20 slides with accompanying notes that will support the next part of the
project involving the website design for BKC Antiques. Even though a visual presentation is the best
format to aide understanding, you have also decided to include extensive accompanying notes that
evaluate the concepts introduced.

The presentation should address the impact of common web development technologies and
frameworks with regards to website design, functionality, and management. The influence of search
engines on website performance; provide evidence-based support for improving a site’s index value and
rank through search engine optimization.

You will need to ensure that the owners know what is meant by the key terms and provide examples
linked to the antiques business and/or auction arena.

You want the owners to sign off the first stage as quickly as possible so that you can progress onto the
design. Therefore, ensure that you have fully evaluated a range of tools and techniques that can be used
to design and develop a custom-built website for BKC.

LO3 and LO4

The owners, following your presentation and technical information report are fully onboard with you
developing their website. They would like a design that captures their current stock and new arrivals.
They would like information on their website about events such as auctions and themed days at their
barn warehouse in Suffolk looking at different types of antiques, focusing on different periods, different
types e.g., ‘furniture’ or ‘paintings’. Feature pages of special items for sales and online purchasing has
also been discussed.

The information provided by BKC should support you in creating a design document and from that a
branded, multipage website supported with realistic content.

The design document should showcase a multipage website, supported with medium fidelity wireframes
(giving details about the layout and how things will work/function) and a full set of client and user
requirements. Once the design document is complete with appropriate principles, standards, and
guidelines you will then move onto physically producing a branded, multipage website supported with
realistic content for BKC.

For the benefit of the owners, you will also need to include supporting documentation justifying what
you have done, why and what testing that has taken place.

Provide written and /or visual evidence of the following:

● A critical evaluation of the design and development process for the website against the

design document analyzing any technical challenges. At the very least, the evaluation

should compare the multipage website that you have created to the original design document.

● A suitable test plan that identifies key performance areas. Use this to review the

functionality and performance of BKCs website.

● Provide an evaluation of the Quality Assurance (QA) process and review how this was

implemented during the design and development stages.

For the IT administrator you have agreed to provide a critical evaluation of the test plan

results including a review of the overall success of the multipage website. This evaluation

can be used to identify areas of success, but also provide justified recommendations for

areas that require improvement in the future, if the business wishes to expand or embrace e-commerce
further.

Table of contents

LO1 Explains server technologies and management services involved in hosting and managing
web pages.
A.DNS

B. Communication protocols, purposes, and relationships between the server hardware, operating
system, and web server software involved in designing, publishing, and accessing a website

LO2 Classification of website technologies, tools and software used to develop websites.

A. Front-end and back-end website technology, consider the capabilities and responsibilities of
the technologies.

B. Discuss the differences between online website creation tools and custom created websites
with regards to design flexibility, performance, functionality, User Experience (UX) and
Interface user interface (UI)

LO3 Use website technologies, tools and techniques with good design principles to create a
multi-page website.

LO4 Create and use Test Plans to review the performance and design of multiple websites.

LO1 Explains server technologies and management services involved in hosting and managing
web pages.
A.DNS
 DNS
 Definition of DNS
• DNS (Domain Name System - domain name resolution system) is a system that helps people
and computers communicate more easily. Humans use names, computers use numbers, DNS is a
system that translates hostnames (domain names) into numbers that computers can understand.
It's like the Contacts app on your phone!
• Basically, DNS is a database system that translates website names into IP addresses. The
information of each domain name corresponding to which IP address is recorded in the
"directory library", and this library is stored on domain name servers.
 Functions of DNS
The domain name system is like a phone book. That is, instead of having to remember dozens of
phone numbers with a bunch of numbers, you just need to remember the name of the owner of
the phone number. In that case, the phone number will correspond to the IP address of the
Website, and the owner's name is the domain name of that website.
For example, when you type “www.google.com” into your browser, the DNS server will get the
address of the Google server as “74.125.236.37”. You will then see the Google home page load
the page on the browser you are using. That's the DNS resolution process. In addition, each DNS
also has the function of remembering the domain names that it has resolved and in the next visit,
it will prioritize use. That's why you use many network services such as information research,
watching movies, playing entertainment games, etc. faster and easier.
 How DNS works
DNS works step by step according to its structure. The first step is a query for information called
a “DNS query”.
Back to the example of searching the website www.google.com in the web browser!
→ First, the DNS server will find the resolution information in the hosts file – the text file in the
operating system, responsible for converting the hostname to IP.
• If the information is not found, it will return to the cache – temporary memory of hardware or
software. The most common places to store this information are the browser cache and the ISP
(Internet Service Providers) cache.
• If you do not receive the information, you will see an error code appear.
 Types of DNS Servers and Roles
 Root Name Servers
Also commonly referred to as Name Server. This is the most important server in the DNS
hierarchy. You can also understand that, Root Name Server is a library to guide your search.
Following the actual process, after receiving a request from the DNS Recursive Resolver, the
Root Name Server will respond that it should look in specific top-level domain name servers
( TLD Name Servers ).
 DNS Recursor
As mentioned above, this "hardware" acts as a diligent worker, taking on the task of retrieving
and returning information to the browser to find the right information they need. In other words,
DNS Recursor is responsible for communicating with other servers to respond to the user's
browser. Of course, in the process of getting information, sometimes it will also need the help of
Root DNS Server.
 TLD Nameserver

When you want to access Google or Facebook, usually, your extension will be “.com” right? So I
want you to know that it is one of the Top-level Domains. And the Server for this type of Top-
level domain is called TLD Nameserver. This is the manager of the entire information system of
a common domain name extension.
In sequence, the TLD Name Server responds from the DNS Resolver, then presents it to an
Authoritative DNS Server – or the official repository of that domain's data source
 .Authoritative Nameserver
When the DNS Resolver finds the Authoritative Nameserver, that's when the domain name
resolution takes place.
The Authoritative Name Server, on the other hand, contains information that indicates what
address the domain name is associated with. It will provide the Recursive Resolver with the
necessary IP address found in its records directory.
 How to change DNS information of a domain name?
Changing DNS information in Hostinger's control panel is very simple. You just need to log in to
the control panel of your Hostinger account and access the DNS Zone Editor section.
In the DNS Zone Editor, you will see different types of DNS records (DNS records), which
you can edit, add, or delete.

B. Communication protocols, purposes, and relationships between the server hardware, operating
system, and web server software involved in designing, publishing, and accessing a website

 Today's popular network protocols

 Internet Protocol Suite
The Internet Protocol Suite is a collection of protocols that implement the protocol stack on
which the Internet runs. The Internet Protocol Suite is sometimes referred to as the TCP/IP
protocol suite. TCP and IP are important protocols in the Internet Protocol Suite -
Transmission Control Protocol (TCP) and Internet Protocol (IP). The Internet Protocol Suite
is similar to the OSI model, but with some differences. Also, not all layers correspond well.
 Protocol Stack

The Protocol Stack is a complete set of protocol layers that work together to provide
networking capabilities.
 Transmission Control Protocol ( TPC)

TPC
Transmission Control Protocol (TCP) is the core protocol of the Internet Protocol Suite. The
Transmission Control Protocol originates from a network implementation that complements the
Internet Protocol. Therefore, the Internet Protocol Suite is often referred to as TCP/IP. TCP
provides a method of reliably delivering an octet stream (8-bit data block) over an IP network.
The main feature of TCP is the ability to issue commands and check for errors. All major
Internet applications such as the World Wide Web, email, and file transfers rely on TCP.
 Internet Protocol(IP)

Internet Protocol is the main protocol in the Internet protocol suite for forwarding data over a
network. The routing function of Internet Protocol essentially helps establish the Internet.
Previously, this protocol was the connectionless datagram service in the original Transmission
Control Program (TCP). Therefore, the Internet protocol suite is also known as TCP/IP.
 Hypertext Transfer Protocol (HTTP)

HTTP is the data communication platform for the World Wide Web. Hypertext is structured text that
uses hyperlinks between nodes containing the text. HTTP is an application protocol for distributed and
hybrid hypermedia information systems.

HTTP's default port is 80 and 443. Both of these ports are secured.

 File Transfer Protocol (FTP)

FTP is the most common protocol used for file transfers on the Internet and in private networks.

FTP's default port is 20/21.

 Secured Shell (SSH)

SSH is the primary method used to securely manage network devices at the command level. SSH is often
used as a replacement for Telnet, because the protocol does not support secure connections.

SSH's default port is 22.

  Telnet

Telnet is the primary method used to manage network devices at the command level. Unlike
SSH, Telnet does not provide a secure connection, but only provides a basic unsecured
connection.

Telnet's default port is 23.

 Simple Mail Transfer Protocol (SMTP)

SMTP is used with two main functions: Transfer email from source mail server to destination
mail server and transfer email from end user to mail system.
 The default SMTP port is 25 and the secured SMTP port (SMTPS) is 465 (Non-Standard).

 Domain Name System (DNS)

The Domain Name System (DNS) is used to convert domain names to IP addresses. The DNS
hierarchy consists of a root server, a TLD, and an authoritative server.

The default DNS port is 53.

  Post Office Protocol (POP3)

Post Office Protocol version 3 is one of the two main protocols used to retrieve mail from the
Internet. POP 3 is very simple because this protocol allows the client to get the complete content
from the server's mailbox and delete the content from that server.

POP3's default port is 110 and the secured port is 995.

 Internet Message Access Protocol (IMAP)

IMAP version 3 is another major protocol used to get mail from servers. IMAP does not remove
content from the server's mailbox.

The default IMAP port is 143 and the secured port is 993.
 Simple Netword Management Protocol (SNMP)

Simple Network Management Protocol is used for network management. SNMP is capable of
monitoring, configuring and controlling network devices. SNMP traps can also be configured on
network devices, to notify the central server when specific actions occur.
The default port of SNMP is 161/162.

 Hypertext Transfer Protocol over SSL/TLS (HTTPS)

HTTPS is used with HTTP to provide similar services, but with a secure connection provided by
SSL or TLS.The default port of HTTPS is 443.
  hardware
Server hardware is the device hardware, the components that make up a complete
device. With PC, devices such as mouse, keyboard, monitor, hard drive, DVD drive...
are hardware devices.
 Software

Web server software is a subcategory of application server software. Web server

software that provides users with static web content – such as HTML pages, files,
images, videos – after receiving queries over the hypertext transfer protocol. (HTTP)
version of the web browser

 operating system

An operating system (OS) is system software that manages computer hardware,

software, and provides general services to computer programs.

For Hardware functions such as input, output, and memory allocation, the operating
system plays an important role between programs and the computer hardware,
although application code is often executed directly by the hardware. hardware and
normally executes system commands to Operating System Functions or is interrupted
by the operating system. Operating systems are found on many computing devices –
from mobile phones and video game consoles to web servers and supercomputers,
providing an environment that allows users to develop and execute show off their
applications easily.

HARDWARE SOFTWARE

Hardware is the physical parts that help the computer work Software is a set of instructions (code) that tells the
with data processing. computer exactly what to do.

It is produced. It is developed and designed.

Hardware cannot perform any task without software. Software cannot be executed without hardware.

Since hardware is a physical electronic device, we can see We can see and also use the software but cannot actually
and touch the hardware. touch them.

It has four main types: input devices, output devices, It is mainly divided into system software, programming
storage devices, and internal components. software and application software.

Hardware is not affected by computer viruses. The software is affected by computer viruses.

It cannot be transferred from one place to another over the The software can be transmitted over an Internet
Internet. connection easily.

If hardware is damaged, it usually has to be replaced with a If the software is corrupted, a backup will help to
new one. reinstall it quickly.

LO2 Classification of website technologies, tools and software used to develop websites.

A. Front-end and back-end website technology, consider the capabilities and responsibilities of
the technologies.

 What is frontend?

The front-end part of a website is the part that interacts with the user. Everything you see when
you navigate the Internet, from fonts and colors to drop-down menus and sliders, is a
combination of HTML, CSS, and JavaScript controlled by the computer browser. your count.

 Skills and tools

Front-end developers are responsible for the look and feel of a website and the architecture of the
user experience. To accomplish those goals, front-end developers must master three main
languages: HTML, CSS, and the JavaScript programming language.

In addition to being fluent in those languages, front-end developers need to be familiar with
frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, to ensure that
content always looks good on all different devices. , and libraries like jQuery and LESS,
encapsulate code into a more useful and time-saving form.

A lot of front-end developer jobs also require experience with Ajax, a widely used technique that
uses JavaScript to allow pages to load automatically by loading data from the server. background
part.

Using these tools, front-end developers work closely with designers or UX analysts to turn
mockups, or wireframes, from development to actual product.
Good front-end developers can also pinpoint specific issues in the user experience, providing
recommendations and systematized solutions to influence that design. Crucially, they have the
ability to work with other groups in the company to understand their specific goals, needs, and
opportunities, and then follow through on those directions.

This job involves a lot of responsibility, but it's well worth it. “I am a technical person, but still a
visual person, and can manipulate what we see and interact with digital platforms through
markup and code spontaneously. course,” said Mikey Ilagan, a front-end developer with eight
years of experience. “Because of that, I would love to have the ability to make an impact on the
user interface, the aspects of an app or website that users interact with and see.”

Generally, a front-end developer is responsible for the interior design of a house that has been
built by a back-end developer. The taste and decoration style is decided by the host. As Greg
Matranga, Product Marketing Manager at Apptix, says of both the front-end and back-end
developer teams he oversees, “The front-end developers are sometimes more excited than the
front-end developers. about what they do because they can really use their creativity.”

 What is backend?

That's the back end's job. The back end of a website includes a server, an application, and a
database. A back-end developer builds and maintains the technology that, the power of those
components, enables the user interface part of a website to live on.

 What are backend skills and tools?

To make the server, application, and database interoperable, back-end developers use server-side
languages such as PHP, Ruby, Python, Java, and .Net to build an application, and tools like
MySQL, Oracle, and SQL Server to find, store, or change data and serve it back to the user in the
front-end. Back-end developer jobs also often require experience with PHP frameworks such as
Zend, Symfony, and CakePHP; experience with version management software such as SVN,
CVS, or Git; and experience with Linux in system development and deployment.

Backend developers use these tools to create or contribute to web applications with clean,
portable, and well-documented code. But before writing code, they need to work with business
stakeholders to understand specific needs, then translate into technical requirements and come up
with the most effective solutions for technology architecture.
B. Discuss the differences between online website creation tools and custom created websites
with regards to design flexibility, performance, functionality, User Experience (UX) and
Interface user interface (UI)

 Free Websites

1. Free web interface can be duplicated because businesses design the same website idea on the
same page template

2. Website customization is limited to save the cost of website creation.

3. May not work 100% on all devices

4. Some templates are not built to be search engine friendly.

5. Templates run on a structured system that is difficult to customize and add technology

6. Using ready-made templates is great for low budgets.

7. Shorter sample web design time.

8. Template websites are unlikely to have as good of a support system as a tailored websit

 Custom designed website

1. The website will have a completely unique design that will incorporate the company's
branding and will be based on the needs of your business.

2. A custom website that can be adapted to your company's needs.

3. The site is tested to be compatible with all browsers.

4. Sites will be built to match search engines.

5. A custom-designed website will cost more than a pre-made template website.

6. Takes more time than just using an existing design just adding information

7. The website will be updated regularly to keep up with the strategy and goals of the business

8. Your website builder is here to help if you need i

 What is UX design and UI design? Why optimizing UI / UX design is extremely

important for websites

UI/UX

 What is UI? What is UI Design?

 UI (user interface) – The user interface is the place where the user and the electronic
device interact: the screens the user interacts with on the app, the buttons they click when
using the website…
 UI design (User Interface Design) is the process by which designers create the entire user
interface: text, buttons, icons, colors, spacing, images, application screens, etc. Usage
 patterns of common machines such as POS machines, vending machines, coffee
machines, washing machines... also called UI

Pinterest

 What is UX? What is UX Design?

 UX (user experience) – User experience is the experience that affects the emotions and
perceptions of the user from the beginning to the end of using a product or service.
 UX design is design that feels when the user experiences a product.Use technology to
improve interaction and make it more human-friendly (users easily know exactly what
they are doing, how to find products, information, where they are, etc.) what stage of the
registration process…).
 The quality of interaction between users and products and services is the most important
purpose of UX designers

 How are UI/UX different and affect each other

 Difference between UI design and UX design

 UI design is the design of the interface and how the product works
UX design is design that feels when experiencing the product
 UX design is usually finalized first in the design process, followed by UI
 UX designers research and create customer journeys

UI designer focuses on designing the details to realize the customer journey

 UX design can be applied to any type of product, service or experience

UI design is only used to design interfaces for electronic products

 Products that are beautiful but difficult to use are products with good UI, bad UX

and conversely, products that are easy to use but not beautiful are products with good UX,
bad UI
LO3 Use website technologies, tools and techniques with good design principles to create a
multi-page website.

What is Visual Studio?

As the offspring of Microsoft, Visual Studio is known as a famous website programming

software, one of a kind and so far no tool can replace them. Visual Studio is programmed in VB
+ and C# - which are programming languages that allow users to build websites easily and
quickly.

Why use Visual Studio?

For those who are new to programming and website design, in addition to wondering what
Visual Studio is, they are also very interested in why they should use them and not other tools for
programming such as DevC, Code. Block, CFree.

The reason Visual Studio is so popular among programmers is because of the following
outstanding advantages:

• Visual Studio supports programming on many different language platforms from C/C++, C#, to
F#, Visual Basic, HTML, CSS, JavaScript. Even VS 2015 version supports code on Python
language.

• Visual Studio helps to support efficient and easy debugging by running each statement and
monitoring the change of the program's state through the value of variables, the behavior of the
code.

• Visual Studio owns a friendly interface, easy to use for beginners.

• Visual Studio allows building professional applications through drag and drop, supporting
beginners to access faster.

• Visual Studio for integrating many other applications such as applications for management and
quick coding for languages belonging to .Net- Resharper, or for easy installation of libraries
thanks to Nuget.

• In addition, this tool also supports developing desktop applications on MFC, Windows Form or
Universal App. Simultaneously develop mobile applications on Windows Phone 8/8.1, Windows
10, iOS and even Android Xamarin. Visual Studio also supports website development on the
Web platform, ASP.NET MVC and of course, Microsoft Office development.
• With all these distinct advantages, Visual Studio is the preferred choice of many programmers
around the world.

Some important features of Visual Studio Code

After learning what Visual Studio is, let's find out with BizFly what special features this tool has!

Cross-platform support

If with other programming tools that are usually only used for one of the following three
operating systems: Windows, Linux, Mac Systems, on the contrary, Visual Studio allows you to
program easily on all three platforms without not encounter any obstacles.

Supports multiple programming languages

Also, Visual Studio scores points in the eyes of users thanks to the advantage of supporting many
programming languages at the same time from C/C++, C# to F#, Visual Basic, HTML, CSS,
JavaScript… Therefore, it can detect and quickly issue a notification as soon as the program has
an error.

Code editor

Like any other IDE, Visual Studio also provides a code editor that supports code completion and
syntax clarification using IntelliSense.This tool is not only used for functions, variables and
methods, but also applies for language constructs that include queries or control loops.

In addition, Visual Studio's code editors also support setting bookmarks in the code to help users
easily perform code block navigation, incremental search, etc.

In particular, Visual Studio also has a background compilation function that provides feedback
on syntax or compilation errors and is marked with red waves.

Design

• Windows Forms Designer: This Visual Studio design is used with the goal of building a GUI
for Windows Forms, to build controls within or lock them to the side of the form. The data
presentation control can be connected to database sources or queries…

• WPF Designer: Just like on the design feature WDP Designer allows users to drag and drop
metaphors. This function is used for human-computer interaction targeting Windows
Presentation Foundation.

• Web designer/development: Visual Studio also provides a web designer and editor that allows
building web pages via drag and drop. This makes it easier for users to build websites. Especially
for businesses that need to build simple websites such as: tourism, education website design ...
can use this method and still allow you to own a website with complete functions.

Provide a repository of extensions

Want to use a programming language that Visual Studio doesn't have available? It's very simple,
you just need to download the extension store of this tool and you're done. The special thing is
that downloading these functions does not affect the performance of Visual Studio because they
work completely independently of each other.

Effective repository security

The need for safe storage in programming is great. With Visual Studio, users can rest assured
about this issue. Because this tool easily connects to Git or any existing repositories and ensures
high security for them.

Store data in a hierarchical form

In Visual Studio most of the files that store the code are placed in equivalent folders. In addition,
for especially important files, Visual Studio also provides hierarchical folders to help users easily
store and search data.

Git support

Using Visual Studio, users can drag or copy code directly from GitHub. These codes can then be
changed and saved on the software.

Web development programming

So when a web designer and programmer is given the following goal: “create a web page with
this title, this font, these colors, the images, and a cartoon unicorn passing by. across the screen
when the user clicks this button”, the job of the web designer and programmer is to take that big
idea and break it down into small parts, and then translate these parts into instructions that the
computer can understandable – including putting all these instructions in the correct order or
syntax.

Each page on the web that you visit is built with a series of separate, page-by-page instructions.
Your browser (Chrome, Firefox, Safari, etc.) is a big actor in translating code into something we
can see on the screen and we can even interact with. It can be easy to forget that code without a
browser is just a text file – and when you put that text file in the browser, the magic happens.
When you open a web page, your browser fetches HTML and other related programming
languages and interprets it.

HTML and CSS are not really technical programming languages; they are just page structure and
style information. But before moving on to JavaScript and other real languages, you need to
know the basics of HTML and CSS how they work, as they are on the front end of every website
and application.

In the early 1990s, HTML was the only language available on the web. Web developers had to
struggle with programming static, page-by-page websites. A lot has changed since then: There
are now many computer programming languages available. In this post, I will talk about HTML,
CSS, and one of the most popular programming languages: JavaScript.HTML, CSS, and
JavaScript: How It Works

Overview:

• HTML provides the basic structure of web pages, enhanced and modified by other technologies
such as CSS and JavaScript.

• CSS is used to control presentation, formatting, and layout.

• JavaScript is used to control the behavior of various elements.

 HTML

HTML is at the core of every website, regardless of the complexity of a website or the amount of
technology involved. It's an essential skill for any professional web developer. It's a starting
point for anyone learning how to create content for the web. And fortunately for us, it's easy to
learn.

 HOW HTML WORKS?

HTML stands for HyperText Markup Language- Text formatting language. “Markup Language”
means that, instead of using a programming language to perform functions, HTML uses tags to
identify different types of content and the purpose for which the web page is served.

Markup languages work the same way you did when you labeled those content types, except they
use code to do that – specifically, they use HTML tags, also known as HTML tags. called
"element". These tags have pretty intuitive names: header tags, paragraph tags, image tags, and
so on.

Each web page is made up of a series of these HTML tags that represent each type of content on
the page. Each type of content on the page is "wrapped", that is, surrounded by HTML tags.

For example, the words you are reading right now are part of a paragraph. If I had been coding
this site from scratch (instead of using the WYSIWG editor in HubSpot's COS), I would have
started this paragraph with the opening tag : <p>. The “tags” part is indicated by an opening
bracket, and the letter “p” tells the computer we're opening a paragraph instead of some other
type of content.

Once a tag has been opened, all content that follows is considered part of that tag until you
"close" the tag. When the paragraph ends, I'll put the end paragraph tag: </p>. Note that closing
tags look exactly like opening tags, except there's a forward slash after the left corner bracket.
Here is an example:

<p>This is a paragraph.</p>

Using HTML you can add headings, format paragraphs, wrap controls, create lists, emphasize
text, create special characters, insert images, create links, build tables, controls several styles,
and more.

To learn more about coding in HTML, I recommend checking out the basic HTML tutorials and
using the free classes and resources on codecademy – but for now, let's move on to CSS.

 CSS

CSS stands for Cascading Style Sheets. This programming language regulates how the HTML
elements of the website will actually appear on the frontend.

 How HTML & CSS Work

HTML provides the raw tools needed to structure the content on a web page. CSS, on the other
hand, helps define this content style so that it appears to the user the way it should be seen. These
languages are kept separate to ensure websites are built correctly before they are reformatted.

If HTML is drywall CSS is paint.

While HTML is the basic structure of your website, CSS is what gives your entire website style.
Those glossy colors, cool fonts, and background images? All thanks to CSS. This language
influences the entire mood and tone of a website, making it an incredibly powerful tool – and an
important skill for web developers to learn. It's also what allows websites to adapt to different
screen sizes and device types.

To show you what CSS does to a web page, take a look at the following two screenshots. The
first screenshot is my colleague's blog post, but rendered in basic HTML, and the second
screenshot is the same blog post with HTML and CSS.

JavaScript

JavaScript is a more complex language than HTML or CSS, and it wasn't released in beta form
until 1995. Today, JavaScript is supported by all modern web browsers and used on almost every
website. for more powerful and complex functionality.
  HOW DOES JAVASCRIPT WORK?

JavaScript is a logic-based programming language that can be used to modify web page content
and make it behave in different ways in response to user actions. Common uses for JavaScript
include confirmation boxes, calls-to-action, and adding new information to existing information.

In short, JavaScript is a programming language that allows web developers to design interactive
web pages. Most of the activity you'll see on a web page is thanks to JavaScript, which enhances
the browser's default behaviors and controls.

 Using Visual Studio Code to design a company website

 A website is made up of several different web pages. Pages can be stand-alone as home
page, contact page, about page. Or it can also be a page grouped together in categories
and articles. So you need to understand that your website is composed of all your web
pages. The following components are the most important that you need to pay attention
to.
 Header or header

This is an important part of the website. It cures ingredients like:

 Menu bar (navigation): In this menu you need to prioritize difficult keywords, keywords
that are important to your website.
 Logo: helps to identify your brand.
  Banner: This section makes it easier for customers to see. More impressed with your
website.

=.> we will design as follows

 The content or the body

This is an important part of your website as well. With the header is the navigation. Help users
easily access the large categories on the website. Then this piece of content helps to provide
quality content to the readers. This Content section on each different website must be different,
in order to provide useful information to readers.

In the content section there can be additional main content and sidebar.

 Main content helps provide information

 Sidebar helps navigate to other articles on your website, or you can also insert banner
ads
=> We will design as follows
  Footer or footer

This section is like the header in that it usually does not change on different sites on the same
website. The footer section helps users redirect to useful links. For example, links to policy
pages, user manual pages, brand logos, logos announcing the Ministry of Industry and Trade if
any, etc.

This component is also quite important because it appears on all websites, so you can also take
advantage of it to place links to important pages that contain difficult keywords for SEO.

=> We will design as follows

LO4 Create and use Test Plans to review the performance and design of multiple websites.

Define the goals of the governance plan The following are four possible goals of a web site
management plan:

1. Increase traffic

2. Increase security

3. Improve brand awareness

4. No cost to repair the website.

Training website administrators To achieve the above goals, businesses need to set up a team of
well-trained website administrators with the following skills: Content marketing: serving the
goals of building and maintaining websites. Manage website content that is appropriate and
useful to users, bringing value to the website and businesses. Website design provides
administrators with innovative thinking about technology to best suit the development trend of
the field in which the website operates, as well as understand the long-term value of applying
technology. high to best serve users at each different time. Cybersecurity or network security:
help you understand the situation of network security, raise awareness and ways to approach user
data protection methods as well as the reputation of the website in the online world.

Tools to support website evaluation: typical and popular is Google Analytics, which provides
administrators with necessary information for website operations such as CTR, time session, P
Bounce Rate, etc. From there, the new administrator outlines the next options for his website.
SEO is an indispensable knowledge for a website administrator in today's era. SEO is no longer
just an awareness of website optimization to match the ever-changing workings of bots on search
engines, but also constantly improving the experience of website users to perfection. than. After
you have fully equipped with the necessary knowledge for your admin team, we come to the part
about setting the time to implement the website management plan step by step.

Determining deadlines and implementing management options Manage website interface: The
main interface is the form of each website, it shows the image of the business unit to customers
and partners in the market. Hosting management: The bandwidth used for the website is not
suitable for the actual operation of the website, one is an unnecessary increase in costs for the
business and the other is that the customer does not have a complete user experience such as
slow page loading. Therefore, always make sure the hosting is smooth, operating continuously
and stably. Content creation: In order for your website to be visited by customers most often, you
need to add, change, update and refresh the content on the website. Website optimization:
Optimizing images on the website to reduce the size of the website to help the website run faster,
operate more efficiently. Optimizing the website with SEO standards will bring the best effect to
the website and quickly put the web position. to the top. Website promotion: Besides posting and
regularly updating information, you also need to

Evaluation of management effectiveness The cycle to evaluate the effectiveness of governance

will be after the management team has completed all the deadlines in the above steps of the plan.
If in the process of administration you lack transparency and clarity, it will be difficult to grasp
the effective operation of that website. Therefore, you need to make a clear and specific
evaluation report to ensure effective management.