Web development starter kit

By Halim Boussada
 The Web
What is the WEB?
● The World Wide Web (WWW), commonly known as the
Web, is an information system enabling documents and
other web resources to be accessed over the Internet.

● Is an application that runs on the internet.

● The WEB was created in 1989 by Sir Tim, where the

internet is already exist.
 The Web

What is The Internet?

● Internet = Inter -Network

Global Network

● The internet is the network of

connected computers that the web
works on, as well as what emails and
files travel across.
 The Web
● Think of the internet as the
roads that connect towns and
cities together.

● The world wide web contains the

things you see on the roads like
houses and shops.

● And the vehicles are the data

moving around -

○ some go between websites

○ and others will be

transferring your emails or
files across the internet,
separately from the web.
 The Web
● In 1960’s, ARPA funded a research to create a network.

○ The network was used for academic and scientific purposes.(connecting university campuses,
research institutions and companies)

University 2

University 1
 The Web
● In the 80’s, The network started growing
● Other networks were being created such as :X25 ,UseNet … etc.

LAN
LAN LAN

LAN
LAN LAN
 The Web
● Communicate with each other …. Network

LAN
LAN LAN

WAN

LAN
LAN LAN
 The Web
What is a Network?

● Network: Is a group of interconnected

computers systems, to communicate and
exchange data.

● Two types of networks:

○ LAN , WAN
 The Web
LAN:
● A Local Area Network consists of two or more computers that are linked together in a small
geographic area; library, school, groups of buildings..
 The Web
WAN:
● A Wide Area Network is a Network that extends over a large geographic area for the primary
purpose of computer networking.
● Wide area networks are often established with leased telecommunication circuits. For example:
The Internet.
 The Web

Now the question || (problem) is :

● How to connect these networks together?

● How to know which device to [request from Or send to

] data

● Computer system need to talk the same language.

● The invention of TCP/IP protocols.

 The Web

Language of the Internet

● There are lots and lots of Network Protocols
used and they're all necessary to help us get
our packets (data) in the right place.

But there are two protocols that you need to

know :
○ Transmission Control Protocol ( TCP )
○ Internet Protocol ( IP )
 The Web
Language of the Internet

IP - Internet Protocol :
○ Every device has an IP address that uniquely identifies it.

○ IP protocol obtains and defines the address—the IP address—of the

application or device the data must be sent to.

○ An IP address is composed of digits and numbers like 100.1.4.3.06 /

127.0.0.1/ 198.162.1.1
 The Web
Language of the Internet

TCP - Transmission Control Protocol:

○ TCP is then responsible for transporting and routing data

through the network architecture and ensuring it gets
delivered to the destination application or device that IP has
defined.

○ This protocol was an important part of the creation of the

internet since it let us share information with other
computers.
 The Web

www . socialhackersacademy . org

WWW stands for World Wide Web.

socialhackersacademy is something we call a domain name.

.org Which are domain endings

 The Web
● You can also access a website using its IP address like http://172.217.6.46,
if you hit the previous link it will redirect you to www.google.com, and
this is because of the Domain Name System ( DNS ).
 Full stack / developer

Types of

Web

Developers:
 HTML Basics

What is Frontend development?

● Front-end web development, also known as client-side

development
○ is the practice of producing HTML, CSS and JavaScript for a
website or Web Application so that a user can see and interact
with them directly.

● Simply it is the development of those elements of a website that the

user sees and interacts with directly.
 HTML Basics
Frontend Languages …

In the browser,web apps are composed of three major components:

● HTML, which defines the hierarchical structure and content of the web
page,it is the skeleton of all web pages.

● CSS, which defines the visual layout and style of the page.

● JavaScript, which defines interactive behaviors and changes to the page over
time(functionality).
HTML Basics
 HTML Basics
What is HTML ?

HTML : stands for Hyper Text Markup Language.

● used for describing, structuring and presenting content on the web.

● It’s not a programming language.
● HTML documents contain
○ HTML tags and plain text
● HTML documents are also called web pages
 HTML Basics

● A markup language:
○ Is a computer language that is used to apply layout and formatting conventions to a text document.
○ Markup language makes the text more interactive and dynamic.
■ It can turn text into images, tables, links, etc.
○ In HTML, the computer can interpret raw text that is wrapped in HTML elements.

● HyperText :
○ refers to links that connect web pages to one another, either within a single website or between
websites. hyperlinks.
What is HTML
let’s analyze this page
Now let’s see the code behind this page
Anatomy of an HTML document

Head section and info about

this page.
You can also add reference to
external files like css and
javascript files.

Content of the page goes

inside the body tag.
 Anatomy of an HTML document

<!DOCTYPE html>

● The HTML document type declaration, also known

as DOCTYPE, is the first line of code required in
every HTML or XHTML document.

● The DOCTYPE declaration is an instruction to the

web browser about what version of HTML the page
is written in.

● This ensures that the web page is parsed the same

way by different web browsers.
 Anatomy of an HTML document

<!DOCTYPE html>

● HTML5 is the most recent version of html and

it’s declaration is
<!DOCTYPE html>

● The <!DOCTYPE> declaration is NOT case

sensitive.

<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>
 Anatomy of an HTML document

<html> </html>

● the <html> element

○ This element wraps all the content on the
entire page and is sometimes known as the
root element.
 Anatomy of an HTML document

<head> </head> :

● the <head> element.

○ This element acts as a container for all the stuff you want
to include on the HTML page that isn't the content you
are showing to your page's viewers.
■ they're not visible on the page, but they are
still viewable to browsers and search engines.

○ This includes things like keywords and a page description

that you want to appear in search results, CSS to style our
content, character set declarations, and more.
 Anatomy of an HTML document

<meta > :
● Defines metadata about an HTML document.
○ Metadata is data (information) about data.

● For example, a description meta tag is used by Internet search

engines to display a description of your page in their search
results.

<meta charset="utf-8">
<meta name="description" content="Helping you with ALL your computer questions">
 Anatomy of an HTML document

<title> </title> :

● This sets the title of your page, which is the title that
appears in the browser tab the page is loaded in.

● sets the default name for a bookmark

<title> A Page Title </title>

 Anatomy of an HTML document

<body> </body>:

● This contains all the content that you want to

show to web users when they visit your page.

● whether that's text, images, videos, games,

playable audio tracks, or whatever else.
 HTML Basics

HTML elements enable us to:

● Add content
● Add Images
● Add links
● Add headings
● Add Forms
● Add tables
 Anatomy of an HTML element

● For example this a paragraph

 HTML Elements

● Empty elements:
○ Elements with no content.

○ for e.g: <img> This contains two attributes, but there is no closing </img>
tag and no inner content.
 HTML Tables

Basic <table> tags:

● The <table> tag is the outermost tag and marks the table.

● The <tr> tag is nested within the table and marks the table row.

● The <th> tag is nested within the <tr> tag and marks the header cells.

● The <td> tag is nested inside the <tr> and marks the table data(cell).

● The <caption> tag is a direct child of the <table> and marks the table’s title above it.
 HTML TABLES

Table Head, Body and Foot

● The content within tables can be broken up into multiple groups, including a head, a
body, and a foot.

○ The <thead> (table head)

○ <tbody> (table body)

○ and <tfoot> (table foot)

elements help to structurally organize tables.

 HTML Lists

1. Unordered Lists:
 HTML Lists

1. Ordered Lists:
 HTML Forms

● HTML forms allow the user to enter data in web pages.

● A form is a container for various data entry elements like edit boxes,
checkboxes, radio buttons, drop-down lists, multiline edit boxes, labels,
buttons, and more.
● The data entered in these elements is sent to the server for processing
when the user clicks the submit button.

An HTML form is created by using the <form> element.

 HTML Element-Attribute

● Elements can also have attributes

 HTML Element-Attribute

○ All HTML elements can have attributes.

○ provide additional information about the

element that you do not want to appear in
the actual content.

○ Attributes are always specified in the start

tag.

○ Attributes usually come in name/value

pairs
like: name="value"
 Image attributes

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image, if

the image for some reason cannot be displayed
 HTML Element-Attribute

IDs vs Classes :

ID CLASS
• We use HTML id attribute to uniquely identify a
● is used for single or multiple elements
particular element in the HTML document. that appear on the page.

• It can be used with at most one element. ● Multiple elements can have the same class

• It also acts as a distinguisher between two or

more elements with the same name.
 Forms

HTML Forms
● An HTML form is a section of a document which
contains controls such as :text fields, password
fields, checkboxes, radio buttons, submit button,
menus etc.

● Forms can request a small amount of information—

often a search query or a username and password—
or a large amount of information—perhaps shipping
and billing information or an entire job application.
 Forms

HTML Forms
● Forms can request a small amount of information
—often a search query or a username and
password

● or a large amount of information—perhaps

shipping and billing information or an entire job
application.
 Forms

Why HTML Forms

● An HTML form facilitates the user to enter data that will be sent to the server for
processing such as name, email address, password, phone number, etc. .

● They provide a way for websites to capture information from users and to process
requests, and they offer controls for nearly every imaginable use of an application
 Forms

What is Form validation

● Form validation: When you enter data, the browser and/or the web server will check to see that
the data is in the correct format and within the constraints set by the application.

● Validation done in the browser is called client-side validation,

● while validation done on the server is called server-side validation.
 Forms

Why Form validation:

We want to make filling out web forms as easy as possible. So why do we insist on validating our forms?
There are three main reasons:
● We want to get the right data, in the right format:
a. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is
omitted altogether.

● Protect our users' data:

a. Forcing our users to enter secure passwords makes it easier to protect their account information.

● Protect ourselves. :
a. There are many ways that malicious users can misuse unprotected forms
to damage the application.
 Forms

Different types of client-side validation

● Built-in form validation

● Validating forms using JavaScript

 Forms

● A web form is a medium that allows your visitors to get in contact with you and to send
information, such as
○ an order, a catalog request, or even a query, which is passed on to your database.
○ On some websites, information that is submitted through web forms is transferred directly
to the company email.
 Forms (get request)

● GET :
○ is used to request data from a specified resource.

○ The GET method is the method used by the browser to ask the server to send back a given
resource: "Hey server, I want to get this resource."
 Forms (post request)

● POST :
○ is a request method supported by HTTP used by the World Wide Web.

○ By design, the POST request method requests that a web server accepts the data enclosed
in the body of the request message, most likely for storing it.
○ It is often used when uploading a file or when submitting a completed web form.
 Form element types

● There are various form elements that we can use like text-fields, text-area, drop-down list, select,
checkboxes, radio, etc.

○ The following HTML elements can be used with the form element:

○ <input>, <label>, <select>, <textarea>, <button>, <fieldset>,

<legend>, <datalist>, <output>, <option>, <optgroup>
 Checkboxes VS Radio buttons

● Checkboxes are used when there are lists of options and the user may select zero, one, or several
choices.

● Radio buttons are used for mutually exclusive options and the user must select exactly one
choice.
 Dropdowns VS Text field
● Dropdowns do have their advantages.
○ First, they conserve screen space. Because they are a standard widget (even if an unpleasant one), users
know how to deal with them.

○ And, when used in forms and for attribute selection, dropdown boxes prevent users from entering
erroneous data, since they only show legal choices.