html for presentation

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.

DEV Community

Posted on Jan 11, 2019

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

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

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

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

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

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

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

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

Built-In Themes

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

Changing The Theme

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

The theme files are:

• solarized.css

Custom Themes

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

Here is what my custom slides look like:

Creating A Custom Theme

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

Here are the variables I chose to use:

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

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

Mixins & Settings

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

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

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

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

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

The structure for adding new content is:

.reveal > .slides > section

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

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

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

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

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

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

The types of fragments can be:

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

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

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

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

Top comments (18)

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

• Joined Oct 2, 2018

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

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

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

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

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

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

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

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

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

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

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

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

Yup, RevealJS is awesome !

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

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

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

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

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

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

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

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

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

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

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

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

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

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

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

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

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

• Email [email protected]
• Joined Apr 16, 2018

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

SBCompSciClub / prez-software

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

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

Run on Dev Server

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

Making a Presentation

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

Making a Slide

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

Adding Text

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

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

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

Fantastic post. I just loved it.

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

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

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

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

Hide child comments as well

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

I made FactoryJS - a TypeScript version of factory_bot

ktmouk - May 8

Getting Started With TypeScript

Arindam Majumder - May 8

Learn Tauri by Doing - Part 2: First method and APIs call

Giuliano1993 - May 8

Custom Fonts In React Native: Pro Tip!

Mitchell Mutandah - May 7

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

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 .

WebSlides Demos

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

Share your slides using #WebSlides .

Why WebSlides?

General Questions

WebSlides Documentation: Components · Classes · Media .

Why WebSlides? Good karma

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

Is WebSlides a framework?

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

What can you do with WebSlides?

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

How easy is WebSlides?

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

Loved by designers and developers.

Some of the most famous brands are using WebSlides.

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

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

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

Start in seconds

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

Free Download Pay what you want.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

html-presentation

Here are 17 public repositories matching this topic..., ksky521 / nodeppt.

This is probably the best web presentation tool so far!

• Updated Jan 25, 2021

webslides / WebSlides

Create HTML presentations in seconds —

• Updated Dec 10, 2022

apreshill / ohsu-biodatavis

"Take a Sad Plot & Make It Better" Talk @ OHSU's BioData Club

• Updated May 13, 2019

ysugimoto / resumify

Capture screenshot and make PDF on your HTML presentation.

• Updated Dec 23, 2018

mkearney / xaringan_slides

📺 Links to HTML5 presentations made using the R package {xaringan}.

• Updated May 13, 2018

apreshill / blogdown-workshop

Slides and materials for the 2017-09-14 PDX R User Group workshop

ratopi / HTML-presentation-tools

An overview to current HTML presentation tools

• Updated Dec 1, 2017

d28b / html-slides

HTML Presentation Slides

• Updated Apr 30, 2024

ishandeveloper / PPT-In-Browser

Presentations that come alive right in your browser. Make HTML presentations, landings, and longforms in a beautiful way.

• Updated Apr 8, 2020

faridfr / what_is_ssl

A presentation with impress.js

• Updated Sep 16, 2018

ibbatta / yarn-presentation

📚 Html presentation to show Yarn package manager pro and cons

• Updated Nov 2, 2016

Amarok24 / EB-template

SinglePage XHTML Template with extras

• Updated Sep 15, 2020

zglu / ipres

IPRES: a simple html wrapper / presentation editor based on HTML and jQuery. The main purpose of this tool is to create HTML presentation with interactive charts (JS-based, e.g., Highcharts, Chartjs, D3js).

• Updated Nov 25, 2018

FerryT / tue-reveal.js

An unofficial TU/e theme for the reveal.js presentation framework

• Updated Nov 17, 2018

ryanzhang / ryanzhang.github.io

• Updated Apr 19, 2023

edurbrito / revdown-cli

The markdown-to-reveal.js presentation cli "transpiler"

• Updated Feb 3, 2021

Vopaaz / EY-DS-Competition-Slides

Presentation Slides for EY Nextwave Data Science Challenge

• Updated May 25, 2022

Improve this page

Add a description, image, and links to the html-presentation topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the html-presentation topic, visit your repo's landing page and select "manage topics."

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Presentation API

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers .

Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production.

The Presentation API lets a user agent (such as a Web browser) effectively display web content through large presentation devices such as projectors and network-connected televisions. Supported types of multimedia devices include both displays which are wired using HDMI, DVI, or the like, or wireless, using DLNA , Chromecast , AirPlay , or Miracast .

In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate the presentation session. With Presentation Receiver API, the presenting web content obtains the session status. With providing both the controller page and the receiver one with a messaged-based channel, a Web developer can implement the interaction between these two pages.

Depending on the connection mechanism provided by the presentation device, any controller- and receiver page can be rendered by the same user agent, or by separated user agents.

• For 1-UA mode devices, both pages are loaded by the same user agent. However, rendering result of the receiver page will be sent to the presentation device via supported remote rendering protocol.
• For 2-UAs mode device, the receiver page is loaded directly on the presentation device. Controlling user agent communicates with presentation device via supported presentation control protocol, to control the presentation session and to transmit the message between two pages.

In controlling browsing context, the Presentation interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, Presentation interface provides the access to the available presentation connections.

Initiates or reconnects to a presentation made by a controlling browsing context.

A PresentationAvailability object is associated with available presentation displays and represents the presentation display availability for a presentation request.

The PresentationConnectionAvailableEvent is fired on a PresentationRequest when a connection associated with the object is created.

Each presentation connection is represented by a PresentationConnection object.

A PresentationConnectionCloseEvent is fired when a presentation connection enters a closed state.

The PresentationReceiver allows a receiving browsing context to access the controlling browsing contexts and communicate with them.

PresentationConnectionList represents the collection of non-terminated presentation connections. It is also a monitor for the event of new available presentation connection.

Example codes below highlight the usage of main features of the Presentation API: controller.html implements the controller and presentation.html implements the presentation. Both pages are served from the domain https://example.org ( https://example.org/controller.html and https://example.org/presentation.html ). These examples assume that the controlling page is managing one presentation at a time. Please refer to the comments in the code examples for further details.

Monitor availability of presentation displays

In controller.html :

Starting a new presentation

Reconnect to a presentation.

In the controller.html file:

Presentation initiation by the controlling UA

Setting presentation.defaultRequest allows the page to specify the PresentationRequest to use when the controlling UA initiates a presentation.

Monitor connection's state and exchange data

Monitor available connection(s) and say hello.

In presentation.html :

Passing locale information with a message

In the presentation.html file:

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Presentation API polyfill contains a JavaScript polyfill of the Presentation API specification under standardization within the Second Screen Working Group at W3C. The polyfill is mostly intended for exploring how the Presentation API may be implemented on top of different presentation mechanisms.

Learn HTML Basics for Beginners in Just 15 Minutes

If you want to build a website, the first language that you need to learn is HTML.

In this article, we are going to go through the basics of HTML. At the end, we are going to build a basic website using only HTML.

Here's a video you can watch if you want to supplement this article:

What Is HTML?

HTML, which stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.

Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name.

Everything inside the opening and closing tags is the content.

But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the page.

In the example above, the <img> element only consists of one tag that does not have any content. This element is used to insert an image file from Unsplash in the document.

How to Nest HTML Elements

Elements can be placed inside other elements. This is called Nesting. In the example above, inside the <div> element we have an <h4> element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are 3 <li> or list item elements.

Basic nesting is quite straight-forward to understand. But when the page gets larger, nesting can become complicated.

Therefore, before working with HTML, think about the layout structure you would like to have. You can draw it out on a piece of paper or in your mind. It will help a lot.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

In the example above, the <img> element has 2 attributes: src or source to specify the path of the image, and width to specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

• There is a space between attributes and the element name
• Attributes are added in the opening tag
• Elements can have many attributes
• Attributes usually have a name and a value: name=“value”

But not every attribute has the same pattern. Some can exist without values, and we call them Boolean Attributes.

In this example, if we want to disable the button, all we have to do is pass a disabled attribute without any values. This means that the presence of the attribute represents the true value, otherwise, the absence represents the false value.

Common HTML elements

There are in total more than 100 elements. But 90% of the time you will only use around 20 of the most common. I have put them into 5 groups:

Section elements

These elements are used to organize the content into different sections. They are usually self-explanatory, for example, <header> usually represents a group of the introduction and navigation section, <nav> represents the section that contains navigation links, and so on.

Text content

These elements are used to organize content or text blocks. They are important to accessibility and SEO. They tell the browser the purpose or structure of the content.

These elements can be used together to create forms that users can fill out and submit. Forms might be the trickiest part of HTML.

Images and Links

These elements are used to insert an image or create a hyperlink.

These elements are used to add a break to the webpage.

You can find all the elements on developer.mozilla.org . But for beginners, you just need to know the most common ones.

Block-level vs inline HTML elements

By default, an element can be either block-level or an inline element.

Block-level elements are the elements that always start on a new line and take up the full width available.

Inline elements are the elements that do not start on a new line and it only take up as much width as necessary.

Two elements that represent block-level and inline elements, respectively, are <div> and <span> . In this example, you can see that the <div> elements takes 3 lines, whereas the <span> element only takes up 1 line.

But the question is: how do we know which ones are block-level elements and which ones are inline elements? Well, unfortunately you need to remember them. The easiest way is to remember which are inline elements – and the rest are block elements.

If we look back at the most common HTML elements, inline elements include: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br> .

How to comment in HTML

The purpose of comments is to include notes in the code to explain your logic or simply to organize your code.

HTML comments are wrapped in the special markers: <!-- and --> and they are ignored in the browser.

How to use HTML entities

What if you want to show the text: the <p> tag defines a paragraph. , but the browser interprets <p> as an opening tag for a new element? In this case, we can use HTML entities like in the following example:

How to use emoji in HTML

In the modern web, we can display emoji in HTML pretty easily, like this: 👻

Common beginner mistakes in HTML

1. tags/element names.

Tags/Element names are cAse-inSensitive. This means that they can be written in lowercase or uppercase, but it is recommended that you write everything in lowercase: <button> not <ButTon> .

2. Closing tag

Failing to include a closing tag is a common beginner error. Therefore, whenever you create an opening tag, immediately put in a closing tag.

This is wrong:

The tags have to open and close in a way that they are inside or outside one another.

4. Single quotes and Double quotes

You cannot mix single quotes and double-quotes. You should always use double quotes and use HTML entities if needed.

How to build a simple website with HTML

Individual HTML elements are not enough to create a website. So let's see what more we need to build a simple website from scratch.

How to create an HTML document

First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html.

In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:

This is the minimal code that an HTML document should have to make up a website. And here we have:

• <!DOCTYPE html> : First we have Doctype. For some weird historical reason in HTML we have to include the doctype for everything to work correctly.
• <html lang="en"></html> : The <html> element wraps all the content on the page, also known as the root element. And we should always include the lang attribute to declare the language of the page.
• <head></head> : The <head> element is a container for everything you want to include, but not content that you show to your users.
• <meta charset="UTF-8" /> : The first meta element is used to set the character set to be UTF-8, which includes most characters from written languages.
• <meta name="viewport" content="width=device-width, initial-scale=1.0" /> : The second meta element specifies the browser viewport. This setting is for a mobile-optimized site.
• <title>Document</title> : This is the <title> element. It sets the title of the page.
• <body></body> : The <body> element contains all the content on the page.

How to build a pancake recipe page

Alright, now that we have the starter code, let's build a pancake recipe page. We are going to use the content from this AllRecipes Page .

First, let's give the <title> element content of the pancakes recipe. You will see the text on the web page tab change. In the <body> element, let's create 3 elements: <header> , <main> and <footer> representing 3 sections.

1. Build the header section

In the header, we want to have the logo and the navigation. Therefore, let's create a div with the content ALL RECIPE for the logo.

For the navigation, let's use the <nav> element. Within the <nav> element, we can use <ul> to create an unordered list. We want to have 3 <li> elements for 3 links: Ingredients, Steps, and Subscribe. The header code looks like this:

2. Build the Main Section

In the main section, first, we want to have a title and an image. We can use h1 for the title and <img> for the image (we can use an image from Unsplash for free):

Next, we want to list all the ingredients. We can use <ol> to create an ordered list and <input type="checkbox" /> to create a checkbox.

But before that, we can use <h2> to start a new content block. We also want to add the id attribute for <h2> so that the link in the navigation knows where to go:

After the ingredients, we want to list all the steps. We can use <h4> for the step heading and <p> for the step content:

Alright, now that we are done with the main section, let's move on to the footer section.

3. Build the Footer Section

In the footer, we want to have a subscribe form and copyright text.

For the subscribe form, we can use the <form> element. Inside it, we can have an <input type="text"> for text input and a <button> for the submit button.

For the copyright text, we can simply use a <div> . Notice here, we can use the HTML entity $copy; for the copyright symbol.

We can add <br> to add some space between the subscribe form and the copyright text:

Alright now we are done! Here is the full code for reference:

You can build a simple website with just HTML. But to be able to build beautiful and functional websites, you need to study CSS and JavaScript.

You can follow me on social media or Youtube for future updates on these topics. But meanwhile, you can check out the freeCodeCamp Curriculum to practice HTML by solving small tasks.

Otherwise, stay happy coding and see you in future posts 👋. __________ 🐣 About me __________

• I am the founder of DevChallenges
• Subscribe to my Channel
• Follow my Twitter
• Join Discord

Creator of devchallenges.io

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

"Sunil, Sorry Varun": Murali Kartik's Epic Gaffe In Presentation Ceremony

Kolkata knight riders spinner varun chakravarthy was named the player of the match for his figures of 2 for 17 against mumbai indians..

Murali Karthik - Sunil Narine is the Player Of The Match, Sunil how are you feeling? Oh sorry, Varun. pic.twitter.com/XpfmhvnpM0 — Mufaddal Vohra (@mufaddal_vohra) May 11, 2024

Junior Forum presents 26 debutantes

Wichita Falls is a community of longstanding traditions and continued to uphold this on May 4 with the 96th annual Junior Forum Debutante Presentation.

The Kemp at the Forum abounded with the pageantry and elegance of the tradition dating back over nine decades.

The Junior Forum was founded in 1927 as a junior department of the Woman’s Forum, according to a media release. The debutante class was established to promote community involvement and social grace. The first presentation was staged in the spring of 1928.

The 26 charming young ladies presented May 4 were:

Isabella Evelyn Amador , daughter of Mr. and Mrs. Damian Anthony Amador. She will graduate from Wichita Falls High School and plans to attend Midwestern State University.

Katherine Irene Booker , daughter of Mr. and Mrs. Steven Ross Booker. She will graduate from Burkburnett High School and plans to attend Embry Riddle Aeronautical University.

Ava Grace Bronaugh , daughter of Mr. and Mrs. Barry James Bronaugh. She will graduate from Rider High School and plans to attend Midwestern State University. Her date for the evening was Jonah Matthew Fields.

Cianna Suzann Clampitt , daughter of Mr. and Mrs. Monte Lee Clampitt. She will graduate from Burkburnett High School and plans to attend the University of Arkansas. Her date for the evening was Kaison Allan Yow.

Sophia Elizabeth Curry , daughter of Mr. and Mrs. Perry Theodore Curry. She will graduate from Rider High School and plans to attend Texas Tech University. Her date for the evening was Beau Robert Gearld.

Mia Claire Gilmore , daughter of Mr. and Mrs. Gregory James Gilmore. She will graduate from Rider High School and plans to attend Baylor University.

Aidan Elizabeth Herrera , daughter of Mr. and Mrs. Juan Manuel Herrera. She will graduate from Wichita Falls High School and plans to attend Baylor University.

Avery Grace Herrera , daughter of Mr. and Mrs. Juan Manuel Herrera. She will graduate from Wichita Falls High School and plans to attend Oral Roberts University.

Kelby Kaydee Jones , daughter of Mr. and Mrs. Eric Lee Jones. She will graduate from Holliday High School and plans to attend Tarleton State University.

Emerson Claire Kosub , daughter of Mr. and Mrs. Frank Dobie Kosub. She will graduate from Rider High School and plans to attend Baylor University.

Kelsey Grace Kowing , daughter of Mr. and Mrs. Charles Kristian Kowing. She will graduate from Burkburnett High School and plans to attend Baylor University.

Malayasia Siriana Larque , daughter of Mr. and Mrs. Adam Delwayne Larque. She will graduate from Wichita Falls High School and plans to attend Bethel College.

Carson Grace Lipscomb , daughter of Mr. and Mrs. Richard Lee Lipscomb II. She will graduate from Wichita Falls High School and plans to attend the University of Oklahoma. Her date for the evening was Cayden Glen Woodard.

Lauren Carmella Lozipone , daughter of Mrs. Melaina Virdian Armstrong and Mr. Carmen Anthony Lozipone. She will graduate from Rider High School and plans to attend the University of Arkansas.

Presley Brooks Montz , daughter of Mr. and Mrs. Jakob Wade Montz. She will graduate from Rider High School and plans to attend Oklahoma State University.

Sydney Chae Seon Mulhare , daughter of retired Lt. Col. and Mrs. Anthony Blaine Mulhare. She will graduate from Burkburnett High School and plans to attend Texas A&M.

Presley Lynn Murray , daughter of Mr. and Mrs. Jay Brent Murray. She will graduate from Rider High School and plans to attend Vernon College.

Mari-Lee Grace Osborn , daughter of retired Master Sgt. and Mrs. Donald Dean Osborn. She will graduate from Burkburnett High School and plans to attend Tarleton State University.

Aryana Shirin Khosravi Parvari , daughter of Drs. Mohammad Khosravi Parvari and Amanda Marie Parvari. She will graduate from Wichita Falls High School and plans to attend San Diego State University.

Annabella-Marie Alexandra Pillow , daughter of Mr. and Mrs. Kevin Lee Pillow. She will graduate from Rider High School and plans to attend Midwestern State University.

Jazz Katon Rusk , daughter of Mr. and Mrs. Justin Keith Rusk. She will graduate from Iowa Park High School and plans to attend Texas Tech University. Her date for the evening was Landon Brockriede.

Jocelyn Ann Turner , daughter of Mr. and Mrs. Michael Scott Turner. She will graduate from Henrietta High School and plans to attend Abilene Christian University.

Aubrie Kate Wolfe , daughter of Mr. and Mrs. Robert Casey Wolfe. She will graduate from Holliday High School and plans to attend Texas Tech University.

Reese Olivia Wood , daughter of Mr. and Mrs. Steven William Wood. She will graduate from Rider High School and plans to attend Vernon College. Her date for the evening was Tanner Scott Poirot.

Eva Angeline Yandell , daughter of Mr. and Mrs. Travis Preston Yandell. She will graduate from Rider High School and plans to attend Texas Tech University. Her date for the evening was Kole Michael Skipper.

Reagan Mackenzie Young , daughter of Mrs. Holly Norwood Montes and Mr. Travis Wayne Young. She will graduate from Rider High School and plans to attend Texas Woman's University. Her date for the evening was Anthony Basilio.

Jaguars stadium renovation deal will be announced Tuesday, City Council president says

The Jaguars and Mayor Donna Deegan have reached a deal for renovations of the stadium , City Council President Ron Salem announced Wednesday.

"The mayor reached out to me late yesterday afternoon to inform me that the executive branch and the Jaguars have reached an agreement on the stadium renovation," Salem said at the beginning of a joint meeting with the Duval County School Board Wednesday morning.

The mayor’s office and consultants have led the city’s negotiations since August and will present the proposed agreement to council at the next regular meeting on Tuesday.

“We have reached an agreement on the framework of a deal," Deegan said in a statement Wednesday. "The negotiating team is currently putting the final details on paper, and we will release that information as soon as it is available.”

Nate Monroe: Jaguars stadium deal will be a challenge for Mayor Deegan unlike any other

Gene Frenette: Jaguars, city appear on a good track to close out deal on renovated NFL stadium

Salem did not comment on what share the city could carry of the potential $1.4 billion renovation. 

"I do not know the specifics of this particular deal but look forward to engaging the council during the month of June as we move forward to review it," Salem said.

City Council will have to approve the deal over the next few months. The Jaguars, according to previous Times-Union reporting , hope to have a deal finalized by early summer in order to take it to the NFL owners meeting in October. 

The city will host a series of public meetings to discuss the deal, much like the Jaguars “huddles” last year.  

Deals in other cities: Stadium deals in Buffalo and Nashville show how Jacksonville agreement could be shaped

The current lease for the Jaguars to use city-owned EverBank Stadium goes through the 2029 season. A major piece of the stadium renovation involves negotiations for a new 30-year lease.

The talks also have involved whether the Jaguars would play home games away from Jacksonville during the 2026 and 2027 seasons or just the 2027 season because of the extensive construction.

Deegan has said a key area for her is what the “community benefit” portion of the agreement would be for the Jaguars to support neighborhood improvement programs, such as in the Eastside neighborhood that is located near the sports complex.

Sheboygan South High students to honor Hmong veterans, culture with community presentation

Hmong student organization leaders hope people who attend will learn about hmong veterans' contributions to us military and more about the culture..

SHEBOYGAN — The Hmong Student Organization at South High will host its first event to honor Hmong veterans and celebrate Hmong culture and history next week.  

The Hmong Veterans Day Presentation will be held on Hmong-Lao Veterans Day May 14, which Gov. Tony Evers designated in 2021 as a way to honor and recognize the Hmong veterans who contributed to the U.S. military efforts in the Secret War. The CIA recruited Hmong people in neighboring Laos to fight Communist forces during the Vietnam War.  

The presentation will not only honor Hmong veterans but explore other effects of the Secret War, like the impact on Hmong civilians who were displaced and separated from their families as they fled. Some estimates put the number of Hmong people who came to the U.S. from this conflict at the tens to hundreds of thousands.  

This will be the larger context of a play HSO wrote for the presentation, following two families as they flee to the U.S. and adjust to living in a new place.  

Though the play is fictional, HSO co-president and South senior Kelsie Vang said this is a story experienced by many Hmong families.  

Vang said Hmong families may wonder “what could’ve been" if they stayed with their families in Laos. “But they were separated and moved to America. It's such a true story," she said.

Autumn Lee, HSO co-president and South senior, said the play could give the older Hmong generation more visibility, too, by sharing a story that could resemble their own.  

Amanda Xiong, HSO public relations chairperson and South senior, said she wants students at South High to understand what Hmong people experienced during the Secret War.  

“That's not hugely covered in the social studies class,” Xiong said. “From this, I just want them to learn about Hmong culture and how Hmong people came to America, because even though there's a huge Hmong student (population) here, a lot of people still don't really know how they came to the United States and what they contributed to the war.” 

Sheboygan County has the fourth largest population of Hmong people in the state. Hmong people also account for more than 70% of the Asian American population in Sheboygan.  

“I really hope that the South High community and the community as a whole learns about Hmong culture because it is a fascinating culture,” HSO adviser and South special education teacher Randall McAdoo said. “I hope that we are able to continue this tradition.” 

New business opens in El Camino space: New bar and banquet hall takes El Camino's spot on Michigan Avenue in Sheboygan. Here's what to know.

The presentation will feature a Hmong veteran guest speaker, play about the Secret War and more.

Images of Hmong people will be displayed as attendees arrive to the event, some depicting stages of them fleeing to the U.S.

The hour-long presentation will open with an introduction from McAdoo. The presentation guest speaker, Hmong Veteran Shua Yang, who was a First Sargeant in the U.S. Army’s military intelligence division, will follow.

After that, there will be an interactive Hmong language learning portion, a play called “Meet Me Under the Mango Tree” and a dance from the HSO Dance Team.  

Contact HSO adviser to reserve a seat for the Hmong Veteran Presentation.

The Hmong Veterans Day Presentation will be at in the auditorium at South High School, 1240 Washington Ave., from 10:45 a.m. to 11:45 a.m. It is open to the public and the South High community. A limited number of seats are available. Contact Randall McAdoo at [email protected] to reserve a seat.

Have a story tip? Contact Alex Garner at 224-374-2332 or [email protected] . Follow her on X (formerly Twitter) at @alexx_garner .

• Share full article

Advertisement

Supported by

‘Presentation is Everything’: Inside the World of Art Fair Booth Design

For gallery directors, including those at TEFAF New York, no detail is too trivial, and every millimeter matters.

By Liz Robbins

Before 89 international art dealers showcase their exquisite wares inside a building that was once the playground for New York’s rich and famous, they get the chance to be children again.

Their grown-up game? Designing strikingly unique booths out of tight uniform spaces for TEFAF New York, the European Fine Art Foundation fair at the Park Avenue Armory .

Some dealers still play with foam core models that resemble dollhouses. Others — those blessed with warehouse space — can create life-size replicas before shipping the pieces. Most in this digital age, however, tinker collaboratively inside 3-D digital structures as if they are playing video games.

Welcome to the passionately precise world of art fair design, where for gallery directors, no detail is too trivial, and every millimeter matters.

“Designing booths is one of my favorite things to do,” Evan Snyderman, a co-founder of R & Company gallery in New York, said gleefully. “It’s always been something I’ve done and to the point of almost driving my wife crazy because I’m constantly rearranging the house, moving things like one inch to the left.”

The son of Philadelphia gallery owners, Snyderman said he was already arranging his Matchbox cars in diagonal rows at 8 years old. He also placed his hand puppets on wall-mounted boxes and ordered his collection of daggers and pocketknives just so.

Now, he and his partners do it for a living.

“Like we learn in art school, presentation is everything,” said R & Company’s co-founder Zesty Meyers.

If nothing else, dealers take on TEFAF New York booths as a personal challenge.

“Honestly,” said the eponymous owner of Sean Kelly Gallery , “we all do more than enough art fairs and so one of the things that we’re always looking for is a way to kind of amuse ourselves and keep it fresh.”

About three months before the May fair, TEFAF officials email dealers booth and room assignments, and a menu of design options. Galleries choose the fabric color to cover the walls of the booths that sit under the cavernous ceiling. They also choose types of flooring, paint, electrical outlets, track lighting and temporary office furniture like storage cabinets.

The booths in the armory’s drill hall range in size from 20 square meters to 49 square meters (about 215 square feet to 527 square feet; TEFAF only provides metric measurements to its dealers). The period rooms, including three downstairs and 12 upstairs, range from about 355 to 656 square feet.

Galleries are strictly forbidden to do anything to alter these rooms that were once clubhouses for the companies belonging to the Seventh Regiment of the Armory on Park Avenue.

R & Company, which showcases historical and contemporary design, had always been tucked into the same back left corner of the drill hall until this year, when it moved upstairs. At first, Snyderman wanted to lighten the dark mahogany room equipped with 19th-century swords, shields and iron chandeliers.

Plans to hang a Katie Stout chandelier were rejected because it weighed more than 100 pounds. Although Snyderman decided to keep the interior of the room visible, he built a free-standing trellis for track lighting.

Snyderman worked twice a week together with his architect in computer sessions, starting with an anchor piece at the back of the room: a rare nearly seven-foot-tall Wendell Castle stack-laminated oak cabinet.

To draw viewers’ eyes to it, the pair created a 12-foot wall that partly blocked the windows behind it and would serve as a stage. They chose to paint it “quetzal,” a rich aqua color that serves as a uniting element for the room’s other pedestals. In their model, they incorporated Castle’s models for the sculpture, which will also be on display.

“That’s a big part of the design for us, the storytelling,” Snyderman said. He and his team went through at least six iterations of design layouts to place the other pieces in visual harmony, including a tomato red Lina Bo Bardi “Bowl Chair,” vessels by Roberto Lugo , and an Isamu Noguchi table, stool and lamp.

Kasmin Gallery , also in an upstairs period room, chose for its anchor piece Alma Allen ’s 190-pound bronze moth. That needed to be reinforced onto one of the temporary walls — painted dark gray — that the dealers built inside the existing walls.

During a visit in April to the gallery in Chelsea, a smaller version of the moth was already affixed diagonally to the foam core walls of the scale model, 31 inches by 16.5 inches by 14 inches. Edith Dicconson, a co-executive director of the gallery, delighted in trying different arrangements for a Robert Motherwell painting (reduced in scale to the size of a postage stamp) and a 3-D Max Ernst sculpture.

“We come in here and all of our heads can look in like this and collaborate,” she said, adding with a kidlike cackle, “Isn’t it fun?”

Kasmin’s goal is to create an elegant but accessible space, where the works of artists who were friends and collectors of each other’s work — like William N. Copley and Les Lalanne — can be in dialogue.

What might they be whispering?

“I think they would have conversations about the style in which they would work,” said Mariska Nietzman, a Kasmin co-executive director. “But I think they also would perhaps just have cups of coffee and glasses of wine.”

Boris Vervoordt of Axel Vervoordt gallery was much more serious in discussing his digitally rendered booth, which allowed his staff across multiple time zones to try different combinations during video calls.

His gallery has occupied the same upstairs period room at the fair for about four years, in part because TEFAF respects his zero-waste policy. Recycling the same structure makes it easier to substitute new works of art, like a rarely shown 1993 painting by Kazuo Shiraga in this year’s booth.

Instead of the same space, Andrew Duncanson of Modernity gallery in Stockholm, which specializes in 20th-century Nordic furniture, lighting and jewelry, chose to move from last year’s upstairs quiet period room to the crowded drill hall.

This year, he built a mock-up of the booth in his warehouse, featuring a Carl Malmsten daybed and a showstopper of a chandelier, “ Snowflake ” by Paavo Tynell.

“We want to create an ambience in the room where it feels like you can move right in,” he said.

Duncanson created that atmosphere so well last year that TEFAF New York’s director, Leanne Jagtiani, said she warned him, “ Don’t be surprised if you come in one morning and I’m here because I stayed overnight.”

Duncanson said that last year, TEFAF committee members told him his room design earned him an A+, even though Jagtiani said the design commendations were given in verbal rather than report card form.

For dealers, the sales ledgers are what ultimately matter.

This year, Sean Kelly will also set up in the drill hall, moving into a larger, back corner spot. It came, however, with a caveat: an immovable diagonal support wall. So Kelly and his crew made it into a room divider for three distinct views and a funnel for foot traffic.

At one entrance, a cast iron statue by Antony Gormley welcomes visitors. The anchor pieces will be any one of three large-scale works by the German photographer Candida Höfer and two paintings by the British artist Idris Khan .

A month before TEFAF, Terrill Warrenburg, art fair and special project manager at Sean Kelly Gallery, was still swapping options on the computer to see how their shapes, colors and themes interacted with one another. They also had to account for the possibility that a work could sell right before TEFAF opens, taking it off the roster.

“It is a bit like four-dimensional chess because you have all these options and you build around them and they have to play nicely together — and you keep going until you feel like you got something that clicks,” Kelly said.

He laughed, adding, “And then, inevitably, you get there and then you change it all around.”

Art and Museums in New York City

A guide to the shows, exhibitions and artists shaping the city’s cultural landscape..

At the Metropolitan Museum of Art’s Costume Institute, the immersive “Sleeping Beauties: Reawakening Fashion” exhibition features fragile dresses inside airtight vitrines, overcoats growing grass and pat-’n-sniff walls. But does it work ?

The Kosovar artist Petrit Halilaj  began drawing as a child in the Balkans during a violent decade. His world of childhood innocence and adult experience comes to the roof of the Met .

As his bullet-riddled panels go up at Gagosian, Maurizio Cattelan, in a rare in-person interview, tells why he turned his sardonic gaze on a violence-filled world .

In his biggest exhibit since a 2013 retrospective at the Guggenheim, Christopher Wool has created his own show in an uninhabited office in Manhattan’s Financial District .

Looking for more art in the city? Here are the gallery shows not to miss in May .