TP5_HTML5_CSS3_les_selecteurs

helExercice 1

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images ci-après.

Télécharger les images

Fond

Planete 1

Planete 2

Planete 3

Exercice 2

Créer une page web contenant le texte suivant:

HTML5 et CSS3

Le langage HTML

Définition de HTML

HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont les deux piliers fondamentaux du développement web. HTML sert de squelette à une page web en structurant son contenu à l'aide d'éléments comme les titres, les paragraphes, les images, ou les liens. Chaque élément HTML est défini par des balises, permettant d'organiser le contenu de manière logique et hiérarchique. Grâce à sa simplicité et à sa compatibilité universelle, HTML reste un outil incontournable pour créer des sites web accessibles et compréhensibles.

Evolution de HTML

HTML évolue constamment grâce aux nouvelles versions, telles que HTML5, qui introduisent des balises modernes comme header, footer et article. Ces éléments améliorent la sémantique du code en définissant clairement les rôles des sections d'une page. Cela rend les sites web plus accessibles pour les utilisateurs, notamment ceux ayant des besoins spécifiques, grâce aux outils comme les lecteurs d'écran. De plus, HTML5 prend en charge les contenus multimédias avec des balises comme video et audio, rendant les plugins tiers souvent inutiles.

Le langage CSS

Définition de CSS

Le CSS, quant à lui, permet de styliser le contenu structuré par le HTML. Avec le CSS, on peut contrôler les couleurs, les polices, les tailles, les marges, les espacements, et bien plus encore. Il offre une grande flexibilité pour concevoir des pages web esthétiques et attrayantes. Le CSS utilise des sélecteurs pour cibler les éléments HTML et leur appliquer des styles spécifiques, rendant ainsi chaque site unique. De plus, les feuilles de style en cascade facilitent la maintenance et la mise à jour des sites web, car elles permettent de centraliser les styles dans un fichier externe.

Evolution de CSS

Le CSS a également évolué avec des versions telles que CSS3, qui a introduit des fonctionnalités avancées comme les transitions, les animations, et les grilles (CSS Grid). Ces outils permettent de créer des designs réactifs et dynamiques adaptés à tous les types d'écrans, qu'il s'agisse de smartphones, de tablettes ou d'ordinateurs de bureau. Avec des techniques comme Flexbox et Grid, les développeurs peuvent organiser les éléments de manière fluide et harmonieuse, offrant ainsi une meilleure expérience utilisateur.

Le HTML et le CSS combinés

Utilisation combinée

En combinant HTML et CSS, on peut créer des pages web dynamiques, modernes et interactives. Ces deux technologies sont essentielles pour les développeurs, qu'ils soient débutants ou experts. Elles servent également de base pour apprendre d'autres langages comme JavaScript, qui ajoute des fonctionnalités interactives aux sites. En maîtrisant HTML et CSS, vous pouvez donner vie à vos idées sur le web et créer des expériences utilisateur captivantes.

L'essentiel

Aujourd'hui, la maîtrise de HTML et CSS est essentielle pour tout professionnel souhaitant travailler dans le développement web ou le design numérique. Ils constituent la base sur laquelle reposent les frameworks modernes comme Bootstrap ou Tailwind CSS, qui accélèrent le processus de développement. Apprendre ces langages ouvre des opportunités infinies, de la création de sites personnels à la conception de plateformes professionnelles. Leur simplicité d'apprentissage et leur puissance en font des outils incontournables dans le monde numérique.

Conclusion

HTML and CSS are the foundational technologies for web development, working together to structure and style web content. HTML organizes the content of a webpage using semantic elements like headings, paragraphs, images, and links, ensuring accessibility and logical structure. CSS enhances this by applying styles such as colors, fonts, and layouts, offering tools like Flexbox and Grid for responsive design. Both have evolved with modern versions—HTML5 introducing multimedia support and semantic tags, and CSS3 enabling animations and dynamic visuals. Mastering these technologies is essential for creating accessible, visually appealing, and user-friendly websites, forming the basis for advanced frameworks and tools in web development. 

Le texte est divisé en 4 parties:

• la première parle du langage html et est composée de:
• un titre de taille h2 (exemple "le langage HTML"
• deux paragraphes (sauf le partie "conclusion un seul") avec un titre chacun de taille h3 (exemple "définition du html").
• La seconde parle du langage CSS.
• La 3ème partie parle des caractéristiques communes des deux langages.

Appliquez les styles CSS suivants:

• Chaque division doit être de couleur d'arrière plan différente des autres.
• Le titre principal est de taille h1, centré, courrier new et rouge.
• Les titres h2, h3 sont de police verdana, de couleur bleu et en gras.
• Les titres h3 sont:

•             éloignés de la bord gauche de 30px.

•             soulignés avec une ligne continue

•             de couleur "blueviolet"
• Les paragraphes sont de texte justifié, l'espace entre le texte et le bord gauche de 20px et d'interligne 3.
• La couleur d'arrière plan des paragraphe se change lorsque vous le survolez avec la sourie.
• Les paragraphes de la partie html sont de police arial, couleur coral et espacement entre les mots de 10px.
• Les paragraphes de la partie CSS sont de police helvetica, de couleur f0b et espacement entre les mots de -5px..