Web Development Workshop (WDW)

BCS 353
Web development
It refers to the creating, building, and maintaining of websites. It
includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an
application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

 Web: It refers to websites, web pages or anything that works over
the internet.
 Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

 Frontend Development
 Backend Development

Frontend Development
The part of a website where the user interacts directly is termed as front
end. It is also referred to as the ‘client side’ of the application.
Popular Frontend Technologies
 HTML: HTML stands for HyperText Markup Language. It is used to
design the front end portion of web pages using markup language. It
acts as a skeleton for a website since it is used to make the structure
of a website.
 CSS: Cascading Style Sheets fondly referred to as CSS is a simply
designed language intended to simplify the process of making web
pages presentable. It is used to style our website.
 JavaScript: JavaScript is a scripting language used to provide a
dynamic behavior to our website.
 Bootstrap: Bootstrap is a free and open-source tool collection for
creating responsive websites and web applications. It is the most
popular CSS framework for developing responsive, mobile-first
websites. Nowadays, the websites are perfect for all browsers (IE,
Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets,
Phablets, and Phones).

Backend Development
Backend is the server side of a website. It is part of the website that
users cannot see and interact with. It is the portion of software that does
not come in direct contact with the users. It is used to store and arrange
data.

Backend Development Roadmap

Popular Backend Technologies
 PHP: PHP is a server-side scripting language designed specifically
for web development.
 Java: Java is one of the most popular and widely used programming
languages. It is highly scalable.
 Python: Python is a programming language that lets you work
quickly and integrate systems more efficiently.
 Node.js: Node.js is an open source and cross-platform runtime
environment for executing JavaScript code outside a browser.

Databases
In web technology, a database is a structured collection of data that is
stored electronically and accessed via a web application. It serves as
the backend component where data is stored, managed, and retrieved.
Databases can be relational (like MySQL, PostgreSQL) using structured
tables and SQL for queries, or non-relational (like MongoDB, CouchDB)
which store data in flexible, document-oriented formats. They enable
web applications to handle dynamic content, user data, transactions,
and more by providing efficient storage, retrieval, and manipulation
capabilities. Database management systems (DBMS) are used to
interact with the database, ensuring data integrity, security, and
performance.

Relational Database
A relational database stores data in tables, similar to a spreadsheet,
where each table has rows and columns. The rows hold individual
records, and the columns define the data attributes. Tables can be
linked to each other through special keys, allowing related data to be
connected.
 MySQL: MySQL is an open-source relational database management
system that uses SQL for managing structured data. It’s known for its
reliability, ease of use, and performance, widely used in web
applications.
HTML Tutorial

 What is HTML?
 HTML stands for HyperText Markup Language is the
standard markup language used to create and design web
pages on the internet.
 It is a combination of Hypertext and Markup language.
 The Hypertext defines the link between web pages, and
Markup defines the text document within tags to structure
the web pages.
 This language annotates text so that machines can
understand and manipulate it accordingly.
 HTML is human-readable and uses tags to define what
manipulation has to be done on the text.
 HTML is the language of the web, used by billions of websites to
create the pages you see every day.
 We will start with HTML fundamentals, such as basic HTML
tags and their attributes, classes, layout, and responsiveness.
Then, move on to advance HTML5 topics, such as HTML
forms, media, APIs, and more.
 It uses HTML tags and attributes to describe the
structure and formatting of a web page.
 HTML consists of various elements, that are responsible for
telling search engines how to display page content.
 For example, headings, lists, images, links, and more.

HTML Example
<!DOCTYPE html>
<html>

<head>
<title>First HTML Code</title>
</head>

<body>
<h2>Welcome To GFG</h2>
<p>Hello Geeks</p>
</body>

</html>

 Here are some of the key advantages of learning HTML:

  Web Structure Foundation: HTML provides the fundamental
skeleton of every web page. It tells browsers how to display text,
images, links, videos, and other elements.
 Ease of Use: HTML is renowned for its beginner-friendliness. Its
straightforward tags and syntax make it a great place to start your
web development journey.
 Gateway to Web Development: Mastering HTML is the first step
toward learning more complex web technologies like CSS (for
styling) and JavaScript (for interactivity).
 Diverse Applications: It empowers you to build websites, email
templates, newsletters, and much more.
 Creative Expression: Allows you to bring your ideas to life online,
fostering a fun outlet for creativity and design.

 Features of HTML
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web
programming.
 Boost professional career.

 HTML History
 HTML is a markup language used by the browser to
manipulate text, images, and other content, in order to
display it in the required format.
 The first-ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1995. It was
introduced by Tim Berners-Lee in 1991 at CERN as a simple
markup language.
 Since then, it has evolved through versions from HTML
2.0 to HTML5 (the latest 2024 version). Currently, we are
using HTML5, which is the latest and most recent version
of HTML.
 Advantages of HTML
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages
like CSS, JavaScript, etc.
 Disadvantages of HTML
 HTML can only create static web pages. For dynamic web
pages, other languages have to be used.
 A large amount of code has to be written to create a
simple web page.
 The security feature is not good.

 HTML Elements and Tags

 HTML uses predefined tags and elements that instruct
the browser on how to display the content.
 HTML elements include an opening tag, some content, and
a closing tag. It’s important to remember to include closing
tags. If omitted, the browser applies the effect of the
opening tag until the end of the page.
 This section will dive into the basic structure of an HTML
page, which includes essential building-block elements like
doctype declaration, HTML, head, title, and body elements.
 HTML Page Structure
 The basic structure of an HTML page is shown below. It
contains the essential building-block elements (i.e. doctype
declaration, HTML, head, title, and body elements) upon
which all web pages are created.

 <!DOCTYPE html> – This is the document type declaration

(not technically a tag). It declares a document as being an
HTML document. The doctype declaration is not case-
sensitive.
 <html> – This is called the HTML root element. All other
elements are contained within it.
 <head> – The head tag contains the “behind the scenes”
elements for a webpage. Elements within the head aren’t
visible on the front end of a webpage. HTML elements used
inside the <head> element include:
 <style> – This HTML tag allows us to insert styling into our
web pages and make them appealing to look at with the help
of CSS.
 <title> – The title is what is displayed on the top of your
browser when you visit a website and contains the title of the
webpage that you are viewing.
 <base> – It specifies the base URL for all relative URL’s in a
document.
 <noscript> – Defines a section of HTML that is inserted
when the scripting has been turned off in the user’s browser.
 <script> – This tag is used to add functionality to the
website with the help of JavaScript.
 <meta> – This tag encloses the metadata of the website
that must be loaded every time the website is visited. For
eg:- the metadata charset allows you to use the standard
UTF-8 encoding on your website. This in turn allows the users
to view your webpage in the language of their choice. It is a
self-closing tag.
 <link> – The ‘link’ tag is used to tie together HTML, CSS, and
JavaScript. It is self-closing.
 <body> – The body tag is used to enclose all the visible
content of a webpage. In other words, the body content is
what the browser will show on the front end.

 An HTML document can be created using an HTML text

editor. Save the text file using the “.html” or
“.htm” extension. Once saved as an HTML document, the file
can be opened as a webpage in the browser.

 Note: Basic/built-in text editors are Notepad

(Windows) and TextEdit (MacOS). Other advanced text
editors include Sublime Text, Visual Studio Code, Froala,
etc.
 Attributes for meta tag in HTML
 charset: Specifies the character encoding for the HTML
document (e.g., UTF-8). This ensures proper rendering of
text.
<meta charset="UTF-8">

 name: Defines the name of the metadata. Common values

include:
o description: A brief summary of the page content.
o keywords: A comma-separated list of keywords
relevant to the page for search engines.
o author: The name of the author of the document.
<meta name="description" content="A brief description
of the page.">

 content: Used in conjunction with the name attribute to

specify the value of the metadata.
<meta name="keywords" content="HTML, CSS,
JavaScript">

 http-equiv: Provides an HTTP header equivalent. Common

uses include:
 refresh: Specifies a time to refresh the page.
 content-type: Specifies the content type of the document.
 scheme: Determines a scheme to be utilized to decipher the
value of the substance attribute.

 Example
This example illustrates the basic structure of HTML code.
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!--The above meta characteristics make a website
compatible with different devices. -->
<title>Demo Web Page</title>
</head>

<body>
<h1>GeeksforGeeks</h1>
 <p>A computer science portal for geeks</p>
</body>

</html>
Output:

 Web Browsers
 Unlike other programming languages, HTML does not show
output on the compiler.
 Web browsers show the results of an HTML code. It reads
HTML files and determines how to show content with the
help of HTML tags.
 Any web browser (Google, Safari, Mozilla Firefox, etc)
can be used to open a HTML file and view the results.

 HTML Tags
 HTML tags are the building blocks of web pages. By
understanding and using HTML tags effectively, you can create
well-structured and informative webpages.
 HTML <p> Tag
 HTML <a> Tag
 HTML <div> Tag
 HTML <span> Tag
 HTML <header> Tag
 HTML <footer> Tag
 HTML <break> Tag
 HTML <nav> Tag
 HTML <script> Tag
 HTML Tags – A to Z List

 HTML Tables
 HTML tables provide a structured way to organize information into
rows and columns, making it easy for users to understand and
navigate.
 HTML <table> Tag
  HTML <tr> Tag
 HTML <th> Tag
 HTML <td> Tag
 HTML <caption> Tag
 HTML <thead> Tag
 HTML <tbody> Tag
 HTML <tfoot> Tag
 HTML <col> Tag
 HTML <colgroup> Tag

 HTML Lists
 HTML lists organize information clearly on your website. They’re
perfect for step-by-step instructions, lists of ingredients, or ranking
items. This improves readability and helps users to understand
your content.
 HTML Lists
o HTML Ordered Lists
o HTML Unordered Lists
o HTML Description Lists
 HTML List Elements
o HTML <li> Tag
o HTML <ul> Tag
o HTML <ol> Tag
o HTML <dl> Tag
o HTML <dt> Tag
o HTML <dd> Tag

 HTML Formatting
 HTML offers tags and attributes to style your website’s text,
images, and more. This improves visual appeal, helps users
navigate your content, and signals important information to users.
some of the common HTML formatting tags.
 HTML <i> Tag
 HTML <small> Tag
 HTML <ins> Tag
 HTML <sub> Tag
 HTML <strong> Tag
 HTML <b> Tag
 HTML <mark> Tag
 HTML <del> Tag
  HTML <em> Tag
 HTML <sup> Tag

 HTML Form
 HTML forms let users interact with your website. Use them to
collect contact details, run surveys, search your site, and more.
Let’s explore more about HTML form:
 HTML <form> Tag
 HTML <input> Tag
 HTML <label> Tag
 HTML <button> Tag
 HTML <select> Tag
 HTML <textarea> Tag
 HTML <fieldset> Tag
 HTML <legend> Tag
 HTML <datalist> Tag
 HTML <output> Tag
 HTML <option> Tag
 HTML <optgroup> Tag