7.3 Learn the basics of HTML and CSS - Video Tutorials & Practice Problems

<v ->So in order to make our website look a little better,</v> we're going to have to learn about HTML and CSS. Okay, so what is HTML? Well, it stands for HyperText Markup Language. Basically, it describes the content and structure of a webpage. So it's a document format, and not actually a full programming language. You can't do things like loop or have conditionals. It just is saying, here's a document, and here's how you want to understand that document. So other document formats are like XLS for Excel files, Word documents, CSV, and this is just a different document type, and it's composed of different tags that have attributes, and those attributes have values and something called elements. So if you're looking for some resources about where to learn more, there's a LiveLessons training about HTML and CSS that you can look up. There's also W3C Schools, which is a great resource. The W3 is for www, or World Wide Web and they've got great tutorials on HTML, CSS, and JavaScript and some other programming languages. There are also tons of books and online resources. If you're looking for the latest features, pay attention to HTML5 and CSS3. These are kind of the most modern, up to date, recommended practices and new features as of the time of this video recording. Just as a quick overview, some of the main tags that you will care about in HTML are these ones. Html, head, and body will be in every HTML file, every website. And then you've got various headings from one to six, one being the most important, six being the least important. So if you have like an essay table of contents, you know? H1 will be like the title and H2 would be like the each section title and then it'll be nested under that. You've got paragraphs. You can put images in. A is for links. And then div and span are for formatting and just like breaking things up into groups of content. And then form and input are for allowing user to put in some data and then send it off somewhere. So let's go to W3C Schools. And it will bring us first to HTML. This is the language for building webpages. There are some examples here. You can click Try It Yourself and you've got code on the left and then when you run it you have what it looks like on the right. So, the basic format of HTML is it's got these like angled brackets and then for what's called the tag and then inside of it is the type of tag that it is. So it starts off with this doc type to say that the document type is HTML. Then you've got these HTML tags at the top and the bottom. You'll notice that the backslash is at the bottom and it means this is the start of my HTML tag and this is the end of it, so everything inside of here is nested within HTML. Now, each page, each HTML page or website will have a number of standard tags in it, so it should have Doctype at the top, html afterwards, and then within html you'll have head and body. So the head is where your metadata goes. Title is gonna be on the top here. You don't see it here on this page because this is an HTML page within a larger HTML page. But on this page if I had a title it would show up here instead of local host. And then body is where all the content of the page goes that we're going to see visually in the main view. So there's a few different types of texts that you can do inside. So H1 is a heading and it's the most important heading and then H2 would be like a subheading of that and you can see the default CSS makes the lower level headings smaller. And then p is a paragraph tag, so if I have multiple paragraphs. This is another paragraph. There will be a space in between to separate them. I can add a break here and this would be like a new line in the same paragraph. So inside some of these tags, we can have some text. So after the opening tag and before the closing tag, the stuff inside is what is going to be within that tag. So this is going to be actually displayed as text. Yeah, so those are some of the basics. So if we're looking more at HTML, we can go to learn HTML and... So there's some examples and references and the thing I'm looking for here is... Let's see what's in Basic. So there's headings, paragraphs. So here, these are links. So this is the a tag which stands for anchor. So links are useful for linking to another site or another part of your own site and here we're looking at a new kind of thing. Inside of the opening tag, so in between the angled brackets, there's going to be something called an attribute and a value, or a property and value. So this href maybe stands for hyperlink reference and its value is the location that you want to link to when this link is pressed. So I can run this as a new link and then if I click this it brings me to this URL. So we can test all of these things in Python. In Scratches, we can actually create a new file and we can put an HTML file in there. So test file and it'll give us some of this basic skeleton layout first, so that's great. I can say "My test file", press Enter, and then put some stuff in the body. So let's practice actually writing some HTML. So I can say h1 and this is gonna be called "The best website ever". And then afterwards I can put some content. So a paragraph, like "Have you ever seen a better website?" And Python will create the closing tag for you. You'll see... And then for a, for my anchor, let's see, is it in here? Yeah, here's an href option. There are lots of options that you can put inside of the tags but an anchor tag should have an href. And let's just say like, "xkcd.com" and then when I close it, let's see what happens when I just do this. So I can test it out in one of these browsers, so I'll click this and it will actually open up that test.html file in my browser and I can see what that HTML looks like. You can also open up... So if you know how to open a file in your browser, you can search for it and if you open up any HTML file it will display as HTML in your browser. It'll be all formatted and stuff. So if I change things, it'll show up here. I don't see that link and it's because I don't have anything inside of this tag. And so I can put that there and then if I refresh this page now I've got the link. And then now it's trying to go to xkcd.com. I need to actually put https or http in. And reload, click that link, and it goes here. Okay. So that's the basics of HTML. There are lots of different types of tags. But one thing you'll notice is that it doesn't look very good yet and that's why we have CSS. So we saw that the HTML we wrote didn't look very good and that's because it was using the default CSS that comes with the browser. So if you wanna change that... So CSS stands for Cascading StyleSheet and it describes how to visually display the HTML elements on the page. So they use selectors to target different HTML elements and then has an attribute to say, "This is the color attribute "and I wanna change it to this value." And you also wanna think about will your CSS change depending on what kind of view you're viewing the website on, so mobile, tablet, desktop. You probably wanna have different widths, different padding around the elements, maybe a different font size, and you can change all of that in CSS. So going back W3C Schools, we can learn about CSS and you can include some CSS in your HTML file by putting it inside of this style tag. So all of this is CSS inside of the style tag and here we can say, "Hey, select the body of the HTML", so that's this. And then change the background color to this value, light blue. We can also target the heading, h1 heading and give the font a different color and align it so it's in the center. And then for paragraph, we can change the font family so it's a new font and set the size. So I can change this, 26, run it, this is now bigger. I can change this to blue and I can change this to salmon. There are a lot more CSS properties. If I go to CSS Reference, there are a whole bunch of CSS properties here. Not every property is useful for every tag type. So, for example, font family is useful for setting text but if you've got an image then there's no text on that image, it's just an image. So here are some things that we can change. These are some common ones. The color of some text, the background color of an element, the font family, the alignment, and then also the width-height and margin and padding, that's like the space around elements. Those are a little bit more complicated but yeah, you can learn about these all in various classes and tutorials. And then for now let's look at adding some styling to our sample site. Let's put this inside of head. We'll add a style tag and inside of that we're gonna say, "Let's target body", that's like the whole page, and then we use these curly braces and close it and then inside of here we'll indent and say "background-color", with the American spelling, is black. And then put a colon at the end. So this is the attribute and then colon and then the value, whereas in HTML this is the attribute, equal sign, this is the value, and inside of quotes usually, double quotes. So let's run this. I'll save it, go back to this test file, and it's all black. We can't see the text. So let's change that text color. We can actually put it inside of body and say, "All of the text color inside of here "is going to be white now." Okay, so it affected both the h1 and the paragraph because they're both inside of body. It did not affect the link though because that is a more specific selector, so we have to do something else to change that. So that's all I'm gonna talk about for CSS right now. In the next part, we're gonna look at the CSS and HTML I've already written and incorporate it into our project.