29
Présenté Par : Khouloud GHARBI

Html CSS

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Html CSS

Présenté Par : Khouloud GHARBI

Page 2: Html CSS

1996 2000 2005 20080

20000000

40000000

60000000

80000000

100000000

120000000

140000000

160000000

180000000

200000000

nombre de sites web

Evolution du nombre de sites web

Page 3: Html CSS

PAR OU COMMENCER?

Page 4: Html CSS

I. LES LANGAGES:

Page 5: Html CSS

1.HTML

Sert à taper le contenu de votre site web.

contient des informations logiques.

<Ceci est mon titre>

<c’est mon menu>

<c'est le texte principal de la page>

<là il y a une image>

Page 6: Html CSS

2.CSS

Sert à personnaliser votre site web

Mes titres sont en rouge et sont soulignés

mon texte est dans la police arial

mon nom est centré

mon menu a un fond blanc

Page 7: Html CSS

De quel logiciel je vais avoir

besoin pour créer mon site web ?

Page 8: Html CSS

II.L’EDITEUR:

Page 9: Html CSS

Bloc-notes !!

Page 10: Html CSS
Page 11: Html CSS

NOTEPAD++

Page 12: Html CSS
Page 13: Html CSS

III.LES BALISES

Page 14: Html CSS

1. Definition

<balise>

Invisibles aux visiteurs. MARQUEURS pour le

navigateur.

Une balise commence par "<" et se termine par ">"

Page 15: Html CSS

2.Types

Les balises existant par paire :

<title> titre du site </title>

Les balises seules :

<img /> Les commentaires

<!-- Commentaire -->

Page 16: Html CSS
Page 17: Html CSS

Dans la balise <head>

<title> Mon titre</title>

<link href =``infocept.ico`` rel=``icon`` / >

<meta />

3.Exemples

Page 18: Html CSS

Dans la balise <body>

<p> Un paragraphe </p>

<br /> Saut de ligne

<strong> texte en gras </strong>

<h1> Titre très important </h1>

<h6> Titre moins important </h6>

Page 19: Html CSS

IV.LES ATTRIBUTS

Page 20: Html CSS

Donner des précisions sur une balise

Essentiels ou optionnels

Utilisables avec tout type de balise

Par paires

Seules

1. Definition

Page 21: Html CSS

<img src="images/infocept.jpg" alt="infocept" />

Src : attribut

"images/infocept.jpg" : sa valeur

2. Exemple

Page 22: Html CSS

IV.LES LIENS

Page 23: Html CSS

<a href=``http:\\infocept.ept``> infocept </a>

<a href=``dossier\mapage.html``> texte </a>

<a href="mailto:[email protected]"> nous contacter </a>

1. Syntaxe

Page 24: Html CSS

<a href=‘‘#infocept’’ > infocept </a>

<a href=‘‘monsite.html#infocept’’ > infocept </a>

2. Les ancres

Page 25: Html CSS

MISE EN PLACE

CSS

Page 26: Html CSS

Stylesheet

Création d’un fichier d’extension .css

<link rel="stylesheet" media="screen" type="text/css" href="chemin\mon style.css" />

Page 27: Html CSS

Le CSS plus simple plus efficace

body{

background: url("data/infocept.jpg") no-repeat top center;

}

Page 28: Html CSS

ATTRIBUTSID / CLASS

CSS

Page 29: Html CSS

Class