Affichage des articles dont le libellé est html5. Afficher tous les articles
Affichage des articles dont le libellé est html5. Afficher tous les articles
samedi 2 janvier 2016
TP N°7 T.W
c'est une suite du TP n°6 , vous devez changez la balise "div" de class centre en iframe ; et créer un formulaire d'inscription (comme l'image en haut) , les détails sont dans le lien en-dessous ↓↓
jeudi 31 décembre 2015
examen T.W avec correction
Examen de Technologie du Web (HTML5,CSS3,JavaScript) destiné aux SMI "science mathématique et informatique " - S3.
L' Examen contient 5 Questions :
- Question 1 : sur HTML 5 ; Dessinez le résultat visuel d'une page HTML.
- Question 2 : sur HTML5 ; Corrigez les erreurs et ajoutez le code manquant pour qu'il soit un code HTML5 validé.
- Question 3 : sur JavaScript ; ecrire une fonction JS.
- Question 4 : sur CSS ; Définir des Styles avec les propritétés donnée.
- Question 5 : sur CSS ; Expliquer a quelles balises les styles s'aplique
Examen T.W avec Correction
lundi 28 décembre 2015
TP devoir HTML
Le but est de réaliser la page en haut ↑↑
c'est une page réaliser avec la balise <iframe>
- Dans la page index.html :
- Écrire une page index.html qui comprend 2 cadres (découpage horizontal en frames)
- Le premier cadre s’appelle entete.html et prend 20%
- Le deuxième est formé de deux cadres : gauche.html et droite.html qui occupe 30% de la colonne
- Le titre de la page index doit être « site de vente en ligne ».
- Dans la page entete.html
- L’arrière plan de la page est de couleur : #74D0F1.
- Le titre « Magazin en ligne » est centré, utiliser la balise<h1>
- Insérer l’image banniere.gif sur 100% de la largeur et 40px de hauteur.
- Enlever le scrolling et la hauteur de la page est fixe
- Dans la page droite.html :
- L’arrière plan de la page est de couleur : #74D0F1.
- Les 4 lignes représentent une liste à puce
- Chaque ligne représente un lien hypertexte vers respectivement gauche.html, vente.html, tarifs.html et contact.html (NB : Les liens ne sont pas soulignés)
- Les pages s’affichent dans le cadre de gauche (gauche.html)
- Dans la page gauche.html :
- Pour le texte « Produits disponibles… » appliquez la mise en forme suivante :
- Centré, taille de police :5 , couleur d’arrière plan :#00CCFF
- Gras
- Nommer chaque élément du formulaire.
- Réaliser le tableau de la figure en respectant les mises en forme suivante.
- le texte est de taille 12 italique, times new roman
- espacement autour du texte est de 7 px
- espacement entre cellule de 4px
Télécharger TP Devoir
Télécharger Solution TP Devoir
samedi 26 décembre 2015
TP n° 6 T.W
Créer une page HTML comme l'image en haut en utilisant dans la mise en forme les positionnement ( position absolue , position relatif , position fixe ...) et aussi float pour les images .
Le texte dans le Centre :
" La Faculté des Sciences Ben M’Sik a ouvert ses portes en 1984. Elle est rattachée à l’Université Hassan II - Mohammedia - Casablanca qui regroupe six établissements universitaires réparties sur deux campus : le campus de Casablanca et le campus de Mohammedia.
Dès son ouverture, la Faculté des Sciences Ben M’Sik a accordé un intérêt particulier au développement de la recherche scientifique parallèlement à sa mission d’enseignement et de formation.
De 1984 à 2003, la FSBM a dispensé divers formations de type premier cycle (DEUG) et deuxième cycle (Licences es-sciences : Bac+4) dans divers spécialités.
A partir de 1989, les premières formations de 3ème cycle (CEA et DES) ont commencé grâce à la mise en place d’un certain nombre d’équipes et de laboratoires de recherche. "
Télécharger TP n°6
Télécharger Solution TP n°6
samedi 14 novembre 2015
TP n°4 HTML5
TP n°4 en HTML et CSS :
Télécharger TP
Ajoutez à cette page HTML une Mise en forme (CSS) convenable :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Rappel HTML
Sommaire
Nous allons nous entraîner sur cette page pour apprendre à
changer l'affichage de certains éléments :
Un texte
Un tableau
Des liens
Le sélecteur de classe
Un texte
Un petit texte que l'on va tenter d'aérer un peu à l'aide des feuilles
de style. Il serait bon en effet que les différents paragraphes d'une
page ne soient pas collés contre les différentes bordures de la
fenêtre de votre navigateur et soient de plus un peu
décalés par rapport aux titres.
C'est ce que nous essaierons de faire à l'exercice 5.
Un tableau
Un tableau qui recense une liste de livre en mentionnant titre,
auteur, éditeur et année de parution :
<table>
<tbody><tr>
<td> La vie mode d'emploi</td>
<td> Georges Perec</td>
<td> Le Livre de Poche</td>
<td> 2002 (1978)</td>
</tr><tr>
<td> Le palace</td>
<td> Claude Simon</td>
<td> Les Éditions de Minuit</td>
<td> 2000 (1962)</td>
</tr><tr>
<td>La splendeur du Portugal</td>
<td> Antonio Lobo Antunes</td>
<td> Points Seuil</td>
<td> 2000 (1998)</td>
</tr>
</tbody></table>
Des liens
Nous allons jouer ici sur l'aspect que l'on peut donner aux
liens. Commençons par pointer quelques pages utiles pour l'édition des pages web : celle de
<a href="http://www.w3.org/">w3c</a>,
l'organisme de référence pour les différentes normes html et
<a href="http://www.w3schools.com/default.asp">w3c school</a>
qui contient quelques tutoriaux qui pourront vous être utiles et
surtout des listes de balises avec leurs attributs.
Le sélecteur de classe
Ici, nous allons apprendre à affecter un style à plusieurs balises
en même temps grace à l'attribut <tt>class</tt>. Ceci est en
particulier utile lorsque l'on veut attribuer des affichages
différents à une même balise. Par exemple, lorque l'exercice 8 aura
été fait, ce paragraphe restera semblable au paragraphe de la partie
<b>"Un texte"</b> alors que le paragraphe suivant sera écrit en rouge.
Ce paragraphe est encadré par les balises <tt><p></tt> et
<tt></p></tt>
comme le précédent mais on va y rajouter l'attribut
<tt>class="special"</tt>. Tant que les feuilles de
styles ne seront pas éditées, il n'y aura aucune différence, après
l'exercice 11, il y en aura une.
</body></html>
<html>
<head>
</head>
<body>
Rappel HTML
Sommaire
Nous allons nous entraîner sur cette page pour apprendre à
changer l'affichage de certains éléments :
Un texte
Un tableau
Des liens
Le sélecteur de classe
Un texte
Un petit texte que l'on va tenter d'aérer un peu à l'aide des feuilles
de style. Il serait bon en effet que les différents paragraphes d'une
page ne soient pas collés contre les différentes bordures de la
fenêtre de votre navigateur et soient de plus un peu
décalés par rapport aux titres.
C'est ce que nous essaierons de faire à l'exercice 5.
Un tableau
Un tableau qui recense une liste de livre en mentionnant titre,
auteur, éditeur et année de parution :
<table>
<tbody><tr>
<td> La vie mode d'emploi</td>
<td> Georges Perec</td>
<td> Le Livre de Poche</td>
<td> 2002 (1978)</td>
</tr><tr>
<td> Le palace</td>
<td> Claude Simon</td>
<td> Les Éditions de Minuit</td>
<td> 2000 (1962)</td>
</tr><tr>
<td>La splendeur du Portugal</td>
<td> Antonio Lobo Antunes</td>
<td> Points Seuil</td>
<td> 2000 (1998)</td>
</tr>
</tbody></table>
Des liens
Nous allons jouer ici sur l'aspect que l'on peut donner aux
liens. Commençons par pointer quelques pages utiles pour l'édition des pages web : celle de
<a href="http://www.w3.org/">w3c</a>,
l'organisme de référence pour les différentes normes html et
<a href="http://www.w3schools.com/default.asp">w3c school</a>
qui contient quelques tutoriaux qui pourront vous être utiles et
surtout des listes de balises avec leurs attributs.
Le sélecteur de classe
Ici, nous allons apprendre à affecter un style à plusieurs balises
en même temps grace à l'attribut <tt>class</tt>. Ceci est en
particulier utile lorsque l'on veut attribuer des affichages
différents à une même balise. Par exemple, lorque l'exercice 8 aura
été fait, ce paragraphe restera semblable au paragraphe de la partie
<b>"Un texte"</b> alors que le paragraphe suivant sera écrit en rouge.
Ce paragraphe est encadré par les balises <tt><p></tt> et
<tt></p></tt>
comme le précédent mais on va y rajouter l'attribut
<tt>class="special"</tt>. Tant que les feuilles de
styles ne seront pas éditées, il n'y aura aucune différence, après
l'exercice 11, il y en aura une.
</body></html>
Télécharger TP
mercredi 28 octobre 2015
TP n°3 HTML
TP n°3 en HTML Sur les balises <img> , <map> et <table> :
Télécharger TP
Correction du TP
une petite application de la partie quand on a vu dans le cours sur les images "map" et les tableaux c'est un bon TP d'application pour bien maîtriser les balises comme <img> , <map> et <table> ...
Télécharger TP
Correction du TP
vendredi 23 octobre 2015
Notepad++
Notepad++ est un programme conçu spécifiquement pour l'édition de code source. Il est compatible avec plusieurs langages de programmation (comme HTML).
jeudi 22 octobre 2015
TP n°1 et n°2 HTML5
TP n°1 et TP n°2 de Technologie de Web :
TP n°1 contient presque tout les balises d'entête , aussi la syntaxe d'une page html , par exemple :
<! doctype html >
<html>
<head>
<meta charset="utf-8" />
<title>exemple</title>
</head>
<body>
<p>ma premier page HTML </p>
</body>
</html>
TP n°2 contient Flavicon et Balises de Mise en forme de base , liens et images, c'est un TP pour mieux améliorer les bases de HTML5 et les maîtriser .
HTML5↓↓↓
Télécharger TP
Inscription à :
Articles (Atom)
