LEVEL 1 WEBSITE

Provided by the IFC

COUPEAU Laurent
The profession of Webmaster P 2 to 4
• Professional context and related profession P 2 to 3
• Webmaster skills P 3 to 4

2. Hosting your website P 4 to 7

• Types of accommodations P4
• Domain name, operation and maintenance P 4 to 5
• Collection and processing of statistical data (Google Analytics) P 5 to 7

3. Legislation and regulation P 7 to 12

• Legal framework P 7 to 8
• Main pitfalls for the webmaster P 8 to 10
• Declaration of sites to the CNIL P 10
• GDPR P 10 to 12

4. Languages and tools P 12 to 23

• ["HTTP","SMTP","FTP","NNTP"] P 12 to 13
• Web languages: HTML, Javascript, XML, XHTML, HTML 5, CSS.... P 13 to 20
• Content Management Systems (CMS) P 20 to 22
• Tools and resources for script development, PHP, ASPX, JSP. P 22 to 24

Annex 1 to 8 (HTML, CSS, Javascript, PHP, Bootstrap, jQuery, Important tools and sites, glossary)

1
The purpose of the training is not to make you webmasters or web developers, but you need to...
know the tools currently used and that you know how to use them. Today, the world of the web has become
essential. You will certainly be required to manage computer scientists, and you need to
you could collaborate, even give instructions to them.

• What is a Webmaster?

A webmaster or site administrator is a person

responsible for awebsite, from its design to its maintenance. The webmaster is a person
professionalisinternet jobs. Ssource Wikipedia

• The related professions

2
Director
human resources

DSI
Director / Director of
Information Technology services

Administrator
of systems and networks

Webmaster Web developer Web integrator

Web designer

Dsi: it is the director of IT services (he coordinates all the IT services among themselves)

System and network administrator: They manage servers and your networks.
keep up to date. They take care of the security of these and ensure that the practices used
are in compliance with the laws and the respect of the company.

Webmaster: He manages, maintains, updates the sites, and ensures that they are in
compliance with European law (GDPR). He often collaborates with the system administrator,
developers and integrators.

Web developer: he designs the site, develops it using web-oriented programming languages.
often collaborates with web designers and webmasters

Web Integrator: He integrates the site, meaning he collaborates with the web designer to integrate using
of programming languages or CMS, the graphic brochures to color the site to
the company.

Web designer: He designs brochures, graphic charters for the company, which the integrator...
charger to translate on the site.

The webmaster is very versatile, he must know:

• System administration to possibly manage a web server (Keep the server up to date,
to maintain it).
• A bit of web development because it must be able to update the sites.
• English as always in computer science.

It must be:
3
• Rigorous
• Organized
• Multivalent
• Adaptive

His daily tasks on the sites:

• Manage
• Update
• Feed
• Secure
• Bring into compliance with the laws
• Moderate

• The types of accommodation

• Shared hosting: We rent a space on a server to host our site.

Shared hosting is often talked about because there are often multiple people on this server.
hosting their sites.

• Dedicated hosting: You are allowed to rent a physical server, hosted by the provider.
This hosting is very interesting because you can host a multitude of sites, big ones.
projects, which will be faster. However, one must have good knowledge in administration of
systems and networks.

• VPS hosting (Virtual Private Server): it has the same characteristics as dedicated hosting.
but it is much more flexible, we can add storage, RAM at a cost.
A major advantage is its scalability. In addition, the cost is significantly reduced.

• Domain names

When you take accommodation, you are generally asked to choose a domain name.

What is a domain name?

4
• It is actually the name chosen to represent your business on the Internet for a website.
If you don't do it, the site name will look like this [Link] you will either have some
numbers, or the name of your server.

The cost is on average between €1 and €10 per year

Very often, the hosting provider you choose will offer you one for free for the first year.

Example of very well-known hosting providers:

• OVH
• 1&1
• Gandhi
• HostPapa

• The processing of statistical data (Google Analytics)

This tool allows you to see the statistics of your site: Who visits it, where they live, the attendance in
volume, on which page the visitor will not go, etc....

To do this, you need to start creating a Google Analytics account

[Link]/analytics

Click onAdministration.
2. Click on the account column menu to select the account you wish to
add the property.
If you have a large number of accounts, use the search field to help you
find the one that interests you.
3. In the PROPERTY column menu, click on Create a property.
If you do not have Edit permission on the account, the Create property option
does not display. Make sure you have selected the appropriate account in the 'ACCOUNT' column.
4. Select Website or Mobile App.
If you select Website, proceed to step 7.
If you select Mobile application, proceed to step 6.
5. (Mobile application) Under Tracking Method, select Firebase. Select an application
in the menu and click on Associate an application.
6. Indicate the name of the website or application.
If you plan to track multiple applications in your account, choose a name.
very precise and descriptive, including the edition or version number. You will thus be able to organize your
applications more easily.
7. (Website only) Enter the website URL.
You cannot create a property if the URL format is not correct.
5
Example above: analyze attendance by geographical area.
Go to the Administration section (the gear at the bottom)

Position yourself on the Tracking Information tab.

Click on tracking code

6
You can see your tracking and the JavaScript code to put on your websites to make the link.
between Google and the site.

• Legal framework

Every website must have a 'legal notice' page, French law n°2004-575

Example of legal notices

Owner of the website [name or URL of the site]:

[Your First and Last Name]
[Your postal address]
[Your phone number, fax, your email]
Website publisher [name or URL of the site]:
[Your First and Last Name]
[Your postal address]
[Your phone number, fax, your email]
Distinctive signs:
The domain name [name or URL of the site] belongs to [Your first name][Your last name]
(If applicable) [YOUR FIRST NAME] [YOUR LAST NAME] holds the trademark "[name of
trademark], registered with the INPI on [date] under No. [registration number] and registered
7
in the classes [class number(s)].
The Logo [logo name] is also a registered trademark at the INPI, on [date] under the
number [registration number] and registered in the classes [number(s) of
classes].
Hosting of the site [site URL]
The site [URL of the site] is hosted by [name of the host, address, contact details].
Administrative status and billing:
[YOUR FIRST NAME] [YOUR LAST NAME] operates under the status of salary portage. He/She
is, in this capacity, a member of……, which manages the administrative aspects of its activity and whose
the coordinates are as follows:
………, RCS:…………, billing address:…………..
Email :……….Téléphone :………..
The invoices will be established accordingly in the name of. For more information, click
on……., company of……</a>.
Important: The intellectual property rights related to the site [URL of the site]
belong to [YOUR FIRST NAME] [YOUR LAST NAME]. Any use, reproduction,
diffusion, commercialization, modification of all or part of the site, without the authorization of
[YOUR FIRST NAME] [YOUR LAST NAME] is prohibited and may result in actions and
legal proceedings such as specifically provided for by the property code
intellectual and/or the civil code.
If you wish to integrateerenhanced legal notices to comply with GDPR,
we invite you to generate them via a tool developed by our partner [Link] and
Legal Domain.

Respect for intellectual property.

Legal content. (No incitement to hatred, no sexism, no glorification of violence....)
Compliance with the obligations of the CNIL.
Respect for the GDPR.

• The main traps of the webmaster

The webmaster tools:

• Google Webmaster Tools (to manage site-related errors)

The different possible errors or codes

8
The URL is ok Redirection
It's just a permanent
Redirection
response from temporary
It is a
server when redirection to
we access Allows to
another
directly to bypass a
address (not
associated content resource
must not be
at the URL temporarily
changed it is unavailable
regularly)

VIP Access An error that These are the

you are going fatal errors
When a
person or often, a
nightmare for These are
a robot
the webmasters errors related to
try to
server
connect to When a bad
access image or a configuration
restricted page does not exist
for example...)
plus

9
A mistake that many people make is working in production. You should always design your site locally and then
transfer it to the server using Filezilla.

How to do it: you need a web server + a database + an interface for testing

There are tools for this like WAMP on Windows (MAMP on MAC, LAMP on Linux)

WAMP (Windows Apache Mysql PHP)

Apache is the web server

MySQL is the database.

Php is the language used

To do this, you need to install WAMP on your machine, which will simulate a web server but locally (only on your
machine).

You will still need to equip yourself with a free text editor like (Wordpad++, Sublime Text, Braquet....)

We also have the option to create folders and subfolders, to create .css, .html, .js, .php files with the editor.
text.

• Declaration of sites to the CNIL

Is it mandatory to declare a site to the CNIL?

No, since the GDPR law of May 25, 2018.

If you want to declare a site to the CNIL, how to proceed?

You need to go to the site.

[Link]

• The GDPR (General Data Protection Regulation)

The European law of May 25, 2018, implements the GDPR.

6 important steps for a company to implement the GDPR.

• Designate a pilot, a person who will organize everything. (DPO)

• Map the processing of personal data. (Reference all data)
personal information that you collect.
• Prioriser les actions à mener.
10
• Manage risks (impact assessment related to data protection (DPIA)).
• Organize internal processes (taking into account all events that
can occur during the life of a treatment (e.g., security breach, management of
requests for rectification or access, modification of collected data, change
of the service provider).

• Document compliance (compile and group the necessary documentation).

The obligations

• Information : en effet, vous devez prévenir les personnes que vous collectez des
data about them, inform them of their rights.
• You must obtain the clients' agreement.
• Inform them of their rights to access, modify, and delete information
collected
• Ensure the security of the information system
• Ensure data confidentiality
• Indicate a data retention period.
• Analyze the impact in case of high risk for people's rights (profiling,
sensitive data of individuals, statistical studies, research treatments
medical, the transfer of data outside the EU.
• Appoint a DPO (Data Protection Officer).

The data protection officer must have the following qualities and skills:

• Communicate effectively and perform one's duties independently (do not

to have a conflict of interest with its other missions;

• Expertise in legislation and practices (data protection), acquired

notably through continuous training;

• A good knowledge of the industry sector and the organization of the organization
(processing operations, information systems and the organization's needs regarding
of data protection and security;

• An effective internal position to report at the highest level of

the organism.

• Animate a network of relays within the subsidiaries of a group for example and/or a
internal team of experts (IT expert, lawyer, communication expert,
translator, for example).

The delegate can be a person from the technical, legal, or other field.

All organizations with more than 250 employees must maintain a register of processing activities, unless these processing activities...
are occasional.

11
Administrative sanctions

In case of violation of the regulation, the CNIL can impose administrative fines that can reach, depending on the category
the shortfall of 2% to 4% of the total annual worldwide revenue of the previous financial year.

Analyzer

Informer

To prevent

Secure

Act

The important protocols for the web

In computing, ports are pathways that allow information to pass through.

There are 65535 ports in total

Names Port Utility

HTTP (HyperText Transfer) 80 It allows to do
Protocol communicate with the client
(Browser) with the
server.
HTTPS 443 Secure version of HTTP
FTP (File Transfer Protocol) 20 or 21 This protocol allows for
transfer files from
your computer to a
server.
FTPS 21 Secure version of FTP
SSH (Secure Shell) 22 Allows you to create a session
at a secure distance
NNTP (Network News) 119 or 553 in version Used for forums of
Transfer Protocol secured specific discussion
SMTP (Simple Mail Transfer) 25 or 465 / 587 in version It is a protocol that
Protocol secured allows communication
between your software of
12
messaging and the server of
messaging.

The languages of the web

• The HTML

HTML (HyperText Markup Language) is a markup language for the web. It was created
in 1993.

It allows you to create so-called "static" sites, meaning that they do not need to
communicate with the server. With it, we can create 'showcase' websites.

Memo on HTML tags in appendix 1

How do you declare HTML on a page?

Thanks to the HTML Tag precisely

To work on code, you always need a text editor (Wordpad++, Sublime Text,
Brackets...)

Small example

A tag opens with <> and closes with </>

13
I advise you when coding to always open and close them before doing anything else.
Choose, it will save you time and prevent you from making mistakes.

I will talk to you about the most important tags.

Inline means that we work on one line.

Block means that we are working on a block.

Since HTML 5, some tags do not need to be closed, but it is better to

quand même respecter les bonnes pratiques.

For all tags, we can create classes and IDs.

Class: it is a name that is associated with a tag and allows manipulation through code.
this tag. This class may not be unique and can be used for all tags
from your site.

EXAMPLE:

<a class="moi">

Id: it is a unique identifier for a tag. The same Id can only be used once.
times per site page.

Example:

<p id=" titre2 ">

Tags Explanations Type Attribute

<title> Title on the tab Gets into the
<head> tags
<meta> Meta description Gets in between the
<head> tags
<h1> à <h6> Title of your site In the tag
<body>
Inline
The numbers
corresponding to the
title size (1 is
the largest).
<img> Declare an image path of
the image
Alt = ‘Nom de
the image

<a> Create a link path of

link

14
<hr> Draw a line
horizontal
<br> To go to the line
<i> Text in italics
<em> Highlight the text
Give him more
of importance
<table> Create a table
<tr> Create a line of a
tableau
<td> Create a cell of a
table
<caption> Legend of a painting
<th> At the top of the table
<ul> Create a bullet list
<li> Bullet list
<ol> Numbered list
<span> A part of a text Inline
<form> Create a form
<scripts> To integrate a
javascript script
<iframe> To create a
window
<p> Declare a Block
paragraph
<head> Section that does not Block
does not appear on the
but which site
parameter your site
<nav> Section to declare Block
your browser,
your menu

<header> Header section Block

<footer> Foot section of Block
page

• CSS (Cascading Style Sheets)

This language allows us to format our site and was created in 1996.

We use the notion of selector; in this language, we will select an attribute, a

property, a tag, an id, a class) to style.

Always try to comment your pieces of code so you don't get lost.

CSS uses priorities (what is at the beginning of the stylesheet will take precedence).

Close the lines with ;

15
Example of stylesheet

Let's talk about the main selectors and properties

Selectors Properties Explanations

.class Select a class
#id Select an ID
* Tous les éléments
tag The tag
Div, p All the divs and the p
Div p All the p inside the
div
Div+p All the p after the div
Div > p All the p that have the parent
div
[attribute]
[attribute = value]
active Active elements
::after
::before
:first-child
:last-child

Background color It affects the background color

of an element
Background image Put an image in the background
Height Height of an element
Width Width of an element
Text-align Align a text

16
Font-family Put a font on the text
Font size Text size
color Color of a text

Let's talk about the inspector of your browser and media queries.

Example on Mozilla Firefox:

Right click -> Inspect element to open the inspector

On Google Chrome

Right click -> Inspect to open the inspector

17
Check if your site is suitable for all formats (media queries)

See Appendix 2 for more details

• JavaScript

This language allows us to enhance our web pages and enable some interaction.
between the visitor and the site. It was created in 1995.

Always comment your code.

In JavaScript, we talk in terms of variables.

Initialize a variable in Javascript

Var

Example

Laurent Var;

You have just initialized the variable Laurent

You can also assign a value to this variable.

Example

Var Laurent = 2;

We can manipulate this variable with signs (+, -, /.....)

18
One can create conditions from variables using
(If, for...)

Ps: always close a line with ;

Exemple de code javascript

See Annex 3 for more details

• XML (Extensible Markup Language)

It was created in 1998, it is a markup language like HTML but much less
employee.

Exemple

19
• XHTML (Extensible HyperText Markup Language)

It is also a markup language like HTML but not used much anymore.
This language was created in 2000.

The languages excluding the frameworks are Javascript / PHP / HTML / CSS.

• There are many frameworks to help you go further and especially faster.
The most well-known are:
• Bootstrap for CSS
• JQuery for JavaScript
• Symfony for PHP

• The content manager (Wordpress)

There are many CMS

The most well-known are:
• Joomla
• Drupal
• WordPress (the most used in the world)
• Prestashop

20
A content manager is an interface on the Internet that allows you to create a site,
to add plugins, to manage it quickly and quite easily.

Most hosting providers today offer one-click installation on a hosting.

a CMS.

WordPress offers to install

• Extensions
• Plugins

Many are free, which is why people's interest in the CMS is growing.

You can, however, install Wamp for example to test your sites locally and
then transfer them with Filezilla to your server.

For non-e-commerce sites, although we can make them with (by installing
WooCommerce on WordPress for example.
The main ones

Label Joomla Drupal Wordpress

Installation Fast Well follow the Fast
documentation
Configuration Simple Quite complex Simple
Administration Very comprehensive Easy and very Simple and
complete complete
Modules More than 4000 A lot of Numerous
contributions modules that
allow to
modify the
back-end and the
front-end.
Functions 19 functions for you 15 functions for 25 functions
help help you for you
help
Community Very community Small community Community
active very active

The back-end: it's the administration side (server)

The front-end: it is the client-side part, that is to say, the browser and the site.

21
For e-commerce sites (Magento and Prestashop)
The main ones:

Label Prestashop Magento

Ergonomics
Administration
Ease of use
Functions
Rate

WooCommerce is not strictly speaking a CMS since it is an extension.

WordPress that we install. However, it is very comprehensive and free if we do not take its
extensions.

• Tools and resources for script writing

• PHP

This language was created in 1994. It allows communication with the server.

At the level of your code, there are two major advantages:

Your code is not visible in the inspector

Since you can communicate with the server, you can act
directly on the database.

PS: for your information, WordPress is designed in PHP

In PHP, just like in JavaScript, you can initialize variables, assign values to them, and integrate conditions.

Very often, there is a connection made between PHP and SQL (database language)

Initialize a variable in php:

Example:

$age_visiteur = 17 ;

Example of PHP code

22
23
• ASPX

It is a Microsoft language created in 2002, designed for developing web applications.

• JSP (Java Server Page)

It is a web language based on Java, which allows the creation of dynamic pages.
directly in HTML, XML or all types of web pages.

24
• Jobs related to the webmaster: web developer, web integrator, web designer.
System and Network Administrator.

• Webmaster skills: Management of a site as a whole (Administration, implementation

day, maintenance, site maintenance ....

• To create a site:

• A domain name
• A hosting (shared, dedicated, VPS)
• An FTP software (Filezilla)
• A text editor (Sublime Text or others)
• CMS or pure code.

➢ Les langages :
- Html (to create a static site, a showcase site)
- CSS (styling a website)
- Javascript (Dynamize the site)
- PHP (to create a site with a database)

➢ The CMS
- WordPress (the most used)
- Drupal
- Joomla
- Prestashop (for e-commerce sites)
- Magento (for e-commerce sites)

When you create a website, it is imperative to follow certain rules:

Respect for intellectual property.
Lawful content. (No incitement to hatred, no sexism, no glorification of violence….)
Compliance with CNIL obligations.
GDPR

["Designate a pilot","Map the processing of personal data","Prioritize the actions to be taken","Manage the risks"]

Organize internal processes, Document compliance.

You must: inform clients of their access rights, obtain clients' consent, ensure the security of the system
d’information, Assurer la confidentialité des données, Indiquer une durée de conservation des données,Analyser l’impact
in case of high risk to people's rights, appoint a DPO,

Administrative sanctions if you do not comply with European law regarding data collection are of the order
2 to 4% of annual revenue.

25
Here we speak in terms of tags.

Tags Action COMMENTS

<!DOCTYPE html> It is through this tag that we
begin
<html> You are initializing your code
<head> Header section Not visible on the site
<title> Title of your tab Put into <head>
site
<header> Header section Visible on the site
<body> Body of the site Type block
<footer> Footer section Type block
<nav> Browser, menu Type block
<article> Article (useful if you do) Put in the <body>
a blog for example) Type block
<div> Diverse section on the site Type block
<section> Diverse section on the site. Type block
<aside> Side section of a site Type block
<h1> à <h6> Main title to subtitle Type inline
<a> For the links Type inline (href->path)
<img> For the images Src -> chemin et alt -> nom
<button> For the buttons
<ul> Initialize a bullet list
<li> Bullet list
<ol> Numbered list
<p> For the paragraphs
<hr> Draw a line Type inline
horizontally
<br> Go to the line and skip one
line
<b> Bold text
<i> Texte en italique
<mark> Highlight a text
<strong> Highlight a text
<em> Same as strong
< !-- ………. ---> To comment on a
piece of code
<table> Create a table
<th> Create the header of a table
<tr> Create a line for the
table
<td> Create a cell for the
tableau
<caption> Create a legend
<span> Split the sentence we Type inline
wants to put in
evidence
26
<iframe> Create a window
<script> To integrate JavaScript
in the HTML page
<link> To import a Rel sheet and href
CSS style or JavaScript In principle in the <head>
<style> To integrate CSS, in principle, in the <head>
HTML page
<meta> This is where we can Charset = « UTF-8 »
set up the page for the Name
seo Content
Put it in the <head>
<form> Create a form
<input> Create a field Type : radio, text, submit,
checkbox, date, email,
number, range, search, tel,
time, url
<textarea> Create a field for
several lines of text
<select> Create a field with
options
<option> The different options of value
<select>
<i> The icons

27
Here we speak in terms of selectors, properties, attributes, and ids.

Selectors Properties Action Comments

.class Select a class
#id Select an id
* Select all the
elements
p Select the p tag
Div, p Select all the div and
all the p
Div p Select all the p to
the interior of the div
Div > p Select all the p that
have the parent div
Div + p Select all placed p
after a div
[target] Select all items
with the target attribute
:active Select all the
active ingredients
color Changer la couleur d’un Rgb or green or hex value
element
Background color Change the background color Rgb or green or hex value
Background image Put an image in the background url(image path)
background-repeat Set up the repetition
of an image
background-position Set the position
of an image
Border-style Put a border with a Dotted, dashed, solid,
style ["double","groove","ridge","inset"]
outset, inset, hidden, none
Border-radius Degree of the radius of the In px
border
Border color Border color Rgb or green or hex value
margin External margin
padding Inner margin
height Height of an element
Width Width of an element
text-align Align a text Center, left, right
text-decoration Underlined text, … Underline for example
text-transform Put the text all in Uppercase for example
uppercase for example
text-shadow Add shadow to the text
font-family Change the font of the text Times New Roman
28
font-style Text style Normal, italic,….
Font size Text size
Font-weight Text thickness
list-style-type Change the style of a list Circle for example
at chip
display Display an element in a Flex, none, inline, block
particular style
visibility To hide an element hidden
position Set the position of a Relative, absolute, fixed
element
overflow Create a block with a Visible, hidden, scroll, auto
scroll bar
float To initialize a block that Left, right
stay in the indicated position
opacity To adjust the transparency Example: 0.2
of an element
Border-image Put an image like url(…..)
border
background-size Background size
@font-face Import a font
customized
You can integrate some translate() Create a transformation of the Example
functions in CSS rotate() 2D block -webkit-transform:
scale() translate(50px, 100px);
skewX() transform: translate(50px,
skewY() 100px);
matrix()
rotateX() Create a transformation of the Example:
rotatey() 3D block transform: rotateX(150deg);
-webkit-transition Create transitions Example:
-webkit-transition: width 2s;
@keyframes Create animations Examples:
0% {background-color:
red;
25% {background-color:
yellow;}
50% {background-color:
blue;
100% {background-color:
green;

@media Example:
@media screen and (min-
width: 480px){
body{
background-color:
light green
}
}

29
Icion will speak in terms of functions, variables, operators, conditions, and events.

Operators Functions and others Variables Events Conditions Comments

+ If
- For
/ Switch
* Else
++ Else if +1
-- while -1
%
= Affects a
value
> var Initialize a
variable
> Function() Create a
function
return Send back a
value
// or /**/ For
comment on the
code
Number Type of
data
String Type of
data
Object Type of
data
var person = Create an object
{firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"};
onchange
onclick
onmouseover
onmouseout
onkeydown
onload
.toString() Method
.toExponential() Method
.toFixed() Method
.toPrecision() Method
Number() Return a
name

30
parseFloat() Convert
the argument in
a figure at
comma
parseInt() Convert
the argument in
an integer
var cars = [ Create a
"Volvo", "BMW"]; table
pop() Method that
erase it
last
element of a
tableau
push() Method that
add a
new
element in
a painting (to the
end)
shift() Method that
return a
value of
tableau
unshift() Method that
add a
new
element
.length Allows to
to know the
size of a
element
splice() Method that
add a
new
element to one
table
concat() Method that
allows to
merge two
pictures
slice() Method that
allows to
create a
new board
sort() Method that
allows sorting
the data
by order
alphabetical
in a
table

31
Here we will talk in terms of functions, variables, functions, conditions, and objects.

You can definitely put PHP in HTML, but it is better to keep everything separate.

Operators Functions Variables or Objects Conditions Comments

constants
+ If
+ For
- Switch
/ Else
* Else if
++ while +1
-- -1
%
= Assign a
value
>
<
<?php ?> Open and
close the code
PHP
echo To display
elements
$ Initialize a
variable
Function name() Create a
function
$GLOBALS Variable that
allows to be
used on everything
your php code
Global variable
print Permit
to display the
variables
define() Allows to
define some
constants
return Return a
value

32
$cars = Create a
array("Volvo", table of
BMW values
"Toyota");
count() Allows it
name
elements
foreach Search for a
element in
a painting
sort() Sort them
data of a
table by
order
ascendant
rsort() Sort them
data from a
table by
order
descendant
asort() Associate some
values to some
information
of the table
ksort() Associate some
keys to some
elements of a
tableau
arsort()
krsort()
$_SERVER Global variable
$_REQUEST
$_POST
$_GET
$_FILES
$_ENV
$_COOKIE
$_SESSION

33
classes comments type

row in additional div

col-*-* in the div infinite

col-sm-* small columns tablet

col-xs-* very small columns phone
col-md-* average columns portables
col-lg-* large columns desktop computers
.table-striped
.table-bordered
.table-hover
.table-condensed
table in table tag
.table-responsive in div
.active in tr
success in tr
.info in tr
.warning in tr
.danger in tr
rounded image in img tag
img-circle in img tag
img-thumbnail miniatures in img tag
thumbnail gallery in div
embed-responsive-item videos in iframe
jumbotron in div
container
page-header at the top in div
well text in div
alert alert-success in div
alert alert-info in div
alert alert-warning in div
alert alert-danger in div
alert link in tag a
alert-dismissible

34
close close an alert in tag a
data-dismiss="alert" in tag a
alert alert-danger fade in in div
btn in button
default button in button
primary button in button
success button in button
info button in button
warning button in button
btn-danger in button
link button in button
.btn-lg in button
.btn-md in button
.btn-sm in button
.btn-xs in button
btn-block in button
btn btn-primary active activate a button in button
button button-primary disabled disable a button in button
button group group the buttons in div
btn-group btn-group-justified in div
glyphicon glyphicon-name drawing in Spain
badge badge in span often after button
label label-default label in span
progress progress bar in div supp
progress bar progress bar in div inf
role="progressbar" progress bar in div inf
aria-valuenow="" progress bar in div inf
aria-valuemax= progress bar in div inf
minimum aria value progress bar in div inf
.progress-bar-success progress bar in div inf
.progress-bar-info progress bar in div inf
.progress-bar-warning progress bar in div inf
.progress-bar-danger progress bar in div inf
.progress-bar-striped progress bar in div inf
.sr-only visible percentage in div inf
pagination pagination in ul
active pagination in the
disabled pagination in the
pagination pagination-lg pagination in ul
breadcrumb Ariadne's thread in ul
pager next et previus in ul
previous in the
next in the
list-group group the lists in ul
list group item in the
.panel panel in additional div
35
panel body panel in div inf
panel heading panel in div inf
panel-footer panel in div inf
dropdown brochure menu in class supp
caret arrow in span
type=button in button
data-toggle = dropdown
divider menu separation in the
dropdown-menu in ul
dropdown-header in head menu in the
dropup in div
role="presentation" in
role="menuitem" in a
data-toggle="collapse" collapse in button
data-target in button
collapse in div
nav nav-tabs in ul
nav nav-pills in ul
data-toggle="pill" in a
navbar navbar-default create a navbar in nav
fluid container in div supp
navbar-header in div inf
navbar brand in a
nav navbar-nav in ul
navbar navbar-inverse in nav
navbar navbar-inverse navbar-fixed-top fixed navigator in nav
navbar navbar-inverse navbar-fixed-bottom in nav
form-group in additional div
checkbox
inline form online form in form
form-control frame the form in textarea, input, select
col-sm-offset-2 col-sm-10
control-label col-sm-2
horizontal form take the entire width
rows number of lines in textarea
cols columns
inline checkbox
small input form control
media media in additional div
media-left media in div inf
media body media in div inf
media-heading media in h4 for example
media-right media in additional div
media object media in img
class="carousel slide" carousel in additional div
data-ride="carousel" carousel in the additional div

36
carousel indicators carousel in oil
data-target="#myCarousel" carousel in the
data-slide-to="0" carousel in there
carousel-inner carousel in div inf
item carousel in infinite div
left carousel control carousel in a
right carousel-control carousel in a
modal fade modal
role="dialog" modal
modal dialog modal in additional div
modal-content modal in additional div
modal-header modal in div inf
modal-title modal in h4
modal footer modal in div inf
data-dismiss="modal" modal in button
data-toggle="modal" modal in button
data-target="#myModal" modal in button
data-toggle="tooltip" toolpip in a
data-placement="top" toolpip in a
data-toggle="popover" popover in a
data-content="Some content inside the popover" popover in a
data-spy="scroll" popover in body
data-target=".navbar" popover in body
data-offset="50" popover in body
data-spy="affix" attach in nav
data-spy="scroll" scroll in body
data-target='.navbar' scroll in body

37
Selectors Explanations Event functions

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

$("p") select the p tags

$("#test") select the test id
$('.test') select the test class
$("*") select all
$(this) select the current document
$("[Link]") select all p with the class intro
$("p:first") select the first p
$('ul li:first') select the first li of ul
$("ul li:first-child") select the first li of all the ul
$("[href]") select all elements with an href attribute
$("a[target='_blank']") select all a with an attribute target = _blank
a[target!='_blank'] select all a with an attribute not equal to _blank
$(':button') select all buttons and input of type button
$("tr:even") select the even rows
$("tr:odd") select the odd rows
on click click
at double click dblclick
the mouse pointer enters an html element mouseenter
the mouse pointer leaves an HTML element mouseleave
on mouse hover hover
when the mouse is over an HTML element mouseup
when the mouse is over an HTML element mousedown
to the selection of an element focus
when we deselect an item blur
can attach multiple methods to an element on
hide content hide

38
show a content show
toggle between show and hide toggle
appearance of an element with effect fadeIn
disappearance of an element with effect fadeOut
switcher between fadeIn and fadeOut fadeToggle
switch to a given opacity fadeTo
slide an element down slide down
slide an element up slide up
switch between slideUp and slideDown slideToggle
Animate content animate
Stop an animation stop
callback function callback
return the text contained in an html element text
return the content of the elements including the html html
returns the value of a form val
retrieve the value of the attributes attr
insert content at the end of the selected items learn
insert content at the beginning of the selected elements prepend
insert content after the selected element after
insert content before the selected element before
erase the selected elements remove
remove the children of the selected element empty
add one or more classes to the element addClass
remove one or more classes from the element removeClass
switch between roveClass and addClass toggleClass
retrieve or return the style of an attribute css
dimensions width()
dimensions height()
dimensions innerWidth()
dimensions innerHeight()
dimensions outerWidth()
dimensions outerHeight()
return all parents of an element parent()
return all parents of an element parents()
return all parents of an element parentsUntil()
return all direct children of an element children()
search for the descendants of an element find()
returns all sibling elements of an element siblings()
return the closest brother next()
return all the next brother elements nextAll()
returns the brothers between two arguments nextUntil()
return the closest brother prev()
return all the next elements brothers prevAll()
return the brothers between two arguments prevUntil()
return the first element of a specific element first()
return the last element of a specific element last()
39
returns an element with the index of the selected element eq()
allows to specify a criterion filter()
return all items that do not meet the criteria not()
jQuery and AJAX is FUN!!! AJAX
<p id="p1">This is some text in a paragraph.</p>
$("#div1").load("demo_test.txt");
$.get(URL,callback); $.get()
$.noConflict()

40
Wordpress Plugins Browser plugins Tools Comments
The inspector Provided in all the
browsers
Elementor Constructeur de pages
WPS Trick Allows you to know
quickly information
on the server
JackMail Newsletter For newsletters
Caldera Forms For the forms
WPS Hide Login To secure your site
JetPack Statistics, security, ..........
Updraft Plus Backup
WooCommerce Free extension for the e-
commerce
Quick Adsense Connects to Google AdSense
Yoast SEO For SEO
Write up For SEO
Advanced Custom Fields Allows you to create mushrooms
personalized
Custom Post Type UI Create new types of
contents
Code Snippets To add new
types of codes quickly
RDS bar Powerful tool for SEO
CTRL+F5 Force to clear the cache of the
browser
Sublime Text Text editor
Brackets Text Editor
Filezilla FTP software
Css viewer See the CSS on hover of the
mouse
Web developer Powerful tool for the
web developers
colorzilla See the color code of a
element of a site on hover
Builtwith See how it is built
a site

41
Some Important Sites

Graphic design Tools Referencing Hosts Fonts, icons,…

[Link] [Link] [Link] [Link] [Link]
m/explore [Link]/[Link]/ [Link] com/
[Link] [Link] [Link] [Link] [Link]
[Link] t/ [Link]/ [Link] .com/fr/
[Link] [Link] [Link]
m/[Link]/un [Link]/
[Link] longitudes
.fr/ [Link]
[Link]
[Link]/

42
Label Definition
Attribute They are entities that define the properties of objects.
Constant It is a value that we initialize and that will never change.
Class A class is a set of objects sharing
certain properties
CMS It is a content manager
CSS Language to format a website
Domain It is the name that constitutes the URL of your site.
Child It's a link in the code
Event It is an action that occurs in a certain context.
Function It is a programming routine
Framework It is a software library that allows you to gain
of time.
FTP It is a file transfer protocol
Host It is an entity whose purpose is to put in place
disposition of internet users of websites designed and managed
by third parties.
HTML It is a language that allows you to create static sites.
HTTP It is a protocol that puts communication on the Internet
between the client and the server.
Id It is a unique identifier on the same web page
Javascript It is a language that allows to animate web pages
Subject It is a code element that has a structure
internal and a behavior
Method A method refers to a member routine of a class.
Parent It is a link in the code
PHP It is a language that allows you to communicate with the server and
a database
Property It is a characteristic of an element
GDPR This is the European data protection law.
SMTP It is a protocol that allows the sending of emails.
SSH It is a session protocol
SSL It is a security certificate on a site.
URL the uniform naming of a localized resource
Variable It is a value that is stored and can take
different values

43
44