DY

TP05: Dans un tp lointain, ..

Ce tp a pour but de récapituler l'ensemble des premiers tps vus ensemble. Nous allons ainsi revoir les structures HTML vus ensemble et les bases de CSS.

Objectif du tp

Créer une page d'accueil listant l'ensemble des épisodes cinématographique de la saga Star Wars et une page dédiée pour chaque épisode.

Structure de notre projet

Dans le tp précédent nous avons vu une première structuration de notre projet:

tp4/
├── imgs/
├── index.html
└── styles/

pour ce tp nous pouvons adopter la structuration suivante:

tp5/
├── episodes
├── imgs
├── index.html
└── styles

Page d'accueil et épisodes

Au sein de notre page d'accueil nous allons créer un listing des différents films de la saga.

Est-il utile de rappeler qu'il faut toujours commencer par le squelette HTML5 ?

Créer une section contenant:

Voici un lien vers les posters et les informations pour chaque film:

[
    {
        'title': 'The Phantom Menace',
        'synopsis': "After a millennia, an ancient evil returns seeking revenge. Meanwhile, Jedi Knight Qui-Gon Jinn discovers Anakin Skywalker: a young slave boy unusually strong with the Force.",
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 136,
        'date': 1996,
    },
    {
        'title': 'Attack of the Clones',
        'synopsis': 'Following an assassination attempt on Senator Padmé Amidala, Jedi Knights Anakin Skywalker and Obi-Wan Kenobi investigate a mysterious plot that could change the galaxy forever. ',
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 142,
        'date': 2002,
    },
    {
        'title': 'Revenge of the Sith',
        'synopsis': 'The evil Darth Sidious enacts his final plan for unlimited power -- and the heroic Jedi Anakin Skywalker must choose a side.',
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 140,
        'date': 2005,
    },
    {
        'title': 'Solo',
        'story': True,
        'synopsis': "Board the Millennium Falcon and journey to a galaxy far, far away in Solo: A Star Wars Story, an all-new adventure with the most beloved scoundrel in the galaxy. Through a series of daring escapades deep within a dark and dangerous criminal underworld, Han Solo meets his mighty future copilot Chewbacca and encounters the notorious gambler Lando Calrissian, in a journey that will set the course of one of the Star Wars saga’s most unlikely heroes. ",
        'director': 'Ron Howard',
        'scenario': 'Lawrence Kasdan, Jon Kasdan',
        'productors': 'Lucasfilm',
        'duration': 135,
        'date': 2018,
    },
    {
        'title': 'Rogue One',
        'story': True,
        'synopsis': 'From Lucasfilm comes the first of the Star Wars standalone films, “Rogue One: A Star Wars Story,” an all-new epic adventure. In a time of conflict, a group of unlikely heroes band together on a mission to steal the plans to the Death Star, the Empire’s ultimate weapon of destruction. This key event in the Star Wars timeline brings together ordinary people who choose to do extraordinary things, and in doing so, become part of something greater than themselves.',
        'director': 'Gareth Edwards',
        'scenario': 'Chris Weitz, Tony Gilroy',
        'productors': 'Lucasfilm',
        'duration': 133,
        'date': 2016,
    },
    {
        'title': 'A New Hope',
        'synopsis': 'With the planet-destroying power of the Death Star, the Empire looks to cement its grip on the galaxy. Meanwhile, farm boy Luke Skywalker rises to face his destiny. ',
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 125,
        'date': 1977,
    },
    {
        'title': 'The Empire Strikes Back',
        'synopsis': 'While the Death Star has been destroyed, the battle between the Empire and the Rebel Alliance rages on...and the evil Darth Vader continues his relentless search for Luke Skywalker. ',
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 127,
        'date': 1980,
    },
    {
        'title': 'Return of the Jedi',
        'synopsis': 'Luke Skywalker leads a mission to rescue his friend Han Solo from the clutches of Jabba the Hutt, while the Emperor seeks to destroy the Rebellion once and for all with a second dreaded Death Star. ',
        'director': 'George Lucas',
        'scenario': 'George Lucas',
        'productors': 'Lucasfilm',
        'duration': 135,
        'date': 1983,
    },
    {
        'title': 'The Force Awakens',
        'synopsis': 'Thirty years after the Battle of Endor, a new threat has risen in the form of the First Order and the villainous Kylo Ren. Meanwhile, Rey, a young scavenger, discovers powers that will change her life -- and possibly save the galaxy. ',
        'director': 'J. J. Abrams',
        'scenario': 'J. J. Abrams',
        'productors': 'Lucasfilm',
        'duration': 135,
        'date': 2015,
    },
    {
        'title': 'The Last Jedi',
        'synopsis': 'Rey has found the legendary Luke Skywalker, hoping to be trained in the ways of the Force. Meanwhile, the First Order seeks to destroy the remnants of the Resistance and rule the galaxy unopposed. ',
        'director': 'Rian Johnson',
        'scenario': 'Rian Johnson',
        'productors': 'Lucasfilm',
        'duration': 152,
        'date': 2017,
    },
]

Vous devriez arriver à un résultat équivalent

Mettre en forme notre document

Mettez en forme votre document HTML via CSS pour obtenir un site vitrine de la saga.

starwars example

Vous devriez arriver à un résultat équivalent