presentation en html

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

Components · Classes .
WebSlides on Codepen .
WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

Background images: Unsplash .
CSS animations: Animate.css .
Longforms: Animate on scroll .

Ready to Start?

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

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

Open index.html
Change the CSS import to reflect the theme you want to use

The theme files are:

solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
Create a new .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be .css , not .scss .
Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

Title Font: Viga
Content Font: Open Sans
Code Font: Courier New
Cursive Font: Great Vibes
Yellow Color: #F9DC24
Add a .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

fade-in-then-out
fade-in-then-semi-out
highlight-current-blue
highlight-red
highlight-green
highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

Location Stockholm
Education Siena College
Work Software Engineer at Spotify
Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

Location Antibes, France
Work Senior Software Engineer at Spotify
Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

Location Lake Villa, IL
Education Bachelor in Electronics Engineering
Work Computer & Technology Enthusiast
Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

Location Singapore
Work Web Developer at FirstCom Solutions
Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

Email [email protected]
Location Indianapolis, IN
Education Purdue University
Pronouns he/him
Work Senior Frontend Engineer at Whatnot
Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

Location New Delhi, India 🇮🇳
Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

Location Saratoga Springs,NY
Education BA, University of Michigan
Work Documentarian
Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

Location Toronto, ON
Education MFA in Art Video Syracuse University 2013 😂
Work Rivalry
Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

Location Palm Bay, FL
Education FullSail University
Work Developer Relations Manager at MetaMask
Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

Email [email protected]
Location Abuja Nigeria
Work Project Manager Techibytes Media
Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

Email [email protected]
Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

Copy an existing presentation folder
Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

Location Los Angeles
Education Engineering, Physics, and Math
Joined Sep 6, 2018

Fantastic post. I just loved it.

Location France
Work Co-Founder of Depot
Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Alien Signals — 2-in-1 Challenge

Mads Stoumann - Sep 12

Performant Web Apps

Shubhajit Chatterjee - Sep 8

Next.js vs React - Which One to Choose?

ViitorCloud Technologies - Sep 9

13 top open-source tools to ship your apps faster ⚡🚀

Sunil Kumar Dash - Sep 12

We're a place where coders share, stay up-to-date and grow their careers.

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

Create Presentation Slides with HTML and CSS

Bahasa Indonesia

As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I'll show you how today!

Screencasts:

Creating The Markup (preview video)
Building Sample Slides
Load The Slides
Styling and JavaScript
Event Listeners
Completing the JavaScript
Custom Slide-Styling

Screencast 1: Create the Markup

Screencast 2: Building Sample Slides

Screencast 3: Load the Slides

Screencast 4: Styling and Continued JavaScript

Screencast 5: Event Listeners

Screencast 6: Completing the JavaScript

Screencast 7: Custom Slide Styling

[email protected]

Bootstraphunter

Free and Premium Bootstrap Templates and Themes

How to Create Presentation Slides with HTML and CSS

March 15, 2022

We can easily create beautiful and interactive presentations with HTML, CSS and JavaScript, the three basic web technologies. In this tutorial, we’ll use modern HTML5 markup to structure our slides, we’ll use CSS to style the slides and add some effects, and we’ll use JavaScript to trigger these effects and reorganize the slides based on click events.

This tutorial is perfect for those of you new to HTML5, CSS and JavaScript, who are looking to learn something new by building.

Here’s the final preview of the presentation slide we’re going to build:

You can also find the complete source code in the GitHub repo .

Let’s begin.

Table of Contents

1. Create the Directory Structure

Before we get started, let’s go ahead and create our folder structure; it should be fairly simple. We’ll need:

index.html css/style.css js/scripts.js

This is a simple base template. Your files remain blank for the time being. We’ll fill that shortly.

2. Create the Starter Markup

Let’s begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <link rel=”stylesheet” href=”css/style.css”>

<!– Font Awesome Icon CDN –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css” integrity=”sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> </head> <body> <div class=”container” <div id=”presentation-area”> <!– slides go here –> </div> </div> <script src=”js/index.js” type=”text/javascript”></script> </body> </html>

From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet ( style.css ) and our JavaScript ( index.js ).

Now we’ll add the HTML markup for the actual slides inside the <div> wrapper:

<!– Slide 1 –> <div class=”slide show”> <div class=”heading”> Presentation on C# </div> <div class=”content grid center”> <h3 class=”title”> What is C# ? <br /> All You Need To Know </h3> </div> </div>

<!– Slide 1 –> <div class=”slide”> <div class=”heading”> Overview </div> <div class=”content grid center”> <h3 class=”title”> Introduction to C+ </h3> <p class=”sub-title”> Basic and Advanced Concepts </p> <p>Lecture No. 1</p> <p>My Email Address</p> <p><a href=””> [email protected] </a></p> </div> </div>

<!– Add 5 more slides here –> </section>

We have seven slides in total, and each slide is comprised of the heading section and the content section.

Only one slide will be shown at a time. This functionality is handled by the .show class which will be implemented later on in our stylesheet.

Using JavaScript, later on, we’ll dynamically add the .show class to the active slide on the page.

Below the slides, we’ll add the markup for our slide’s counter and tracker:

Later on, we’ll use JavaScript to update the text content as the user navigates through the slides.

Finally, we’ll add the slide navigator just below the counter:

This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we’ll use the class .show to regulate which button appears at a time.

That’ll be all for the HTML part, let’s move over to styling.

3. Make It Pretty

Our next step takes place within our stylesheet. We’ll be focusing on both aesthetics as well as functionality here. To make each slide translate from left to right, we’ll need to target the class .show with a stylesheet to show the element.

Here’s the complete stylesheet for our project:

* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; transition: all 0.5s ease; }

body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }

ul { margin-left: 2rem; }

ul li, a { font-size: 1.2em; }

.container { background: #212121; width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }

#presentation-area { width: 1000px; height: 500px; position: relative; background: purple; }

/* Styling all three sections */ #presentation-area .presentation { width: 100%; height: 100%; overflow: hidden; background: #ffffff; position: relative; }

#presentation-area .counter { position: absolute; bottom: -30px; left: 0; color: #b6b6b6; }

#presentation-area .navigation { position: absolute; bottom: -45px; right: 0; }

/* On full screen mode */ #presentation-area.full-screen { width: 100%; height: 100%; overflow: hidden; }

#presentation-area.full-screen .counter { bottom: 15px; left: 15px; }

#presentation-area.full-screen .navigation { bottom: 15px; right: 15px; }

#presentation-area.full-screen .navigation .btn:hover { background: #201e1e; color: #ffffff; }

#presentation-area.full-screen .navigation .btn-screen:hover { background: #201e1e; } /* End full screen mode */

/* Buttons */ .navigation button { width: 30px; height: 30px; border: none; outline: none; margin-left: 0.5rem; font-size: 1.5rem; line-height: 30px; text-align: center; cursor: pointer; }

.navigation .btn { background: #464646; color: #ffffff; border-radius: 0.25rem; opacity: 0; transform: scale(0); }

.navigation .btn.show { opacity: 1; transform: scale(1); visibility: visible; }

.navigation .btn-screen { background: transparent; color: #b6b6b6; visibility: hidden; }

.btn-screen.show { opacity: 1; transform: scale(1); visibility: visible; }

.btn-screen.hover { color: #ffffff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); } /* End Buttons */

/* content */ .presentation .content { padding: 2em; width: 100%; height: calc(100% – 100px); z-index: 11; }

.presentation .content.grid { display: grid; }

.presentation .content.grid.center { justify-content: center; align-items: center; text-align: center; }

.content .title { font-size: 3em; color: purple; }

.content .sub-title { font-size: 2.5em; color: purple; }

.content p { font-size: 1.25em; margin-bottom: 1rem; } /* End Content Stylesheet */

/* Slide */ .presentation .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; opacity: 0; transform: scale(0); visibility: none; }

.slide.show { opacity: 1; transform: scale(1); visibility: visible; }

.slide .heading { padding: 2rem; background: purple; font-size: 2em; font-weight: bold; color: #ffffff; }

4. Enable Slide Navigation

Whenever we click on the left or right icon, we want the next slide or previous slide to appear. We also want to be able to toggle between full-screen mode and small-screen mode.

Furthermore, we want the slide’s counter to display the accurate slide number on every slide. All these features will be enabled with JavaScript.

Inside js/index.js , we’ll begin by storing references to the presentation wrapper, the slides, and the active slide:

let slidesParentDiv = document.querySelector(‘.slides’); let slides = document.querySelectorAll(‘.slide’); let currentSlide = document.querySelector(‘.slide.show’);

Next, we’ll store references to the slide counter and both of the slide navigators (left and right icons):

var slideCounter = document.querySelector(‘.counter’); var leftBtn = document.querySelector(‘#left-btn’); var rightBtn = document.querySelector(‘#right-btn’);

Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:

let presentationArea = document.querySelector(‘#presentation-area’); var fullScreenBtn = document.querySelector(‘#full-screen’); var smallScreenBtn = document.querySelector(‘#small-screen’);

Now that we’re done with the references, we’ll initialize some variables with default values:

var screenStatus = 0; var currentSlideNo = 1 var totalSides = 0;

screenStatus represents the screen orientation. 0 represents a full screen mode and 1 represents a small screen mode.

currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.

Moving the Presentation to the Next and Previous Slides

Next, we’ll add click event listeners to the left button, right button, full screen button and small screen button:

leftBtn.addEventListener(‘click’, moveToLeftSlide); rightBtn.addEventListener(‘click’, moveToRightSlide);

fullScreenBtn.addEventListener(‘click’, fullScreenMode); smallScreenBtn.addEventListener(‘click’, smallScreenMode);

We bind corresponding functions that will run when the click event is triggered on the corresponding element.

Here are the two functions responsible for changing the slide:

function moveToLeftSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.previousElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

function moveToRightSlide() { var tempSlide = currentSlide; currentSlide = currentSlide.nextElementSibling; tempSlide.classList.remove(‘show’); currentSlide.classList.add(‘show’); }

In the function moveToLeftSlide, we basically access the previous sibling element (ie. the previous slide), remove the .show class on the current slide and add it to that sibling. This will move the presentation to the previous slide.

We do the exact opposite of this in the function moveToRightSlide. Because nextElementSibling is the opposite of previousElementSibling, we’ll be getting the next sibling instead.

Code for Showing the Presentation in Full Screen and Small Screen

Recall that we also added click event listeners to the full screen and small screen icons.

Here’s the function responsible for toggling full-screen mode:

function fullScreenMode() { presentationArea.classList.add(‘full-screen’); fullScreenBtn.classList.remove(‘show’); smallScreenBtn.classList.add(‘show’);

screenStatus = 1; }

function smallScreenMode() { presentationController.classList.remove(‘full-screen’); fullScreenBtn.classList.add(‘show’); smallScreenBtn.classList.remove(‘show’);

screenStatus = 0; }

Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.

Since we’re now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.

For the smallScreenMode function, the opposite is done – we remove the class full-screen, show the expand button icon, and reupdate screenStatus.

Hidding Left and Right Icons in First and Last Slides

Now, we need to invent a way to hide both the left and right buttons when we’re on the first slide and last slide respectively.

We’ll use the following two functions to achieve this:

function hideLeftButton() { if(currentSlideNo == 1) { toLeftBtn.classList.remove(‘show’); } else { toLeftBtn.classList.add(‘show’); } }

function hideRightButton() { if(currentSlideNo === totalSides) { toRightBtn.classList.remove(‘show’); } else { toRightBtn.classList.add(‘show’); } }

Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.

Updating and Displaying Slide Number

Because we’re making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides.

We also need to display to the user what slide he or she is currently viewing.

We’ll create a function getCurrentSlideNo to update the current slide number:

function getCurrentSlideNo() { let counter = 0;

slides.forEach((slide, i) => { counter++

if(slide.classList.contains(‘show’)){ currentSlideNo = counter; } });

We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (ie. with the class .show) to the currentSlideNo variable.

With that in place, we create another function that inserts some text into the slide counter:

function setSlideNo() { slideNumber.innerText = `${currentSlideNo} of ${totalSides}` }

So if we were on the second slide for example, the slide’s counter will read as: 2 of 6

Putting Everything Together

To ensure that all of these functions run in harmony, we’ll run them in a newly created init function that we’ll execute at start of the script, just below the references:

function init() {

getCurrentSlideNo(); totalSides = slides.length setSlideNo(); hideLeftButton(); hideRightButton(); }

We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:

function moveToLeftSlide() { // other code

function moveToRightSlide() { // other code

This will ensure that the function init runs every time the user navigates left or right in the presentation.

Wrapping Up

I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS and JavaScript.

With this project, you should have learned some basic HTML, CSS and JavaScript syntax to help you with web development.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications You must be signed in to change notification settings

Create HTML presentations in seconds —

webslides/WebSlides

Folders and files.

Name		Name
560 Commits

Repository files navigation

Webslides = create stories with karma.

Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos .

Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip .

What's in the download?

The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.

Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
Slide counter.
Permalinks: go to a specific slide.
Click to nav.
Simple CSS alignments. Put content wherever you want (vertical centering...)
40+ components: background images/videos, quotes, cards, covers...
Flexible blocks with auto-fill and equal height.
Fonts: Roboto, Maitree (Serif), and San Francisco.
Vertical rhythm (use multiples of 8).
Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
Each parent <section> in the #webslides element is an individual slide.

Vertical Sliding

Css syntax (classes).

Typography: .text-landing , .text-data , .text-intro ...
Background Colors: .bg-primary , .bg-apple , .bg-blue ...
Background Images: .background , .background-center-bottom ...
Cards: .card-50 , .card-40 ...
Flexible Blocks: .flexblock.clients , .flexblock.metrics ...

You can add:

Unsplash photos
animate.css
particles.js
Animate on scroll (Useful for longform articles)
Do not miss our demos .
Plugin Docs
Plugin Development
WebSlides was created by @jlantunez using Cactus .
Javascript: @Belelros and @LuisSacristan .
Based on SimpleSlides , by @JennSchiffer .

Releases 12

Used by 192.

Contributors 14

JavaScript 49.3%

Better world by better software

Gleb bahmutov phd , our planet 🌏 is in danger, act today: what you can do, presentation slides using html and css, my html framework for simple drag and drop presentations from markdown files..

I was fed up with PowerPoint-style presentation tools, and created my own browser-based presentation viewer called slides-now . Making a slide-based viewer is trivial using HTML and CSS3 transitions, and in this blog post I will go through the 4 steps to achieve the visual transition effect.

Display individual slides and transition between them on key presses.

Step 1: initial structure

Step 1 demo

I will use article HTML element to keep my presentation, and individual section elements for each slide. The content is directly a part of the HTML document's body

2
3
4
5
6
7
8
9
10
11
12
13
14
15

>
<article>
<section><h2>Slide 1</h2>
<p>This is the first slide</p>
</section>

<section><h2>Slide 2</h2>
<p>Second slide</p>
</section>

<section><h2>Slide 3</h2>
<p>Another slide</p>
</section>
</article>
</body>

Each section is styled for clarity

2
3
4
5
6
7

{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
padding-left: 1em;
}

All slides are displayed at once, each block follows the another, just like a list of divs . The slides are styled to be very small for demo purposes, usually a slide would occupy 90-100% of the window's space.

Step 2: simple slide switch in place

Let's display a single active slide at a time. We will need a few additional CSS classes and JavaScript event handler to toggle CSS.

Step 2 demo

2
3
4
5
6
7

.active {
visibility: visible;
}
section.inactive {
visibility: hidden;
display: none;
}

Event handler

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

() {
var currSlide = 0;
var allSlides = $('section');
$(document).on('keydown', function (event) {
var nextSlide;
if (event.keyCode === 37) { // clicked left arrow
nextSlide = currSlide ? currSlide - 1 : currSlide;
} else if (event.keyCode === 39) { // clicked right arrow
console.log('next slide');
nextSlide = currSlide < allSlides.length - 1 ? currSlide + 1 : currSlide;
}
if (nextSlide !== currSlide) {
$(allSlides[currSlide])
.removeClass('active')
.addClass('inactive');
$(allSlides[nextSlide])
.removeClass('inactive')
.addClass('active');
currSlide = nextSlide;
}
event.preventDefault();
});
});

A single slide is active , every other slide is inactive and hidden.

I will show the HTML DOM snapshot instead of page. In this case only the second slide is visible.

2
3
4
5
6
7
8
9
10
11
12
13
14

>
<section class="inactive">
<h2>Slide 1</h2>
<p>This is the first slide</p>
</section>
<section class="active">
<h2>Slide 2</h2>
<p>Second slide</p>
</section>
<section class="inactive">
<h2>Slide 3</h2>
<p>Another slide</p>
</section>
</article>

Step 3: prev - active - next slides

Showing a single slide at a time is nice, but the sudden switch to new slide is too abrupt. We would like to slide to the next chunk of content. Before we implement the motion, lets lay the groundwork by positioning the slides first.

Step 3 demo

Lets introduce two additional CSS classes and position them to the left (previous) and to the right (next) slide.

We are going to position the previous / next slides using CSS transform property, and make it very light using opacity

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

section {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
...
}
.prev {
-webkit-transform: translate3d(-110%, 0, 0);
-moz-transform: translate3d(-110%, 0, 0);
-ms-transform: translate3d(-110%, 0, 0);
-o-transform: translate3d(-110%, 0, 0);
transform: translate3d(-110%, 0, 0);
opacity: 0.25;
}
.active {
opacity: 1;
}
.next {
-webkit-transform: translate3d(110%, 0, 0);
-moz-transform: translate3d(110%, 0, 0);
-ms-transform: translate3d(110%, 0, 0);
-o-transform: translate3d(110%, 0, 0);
transform: translate3d(110%, 0, 0);
opacity: 0.25;
}

The key press handler becomes slightly more complicated to change all CSS classes on press

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(event.keyCode === 37 && currSlide) {
// previous slide
$(allSlides[currSlide - 1])
.removeClass('prev')
.addClass('active');
$(allSlides[currSlide + 1])
.removeClass('next')
.addClass('inactive');
$(allSlides[currSlide])
.removeClass('active')
.addClass('next');
$(allSlides[currSlide - 2])
.removeClass('inactive')
.addClass('prev');
currSlide -= 1;
}

You can switch between the slides using left / right keys. The transition is sudden, but the slides are positioned correctly for the next step.

Step 4: slide transitions

In this step we are going to interpolate changes in slide position and opacity using CSS3 transition specification.

Step 4 demo

2
3
4
5
6
7

{
-webkit-transition: -webkit-transform .7s ease, opacity .7s ease;
-moz-transition: -moz-transform .7s ease, opacity .7s ease;
-ms-transition: -ms-transform .7s ease, opacity .7s ease;
-o-transition: -o-transform .7s ease, opacity .7s ease;
transition: transform .7s ease, opacity .7s ease;
}

The above CSS means that when removing class next and adding class active , CSS transform property changes from transform: translate3d(110%, 0, 0); to transform: none; and the browser CSS engine itself will interpolate the changes, making the entire animation last 0.7 seconds. Same principle applies to opacity: it will be interpolated from 0.25 to 1.0 over 0.7 seconds.

Our JavaScript remains unchanged: when moving a slide from active to prev state after clicking right arrow button, all we need to do is toggle CSS class names

2 3	.removeClass('active') .addClass('prev');

Step 4: advanced

An additional detail adds complexity to the correct visual transition. Let's say the user pressed right key button. The next slide becomes active, moving according to the CSS transformation. How should next + 1 slide become next? If there is not position information set, it will appear from the center, which looks weird. In order to keep things consistent, I wanted next slides to appear as if sliding from the right. So I introduced two additional CSS classes: before class is attached to the slides before prev slide. After class is attached to the slides after the next slide. The only purpose for theses classes is to have correct position information - they are hidden under prev or next slides waiting to fade in using opacity CSS interpolation.

2
3
4
5
6
7
8

{
-webkit-transform: translate3d(-220%, 0, 0);
-moz-transform: translate3d(-220%, 0, 0);
-ms-transform: translate3d(-220%, 0, 0);
-o-transform: translate3d(-220%, 0, 0);
transform: translate3d(-220%, 0, 0);
opacity: 0;
}

The described visual steps create a tiny presentation engine, running in your browser. Right away I advise you to:

Use stylus instead of plain CSS to deal better with verbose CSS transforms.
Use jade instead of plain verbose HTML for faster editing.
Refactor JavaScript to make initialization and keeping track of active slide easier
Instead of hardcoding the presentation in HTML body element, load it dynamically, or better yet transform a Markdown document into HTML using marked
Test your presentation using casperjs

Finally, take a look at these projects:

bespoke.js slide engine and how it uses 3D effects for next , prev slides.
Markdown to HTML presentation engine slides-now-core based on bespoke.js
HTML5 application slides-now based on slides-now-core that adds drag and drop support and offline mode.

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

Item	Value	Quantity
Apples	$1	7
Lemonade	$2	18
Bread	$3	2

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

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

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.

Beautiful HTML Presentation Plugin with jQuery - reveal.js

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

10 Best Mobile-friendly One Page Scroll Plugins
Prev: Weekly Web Design & Development News: Collective #330
Next: Weekly Web Design & Development News: Collective #331

7 Best JavaScript Timeago Plugins For Human-readable Datetime Format

Top 100 Best Free jQuery Plugins From 2013

7 Best Youtube Lazy Loaders To Improve Page Speed (2024 Update)

10 Best JavaScript Dark Mode Solutions (2024 Update)

Top 100 Best Free jQuery Plugins From 2014

10 Best Free GDPR Cookie Consent Banner Plugins In JavaScript

Add Your Review

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).

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

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

it’s quicker to add a few HTML tags than use a WYSIWYG interface
you can update a presentation using a basic text editor on any device
files can be hosted on the web; you need never lose a PPT again
you can easily distribute a presentation without viewing software
it’s not PowerPoint and your audience will be amazed by your technical prowess.
you require web coding skills
positioning, effects and transitions are more limited
few systems offer slide notes (it’s a little awkward to show them separately)
it’s more difficult to print handouts
S5 — A Simple Standards-Based Slide Show System ( download )
CSSS — CSS-based SlideShow System ( download )
Slides ( download )
HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
OverflowAI GenAI features for Teams
OverflowAPI Train & fine-tune LLMs
Labs The future of collective knowledge sharing
About the company Visit the blog

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.

Get early access and see previews of new features.

How to convert a PowerPoint slide into HTML?

I am trying to insert PowerPoint slides into HTML preserving links in the PowerPoint slide. I was just wondering if any of you knew a good method to maybe exporting a PowerPoint slide to an HTML and then displaying it in a div on your page, with a link to say do a JavaScript function on that same page.

5 Answers 5

I've never used it, but PPT2HTML might help. There's also this blog that describes how to save your presentation for the web then modify it.

This isn't exactly what you're after, but there are some html-based presentation tools like S5 , DOMSlides you might want to consider as they wouldn't suffer from being translated.

You can use the jQuery plugin called PPTXjs.

This plugin convert pptx to html using javascript only (no server side code needed).

It is based on PPTX2HTML but support a lot more shapes, media (audio, video) and more.

For more details : https://github.com/meshesha/PPTXjs .

How are you using the Library. I cannot use it. there is no example given in github.com/meshesha/PPTXjs . – Surya Commented Nov 12, 2019 at 15:57

1)u can convert it to flash swf 2)convert all slides to an image file and then add 2 buttons(Back,Next) with calling the next and previous images based on an integer variable and this buttons will show u the previous and next slides :)

sorry but u cant embed it without copying all the Powerpoint-exported HTML code in your div tag

Though not quite what you asked, Google Docs or Slideshare both let you embed Powerpoint as flash - perhaps that would be a more elegant way to do this. That is, if embedding is the aim!

I guess this will have to do, I was hoping more for a solution that I had more propriety control over, but microsofts export feature in powerpoint is just well retarded. – Javed Ahamed Commented Sep 7, 2009 at 0:23

I remember there was a function in PowerPoint to export it to an HTML, I would do that and then have it in the page using an <iframe> and then put that inside a <div>

yes in a way this could work, but then javascript calls in the link would only work for code in the iframe, unless you know a way to get a javascript call link in the iframe to work on the parent frame? – Javed Ahamed Commented Aug 9, 2009 at 18:13
Hey,I am having a same situation...can you please elaborate a little..In my case,i want the user to upload the ppt file and extract those slides (for slideshow)and put it in div..if there is an alternate solution without upload,pleasse let me know..waiting for your reply.. – HIRA THAKUR Commented Aug 25, 2013 at 18:18

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

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 you have read our privacy policy .

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

The Overflow Blog
One of the best ways to get value for AI coding tools: generating tests
The world’s largest open-source business has plans for enhancing LLMs
Featured on Meta
User activation: Learnings and opportunities
Site maintenance - Mon, Sept 16 2024, 21:00 UTC to Tue, Sept 17 2024, 2:00...
What does a new user need in a homepage experience on Stack Overflow?
Announcing the new Staging Ground Reviewer Stats Widget

Hot Network Questions

How to reply to a revise and resubmit review, saying is all good?
Is it ok for a plugin to extend a class in some other module without declaring the other module as a dependency?
Does such a manifold exist??
How in the world do I fix this anciently old slop sink? I am okay even with a temporary fix
Drill perpendicular hole through thick lumber using handheld drill
What is the oldest open math problem outside of number theory?
How to deal with coauthors who just do a lot of unnecessary work and exploration to be seen as hard-working and grab authorship?
Why did early ASCII have ← and ↑ but not ↓ or →?
Will "universal" SMPS work at any voltage in the range, even DC?
Building rear track wheel from road wheel
Convert base-10 to base-0.1
C++ std::function-like queue
View undo history of Windows Explorer on Win11
Do carbon fiber wings need a wing spar?
HHL eigenvalue inversion and further inverse QPE
Would a scientific theory of everything be falsifiable?
History of the migration of ERA from AMS to AIMS in 2007
Do black holes convert 100% of their mass into energy via hawking radiation?
How did people know that the war against the mimics was over?
Is a thing just a class with only one member?
Arduino Uno Serial.write() how many bits are actually transmitted at once by UART?
Python script to renumber slide ids inside a pptx presentation
What’s the name of this horror movie where a girl dies and comes back to life evil?
Should I be careful about setting levels too high at one point in a track?

Cómo crear una presentación de diapositivas con HTML, CSS y JavaScript

Original article: How to Create a Slideshow with HTML, CSS, and JavaScript

Una presentación de diapositivas es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado.

En este tutorial puedes crear una secuencia de diapositivas siguiendo estos sencillos pasos:

Escriba en el HTML

Escribir estilos para ocultar diapositivas y mostrar solo una diapositiva..

Para ocultar las diapositivas tienes que darles un estilo por defecto. Esto indicará que solo muestres una diapositiva si está activa o si quieres mostrarla.

Cambia las diapositivas en un intervalo de tiempo.

El primer paso para cambiar las diapositivas que se muestran es seleccionar el componente padre de las diapositivas y luego sus diapositivas.

Cuando selecciones las diapositivas tienes que ir sobre cada diapositiva y añadir o quitar la clase active dependiendo de la diapositiva que quieras mostrar. Después solo tienes que repetir el proceso durante un intervalo de tiempo determinado.

Tenga en cuenta que cuando elimina una clase active de una diapositiva, la está ocultando debido a los estilos definidos en el paso anterior. Pero cuando añades una clase active a la diapositiva, estás sobrescribiendo el estilo display:none a display:block , en consecuencia la diapositiva se mostrará a los usuarios.

Ejemplo de Codepen siguiendo este tutorial

Leer más publicaciones .

If you read this far, thank the author to show them you care. Say Thanks

Aprende a codificar de forma gratuita. El plan de estudios de código abierto de freeCodeCamp ha ayudado a más de 40,000 personas a obtener trabajos como desarrolladores. Empezar

How to Embed HTML in Google Slides? [Complete Guide!]

By: Author Shrot Katewa

HTML is a great way of including “more information” into your presentations which can open up a whole new world of possibilities to present an interactive presentations. Although Google has not introduced a feature to embed HTML in Google Slides yet, we can use “insert” option to embed Objects like URLs, images, videos etc. easily.

If you want to display some information outside your presentation and also want to keep the flow at the same time, there are two ways to add links of web pages in Google Slides.

Either you select the text and choose “Link” from the “Right-click” menu or select “Link” from the dropdown menu of “Insert” tab. It will open a dialog box where you can paste the link of your website, padlet, Instagram post etc. and click “apply” to embed the link into the slide.

In this article, we will also teach you how to embed a Google Slide on a website. So, let’s start out this complete guide:

1. How to Embed HTML in Google Slides?

Google Slides does not have any feature to embed HTML in a presentation slide. Unfortunately, you cannot embed HTML in a Google Slides presentation.

However, using the “Insert” menu in the menu bar, you can insert embedded objects like images, audio, videos, etc. To learn more about inserting embedded media into a Google Slides presentation, you can read my article here .

2. How to Embed a Website in Google Slides?

In Google Slides, you cannot embed a website into a slide. However, you can add the link of a website to the text in a slide. All you have to do is follow 2 easy steps.

Step-1: Click on the “Link” option

The first step is to select the text where you want to link the website. Then “Right Click” on the text. In the right-click menu, click on the “Link” option. Alternatively, you can press the “Ctrl+K” keys on your keyboard.

Step-2: Click on the “Apply” option

In the pop-up dialog under the selected text, click on the “Search or paste a link” box. You can now paste the website link that you want to embed. Then click on the “Apply” option to hyperlink the text.

3. How to Embed iframes in Google Slides?

You cannot embed iframes in Google Slides. Since there is no feature for HTML codes, the application cannot embed iframes. However, you can copy the iframe code for the Google Slides presentation to embed it into websites. Refer to section 6 for detailed steps on obtaining the iframe code for a Google Slides presentation.

4. How to Embed Padlet in Google Slides?

To embed your Padlet wall in Google Slides, you have to first copy the link from Padlet. Since Google Slides does not have any feature that allows you to embed a code, you have to add Padlet as a link. To do so, follow the 3 quick steps.

Step-1: Click on the “Insert” tab

The first step is to select the text or image where you want to link the Padlet wall. Then click on the “Insert” tab in the menu bar located at the top of the screen.

Step-2: Click on the “Link” option

In the dropdown menu under the “Insert” tab, click on the “Link” option. You can alternatively press the “Ctrl+K” keys on your keyboard.

Step-3: Paste the Padlet link

In the pop-up dialog box, you can now paste the Padlet link. Finally, all you have to do is click on the “Apply” button to add the Padlet link to the selected text or image.

5. How to Embed Instagram Post in Google Slides?

In Google Slides, you cannot embed an Instagram post using the embed link available on Instagram. However, you can insert the picture and link it to the Instagram post. All you have to do is follow the 5 simple steps.

Step-1: Click on the “Insert” menu

The first step is to insert the Instagram image into the presentation slide. To do so, you have to click on the “Insert” menu in the menu bar located at the top of the screen.

Step-2: Click on the “Image” option

In the “Insert” dropdown menu, click on the “Image” option. In the pop-up menu by the “Image” option in the “Insert” menu, click on the “Drive” or “Photos” option.

Since you cannot insert the image directly using the Instagram link, you must first upload the Instagram picture to Google Drive or Google Photos.

Step-3: Click on the “Insert” option

In the “Google Drive” sidebar on the right side of the screen, click on the Instagram image. Then click on the “Insert” option at the bottom of the sidebar to insert the image into the slide.

Step-4: Click on the “Insert link” option

The next step is to click on the Instagram picture inserted into the slide to select it. Then click on the “Insert link” option in the toolbar located under the menu bar at the top of the screen.

Alternatively, you can press the “Ctrl+K” keys on your keyboard.

Step-5: Paste the Instagram link

In the pop-up dialog under the picture, you can now paste the link to the Instagram post in the “Search or paste a link” box. Then all you have to do is click on the “Apply” button next to the box to embed the Instagram post to the picture in the presentation.

6. How to Embed a Google Slides on a Website?

Google Slides offers the “Publish to the web” feature that gives you the embed code that you can copy and paste to a website to embed the presentation. To embed the Google Slides presentation to a website, follow the 5 quick steps.

Sep-1: Click on the “File” menu

In the menu bar located at the top of the screen, click on the “File” menu. It is the first tab in the menu bar.

Step-2: Click on the “Publish to the web” option

The next step is to scroll down in the dropdown menu under the “File” tab. Click on the “Publish to the web” option in the “File” menu. This will open the “Publish to the web” dialog box.

Step-3: Click on the “Embed” option

In the “Publish to the web” dialog box, click on the “Embed” option. Then you can customize autoplay options for the embedded presentation.

Step-4: Click on the “Publish” button

The next step is to click on the “Publish” button at the bottom of the “Publish to the web” dialog box. This will prompt a pop-up dialog box. Click on the “OK” button in the pop-up dialog.

Step-5: Copy the embed link

You can now see the embed code for the presentation in the “Publish to the web” dialog box. All you have to do is copy the code and paste it into the website where you want to embed the presentation. To copy the code, press the “Ctrl+C” keys on your keyboard.

How to Convert PowerPoint Presentations to HTML: A Step-by-Step Guide

Converting a PowerPoint presentation to HTML format can seem daunting, but it’s a straightforward process. Essentially, you’ll be saving the PowerPoint file as a web page, which creates an HTML version of the presentation. This can be done directly from PowerPoint itself, and once complete, you’ll have an HTML file that can be viewed in web browsers.

After you’ve converted your PowerPoint presentation to HTML, you can share it more easily across various platforms. It’ll be accessible to anyone with a web browser, without the need for PowerPoint software.

Introduction

Have you ever created a brilliant PowerPoint presentation and wished you could share it on the web for a wider audience? Well, converting your PowerPoint to an HTML format is the perfect solution! HTML, which stands for HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. By converting your PowerPoint to HTML, you open up a world of possibilities for sharing your content online.

This process is especially relevant for educators, marketers, and businesses looking to distribute their presentations more broadly. It allows for easy sharing on websites, email, and social media platforms. Plus, it ensures that your audience doesn’t need to have PowerPoint installed on their devices to view the presentation. So, let’s dive into how you can turn your PowerPoint slides into a web-friendly format!

Step by Step Tutorial on How to Convert PowerPoint Presentations to an HTML Format

The following steps will guide you through converting a PowerPoint presentation into an HTML format using Microsoft PowerPoint.

Step 1: Open your PowerPoint presentation

Open the PowerPoint presentation that you want to convert to HTML format.

In this step, you’ll need to have your presentation fully prepared and ready for conversion. Ensure all animations, transitions, and multimedia elements are properly set up, as they will be included in the conversion process.

Step 2: Click ‘File’ and select ‘Save As’

Navigate to the ‘File’ tab on the ribbon and select ‘Save As’ from the dropdown menu.

When saving your presentation, you have several format options. For converting to HTML, you’ll need to find the appropriate web format in the upcoming steps.

Step 3: Choose the location to save the file

Decide where on your computer or network you would like to save the HTML version of your presentation.

Consider creating a new folder specifically for web files if you’re planning to upload the HTML presentation to a server. This helps keep your files organized and easily accessible.

Step 4: In the ‘Save as type’ dropdown, select ‘Web Page’

From the ‘Save as type’ dropdown menu, select ‘Web Page’ or a similar option depending on your version of PowerPoint.

This step is crucial as selecting the ‘Web Page’ format is what converts your presentation into HTML. There may be different naming for this option based on the PowerPoint version you’re using, such as ‘Web Page (.htm;.html)’.

Step 5: Click ‘Save’

After selecting the ‘Web Page’ option, click ‘Save’ to convert and save your PowerPoint presentation as an HTML file.

Once you’ve clicked ‘Save’, PowerPoint will create an HTML file and a folder containing all the necessary components for your presentation to display properly in web browsers.

Benefit	Explanation
Widely Accessible	Converting your PowerPoint to HTML makes it accessible to anyone with a web browser, regardless of whether they have PowerPoint installed.
Easy to Share	HTML files are easily shared via email or on the web, and can be embedded into websites or social media platforms.
Preserves Interactivity	The conversion process keeps animations and transitions intact, maintaining the interactive elements of your presentation.

Drawback	Explanation
Loss of Some Features	Not all PowerPoint features may be supported in the HTML version, potentially leading to differences between the original presentation and its web counterpart.
File Size	Depending on the complexity of the PowerPoint, the HTML file and its accompanying folder can be quite large, making it difficult to share or upload.
Browser Compatibility	The HTML format may display differently across various web browsers, potentially affecting the consistency of your presentation.

Additional Information

When converting PowerPoint presentations to an HTML format, it’s crucial to consider the compatibility of your presentation across different web browsers. While most modern browsers will display HTML consistently, older versions may have trouble with certain features or animations. Additionally, remember that the HTML version of your presentation will include a folder with supporting files like images and animations. Keep this folder in the same location as your HTML file to ensure the presentation displays correctly.

Another tip is to check your presentation for any proprietary or confidential information before converting it. Once in HTML format, your presentation becomes much easier to distribute, and you’ll want to make sure it’s ready for a wider audience. If you’re using a company or school template, ensure you have the rights to share it online.

Finally, consider the SEO benefits of converting your presentation. With proper use of keywords and descriptions, your HTML presentation can be indexed by search engines, making it easier for people to find your content online.

Open your PowerPoint presentation.
Click ‘File’ and select ‘Save As’.
Choose the location to save the file.
In the ‘Save as type’ dropdown, select ‘Web Page’.
Click ‘Save’.

Frequently Asked Questions

Will my animations and transitions still work after converting to html.

Yes, most animations and transitions will be preserved in the HTML format, though some complex effects might not translate perfectly.

Can I edit my presentation once it’s in HTML format?

Editing the content of an HTML file is possible but can be more complex than editing in PowerPoint. It’s recommended to make any necessary changes in PowerPoint before converting.

How can I share my HTML presentation?

You can share the HTML file and accompanying folder via email, or you can upload it to a web server to be accessed via a link.

Will the HTML file be the exact replica of my PowerPoint presentation?

While the goal is to preserve as much of the original presentation as possible, there may be slight differences due to the limitations of HTML.

Can I convert my HTML presentation back to PowerPoint?

It’s not recommended as the conversion from HTML back to PowerPoint may not preserve the original formatting and interactivity.

Converting PowerPoint presentations to an HTML format is a powerful way to expand your audience and ensure your work is accessible to anyone with internet access. Although there are some considerations to keep in mind, like potential feature loss and file size, the benefits often outweigh the drawbacks.

As we’ve explored, the process is relatively simple and can be done directly from PowerPoint. It’s an excellent skill for anyone looking to share their ideas and presentations online more effectively. So, why not give it a try, and see how your PowerPoint presentations can shine on the web?

Matthew Burleigh has been writing tech tutorials since 2008. His writing has appeared on dozens of different websites and been read over 50 million times.

After receiving his Bachelor’s and Master’s degrees in Computer Science he spent several years working in IT management for small businesses. However, he now works full time writing content online and creating websites.

His main writing topics include iPhones, Microsoft Office, Google Apps, Android, and Photoshop, but he has also written about many other tech topics as well.

Read his full bio here.

HTML BASICS Slides Presentation

Click to access all Slides..

This slide presentation shows basics of HTML.

HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little standardization, but as it has become more important, the need for standards has become more apparent. Regardless of whether you choose to write HTML or XHTML, understanding the current standards will help you provide a solid foundation that will simplify all your other web coding. Fortunately HTML and XHTML are actually simpler than they used to be, because much of the functionality has moved to CSS.

Common Elements

Every page (HTML or XHTML shares certain elements in common.) All are essentially plain text files, with the .html extension. HTML files should not be created with a word processor, but in some type of editor that creates plain text. Every page has a large container (HTML or XHTML) and two major subcontainers, the head and the body. The head area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body contains the part of the page that is visible to the user.

Tags and Attributes

An HTML document is based on the notion of tags. A tag is a piece of text inside angle brackets (<>). Tags typically have a beginning and an end, and usually contain some sort of text inside them. For example, a paragraph is normally denoted like this:

The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted by an end tag, which is similar to the start tag but with a slash (</p>.) It is common to indent content in a multi-line tag, but it is also legal to place tags on the same line:

Tags are sometimes enhanced by attributes, which are name value pairs that modify the tag. For example, the tag (used to embed an image into a page) usually includes the following attributes:

The src attribute describes where the image file can be found, and the alt attribute describes alternate text that is displayed if the image is unavailable.

Nested tags

Tags can be (and frequently are) nested inside each other. Tags cannot overlap, so <a><b></a></b> is not legal, but <a><b></b></a> is fine.

HTML VS XHTML

HTML has been around for some time. While it has done its job admirably, that job has expanded far more than anybody expected. Early HTML had very limited layout support. Browser manufacturers added many competing standards and web developers came up with clever workarounds, but the result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 standard) go back to the original purpose of HTML: to describe the structure of the data only, and leave all formatting to CSS (Please see the DZone CSS Refcard Series). XHTML is nothing more than HTML code conforming to the stricter standards of XML. The same style guidelines are appropriate whether you write in HTML or XHTML (but they tend to be enforced in XHTML):

Most of the requirements of XHTML turn out to be good practice whether you write HTML or XHTML. I recommend using XHTML strict so you can validate your code and know it follows the strictest standards.

XHTML has a number of flavors. The strict type is recommended, as it is the most up-to-date standard which will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and a frameset type, which allows you to add frames. For most applications, the strict type is preferred.

HTML Template

The following code can be copied and pasted to form the foundation of a basic web page:

The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to ensure you haven't missed anything

Validating Tool	Description
WC3	The most commonly used validator is online at http://validator.w3.org this free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a 'spell-checker' for your code and warns you if you made an error like forgetting to close a tag.
HTML Tidy	There's an outstanding free tool called HTML tidy which not only checks your pages for validity, but also fixes most errors automatically. Download this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser.
HTML Validator extension	The extension mechanism of Firefox makes it a critical tool for web developers. The HTML Validator extension is an invaluable tool. It automatically checks any page you view in your browser against both the w3 validation engine and tidy. It can instantly find errors, and repair them on the spot with tidy. With this free extension available at http://users.skynet. be/mgueury/mozilla/ , there's no good reason not to validate your code.

USEFUL OPEN SOURCE TOOLS

Some of the best tools for web development are available through the open source community at no cost at all. Consider these application as part of your HTML toolkit:

Open Source Tool	Description
Aptana	http://www.aptana.com/ This free programmer's editor (based on Eclipse) is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support within the editor.
Web Developer Toolbar	https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox extension adds numerous debugging and web development tools to your browser.
Firebug	https://addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version even works with IE.

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

Element	Description
<html></html>	Surrounds the entire page
<head></head>	Contains header information (metadata, CSS styles, JavaScript code)
<title></title>	Holds the page title normally displayed in the title bar and used in search results
<body></body>	Contains the main body text. All parts of the page normally visible are in the body

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

Element	Name	Description
<h1> </h1>	Heading 1	Reserved fo strongest emphasis
<h2> </h2>	Heading 2	Secondary level heading. Headings go down to level 6, but <h1> through <h3> are most common
<p> </p>	Paragraph	Most of the body of a page should be enclosed in paragraphs
<div> </div>	Division	Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs

LISTS AND DATA

Web pages frequently incorporate structured data so HTML includes several useful list and table tag

Element	Name	Description
<ul></ul>	Unordered list	Normally these lists feature bullets (but that can be changed with CSS)
<ol></ol>	Ordered list	These usually are numbered, but this can be changed with CSS
<li></li>	List item	Used to describe a list item in an unordered list or an ordered list
<dl></dl>	Definition list	Used for lists with name-value pairs
<dt></dt>	Definition term	The name in a name-value pair. Used in definition lists
<dd></dd>	Definition description	The value (or definition) of a name, value pair
<table></table>	Table	Defines beginning and end of a table
<tr></tr>	Table row	Defines a table row. A table normally consists of several <tr> pairs (one per row)
<td></td>	Table data	Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>)
<th></th>	Table heading	Indicates a table cell to be treated as a heading with special formatting

Standard List Types

HTML supports three primary list types. Ordered lists and unordered lists are the primary list types. By default, ordered lists use numeric identifiers, and unordered lists use bullets.

However, you can use the list-style-type CSS attribute to change the list marker to one of several types.

Lists can be nested inside each other

Definition lists

The special definition list is used for name / value pairs. The definition term (dt) is a word or phrase that is used as the list marker, and the definition data is normally a paragraph:

Use of tables

Tables were used in the past to overcome the page-layout shortcomings of HTML. That use is now deprecated in favor of CSS-based layout. Use tables only as they were intended, to display tabular data.

A table mainly consists of a series of table rows (tr.) Each table row consists of a number of table data (td) elements. The table heading (th) element can be used to indicate a table cell should be marked as a heading.

The rowspan and colspan attributes can be used to make a cell span more than one row or column.

Each row of a table should have the same number of columns, and each column should have the same number of rows. Use of the span attribute may require adjustment to other rows or columns.

LINKS AND IMAGES

Links and images are both used to incorporate external resources into a page. Both are reliant on URIs (Universal Resource Indicators), commonly referred to as URLs or addresses.

<a> (anchor) The anchor tag is used to provide the basic web link:

In this example, http://www.example.com is the site to be visited. The text "link to example.com" will be highlighted as a link.

absolute and relative references

<link>

The link tag is used primarily to pull in external CSS files:

<img>

The img tag is used in to attach an image. Valid formats are .jpg, .png, and .gif. An image should always be accompanied by an alt attribute describing the contents of the image.

Image formatting attributes (height, width, and align) are deprecated in favour of CSS.

SPECIALTY MARKUP

HTML / XHTML includes several specialty tags. These are used to describe special purpose text. They have default styling, but of course the styles can be modified with CSS.

<quote>

The quote tag is intended to display a single line quote:

Quote is an inline tag. If you need a block level quote, use <blockquote>.

<pre>

The <pre> tag is used for pre-formatted text. It is sometimes used for code listings or ASCII art because it preserves carriage returns. Pre-formatted text is usually displayed in a fixed-width font.

<code>

The code format is used to manage pre-formatted text, especially code listings. It is very similar to pre.

This tag is used to mark multi-line quotes. Frequently it is set off with special fonts and indentation through CSS. It is a block-level tag.

<span>

The span tag is a vanilla inline tag. It has no particular formatting of its own. It is intended to be used with a class or ID when you want to apply style to an inline chunk of code.

The em tag is used for standard emphasis. By default, <em> italicizes text, but you can use CSS to make any other type of emphasis you wish.

This tag represents strong emphasis. By default, it is bold, but you can modify the formatting with CSS.

Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.

Form Structure

A number of tags are used to describe the structure of the form. Begin by looking over a basic form:

The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.

Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.

You can add a legend inside a fieldset. This describes the purpose of the fieldset.

A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.

The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.

This element allows a single line of text input:

Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.

Radio Button

Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.

Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.

Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.

Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.

Note that the data is still not protected in any meaningful way.

Buttons are used to signal user input. Buttons can be created through the input tag:

This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:

This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.

The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.

Select / option

Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.

The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.

Multiple Selections

You can also create a multi-line selection with the select and option tags:

DEPRECATED FORMATTING TAGS

Certain tags common in older forms of HTML are no longer recommended as CSS provides much better alternatives.

The font tag was used to set font color, family (typeface) and size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details.

I (italics)

HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should be done through CSS. The <em> tag represents emphasized text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not recommended. Add font-style: italic to the style of any element that should be italicized.

Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly emphasized. By default, this will result in boldfacing the enclosed text. You can add bold emphasis to any style with the font-weight: bold attribute in CSS.

DEPRECATED TECHNIQUES

In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer recommended.

Frames have been used as a layout mechanism and as a technique for keeping one part of the page static while dynamically loading other parts of the page in separate frames. Use of frames has proven to cause major usability problems. Layout is better handled through CSS techniques, and dynamic page generation is frequently performed through server-side manipulation or AJAX.

Table-based design

Before CSS became widespread, HTML did not have adequate page formatting support. Clever designers used tables to provide an adequate form of page layout. CSS provides a much more flexible and powerful form of layout than tables, and keeps the HTML code largely separated from the styling markup.

HTML ENTITIES

Sometimes you need to display a special character in a web page. HTML has a set of special characters for exactly this purpose. Each of these entities begins with the ampersand(&) followed by a code and a semicolon.

Character	Name	Code	Note
	Non-breaking space		Adds white space
	<	Used to display HTML code or mathematics
>	Greater than	>	Used to display HTML code or mathematics
&	Ampersand	&	If you're not displaying an entity but really want the & symbol
©	Copyright	©	Copyright symbol
®	Registered trademark	®	Registered trademark

HTML 5 / CSS3 PREVIEW

New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is not far behind. While the following should still be considered experimental, they are likely to become very important tools in the next few years. Firefox 3.5, Safari 4 (and a few other recent browsers) support the following new features:

Audio and video tags

Finally the browsers have direct support for audio and video without plugin technology. These tags work much like the img tag.

The HTML 5 standard currently supports Ogg Theora video, Ogg Vorbis audio, and wav audio. The Ogg formats are opensource alternatives to proprietary formats, and plenty of free tools convert from more standard video formats to Ogg. The autoplay option causes the element to play automatically. The controls element places controls directly into the page.

The code between the beginning and ending tag will execute if the browser cannot process the audio or video tag. You can place alternate code here for embedding alternate versions (Flash, for example)

The canvas tag offers a region of the page that can be drawn upon (usually with Javascript.) This creates the possibility of real interactive graphics without requiring plugins like Flash.

This is actually a CSS improvement, but it's much needed. It allows you to define a font-face in CSS and include a ttf font file from the server. You can then use this font face in your ordinary CSS and use the downloaded font. If this becomes a standard, we will finally have access to reliable downloadable fonts on the web, which will usher in web typography at long last.

Weekly Trends and Language Statistics

Pièces
Table et cuisine
Vaisselle et accessoires de table
Dessous de plat et plateau

Plateau présentation carton argenté x3

Envie de rajouter ce produit à votre liste d’envie ? Connectez-vous à votre compte personnel GiFi

Caractéristiques du produit

Diamètre : 33 cm
Matière(s) : carton
Coloris : gris argenté

Description du produit

Pour présenter aisément vos aliments lors de votre repas de fête, optez pour ce lot de 3 plateaux de présentation en carton de 33cm diamètre et de coloris gris argenté. Idéal pour l'apéritif, les petits fours et autres gourmandises de Noël !

error.inventory.message

La quantité demandée a été mise à jour. La quantité disponible pour ce produit est : 4 pièces.

La quantité doit être égale ou supérieure à 1

Attention la quantité demandée a été mise à jour en fonction du stock disponible.

Seule la livraison à domicile est disponible pour cette quantité.

Attention la quantité demandée a été mise à jour en fonction du stock disponible. Seule la livraison à domicile est disponible pour 0 pièces.

Attention la quantité demandée a été mise à jour en fonction du stock disponible. Seul le retrait en magasin est disponible pour 4 pièces.

Attention la quantité demandée a été mise à jour en fonction du stock disponible. Seule la livraison à domicile est disponible pour 4 pièces.

COMMENTS

The HTML presentation framework
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 ...
How to Create Presentation Slides With HTML and CSS
In the function moveToLeftSlide, we basically access the previous sibling element (i.e. the previous slide), remove the .show class on the current slide, and add it to that sibling. This will move the presentation to the previous slide. We do the exact opposite of this in the function moveToRightSlide.Because nextElementSibling is the opposite of previousElementSibling, we'll be getting the ...
How to Create Beautiful HTML & CSS Presentations with WebSlides
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 ...
How to Create a Slideshow with HTML, CSS, and JavaScript
The first step to changing which slides show is to select the slide wrapper (s) and then its slides. When you select the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show. Then just repeat the process for a certain time interval. Keep it in mind that when you remove an active ...
WebSlides: Create Beautiful HTML Presentations
WebSlides is the easiest way to make HTML presentations. Just choose a demo and customize it in minutes. 120+ slides ready to use. Good karma. WebSlides is a beautiful solution for telling stories. ... HTML and CSS as narrative elements. Work better, faster. Designers, marketers, and journalists can now focus on the content. Simply choose a ...
How To Build A Captivating Presentation Using HTML, CSS, & JavaScript
Making a Presentation. Copy an existing presentation folder; Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2) Making a Slide. Making a slide is pretty simple. Just add a HTML section. <section>  </section> inside the span with the class of "prez-root". Also keep in mind ...
Create Presentation Slides with HTML and CSS
HTML/CSS. As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I'm already familiar with? With a bit of fiddling, we can easily create beautiful presentations with HTML and CSS. I'll show you how today!
How to Create Presentation Slides with HTML and CSS
Create the Starter Markup. 3. Make It Pretty. 4. Enable Slide Navigation. Moving the Presentation to the Next and Previous Slides. Code for Showing the Presentation in Full Screen and Small Screen. Hidding Left and Right Icons in First and Last Slides. Updating and Displaying Slide Number.
Top 10 JavaScript frameworks to create presentation slides
Top 10 JavaScript frameworks to create presentation slides. Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You'll have full control over the appearance and layout of your slides.
How To Create a Slideshow
Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...
webslides/WebSlides: Create HTML presentations in seconds
WebSlides = Create stories with Karma. Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.
Presentation slides using HTML and CSS
Step 1: initial structure #. Step 1 demo. I will use article HTML element to keep my presentation, and individual section elements for each slide. The content is directly a part of the HTML document's body. Each section is styled for clarity.
Demo
The HTML Presentation Framework. Created by Hakim El Hattab and contributors. Sponsored by. 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. ... Presentations can be exported to PDF, here's an example:
10 Best HTML Presentation Frameworks In JavaScript (2024 Update)
Best Vanilla JS HTML Presentation Frameworks. 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.
W3.CSS Slideshow
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).
5 of the Best Free HTML5 Presentation Systems
Google Slides Template. As you'd expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs). It's fairly basic when compared to Reveal.js or Impress ...
How to convert a PowerPoint slide into HTML?
I am trying to insert PowerPoint slides into HTML preserving links in the PowerPoint slide. I was just wondering if any of you knew a good method to maybe exporting a PowerPoint slide to an HTML and then displaying it in a div on your page, with a link to say do a JavaScript function on that same page.
Cómo crear una presentación de diapositivas con HTML, CSS y JavaScript
Empezar. ANUNCIO. Una presentación de diapositivas es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado. En este tutorial puedes crear una secuencia de diapositivas siguiendo estos sencillos pasos: Escriba en el HTML <!DOCTYPE html> <html.
How to Embed HTML in Google Slides? [Complete Guide!]
Step-3: Click on the "Embed" option. In the "Publish to the web" dialog box, click on the "Embed" option. Then you can customize autoplay options for the embedded presentation. Step-4: Click on the "Publish" button. The next step is to click on the "Publish" button at the bottom of the "Publish to the web" dialog box.
How to Convert PowerPoint Presentations to HTML: A Step-by-Step Guide
Step 4: In the 'Save as type' dropdown, select 'Web Page'. From the 'Save as type' dropdown menu, select 'Web Page' or a similar option depending on your version of PowerPoint. This step is crucial as selecting the 'Web Page' format is what converts your presentation into HTML. There may be different naming for this option ...
HTML BASICS Slides Presentation
HTML is used as the graphical user interface in client-side programs written in JavaScript. Server-side languages like PHP and Java also receive data from web pages and use HTML as the output mechanism. The emerging Ajax technologies likewise use HTML and XHTML as their visual engine.
Plateau présentation carton argenté x3
Caractéristiques du produit. Diamètre : 33 cm Matière(s) : carton Coloris : gris argenté Description du produit. Pour présenter aisément vos aliments lors de votre repas de fête, optez pour ce lot de 3 plateaux de présentation en carton de 33cm diamètre et de coloris gris argenté.

Create beautiful stories

Why WebSlides?

An opportunity to engage.

Work better, faster.

WebSlides is really easy

→ Simple Navigation

Built to expand

Ready to Start?

DEV Community

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Built-In Themes

Changing The Theme

Custom Themes

Creating A Custom Theme

Mixins & Settings

Vertical Slides

Transitions

Top comments (18)

SBCompSciClub / prez-software

Run on Dev Server

Making a Presentation

Making a Slide

Adding Text

Alien Signals — 2-in-1 Challenge

Performant Web Apps

Next.js vs React - Which One to Choose?

13 top open-source tools to ship your apps faster ⚡🚀

Unsupported browser

Create Presentation Slides with HTML and CSS

Screencasts:

Screencast 1: Create the Markup

Screencast 2: Building Sample Slides

Screencast 3: Load the Slides

Screencast 4: Styling and Continued JavaScript

Screencast 5: Event Listeners

Screencast 6: Completing the JavaScript

Screencast 7: Custom Slide Styling

Bootstraphunter

How to Create Presentation Slides with HTML and CSS

1. Create the Directory Structure

2. Create the Starter Markup

3. Make It Pretty

4. Enable Slide Navigation

Moving the Presentation to the Next and Previous Slides

Code for Showing the Presentation in Full Screen and Small Screen

Hidding Left and Right Icons in First and Last Slides

Updating and Displaying Slide Number

Putting Everything Together

Wrapping Up

Recent Posts

Top 10 JavaScript frameworks to create presentation slides

Common features

You might also like

Navigation Menu

Saved searches

webslides/WebSlides

Repository files navigation

What's in the download?

Vertical Sliding

Releases 12

Contributors 14

Better world by better software

Step 1: initial structure

Step 2: simple slide switch in place

Step 3: prev - active - next slides

Step 4: slide transitions

Step 4: advanced

The HTML Presentation Framework

Hello There

Vertical Slides

Basement Level 1

Basement Level 2

Pretty Code

Even Prettier Animations

Auto-Animate

Touch Optimized

Fragment Styles

Transition Styles

Slide Backgrounds

Image Backgrounds