SlideShare une entreprise Scribd logo
1  sur  3
Télécharger pour lire hors ligne
TD/TP : CSS Technologie du web
2
<!DOCTYPE html> <html lang="fr"><head><title>CSS</title>
<link rel="stylesheet" href="style2.css" /><meta charset="utf-8" /></head>
<body>
<header>
<img src="html.png" class="logol">
<img src="html.png" class="logor">
<h3>Langages du web</h3>
</header>
<div>
<nav>
<ul>
<li> <img src="html.png" class="ph"> <a href="d.html"> HTML </a> </li>
<li> <img src="css.png" class="pcss"> <a href="v.html"> CSS </a></li>
<li> <img src="php.png" class="pphp"> <a href="ed.html"> PHP </a></li>
<li> <img src="mysql.png" class="psql"> <a href="ex.html"> MYSQL </a></li>
</ul>
</nav>
<main>
<section>
<h4> Définition de HTML </h4>
<p>La différence est qu'une <span class="cle">CSS</span> n'est prévue ni pour
être visualisée par l'internaute ni pour être affichée directement dans le navigateur.
Une feuille de styles n'est qu'un document qui définit comment une page <span
class="cle">HTML</span> doit être affichée. Le navigateur Web s'occupe de
charger la <span class="cle">CSS</span> sans que l'internaute doive intervenir ;
une <span class="cle">CSS</span> a pour vocation d'agir en arrière plan. En
utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu
d'être bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le
texte est toujours orange.
</p>
</section>
<aside>
<h4> Autre</h4>
<ul>
<li><a href="j">javascript</a></li>
<li><a href="x">xml</a></li>
<li><a href="d">dtd</a></li>
</ul>
</aside>
</main>
</div>
<footer>
Contactez nous :contact@enp.dz <br>
<address> Adresse : ENP Oran </address>
</footer></body></html>
TD/TP : CSS Technologie du web
3
CSS
body, html {
height: 100%;
margin: 0;
padding: 0;
}
header {
width: 80%;
border: 1px solid black;
background: #F2FFFF;
margin-bottom:1%;
margin-top:1%;
position: relative;
left:10%;
right:10%; }
img.logol {width:55px; height:55px; float:left;}
img.logor {width:55px; height:55px; float:right;}
header h3{text-align:center;}
li img {width:12px; height:12px;}
ul {list-style:none;padding:3px;}
p { text-align:justify;
margin-left:1%;
margin-right:1%;
margin-top:3px;
background-color: rgba(51, 255, 249);}
div{
width: 80%;
border: 1px solid black;
background: #F2FFFF;
position: relative;
left:10%;
right:10%;
}
nav {border: 1px solid black;
background : #EFEFEF;
margin:5px;
width: 10%;
display:inline-block;
vertical-align:top;
}
main{
width: 86%;
border: 1px solid black;
TD/TP : CSS Technologie du web
4
background: #F2FFFF;
margin-left:10px;
margin:5px;
display:inline-block;
}
section {display:inline-block;
border: 1px solid black;
background : #EFEFEF;
margin:1%; width:83%;
}
aside { display:inline-block;
border: 1px solid black;
background: #EFEFEF;
margin:1%;
vertical-align:top;
}
footer {border: 1px solid black;
background : #EFEFEF;
margin-bottom:1%;
margin-top:1%;
width: 80%;
position: relative;
left:10%;
right:10%;
display: block; }

Contenu connexe

Similaire à CSS interface

HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?Eroan Boyer
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOJulio Djomo
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
Html5 2
Html5 2Html5 2
Html5 2TECOS
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutantTheBest Icanbe
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Ghilas BELHADJ
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docxVincentBweka
 
HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. Cesar Gelvez
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web SémantiqueYounesOuladSayad1
 

Similaire à CSS interface (20)

HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Cours Code Part 2
Cours Code Part 2Cours Code Part 2
Cours Code Part 2
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Html5 2
Html5 2Html5 2
Html5 2
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
CSS 3
CSS 3CSS 3
CSS 3
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Tapestry
TapestryTapestry
Tapestry
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
 
HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité. HTML / CSS Media query et resposivité.
HTML / CSS Media query et resposivité.
 
Ns python-flask
Ns python-flaskNs python-flask
Ns python-flask
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 

CSS interface

  • 1. TD/TP : CSS Technologie du web 2 <!DOCTYPE html> <html lang="fr"><head><title>CSS</title> <link rel="stylesheet" href="style2.css" /><meta charset="utf-8" /></head> <body> <header> <img src="html.png" class="logol"> <img src="html.png" class="logor"> <h3>Langages du web</h3> </header> <div> <nav> <ul> <li> <img src="html.png" class="ph"> <a href="d.html"> HTML </a> </li> <li> <img src="css.png" class="pcss"> <a href="v.html"> CSS </a></li> <li> <img src="php.png" class="pphp"> <a href="ed.html"> PHP </a></li> <li> <img src="mysql.png" class="psql"> <a href="ex.html"> MYSQL </a></li> </ul> </nav> <main> <section> <h4> Définition de HTML </h4> <p>La différence est qu'une <span class="cle">CSS</span> n'est prévue ni pour être visualisée par l'internaute ni pour être affichée directement dans le navigateur. Une feuille de styles n'est qu'un document qui définit comment une page <span class="cle">HTML</span> doit être affichée. Le navigateur Web s'occupe de charger la <span class="cle">CSS</span> sans que l'internaute doive intervenir ; une <span class="cle">CSS</span> a pour vocation d'agir en arrière plan. En utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu d'être bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le texte est toujours orange. </p> </section> <aside> <h4> Autre</h4> <ul> <li><a href="j">javascript</a></li> <li><a href="x">xml</a></li> <li><a href="d">dtd</a></li> </ul> </aside> </main> </div> <footer> Contactez nous :contact@enp.dz <br> <address> Adresse : ENP Oran </address> </footer></body></html>
  • 2. TD/TP : CSS Technologie du web 3 CSS body, html { height: 100%; margin: 0; padding: 0; } header { width: 80%; border: 1px solid black; background: #F2FFFF; margin-bottom:1%; margin-top:1%; position: relative; left:10%; right:10%; } img.logol {width:55px; height:55px; float:left;} img.logor {width:55px; height:55px; float:right;} header h3{text-align:center;} li img {width:12px; height:12px;} ul {list-style:none;padding:3px;} p { text-align:justify; margin-left:1%; margin-right:1%; margin-top:3px; background-color: rgba(51, 255, 249);} div{ width: 80%; border: 1px solid black; background: #F2FFFF; position: relative; left:10%; right:10%; } nav {border: 1px solid black; background : #EFEFEF; margin:5px; width: 10%; display:inline-block; vertical-align:top; } main{ width: 86%; border: 1px solid black;
  • 3. TD/TP : CSS Technologie du web 4 background: #F2FFFF; margin-left:10px; margin:5px; display:inline-block; } section {display:inline-block; border: 1px solid black; background : #EFEFEF; margin:1%; width:83%; } aside { display:inline-block; border: 1px solid black; background: #EFEFEF; margin:1%; vertical-align:top; } footer {border: 1px solid black; background : #EFEFEF; margin-bottom:1%; margin-top:1%; width: 80%; position: relative; left:10%; right:10%; display: block; }