Your browser doesn't support the features required by this website, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.


~ Difficulty : Level 1* ~

Sofiane Chaieb for

* How to become an experimented Newbie  in HTML5 technologies.

What you will see today...


HTML and the web

What is the web ?


The World Wide Web (abbreviated as WWW and commonly known as the Web), is a system of interlinked hypertext documents accessed via the Internet.

Tim Berners-Lee invented the web in 1991. He also developed 3 essential technologies: The URL*, the HTML and the HTTP*


False belief : Web = internet.

In fact, Web is a part of internet.

*Uniform Resource Locator
*Hypertext Transfer Protocol

What is HTML ?

HyperText Markup Language (HTML) is the main markup language (langage de balisage) used for creating web pages that can be displayed in a web browser.

HTML5 Markup (balisage)
HTML5 Markup
Famous web browsers
Famous web browsers
Types of languages



JavaScript Pascal
Ruby Java
Perl Python
  • Ease of implementation.
  • Better portability.
  • resource-intensive.

Web technologies from prehistory

Flèche This is the one that we
are going to cover today !

So.. What is HTML5 ?

HTML5 = HTML + CSS + Javascript

HTML Flèche






HTML5 basics

Starting with web programming

Notepad Index

HTML tags (balises)

In pairs tags :

<body attribut=" " > This is the body of your website </body>

Unpaired tags :

<img src="http://#" alt="name" />

HTML5 web page structure

		<!DOCTYPE html>
		               <head> <!-- En-tête -->
					                     <meta charset=" utf-8 " />
					                           <title> Title </title>
														               <body> <!-- Corps -->
																		                        <!-- Here is the body of the web page -->


You can see the source code of any web page by typing Ctrl + U.

Head Content :

		<meta charset="utf-8">
		<title >here the title< </title>
		<meta name="Description" content="here the page description">
		<meta name="keywords" lang="fr" content="here the page keywords">
		<meta name="author" lang="fr" content="your name">
		<meta name="robots" content="index,follow">
		<meta name="reply-to" content="your@email">
		<link rel="shortcut icon" href="link to the .ico" />
		<link rel="stylesheet" href="link to the .css" media="screen">
		<script src="link to the .js" > </script>

Body Content : Text organization tags

Paragraphs <p></p> and back to the line <br/>

<p> Hi everybody ! <br/> What's up ? </p>

Titles <h1></h1> to <h6></h6>

<h1> This is a very important title </h1>

Making significant the text with <em></em> and <strong></strong>

<p> This is an <em> important text </em> </p>
This is a <strong> more important text </strong> </p>

Marking the text with <mark></mark>

<p> This will <mark> mark the text </mark> </p>

Unordered lists <ul></ul> and <li></li>

		<li> Sousse </li>
		<li> Tunis </li>
		<li> Bizerte </li>

Ordered lists <ol></ol> and <li></li>

		<li> ENISo </li>
		<li> INSAT </li>
		<li> ENSI </li>

Hyperlinks <a></a>

A link to another website (absolute link)

<a href="" > Click here </a>

A link to another page of the website (relative link)

<a href="page2.html" > Click here </a> <!-- Same directory -->

<a href="www/page2.html" > Click here </a> <!-- Inside a directory -->

<a href="../page2.html" > Click here </a> <!-- Parent folder -->

A link to an anchor

<h1 id="part_id" ></h1>
<a href="#part_id" > Come back </a> <!-- In the same page -->
<a href="page2.html#part_id" > Come back </a> <!-- In another page -->

Display a tooltip on hover

<a href="" title="Page google" > Click here </a>

Open in a new window

<a href="" target="_blank" > Click here </a>

A link to send an email

<a href="" > Click here </a>

A link to download a file

<a href="" > Click here </a>

Images <img />

<img src="images/dance.png" alt="Amir en train de dancer" />


  • JPEG
  • PNG
  • GIF


		<img src="images/IE.png" alt="LogoIE"/>
		<img src="images/Firefox.png" alt="LogoFirefox"/>
		<img src="images/GoogleChrome.png" alt="LogoGoogleChrome"/>
		<figcaption>Famous Web Browsers</figcaption>



Life without CSS

Fbsanscss With CSS
Fbaveccss Without CSS

CSS position on a website

<!DOCTYPE html>
			      <link rel=" stylesheet " href=" style.css "/>
		      <p>We will try to do some changes to this paragraph !</p>

p {
		color: blue; /* We change the color */

<!DOCTYPE html>
			   	       p {
	        	             color: blue; /* We change the color */
		      <p>We will try to do some changes to this paragraph !</p>

<!DOCTYPE html>
		    <meta charset=" utf-8 " />
		      <title> Title </title>
	      <p  style=" color: blue; " /> We will try to do some changes to 
		      this paragraph ! </p>


I recommend you to always use the first method to save your time and ressources. It is also recommended for big websites.

Tap on key to go ahead.