Web 101:: HTML for the New to Code

1. Web 101 // Introduction: Welcome to Web one, a one in this class, you're going to be learning the basics of code. What is it? How does it function And what can you do to make a Web page work, whether you have zero experience or if you've been in the print field and we're wondering what exactly the Web departments doing over there? This is the class for you. My name is Cookie. I'm an artist, designer and educator, and I love helping people find their way. Whether it be through the early stages of the design process or in the more advanced steps this class, we're going to strip it down to the basics we're gonna learn about code on. We're going to make a Web page that explores the basic elements to all Web design. I hope you enjoy this class, and I can't wait to see your project. Let's get started 2. Web 101 // Terminology: welcome to the HTML class and this class you're gonna learn the basics of how to get started into coding. So where do we start? Well, what exactly is HTML? It's hyper text markup language. That's the way computers talk to each other. For this. We need to learn the basic terminology in order to get everything started. The first part is to just see how everything works together. The tag is our first step. Think of this is a sort of Adam. This is the command that tells the page exactly what it needs to do. It's the basics. That's the building block. These are going to be enclosed in brackets on on your keyboard. They look like this for your side. You're gonna need openings and closings. You need an opening tag engineered. The closing tag. Think of this is a sort of sentence. You need the capitalization at the front and you need the period at the ends that you know where the sentence starts and where that sentence ends. Your tags are going to be that marker. Next we have our elements. This is a start tag and it has an end tag. It is also anything that's written in between those tags. Think of this is the sort of container whatever you're building on your page is going to be visible when it's within the section. This is the element content that's in the highlight right there. So whatever you have in between the start and end tags, this is what the viewers are actually going to see. It is known as the market code attributes over things start getting a little bit more fun and exciting and that beautifying stage this is going to extend the content of your page, and it's going to give you the functionality of your tags. So think of links, photos, images, backgrounds, colors, etcetera, protocol. This is a little bit of the science. He saw you things, so we're not gonna get too bogged down with this, that these air the ways that computers actually speak to each other. So how do you get your in vote to the viewers? These require specific rules, and they are connected to whatever type that you're going to be using to the FTP ease the printers, I P's and the one that we're going to use the http. So guess what that last letter stands for You guessed it protocol so that you can see how this works. The first part is that protocol that we were just talking about from there we have that W w w that we're used to. This is known as the sub domain. This is also the Web server name. Next is the fun part. This is the one that we probably recognize first and foremost. And that's our domain name your domain names. You can actually register through various sites like Go Daddy and Hover. And this is the you that people were recognized. So if you're building a brand, you're probably going to be spending a lot of time thinking about the domain. And how can you make a domain that's easy for people to remember? And now, of course, something that's actually available The next part is actually your folder name. So our first step, whenever we start our project, we're going to create a folder, and I'm going to call mine, you know, index or Web page, or what have you? Whatever you call that, it's going to show up there, and this last portion is just what your Web page was actually called what was its file name . It's gonna show up at this portion of your address. All right, Now, let's start getting into a little bit more of the details. Now that we know some of the basics of how this functions, let's get into some of the Cody bits so that we can tell our Web pages what to do. 3. Web 101 // The Code: So now let's get started. The actual coding part this part is the sort of meat and potatoes of your Web page, and this is what's going to make everything tech. First things first. You guessed that the HTML tag this one is going to start your page and this one is going to end your page. Uh, we were referring earlier to It is a container. So think of this is the giant container. This is the thing that's holding everything together. Your Web page needs to know once going through the system that this is where it starts. Then this is where it ends and use that with your HTML. Webpages are divided into two sections. The first section that you're going to be dealing with us, This one, the header. The header gives you all the information that's going on in your documents. So what's what's the page? It's describing the language, the characters that you're going to use, how it's going, Teoh be displayed whenever the viewer sees it, and the other portion is going to be the body itself, which we're going to get. Teoh, your webpage is going to need a descriptor for the viewers to know where they're at. See, you have to put a title. The title for your page shows up on the top of your browser's. All right, the body. So our header is going to contain the, uh, sort of invisibles so the computers know how to read it. The body is what we're actually going to see as viewers. This is all the content. This is the links the text tables, images, lists, you name it. It's going to be in here, and this is what's visible. So speaking of what's visible is this is what you can put just as a starter within your body. First things first, you're probably going to want a paragraph of some sort. You're also going to notice for all of these that has the opening and the closing tags. Anytime you type, you know the opening, you have to make sure that closing tag is in there somewhere, so that it knows where to start and finish that command so far. Paragraph. We put it literally, the beginning of every paragraph in the end of the paragraph on, then repeat it for the next paragraph, which you'll see in our example coming up, but make sure you always open and close your paragraphs. If you're coming into coding from a print background, you're already very much aware of hierarchy. So think of all of our headings as hierarchy, um, one being the most important to being, you know, the next important. So on and so forth for our examples were going to be using six different heading types H one, h two, h three, h four, h five and H six and six being the smallest and one being the largest. When we get Teoh our class project, I want you to experiment with each of these. He's just help flow the content through the page for the viewer, just like hierarchy and your advertisements. As speaking of advertisements and also your layouts, chances are you've had to do a pull quote or that block quote to give emphasis to various section of paragraph, Uh, for our case, we call those block quotes and it will jump, um, the end it in for whatever section it is that you're using for your block quotes continuing on our text styling. If you need to build something we're now using strong. So it's gonna jump out attention on the page. Once upon time, we just use the B for bold. But with the new HTML five, it's more standard to use strong for bold. So if you need to bolt something, use the strong command and this is functions the same as a tallix. And again, once upon a time, it was I t for a talic. But with HTML five, it has switched to being used as emphasis. So if you need to italicize something, you're going to be putting emphasis on it. The last two that we're going to cover is our types of lists. We actually have two times of lists. We have the ordered list and the A Nordeste. So the ordered list, whatever you put within that command, is going to give you number one, 234 etcetera. And now, however many you add, it's going to automatically put that next number on there, and the one ordered list functions as bullet points. So if you need to put bullet lists within your sight, you are going to be using the UN ordered lists. So obviously there are so many more codes out there, but these are the good ones to get comfortable with early on. Uh, we usually say, you know, it's like wanting to run before you walk, But in this case with Web design, we're so used to seeing Web design that we basically want to run a marathon before we even know how to crawl. So let's crawl before we marathon and just focus on these fundamental codes so that you can get comfortable with them and play around with them and become familiar with them. And then you can start adding more to the mix. So let's take all of this and start putting it all together. 4. Web 101 // File Setup: All right, let's go ahead and get started. First things first. I'm using a Mac. So if you're in a PC, you should know the drill. By now. Whenever I say command, know that it's control with a Mac, we're going to be using text at it. And if you're on a PC, you're going to be using note pad plus plus, which I will have a link for that. Ah, and our course notes if you don't have that on your PC already, but regardless, if you're on a Mac or PC, the first step you're going to do is make a new folder. I'm going to call mine index just Rick Scott website. You could put your name on it, you know, whatever you want to call it, go ahead and call it that. And I'm just going to keep it all nice and neat. And over there, off to the side. Alright. If you're on a PC, you just go ahead and open your note pad plus plus. And when you make a new document, make sure it's an HTML one, and you should be good to go. If you're on a Mac, you might have one extra step when it comes to text at it, I'm going to create a new document. No, like to work a little bit bigger than their default. So I'm going to resize that, and you have to go up to your text Edit and preferences. Um, when you do this, you have to click on the note Earth. Sorry. Open and save to the right of new document. And what you need to make sure is select it is display HTML files as HTML code instead of formatted text, so make sure this box is clicked. If it is, you're good to go. If it's not, make sure it is so that you can function. All right, I'm gonna go ahead and save, and I'm going to call this index. Also, hundreds going to keep it nice and neat organized. And, uh, if you're on this, this is where your file formats are. It's for mine. Defaulted to rich tax. Just click down that and change it to html and hit. Save. Make sure you put it in the proper folder and then hit Save. All right. So you may also have one extra step with a max. You can see one reason why code people are typically on PCs because you just get up and go . Right now, your code isn't showing up, so I'm going to close that. Go ahead and reopen and closes. Just command. W um I'm gonna go ahead and I'm gonna click and drag it on to my text at it. So now when I do that, we can actually see our code bits. This is what we want to see. So if you didn't have Vicks this extra little bit to it, you're going to want to pause, close it and reopen it. That way, you can see you know, the actual code part. You could leave this. Certainly, I'm not going to say no. Um, sometimes it just puts extra little bits that you really don't quite need. Ah, in the early stages. You know, if you're just playing around learning it, that's fine. You can just go ahead and edit your title, and you can just start plunking away right away in that body. Um, it's going to be completely up to you, but for our sake, I'm going to select Oh, we're going to hit delete because we're going to actually do all of that part ourselves. 5. Web 101 // Code Time: florets. Now we're ready, Toe, actually start putting some code on her page at long last. All right, So, like I said, if you wanted no problemo. You can leave their bits and bobs on there and just start plunking around with the elements that we were, you know, going to play around with for our class project. But let's just start from scratch. Step one. We need to tell it that this is a document type said the doc type. It's actually HTML, which we pretty much assumed at this stage. We need that HTML tag that we're talking about that starts, you have to start it and then you have to end with this. We're going to add one extra little part to this because we want the language to be English . If you are not an English speaker, um, I'll put a list for the different codes for languages, and you can put any language code here for our demos sake. And since I speak English, I'm just going to stick with English as my language type. All right, so stop one. We created that HTML. You have two options. You can keep going down the line and putting the elements in. But I like to make sure everything's closed off the second I do it. So when I do that, I just add a couple extra returns. I'm going, Teoh, close that tag. So now I don't have to worry about it. So we start as we end, and I'm just gonna go back up so and go on to that next part. All right, so the HTML is that giant container. Now we need to tell it one of the two parts our first part was our header on the second part was our body. Since the header comes first, we're going to start with the header. All right, So I put in that tag and that is just the bracket head. And now we need to give it a title. It could be your name. It could be a cat dog. Ferrets name. It could be anything that you want it, Teoh. I'm going to be super generic and just say my first website and I'm really excited. Groups site side open exclamations on it. Oh, my goodness. That is an exciting Web page. And now, of course, since I started the title, I need to end that title, so I'm gonna close it off. All right? Our title is going to be on there. We need to give it a character set. And that code info is metta care. Set equals T groups. Are you TF eight bracket groups. There we go. So this is just giving the character set so it knows, you know, special characters, etcetera. Where to pull it from. This is part of that HTML five thing. All right, so what? We need to dio you guessed it. I'm just gonna scroll back up. We have our html end html, our header. Um, that part we haven't closed at title ended our title. All right, so what we need to do is go ahead and end the header. All right? Our headers finished. Now we could move on to the fun part. The body part. This is the part that everyone sees. I'm just gonna put a little bit. Just quit one extra space in there just so that you can visually see the sections that we're working on this spaces, since they're not coded into it will not show up on the website. So that's just me from my own structure. We need a body. And I'm going to just go ahead and end that body just like we did with the, um html below. That way. I know body an end body are the same. All right, so now let's start having ah, little bit of fun with this. Ah, the first thing that we're gonna want to do is put a paragraph. So our paragraph info or tags was the P and the NP. I'm gonna go into Lauren Ipsen and just grab some ipsum. Um, we could use cupcake, ipsum, zombie, ipsum. Whatever you want. There are all sorts of Lawrence Gypsum. Ah, let's just get for now, one paragraph and I'm just going to Oops. Copy and paste, Apple C, Apple V. All right, so we started the paragraph. Now we need to end that paragraph, and I'm gonna go ahead and save slide that to the side and going into my index, I'm gonna double click on this so we can actually get a live preview of what we're doing to our website. All right, there's our title. My first website, my first website. So exciting. And there's that Lorne Epsom that we just put in if we wanted to put a second. Lauren, it's on. You guessed it New paragraph. I'm just going to pace the same one, save it and then go over into your browser and then you're going to be able to see that. So when I work, how do you like to work with split windows? So if I'm using note, pad or text at it, I'll usually keep that up. If you're working with Dreamweaver, which is something to grow into, you will have the split view anyway. And then you also have the life preview. Those two systems are really nice to work with. For now, I'm not worried about Dreamweaver for this demo. If you are comfortable with Dreamweaver, though, just go ahead and be in the code. If you're comfortable with Dreamweaver, you're probably not watching this class anyway. All right, so one of the things that we talked about was putting in a little bit of our ah, special characters or are rather making our pages a little bit fancier. Eso maybe for the next one. You know, you put in the third paragraph, I knew that middle one's gonna be a block quote, but let's just get 1/3 1 in. Oops. Make sure you don't capitalize, Spaces forgetting to end tag. Um, capitalisation. These things will throw off your coat. And if it isn't working, check spelling and capitalization and space issues. Any of those can throw the whole page off. All right, so there we have three paragraphs, and I'm gonna add a block quote to that middle one. If you want, you can get extra spaces in between, so it just makes a little bit easier. And I'd like to Nestea So whatever was closest to the Texas how I ended also, So block was right beside it. Block quote is going to go first, and then I'm gonna end my paragraph and then refresh. And you can see how that in dense it just a little bit makes it a little bit more fancy. Uh, maybe for this second paragraph, that first little part needs to be bold. So that was our strong. And let's just take the first sentence and we're going to make that first sentence nice and strong. Save, refresh. And you can see the text got a little bit more bold. Uh, maybe for that? I don't know. Last line. We want to give it a little bit of of metallic, so we need to give it emphasis. And then we need to end that emphasis. So for manning or text, um, Disc using these two made it a lot easier to read. Um, for our in class project, we're also going to do headers. So I'm just going Teoh Just a return on this Where it was h one through h six a headline one through headlines six I'll just say headline one so that you can see the size and I'm gonna save it so you can see it step by step. So headline one is our largest. And then we just work down from there. Oops, each to nine to H three each four. Make sure you don't Typo. It's good to see people working, um, in real time so that you can see the back spaces, etcetera. So you sort of know what to look for when not if. When a problem arises, it's that run before you walk thing. There will be problems no matter how comfortable you are with the code and how long you've coded. Sometimes just a little type of will for everything off. So hell I went 23456 Save and refresh that. What? You can see the hierarchy. So for those of you who are in more of the print design disciplines were used to seeing that. So think of heaven want is like, well, your main headline headline to would be You know, the sub header Byline So on and so forth And then, of course, for um, if you know she's in body copy Just use your paragraph. But this helps flow the reader through. We also talked about lists for this one. So let's go ahead and make new paragraph. And for this paragraph, I'm going Teoh my favorite artists. So for this, we're going to want to build, are on ordered list and then we're gonna go ahead and make it an ordered list. Actually, I've changed my mind, just said that the headlines make a little bit more sense. Let's go ahead and make that in a Chuan is we have a little bit of hierarchal flow to it. So my favorite artist and this is going to be an on ordered list because I just want the bullet points and I don't, you know, wanna have to have like, Oh, this is my number one favorite artist. These air. Just the list of artists that I like so are a Norden List would need to start, and it would need to end And then we need the content in the middle of it. We need a new line and I like Van Gogh. Who doesn't? We need another line. I'm just gonna make three or four. Um, who else do I like? Let's just sort of stick the area. Monet like Degas and Cassatt save it. All right, let's just triple check out of paranoia. It is going to make an extra return so I can see everything. These are my favorite artists. And remember that extra space will not show up over here. It's just for me to keep track of things on line. One closed on ordered list. Closed it lines each one's closed. I'm feeling happy. Save it again and go ahead and hit. Refresh. And there it is. Headline one. My favorite artists are bullet points and the list of our artists that I liked you could add to infinity. Um That's the joy of our own ordered lists. The other one is are ordered lists. Let's make that H one also, and I'm gonna call this grocery list because who doesn't make a Web page for the grocery list? All right, so this one is an ordered list. Let's go ahead and end it. It's exact same steps in the middle. I'm gonna tell it. Eggs groups don't close it first milk. We're gonna be super generic with us. A bitching Guess the next one. You guessed it bread. So eggs, milk, bread and let's just make sure everything's there. Each one closed it. Ordered list ordered list line. Each one's opened and closed. Save, refresh. And there we go. 12 and three. All right, so here's where everything starts coming together. You can see our headlines, we have our content and we're starting to get a little structure and flow through this. We can have our emphasis and we can have our bolds 6. Web 101 // The Project: All right. So for this project, make at least two. I'd say different headline types and just play around with those and see what they dio. Try a couple paragraphs toss in that block. Quote do an ordered list doing on ordered list. See what the bolds and italics dio. I'm going Teoh ad a list of other things that you can do If you want to make it a little bit more fancy, I'll say. But for this plane is the way that we're going with it. So the content is completely up to you. It could be a journal. It could be a day in the life of it. Could be a documentation of some sort. Or you could just use the Lauren Ipsen that I do. The content is completely up to you. Here's what I'm looking for. Just relax and have fun and see what the code does. Change it, mess it up. See what happens if you don't close it. Or what happens if you miss one of those end lines or you didn't finish the an ordered list and close that off. Um, try it, see what happens, and you know the only way you can learn is by doing. And speaking of closing off, it looks like I did do one thing wrong. I have to put my own ordered list up there so that we don't have an issue later down the line. So this is how you learn. You just try. You fail experiment, and then you learn to catch the mistakes. So for your project, just have fun, See, with everything does save it and then upload. Um, you could do a screenshot. If you're just using the type like this, you can put your index html up here for us all to see. Um, if you want to take a screenshot on a Mac, it is shift apple four and it creates a, um, cross hair and you just click and drag over it and it's going to put a snapshot or a screenshot on your desktop, you to just upload that way, If you want to show everyone your code, you can just select all and copy it and paste it into ah, your class project as well. I can't wait to see what you come up with, and I hope you have a lot of fun in these early stages of code. Remember these air, the walking stages? And once you get really comfortable that we're going to get a little bit more fancy with that. Thanks so much for taking this class. I can't wait to see what you come up with for your project. Be sure to share it below, so we can all enjoy it and have a great day.