HTML/CSS - Travaux Pratiques 2

Please download to get full document.

View again

of 5
152 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
Document Share
Documents Related
Document Transcript
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux pour créer vos fichiers. Chaque fichier doit avoir l extension.html et la structure suivante : Syntaxe !DOCTYPE html html lang= fr head meta charset= utf-8 / title ... /title /head body ... /body /html Une fois qu une page est terminée, il est nécessaire de vérifier si elle est valide en utilisant le validateur W3C sur : Par ailleurs, les sites qui peuvent vous être utiles sont : alsacreations at (site français) W3School at 1 Exercice (Headings) Pour se mettre en jambe, écrire une page tp2-exos1-2.html incluant les six niveaux d en-têtes possibles. 1 Solution: h1 titre de niveau 1 /h1 h2 titre de niveau 2 /h2 h3 titre de niveau 3 /h3 h4 titre de niveau 4 /h4 h5 titre de niveau 5 /h5 h6 titre de niveau 6 /h6 2 Exercice (Tables) Ajouter à la suite de la page tp2-exos1-2.html, après un espacement, le tableau suivant : Films classiques 16H 18H 20H 22H Salle 1 Star Wars Empire Strikes Again Return of the Jedi The Exorcist Salle 2 Dances with Wolves Gone with the Wind Salle : A Space Odissey The Conversation 5 Easy pieces Solution: caption classic Movie Day /caption th /th th 5 pm /th th 7 pm /th th 9 pm /th th 11 pm /th th screen one /th td star Wars /td td empire Strikes Back /td td return of the Jedi /td td the Exorcist /td th screen two /th td colspan= 2 dances with Wolves /td td colspan= 2 gone With the Wind /td th screen three /th td colspan= 2 2001: A Space Odyssey /td td the Conversation /td td 5 Easy Pieces /td 2 3 Exercice (Formulaire) En utilisant une table avec deux colonnes (on n hésitera pas à placer une ligne vide dans la table pour créer un espacement), construire le formulaire de la figure suivante (fichier tp2-exos4.html). On utilisera la balise label avec l attribut for. On utilisera les balises fieldset et legend (avec l attribut accesskey). Après avoir compris le rôle de la classe under, on intégrera les règles de style ci-dessous : style type= text/css body { width:600px; margin-left:auto; margin-right:auto; } form { background-color:#efefef; }.under { text-decoration:underline; } /style Solution: registration.html !DOCTYPE html html lang= fr head meta charset= utf-8 / title registration /title style type= text/css body { width:600px; margin-left:auto; margin-right:auto; } form { background-color:#efefef; }.under { text-decoration:underline; } /style /head 3 body h2 user Registration /h2 p please complete the following form to register with our site: /p form action= http://www.example.org/register.asp method= post id= frmregister fieldset legend accesskey= y about span class= under y /span ou (ALT + Y) /legend td label for= username user name: /label /td td input type= text name= txtusername size= 20 id= username / /td td label for= password password: /label /td td input type= password name= pwdpassword size= 20 id= password / /td td label for= confpassword confirm Password: /label /td td input type= password name= pwdconf size= 20 id= confpassword / /td td label for= firstname first name: /label /td td input type= text name= txtfirstname size= 20 id= firstname / /td td label for= lastname last name: /label /td td input type= text name= txtlastname size= 20 id= lastname / /td td label for= address: /label /td td input type= text name= txt size= 20 id= / /td td gender: /td td input type= radio name= radsex value= male / Male /td td /td td input type= radio name= radsex value= female / Female /td /fieldset fieldset legend accesskey= u about span class= under u /span s (ALT + U) /legend td label for= referrer how did you hear about us? /label : /td td select name= selreferrer id= referrer option selected= selected value= select answer /option option value= website another website /option option value= printad magazine ad /option option value= friend from a friend /option option value= other other /option /select /td 4 td label for= maillist Please select this box if you wish br / to be added to our mailing list br / small we will not pass on your details to any third party. /small /label /td td input type= checkbox name= chkmailinglist id= maillist / /td /fieldset p input type= submit value= register now / /p /form /body /html 5
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks
SAVE OUR EARTH

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!

x