Join Justin Putney for an in-depth discussion in this video Structuring the HTML, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
So, let's create the HTML file that will house the content for the presentation.…I'm going to use Dreamweaver, but you can use the code editor of your choice.…So, in Dreamweaver instead of choosing from the Create New menu in the welcome…screen make sure to go up to File and choose New.…The reason for this is that the default doc type is not HTML5.…So make sure to choose that from the list. And click Create.…I'm going to change the name to presentation, but of course for your…presentation, you can change the title to whatever you want.…
So let's change the name in the title tag here to presentation, and then inside the…body tag, we'll add the container for all of the slides.…So I'm going to start by opening a div tag here and giving it a class name of slides.…And then one advantage of using Dreamweaver here is that when I start…typing the closing slide it completes the code for me.…For each of the slides, we're going to take advantage of a new HTML tag called…the section tag. The advantage of using the section tag as…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout