presentation on html

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

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:

PAGE STRUCTURE ELEMENTS

The following elements are part of every web page.

KEY STRUCTURAL ELEMENTS

Most pages contain the following key structural elements:

LISTS AND DATA

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

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.

<blockquote>

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.

<strong>

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.

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.

Follow us on Facebook and Twitter for latest update.

• Weekly Trends and Language Statistics

• My presentations

Auth with social network:

Download presentation

We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!

Presentation is loading. Please wait.

Introduction to HTML- Basics

Published by Dale Webb Modified over 5 years ago

Similar presentations

Presentation on theme: "Introduction to HTML- Basics"— Presentation transcript:

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.

Teppo Räisänen LIIKE/OAMK 2010

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

Chapter 2 HTML (Hypertext Markup Language) Part I.

1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

HTML (HyperText Markup Language)

Web Development University of Khartoum. Web Development Web Programming Web Design University of Khartoum.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML Pt. 2.

Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –

 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

About project

© 2024 SlidePlayer.com Inc. All rights reserved.

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.

How to Create Presentation Slides With HTML and 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?

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. After this you could even learn to build an HTML5 slide deck or a dynamic HTML with JavaScript PPT . The sky is the limit. 

Wondering how to create an HTML slideshow? Here's the final preview of the presentation HTML tutorial slides we're going to build:

Have you checked out HTML tutorial slides? It's a good example of HTML PPT slides for download.

Let's begin.

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:

• css/style.css
• js/scripts.js

This is a simple base template. Your files remain blank for the time being. We'll fix 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.

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:

We have seven slides in total, and each slide is composed 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. Now, 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 and 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:

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:

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

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

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

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:

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:

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 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:

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, we do the opposite—we remove the class full-screen , show the expand button icon, and update screenStatus .

Hiding the Left and Right Icons on the First and Last Slides

Now, we need to invent a way to hide 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:

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 the 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 they are currently viewing.

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

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

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

So if we were on the second slide, for example, the slide's counter would read: "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 the start of the script, just below the references:

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

This will ensure that the init function 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. It's a great way to get into creating dynamic HTML with JavaScript PPT 

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

How to Create a Slideshow with HTML, CSS, and JavaScript

A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.

For this tutorial you can create a slideshow by following these simple steps:

Write some markup

Write styles to hide slides and show only one slide..

To hide the slides you have to give them a default style. It'll dictate that you only show one slide if it is active or if you want to show it.

Change the slides in a time interval.

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 class from a slide, you are hiding it because of the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style display:none to display:block , so the slide will show to the users.

Codepen example following this tutorial

Learn to code. Build projects. Earn certifications—All for free.

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

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

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 .

• [email protected]

Bootstraphunter

Free and Premium Bootstrap Templates and Themes

How to Create Presentation Slides with HTML and CSS

• March 15, 2022

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? 

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:

<section class=”presentation”>

<!– 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:

<div id=”presentation-area”> <!– <section class=”slides”><-></section> –> <section class=”counter”> 1 of 6 </section> </div>

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:

<div id=”presentation-area”> <!– <section class=”slides”><-></section> –> <!– <section class=”counter”><-></section> –> <section class=”navigation”> <button id=”full-screen” class=”btn-screen show”> <i class=”fas fa-expand”></i> </button>

<button id=”small-screen” class=”btn-screen”> <i class=”fas fa-compress”></i> </button>

<button id=”left-btn” class=”btn”> <i class=”fas fa-solid fa-caret-left”></i> </button>

<button id=”right-btn” class=”btn”> <i class=”fa-solid fa-caret-right”></i> </button> </section> </div>

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. 

Recent Posts

• How Flatlogic Started Their Business
• Gulp is back – did it ever leave?
• Solving Memory Leaks in Node.js has Never Been Easier, Introducing the Latest Version of N|Solid
• Svelte 5 is almost here
• JSR isn’t another tool, it’s a fundamental shift

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

Advertisement

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

Video: HTML for Beginners

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]

Top Tutorials

Top references, top examples, get certified.

HTML Slidy: Slide Shows in HTML and XHTML

Dave Raggett , < [email protected] > Hit the space bar or swipe left for next slide

Slide Shows in HTML and XHTML

• You can now create accessible slide shows with ease
• Advance to next slide with mouse click, space bar or swipe left
• Move forward/backward between slides with Cursor Left, Cursor Right, Pg Up and Pg Dn keys, or swipe left or right
• Home key for first slide, End key for last slide
• The " C " key for an automatically generated table of contents, or click on "contents" on the toolbar or swipe up or down
• Function F11 to go full screen and back
• The " F " key toggles the display of the footer
• Try it now to see how to include notes for handouts (this is explained in the notes following this slide)
• use S and B keys for manual control (or < and >, or the - and + keys on the number pad
• Use CSS to set a relative font size on a given slide to make the content bigger or smaller than on other slides
• Switching off JavaScript reveals all slides
• Now move to next slide to see how it works

Copyright © 2005-2010 W3C ® ( MIT , ERCIM , Keio ), All Rights Reserved.

For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:

What you need to do

• Each presentation is a single XHTML file
• The div element will be created automatically for h1 elements that are direct children of the body element.
• Use regular markup within each slide
• The slide show style sheet: http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css
• The slide show script: http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js
• Or you can link to the compressed version of the script which is about one seventh the size, see http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz
• If you are using XHTML, remember to use </script> and </style> as per Appendix C.3

To get the W3C Blue Style

The head element should include the following link to the style sheet:

The body element's content should start with the following markup:

This adds the logos on the top left and right corners of the slide.

You are of course welcome to create your own slide designs. You can provide different styles and backgrounds for different slides (more details later).

Use the meta element with name="copyright" for use in the slide show footer:

Upgrading from previous versions of Slidy

• This uses a new version of the HTML Slidy script
• Only adds one global name "w3c_slidy"
• Doesn't interfere with other scripts that set event handers such as onload on body element
• Works for slides delivered as text/html and application/xhtml+xml
• New presentation timer feature
• Initial prompt on first slide to help newcomers to Slidy
• Better support for styling slides and printing them
• See slidy.css , and w3c-blue.css
• But old presentations will work unchanged as they refer to the old script!

To use it off-line

• You can download slidy.zip and unzip it to create a Slidy directory on your machine
• If you have cvs access to the W3C site you can check out the Slidy directory
• Remember to periodically check for updates
• Use relative URIs depending on your local setup to access the appropriate files. Use the same directory structure as on the W3C server, ie, ".../2005/Talks/...".
• Run a Web server on your machine so that the directory above can be accessed via http://localhost/Talks/Tools/Slidy2 and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css", "/Talks/Tools/Slidy2/scripts/slidy.js".
• In both cases you can then publish your files on the W3C server unchanged.
• NOTE Internet Explorer on Windows XP now disables scripting for web pages loaded directly from the local file system, a work around is to use another browser, e.g. Firefox or Opera
• Please feel free to create your own designs, and help us to build a gallery of Slidy styles.
• My Google TechTalk (1st Feb 2006) uses a notebook themed style

Timing Your Presentation

• Sometimes it is handy to know just how much time you have to left to finish your presentation
• To get this feature, add the following markup to the content of the head element, replacing 5 by the duration of your presentation in minutes <meta name="duration" content="5" />
• The time left in minutes and seconds is shown in the footer next to the slide number
• The clock starts to run when you move away from the first slide
• Moving back to the first slide pauses the clock

Generate a Title Page

If you want a separate title page with the W3C blue style, the first slide should be as follows:

The w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

Incremental display of slide contents

For incremental display, use class="incremental", for instance:

• First bullet point
• Second bullet point
• Third bullet point

which is marked up as follows:

An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.

Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.

Create outline lists with hidden content

You can make your bullet points or numbered list items into outlines that you can expand or collapse

• The Slidy script will then treat the list as an outline list.
• Clicking on outline list items will expand/collapse block-level elements within that list item.
• Click on the above to make this list item collapse again.
• Users will then see expand/collapse icons as appropriate and may click anywhere on the list item to change its state. This particular list item can't be expanded or collapsed.
• By default Slidy hides all the block level elements within the outline list items unless you have specified class="expand".
• Such pre-expanded items can be collapsed by clicking on them.
• Microsoft says it will be supported by IE7 along with many fixes for other CSS woes in IE6.

Make your images scale with the browser window size

For adaptive layout, use percentage widths on images, together with CSS positioning:

• CSS positioning is simpler and more reliable than using tables

To work around a CSS rendering bug in IE relating to margins, you can set display:inline on floated elements.

Incremental display of layered images

These can be marked up using CSS relative positioning, e.g.

You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on skyzyx.com. My thanks to ACID2 for the graphics.

How to center content vertically and horizontally

Within the div element for your slide:

and style it with the following:

The above styling is included in w3c-blue.css , which is designed to be used with slidy.css , but you are encouraged to develop your own style sheet with your own look and feel.

Include SVG Content

Inclusion of SVG content can be done using the object element, for example:

has been achieved by:

This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly. Providing such a fall back is very important! Don't forget the alt text for people who can't see the image.

However, there are caveats, see the next slide!

Caveats with SVG+object

Adobe has recently withdrawn support for its SVG Viewer, so you are recommended to consider alternatives . If you still using the Adobe SVG viewer you should be aware of bugs when using the it with IE, Namely:

• Most modern browsers generally support SVG SVG Tiny 1.1 or better natively without the need for a plugin
• If you need to use Internet Explorer you are advised to upgrade to IE9 which includes native support for SVG.
• Patches to Internet Explorer mean that the Adobe SVG Viewer version 3.03 no longer works with IE6. You are therefore recommended to uninstall version 3.03 and instead install Adobe SVG Viewer 6.0 preview if this is available to to you.
• IE6 makes a copy of the SVG file on the local disc when displaying it; but doesn't pass the original URI to the plugin
• As a result relative references from within the SVG to external resources (scripts, CSS, images, other SVG) will break.
• The work around is to use absolute references within your SVG.
• On Windows, the Adobe SVG plugin doesn't respect the CSS z-index property, and if used on backgrounds will always show through other content

Additional Remarks

• Slides are auto-numbered on the slide show footer
• It works out which slide you want and hides the rest
• You can even link between slides in the same slide show
• Previous versions of Slidy used square brackets, which will also work.
• Note that the browser's back/forward buttons may not work as you might expect due to browser problems.
• Adding "title" to the list of classes for div elements that serve as title pages will render the corresponding entry in the table of contents in bold italic text (press "C" now for an example)
• the following requests fonts to be one step smaller than the Slidy default for the current window width, and positive integers will make the fonts correspondingly larger
• Slidy uses JavaScript to dynamically set the font size on the body element, but it is okay to specify relative font changes on other elements within your own style sheet, e.g.
• You are encouraged to ensure your markup is valid. HTML Tidy can be used to find and correct common markup problems
• The slide show script and style sheet can be used freely under W3C's software licensing and document use policies
• At XTech2006 I gave this presentation on Slidy ( Paper ).

Localization and automatic translation

Slidy now includes support for localization

• The tool bar is localized according to the language of the presentation
• This is taken from the xml:lang or lang attributes on the html element
• The help file is selected based upon your browser's language preferences
• As of 29th July 2010, the languages supported are: English, Spanish, Catalonian, Czech, Dutch, German, Polish, French, Hungarian, Italian, Greek, Japanese, Chinese, Russian and Swedish
• If you would like to contribute localizations for other languages, please get in touch with Dave Raggett <[email protected]>
• The following illustrates what was used for Spanish

Note: Slidy now works with current slides translated into French . Use right mouse button to open frame without Google header. To disable automatic translation of the content of particular elements add class="notranslate" , see breaking the language barrier .

Future Plans

Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. The script has been rewritten to make it easier to combine with other scripts, e.g. for UI controls, and support swipes for navigation on touch screen devices. Further work is anticipated on the following:

• Opportunities for graphics designers!
• Bob Ferris has worked on a number of UI extensions which could be incorporated into the W3C slidy script.
• Using scripts to dynamically convert SVG Tiny to VML
• Note that IE9 introduces native SVG support, so it may no longer be worth working on SVG to VML for rendering of SVG
• Using contentEditable when available, otherwise falling back to textarea and plain text conventions
• Using XMLHttpRequest to dynamically reflect changes to server
• Using XMLHttpRequest to listen for navigation commands
• Using VoIP for accompanying audio and teleconferencing
• Synchronizing recorded spoken presentation with currently viewed slide
• and export to PDF via PrinceXML

If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett < [email protected] >

Acknowledgements

• My thanks to everyone who sent in bug reports and feature requests
• Opera Software for implementing CSS @media projection and promoting the idea of using the Web for presentations with Opera Show
• Tantek Çelik for his pioneering work on applying JavaScript for slide presentations on other browsers
• Eric Meyer for taking this further with the excellent S5
• W3C's slidemaker tool , which uses a perl script to split an html file up into one file per slide with navigation buttons
• Early versions of HTML Tidy which supported a means to create presentations via splitting html files on h2 elements
• Many sites with advice on JavaScript work arounds for browser variations
• Microsoft for pioneering contentEditable and XMLHTTP which both provide tremendous opportunities for Web applications
• Microsoft Office which provided the impetus for creating Slidy as a Web-based alternative to the ubiquitous use of PowerPoint

Note that while Slidy and S5 were developed independently, both support the use of the class values "slide" and "handout" for div elements. Slidy doesn't support the "layout" class featured in S5 and Opera Show, but instead provides a more flexible alternative with the "background" class, which enables different backgrounds on different slides.

The following people have contributed localizations:

• Emmanuelle Gutiérrez y Restrepo, Spanish
• Joan V. Baz, Catalan
• Jakub Vrána, Czech
• Ruud Steltenpool, Dutch
• Beat Vontobel, German
• Krzysztof Kotowicz, Polish
• Tamas Horvath, Hungarian
• Creso Moraes, Brazilian Portuguese
• Giuseppe Scollo, Italian
• Konstantinos Koukopoulos, Greek
• Yoshikazu Sawa (澤 義和), Japanese
• Shelley Shyan, Chinese
• Andrew Pantyukhin, Russian
• Saasha Metsärantala, Swedish

The following people have contributed bug reports:

• Gerald Senarclens de Grancy
• Steve Robertson
• Ivan Herman
• Steve Bratt
• Peter Patel-Schneider
• Matthew Coller
• Rune Heggtveit
• Gopal Venkatesan
• Cay Horstmann
• Schuyler Duveen
• Matteo Nannini
• Ralph Swick
• Jakub Vrána
• Philip Bolt
• Jonathan Chetwynd
• Nicolas Frisby

Douglas Crockford for jsmin which was used to minify the script before compressing it with gzip.

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

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

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

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

Basement Level 2

That's it, time to go back up.

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

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

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

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

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

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

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

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

Slide Backgrounds

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

Image Backgrounds

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

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

You can override background transitions per-slide.

Iframe Backgrounds

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

Marvelous List

• No order here

Fantastic Ordered List

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

Tabular Tables

Clever Quotes

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

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

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

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

Press the S key to try it out.

Export to PDF

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

Global State

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

State Events

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

Take a Moment

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

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

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

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

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

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

Ready to Get Started?

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

Online Editor

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

Supporting reveal.js

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

Slides.com — the reveal.js presentation editor.

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

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

Embed a PowerPoint presentation into HTML

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

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

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

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

23 Answers 23

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

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

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

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

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

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

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

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

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

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

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

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

Id recommend the official View Office documents online

for embeding you can simply use

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PS. I am working as SW developer at Aspose.

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

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

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

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

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

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

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

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

(Remember to mark your presentation as private!)

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

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

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

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

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

I was looking for a solution for similar problem.

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

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

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

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

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

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

Your Answer

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 xhtml embed powerpoint or ask your own question .

• The Overflow Blog
• The hidden cost of speed
• The creator of Jenkins discusses CI/CD and balancing business with open source
• Featured on Meta
• Announcing a change to the data-dump process
• Bringing clarity to status tag usage on meta sites
• What does a new user need in a homepage experience on Stack Overflow?
• Feedback requested: How do you use tag hover descriptions for curating and do...
• Staging Ground Reviewer Motivation

Hot Network Questions

• What qualifies as a Cantor diagonal argument?
• What's the statistical historical precedence for generalisation beyond overfitting?
• An instructor is being added to co-teach a course for questionable reasons, against the course author's wishes—what can be done?
• Is it a good idea to perform I2C Communication in the ISR?
• What was IBM VS/PC?
• Replacing jockey wheels on Shimano Deore rear derailleur
• do-release-upgrade from 22.04 LTS to 24.04 LTS still no update available
• Sub-/superscript size difference between newtxmath and txfonts
• Do US universities invite faculty applicants from outside the US for an interview?
• Approximations for a Fibonacci-Like Sequence
• Transform a list of rules into a list of function definitions
• How do I prove the amount of a flight delay in UK court?
• Is there a way to prove ownership of church land?
• Why are there both "was" and "wozu" in this sentence: "Auf jeden Fall ist es mir vollkommen egal, was Sie denken, wozu Sie ein recht hätten!"?
• Enumitem + color labels + multiline = bug?
• Sum[] function not computing the sum
• What is the first work of fiction to feature a vampire-human hybrid or dhampir vampire hunter as a protagonist?
• Remove an edge from the Hasse diagram of a finite lattice
• Why does Jeff think that having a story at all seems gross?
• Are others allowed to use my copyrighted figures in theses, without asking?
• Why isn't a confidence level of anything >50% "good enough"?
• What is the translation of this quote by Plato?
• Starting with 2014 "+" signs and 2015 "−" signs, you delete signs until one remains. What’s left?
• How to raise and lower indices as a physicist would handle it?

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

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

• Today's news
• Reviews and deals
• Climate change
• 2024 election
• Newsletters
• Fall allergies
• Health news
• Mental health
• Sexual health
• Family health
• So mini ways
• Unapologetically
• Buying guides
• Labor Day sales

Entertainment

• How to Watch
• My watchlist
• Stock market
• Biden economy
• Personal finance
• Stocks: most active
• Stocks: gainers
• Stocks: losers
• Trending tickers
• World indices
• US Treasury bonds
• Top mutual funds
• Highest open interest
• Highest implied volatility
• Currency converter
• Basic materials
• Communication services
• Consumer cyclical
• Consumer defensive
• Financial services
• Industrials
• Real estate
• Mutual funds
• Credit cards
• Balance transfer cards
• Cash back cards
• Rewards cards
• Travel cards
• Online checking
• High-yield savings
• Money market
• Home equity loan
• Personal loans
• Student loans
• Options pit
• Fantasy football
• Pro Pick 'Em
• College Pick 'Em
• Fantasy baseball
• Fantasy hockey
• Fantasy basketball
• Download the app
• Daily fantasy
• Scores and schedules
• GameChannel
• World Baseball Classic
• Premier League
• CONCACAF League
• Champions League
• Motorsports
• Horse racing

New on Yahoo

• Privacy Dashboard

The 10 best fonts for presentations

When you buy through links on our articles, Future and its syndication partners may earn a commission.

Even if you know your subject, giving a presentation in front of a bunch of strangers can often be nerve-wracking. So it helps to have a series of eye-catching slides to keep you on track and engage your audience. And key to that is picking the best fonts for presentations, which need to tick a number of boxes (you can't just pick any old free font available).

We've found a selection of fonts great for presentations. Most of these are standard system fonts in PowerPoint and many are included in the Windows or Mac operating systems, which means they're licenced for your own personal use. However, if you want to use them as web fonts on a website, or in client work, you will need to license them, so we've included download links too.

What makes a good presentation font?

First, they need to be clear and legible, even at a distance. Secondly, they need to be attractive and eye-catching. Thirdly, they need to convey a polished and appropriate tone for the context of your presentation. And fourthly, they should be widely available, or at least easy to embed, to avoid formatting issues.

In short, whether you're crafting a business pitch, an academic lecture, or a creative showcase, choosing the best font for presentations can make all the difference. In this article, we'll explore 10 great options.

01. Helvetica

System font in Powerpoint?: Yes

Preinstalled on Windows? No

Preinstalled on macOS: Yes

Download Helvetica from MyFonts

Helvetica might not be the most exciting choice of fonts. But this classic sans-serif, which is named after the Latin word for ‘Switzerland', is nothing if not reliable. Its clean, neutral and versatile nature means conveys an instant sense of professionalism, without drawing unnecessary attention to itself. And that makes it an excellent choice for presentations of all kinds

There's a reason why Helvetica remains hugely popular, 67 years on from its creation: its letterforms are well balanced are balanced between top and bottom, making them highly legible, even at smaller sizes or when projected. Moreover, its wide range of weights and styles allows for flexibility in creating visual hierarchies within your slides.

So whether you're presenting financial data, marketing strategies, or creative concepts, Helvetica will help you share your words in a way that your audience will find easy to read. And isn't that the most important thing?

In short, if you're looking for a modern, straightforward, and universally appealing typeface for your presentations, Helvetica is a worthy contender.

System font in Powerpoint?: No

Preinstalled on macOS: No

Download Futura from MyFonts

Want to give a bold, dynamic edge to your presentation? Then the geometric sans-serif Futura is a good choice. Its clean lines and perfect circles are based on simple shapes, giving it a distinctive and memorable appearance, and strong visual impact. This makes it an especially good option for headlines and key points you want to emphasise.

At the same time, Futura's clarity and legibility at various sizes will ensure that your message comes across effectively, whether you're presenting on a large projector screen or remotely through your audience's laptops.

In short, when you want to convey themes such as disruption, transformation and a contemporary outlook, in fields such as technology, architecture and design, Futura can help your presentation stand out, while still being very legible and accessible.

03. Garamond

Download Garamond from MyFonts

Does your presentation call for a touch of elegance and tradition? Then you'll probably want to go for a serif, and Garamond is an excellent option.

With its roots in 16th-century typography, this font will instantly give a sense of sophistication and timelessness to your slides. At the same time, this iconic typeface remains highly legible, especially in its more recent digital adaptations. Its refined serifs and varied stroke weights create a pleasant rhythm that's easy on the eyes, making it work for both headlines and body text.

For these reasons, Garamond will work particularly well for academic talks, presentations on literary topics, or any content that benefits from a more formal tone. In other words, if you want to convey authority and knowledge while maintaining readability, it's a great option.

04. Montserrat

Download Montserrat from Google Fonts

Is your presentation topic one that's innovative, pioneering, or even game-changing? Then you'll want a font to match, and Montserrat could fit the bill.

Inspired by old posters and signs in Buenos Aires, this eye-catching geometric sans-serif offers a combination of clean, modern letterforms and varied weights. Its crisp edges and open counters contribute to excellent legibility, while its geometric roots give it a contemporary feel. This makes it a great choice for presentations in creative industries, startups, or any other context where a fresh, dynamic tone is required.

Montserrat boasts an extensive family, including various weights and styles, allowing for a creative to typography hierarchies within your slides. So if you want your presentation to feel current and energetic while maintaining clarity and professionalism, it's well worth giving a try.

05. Palatino

Download Palatino from MyFonts

If you're aiming for a balance between reassuring tradition and exciting forward-thinking in your presentation, you'll be looking for a font that sits somewhere between traditional and modern design. In which case we recommend Palatino.

This versatile book serif combines the readability of classic Roman typefaces with subtle calligraphic touches. And that makes it well positioned for presentations that require a professional, scholarly tone without appearing overly formal.

Palatino's defined letterforms ensure clarity even at smaller sizes, making it suitable for both headlines and body copy. It works well on screens, and maintains its elegance and readability when projected. And all this makes it a worthy option for presentations in fields like law, academia or the arts.

06. Calibri

Preinstalled on Windows? Yes

Download Calibri from MyFonts

One of the biggest stresses surrounding presentations is the idea that things will go wrong technically, especially if you're using unfamiliar equipment. So if safety is your priority then good news: Calibri isn't just the default font for Microsoft PowerPoint, it's an excellent design choice as well.

This sans-serif has a warm, soft and friendly tone without sacrificing professionalism and legibility, thanks to its slightly rounded edges and open letterforms. It's also a font that adapts easily to different themes and colour schemes. And this means it work well in both corporate and creative presentations.

Perhaps most significantly, Calibri's widespread availability across systems means you're less likely to encounter formatting issues when sharing your presentation. So if you're seeking a safe, versatile and universally compatible font that still looks current, Calibri is the one we'd recommend.

Download Roboto from Google Fonts

Do you value legibility above all else? Then you can't go wrong with Roboto. Developed by Google, Roboto, this neo-grotesque sans-serif is perfect for designing clear, legible text on screens that need to be readable from a distance, or at small sizes.

Roboto was developed by Google as the system font for Android, and its modern, professional appearance makes it suitable for a wide range of topics and industries. Moreover, its extensive family includes condensed and slab serif versions, which gives you a lot of flexibility in creating visual hierarchies and emphasis within your slides.

In short, Roboto is an excellent choice for presentations that need to look contemporary and function flawlessly.

Download Avenir from MyFonts

If you want to appear warm and friendly, but also cutting-edge, Avenir (meaning "future" in French) is a good font to consider. This geometric sans-serif is similar to Monserrat in that it combines modernist style with humanist touches, and its superb legibility across various sizes makes it versatile for both headlines and body copy.

As such, Avenir would works particularly well for presentations in fields such as technology, healthcare or education. When you want your slides to appear contemporary and polished, yet accessible and inviting, Avenir does a good job of squaring that particular circle.

09. Baskerville

Download Baskerville from FontSquirrel

Here's another great choice for excluding elegance and authority. Baskerville is a transitional serif typeface with refined forms and high contrast between thick and thin strokes. This all adds up to a dignified, sophisticated appearance, making it a good choice for conveying trustworthiness and expertise.

Baskerville clear, open letterforms ensure good readability on screens, particularly for longer text passages, and this font would works exceptionally well for academic or literary presentations, along with businesses looking to project a sense of heritage and quality.

In other words, if you want your audience to perceive your content as thoughtful, well-researched, and credible, Baskerville can help set the right tone.

10. Georgia

Download Georgia from MyFonts

Will your talk be viewed remotely? Then try Georgia; a serif designed specifically for on-screen readability, making it great for digital presentations. Its larger x-height and open letterforms ensure clarity even at smaller sizes, covering you if your slides are being viewed on a smaller laptop or tablet.

These letterforms are sturdy enough to render well on various screen resolutions while still providing the traditional, trustworthy feel associated with serif fonts. This makes Georgia when you require a more formal tone while remaining highly legible on a variety of screens. For talks in fields such as journalism, publishing or any other content-heavy topic, it's a good balance between classic style and readability.

Need more fonts for work? See our pick of the best professional fonts .

Chinese online troll farm posing as 'everyday Americans:' Report

by MATTHEW GALKA | The National Desk

WASHINGTON (TND) — Social media accounts across multiple platforms are posing as "everyday Americans" while a new report says they're linked to China.

Online tracking firm Graphika said it traced multiple accounts to a group dubbed “Spamouflauge," a Chinese disinformation group targeting Americans on social media. The name comes from the seemingly random posts with social issues and government misinformation sprinkled in.

In one instance, a user posing as "Harlan" changed his age and location multiple times while posing as an American. The account was pro-Donald Trump and while most of the postings didn't gain much traction, some videos posted to TikTok had hundreds of thousands or even more than one million views.

Tech experts say chaos is the goal.

“A lot of the reporting around China’s efforts to influence U.S. elections, isn’t to favor one candidate over another, but to engender conflict in the United States between the two parties, deepen the partisan divide, and decrease faith in the U.S. election system," said Chamber of Progress spokesman Chris MacKenzie. The group represents a coalition of tech businesses.

The Chinese-backed online troll farm doesn't just target one political side or issue. Graphika found instances of accounts targeting Trump and, more recently, Vice President Kamala Harris. Artificial intelligence could also be playing a role in generating content. The report concludes China’s efforts will only ramp up, and get more sophisticated.

I think there’s also a responsibility for users to make sure the content they’re sharing, they’re reading, is authentic, isn’t misinformation," said MacKenzie.

The report about potential Chinese meddling comes as Congress is getting set to focus and vote on several bills this month related to China, with many of them looking to try and curb its global influence.