HTML and CSS - Structuring and Styling Web Pages

We're going to be learning two coding languages. First, we're going to be learning HTML, which is hypertext markup language. Now, the hypertext is that these text links are clickable, so we can go from one webpage to another, kind of hypertext jumping from one page to the other.

But the markup language is actually the more telling part of this. Markup languages are different from scripting or full-blown programming languages. Markup languages literally kind of mark things up.

So, if I just had a piece of text, like even this piece of text, without some sort of markup or label for this, how would I know what this is? Is it a heading? Is it a paragraph? Is it an item in a list? Is it a link to be clicked to go to another webpage? I need to add some markup to label what it is. So, essentially, we're going to kind of wrap things in labels to describe what they are. These labels are called tags, and they will essentially be tagging, like a price tag.

If you're in a store, how do you know how much something is if there's no price tag on it? There needs to be some sort of label for that. So, we're going to be tagging or marking up things to describe what those things are. And later, we're then going to learn about CSS, or cascading style sheets.

This is how we style the things. So, based on the markup, when we say it's a heading or a paragraph or an item in a list or a link, whatever that may be, we can then create styles to say how those things look. So, first, we start with our structure or our labeling of things so that we know what they are, and then we can say how those things look.

And so, we're going to start first with HTML, and then we'll come to CSS in a little bit. Here I am in my coding application called Visual Studio Code, or vs. Code for short. There are other coding editors out there, but this is currently the most popular one, and it's free and it has a great lot of features that are useful for us.

So, if I were to create a new file here in my code editor, technically this can be used for any purpose. But if I'm going to save that and determine what kind of file it is, it's the file extension that's going to determine what kind of code I'm going to put into it. So, I'm going to save this as, and I'm going to go to my class files where I've downloaded this WebDev class.

These are the class files that you can download for this course. And into this folder here, I'm just going to put a file here. I'm going to call this my-first-page.html. So,.html is the file extension that says, of course, that this is an HTML file.

Basically, this is a plain text file. In there, we're just going to put text. That's all we can put in here.

But instead of the.txt file extension, it's a.html file extension. All of our code files, our CSS, our HTML, and even if you're doing front-end JavaScript, these are all just plain text files that don't have a.txt file extension. They have a different file extension so that web browsers know what code is going to be in them, and also so that Visual Studio Code also knows what kind of code is going to be in this file.

And so now, vs. Code knows that this is an HTML document. As indicated down here at the bottom right, it says HTML. It knows that that's the coding language because of the file extension.

And I can start to write some code into here. Now, I could just start writing my tags and create a page from scratch here if I wanted to. But to save on some copying and pasting content, I actually have a file that I want to use.

And so I actually have a folder of a little website that we're going to use for several exercises. So I want to open that folder up here. So there's an Explorer over here on the left.

And in that Explorer, I can open up a folder. I can also go to File and say Open Folder this way as well. But you could just click on this little Explorer button over here if it's not already open, and hit Open Folder.

And I can go into my class files here, my WebDev class, and we're going to be working on this news website. I'm going to open up that folder. Here I can see some of the files that are in this folder.

And for right now, we're just going to worry about the Microsoft.html. Now, this is a basically plain text file just ending in.html instead of.txt. And in here, there is no code. This is all just plain text. I'm going to add all the special codes to make this a webpage.

Right now, this is just text. Notice that we have something that's going to be a heading. This is a funny news story.

If you've ever read stories on the onion, they're funny news stories. So this is another funny news story. So at least we can have some fun with the webpage that we're creating here.

This is going to be a heading here, and I've got some paragraphs, and I'm going to want this to be a bolded list. So I've got some stuff that's kind of already formatted here in my file. But if I were to preview this in a browser and see what does this look like in a web browser, I'm going to do that before I even add any codes here to the page to make it a special HTML page.

So how would I open this up in a web browser to see it? Well, I can go to any browser such as Google Chrome, Firefox, Safari if you have a Mac, and I can open up the file in there. I'm going to be using Chrome, which is the most common browser that most people use. And think about what a web browser actually is.

A lot of people who are not web developers just kind of think of it as the internet, but really the internet is many connected computers, and the web browsers are HTML, and CSS, and JavaScript rendering programs that will download files from those web servers, which are just computers on the internet containing some files. And it downloads those files, those HTML, CSS, JavaScript files, images, those sort of things. It downloads them, and it renders the code.

We don't see the code, we see the result of the code, and it shows us a webpage that's rendered. So kind of like you can be in Microsoft Word and open and view Word files locally on your computer, you could do the same thing with Google Chrome. Of course, normally you would be browsing web pages that other people create as a normal person browsing the web, but as a Web Developer we're going to create those files locally on our machine, create them, make sure they're good, and then eventually upload them to a web server so we can share them with everybody else.

So for right now, we just have a webpage that's available on our computer. And just like you would go to like file open in Microsoft Word, you can do that the same thing in Chrome. On the Mac, I actually have a file menu, and I can say open file.

On Windows, it would be over in the menu over on the right. But while you can do that, actually, and just browse your normal computer, I think the easiest way is to drag and drop the file onto the browser. So in the desktop here, where I have my class files here, and I've got this news website, and this Microsoft page, the one that I was just viewing in Visual Studio Code, I could right click on this.

And if you don't have a right click, if you're on a Mac, you could do a two-finger click on your trackpad or a control click. If you want to do a control click, that also is the equivalent of a right click. And I can open up in a browser such as Safari or Google Chrome, and that will open it up in my web browser.

That's one way to open that up. Or let me create a new tab here. The other thing is also drag and drop too.

If you're on your desktop here, which is the Windows Explorer on Windows, you could just take your file and just drag and drop it. And there you go. Now you're viewing that file.

Notice that it's not a dot com address. This is actually going with a file address into my computer where I have it stored. And then I'm seeing the result of this code.

And notice that it is completely unformatted. Everything's just really on one big long line that wraps. And so we've lost all the formatting that we have here.

So one thing to note is that formatting your code, putting spaces, indenting, that has no effect on the browser. What browsers do listen to are tags. So let's learn our first HTML tag.

Tags are enclosed in these less than, greater than brackets. And the first tag is of course the HTML tag. This is going to say that we're writing some HTML.

Now with tags, we are going to wrap it around the thing that we are describing as whatever this tag says it is. And this whole page is going to be HTML. So I need to wrap the whole page in the HTML tag, therefore saying this is all HTML.

The start tag and the ends tag, I'm going to copy and paste this down here. The start tag and the end tag basically look the same. The only difference is the end tag has a slash.

And so that slash says that that is the end of something. We have a start tag and an end tag, or also sometimes called opening and closing tag. And the idea is that everything inside of that tag is essentially marked up.

That's why this is HTML, a hypertext markup language. We're marking up or labeling everything in that tag and saying it is all HTML. And of course we're going to put some other HTML code in here of course.

So tags are always in these less than, greater than brackets. Most tags have a start and an ending tag. We'll talk about some later that don't, but the majority, a vast majority of them do.

And the ending has a slash. So that says we're ending the HTML. Now within an HTML webpage, there are two primary parts.

There's a head and a body. And kind of like a person, which do you think is on top? Yeah, if you guessed head, you are right. So I'm going to open up the head.

And notice as I start to type this. So I do the less than sign, start typing in head, and notice that Visual Studio Code offers some code hinting. Now if I don't accept that code hinting as I keep typing here, it will do certain things to help me out.

So it knows that if I'm going to open the head tag, it wants to close the head tag. And notice it did that for me automatically. Also as I type, if I start typing head, and I'm already there, and it's already on that, I can also hit TAB to accept that, and it will kind of finish that out.

So that's also something you could do. But as I'm typing this here, if I just delete all this, so I start typing head, when I close it, it automatically gives me the closing tag. So I kind of finished the opening tag, and it gave me the closing tag.

We're going to come back and put some head stuff in just a moment, but I'm also going to create the body. So the head is on top, and the body is down below. So I'm going to open up the body tag here.

Again, it gives me the closing tag. It doesn't know where to put it. That in this case is up to me.

I'm going to put that at the end of all of this content that's here. And I'm going to either indent this with tab, or shift tab to outdent. So I'm going to do shift tab to move that over.

So essentially what we have here is we have a head on top, and a body underneath that. The body should contain all of your content for your page, the stuff that's going to be visible in the browser. The head, well if you think about what goes on in other people's heads, you can't really see what goes on in other people's heads.

So that's kind of the same thing. For the most part, the head of the webpage is more the brains. It's where it thinks about things, but you don't normally see what goes on in the head.

There is one exception to that that we're going to get to very quickly here. But for right now, let's not worry about what's going to go in the head, and let's just focus on the body. And this is the stuff that we see in the page.

Now if I want to preview these updates, let's say I type in the word new, and if I just go back to my browser here, nothing has changed here in my browser. Even if I hit the reload button or refresh button, nothing has changed because I've not saved the document. It's indicated by the little dot that's up there.

That dot says you have not saved those changes. So I can go to file and save those changes. The little dot goes away, and we see the X, and that tells me that I have saved that document.

And when I go back to Chrome, now I can hit the refresh button, and now I get to see those updates. Okay, so anytime you make a change, you have to not only make the change, but you also have to save. So you do file, save, and then you go back to your browser, and you hit the reload button.

You can click the reload button, or you can hit Command-R for reload on the Mac, or Control-R for reload on Windows. We can also very quickly preview in the browser as well. Because earlier I had shown how to install the extension called OpenInBrowser, because we have that extension installed, we can preview this more easily by a couple different ways.

We could right-click or Control-click if you don't have a right-click, and you could say OpenInDefaultBrowser. And in this case, my default browser is Chrome, so it opens up in Chrome. This will always open up the latest version of that.

So anytime I want, I can say OpenInBrowser, and notice it'll just create a new tab. So the old tab behind that might be outdated, but the new tab will always be refreshed. So that's one way that I can do it, is to right-click or Control-click on the Mac, and OpenInDefaultBrowser.

But you'll also notice the keystroke, which is Option-B on the Mac, or ALT B on Windows, and that is B as in browser. So that's what I'm going to normally do, is Option-B for browser, preview that in the browser, and there we quickly get a preview in browser, and it does the refresh. So just make sure that you save before refreshing the browser.

All right, so we haven't really seen any difference here, but these are essential tags that we do have to add to every webpage. Every page needs those essential things. But let's do something that does make a difference here.

And in the body, this is where you put all your content, the visible stuff that you're going to see. And I'm going to wrap this text here in a P for paragraph. So I want to put any paragraphs in this particular tag.

This is the start of the paragraph. This is the end of the paragraph. So I'm going to cut that and paste it at the end to essentially marking up this text and saying that is a paragraph.

This starts the paragraph, and this ends the paragraph. I'm going to save, which I'm going to do by Command-S for save, or Control-S on Windows, but that's just like going into the menu and saying save. And if I Option-B or ALT B on Windows, I can preview that in a browser, and look, there is actually a difference in this.

Now I've got this on its own line. So paragraphs are on their own lines with space above and below to separate them from other paragraphs. So each paragraph of text, you will want to wrap with a paragraph tag.

So I can open the tag, type P, close the starting tag. So that's the full starting tag. It automatically adds the ending tag, which I need to either drag into the right place, which I can do by selecting it and dragging it, or I can cut and paste it as well.

Once again, I can save the file and ALT B or Option-B, Option-B on the Mac, ALT B on Windows. And once again, I have another paragraph. Now I've got two paragraphs.

Each paragraph has space above and below it. So I'm starting to separate those things compared to the beginning that I started with. Now it's starting to actually look like what I began with.

But you can see it's the codes that are actually telling the browser, oh, this is a paragraph. And paragraphs have space around them by default. Now, if there's anything visual that we want to change, like how much spacing there is between the paragraphs, or what if we didn't want spacing between the paragraphs, that we could all change with CSS or cascading style sheets.

We're going to get to that later. But for right now, don't worry about the default styling so much as we are labeling these as paragraphs so that the browser knows that this is kind of a different topic than this. And there's a difference, for example, between a paragraph and a topic, a heading for that.

So this is what this page is about. So that really needs to be a heading. If P is for paragraph, what do you think is for heading? If you guessed H, you would be correct.

Now, there's not just one kind of heading. We actually have multiple H tags, H1 through H6, as you can see here. These are different levels, and we only have one heading here.

We're going to use H1. Now, this is not a counting. H1 is a pecking order.

It's an importance. You only want to have one heading, one per page, because that is the main topic for the page. If you were to subdivide that into subtopics, maybe there were multiple topics here on the page.

Maybe some of these paragraphs were talking about a topic underneath this one. That would be a subtopic. That would be an H2, a second level.

I can have multiple heading twos throughout the page because there could be other topics all talking about this. So this is kind of the main topic. That's your H1.

Subtopics are beneath that. If I just create a new document here, we've got H1s. You've got one of those per page.

And then you can have as many different H2s kind of underneath that. Those are your subtopics. You can have as many of those as you want.

If you were further subdividing those, you'd have H3s in those. Each subtopic could have their own subtopics, if you will. Not that you have to, but you can.

So the idea is that these topics, these H3s, are referring to things kind of subdividing this subtopic. And so you can have as many of these as you want, except for heading ones. You should only have one heading one per page because each page should be about a single topic.

Otherwise, search engines can get confused as far as which topic is this page about. We want to have a specific topic for each page, and then we can subdivide that into subtopics if we need to. If those need to be subdivided into subtopics, they can be all the way down to H6.

Most of the time, I don't get all the way down to those later headings, but H1s, H2s, maybe H3s are quite common. But in this page, it's very simple. We just have one heading, so it's just a H1.

We're doing that to indicate the level of topics. So this is our main topic for the page. We're not doing it because it happens to be big and bold, although that does happen to be the default styling, but we always want to use markup not for how it looks, but for what it says about the content.

We are marking up things to say this is a heading, this is a paragraph. Yes, there is a default appearance, but we're not doing it to make it big and bold. We're doing it to say it's a heading.

The reason I emphasize that is because we always want to use the correct markup regardless of how it looks, because if we don't like how it looks, we could just use CSS later to redefine how headings look and how paragraphs look. We want to say what things are through the tags, because that's what they are. And yeah, there's a default appearance, but we can always change that later on.

So don't worry if there's a default appearance you don't like. Don't say, oh, I don't want this to be bold, so I'm not going to use a heading. No, it is a heading.

If you don't like the boldness or if you don't like the size, we can change that later. We'll just redefine what a heading one looks like. We are not stuck and limited to the default appearances.

So markup is always about describing what the content is, because we're saying this is a paragraph, this is a heading. So for here, this is another paragraph. So I'm going to wrap these in paragraph tags there.

Same thing here. And I can copy paste these, of course. There, start and end.

We're wrapping the start and end tags. Remember the end tag has a slash. We're wrapping that around something to say this is a paragraph.

I'm going to do a save. And once again, Option B on the Mac, ALT B on Windows. And close that one.

Now we're getting many paragraphs here. But what we don't have here is a nice list for these. So I want to make this a list, a bolded list in this case.

So this is going to require two tags. First of all, I want to say all of these things are going to be in a list. So for that, we have a UL, as in unordered list.

We'll take a look at an ordered list in just a moment. And we're going to wrap that around the things that are in the list. So this starts the list, and this ends the list.

In this case, it's an unordered list, meaning it's going to be bulleted. There's no specific order. It doesn't have to be a 1,2, 3, or an A, B, C kind of order.

It's just whatever order we put these things in. And it's going to be a bulleted list. Then the things that are inside of that list.

If I just save that and hit reload, notice that does indent it, kind of prepping it for the bulleted items in the list. But it doesn't know, is Windows Microsoft, is that a list item? Is Office a list item? Is Office Xbox an item? It doesn't know what's an item. Now we know what that is, but we have to wrap it and we have to tell it what is a list item through tags.

So LI is for list item. And I can wrap a list item tag around something that is a list item. And it could be, for example, like what if Microsoft was its own list item? I could say that's a list item.

Now I think it would be weird to put that on the same line, but HTML doesn't care about things being on one line or multiple lines. As far as the code is concerned, it knows that this is one list item because we've said this is the start and end of a list item. So it knows that's one.

And then if we did that here, we'd say that's the start and end of that list item. So no, that's two. HTML does not care about returns in the code.

Returns in the code, indenting the code. For example, like if I hit shift tab, this I think is confusing to see that these things are inside of this. I think it makes more sense to hit TAB to indent the list so I can see that these things are inside of this.

But all of this code formatting is just for us to more easily understand the code that we write as human beings. The computer does not care. Now I want to put this after here so that this is all one list item here.

And finally, I will copy. And you can also drag and drop if you prefer, instead of cutting and pasting. So I have three different list items, and I'm going to save that.

I could also just go back to the browser and hit reload. I don't have to hit option B to preview. Now we actually have a bulleted list, and we have three different items in that list.

The proper structure of a list is always lists containing list items. The only thing that you should be putting in the list are your list items. Don't put other things like paragraphs and headings and things in your list.

That is just the list is to contain list items. Now if I switch that to an ordered list, O-L as in ordered list, I'd want to switch the start and end tag so both are coordinated. And if I were to save that and come back and hit refresh in the browser, notice now there is an order to it.

It's a 1-2-3. Now if you don't like any of the default styling, if you wanted ABCs, or if I undo to put this back to an unordered list, which is actually what I want, and I come back in here and hit refresh. If you wanted different style bullets, all of those things are styling options.

Right now we're just focused on the HTML. We're focused on the markup of what it is. It is a list.

We've said it's a list. If we want to change the styling of it, that's going to be done with CSS later. So that's going to be coming.

Aside from this, which I think now our body is done for the moment, we'll come back and we'll do some more stuff of course. But let's do one other thing in the head. Normally you don't see what goes on in the head.

Normally it's hidden things. We'll see various uses for it later on. It's kind of the brain of the webpage.

But it is also at the top of the page, and the body is down below. So looking here in the web browser, this is the body. Everything that's here in the main part of the window.

But at the very top of the page there is a tab bar. And notice that it shows right now the name of the file. That's not a very good thing for people to see in their browser.

Also if somebody were to bookmark this, it would bookmark the file name. That's not a very good bookmark if somebody were to bookmark this. We want to put a better title up here.

And so since it's not in the body right here in the main part of the window, it is kind of at the top. That is the one thing that you see in the head. Normally you don't see what you put in the head.

Normally the code that you put there is kind of invisible. The webpage will think about it, kind of like a brain, but we don't see the result of it. The one exception to that is the title tag.

So I'm going to put in a title. And think of the title tag as kind of like your heading, most heading, if you will. It's kind of your label for the page.

And that's going to be visible up in your tab bar. So it could be something that's very similar to the heading one. Probably typically is because that is the topic for the page.

But you might also have something like this is for the onion, right? So maybe the website that you're on to also let people know. If people are in Google and they see this, they're going to see the title of the webpage in Google. We're going to see that in just a second.

I'm going to save this, come back to my browser and hit reload. And notice that now we see that title in that place. That title is useful not only for people to see, but also for people to bookmark.

If they bookmark the page, it's going to bookmark that. And it's also really important when people do a Google search. So let's say, for example, I go to my personal website, danrodney.com. Here I have a page about Mac keyboard shortcuts.

And the title of that page is Mac keyboard shortcuts, all Mac users should know. Now let's say somebody were to Google and they were Googling Mac keyboard shortcuts. Of course, Apple's number one and do pretty well here, but that's not the point here.

Look at what it says. Mac keyboard shortcuts, all Mac users should know. That's my title.

That's the title of my webpage. So most of the time, although they could change it, but most of the time, what you see here, that's the title of your webpage. So think of some text that's going to be attractive to somebody in Google when they search for it.

Use the same words that people are using. So notice when you Google Mac keyboard shortcuts, my title says Mac keyboard shortcuts. I'm using the same text.

It's what we call search engine optimization. There's lots of different tools that we use and approaches to try to optimize ourselves to rank highly on Google or any search engine. And one of them is simply matching the keywords or the words that people type into their search engine and match our title to that.

It doesn't guarantee you a high ranking, but the closer you match that is helpful. It's one of the many good signals to Google to say, please rank me highly when people search for that particular thing. So there's various uses for that.

And you just get one of those titles per page. And that should probably be very similar to your heading in many cases, but maybe adding like your webpage to that. And that is one of the rare things that you actually see in the head.

Normally we don't see what goes on in the head. Any content you want visible, you put into your body. All right.

So that is what you're going to do in your first exercise. So in your workbook, there's going to be exercise 1a, and it is a couple page website, a couple page exercise here. Just look for the exercise 1a.

If you're in the table of contents here, you can actually click on it to jump there, or you can just scroll through and find the first exercise. It's going to tell you all the things to do, launching your code editor, opening the folder, the file to open up. Oh, and by the way, I've already opened that folder before, but if you get a message just saying, should you trust the authors of the folder, that's just saying, hey, there's going to be some code here.

Do you want to trust the author of this? Just go ahead and say, yes, I trust the authors. And you're going to be writing the code yourself. So I hope you trust yourself as an author.

And it'll walk you through all the code to add. The code will be in bold that you're adding. And all the, if there's keyboard shortcuts or anything, it'll walk you through all of that and go through that exercise.

And after you're done, then continue back with the next video and we'll just trade back and forth. I'll demonstrate something. You'll do an exercise in the book.

Then you'll come back, watch the next video. So have fun doing exercise 1A and I will see you in the next video.