Introduction and HTML

[Master Class Fluid Grids] [HTML Markup] 0:00 In the previous master class about responsive web design, we learned how to create 0:06 low fidelity and high fidelity markups when planning for responsive layouts. 0:11 Now, we're going to start building our project using just html and css 0:15 and when we're writing our style sheet we'll do all of our fluid grid calculations. 0:20 Before we get started, we should take a look at the directory structure 0:26 that we're starting off with. 0:30 This is our web root, and we have a folder called "images" that I've created, 0:32 and we have a folder called "videos" that I've also created. 0:38 First, we'll jump into the images folder, and the first image we have here 0:43 is called "app.screenshot.jpeg", and this is simply a screenshot of our application 0:48 which we'll be using for the poster image in our HTML5 video tag, and we'll also be using it 0:56 as a fall back should a browser not support HTML5 video. 1:03 So we'll go back and the next image is geonotation.png, and that's the image that 1:08 we created in Photoshop which is the logo for our application. 1:16 We have noise.png which in the browser here you can't really see, but we'll be overlaying 1:22 this image on top of the gradient on our call to action button. 1:29 Next we have phone.png. 1:34 This is quite a large image, and this will be the container for our HTML5 video. 1:38 Next we have phonestatic.jpg, and this is yet another fall back image 1:46 should a browser not support HTML5 video. 1:53 We'll get more into that later. 1:58 We'll go back here and we're going to jump inside the icons folder, which is inside of our 2:00 images folder, and here we have 4 images that we've picked up from the Crystal Project 2:06 for KDE, and we have our lightning bolt. 2:12 We have a globe. 2:16 There is a heart. 2:19 And we have a notepad. 2:22 So we'll go back here. 2:24 We'll go back into the images folder, and then we'll go back all the way up to the web root 2:26 and then we're going to jump into the videos folder here, 2:33 and here we have 4 different videos. 2:37 The first one is just the original screen cast that I took of the HTML5 mobile application 2:41 that we're advertising in this project, and I've re-encoded this video into 3 different formats. 2:48 We have mp4, ogv, and a newer format called webm. 2:55 Currently, there isn't a single codec that is supported across all browsers, 3:01 we do need to encode our HTML5 videos into multiple codecs. 3:06 So go ahead and click on app_demo.mp4 and this is basically what the video looks like. 3:12 It's just a screen cast of an iphone and it doesn't necessarily have to be an iphone. 3:20 This could be representative of really any phone since we're advertising 3:26 a web application. 3:30 So we'll go ahead and go back here, 3:33 and now we're ready to go ahead and jump into our text editor. 3:35 So again, we have the same directory structure here. 3:39 We have our images folder, and we have our videos folder, and 3:43 now we're going to go ahead and create our first file. 3:51 So first we're going to type out our HTML5 doc type, 3:58 which looks like this, DOCTYPE in all caps. 4:02 Then we'll type out our HTML tag. 4:07 The language will be English, 4:11 and we'll go ahead and close that. 4:14 We'll open up the head tag 4:19 and close it 4:22 and we'll open up the body tag 4:24 and close that. 4:27 So let's start out with our head tag. 4:29 First, we'll go ahead and set the character set to utf-8, 4:32 and then we're going to put a title tag on this 4:43 and the project we're advertising is called "GeoNotation" so we'll put that 4:48 for our title, and for now that'll wrap it up for our head tag, but we'll be revisiting this later. 4:55 So let's go ahead and move onto our body tag, and the first thing we're going to do is we're 5:02 going to create a div with the id "wrapper", 5:07 and this will contain pretty much everything that's going to be on our site. 5:11 Next, we need another div called "main_content." 5:17 We'll go ahead and close that. 5:24 Moving further in, we're going to create a div with the id "header" 5:30 and close that and then inside of our header, we're going to create another nested div 5:36 with the id "logo." 5:43 Inside of our logo div, we're going to create a first level headline, 5:50 and this will be where our logo will go for our site, and inside of the first level headline we'll 5:58 put the name "GeoNotation." 6:06 We need to put the actual image that is our logo, which again is in the images folder, 6:10 and we named it "geonotation.png" 6:19 and we should put some alternate text on here, and we'll just say "Logo for the Geonotation 6:25 application" and then after our image we'll create a second level headline, 6:34 and this will be our tagline just below our GeoNotation logo, and it will say 6:42 "Take notes anywhere." 6:48 Go ahead and save this out and we'll scroll down a little bit here, 6:52 and just outside of our logo we'll go ahead and open up a paragraph, 6:58 and inside of our paragraph, we'll say "Have you ever written something down, only to later 7:03 be confused by your own note?" and then expounding upon that, 7:14 we'll go ahead and create another paragraph 7:23 and inside of this one we'll just actually go ahead and copy and paste 7:28 some text from off screen, so I think you get the idea, 7:32 and then we're done with our header div. 7:37 So let's go ahead and skip down here and make some room to work. 7:41 So just after our header div, we'll create another div with the id "phone", 7:45 and we'll go ahead and close that 7:52 and inside of our phone div, we're going to create a video container. 7:57 Now, this phone div is what will actually contain an image of our phone. 8:07 This video container will contain an HTML5 video. 8:12 So let's go ahead and create that now. 8:17 We'll type out our video tag. 8:20 We're going to give it a width of 100%, 8:23 and this will be for our fluid grid, which we'll be talking about later on. 8:29 We're going to create a poster image for our video 8:33 and this will be the image that is shown when the video is not playing. 8:37 This will be taken from the images folder, 8:43 and this is the file called "app_screenshot.jpg" 8:46 and then finally, we just need to add the controls attribute, 8:54 and this will just put some video controls on top of our video. 8:59 So we'll go ahead and close our video tag, 9:04 and then inside we need to put our sources. 9:08 Now, I've already encoded our video to several different sources because that's not really 9:13 the focus of this Master Class, but we'll just go ahead and drop in those sources now. 9:18 So our first source tag will be from the videos folder, 9:23 and we're going to pick up "app_demo.mp4", and this is going to be of type "video/mp4", 9:30 and the codecs we're using on this are going to be inside of double quotes which are then 9:46 inside of single quotes and will be avc1.42E01E,mp4a.40.2", 9:52 and then we'll skip down to the next line 10:10 and put in our next source, and this will again be from the videos folder 10:14 File name is "app_demo.webm" and this is a newer codec that works in Google Chrome 10:20 and a few other browsers and the type for this will be "video/webm" and the codecs 10:30 will be "vp8, vorbis." 10:42 We just have one more source here. 10:49 The next one will again be from the videos folder. 10:53 It will be "app_demo.ogv." 10:58 Type will be "video/ogg" and the codecs will be "theora, vorbis." 11:06 So now we're done with our video sources, but we still need to add in one more thing, 11:21 and that is an image that is again our app_screenshot, 11:27 and this will occasionally show up in browsers that do not support the HTML5 video tag, 11:35 but will still show this image. 11:42 So the alt text for this will just be "Screenshot of GeoNotation" and we're going to give it 11:44 an id so that we can target it with css later, 11:55 and the id will be "video_app_screenshot." 12:00 So we'll go ahead and skip down here. 12:07 We're done with our HTML5 video container there. 12:09 We'll save that out and make a little bit of room to work here, 12:13 and we'll move on to the 3rd column in our layout which will give the id "misc." 12:18 We'll close that 12:27 and the first thing inside of this column will be a link with the id "call_to_action" 12:30 and we also need to give it the href of "http://mc-mobile-app.s3.amazonaws.com/ 12:40 index.html" and this will just link to the project that was created in a previous Master Class. 12:59 Inside of this link we'll put the text "Start Taking Notes" and then below this link 13:08 we're going to create a few block quotes here which will be testimonials about the app 13:20 and our first block quote will be "Holy heck, it's awesome!" and then after that we'll create a 13:26 div with a - Ryan Carson and close the div 13:37 and then we'll create a 2nd block quote 13:46 and inside of this one we'll go ahead and put a quote from myself that says 13:51 "This changes everything." 13:58 And we'll go ahead and open a div here and say it's from Nick Pettit 14:02 and we'll go ahead and close that. 14:08 So that about finishes things up for our main content div 14:11 so we can go ahead and delete this extra space here. 14:14 However, just after our main contect div we're going to create an unordered list with the id 14:20 "features" and this will be where we put all of the features that are listed 14:27 at the bottom of the page. 14:36 So our first list item will have the id "global" and we're going to give it the class "feature." 14:38 And we'll go ahead and close that list item and we'll create a div inside of it 14:48 with the class icon 14:54 and we're going to put an image inside of this div 14:58 from the images folder inside the icons folder and it will be "globe.png", 15:04 and we''ll give it the alternate text "An icon of a globe." 15:13 And then still inside of our list item we'll create another div with the class info and 15:21 this will be information that's placed next to our icon. 15:29 So it will create a 3rd level headline tag 15:33 and we'll say "Global" and then we'll expound upon that point and we'll say 15:37 "Keep track of your notes using advanced geolocation technology." 15:44 So that about wraps things up for our first list item, but we need to create 3 more, 15:55 so we'll go ahead and and copy this, and we'll paste it 3 times, one, two, and three, 16:02 and then we just need to change the information inside of 16:11 teach one of these ones that we pasted. 16:15 So this first one that we pasted will have the id "easy." 16:18 We're going to change the source on the image to "notes.png" 16:24 and we'll change the alternate text to say "An icon of a notepad." and then we just need to 16:32 change the description here to say "This app is even easier to use than regular old pen 16:41 and paper" and of course we do need to change this h3 as well and it'll say "easy." 16:51 Now we just have have 2 more here. 16:59 We need an id of "friendly." 17:02 We'll change the image to the icon of a heart and we'll change the alt text appropriately. 17:06 We need to again change our description, and for this one we'll say "You'll love 17:16 the experience of taking notes and interacting with GeoNotation." 17:23 And then for the h3 we'll also say "friendly" and now we're onto our final list item here, 17:33 and we'll change the id to say "fast" and we'll use our lightning bolt to represent the 17:41 speediness of the app. 17:49 We'll change the alternate text appropriately and say "An icon of a lightning bolt." 17:51 We'll change our description to say "GeoNotation is, quite simply, 18:00 the fastest note-taking app on the market." 18:08 and then we'll go ahead and change our h3 to say "fast" 18:17 and then we'll delete our extra space here, 18:25 and we can get rid of the extra space in between each one of our list items, 18:30 and then we'll go ahead and save that out and switch back to the browser, 18:40 and when we refresh the page here, you can see that we now have a fist level headline 18:45 that says "GeoNotation." 18:52 Just below that inside of our logo div we have the GeoNotation logo. 18:54 We have a 2nd level headline which is our tagline that says "Take notes anywhere." 19:02 We have a brief description of our app and all of these things will go in the left hand column. 19:08 We then have a very large image of our application, and that's actually just the poster 19:18 for this HTML5 video. 19:25 Now remember, we put width of 100% on this, which is why it appears to be so large. 19:28 We'll go ahead and pause that. 19:35 Then on the right side of our page we have the "Start Taking Notes" call to action button. 19:40 We have a few block quote testimonials, "Holy heck it's awesome" and "This changes 19:47 everything" and then we have a few very large icons here with the headers "Global", "Easy" 19:52 "Friendly" and "Fast" and that should about wrap things up for our html markup, 20:01 having good semantic markup like this is the foundation for creating 20:10 a very good, responsive design. 20:14

You need to sign up for Treehouse in order to set up Workspace

Sign up