Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, I've prepared a snippet of a bunch of placeholder text that we can place into some of these other containers. So from your text editor, choose File > Open. Locate your exercise files. Let's go into folder 4 called Snippets, and let's open Placeholder-Text.html. Now, inside this file I have groups of placeholder text. So up here, on line five, we have the article settings. So let's come in here and select from the beginning h1 tag all way out to the ending paragraph tag. Let's copy this to the clipboard.
Let's switch back to index.html, and inside of the article element, let's split that open. Let's paste our content in here. I'm also going to format this a little bit so we can see the structure. So inside of article we have an h1 and a paragraph tag. Let's switch back to our placeholder text. Let's come down here under Promo 1. Let's copy the content div and everything inside of there. Copy that to the clipboard. Switch back to index.html. I am going to scroll up here and find the first promo div.
Split that open. Let's paste our content inside of there. I am going to format that a little bit. Let's come back to our placeholder text. Let's copy all of the content for Promo 2. Copy that to the clipboard. Let's find the second promo container. Let's paste all of our content in here. I'll format that. Back to our placeholder text. Let's copy all of the content for Promo 3.
Copy to the clipboard. Back to index. Let's find the third promo element, split that open, and paste our content inside up there. So now we have a placeholder text inside of the article element and we have placeholder text inside of each one of the promo elements. At this point, save your file. Let's come back out out to the operating system and let's open our index.html file up in a web browser. So, in the web browser we'll see all of the HTML content showing up here. So this is a very well- structured HTML document. We don't have any CSS in place, so we're not seeing any design aspect, but we have all of our document structure in place.
Now, in the next chapter we're going to work inside of Photoshop, creating our web graphics, customizing some of our slices, and saving those graphics out. If you want to skip the Photoshop session, you can go right from here over to chapter four and continue with the HTML and CSS portion of this course.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42336 Viewers
119 Video lessons · 53821 Viewers
65 Video lessons · 14171 Viewers
113 Video lessons · 82760 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.