Lessons

Lesson Info

Adding Markup and Content

Lets go back to our HTML file. And now that we know what our content strategy is and we know the containers we're going to need, lets come in here and start building our HTML file. So we're gonna start inside of the body area. Lets come in here and select this HTML comment. Lets delete that. And we're gonna start by adding in the elements that we're going to need. So from the slides we looked at earlier, we're gonna need a header element. So we'll start by typing "header". Most code editors will give you some helpers. In this particular code editor, you'll notice as I start typing "header" I get this little menu that shows up underneath. They'll also help you by closing tags for you. So this is the beginning header tag. I'm going to end this tag to end the element. Type a forward slash and my code editor will put in the ending tag. Most code editors will do this for you. And the code editors that I listed on the slide earlier are some examples of code editors that will help you with th...

at. So lets keep going. So we have our header. Next we'll add a nav element. We'll close that. Hit a few returns. Next we'll add a section. We'll end the section. I'm going to hold option down arrow, this code editor gives me the ability to option drag out another copy. So we need two section elements, we need a main element, and then finally we need a footer element. So that's gonna be the outermost structure that's gonna contain all the elements we looked at earlier. Now we have two section elements here and when we're rating our CSS we're going to need a way to target those individual sections. So we have the ability to name elements in our HTML page using either classes or IDs. IDs are a way of naming elements, but you can only use one per page. So if I created an ID named Chris, I could only use that once per page. If I wanted to create a name that I used multiple times, like you would use for a character style, lets say in a design application, we will use a technique, sorry we'll use classes to do that. So lets come in here and I'm gonna command and use a class name on the first section and we're gonna set class equal to and we're gonna call this "define". This is going to be the define section of the website. So this class element here, I'm sorry, this class is an attribute on this element. Lets come down to the second one. Second section element, and lets add a class and we're gonna call this "choices". So now we have a way, later on in our CSS, to specifically target the section for the definition area where we're gonna say "Define before you dine." And the "choices" section, which has the spices against the yellow border. So that's gonna give us the ability to do that. Okay now what we need to do is we need to add those content containers inside of each one of these elements, this way we can lock the content. Every one of these items, the nav, header, section, main, and footer, they're gonna stretch the whole width of the entire browser. So in order to make sure that we have those elements stretch, so the countertop graphic, the cutting board, the footer, and the choices section can be full width, we need to keep those without limiting their width. But we need to have content containers inside to make sure that that doesn't go the full width. So what we'll do here is add another div inside of each one of these elements. So we'll start with a div tag. We'll end that. And then here we're going to use a class because we're going to reuse this name multiple times. So we'll say class equals, two quotes, and then I'll put in the word "content". So now that I have this div container, lets come in here and copy this. Gonna arrow down inside of "section". We're gonna paste that. We're gonna paste one inside of "nav". We're gonna paste one inside of the second "section". Another one inside of "main" and another one inside of "footer". That's gonna give us the ability to, again, lock the width of all of those of anything inside the content containers so we can control the width of those individual pieces. So now with that in place, we're ready to start adding some content and taking a look at putting content inside of these individual content containers. We're gonna start by putting content inside the header, so I'm gonna bring my cursor inside of the div with a class of container, or class of content. Lets hit a few returns and split this open. Now we'll switch back to the exercise files. Lets go into content, and lets open up content.txt. Now you might get content in a bunch of different formats. Maybe your content manager gives you Microsoft Word documents, or they email it to you, or send you an RTF file. For today's class, I've gone ahead and saved all of those content formats into just this text file here. So inside of our content, I've broken this into the different areas of our site. So we have our header, our define area, our choices area. Once we get down to the define and choices, I've gone ahead and put some HTML content in here. But to begin, we're going to start with plain text and we'll add our HTML content right now. So lets go ahead and select "Herbs & Spices" and we'll select "Using herbs and spices... Take a look at what you can create today," so our sub-content. Subtitle. Lets copy this, lets switch back over to our header, and lets paste in that content. Now in my code editor here, I have the ability to open up a preview window, which is basically a web browser built into the code editor. So I'll just open this up. And with our content in place, we'll see that on the left hand side we have line breaks in here for our content. But if we look in the browser we don't see any content structure at all. So what the browser is looking for is for us to add some structure to the HTML so that the browser knows how to render this. If we don't set anything up, the browser's gonna use all of its own internal styling, which will be black Times Roman for the most part. So lets come into our code and lets come in here and just start adding some structure. Now one of the things we'll want to do is there's an ampersand here. And if we look over in the preview area, we see an ampersand showing up here as well. The ampersand is a special character in HTML that allows us to create what is called an escape character. And we need escape characters if we ever need to do something like use a less than sign, for example. Since the less than sign is part of an HTML tag, we can't actually use that straight in our code because the browser will think we're using a tag. The ampersand symbol, since it's used for escape character sequences, we need to use an escape character for the ampersand character itself. And that is just an ampersand with an "amp" and then a semicolon. Now in the browser we'll see exactly the same character here. But, for example, if I wanted to use a less than symbol in my code, maybe I'm representing a math equation, maybe I'm writing a math textbook or a math website, if I were to type "&lt", notice in the browser I get a less than sign. So I don't get an HTML tag, I actually get the character. So that's what escape characters are doing. So I'll bring this back to amp, which stands for ampersand, and then a semicolon. Next lets come in here and lets turn "Herbs & Spices" into a heading one. So I'll type a less than sign, I'll type "h1", we'll end the opening tag, and now before I close this you'll notice the entire page is now showing as an h1. So lets get our cursor after "spices", hit a less than sign, then a forward slash, and we'll end out that tag. So now we're beginning to introduce some of the content structure into our page and the browser is now showing us that over in the right-hand side. Next I'll select the subheading here. I'm gonna use a shortcut on my particular text editor: command, shift, less than sign. A lot of text editors will use this. Notice it wraps it in a div tag, both beginning and end, and I'll type the letter p. So as I mentioned before, some text editors will just make your coding life so much faster. So now we have a paragraph and an h1 tag so we're really beginning to add some of that structure in place here. So lets go back to our content. We're gonna come down here and what we need to do next is add in our link. We have a link at the top that's going to say "See full list". And we're actually treating this like a button. So what we're gonna do is add this as a standard anchor link. And then in CSS, we will turn that anchor link into a button. We'll give it some dimensions and a background color. So lets come in here and copy "See full list". Come back here, after the paragraph element I'll hit a few returns. We'll paste that. Now we'll go back to the content. Lets come in here and lets copy the URL. So this is where the editor wants the URL to go to. So I'm gonna copy that to the clipboard. And now in the HTML, we're going to create an anchor link out of this element. So we're gonna start with a less than sign. We're gonna type the letter a then a greater than sign. Then at the end of this we're going to end that element. So now this element is a hyperlink. Now in order to make this show up as a hyperlink in the browser, we need to add some attributes to our anchor link. So in order to make this anchor link actually click to a website, we're going to need an attribute called an href. So we'll type href equals and then two quotes. And then inside the quotes we're going to paste in the URL. Now in the browser we can hover over this and we'll get a pointer cursor. And if we click this, this will bring us out to this Wikipedia page on spices. So lets add a few more things in here just to make this a little more friendly to our users and to people who might be reading this through accessibility tools. First will be to add a title. So a title attribute. We might say, "See a full list of spices and herbs." And then another space and we're gonna set a target attribute. We're gonna set target equal to underscore blank. And what this will do is will tell the browser when somebody clicks on this link, we would like to target a blank or new tab in their browser. This way, the page we're currently on will stay and the link will just take them to another browser window in their document. The title attribute will serve two purposes here. One, it will inform a search engine when it sees that link that this is what the link is going to do. The search engine will also see the URL that we're going to go to as well. So, again, we're just adding more information for searching. But this also will result in giving us a tool tip in most browsers if somebody's using a mouse or a trackpad. So if I hover over this, we can see the tool tip showing up that matches what's in our title tag. Okay so we have all of our markup in place for the header. We are gonna add the graphic in a few minutes that will put the cutting board graphic in here. But for now, we have all of our content that we need for the heading section. So lets scroll down. The navigation section, which is showing up immediately after, is where we're going to put our bullet list for the navigation system. That's gonna require a little bit of knowledge in HTML and CSS to put that in place. So we're gonna save that for a little bit later in the class today. So once we've had a chance to start styling some of the other content, we'll come back to the navigation system and we'll build on those principles to create a navigation system that not only drops the menus down but reacts to mouse events, like a mouse hover. So lets skip that section and lets come down to the define section. So with that area selected in the HTML, lets come back over to our content. Now inside the content here, again, to keep us from having to repetitively type a lot of content, I've gone ahead and added some of the HTML that we need inside of here. We're going to use h2 tags for all of the different section titles. We need one h1 tag for search engine optimization. So that h1 tag is our herbs and spices. Everything else we're going to use h2s and h3 tags. So we have h2s for the "Lets define before we dine" and then we have two sections inside of here, what is a spice, what is an herb. We have these inside of paragraph elements and I already have some anchor links in place here as well. So we can see this first anchor link for "antimicrobial" and we have a second link down here for aromatic. So come in here and copy all of this content. Lets switch back, go into define. Lets paste all of that. And I'm going to format this a little bit. I like to keep my HTML nice and structured. And then over in the browser, we can see what the browser will do with this content automatically. So we can see right away, the browser with its built-in rendering will show the h at a different size than the h2s, which will show at a different size than the h3s. And all of our anchor links are showing up with blue underlined text. Now in our design, we also wanted to have the, "What is a spice?" and "What is an herb?" Section showing up as columns. So just like limiting the content containers inside of each one of our main navigation or our main HTML elements, we also want to have "What is a spice?" and "What is an herb?" inside of some container so that we can create the effect of putting these into containers that we can set side by side. So instead of me trying to keep explaining that, lets go in here and add this. So what we're gonna do is we're gonna come in and we're gonna add another element around the "What is a spice?" and paragraph in our HTML. And we're gonna use the aside element here. So we're gonna start with a less than sign. We're gonna type aside. We're gonna end that tag. We're gonna come in here and tab this in a little bit. And then after the paragraph element, we're going to end the aside. So typically aside elements are used for smaller bits of content. Typically we use things like article and main for the main or full article content of a particular page and asides are usually used as something to say this is sort of a side note or a side piece of content. Again, there's no hard and fast rules for which HTML elements you use. And when we looked earlier at all of the structure elements we have a lot of structure that we can choose from. So I like to use aside elements for things that will be placed in columns or are sort of tangential to the main content of the site. So we have an aside around the h3 in the paragraph. Lets scroll down, lets add another aside down here. Lets tab in the h2 and h3 for the second aside. And then we'll come down here and end that aside. So now that we have those two in place, lets continue down and add some of our content for the choices section. So we'll scroll down, we have our content div inside of the section with a class of choices. Hit a few returns. Lets go back to our content, lets scroll down, lets find our choices HTML. So this is where we're going to have that big yellow box in the background with our three pictures of spices in small bowls. So here's our h2, here's our "So many choices". And here is our anchor link. Lets come down here and copy that. Come back to our HTML and lets paste that content in. Lets tab this in. Now I do want to use these anchor tags as buttons and I just realized I forgot to add this to the other anchor link so we'll go do it in a second. But what I did on the anchor tags is I added a class of btn. So this is just sort of shorthand style for button. You can name classes anything that you want. They can't start with a number, but they can start with a letter and have numbers in them. So what we're gonna do later is we're gonna take any anchor tag with a class of btn and we're gonna turn these into a button shape. So I'm gonna copy this from this area here. I'm just gonna scroll up. We're gonna find the anchor link that we placed up in the heading. "See full list", and I'll come in here and just paste that class up here as well. Preview we can see our "So many choices" showing up. Lets scroll down and lets keep on going. Lets go back to our content. Lets keep going down, we have our "Where in the world" section. This is going to include our map. Again, all the mark ups in place. Our paragraph elements, our anchor tag with the class of button. Lets copy that, back to our HTML. Lets find our main element. Lets find the div container inside of there with the class of content and we'll paste all of this in here as well. And I'll come up and format this. Move over to our browser, scroll down, and now we can see our "Where in the world" section. Okay so in this section, "Where in the world", we want to add a graphic in here and the graphic is going to have a caption that goes along with it. Some of the elements, or some of the images we're gonna add to the page, are gonna be added through CSS, through background images, and some of the images we're going to add right into the HTML. So the one cutting board image we're going to add into the HTML in the heading area in a few minutes. And for the "Where in the world" section, we're gonna add our world map using HTML and we're gonna put that into a container called a figure element. Now what the figure element does is it allows us to add an image and a caption and basically give us a container for those two elements so that we can style the container and then move all of those elements around together. It also tells the search engine that that particular content relates specifically to the image that we're looking at. And so what we're gonna do here is, lets scroll up. After "Where in the world", after our h2, lets hit a few returns. And we're gonna start by typing a figure element. So I'll type less than, then type in the word figure. We'll end the tag. And then we'll end the element. Lets split this open. Next, inside of the figure, we're going to add our image. So an image tag is less than sign img, then a space. I'll end the tag real quick. There are no ending image tags. Image tags are a single tag. There's only a few HTML elements that have ending tags, that don't have ending tags, rather. Image tags are one, break tags are another. So inside of the image lets hit a space. The attribute we're going to use to import an image or link to an image is src, that stands for source. We're gonna set that equal to, two quotes. And you'll notice my text editor is kind of helping me find the images. So I'll type "images", forward slash, and then we're gonna link to "spice_map.svg". Yes. Why is it that some tags don't have ending tags? Some tags don't have ending tags because they've been migrated from earlier versions of HTML. And in the newer verions, they just didn't get rid of the fact that they don't have an ending tag. And the reason they didn't have them in earlier versions of HTML was there was no content associated to the tag itself. So there's nothing that's inside of the image tag, like "figure" or "h2"; the image tag really is just a way to point to another element. We'll also see that in a linking tag when we link to CSS. So it's just basically a tag that doesn't have any inner content. It's used only to just bring in something else. Except for a break tag, which is used to say I want to break the line but I don't have any content associated to me. You'll also see with XHTML version, the strict version of HTML4, they'll do something like put a forward slash before the ending tag, which means the tag is self-closing. HTML5 doesn't require us to do this anymore. But if you're opening an older HTML file, a lot of times you'll see that forward slash before the greater than sign. So they're just basically self-closing. HTML5 gets a little less strict with some of the pieces like that. So with that in place, we'll hit save. Over in the browser we'll see this little question mark here. We're gonna go add our images in here in just a moment. And back in the figure lets come in here. We're still inside of the figure element. But, after the image tag, lets come in here and add a tag called "figcaption". So it's f-i-g-c-a-p-t-i-o-n. Lets end the figure caption. And then inside of the figure caption, we're going to put the content that's going to relate to the image. And so if we go back to the content, I already have that down here. So after spicemap.svg, here's a link to the content. Actually this is going to be the alt text. So lets come down here and get the caption first. So in the caption I've added hyperlinks for all the different countries. So lets copy that. Lets come back to figcaption, lets paste that inside of here. So that's gonna give us all of all of these links down here for the largest producing countries of the most common spices. These will all link out to the Wikipedia pages. And then lets go back to the content. Lets come down here under the graphic and lets select this text here, which is going to be our alt text. So we're gonna copy that, lets go back to the index file. And up here what we're gonna do is add some additional information into the image tag. So, for accessibility, image tags aren't able to be seen. So if somebody has a screenreader because they can't see the page, then they won't be able to see the image as well. So we use something called an alt text to inform the people who are listening to the site what this includes. So we'll type alt equals and then two quotes. And in addition to accessibility, this also will help search engines know what exactly this image is as well, because they're not evaluating the pixels of the image, but they realize an image is being included. So we're gonna come in here and just simply paste this. So you want the alt text to be descriptive of what's happening. So this is gonna be a world map that's indicating those individual regions. So again, there's no right or wrong answer of what you put in here, but you want to be descriptive and use keywords in here, especially if you are concerned about search engine optimization and the search engine being able to realize what that image is actually including. So with those in place lets switch back to our project files. Lets open up the B folder of graphics. And real quick I want to talk about the graphics that are included in the project files. So we're gonna be working with the screen files first. These are going to be all of the images we're going to use in the HTML and the CSS that relate to people that are looking at your site on screen, which is going to be all computers and digital devices. In addition, we're going to be creating some CSS rules specifically for if somebody prints your page. And so what we're going to do here is we're going to actually use black and white versions of the different images. So if I arrow through these, we'll use black and white images, we'll even add a QR code to the footer so the CSS will actually bring in the QR code so if somebody prints this they can get back to it by using a QR code. Now you can certainly use color images for print. I wanted to use black and white here just to really make the point that we are, one, trying to conserve ink, and, two, we can really see the difference of the images versus the difference of the images versus the ones in color. But if you include color images in the print version and somebody has a color printer, of course they'll come out in color as well. And then in the screen versions, we have all of the full color images. So what we're gonna do is lets start by coming into the screen folder. We're gonna come in here and copy all of these images. Lets go out to our root project folder. Lets create a new folder called "Images". Lets open that up and lets paste in all of our graphics. So I've named all of the print graphics with an underscore print in here, so later we're gonna add these images exactly to this folder and they're not gonna overwrite each other. So with that in place, lets go back to our code editor. Lets come in and hit reload. And now we'll see our first image showing up in the page as well. Now this is an .svg, which stands for scalable vector graphic. So this means this image will scale and look beautiful at any size. So a lot of times people will refer to this as the EPS of the web. So we can just scale this down with HTML code, or CSS code, and it'll just look really great. It'll look razor sharp on your high definition mobile devices as well. And then we can see our links down here at the bottom underneath. So this is giving us all of our content in the page. Lets come back and lets go to the header. Gonna scroll up in the page here, up to the header as well. And lets come in here and add our image for the cutting board. So I saved this for last because the cutting board image is so large. And I want the cutting board image to be behind everything else. So when we start positioning elements in CSS, any element in HTML that happens first, is on a back layer. So if we kind of imagine these being a Photoshop document, or some document that you can do layers, things that happen first are in the background. So in the header element, and outside of the content area, we're going to add the cutting board image so everything will sort of position or layer on top of this image. So we'll start by typing image, then a space. We're gonna type source equals. We're gonna go into the images directory. And we're gonna come down and choose the the hero photo large dot ping. Lets end the tag. And then for the alt text, lets come back to our content file. Lets scroll up and I added some alt text here. A map of the, oh that's the wrong alt text. Alright, so we'll improvise, and well call this our cutting board. Alt equals cutting board. And then we'll save that. So without any information in the browser, I'm sorry, without any information in our HTML file about the size of this, and no CSS controlling the image, the image is gonna show in its full size. So this is the full size transparent image. And if I scroll down under this, we'll see our spices showing up and then the rest of the content. So again, without any additional information, the browser queries this image, it sees that this is a really large .png file and will just show it to us in full size. And this is okay because we're, at this point, done setting up our HTML and then we can start to change this content using our CSS. So with this in place, lets just jump back out to our project file, and lets open this in a browser. And so with our typical workflow, we will do this for just about every project that we work on. What we want to do here, or the reason that we set this up, is we want to make sure that we have all of our HTML content in place, everything is well-structured. We have all of our accessibility and SEO content in place. But we don't have any style. Once we start adding the style, we'll start to see areas of the page change and manipulate based on the styles that we've created. But there won't be any confusion as to if something is changed based on CSS or if something is changed based on HTML. So as we talked about in our intro course, this is something that computers and search engines absolutely love. Doesn't look that great to us, but, again, it's well-structured. It's got everything that we need for computers to index and search this. So with that, we want to move into CSS because we want to make this look really nice, keep it on brand and create that user experience piece based on all that content. So does anyone have any questions on all of our content and structure? Chris, I'm gonna see if the in-studio audience has anything and then I'm gonna just take a peek at what I'm seeing over here online. And just gonna do a little bit of a reload. Looks like these guys got everything super clear. And over here, we're all good. So when people say they design for mobile first, is that just something that they just have to keep in mind throughout the whole design process or something that they can do initially lets say with sketch, think mobile first and then translate that. That's a good question, yeah, we've heard a lot of people talk about mobile first. Typically mobile first hinges around the idea of starting with your content and it's not, at least from our experience, it hasn't been as much about the design process as much as the content strategy. We want to start with the most pared down amount of content that we can have and then start to grow that up as the browsers get larger. For us, we've found that, a lot of times, we'll work with the larger screen first because a lot of times our clients will give us all of the content so we'll make sure that we have everything represented as much as possible. So, for us, at our company, we find it easier to start with the larger screen, and then scale it down. At the end of the day, we're responsible for all the sizes, so whatever's gonna work faster for a particular project is the order that we'll work in. So for us, mobile first hasn't been the way that we've worked mostly because, again, at the end of the day, we're delivering all of them at once. So I would say whatever is working faster for you would be the way to go. And Chris we do have one question over here. Can you direct the community if they want to add sort of javascript type of widgets where there's a good place to go to grab some things for their website? There's a ton of places. I mean, my first the first thing that we do is we search, in a search engine, we use a lot of, I don't know the right term for that, we will ask the search engine questions like, "What's a good carousel," or, "What's a good photo gallery," or, "What's a good sliding tab panel." And then search engines will come back. There's a lot of places like Ajax Rain, for example, that will have a lot of content. There are hotscripts.com will give you a lot. There's a lot of online courses as well, that will teach you step-by-step on how to add javascript in to the mix as well. Thank you. And in a lot of cases, the javascripts, you'll need to put a div element, or some kind of a container, any container that we looked at here in HTML, give it a unique ID, and then the javascript you basically just target that particular ID. So a lot of frameworks will give you a really quick way to get some of that interactive content into your pages with those widgets. And this class here is giving you a good foundation of understanding what that structure's beginning to look like with these pieces.