Your most important content - Bootstrap Tutorial

- [Instructor] Now, the first things you need to know about coding in HTML are the term HTML elements refers to anything that's on a webpage. Almost all tags, which are also HTML elements, have an opening and a closing tag. The closing tag always starts with a forward slash. You can think of an opening and closing tag as an ever expanding container for the content inside. Kind of like an ever-morphing storage box that you can continue to fit more morphing storage boxes in and that can also hold your content. The mighty morphing HTML storage containers. That has a nice ring to it, right? Maybe not. Another very important thing to know about HTML is that an HTML page is always structured with a few basic top-level tags. It starts out with defining our document type as HTML, and an HTML tag that defines our language as English, seen here as html Lang="en" for English. Then, it has an opening and closing head tag. The head is where we tend to put information that isn't necessarily displayed on the page, but is important to reference. Let me explain that a little better by switching back to our Sublime text editor and showing you what it looks like in our document itself. So if we look inside the head area, which is lines four through 16, we can see that there's a few tags in there, but the one we want to look at specifically is the title tag. We can see within the title tag, there's the verbiage Bare - Start Bootstrap Template. Now, if we go ahead and minimize Sublime and go to a browser window, if you open the index.html page within your browser window, you'll see that the title text that's displayed on the page is not the same as the title text that was within those two title tags on the page. So the verbiage, if you remember, was Bare - Start Bootstrap Template. And the verbiage here is A Bootstrap 4 Starter Template. However, if we look in the top tab of the browser, we do see that verbiage: Bare - Start Bootstrap Template. So one more time. Title Bare - Start Bootstrap Template. So these title tags are not displaying text on the actual page itself, but it is helping with the page structure in some way. That text is showing somewhere. So if we were to save that page within our bookmarks, this is the default text that would save for that page. Now that we've got that part out of the way, let's continue to look at the rest of the HTML structure of the page. Below the head tags, there are body tags. Within the body tags is where we use other code to structure our layouts and place our content. Below the closing of the body tag is then the closing of the HTML tag. As a newbie, it might be helpful to always add indents to these tags so that it's clear to our eyes which tags are housed inside of which other tags. However, it is also really nice to not have to over indent code, as it can be frustrating to work in sometimes too, especially on smaller screens. For our purposes, there is one more tag that you need to know about right now, as well as one of its many very important attributes. The div tag is a universal container tag in HTML. Remember how we compared HTML opening and closing tags to a morphing storage container? Well, this is the container tag for real, but a more general version of it in HTML. It's the main tag you use for enclosing your content, and you can nest many divs inside of each other. As you become more advanced with HTML, you'll learn about new, specialized container tags from HTML 5 that are meant to be sensitive to users with disabilities. Examples might include articles, sections, or sides. However, for our purposes, we really only want to focus on this basic div tag. So, feel free to ignore everything I just said right there outside of the div tag. The div tags, along with other various element tags in HTML have a special attribute, also known as a property that helps classify them and allow for styles to be applied to them. Styles, if you remember from earlier in the video, is code that designates the look and feel of your site and its content. The class attribute allows for us to enter multiple class names, separated by a space. It's inserted within the tag, the div tag in our case, and is followed by an equals sign and two quotes. It's within the quotes where we can place any number of class names. This is important for bootstrap, because all of the responsive layout is determined by these class names. You should also know that class names can be used multiple times throughout the document, and there is no limit to the number of elements you can label with the same class. However, if you have specific styles assigned to that class, they may not look the same on every element, because not every element is structured the same. This is important to know, because there is another attribute, also known as a property, called an ID. An ID can be used only once within an HTML file, as its main purpose is to identify the element it's assigned to. It can also be used to assign styles, but it is not as powerful in that regard, since it can be only used once. Again, for our purposes, we'll only be working with classes. So just to show you a quick preview of how powerful bootstrap classes can be for our layout, I wanted to show you a real life example. So I went ahead and downloaded a different bootstrap template altogether. So don't look for this in your current code, but we're just going to play with the layout a little bit. These lines here that I'm highlighting are the lines that use bootstrap classes. So when we change them, it's going to change the layout altogether. But first let's look at the layout on the right side of our screen here. If we increase the window screen size, we'll see that the number of elements laying out across the row is different depending on the size. So here it's two elements. When it's larger, it's four elements, and when it's much smaller, it's just one element across that row. Now, if we go to the lines where those bootstrap classes are, which again, I'm highlighting on the screen, and we change some of the numbers here? For example, let's change that first three to a six, and let's do the same for this div element that's below it. So that three is going to a six, and the next number in that line, instead of a six let's do, hmm, what should we do? Let's do a four. And same one for the element below it. So let's save that and refresh. And it doesn't look any different on smaller screens, but if we increase the size? Oh, these are the elements that we were working with. Not those top ones there. Now, if we keep increasing the screen size, you'll see that rather than four elements displaying across one row, we've got two elements there, and one is folding over onto the next line. And again, on that medium-sized screen, we see two of the elements and we're kind of missing an element to fill out that row there. So as you can see, just changing a couple numbers on those bootstrap classes has a very profound effect on how that displays on our screen. So in essence, bootstrap classes are very powerful. And in the next video, we're going to examine a little bit more about how they work so that you can apply them effectively to do the layouts that you want.