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.

HTML5

~ Difficulty : Level 1* ~


Sofiane Chaieb for
and

* How to become an experimented Newbie  in HTML5 technologies.

What you will see today...

Web





HTML and the web



What is the web ?

Internet

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*

Warning

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

Interpreted

Compiled

PHP C/C++
JavaScript Pascal
Ruby Java
Perl Python
Flèche
  • 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
HTML Flèche

HTML

HTML+CSS
HTML+CSS Flèche

HTML+CSS

HTML+CSS+JS
HTML+CSS+JS Flèche

HTML+CSS+JS
html5





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

Warning

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

Head Content :

<head>
		<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>
</head>

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>
<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>

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

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

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

Hyperlinks <a></a>

A link to another website (absolute link)

<a href="http://www.google.com" > 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="http://www.google.com" title="Page google" > Click here </a>

Open in a new window

<a href="http://www.google.com" target="_blank" > Click here </a>

A link to send an email

<a href="mailto:yourpseudo@gmail.com" > Click here </a>

A link to download a file

<a href="yourfile.zip" > Click here </a>

Images <img />

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

Extensions

  • JPEG
  • PNG
  • GIF

Figures

  <figure>
		<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>
  </figure>

css3





CSS3



Life without CSS

Fbsanscss With CSS
Fbaveccss Without CSS

CSS position on a website

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

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

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

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

Warning

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.