TP HTML/CSS

Jean Engels Avec la contribution de Olivier Salvatori PHP5 Cours et exercices 2e édition - PHP 5 2 et 5 3 engels titre 6/04/09 9:25 Page 1 Jean Engels Avec la contribution de Olivier Salvatori

- TP n˚1 - Formulaires et int´egration Web/PHP

– un bouton de soumission du formulaire (type="submit") Vous utiliserez la m´ethode post pour l’envoi du formulaire, en positionnant la valeur de l’attribut method de la balise form a "post" L’attribut action du formulaire devra pointer vers un script, nomm´e affiche parametres php, prenant en charge le traitement

introduction PHP – 5 séries dexercices PHP

4 PHP Séance n°4 – les fichiers et PHP 4 1 Exercice n°1 : ouvrir un fichier texte Question : ouvrir un fichier texte et mettre le contenu de la 1ere ligne dans une variable php et l'afficher 4 2 Exercice n°2 : ouvrir un fichier texte et l'afficher

Pratique de MySQL et PHP - Lagout

PHP 6 et MySQL 5 Créez des sites web dynamiques Larry Ullman 688 pages Dunod, 2008 Ajax et PHP Comment construire des applications web réactives Christian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, Mihai Bucica 312 pages Dunod, 2007 EJB 3 Des concepts à l’écriture du code Guide du développeur SUPINFO Laboratoire des technologies SUN

TD PHP - univ-rennes1fr

Exercice 2 : Inclusion d’en-tête et pied de page Le langage PHP permet d’inclure des fichiers dans d’autres Ceci permet alors de décomposer un code XHTML ou PHP en plusieurs parties logiques et d’insérer ensuite ces différentes parties dans un fichier PHP Utiliser l’inclusion de fichiers pour séparer, dans le fichier

TP4 - PHP/MySQL

des mails Réutilisez le résultat de l’exercice N°1 On propose de décomposer le système en trois sous-modules: - le formulaire d’authentification (authentification htm) - le programme traitant le formulaire (authentification php) - le programme de vérification d’accès à une ressource (autorisation php)

Module: OSI, INTERNET ET PROGRAMMATION WEB

1 6 Créez une nouvelle version 1 6 php qui permettra à la fois de créer et de traiter le formulaire de l’exercice précédent : - si le script est appelé sans paramètre il créera le formulaire

Formulairesetbasesdedonnées WebRappelsPHPPHP

WebRappelsPHPPHP&MySQLFinWebstatiqueCGIModulesApplicationsn-tier DiscussionHTTP ExemplederequêteHTTP GET/page-test htmlHTTP/1 1 Host:www exemple

TP HTML/CSS - LIMSI

(pages web html ou php) Dans ce r epertoire, cr eez un sous-r epertoire appel e tp1 dans lequel vous placerez les chiers de ce TP Exercice 1 - Contenu des pages 2) Cr eez un chier index html que vous sauvegarderez dans le sous-r epertoire tp1 et commencez a le remplir, avec

Séance d’Exercices Dirigés HTML et JavaScript

trois boutons disposés au bas du formulaire à cet effet et consiste à : 1 apporter une correction dynamique du formulaire en lançant la fonction correspondante, 2 effacer l’ensemble des sélections, 3 visualiser le corrigé complet du test Il existe une différence entre les notions de correction dynamique et de corrigé :

2019/2020

L'objectif de ce TP est de preparer une page d'introduction a la programmation web. Rappel : n'hesitez pas a consulter le cours correspondant surHtmletCss. !!! Attention, dans la suite,loginest a remplacer par votre nom d'utilisateur ENSIIE!!!

!!! Attention (bis) : ne faites surtout pas de copier/coller depuis ce sujet, car les caracteres generes dans le pdf ne

sont pas toujours les bons...!!!

!!! Attention (ter) : pour que le TP fonctionne, il faut que votre repertoire home et son sous-repertoirepublichtml

soient traversables donc vous devrez possiblement eectuer la commandechmod o+xsur ces repertoires, y compris sur

votre home :chmod o+x!!!

1)Creez un repertoire~/publichtml(public tiret bas html). Ce nom est indique dans la conguration du serveur

web donc ne pas le changer : 'est dans ce repertoire qu'Apache (le serveur web) ira chercher les documents a acher

(pages web .html ou .php). Dans ce repertoire, creez un sous-repertoire appeletp1dans lequel vous placerez les

chiers de ce TP.

Exercice 1 - Contenu des pages

2)Creez un chierindex.htmlque vous sauvegarderez dans le sous-repertoiretp1et commencez a le remplir, avec

sa declaration de document, son en-t^ete et le corps du document ne contenant qu'un titre de niveau 1 "Introduction

a la programmation web". N'hesitez pas a consulter la documentation duW3csurHtml.

3)Achez ce chier avec un navigateur web en allant a l'adressehttp://pgsql/~login/tp1ouhttp://pgsql/

login/tp1/index.html(par defaut les pages index sont achees). Les pages du repertoire~/publichtmlsont achees a l'adressehttp://pgsql/~login.

Note : depuis l'exterieur de l'ecole, l'adresse serahttp://pgsql.ensiie.fr/~login. Il peut y avoir une

fen^etre de connexion; auquel cas, les informations a donner sont les suivantes : compte : eleve mdp : ipw

4)Veriez l'encodage de votre page : attention a declarer dans votre documentHtmlque l'encodage est UTF-8,

ainsi quelorsque vous sauvegardez votre chier (sous emacs : Options!Mule!Set Coding Systems!For Saving

This Buer : utf-8).

5)Completez votre page an qu'elle contienne les elements suivants (voir gure 1) :

Le titre de la page "Programmation w ebENSI IE"d oitse trouv eren titre sur le na vigateur;

Un paragraphe de pr esentationde la page expliq uantson ob jectif,comme par exemple "Cette page a p our

objectif de faire le point sur quelques informations enHtml/Css.". Une partie de ce texte devra ^etre mise en

valeur en italique;

Un tableau de trois colonnes et au moins 4 lignes pr esentantplusieurs elementset ind iquants'ils doiv ent^ etre

geres par leHtmlou leCss(dierents de ceux donnes en exemple). Ce tableau doit comporter la legende 1 "HTML ou CSS?", et avoir une ligne d'en-t^etes comportant "HTML" en deuxieme colonne, et "CSS" en

troisieme colonne, ainsi qu'indique sur l'exemple (par defaut, il n'y a pas de bordures; pour acher les bordures,

il faudra creer une feuille de style, ce qui fait l'objet de l'exercice 2);

Un lien v ersune autre page, pagetest.html, comportant le m^eme titre, un unique paragraphe contenant le

texte suivant : "Cette page est une page de test (bac a sable).", et un lien retour versindex.html. Une liste de liens utiles, pr ecedesdu logo des sites (le logo du W3cest dans le repertoire/pub/pw); Une vid eode d emonstrationen Html5. Vous pouvez copier dans votre repertoiretp1les chiers w3schoolstabexample.mp4(typevideo/mp4) etw3schoolstabexample.ogv(typevideo/ogg) presents dans/pub/pw.

Code pour acher une videomovie.ogv:

6)Testez la validite de votre page (et corrigez votre html si besoin!) avec le validateur duW3c.

Exercice 2 - Presentation des pages

7)Creez une feuille de styleCssa laquelle vous ferez appel dans votre chierHtmlan de prendre en compte les

elements suivants de presentation : Les titres principaux doiv ent^ etrede couleur bleue ( #58acfapar exemple); Les tableaux doiv entcom porterun eb ordurevisible grise ( grey); Les liens doiv ents'ac heren cyanlorsque l'utilisateur passe sa souris dessus; Le texte mis en v aleurdoit s'ac heren r ouge(en plus d' ^etreen italique) ; Cr eezu neclasse sigleque vous appliquerez aux dierents sigles de la page (Html5, Css, W3c);

Et toute autre mo dicationde st ylequi v oussem blerap ertinente: v otrefeuille de st yledoit comp orterau

moins 10 declarations. N'hesitez pas a consulter la documentation duW3csurCss.

Exercice 3 - Structuration des pages

8)Modiez votre page principale an de lui ajouter :

Un en-t ^ete(balise
);

Un men ude na vigation(balise

) permettant d'aller a la page de test ou d'accueil;

Une sec tionprincipale ;

Un elementannexe (balise

) comprenant les liens vers les references; Et tout autre elements emantiquequi v ousparaitra p ertinent.

9)Modiez votre feuille de style pour positionner les elements precedents sur votre page, en utilisant de preference

Flexbox :

l'en-t ^etedoit faire toute la lar geurdu haut de la page et a voirune couleur de fond di erentedu con tenu

principal; le men udoit ^ etresur la gauc heet comp orterune couleur de fond di erente; les r eferencesdoiv ent^ etresur la droite de la page.

10)Adaptez votre feuille de style pour que votre page web soit lisible quelque soit la taille de votre fen^etre, et

notamment que : les r eferencesdisparaissen tsur un ecrande t elephone; le men udoit passer sous l'en-t ^etesur un ecrande t elephone.

Vous pouvez pour cela utiliser :

l'outil d erefo xOutils !Developpement web!Vue adaptative qui permet de tester l'achage de votre page

avec des tailles d'ecran variables; la page de w3schools.comsur le Responsive Web Design. 2

Figure1 { Modele de la premiere page HTML a creer

3quotesdbs_dbs18.pdfusesText_24

[PDF] TP HTML/CSS - LIMSI

PHP5 cours et exercices - Training Brussels

- TP n˚1 - Formulaires et int´egration Web/PHP

introduction PHP – 5 séries dexercices PHP

Pratique de MySQL et PHP - Lagout

TD PHP - univ-rennes1fr

TP4 - PHP/MySQL

Module: OSI, INTERNET ET PROGRAMMATION WEB

Formulairesetbasesdedonnées WebRappelsPHPPHP

TP HTML/CSS - LIMSI

Séance d’Exercices Dirigés HTML et JavaScript

TP HTML/CSS

2019/2020

1)Creez un repertoire~/publichtml(public tiret bas html). Ce nom est indique dans la conguration du serveur

Exercice 1 - Contenu des pages

2)Creez un chierindex.htmlque vous sauvegarderez dans le sous-repertoiretp1et commencez a le remplir, avec

3)Achez ce chier avec un navigateur web en allant a l'adressehttp://pgsql/~login/tp1ouhttp://pgsql/

4)Veriez l'encodage de votre page : attention a declarer dans votre documentHtmlque l'encodage est UTF-8,

This Buer : utf-8).

5)Completez votre page an qu'elle contienne les elements suivants (voir gure 1) :

Code pour acher une videomovie.ogv:

Your browser does not support the video tag.

6)Testez la validite de votre page (et corrigez votre html si besoin!) avec le validateur duW3c.

Exercice 2 - Presentation des pages

7)Creez une feuille de styleCssa laquelle vous ferez appel dans votre chierHtmlan de prendre en compte les

Exercice 3 - Structuration des pages

8)Modiez votre page principale an de lui ajouter :

Un en-t ^ete(balise
);

[PDF] TP HTML/CSS - LIMSI

TP HTML/CSS

2019/2020

1)Creez un repertoire~/publichtml(public tiret bas html). Ce nom est indique dans la conguration du serveur

Exercice 1 - Contenu des pages

2)Creez un chierindex.htmlque vous sauvegarderez dans le sous-repertoiretp1et commencez a le remplir, avec

3)Achez ce chier avec un navigateur web en allant a l'adressehttp://pgsql/~login/tp1ouhttp://pgsql/

4)Veriez l'encodage de votre page : attention a declarer dans votre documentHtmlque l'encodage est UTF-8,

This Buer : utf-8).

5)Completez votre page an qu'elle contienne les elements suivants (voir gure 1) :

Code pour acher une videomovie.ogv:

Your browser does not support the video tag.

6)Testez la validite de votre page (et corrigez votre html si besoin!) avec le validateur duW3c.

Exercice 2 - Presentation des pages

7)Creez une feuille de styleCssa laquelle vous ferez appel dans votre chierHtmlan de prendre en compte les

Exercice 3 - Structuration des pages

8)Modiez votre page principale an de lui ajouter :

Un en-t ^ete(balise );

Un en-t ^ete(balise
);