HTML and CSS

–html–
–css–
–example–
–flexbox–
–boostrap–
–form–

Ressources

I invite you to look over the tutorial Mozilla Developer Network throughout the project.
W3School can also help you on some specific aspects.
For problems which seem unsolvable at first, you can visit Stackoverflow following a precise search on a search engine.
Grafikart proposes very interesting videos on various subjects.
On this site, a synthesis of HTML and CSS

You can use a text-editor such as Sublime Text or Visual Studio Code (do not confuse with Visual Studio) to create webpages.

 

 

Your director asks you to develop a web application to manage incidents in the Zoo.

Part 1 – Homepage of the application

Deliverable : zootickoon/mission2/…

A software to manage multichannel tickets collects all the support tickets emanating from various channels and gathers them in a single tag. This allows agents to answer each of them in a single tab. The different channels are : messaging services, social networks, chat, telephony, web form.

  • Create an index.html page in the  www of wamp.  Insert the corresponding links to the pages created afterwards.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma page de test</title>
  </head>
  <body>
    <img src="images/test.png" alt="Mon image de test">
  </body>
</html>
  • Add a title h1 to the index.html.
  • Present the Zoo sectors in English on this page. You will distinguish at least 4 sectors identified by a picture, having a code, a description, a surface area, the number of animals present and the maximum capacity.
  • Allow a sector picture to be zoomed when passing the mouse, using CSS. https://www.w3schools.com/howto/howto_css_zoom_hover.asp
  • Link the WordPress site to the hompage using a flex box menu.
  • Layout the Zoo sectors using flex box.   Other ressource

Part 2 – Incident tickets formsui

 

Deliverable : zootickoon/mission2/…

  • Create a web form to generate incident tickets formTicket.html  in the  www of wamp, allow to have different priority levels, a subject, a description, a status, the Zoo sector, the login of the claimer.
  • Respect your visual identity using a ticket.css file
  • Add the cdn of bootstrap  to your form
  • Modify the fields and add a button with the bootstrap classes
  • Add the form to the menu.
<form method="get" action="zaza.php">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

 

Information :

  • You can create an incident ticket in gitlab on your project, tab : issue.
  • A very famous software to create incident ticket is glpi, available in trial version, to understand how it works, on https://demo.glpi-project.org/front/central.php