Lessons

Lesson Info

Beginning the Project: Adding and Formatting the Content

What I'm gonna do is I'm gonna start with the starter files inside of our project files. Inside of here, basically what we have is an HTML and a CSS file. Then inside of the images folder, are a whole series of images. A lot of these are images that we created in our other course on Sketch where we exported out individual content that we could use in our final project. What I wanna do is I wanna start by creating a folder on my desktop, and that's going to be the root folder of our project. You'll hear people use the term root, which really just means it's the folder that has all of your projects inside. If you're familiar with tools like InDesign for example or QuarkXPress, this would be the idea of having your collect for output folder. It's the folder that has everything inside of it. On the desktop, I'm gonna come out here and just create a new folder and I'll just call this my webpage. Then what I'm gonna do is simply take the files in the starter folder and just option drag a cop...

y of these over. If you're on Windows, you can hit Ctrl + C and Ctrl + V to paste. I basically just wanna have all of these assets in a folder on my desktop. Later on, if we were to upload this to a web server for example, it's this folder that would contain all of the assets that you would upload to a server as well. Let's begin, so I'm gonna take the HTML file, and let's just open this up with our text editor. Inside of our text editor, delete this comment here, we have the beginnings of our HTML file. The way the HTML works is basically we have this series of what we call tags, and to further explain these I'd like to switch back to Keynote and just talk a little bit about some of the pieces that we have here. When we have an HTML element, we have this idea of something we call tags. This h1 here that starts with a less than sign, then h1 then greater than is something called an opening tag. Then we have our content in the middle, and then we have what we call a closing tag. It's these elements together that constitute an HTML element. When people talk about the HTML elements on the page, they're really talking about the beginning and ending tag and the content in the middle. You'll hear people use these sort of intermixed. People might say, "Oh just go to the h1 tag," for example, but just to get really sort of nitty gritty about the whole thing, all these together constitute the element and each one of these individual pieces is a tag. If somebody says, "Hey can you go to that HTML tag," you'll understand what they're talking about. Again, we talked about some of the most common elements for content. When we take a look at our design, we're going to decide what elements we wanna have in order to replicate the design that we need to create within our page. What we're gonna do once this plays through, we'll switch back over to the computer, and we will talk about how this HTML file is structured. If we look at this we can see our beginning HTML tag here, that's the opening tag. At the very bottom of the document, we have the closing tag. Everything inside of our HTML document is in an HTML element so the whole thing is considered an element. Then we have a head area and a body area. The head area starts with the opening head tag and a closing head tag. Everything up in the head area is all of the content that relates to the web browser. This is where we tell the browser what type of characters are in our code. The viewport, this is where we set the initial width, for example. So initial width or initial scale is set to one. This is because mobile devices allow you to pinch and zoom in on a web page, so we're basically setting the initial view to one. This is stuff you would typically put in every webpage, so this is why I gave these to you in the starter file so you don't have to keep typing these every time. We have our description tag which helps search engines know what's on the page. Keywords, same thing. Then we have a title. The title is the title that shows in the window bar, and it's also the name of the document when somebody adds a bookmark. The title should be really descriptive about what's on the page as well. Down here inside of the body area, this is everything rather that we see in the browser, so you can sort of think of the body area as your presentation layer within your document. This is the canvas area where we're going to do all of our stuff. Once we're in our HTML, we need to talk about or figure out what it is we're going to do in here. We're ready to start creating a layout, but we wanna take a look and see what we're gonna do with our layout or at least how we have to take the design, rather, and convert that to HTML. If we could switch back to the Keynote, we'll take a look at a workflow that we use in our company to come up with that particular structure. What we'll typically do is we'll start with our design and we'll look at the design and decide how do we need to break up the design so that we can replicate this in HTML? In this class, we're gonna do a relatively simple design, but this is gonna have a lot of sort of pieces in place. We'll start with our design, maybe we did it in Sketch or Photoshop or wherever, and we'll look at this and say what do we need to do to break this up? The top area here, this header information, we're gonna put this into an element called header. We're gonna have an article element, and so that's gonna be basically all this content inside here, and we looked earlier about all the different HTML structures we have. Again, there's no right or wrong answer here, this is just what I think we should do if I was looking at this layout. Then we have our footer down here at the bottom. Inside, we're gonna have a few more items in here. We wanna have an h1 tag appear only once in the page, so that's gonna be this item up here. The h1 tag is really important for search engines because when you assign an h1, you're telling the search engine this is the most important headline on the page, and that helps the search engine sort of rank the content on your page. After that, we wanna use h2s and h3s to structure the rest of the content. Here we're gonna put an h2 tag for each one of these items here. We're gonna have a figure element, so we're gonna use the figure element from HTML and we're gonna use a paragraph here. This, again, just sort of gives us a visualization of how we would build this layout. Again, if you're used to print, you probably have done things like this with InDesign or Quark or any of the other layout tools. You've clicked and dragged your boxes, you put your content inside, and you start to create your style. We're gonna do this just with HTML and CSS. Let's switch back over to the computer, and now that we have a pretty good idea of what we're gonna build, let's start outputting this into our page. To begin, we're gonna come up and go inside of the body element, and if we remember from the slide, we're going to create our main containers, our main elements, typically we call them containers too. I'm gonna start by typing a less than sign, gonna type in the word header, and then I'm gonna end the tag, so there's my first beginning opening tag for the header. I'm gonna type a less than sign and I'll hit a forward slash and a lot of text editors will automatically start to help you type, so by hitting a forward slash, it just typed the rest of the word header for me. We'll hit a few returns. We're gonna need our article element, so less than sign, type article, then less than sign forward slash ends the tag. Then we'll start with the footer. Notice I'm getting some code hints here. Again, most text editors will give you some code hints here, so that will make your life a lot easier, and we'll end the footer element. Okay so this really gets us started. We have those main sort of elements here. This is kind of like clicking and dragging a text frame in a graphics application. We can also add an HTML comment, so when you're first getting into HTML, you might wanna start to add comments in there just to sort of help you find what's happening inside of your files. As your HTML file gets larger and larger, the comments will give you a way to quickly get to specific points. A comment starts with a less than sign and then an exclamation point, and two hyphens. We'll just call this the header area. You can put anything inside here. To end it, we do two more hyphens and a greater than sign. That's our HTML comment. Let's copy that, let's bring this down to the next line, let's paste it, we'll call this the article area. Then we'll paste this one more time down here and we'll call this the footer area. Great. Yes, question. Semantically, what is the difference between article and section? From article and section? Semantically there's no difference. If you read the HTML5 spec, they'll give you examples of where you might use the content for different pieces, and this is where it's completely up to you and what you think makes the most amount of sense for your particular project. Article, if you look on the W3C, they'll say that an article should be a grouping of a complete idea or story within your webpage. If you use an aside, typically that would be something like a sidebar or a call out for your content and in some cases the aside could be inside of the article element. In reality, there's no real rules at all. You could put all of your header content in the footer if you wanted to. The HTML5 structure, with all these new sections, just give us a way that we can start to break up that content and put it into place. The more sites you read, the more different strategies people have about how to put all this stuff together. For the most part, most people will keep everything that relates to an idea or a story in an article element. There's another item that we'll look at tomorrow called a main element. So that's sort of up in the air. Is it the main content of the story? It all depends on how you wanna view that. Alright, so we've got our main structure in place. This particular code editor I'm using has a built in preview so I'm gonna come over here and just turn that on. Basically that's a web browser on the right hand side of the screen that's going to give me a live view of what's happening here and since we don't have any content in place, of course it's blank over there. The first thing we'll do is let's go over to our content document and let's just add in some content. I'm gonna open the content up in my code editor as well. Inside of the content, we have a bunch of different sections here. What we're gonna be doing is using some of the content in here to keep us from having to type anything that's too repetitive. I did wanna explain a few things as we go forward. For the first two sections, we're going to code some things by hand. We're gonna code in a hyperlink for example. Then later on, when we get down to remaining content, I put HTML here in parenthesis. I have some of the HTML already set up here, so we're not gonna type all this in the class. Let's come up here and start small, let's come up here and select all of the content for the header which includes herbs and spices and just some content about that, and then we also have a photo at the top, we're gonna skip that for the moment, so let's come in here and just select these first two lines. We'll switch back to our HTML. We're gonna go inside of the header. Gonna split the header open by just putting a return here and all this content I'm gonna place inside of the header, I'll just come over here and tab this. As I'm working today, I'm going to keep formatting my code. HTML is built on this idea that you have parents and children. There's a parent and child relationship or an outline relationship in HTML. Anything inside the header will be between the beginning header tag and the ending header tag. It's this structure that's really important. It's these elements that we're gonna target with CSS and manipulate our layout. The HTML's controlling the structure, the CSS is gonna give us the ability to change the way that layout works. What's interesting here is if you look over in the live preview here in the browser, notice that herbs and spices, which is on a separate line here, is all being run together. In HTML, if we don't do anything to create elements, the browser's just gonna run the content as one big long string, so the browser has no care for the content inside of here unless it sees some structure, and right here there's no structure. This is just, all that content is inside of the header. We're gonna add a little bit of structure. There's one thing we do want to do here as well and that is, we have an ampersand sign here. There are some HTML characters that we need to escape, and what that means is if we have an HTML character in our content that the browser could use for something else we need to tell the browser that we want to use that ampersand character. You'll see this if you do a search on the web, if you look at the URL, maybe you searched for used cars, you'll see in the URL after the website, you'll see a question mark and you'll see used cars, and an ampersand symbol and then you know, you want a red car from 1979, whatever search criteria you put in there, that'll show in the browser, and they use ampersands to do that. If we could switch back to the keynote real quick, there are a series of characters that we will need to escape in HTML. The ampersand, you don't have to do this one, most browsers will detect that, but it's a good idea to escape these. The less than and greater than sign, if you were creating a math equation and you wanted to say that five was less than 10, this is actually the beginning HTML character, right? So we have to tell the browser this isn't a tag, we wanna use the character instead. The way that we write these escapes is with an ampersand and a code. So ampersand lt for less than and then a semicolon. Greater than, left double quote, right double quote, because when we get to attributes they are inside of quotes, and then the ampersand itself. This looks a little geeky but this just tells the browser hey you know, these are characters that we want you to actually show. Let's switch back to the screen here and let's just add in our ampersand which is amp for ampersand and then a semicolon. You'll also notice the code hinting here. A lot of text editors will give you the ability to have the code colored for you which is great. We can see really quickly here, here's the beginning and ending header, the elements here are pink, escape characters are in orange, and again it just gives us a really quick way, and it really helps if I were to mistype that, I wouldn't actually see this properly. So if I had a space in there or I had the wrong character, I would be able to tell by the color. Okay. Now let's start adding some structure. This is the main information for the page, so this is gonna be our h1 tag. We're gonna start with a less than sign, we're gonna type h1, and then a greater than sign. Gonna move my cursor out to the end, less than sign, I'm gonna hit a forward slash, my code editor will complete this and we now have our h1 tag. As soon as we add in that content, notice we automatically, we're already getting structure in our browser here. We've told the browser, this is the h1 element, the browser knows what to do with that. Browsers have a default set for how they display all the content, which if you notice, is exactly how this would look if we did this in a page layout tool or even in PowerPoint with no styles, black Times Roman is kind of the default for almost every design application, and the browsers do the same thing. Let's come in here and my code editor has a few shortcuts, so for example I can select the entire line here and I can just come in here and hit Cmd + Shift left bracket, which a lot we'll use, and type in the letter P, and I can get a beginning paragraph and ending paragraph after this item here. Then if we come over and look at the browser, we now have an h1 tag and a paragraph tag. We have our first two elements within the page. In a little bit, we're actually going to style the header element and do a few things with CSS. What we'll typically do in our workflow is we will get all of our HTML content in place because later when we start adding our CSS, it's gonna be easy to tell what the CSS is affecting if we have all of the HTML content in place. We'll tend to do a lot of the HTML work at the beginning. Now let's go down to the article section, I'm gonna come down and split this open. Let's go back to our content. Let's come down to spice and let's come down, select that and copy it. We'll go back to article and we'll paste that down here. Again, just like before, it's all being just placed in the page, so I'm gonna tab this in so we can see all of that content. Let's come up here and select spice, these are gonna be our h2 tags, so put an h2 around that. This is gonna be our paragraph, so put a paragraph element. As soon as I start styling this, we start seeing this. The browser automatically styles the h1 larger than the h2, it makes them bold, again it's got a lot of built-in properties that it works with. In our content, a lot of times the copy document you'll get from the content manager will have hyperlinks in there. Here we can see a hyperlink, they put them in square brackets. Every editor will do something a little bit different, or a content editor. Here we wanna link to a site on Wikipedia for antimicrobial. What I'm gonna do is come in here and cut this to the clipboard, Cmd + X, or Ctrl + X on Windows, and just cut this. Now I have the URL to that website on my clipboard. What we wanna do is make antimicrobial here a hyperlink. The tag that we're gonna use for that is an A tag, which stands for an anchor tag. I'll get my cursor before antimicrobial, type a less than sign, type the letter A, then a greater than sign, now get the cursor at the end, and we'll end the anchor tag. Inside of an anchor tag, we need to add something called an attribute. Attributes are additional properties that get assigned to an HTML element, so for an anchor tag to link to a website, we need to use an attribute called href, which stands for hypertext reference. So href equals, and then we put in two quotes. This is why we have to escape the quotes that we looked at earlier in the slides because quotes mean something in HTML as well. The attribute name here showing up in orange, and then it equals a value, and there's quote marks here which is a something called a string, it means literally, I literally want to put a value in here. Inside the quotes, I'm going to paste that URL. What that does is when somebody's in the browser and they hover their mouse over the word antimicrobial, or touch it with their fingers on a touch device, it's going to link to this page. If it's on a different web server, you should have the HTTP in there, which basically is the protocol which just means go to this website. Now if we come over to the browser, we'll see here's our hyperlink. If I hover over it, I get a little pointer tool, we've all seen this. How '90s right, with the blue underline type? This is what browsers do by default. It used to be beautiful before CSS. Let's come in here and add a few more properties. The next property is going to be, if somebody clicks the link, I wanna bring them to another web window, I don't want them to leave the site we're on or my article, want them to open a new window. Notice again, with the text editor here, if I start to add something else, if I add a space here, I'll get a sort of dropdown menu here which will show me all of the possible attributes. Again, as I mentioned before, you don't have to memorize all of this stuff. I don't have most of it memorized. It's all here in a lot of these text editors, but there's a lot of things that you'll use quite often. The one we're gonna use here is called a target. We're gonna hit, so I'll type target equals, two quotes, and I wanna use this item here called target equals blank. The underscore blank basically means when somebody clicks this link, open a new tab or window, depending on what the user set as their default, to open this new content. The other ones, parent, self, and top, all relate to if your webpage is being opened inside of an iframe inside of somebody else's website the way YouTube will load inside of an iframe. Most of the time you're just gonna be worried about target equals blank. Then the next thing we should add on all of our hyperlinks is something called a title attribute so when a search engine is querying our site, it sees that we have a hyperlink that goes out to this Wikipedia page and we wanna give this a little bit more information. A search engine knows we're linking this word, but we can also add a little bit more information in here. We'll add a title attribute, set this equal to, two quotes, and we might wanna make this a little more friendly. We might wanna say learn more about, let's come down here and copy that, antimicrobial properties, and a period. The word properties is down here as well. Again, users aren't going to see this, but this will alert the search engine and give them just a little bit more information about that content. The reason we're so concerned about search engines is when all the stuff gets queried, any extra information you put in the HTML helps the search engines decide if your content is more in line with what somebody has searched for, and with billions and billions of web pages being out there, it's really important that we just give those search engines enough information. Another nice little side effect of the title attribute is if somebody is using a mouse or a track pad and they hover over a hyperlink, that title also becomes a little tool tip that will pop up. I can see that this will say learn more about antimicrobial properties when I hover over this piece as well. That's really good practice. The other thing that this helps with is accessibility. If somebody is having this page being read to them by a screen reader because they can't see to read the type, this will give the screen reader more information about what that is as well so the person can tell the screen reader, "Yes, I'd like to follow that link," or "I'd like to keep going on this particular page." Alright, any questions so far? Alright, so that's kind of boring, so let's ... Well, the layout's boring, the class is phenomenally interesting, but the layout's a little boring so let's come in and let's add something visual. Let's come in here and add an image. What we wanna do is add an image for the spices. We wanna have the spices be at the top of the page. I'm gonna come in here, I'm still inside of the article element, but after the paragraph. Let's start with a less than sign, then type image equals, we'll end the image tag. Now image tags don't have a closing tag, some of them don't have closing tags, very few. Now inside of the image tag, we're gonna use src which stands for source, we're gonna set this equal to, I'll put in my quotes, and then notice I get a little drop down menu so I can go into my images directory. Let's go down to spices.png, and I'll select that. Now over in my browser, I can see I have my spices. Now I'm quickly going to cut that and put it into the header which is where it's supposed to be, there we go. The image will come in at its full size without any extra information here, that spices image is really huge, we made it in Sketch and said we needed our 2x size for our high definition screens, but it comes in here really huge. Temporarily, we're going to size this with HTML. Inside of the image tag, we're going to add another property in here called width equals, two quotes, and in here we're just gonna set this to 300. Now before we had CSS, this is how we would size everything in HTML. We would say, we'd add attributes of width and height, and we set them equal to, and then the number value here has no measurement on it, so it's just 300. It's actually translating to 300 pixels because we didn't have anything else back in the olden days, but now we have a whole bunch of different measurements. When we resize this later with CSS, we will use measurements like pixels or Ms or some other type of measurement. But for right now, so that it's not taking up our whole screen, we'll just set this here with a width equals 300. That gets our image in the page for us. Let's scroll down a little bit. Now let's come in here and let's go back to our content. Now we're all pretty comfortable with all of our elements, right? Alright, yes, question? Is there a difference between image and figure for tags? Is there a difference between image and figure? Actually figure is a way that we can group an image together with a fig caption or a figure caption and have the whole unit travel together. In HTML5, that's a way, and we're gonna do that later today, that's a way that we can add additional structure to our HTML to say we have an image and a caption, the fig caption is the caption for the image, and then figure allows us to wrap all those together, because that parent and child relationship becomes really important to the browser on, I'm sorry to the search engines, on where we find that individual content. However, you cannot put a source on a figure element, so if you just wanna bring an image into a page, you can't do it with figure, it has to be with an image tag. So figure is really about adding more structure. In our remaining content here, I've gone ahead and added some more HTML, because as much fun as that was, we don't wanna keep coding all this HTML. I'm gonna come in here and select and copy all this content, let's switch back, after our paragraph here for spice, let's hit a few returns, I'm still inside of the article element, and now I'm just simply gonna come in and paste that remaining content. I'm also gonna come in here and structure this a little bit. I wanna make sure that these are tabbed in from the article element. I'll do this piece. Tab these in and tab these in. Now if I scroll down in the browser, we can see all this content we've added. Down here at the bottom, we have a series of links, so let's just talk about these for a second. Down here we have some anchor tags and inside of the anchor tags, we have image tags and some text, so this uses the chili powder png file, this one uses the tumeric, did I say that right? (chuckles) And the spice matcha. I should've practiced saying all those words first. Then each one of these is inside of its own anchor tag. Just like text, if I come over here and hover over these images, these images become hyperlinks. These are coming in at full size as well, and we're gonna style these with CSS. The other thing I wanna call your attention to is the area here where we wanna have a bullet list. As we talked about earlier, without any structure, the browser doesn't really know what we wanna do here. Our copy editor gave us the content for all of these different areas that we wanna sort of put into a bullet list, but the browser's just running these in one long line. Let's take a look at another set of elements called an unordered list. Let's come in here, let's do a few returns after the first paragraph, and we're gonna use an item called ul for unordered list, we'll end that tag. Then I'm gonna get my cursor after Sri Lanka, less than, forward slash, and that's gonna end that element. Now inside of here, we need to somehow specify each one of the different bullet items, so the beginning and ending ul start the bullet list, each one of these items is going to be tagged as a list item, and that's gonna use a less than sign and then an li and then a greater than sign. In that slide before, we talked about the most common items you'll use, lists, which include unordered and ordered lists, all use list items for the items inside. What I do is I hit copy here. Another trick a lot of code editors might have is the ability to edit multiple lines at once. I'm gonna come in here and just edit all of these. Ugh. Okay, I'm not. (laughs) Actually I'll just paste it real quick. I don't know why my keyboard shortcut's not working. I'll just come in here and paste each one of these, so I'm putting a list item in front of each one, and you can see over in the browser, as I add these, you'll see a bullet showing up for each one of those items. I'll just come in here and remove all of these. Then we do need an ending list item for each one, so I'll come in here and add a forward slash, end that list item, and then I'll just come in here and add this to the remaining lines. Now we can see that bullet list is showing up over here on the right hand side. We've added a whole bunch of structure here for that content. If we wanted to add this, or I'm sorry, have the browser add these items up, we can change the unordered list to an ordered list by simply changing the U to an O, and in an ordered list, the browser will count each one of these items and then put a number in here, so we don't have to go and put a number or anything like that, we can just tell the browser this is an ordered list, and it will count up each one of these for us. Let's go back to just an unordered list for this. Alright and so the next thing we'll wanna do is add in our figure, so that was actually good timing on the question we had from before. I'm gonna scroll up here, and after the spice paragraph, before we get to the tumeric, let's hit a few returns and let's come in here and add a figure element. What a figure element does is basically give us the ability to wrap an image tag along with a figure caption tag, so we can have a caption to go along with an image and have all of that be in one group. I'll start that by typing a figure element. We'll end the tag and then end the element. As I mentioned before, the figure might seem like we can actually bring an image in here, but we can't put a source attribute on the figure itself. It really is a way to sort of group together the image and the caption. Inside of here, we're going to add an image tag. So image equals, we'll set the source, we're gonna set this equal to images, we're going to use our tumeric, yep, end that, end the tag. Then the next line, we're gonna come in here and add a figcaption. So figcaption, all one word, we'll end the opening tag, end the element. Let's switch back out to our content. Down here we have our caption, so let's copy that. Let's come in here and inside of the figcaption, we'll just paste in that content. So here we are, we're looking at that giant image here. Just for the moment let's come in here and just set a width. We'll just set this to 150 just so it's not quite as tall. Now we have the image that we brought in here with our description down here at the bottom. Now these two items are being grouped together, so they're now being treated as one element with multiple children inside. There's another attribute that we'll wanna add on to images, both for accessibility and to help search engines, and that's the idea of putting an alt tag on an image. If we don't have the ability to see what's being rendered, we need to be able to explain and describe what that particular image is. On an image element, we'll set an alt attribute, so it'll be alt equals, then two quotes, and then we can say image or photo of, and I'll just come down here and copy the name of this. Tumeric, and then we'll just put a period. To keep in, let's come up here and add an alt text to this as well, so alt equals for the image in the header, check out our, check out our recipes for various spices. Make sure I typed all that right. Alright. Okay so now we'll scroll down to the bottom. Like I was mentioning before, one of the key things that we try to do is to get all of the HTML in the page so that when we start modifying this with CSS, we're gonna have all of the ability to see exactly what changes are going to occur each time we make a change in CSS and target that individual HTML. On the right hand side, we have something that search engines absolutely love. I mean this is absolutely beautiful to a search engine. As designers, this leaves a lot to be desired. With that, we are going to move on next to creating rules and we're gonna start styling our text and then styling our elements and see how CSS can relate to the HTML structure that we have in place.