presentation de html

How to Create Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

Getting Started with WebSlides

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

Now, you’re ready to go.

Create a Web Presentation with WebSlides

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Web Formation

Présentation du langage HTML (Cours)

Le langage HTML permet de décrire la structure et le contenu d’une page HTML. Ce cours vous propose d’en découvrir la syntaxe et le principe de fonctionnement.

Introduction

Qu’est-ce que le langage html .

Le sigle HTML correspond à «  HyperText Markup Language  » que l’on peut traduire en français par « Langage HyperTextuel à balises ». Il s’agit d’un langage informatique permettant de définir le contenu et la structure d’une page Web. De nombreuses technologies peuvent être utilisées pour définir les éléments d’une page Web, mais la base la plus minimaliste d’une page est construite en HTML.

Le langage HTML est un langage de description sujet à interprétation. Le principe du langage est de décrire la structure et le contenu d’une page. Il va permettre de définir les différentes zones d’affichages (en-tête, corps de la page, pied de page, menu, …) et d’intégrer son contenu (texte, image, tableau, vidéo, …).

Cette description est lue par un navigateur (Firefox, Chrome, Edge, …) qui va interpréter le code afin de l’afficher. Cela implique qu’une même page peut donc s’afficher différemment en fonction du navigateur utilisé. Avant l’arrivée des règles d’interprétation de la version 5 du langage HTML, le code non-valide n’était pas interprété de la même manière par les navigateurs. Les navigateurs, plutôt permissifs, traitaient le code même s’il n’était pas valide. Ce qui donnait parfois des résultats surprenants. Les navigateurs modernes posent aujourd’hui beaucoup moins de problèmes en utilisant des règles d’interprétation standards pour le code non-valide.

Pourquoi connaître le langage HTML ?

On peut naturellement se poser la question de l’intérêt pour un étudiant de connaître le langage HTML. Normalement, les langages informatiques sont réservés aux informaticiens !?! La particularité du langage HTML est que la plupart des internautes ont déjà créé du code HTML sans même le savoir. Lorsque vous rédigez un email ou un commentaire sur un site web, dès lors que vous ajoutez des paramètres de mise en forme comme du gras ou de la couleur, cela signifie que vous produisez du HTML et éventuellement un autre langage, le CSS.

Si vous avez déjà produit du HTML sans le savoir, il peut donc paraître encore plus inutile de connaître ce langage… En effet, il est possible de générer du code HTML sans connaître le langage. Cependant, il s’avère que l’on va très vite se retrouver limité par les fonctionnalités de l’éditeur utilisé, voir même complètement bloqué par des problèmes de code impossibles à corriger.

Dès lors que vous envisagez de rédiger du contenu publié sur le Web, il est très fortement recommandé de connaître le langage HTML. Il ne s’agit pas dans ce cas-là de connaître par cœur tous les éléments du langage. Mais simplement d’en comprendre les principes afin d’être capable de « plonger les mains dans le code » si nécessaire.

Par ailleurs, si cela peut faire peur au premier abord, vous allez voir que les principes du langage sont très simples à appréhender.

Quel logiciel utiliser ?

Lorsque l’on s’apprête à coder une page web, trois types de logiciels s’offrent à nous : un éditeur WYSIWYG, un éditeur de texte brut ou un IDE.

L’éditeur WYSIWYG pour « What You See Is What You Get » est un logiciel spécifiquement conçu pour éviter à l’utilisateur de connaître le langage. Le principe est d’avoir une interface graphique permettant de créer des pages un peu à la manière d’un logiciel de traitement de texte. L’utilisateur peut concevoir visuellement une page web, le code HTML correspondant est généré automatiquement. Le logiciel de ce type le plus connu est Dreamweaver développé par Adobe, mais il existe d’autres solutions comme SeaMonkey, Amaya ou encore Kompozer. Ce type de logiciel est déconseillé pour deux raisons :

• Le code généré n’est pas toujours très qualitatif ;
• L’impression de coder sans connaître le langage est un leurre, car il va falloir très rapidement accéder au code pour y apporter des corrections.

Un éditeur de texte « brut » est probablement la meilleure solution pour débuter à apprendre le langage HTML. Il ne s’agit pas d’un logiciel de traitement de texte comme Word ou LibreOffice, mais plutôt d’un logiciel à l’image du bloc-notes de Windows. C’est-à-dire un logiciel permettant de saisir du texte sans mise en forme. Vous aurez l’embarras du choix pour ce type de logiciel quel que soit votre système d’exploitation, nous pouvons citer par exemple Notepad++ (Windows), BBedit (Mac) ou Brackets (Windows et Mac). Si vous pouvez tout à fait utiliser le Bloc-notes de Windows, un logiciel un peu plus adapté vous permettra de bénéficier de fonctionnalités vous facilitant le codage, comme la coloration automatique du code ou l’autocomplétion (le logiciel vous propose de compléter le texte lorsque vous saisissez du code).

Un IDE pour « Integrated Development Environment » est un ensemble de logiciels permettant de répondre aux besoins spécifiques des programmeurs. Autour de l’éditeur de texte destiné à la programmation, de nombreuses fonctionnalités complémentaires vont se greffer, comme la gestion de l’historique des modifications des fichiers ou encore un client FTP permettant de placer les fichiers directement sur un serveur. Si la construction d’une page Web reste la même avec ce type de logiciel, l’environnement peut toutefois rebuter les codeurs débutants d’autant que ces logiciels ne sont pas développés spécifiquement pour coder du HTML, mais vont souvent prendre en compte des langages plus complexes comme par exemple le PHP. C’est la raison pour laquelle un éditeur de texte simple est préconisé. Si vous souhaitez néanmoins essayer ce type de logiciel, vous pourrez en trouver un grand nombre gratuitement, les plus connus étant Eclipse ou Netbeans .

La notion de code source

Dès lors que l’on commence à parler de pages web, la notion de «  code source  » apparaît très rapidement, mais de quoi s’agit-il ?

Quand vous affichez une page web dans votre navigateur, vous ne voyez pas le code HTML qui la compose mais plutôt l’interprétation qui en est faite par votre navigateur. Le code source d’une page HTML est donc le code qui la constitue est qui va permettre au navigateur d’en faire une interprétation visuelle.

Sur la plupart des navigateurs, vous pouvez visualiser le code source des pages que vous affichez. La manipulation va dépendre du navigateur utilisé. Par exemple sur Firefox, faites un clic droit sur une page Web et choisissez « Code source de la page ». Votre navigateur va alors afficher le code HTML de la page sans l’interpréter.

Lorsque vous allez créer une page HTML avec un éditeur de texte de base (et non un logiciel de traitement de texte), vous allez donc travailler directement sur le code source de vos pages.

Un langage standardisé

Le World Wide Web Consortium , que l’on évoque généralement via son abréviation W3C , est un organisme de standardisation. Cet organisme à but non lucratif a été fondé en 1994 par Tim Berners-Lee qui est le principal inventeur du World Wide Web. Sa mission est de promouvoir la compatibilité des technologies du World Wide Web telles que le langage HTML. Son rôle est donc de rédiger des préconisations de fonctionnement pour les langages utilisés sur Internet afin que ceux-ci fonctionnent de façon identique pour tout le monde.

Concernant le HTML, il s’agit de faire en sorte que la totalité des navigateurs (Firefox, Chrome, Edge…) interprète correctement le langage HTML afin d’afficher les pages web de manière identique. Le leitmotiv du W3C est « Un seul web partout et pour tous ».

Un langage à balises ?

Qu’est-ce qu’une balise .

Une balise ou « tag » en anglais est une commande interprétable par votre navigateur. En HTML, les commandes en question sont encadrées par le signe < (inférieur à) et > (supérieur à). Voici un exemple de balise HTML :

Dans cet exemple, vous trouvez une balise dite « ouvrante » <p> et une balise « fermante » </p> . Les balises fermantes sont identiques aux balises ouvrantes, mais contiennent un slash / en plus immédiatement après le signe < . Ces deux types de balises encadrent le contenu sur lequel elles s’appliquent .

Les balises ouvrantes indiquent le début d’application d’une commande et les balises fermantes indiquent la fin d’application de la commande. La balise <p></p> permet de créer un paragraphe dans une page web. Le code précédent pourrait ainsi être lu par un humain :

Balises orphelines ou autofermantes

La plupart des éléments HTML sont écrits avec des couples de balises ouvrantes et fermantes. Mais certaines balises ne nécessitent pas de balise de fermeture, on les appelle les balises autofermantes ou orphelines .

C’est le cas de la balise <br> qui permet d’ajouter un saut de ligne à l’intérieur d’un paragraphe. Vous pouvez voir dans l’exemple ci-dessous que cette balise n’a pas d’équivalent en balise de fermeture.

Exemple de code

Nous avons vu pour le moment deux exemples de balises <p></p> et <br> . Nous pouvons donc déjà commencer à écrire du code HTML.

Résultat dans un navigateur :

Vous avez peut-être remarqué que les accents ne s’affichent pas correctement. Nous reparlerons de ce problème un peu plus tard dans ce cours.

Les balises de titre

Les balises <p></p> permettent d’insérer un paragraphe standard. Il existe en parallèle d’autres balises de paragraphes qui ont un statut particulier, puisque les paragraphes concernés seront alors considérés comme des titres. Il s’agit des balises <h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> et <h6></h6> . Le h de la commande correspond à « heading » en anglais et le numéro qui suit correspond au niveau hiérarchique du titre.

Si vous utilisez des balises de titre dans une page HTML, vous verrez que le navigateur va les distinguer visuellement en jouant sur la graisse, la taille des caractères et les espacements.

Les balises d’emphase

«  Emphasis  » en latin, comme en anglais, signifie accent ou insistance. La traduction littérale française emphase pose un petit problème car il y a une notion d’exagération. Dans le cadre de ce cours, nous utiliserons malgré tout ce terme sans tenir compte de cet aspect péjoratif.

Il existe donc deux balises permettant de mettre l’emphase sur une chaîne de caractères. Elles permettent d’identifier les mots importants pour les faire ressortir visuellement comme vous pouvez le faire avec un traitement de texte, mais elle apporte surtout, comme les titres, une valeur sémantique au contenu en question. Nous reviendrons plus en détail sur la sémantique dans le chapitre suivant.

Les deux balises sont <strong></strong> et <em></em> qui permettent respectivement d’appliquer une emphase forte et modérée. Par défaut, les navigateurs vont distinguer visuellement ces balises lors de l’affichage en appliquant au contenu du gras pour la première balise (strong) et de l’italique pour la deuxième (em). Mais attention, ces balises ne sont pas des balises de gras ou d’italique mais bien des balises d’emphase. Il existe effectivement des balises sans valeur sémantique pour mettre du gras <b></b> et de l’italique <i></i> , mais elles ne doivent plus être utilisées aujourd’hui si vous tenez à respecter les bonnes pratiques qui préconisent l’utilisation d’un autre langage : le langage CSS pour la mise en forme d’une page Web.

La valeur sémantique des balises

Nous avons évoqué précédemment le fait que certaines balises ont une valeur sémantique . Il est temps d’expliquer un peu plus en détail le principe.

Lorsque vous consultez une page Web, dans une langue étrangère que vous ne connaissez pas, même si vous ne comprenez pas du tout le contenu de la page, vous êtes capable de distinguer le statut des différents textes .

Dans la page Web ci-contre tiré du site d’un journal suédois, vous êtes capable d’identifier visuellement le titre de l’article, son chapeau, des mots clés mis en valeur dans le texte, la légende de l’image, etc.

Vous êtes d’ailleurs capable de distinguer bien d’autres choses comme des dates, des numéros de téléphone, des adresses postales, etc.

Si un humain peut faire cette distinction, ce n’est pas forcément le cas des robots utilisés par les moteurs de recherche. La sémantique HTML est donc là pour pallier à ce problème.

Un moteur de recherche n’a pas besoin de savoir si un texte est en gras, en couleurs ou avec un corps de texte plus ou moins important, il ne se base pas sur la mise en forme. Pour permettre aux moteurs de recherche de mieux identifier les éléments importants de contenu afin d’avoir une indexation plus performante des pages, il leur faut un balisage sémantique.

Si par exemple vous utilisez la balise <h1></h1 >, le moteur de recherche saura qu’il s’agit d’un titre. De la même manière si vous utilisez la balise <strong></strong> , il saura que cela concerne des mots-clé importants. A contrario, si vous effectuez la mise en forme d’un paragraphe <p></p> avec du gras, de la couleur et une taille de caractère plus importante pour l’afficher comme un titre, cela fonctionnera pour les internautes qui visiteront le site, mais cela ne pourra pas être interprété comme tel par un moteur de recherche, ni par un lecteur d’écran utilisé par des personnes avec des déficiences visuelles. La sémantique HTML est donc essentielle pour un web plus « intelligent ».

Balise bloc versus balise en-ligne

Deux grandes catégories de balises existent avec des caractéristiques propres à chacune : les balises de type bloc (« block » en anglais) ou en-ligne (« in-line » en anglais).

Les balises de type bloc occuperont toujours par défaut la totalité de la largeur de la page (ou plus précisément de leurs conteneurs). C’est le cas de la balise <p></p> ou de l’ensemble des balises de titre comme <h1></h1> . Dans la mesure où ces balises occupent la totalité de la page, cela implique que ce qui suit sera automatiquement renvoyé en dessous lors de l’affichage.

Les balises en ligne ont pour dimension par défaut celle de leur contenu. C’est le cas des balises <strong></strong> et <em></em> . Elles n’impliquent donc pas de retour à la ligne.

Il existe deux balises sans valeur sémantique qui sont très utilisées en HTML <div></div> et <span></span> . <div></div> est une balise de type bloc utilisée principalement pour structurer le contenu de la page en délimitant les différentes zones. <span></span> est l’équivalent de type en-ligne permettant principalement d’appliquer à des chaines de caractères une mise en forme via un langage additionnel, le langage CSS.

Les attributs de balise

Il est possible d’ajouter des options, appelées attributs , aux balises HTML. Pour cela, il suffit de suivre la syntaxe suivante :

Les attributs sont placés dans la balise ouvrante, suivis du signe = et de la valeur entre guillemets. Il est possible de mettre autant d’attributs que vous le souhaitez en les mettant les uns à la suite des autres.

Voici un exemple pour la balise <p></p> où l’attribut align permet de définir l’alignement horizontal. Cet exemple est utilisé uniquement pour sa facilité de compréhension, en effet il s’agit d’une mauvaise pratique. L’alignement d’un paragraphe est une caractéristique de mise en forme et la totalité de la mise en forme doit être gérée via un langage que nous avons déjà évoqué plusieurs fois, le langage CSS.

Voici quelques exemples d’attributs qui ressemblent plus à ce que vous pouvez trouver sur Internet pour les sites respectant les bonnes pratiques.

Il faut avouer que ces attributs class ou id sont moins évidents à comprendre intuitivement. L’attribut class est équivalent au fait d’appliquer un style sur un paragraphe dans un logiciel de traitement de texte. L’attribut id quant à lui permet de donner un nom unique à un élément HTML.

La structure de base d’une page HTML

Toute page HTML a une structure de base constituée d’un en-tête et d’un corps placés à l’intérieur de la balise <html></html> , sous la forme suivante :

Si vous testez le code ci-dessus dans un navigateur, vous ne verrez rien apparaître à l’écran, vous aurez en effet affaire à une page HTML vierge.

La déclaration du doctype est la toute première ligne d’une page HTML. Elle se trouve avant la balise ouvrante <html> . Ce n’est pas à proprement parler du HTML, il s’agit uniquement d’une instruction pour votre navigateur afin de lui indiquer quelle version du langage HTML vous utilisez.

La version 5 de HTML a considérablement simplifié la déclaration du doctype sous la forme :

Il est évidemment préconisé d’utiliser cette déclaration de doctype, mais si vous allez fouiller dans le code source des pages que vous fréquentez sur Internet, vous risquez fort de tomber sur des déclarations nettement plus complexes qui précisent les règles respectées par le développeur de la page. Sans rentrer plus dans le détail en voici un exemple :

L’élément <html>

La balise <html></html> indique à votre navigateur qu’il s’agit d’un document HTML et que vous commencez à coder dans ce langage. Il s’agit de l’élément racine (« root » en anglais) de votre page web qui contiendra la totalité du code HTML de votre page.

C’est donc dans cette balise que vous allez placer les principaux éléments hiérarchiques de votre page : <head></head> et <body></body> .

Il est important de noter que vous ne devez avoir qu’une seule et unique balise <html></html> dans votre page, l’ouvrante à la deuxième ligne de votre page sous la déclaration du doctype et la fermante tout à la fin de votre page.

L’attribut lang est très souvent ajouté dans la balise ouvrante <html> , il précise la langue utilisée pour le contenu de la page. C’est une question de référencement par les moteurs de recherche et d’accessibilité pour permettre aux outils de synthèse vocale d’employer le bon accent.

L’élément <head>

Comme son nom l’indique la balise <head></head> correspond à l’en-tête d’une page HTML. Il va principalement contenir des métadonnées sur la page ou des liens vers d’autres fichiers comme des fichiers CSS ou JavaScript. La plupart des informations inscrites dans l’en-tête ne sont pas visibles directement par l’internaute.

La balise <title></title>

La balise <title></title> est un élément incontournable qui se place dans l’en-tête. Elle permet de définir le titre de la page. Ce titre ne va pas s’afficher dans le corps de votre page, il sera visible dans l’onglet de votre navigateur, dans vos favoris lorsque vous enregistrez une page et sera également utilisé pour le référencement de votre page web.

La balise <meta>

La balise <meta> est une balise autofermante et permet de saisir des métadonnées sur la page.

Une métadonnée (mot composé du préfixe grec meta, indiquant l’auto-référence ; le mot signifie donc proprement « donnée de/à propos de donnée ») est une donnée servant à définir ou décrire une autre donnée quel que soit son support (papier ou électronique) (Source : Métadonnée. (2017, juillet 2). Wikipédia, l’encyclopédie libre. Page consultée le 10 juillet 2017 à l’adresse http://fr.wikipedia.org )

Les métadonnées sont utilisées par les navigateurs pour l’affichage de la page et par les moteurs de recherches pour le référencement. Nous n’allons pas faire la liste exhaustive des usages de la balise <meta> , nous nous contenterons de présenter les deux principaux :

Cette commande permet d’indiquer au navigateur l’encodage des caractères utilisé lors de la création d’une page web. L’encodage indiqué doit correspondre à celui utilisé par le logiciel pour créer la page web. La plupart des logiciels actuels utilisent par défaut l’encodage . Si vous ne précisez par le bon encodage, vous pouvez avoir des résultats assez surprenants lorsque vous insérez des caractères accentués comme dans l’exemple ci-dessous :

• Description

Cette balise permet de décrire le contenu d’une page web. Si cette balise est définie, elle sera utilisée pour le texte affiché en dessous des liens dans les résultats des moteurs de recherche. En son absence, le texte en dessous du lien sera construit en fonction des mots clés de la recherche identifiés dans le contenu de la page.

Lorsque l’on recherche « Lyon 2 » sur un moteur de recherche comme Google, on peut constater qu’il n’y a pas de description. Le texte en dessous du lien est défini en fonction des mots clés trouvés dans la page.

Si l’on effectue le même test avec « Lyon 1 », on peut alors constater qu’une description est présente en dessous du lien.

La balise <style></style>

La balise <style></style> permet d’intégrer du code CSS afin de définir la mise en forme d’une page web. Le principe des styles en CSS est très proche des styles sur un logiciel de traitement de texte.

La balise <link></link>

La balise <link></link> est la méthode préconisée dans la plupart des cas pour l’ajout de styles CSS. Elle permet de lier un fichier distinct de la page HTML ce qui permet de réutiliser le même fichier CSS sur plusieurs pages.

L’élément <body>

La balise <body></body> correspond au corps de la page HTML. Elle contient la totalité du contenu de la page comme le texte, les images, les tableaux, etc.

Lorsque la structure de page de la page HTML a été créée, toutes les modifications HTML se trouveront donc entre <body> et </body> .

Les éléments <html>, <head> et <body> sont-ils obligatoires ?

D’après les spécifications de la version 5 d’HTML, il est théoriquement possible d’omettre ces trois éléments structurants. Cependant, il s’agit d’une mauvaise pratique, qui n’est pas sans poser problème pour certains navigateurs.

Vous devez donc toujours veiller à avoir la structure de base lors de la création d’une page HTML.

Voici donc la structure de base minimale que vous devriez avoir pour toutes vos pages :

Règles de codage

Dans la pratique vous pourrez constater que la transgression des règles de codage que nous allons évoquer ne posera pas forcément de problèmes à votre navigateur qui est souvent très permissif. A contrario, un simple oubli de > ou de " , peut empêcher réellement votre contenu de s’afficher.

Prenez garde, même si votre page s’affiche telle que vous le souhaitez, un code « propre » et respectueux des règles est essentiel lors de la création de pages web pour les codeurs débutant comme pour les développeurs chevronnés. C’est la garantie d’une meilleure lisibilité du code, ce qui en facilite grandement la compréhension et ainsi le « débogage » (le fait de corriger les erreurs d’un programme).

Règle n°1 : Imbrication des balises

La première balise ouverte doit être la dernière balise fermée.

Dans l’exemple précédent, la balise <p> a été ouverte, puis c’est le tour de la balise <strong> . <strong> se trouve ainsi dans <p></p> et doit donc être refermée avant </p> .

Sémantiquement les balises HTML ne peuvent pas toutes s’imbriquer les unes dans les autres. Les imbrications suivantes n’ont en effet aucun sens :

Règle n°2 : Casse des balises

Les noms des balises et des attributs doivent être écrits en minuscules.

Règle n°3 : Guillemets obligatoires

Toutes les valeurs des attributs doivent être entre guillemets doubles ou simples.

Règle n°4 : Valeur pour attributs

Les attributs doivent toujours avoir une valeur associée. Il existe cependant certains attributs HTML qui échappent à cette règle et peuvent se passer d’une valeur. C’est le cas par exemple de l’attribut checked qui permet de cocher une case par défaut dans un formulaire.

Conseils et bonnes pratiques

Pensez à aérer votre code.

N’hésitez surtout pas à aérer votre code ! Un code aéré sera beaucoup plus lisible qu’un code compact. Il est tout à fait possible de rédiger une page sur une seule ligne mais cela complique grandement sa lecture pour le développeur.

Lorsque vous rédigez votre code HTML, vous pouvez aérer votre code en ajoutant des retours chariot (touche entrée du clavier). Vous gagnerez en lisibilité et les retours chariot ne seront pas pris en compte lors de l’affichage.

C’est le cas également des espaces consécutifs. Si vous ajoutez 10 espaces consécutifs dans votre texte, un seul sera visible lors de l’affichage de la page dans le navigateur.

Indentation des balises

Toujours dans un souci de lisibilité, il est très fortement recommandé d’ indenter son code. L’indentation consiste à décaler le code à chaque fois que vous imbriquez une balise de type bloc dans une autre, comme vous avez pu le voir dans les exemples précédents.

L’indentation améliore la lisibilité et permet de mieux voir l’imbrication et la hiérarchisation des éléments HTML d’une page. Pour décaler votre code, il suffit d’insérer une tabulation en début de ligne.

Saisie des balises fermantes

Écrivez toujours la balise fermante immédiatement après avoir écrit l’ouvrante.

Lorsque, par exemple, vous souhaitez utiliser la balise <strong></strong> . Saisissez d’un seul coup l’ouvrante et la fermante, vous revenez ensuite entre les balises pour saisir le texte que vous souhaitez mettre en valeur. Vous aurez peut-être l’impression de perdre du temps lors de la saisie, mais c’est la meilleure méthode pour ne pas oublier les balises fermantes et ne pas vous emmêler les pinceaux dans l’imbrication des balises.

Préparez votre </body>

Comme cela a déjà été dit, la totalité du contenu de votre page doit se trouver dans la section <body></body> , afin d’éviter les erreurs de débutant, nous vous conseillons donc d’ajouter une série de retours chariot entre la balise ouvrante <body> et la balise fermante </body> afin de faire descendre la balise de fermeture plus bas dans votre fenêtre de travail et pour éviter par la suite de coder en dehors de cet élément. Vous aurez donc en bas de page </body></html> .

Les commentaires

Tous les langages informatiques permettent de commenter le code, le HTML ne fait pas exception en la matière. Il est donc possible d’ajouter des commentaires dans votre code afin d’en faciliter la relecture sans que ces commentaires ne soient visibles directement dans votre navigateur.

Pour insérer un commentaire il suffit de saisir <!-- au début du commentaire et --> à la fin du commentaire.

En HTML, les commentaires ne sont pas complètement invisibles n’importe quel internaute qui affichera le code source de la page pourra les voir.

Ainsi se termine cette introduction au langage HTML, vous pouvez maintenant aller un peu plus loin et consulter les articles suivants :

• Les listes en HTML
• Les liens hypertextes en HTML
• Les images en HTML

Sauf mention contraire*, l'article Présentation du langage HTML (Cours) et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées .

Salut ! Cette a été importante pour moi.

C’était vraiment très compréhensible. Merci beaucoup !

Merci pour ce compliment !

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

HTML basics

• Overview: Getting started with the web

HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

So what is HTML?

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

Anatomy of an HTML element

Let's explore this paragraph element a bit further.

The main parts of our element are as follows:

• The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect — in this case where the paragraph begins.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
• The content: This is the content of the element, which in this case, is just text.
• The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value . The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .

Attributes that set a value always have:

• A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
• The attribute name followed by an equal sign.
• The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

Nesting elements

You can put elements inside other elements too — this is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly emphasized:

You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:

The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

Void elements

Some elements have no content and are called void elements . Take the <img> element that we already have in our HTML page:

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

Here, we have the following:

• <!DOCTYPE html> — doctype . It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
• <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
• <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
• <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
• <meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
• <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
• <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Let's turn our attention to the <img> element again:

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In the alt attribute , you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

• They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
• Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

Note: Find out more about accessibility in our accessibility learning module .

Marking up text

This section will cover some essential HTML elements you'll use for marking up the text.

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6> , although you'll commonly only use 3 to 4 at most:

Note: Anything in HTML between <!-- and --> is an HTML comment . The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.

Now try adding a suitable title to your HTML page just above your <img> element.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

Add your sample text (you should have it from What will your website look like? ) into one or a few paragraphs, placed directly below your <img> element.

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

• Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
• Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

We could modify the markup to this

Try adding an ordered or unordered list to your example page.

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

• Choose some text. We chose the text "Mozilla Manifesto".

You might get unexpected results if you omit the https:// or http:// part, called the protocol , at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for h ypertext ref erence .

Add a link to your page now, if you haven't already done so.

If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here ):

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.

10 Best HTML/CSS Based Presentation Slides

Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. Here are 10 Awesome HTML/CSS Based Presentation Slides that allow you to do that.

Unleash The Power of WordPress Ad

Awesome collection of 11,000+ wordpress themes, including bootstrap templates & design assets, blog & magazine, creative portfolio, landing page.

Impress.js is a presentation framework based on the power of CSS3 transforms and CSS3 transitions along with JavaScript and jQuery. The framework is currently supported in modern browsers and inspired by the idea behind prezi.com, which is cloud-based presentation software.

A framework for easily creating beautiful presentations using HTML.

Slippy is a HTML Presentation library written with jQuery , it takes a html file in and plays it in any browser.

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

Shower is a presentation system by Vadim Makeev of Opera Software. While it’s one of the simpler systems, it’s fast and works well in all browsers. The slide thumbnail view is especially cool (press ESC).

LeaVerou/CSSS

CSS-based SlideShow System by Lea Verou.

html5slides

The presentation template is based on html5slides by Luke Mahé and Marcin Wichary.

DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.

Write your slideshow in HTML, style it with CSS and control it with some jQuery-powered JavaScript. When you’re done, Fathom.js even lets you sync the video of your presentation quickly and easily.

Related Posts :

• 12 jQuery Plugins To Show Notification Messages
• 7 jQuery Parallax Slider Effect Plugins
• 9 HTML5 Frameworks For Web & Mobile App Development
• 8 CSS Libraries For Adding Image Hover Effects
• 20 Useful CSS Libraries 2019
• 17 jQuery HTML Table Plugins
• How To Make Tumblr Theme : 5 Tutorials
• 10 CSS Tools Must Have For Web Designers

I missed one gorgeos framework for easily creating beautiful presentations using HTML. Flowtime.js

Awesome list !! Thank you !

Leave a comment Cancel reply

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed .

WebSlides Demos

All of these presentations are free and responsive. 40+ components with a solid CSS architecture .

Share your slides using #WebSlides .

Why WebSlides?

General Questions

WebSlides Documentation: Components · Classes · Media .

Why WebSlides? Good karma

There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.

Is WebSlides a framework?

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture .

What can you do with WebSlides?

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want , add background images, videos ...

How easy is WebSlides?

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

Loved by designers and developers.

Some of the most famous brands are using WebSlides.

"WebSlides has pushed the keynotes to a new limit. Fantastic work!" Javi Pérez .

"I was immediately thrilled by the simplicity of WebSlides. This is absolutely great." Henrik Ståhl .

"Please make this a trend. The coolest thing I've seen so far in 2017." Austin Guevara .

Start in seconds

Create your own presentation instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

Top 25 Free HTML5 & CSS3 Presentation Frameworks

Some Frameworks offer a way to create HTML5 powered web presentations for displaying in the browser. These Frameworks are the best web alternatives to MS PowerPoint and keynote. Reveal.js ( Demo ) Reveal.js is one of the best HTML presentation frameworks created by HAKIM EL HATTAB. Reveal.js provides a lot of attractive features such as nested slides, markdown contents, speaker notes, and PDF export. In this Framework, you can write responsive presentations using HTML or markdown.

Impress.js ( Demo   ) Impress.js is a CSS3 transition and transforms based presentation Framework for modern browsers.

io-2012-slides io-2012-slides is a Google HTML5 slide template project developed by Luke Mahe and Marcin Wichary. You can create a simple and stylish slideshow presentation using io-2012-slides. It offers the features to add tables, slide with speaker notes, highlight the important sections of code, and slide with iframe.

Shower ( Demo   ) The shower is one of the best presentation engines build on HTML, CSS, and vanilla JavaScript which support all modern browsers. It allows the creating of all kinds of lists, programming code highlights, tables, and inner navigation.

Inspire.js ( Previously known as CSSS ) – CSS based slideshow system CSSS is a simple presentation system that only supports or works with the latest browsers(Firefox, Opera, Safari, or Chrome). So you can only create a modern web standard presentation.

deck.js ( Demo ) deck.js is a JavaScript library for building modern slide presentations. It offers simple and attractive transitions to build a better presentation.

Flowtime.js ( Demo ) Flowtime.js is a presentation framework based on HTML/CSS3/JS. It provides better support for modern browsers. Features : Code snippets highlight, native parallax support, fluid layout system, and alternative navigation control.

Fathom.js (Project No longer maintained) – Demo  Fathom.js is a jQuery powered JavaScript Framework. You can create presentations using HTML and provide styles with CSS.

DZSlides ( Demo ) DZSlides is one file in an HTML template system. You can build slides in HTML5 and CSS3 using DZSlides. You can include any text, images, video, or iframes inside the slides. DZSlides support touch events. So you can create mobile-friendly web slide shows.

Slides ( Demo ) Simple presentation Framework to create beautiful presentations in HTML, JS, and OOCSS.

Scrolldesk.js Scrolldesk.js is a jQuery plugin to create scrolling presentation desks.

Squeenote Squeenote is a browser-based presentation engine to create live HTML5 presentations.

Pow Pow is a simple web presentation tool. You can create a simple and powerful slide presentation using HTML and JavaScript.

Bespoke.js ( Demo ) Beskpoke.js is a DIY presentation Micro Framework.

Scriptless-slides ( Demo ) Another presentation library with scroll-based navigation. Stack under the BSD license.

CoderDeck ( Demo ) Create interactive live coding HTML5 -based presentations using CoderDeck.

3D Cube Slideshow 3D Cube Slideshow is designed & developed by JoeMorgan. You can easily create 3D CSS transitions and transforms between slides using a 3D cube slideshow.

Luminescence Luminescence is an application for generating simple slide presentations from markdown.

HTML Slidy HTML Slidy offers to create PowerPoint like accessible slideshows in HTML and XHTML.

S5 ( Demo ) S5 is a simple slide show system offer to create XHTML, CSS, and JavaScript-based slideshows.

Slippy ( Demo ) Another HTML presentation Framework that supports syntax highlighting, incremental slides, and keyboard navigation.

Shining Shining is a Framework to create awesome browser presentations in HTML, CSS & JS.

Slide down Slide down offers to create syntax highlighted slide presentations from Markdown.

how presentation plugin for WordPress available now. So you can create HTML5 presentations in your WordPress blog. http://wordpress.org/plugins/html5-slideshow-presentations/ http://wordpress.org/plugins/wp-js-impress/ Strut.io  – Opensource online HTML5 Presentation Editor.

Posts by Arun Vasudev N

Posted on: 17 Oct 2020

W3.CSS Colors

Web building, w3.css slideshow.

Manual Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs() .

The plusDivs() function subtracts one or  adds one to the slideIndex.

The showDiv() function hides ( display="none" ) all elements with the class name "mySlides", and displays ( display="block" ) the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements (x.length).

Advertisement

Automatic Slideshow

To display an automatic slideshow is even simpler.

You only need a little different JavaScript:

HTML Slides

The slides do not have to be images.

They can be any HTML content:

Lorem ipsum

Slideshow caption.

Add a caption text for each image slide with the w3-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right or middle):

Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.

Another example:

Images as Indicators

An example of using images as indicators:

Multiple Slideshows on the Same Page

To operate multiple slideshows on one page, you must class the members of each slideshow group with different classes:

Animated Slides

Slide or fade in an element from the top, bottom, left or right of the screen with the w3-animate-* classes.

Faded Animation

The w3-animate-fading class fades an element in and out (takes about 10 seconds).

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, get certified.

• 400+ Features
• Website Templates
• Website Designs
• WordPress Themes
• Joomla Templates
• HTML Templates
• HTML Website Builder
• WordPress Website Builder
• Joomla Page Builder
• Documentation
• Contact Support

Block Types

• Presentation

Presentation HTML Templates

• Newest & Popular

• Create your own Website Download

• Free Website Builder Software Download

• Build Website with no Coding Download

• Customize Any Template Download

Other Business & Law HTML Templates

• Terms of Use
• Privacy Policy
• License Agreement

Themes & Templates

• CSS Templates
• WooCommerce Themes
• HTML5 Templates
• One Page Templates
• Website Builder
• WYSIWYG HTML Editor
• Static Site Generator
• HTML Code Generator
• Web Page Designs
• Web Page Designer
• Landing Pages
• Homepage Designs
• Website Mockup

• Stack Overflow Public questions & answers
• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Talent Build your employer brand
• Advertising Reach developers & technologists worldwide
• Labs The future of collective knowledge sharing
• About the company

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Embed a PowerPoint presentation into HTML

Is it possible to embed a PowerPoint presentation (.ppt) into a webpage (.xhtml)?

This will be used on a local intranet where there is a mix of Internet Explorer 6 and Internet Explorer 7 only, so no need to consider other browsers.

I've given up... I guess Flash is the way forward.

• Is there any way to embed a pptx file in HTML? –  Himanshu Jul 18, 2013 at 6:41

23 Answers 23

Google Docs can serve up PowerPoint (and PDF) documents in it's document viewer. You don't have to sign up for Google Docs, just upload it to your website, and call it from your page:

• 2 Wouldn't have worked for my purpose, but given that the question states it is for a local intranet, this has to be the way to do it! +1 –  Steg Nov 7, 2009 at 23:18
• 4 I tried this and all I get is a "Sorry, we are unable to generate a view of the document at this time. Please try again later. " –  David Yell Aug 8, 2011 at 13:10
• There's some way to customize this viewer? I want to avoid the fullscreen option... –  adripanico Oct 16, 2012 at 7:30
• Not pretty but very useful... Thanks –  Santiago Baigorria Jun 6, 2014 at 18:05
• 3 This solution isn't working anymore, because Google restricted the access with the X-Frame-Options to sameorigin –  Hello It's me Jul 27, 2017 at 12:48

I got so sick of trying all of the different options to web host a power point that were flaky or required flash so I rolled my own.

My solution uses a very simple javascript function to simply scroll / replace a image tag with GIFs that I saved from the Power Point presentation itself.

In the power point presentation click Save As and select GIF. Pick the quality you want to display the presentation at. Power Point will save one GIF image for each slide and name them Slide1.GIF, Slide2.GIF, etc.....

Create a HTML page and add a image tag to display the Power point GIF images.

Add some first, previous, next and last clickable objects with the onClick action as below:

Finally, add the below javascript function that when called grabs the next Slide.GIF image and displays it to the img tag.

Make sure the GIFs are reachable from the HTMl page. They are by default expected to be in the same directory but you should be able to see the logic and how to set to a image directory if required

I have training material up for my company that uses this technique at http://www.vanguarddata.com.au so before you spend any time trying it out you are welcome to look at in action.

I hope this helps someone else out there who is having as much headaches with this as I did.....

• Very creative way. Good job. –  JoshYates1980 Jul 24, 2014 at 19:41
• can you please put a license on it? it would be nice to be able to reuse it. maybe a CC0 license: wiki.creativecommons.org/wiki/CC0 –  markgalassi Dec 9, 2015 at 19:43
• Would you have any idea how to deal with slides with animations? –  Zane Jun 6, 2017 at 20:46
• Thanks for showing me this way of implementing a powerpoint on a web page. From the code you pasted above I think the first button should be swapImage(1) instead of swapImage(0) right? Also how would I implement a simple text that would let the user know which slide they are on for example like "Slide 3 of 16" or "Slide 1 of 16". –  Makuza Sep 30, 2020 at 1:10

Id recommend the official View Office documents online

for embeding you can simply use

• This works really nicely for one file at a time ... do you know if they have an API that you could hit returning the URLs for multiple files? –  K7Buoy Feb 17, 2017 at 16:57
• Hi @K7Buoy, did you ever find an API solution? I am also interested in an official API for displaying powerpoint slides. Thanks! –  Jack Collins Mar 21, 2018 at 2:11
• Hi @JackCollins ... unfortunately not ... I hunted for quite sometime. –  K7Buoy Mar 21, 2018 at 16:27
• Hi @K7Buoy Have tried to look for licencing for commercial use for this, can't find any clarity. Do you know if there are restrictions using this in a commercial aspect? –  etchypap May 26, 2020 at 20:24

DocStoc.com and Scribd.com both work well with Internet Explorer 6 and Internet Explorer 7. They'll show a variety of document types, including PowerPoint files (.ppt). I use these services for my intranet here at work. Of course, just remember to mark your documents as 'private' after you upload them.

besides, if you save ppt as .pps format using microsoft powerpoint, you can use the following code:

Another common way to do it is to convert ppt/doc to pdf,

then use swftool( http://www.swftools.org ) to convert it to swf

finally, take FlexPaper( http://flexpaper.devaldi.com ) as document viewer.

I don't know of a way to embed PowerPoint slides directly into HTML. However, there are a number of solutions online for converting a PPT file into a SWF , which can be embedded into HTML just like any other Flash movie.

Googling for 'ppt to swf' seems to give a lot of hits. Some are free, others aren't. Some handle things like animations, others just do still images. There's got to be one out there that does what you need. :)

You can use Microsoft Office Web Apps to embed PowerPoint and Excel Files. See Say more in your blog with embedded PowerPoint and Excel files .

• 1 The embedded PPT app isn't very high quality. It translates your slides to medium-quality jpegs and adds a toggle button. (You'd do better exporting the slides from Powerpoint yourself and then using a jQuery slider.) The full-screen pop-out works a bit better (it has animations, though they're not great), but it also relies on the Silverlight plugin--which doesn't work on mobile devices. –  Brandon Lebedev Dec 24, 2011 at 16:52
• @BrandonLebedev, the embedded PPT's are actually better quality than the Google Docs rendering of PowerPoints from what I've seen. But as you rightly point out, it's not much use to mobile users, nor anyone who doesn't have the Silverlight plugin installed. –  Ciaran Gallagher May 28, 2013 at 23:55
• The blog link is broke. –  JoshYates1980 Jul 24, 2014 at 19:36

I ended up going for screenshooting each slide, and using two different tabs to navigate, this was put into an . this gives high-res, but you sacrifice animations and interactivity, the only thing the user can do is read and change slide. heres an example off my website: http://deepschool.jaberwokkee.kodingen.com/~/Miss%20Necchi%27s%20powerpoints/Volume%20of%20prisms%20powerpoint/slide1.htm

Google Docs allows you to upload a PowerPoint document, you can then 'Share' it with everyone then you can 'Publish' it and this will provide code to embed it in your site or you can use a direct link which runs at the full size of the browser window. The conversion is pretty good and scales well because the text is retained rather than converted to an image. The conversion is pretty good and the whole thing is free. Definitely worth a go.

Tried all of the options in this stack and couldn't reach something that loaded swiftly, used PPT. file directly, and scaled easily. Saved out my ppt. as .gif and opted for "Infinite Carousel" (javascript) that I can drop images into easily. Has left right controls, play option, all the same stuff you find in ppt. presenter mode...

http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/

The 'actual answer' is that you cannot do it directly. You have to convert your PowerPoint presentation to something that the browser can process. You can save each page of the PowerPoint presentation as a JPEG image and then display as a series of images. You can save the PowerPoint presentation as HTML. Both of these solutions will render only static pages, without any of the animations of PowerPoint. You can use a tool to convert your PowerPoint presentation to Flash (.swf) and embed it that way. This will preserve any animations and presumably allow you to do an automatic slideshow without the need for writing special code to change the images.

Power point supports converting to mp4 which can be posted using a html5 video tag.

Save As > MPEG-4 Video (*.mp4)

As an alternate solution, you can convert PPT/PPTX to JPG/SVG images and display them with revealjs . See example code here .

PS. I am working as SW developer at Aspose.

The first few results on Google all sound like good options:

http://www.pptfaq.com/FAQ00708.htm

http://www.webdeveloper.com/forum/showthread.php?t=86212

Some Flash tool that can convert the PowerPoint file to Flash could be helpful. Slide share is also helpful. For me, I will take something like PPT2Flash Pro or things like that.

Well, I think you get to convert the powerpoint to flash first. PowerPoint is not a sharable format on Internet. Some tool like PowerPoint to Flash could be helpful for you.

Try PowerPoint ActiveX 2.4 . This is an ActiveX component that embeds PowerPoint into an OCX.

Since you are using just Internet Explorer 6 and Internet Explorer 7 you can embed this component into the HTML.

As a side note: If your intranet users also have access to the Internet, you can use the SlideShare widget to embed your PowerPoint presentations in your website.

(Remember to mark your presentation as private!)

I spent a while looking into this and pretty much all of the freeware and shareware on the web sucked. This included software to directly convert the .ppt file to Flash or some sort of video format and also software to record your desktop screen. Software was clunky, and the quality was poor.

The solution we eventually came up with is a little bit manual, but it gave by far the best quality results:

• Export the .ppt file into some sort of image format (.bmp, .jpeg, .png, .tif) - it writes out one file per slide
• Import all the slide image files into Google Picasa and use them to create a video. You can add in some nice simple transitions (it hasn't got some of the horrific .ppt one's, but who cares) and it dumps out a WMV file of your specified resolution.

Saving out as .wmv isn't perfect, but I'm sure it's probably quite straightforward to convert that to some other format or Flash. We were looking to get them up on YouTube and this did the trick.

An easy (and free) way is to download OpenOffice and use Impress to open the PowerPoint presentation. Then export into a separate folder as HTML. Your presentation will consist of separate HTML files and images for each PowerPoint slide. Link to the title page, and you're done.

I was looking for a solution for similar problem.

I looked into http://phppowerpoint.codeplex.com/

But they have no better documentation, and even no demo page I could see over there and it was seemingly difficult.

What I came up with is: SkyDrive by Microsoft. https://skydrive.live.com

All you need is an account with them and upload your PPT and embed them straightaway. PPT player is quite clean to use and I like it.

I've noticed people recommending some PPT-to-Flash solutions, but Flash doesn't work on mobile devices. There's a hosting service called iSpring Cloud that automatically converts your PPT to combined Flash+HTML5 format and lets you generate an embed code for your website or blog. Full instructions can be found on their website .

Another option is to use Apple Keynote on a Mac (Libre Office couldn't event open a pptx I had) to save the presentation to HTML5. It does a pretty good job to produce exactly what it displays in keynote, e.g. it includes animations and video. Compatibility of keynote to powerpoint has it's limits though (independent of the export).

Your Answer

Sign up or log in, post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct .

Not the answer you're looking for? Browse other questions tagged xhtml embed powerpoint or ask your own question .

• The Overflow Blog
• What it’s like being a professional workplace bestie (Ep. 603)
• Journey to the cloud part I: Migrating Stack Overflow Teams to Azure
• Featured on Meta
• Moderation strike: Results of negotiations
• Our Design Vision for Stack Overflow and the Stack Exchange network
• Temporary policy: Generative AI (e.g., ChatGPT) is banned
• Discussions experiment launching on NLP Collective
• Call for volunteer reviewers for an updated search experience: OverflowAI Search

Hot Network Questions

• How to find out name of applications to remove it in termial
• Entire Perimeter of FPGA Getting Hot - Why?
• Is philosophy bad for you (if taken too literally)?
• Are there questions that science can't answer, but philosophy can?
• Is it possible to design a bottle that can always be "full"?
• Getting child to eat (preschooler)
• I've been invited to a free 2-day conference. What's the catch?
• Can the neutrons in a nuclear reactor be collimated?
• How Do Parking Brakes Wear Out?
• Correcting how a student writes symbols
• Are PCIe and USB 3.0 the same interface?
• How to temporarily remove one hinge on a door with two hinges
• Drawing a maths protractor
• After putting something in my oven, the temperature drops and is super slow to increase back up despite keeping the door shut
• Are there any more ways to regain spent hit dice?
• Does promotion in Checkers end a turn?
• proof of termination for zip in Lean
• Analog science fact article about dimensions
• Why do people say 'topless' but not 'topful'?
• Birds flying or swimming in space
• Meaning of "How you get any work done is beyond me"
• Why do programming languages use delimiters (quotes) for strings?
• Can I be admitted to the US after a two-year overstay 21 years ago?
• How to slow down while maintaining altitude

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

Le langage HTML

  Créer un site internet n'est pas compliqué en soi mais demande certaines connaissances. Quelque soit le site à créer (site perso ou professionnel), le HTML est une étape obligatoire. Il s'agit en effet du langage principal, présent dans toutes pages sur internet.

   Attention : utiliser le html ne signifie pas apprendre le html. Il existe des logiciels (tels que Dreamweaver ou FrontPage) qui vous permettent de créer des pages sans connaissances de ce langage. Mais je vous conseille fortement d'en apprendre un minimum (nul besoin de connaitre tout par coeur) en dépit de quoi, vous serez vite dépassé et dans l'impossibilité de déceler certaines erreurs. L'idéal est sans doute de créer vos pages avec l'un de ces logiciels (gain de temps garanti) et de vérifier en même temps les modifications apportées au code par le logiciel. C'est formateur, et ça vous familiarisera avec le html.

  Remarque préalable : le langage HTML vous permet de commenter le code de vos pages, c'est à dire d'ajouter des notes personnelles qui n'apparaîtront pas sur la page de vos visiteurs (mais notez bien qu'ils peuvent toujours avoir accès à la source... ne mettez donc aucune information confidentielle). Les commentaires sont simplement encadrés par <!-- et --> . Vous retrouverez donc ce type de notes pour chaque exemple de code HTML présenté sur ce site :

  Une page internet est structurée. Les premiers éléments à connaître sont l'en-tête (définissant le titre et d'autres informations qui n'apparaissent pas directement sur la page) et le corps du document. Voici donc la structure de base d'une page :

  Vous remaquez déjà une chose très importante du html : ce langage fonctionne par balises qui ne sont ni plus ni moins que des mots entourés de crochets. Sauf exceptions, on remarque également que pour chaque balise, il y a des balises d'ouverture ( <...> ) et de fermeture ( < / ...> ). Vous connaissez donc maintenant quatre balises importantes : html, head, title et body.

Outre les quatre présentées ci-dessus, le langage HTML utilise une quantité importante de balises. Pour une première approche, nous n'étudierons ici que les plus utiles (les autres seront traitées plus en détail dans la partie perfectionnement HTML ). Pensez également à utiliser l'exercice d'entrainement HTML pour vous familiariser avec ces balises :

• Les paragraphes : <p></p> <p> ceci est un paragraphe </p> <p> ceci est un autre paragraphe </p>
• Le retour à la ligne : <br /> <p> ceci est un paragraphe <br /> avec retour à la ligne </p> <p> ceci est un paragraphe sans retour à la ligne </p>
• item 1 de la liste non ordonnée
• item 2 de la liste non ordonnée
• item 1 de la liste ordonnée
• item 2 de la liste ordonnée
• Les liens hypertextes, qui permettent de lier les pages : <a href=""></a> Texte de votre lien ', WIDTH, 300)" onmouseout="return nd();"> <a href="autre-page.php"> Texte de votre lien </a> <!-- Le texte de votre lien est encadré par les balises <a> et </a> le lien de la page est un « attribut » ... nous verrons ci-dessous ce qu'est un attribut -->

  Nous venons de voir que le langage html utilisait des balises. Nous allons voir maintenant que la plupart d'entre elles sont paramétrables. Par exemple, et pour reprendre les balises présentées ci-dessus, les liens hypertexte ( a ) et images ( img ) utilisent respectivement les attributs href (adresse du lien) et src (adresse/source de l'image). Ces paramètres sont à insérer dans la première balise . Autre exemple avec la balise body (étudiée plus haut) :

Nous avons ici déterminé dans la balise body :

• la couleur d'arrière plan de la page : bgcolor = "#EEEEEE" ( couleur Hexa )
• la couleur du texte principal (pour tout le document) : text = "#000000" ,
• la marge en bas de page : bottommargin = "10" .

Important : si le langage html prévoit des attributs pour la mise en page (couleurs, marges, bordures...), on préfèrera l'utilisation des feuilles de style , étudiées à l'étape suivante.

Créer un site web : précédent | suivant : Feuilles de style css

CNN values your feedback

Zimbabwe’s president mnangagwa reelected after tense contest.

Zimbabwe’s incumbent President Emmerson Mnangagwa was declared the winner in the country’s presidential elections on Saturday after securing an absolute majority in a tense presidential contest that was marred by delays.

“The Zimbabwe Electoral Commission has announced the 2023 presidential election results. His Excellency President Emmerson Mnangagwa was declared the winner with 2,350,711 votes, consisting 52.6% of the vote, followed by Nelson Chamisa of the Citizens Coalition for Change (CCC) party who scored 1,906,734, which is 44% of the vote,” Zimbabwe’s Information Ministry tweeted on Saturday.

The 80-year-old’s victory extends the Zanu-PF’s decades-long stranglehold on Zimbabwe’s politics, having been the dominant party in the country since it gained independence from Britain in 1980.

Chamisa, 45, had been upbeat about victory , and has now rejected the results announced by the electoral body. It’s not immediately known if he will mount a legal challenge.

His party earlier decried the late deployment of voting materials that triggered widespread voting delays and also cited some alleged irregularities in the voting process.

Zimbabweans cast votes in crucial elections amid sky-high inflation

In a statement on Wednesday, the CCC said some of its candidates were omitted from the ballot papers, which in some cases, it added, were printed with the photos of the ruling party’s candidates on CCC’s rolls.

The electoral commission did not respond to those allegations.

Voting continued for a second day in parts of Zimbabwe where polling started behind schedule on Wednesday. A presidential decree extended voting until Thursday in three provinces, including the capital Harare where Chamisa’s party enjoys popular support.

Observers commended the peaceful conduct of the polls but said the election process fell short of many regional and international standards.

The European Union Election Observation Mission (EU EOM) said in a preliminary report released on Friday that “fundamental freedoms were increasingly curtailed” during the elections, adding that “acts of violence and intimidation” resulting in a “climate of fear” were also witnessed during the polls.

Around 40 election monitors were arrested by Zimbabwe’s police Thursday for allegedly co-ordinating the release of results ahead of the final tally of the ballots.

Human rights group Amnesty International said the arrests occurred “after the Zimbabwe NGO Forum released a report detailing irregularities that they had observed on election day.”

This was the second election in Zimbabwe since authoritarian leader Robert Mugabe was deposed by the military in 2017.

Mnangagwa, nicknamed “The Crocodile,” succeeded Mugabe after helping to orchestrate the coup that ousted him. He retained his grip on power the following year when he beat Chamisa in a hotly contested presidential vote.

In that election, in 2018, Mnangagwa won 51% of the total ballots, while Chamisa took 44%. The results were disputed by Chamisa, who described the election as “fraudulent and illegal” and mounted a legal challenge. However, Mnangagwa was sworn in after Zimbabwe’s constitutional court upheld his victory.

Easy to predict

Analysts said the outcome of the latest election was easier to predict. “I’m not sure that it will be a game-changing election,” said Eldred Masunungure, an expert in politics and governance at the University of Zimbabwe. “I don’t see any signals or any indications that it is a watershed election,” he told CNN ahead of the Wednesday polls.

Mnangagwa’s Zanu-PF party also told CNN it expected to win by a landslide. “We are going to wallop the opposition,” its national spokesperson Chris Mutsvangwa said in the buildup to the election.

“It will be a landslide against the opposition,” he added.

• Longs Formats
• Newsletters
• Météo de l'Energie
• Jeux concours
• BFMTV et vous
• Témoins BFMTV
• L'info en vrai
• BFM Pratique
• Comparateur
• Devenir Annonceur
• Police-justice
• International
• JO Paris 2024
• Environnement
• BFM Business
• BFM Régions
• RMC Découverte

Suivez en direct la présentation de Thierry Henry comme nouveau sélectionneur de l'équipe de France Espoirs

Sur le même sujet.

Femme tuée en Savoie: "Mes pensées vont aux enfants" explique avec émotion le maire du village

Johannesburg: plus de 70 personnes sont mortes dans l'incendie d'un immeuble délabré du centre-ville

Contractuels de l’Éducation nationale: "On se retrouve quand même dans une situation de bricolage" déplore Sophie Vénétitay

"C'était nécessaire, ce qu'il y a de certains, c'est que c'est loin d'être suffisant" indique Olivia Grégoire, ministre déléguée chargée des Petites et Moyennes Entreprises et du Tourisme

"Cette piscine ne doit pas cacher la réalité des conditions indignes [que les détenus] subissent tous les jours" indique Mathieu Quinquis, président de l'Observatoire International des Prisons

Une piscine gonflable retrouvée dans la cellule d'un détenu à Valence

"Je suis bouleversée par tout ça". En Savoie, une policière qui n'était pas en service a été tuée en pleine rue. La piste du féminicide est privilégiée

La liste dévoilée des 23 joueurs sélectionnés par Didier Deschamps pour l'Euro 2024

Suivez l'annonce de la liste des joueurs retenus par Didier Deschamps, sélectionneur de l'équipe de France de football

Émeutes: la mairie de Garges-lès-Gonesse (Val-d'Oise) restera fermée pendant 2 ans à cause des dégâts

Comment les professeurs contractuels sont devenus indispensables à l'Éducation nationale

"Éduquer les enfants, c'est se rendre utile": les professeurs contractuels sont formés quelques jours avant la rentrée

"Je suis heureux parce que la promesse c'était une prouesse technologique, et la promesse est honorée" indique le maire de Toulouse après le déplacement d'un monument pour le métro

2000 km pour tracer un cœur en vélo tandem ! BFMTV répond à vos questions

Advertisement

Supported by

A Kiss After Spain’s World Cup Win Prompts Many to Cry Foul

A soccer federation chief kissed the Spanish forward Jennifer Hermoso fully on the lips during the medals ceremony, an unpleasant reminder to many of the sexism that has plagued women’s soccer.

• Share full article

By Constant Méheut

Reporting from Barcelona, Spain

Spaniards celebrated their country’s first Women’s World Cup victory on Sunday afternoon by holding dance parties in the streets and sharing their giddy delight.

But it was a kiss seen around the world that was the talk of social media.

Amid the national jubilation, many were jolted by an impromptu kiss planted on the Spanish forward Jennifer Hermoso by the president of Spain’s soccer federation, Luis Rubiales, during the medals ceremony, an unpleasant reminder to many of the sexism scandals that have plagued Spanish women’s soccer.

After the Spanish players defeated England 1-0 and lined up onstage in Sydney, Australia, to collect their medals before lifting the World Cup trophy, Mr. Rubiales enthusiastically grabbed Ms. Hermoso, kissed her on the cheeks and then kissed her fully on the lips, video of the encounter showed. Spain’s Queen Letizia was onstage at the time.

¿Lo de Rubiales? pic.twitter.com/H7ZaAQ0RxU — Darío (@Youpsico) August 20, 2023

Later, in another video, Ms. Hermoso is seen apparently making her distaste known, responding, “Hey, but I didn’t like that!”

The video of what many concluded had been an unwanted smooch was widely shared on social media, spurring confusion among many Spaniards and prompting others to denounce it as highly inappropriate behavior. Some called it disgraceful and evidence of lingering sexism in soccer. Others demanded that Mr. Rubiales resign.

As of Sunday night, he had not responded to the criticism. The soccer federation did not immediately respond to an email seeking comment from Mr. Rubiales as it was late in Spain.

The kissing episode revived memories of the mistreatment of Spain’s female soccer players. For 27 years, the women’s national team had the same coach, who was infamous for dismissing the players as “chavalitas,” or immature girls. He was dismissed in 2015 after players protested.

Current members of the women’s national team have also complained that they have been disrespected by top male soccer executives and denied the kind of elite equipment and treatment given to the men’s teams. The women have said that the facilities the federation provided for them are subpar and that Jorge Vilda, their coach, fostered an oppressive workplace environment, one in which the players’ every move was monitored by his staff.

Last fall, many players revolted against the coach and federation , accusing them of mistreatment and withdrawing from consideration for the national team. Ms. Hermoso was seen as having tacitly supported the rebellion .

The controversies did not stop Spain from winning this year’s World Cup . But the sudden kiss added another dimension to the women’s victory.

In a live video posted on Instagram and shared on other social media platforms, Ms. Hermoso is seen celebrating with her teammates in the locker room after the final and smiling even as she says the kiss was not wanted.

Adding to the confusion, Mr. Rubiales is heard in another video telling the players that they would be rewarded with a trip to Ibiza for their victory and adding that it would be an opportunity to celebrate his “wedding” to Ms. Hermoso — an apparent reference to the kiss.

There is no indication that Mr. Rubiales and Ms. Hermoso are in a relationship.

Nadia Tronchoni, an editor at El País, Spain’s biggest newspaper, noted in an opinion piece that Sunday’s victory was “more than a title” for Spanish women.

“The women, the girls of this country celebrated the fact that our stubbornness has finally defeated machismo,” she said, referring to female players’ long struggle to be recognized. “Rubiales’s kiss to Hermoso reminds us that the road ahead is a long one.”

Constant Méheut has covered France from the Paris bureau of The Times since 2020. More about Constant Méheut