In this video, you'll learn how to create your first webpage. To do that, we're going to need to learn HTML code. HTML stands for Hypertext Markup Language.
Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.
Video Transcription
Let's learn how to create your first web page. To do that, we're going to need to learn HTML code. HTML stands for HyperText Markup Language. Now markup languages mean to markup or label something. If you think about going to a tag sale, for example, you don't know how much things cost unless there's a tag on it. Then you know the price. Well, the same thing applies to text in a text file. You don't know what it is unless there's a tag or a label there's markup that's going to describe that this is a heading and this is a list and this is a link that goes to another page.
So HTML is a tag-based language and we're going to learn some basic HTML tags to create a page. To write this code, we're going to need a code editor. There are a variety of different code editors out there. There is Sublime Text, which is my personal favorite, that's what I'm going to use today. You can get it from SublimeText.com. It's a free unlimited trial and if you like it, you can purchase it for a one-time fee.
The other code editors that are popular are Visual Studio Code, made by Microsoft, and Atom, made by Github. If I was going to switch to any of these, I'd probably switch to Visual Studio Code. All of these are available for both Mac and PC. So Visual Studio Code and Atom are both free. Sublime Text is the only one that you have to pay for, but it does have a free unlimited trial so you can try it for as long as you want. Every so many times you save, when you say save, it'll say, "Do you want to buy?" And if you're still in trial mode, you can just click cancel and everything's fully functional, works for as long as you want until you decide, "Yeah, I like this particular one and I'm going to buy it." Any of these will work and function, they are all good. None of them are bad. My personal favorite, though, is Sublime Text. I just keep coming back to it. There's things that I like about it.
But any of these will work, so none of them are bad choices. But I'm going to be using Sublime Text today, so I'm going to go ahead and launch Sublime Text here. When you first open up your code editor, if you're not already in a file, you might need to say new file and in here, then you're going to write your code. So it might be a little daunting to look at a blank screen and think, "What am I supposed to do?" It's kind of like opening up a blank word document and starting to write. You just need to start writing.
And so we're going to start writing code, in particular. How do we do the basics of this? Well, first of all, I'm going to save it as an HTML file. So I'm going to go into my class files here and actually I'm just going to save this to my desktop just as a test, and I'll say I'm going to call this test.html. So functionally speaking, these are labeled as dot HTML, that's the file extension. But they are just plain text files. Technically speaking, any app that can write plain text files, it can write an HTML file. Because functionally, that's all these files are. They're just plain text files. They just have a different file extension.
You could actually take a plain text file and just rename the file extension from txt to dot HTML, and if there's HTML in it, then it's an HTML file. So it's not like there's some special files, just a text file, just a plain text file. And that's all it really is. I'm just going to temporarily save it here on my desktop here, just to get started with our first document. All right, now in HTML we have tags. Tags are using less than and greater than brackets. Ignore the color coding there. It just doesn't like what I'm writing here because it wants me to write in an actual tag.
Here, we're in an HTML page. We need the HTML tag to say this is all HTML. Now, we have starting and ending tags in HTML. The start and the end tags are the same, except that the end tag has a slash. The slash denotes the end of something. This is the start of our HTML, and this is the end of our HTML. You'll actually notice that when I type in that slash, that the underline appears on those two tags, when my cursor is in it. That's actually showing the connection that, this is the start of an HTML document and this is the end of an HTML document. Inside, we're going to write all of our HTML. So we're kind of labeling all of this to say, "Hey, everything inside of this is HTML." So you wrap things around. You wrap tags around their content to label it, to mark it up, to say this is what this is. The stuff that's inside this tag is, in this case, HTML.
Now, an HTML page is broken up into two pieces. There's a head and a body, kind of like a person. Which do you think goes on top? If you'd answered head, you would be correct. Just like a human being, the head goes on top. So, we have the head and we're going to end the head. Now, if you were to copy and paste this and type in the slash, that would work. But that's actually kind of the tedious way to do this. There are easier ways. As I start to type this, there are code hints that will pop up. For right now, I'm just going to ignore those because I want to focus on what we're typing. But there will be times when code editors will automatically complete code for you, because they do understand code. They're kind of like a text editor that is smart and will help you write things. When I open the closing tag here, and I type slash, notice how it finishes out the body tag for me.
Now, this is where keeping your eyes on your screen while you're typing is really going to help, because if you're not paying attention to your screen, this is what you're going to get when you look up and you're going to be like, "Oh, yeah, that's not correct." So it definitely helps if you can be watching your screen so that you saw this helpful thing that it did for you, because when I type in the slash, they know that I'm trying to end the tag that I have opened and so they want to end that and save me some typing.
Now, within an HTML document, you can put in extra line spaces and spaces pretty much anywhere you want, and those for the most part are just ignored by the browser. So, if you want to put some spaces around things to help separate the head from the body, so you can see that both of those are sitting inside of the HTML, that is perfectly fine. Hitting return doesn't matter. You can also technically type this in all uppercase, although most people think that's kind of screaming your tags, so most people just type it in in lower case. But HTML does not care; they can be upper or lower case. It's just easier to type it into lowercase. It's one less key to hold; you don't have to hold the shift key while you're typing.
So, we have these two main sections. I'm going to start with the body, because this is where we see the content of the web page. Just like in a person, the body is what you see. What goes on inside the head, you don't really see, as much as we may wish to see inside of other people's heads and understand what they're thinking, we don't. We see their bodies. And so, inside the body tag is where we're going to put our content. This is a webpage, no lie. I just made a web page, a very simple web page, but I just made one. I'm going to go ahead and save that, and that saves that HTML document.
Now, I want to view this in a web browser. So, all a web browser is is an HTML rendering program for web pages. It will understand HTML, CSS, and JavaScript, which are the three languages we use to create web pages. Right now, we're learning HTML. And a web browser, such as Safari, or Chrome, or Firefox, these will render the code. They will interpret the code and do what the code tells the browser to do. They are not the internet by themselves; they are an HTML rendering program. And so, they need to access that page, whether it's over the internet and it transmits that page from somebody else's computer to your computer, or it can access a file that's actually on your computer directly.
How do I open up a file? Well, let me go to my desktop and I'll go to that test file. If I just double click it, I can't say what's going to happen on some computers. That might open up in your browser, on others it might open up in your code editor. I can't say for sure, but one thing you can do is you can right click, or on the Mac, you can control click, and you can say open with, and you can choose your browsers. So let me choose, for example, Google Chrome, because it is the most popular browser today. So that will open up in Chrome. And notice what you see, but more importantly, what you don't see. You don't see any of the codes. The codes are interpreted by the browser, and they are instructions that tell the browser what to do, and you see the resulting web page. Users don't want to see code; they want to see the result of that code. So, that code is behind the scenes working, and you're seeing the results of it.
The main part of the window here, this is where your content goes. That's the body of the page. Where does the head come in? Well, most of the things that go on in the head are things that the page thinks about, but most of them you don't see. There are some things that you do see. One in particular is the title for the page. So, I can add a title tag. I can start the title tag, and then I can end the title tag. Now, what would go in the title tag, and where does that go? Well, let me bounce back over to Chrome for a second. At the top of your window, you have the tab. Now, that tab right now has the file name, which is not a very good thing to see when people are looking at different pages in their browser. Also, if I were to bookmark this page, it would remember test.html, which is the file name. Nobody wants to remember a file name; they want to have a nice title. So, I'm going to remove that bookmark, because I don't want to have that bookmark there.
We want to give it a good title that's going to appear here in the tab bar above the body of the page. Kind of at the head or top of the page. All right, so this is a test page. So, I can put that title in here, and this is going to appear in the tab bar of the web browser. So, the title goes in the head of the page, and that is the title of the page, and this is what appears in the tab bar. So, now if I go back to my web browser and refresh this page, you can see the title of the page is now Test Page. And so, that's what the title tag is used for. And so, the title tag goes in the head.
This is a title, I'm going to save that change. Then I can go back to the browser and since I still have this page open, it doesn't know that the file has changed. I have to hit the reload or refresh button to do that, and then we'll go get the latest version of the page and then we can see the update. If I had closed the page, whenever I open it up, it's always opening up the latest version of the page. But if you leave it sitting there open, you will have to hit the reload button. To make that easier, you can hit Command R on the Mac or Control R on Windows as in Refresh or Reload.
Alright, so here we see the title. So that title is displayed for users to see. It's also bookmarked when someone bookmarks that web page. I can remove that bookmark if I don't want to keep that. It's also very important because when you go to Google, this is what people are going to see on Google. For example, let me go to my personal website here, danrodney.com. I have a page of Mac keyboard shortcuts here and if you look at the title, the title is “Mac Keyboard Shortcuts and Keystrokes”. So that's the title of that particular page.
So let's say you're on Google and you want to Google “Mac Keyboard Shortcuts”. So here we go, here it is listed and notice what it says — that is the title of my page. So you want to work in things that people will be searching for into your title and make a title that is attractive to people searching for some sort of search term. When they search for Mac keyboard shortcuts, that's the most important thing in your title. It is okay to have your website or your company name like in the title there. So, in here I put in “Dan Rodney” just so they know whether it's the Digital Trends website or the Dummies site. They kind of still know which site it's on, but the most important thing is not your company or not your brand — it's what people are searching for.
Users are searching for a specific term. Each page is about a different topic and so you want to make sure that you have some good search terms in the topic for that page in the title for that page. So this is kind of what it's like your ad banner in a way on Google — it's what people will see when they're searching, and you want to make that attractive and contain the words that people will be searching for.
So it's important for bookmarks, it's important for search engines especially, and it's also what people see in the different bars, different tabs, up here in your tab bar. All right, so let me go ahead and close that up. There — actually, I'm going to just close this page. Now that we've gotten started with this page, I want to go back and actually work with some real content. So I'm going to go ahead and close that and just throw that in the trash. I'm going to switch to a different little website here. I've got a website that I've started — this news website, and it's a little fake news site, kind of like the Onion, how they do these funny news stories. So we've got some funny fake news stories here that are meant to be humorous, like Microsoft patents ones and zeros and things like that. So just meant to be funny, humorous things, and I've got this Microsoft.html. Now that is just some plain text right now and essentially it could have been a plain text file that someone sent me that I just changed the file extension of to .html.
I'm going to open this up in Sublime Text which I could do by Control-clicking or right-clicking and choosing to open in Sublime Text, or I can go to Sublime Text here and I can say File > Open and go navigate to where that file is. That's the news website, Microsoft.html. So right now there's just text, nothing special in here — there is no actual code at all in this page. I want to open this up in a browser just to show you that just having a .html file with some text in it is actually enough to display something in your browser. I'm going to Control-click or right-click on this and open this up in Google Chrome. Now this does not look formatted like what we saw here in Sublime Text because I do have some returns and some spaces — we don't see those being carried through into the browser, and that's actually intentional. The browser ignores returns and tabs and spaces — more than just one space — like you can type in a bunch of spaces and it doesn't make any difference. If I save that, come back to my browser and hit Reload, you won't ever see more than one space like that, unless you do something special. But just regular spaces — they are all condensed down to just one, which is nice because then if editors are typing in double spaces (which they're not supposed to), if authors or editors are doing that, those are just ignored. So you don't even have to fix them. HTML just doesn't even allow them to to work, which is nice.
But we want to format this nicely and get it looking like some headings and some paragraphs. So for those, we need tags. Now we need the fundamental basic tags that we went over already — so I'm going to add the <html> tag to start that's going to wrap all of my stuff in my page. The <body> is all of this content right here, so up above it I'm going to put in the <head> tag. Now, if I choose this from this list of suggestions, I can use my arrow keys to go up or down to choose the one that I want. If I hit Return to accept that hint, it'll actually start and end the tag, which can save me some typing. In the beginning though, I'm going to focus on typing out the tags manually rather than using the hints. Later, as you get used to typing out the tags, it is perfectly fine to use those hints, but I think especially when you're first learning these tags, typing out the code is actually very useful to memorize the code.
You've got to get to the point where, if you're working with somebody else's code and you're looking at it, they might have made mistakes — maybe they made a typo or something — and you're looking for it. You need to be able to recognize whether the code is correct and not just only rely on code hinting and that's it. So typing out the code especially in the beginning actually ingrains it in your brain and helps you memorize it faster because you do need to get to the point where you know these codes and trust me with time you will get used to these. I know there's a bunch of codes as you're first getting started but the more you do it the more you practice with it you will get to the point where the things that you do regularly you will be able to write those just off the top of your head but it takes a little while to get to that point where you remember them all. So I'm going to open up the <body> tag. I'm going to start that before all the content and the <body> tag is going to wrap all of the content, so I'm going to put it around the content. So I'm going to end the <body> tag here. Everything inside the <body> tag is all of the content on the page. I will put in a title for the page. I'm going to start the <title> and end the <title>. This is something that I do a lot.
Just to make sure I don't forget to end a tag, I start it and I end it and then I fill out the stuff inside. If you're looking at some code and you think people are typing it linearly, from start to end of the line, that's not how I typically write code. I want to make sure I start and end the tag and don't forget to end it. So, I'll do the start and end and then fill out the stuff inside.
This is about funny news stories, and the story is Microsoft Patents Ones and Zeros. So, that will be the title for the page. Let's save that, come back to the browser and hit refresh. Now, I see that I have my title up there and I see my content here. Now, we can start to format the stuff that's on the page. Let's start with paragraphs. P is for paragraph, I can open up the paragraph tag to start it and then go to the end of the paragraph and end it. The end tag is the same as the beginning tag, but it's got the slash in it. So, all of these tags, the slash means the end of the tag. Everything in that tag is marked up to say this is a paragraph.
I'm going to save that, come back to my browser and hit refresh. Now, we see that the paragraph has some space above and below it. Cool, we can do some additional paragraphs. I can add another paragraph around this particular paragraph. Later, you can learn faster ways of doing this, like wrapping all the paragraphs, but for right now, we're focusing on just what these tags do, so we're not going to focus on fast ways to code.
Right now, we're just looking at the basics of this. If we have P is for paragraph, what do you think H is for? H would be for heading. If we just had a single heading, that's all it would be, but we have main headings which are like the main topics, and then we have subtopics within that. So, if you think about a document outline, you have your main topic and then break that down into subtopics, maybe those subtopics you break down into further sub-subtopics. So, we number headings anywhere from H1 through H6. H1 is your first level on your outline, it's your main topic for the page, so you will have one heading 1 for the page, and then everything else might be broken down into subtopics with H2s, and those sections could be broken down with H3s.
In this case, we only have one heading, so it's merely an H1, and there's no other headings on the page. I'm going to make sure that I wrap that tag around the text to say this is a heading. This is when the heading starts and this is when the heading ends. Anything inside this is a heading, so this is why we call it a markup language. We're marking up the content to say what it is. I'm going to save that, come back to my browser and hit refresh. There, we've got our heading. Now, yes, it's big and bold. Maybe you want it bigger or don't want it bold. All of those aesthetic choices can be changed using CSS (Cascading Style Sheets). For now, we're going to focus on HTML, which is marking up our content. We're not going to worry about CSS yet; we're just getting started with the basic page here and looking at some of the basic tags.
Now, there is a list of things down here. We have three items in our list and I'd like to mark it up as an actual list. So, for that, I'm going to use a list tag. Now, a list tag could be OL (ordered list) or UL (unordered list). UL would be for unordered list and OL would be for ordered list. We're going to wrap that list tag around the list items. Beyond just saying this is a list, we need to say how many things are in the list. So, I need to wrap list item tags around each of those list items. That's important because, while you might say it makes sense each line is a different list item, conceptually that makes sense, but HTML doesn't care about line breaks or spaces. Because, all this stuff could be on one line and it would still work. We, as human beings, have to tell it what to do. So, we have to wrap each list item in a tag. All right, so let's save that, come back, hit refresh. All right, so there we have a list. Now, this is an unordered list, which is a bulleted list. We can do an OL (ordered list). Save that. We have to change both the start and the end and now that is an ordered list. So, we have numbers.
In this case, I don't really care about numbering these things. They're just a list. So, they can be a bulleted list. So, I will undo that and go back to the unordered list. All right, so we've got our basic content in here, but there are some additional things we can do. For example, maybe we want to make something bold. Let's say Redmond, Washington. We want to bold that. That's kind of more important information.
It used to be that we just had the B (bold) tag, which was visual. But, what about people that are blind or vision impaired? We want to be accessible for everyone. So, a long time ago, they came up with more accessible tags, which are not just purely visual. They also work in spoken language, as well. So, let's say you have a screen reader that's reading you the web, because you're vision impaired or blind. Something like the strong tag, because you can read things strongly. The screen reader can read something differently. We can wrap the strong tag around the thing that, visually, we want to be bold, or in a screen reader, it could read that in a different way.
We can read it more strongly so there we get <strong> instead of <b> because it's more accessible and we want to make sure that we're accessible with our websites. We can also make things italic as well and for that let's say for example the "read more" - maybe I want that to be italic. These are two different paragraphs, so let me start this next paragraph here and then end that paragraph there. All right, so let's wrap an <em> for emphasis. Visually, it will be italic but a screen reader will be able to read that with a different emphasis than <strong> could be.
It used to be that there was an <i> for italic tag just like there was <b> for bold but we traded those in for the more accessible <strong> and <em> tags. So visually you will see <strong> is bold and <em> is italic but they also work with screen readers to make our content accessible for all people.
Finally, let's wrap up with just a couple last little things and then this basic page will be started and we'll have learned a couple basic HTML tags. Every page that's out there needs to have a document type to be rendered according to the latest version of HTML. It used to be that when they created new versions of HTML that we were putting numbering and things on them, and we'd have to say this is HTML3 or this is HTML4. When HTML5 came out, they said let's ditch the old numbering system and go for the living standard that's always changing and we'll just opt in to the latest version of HTML. This is going to be important to put into every page because before document types were invented when the web was first invented, they weren't thinking about version numbering and all this stuff so they didn't have a document type.
The first tag is <!DOCTYPE html> so you're just saying that the document type is just an HTML document and this presence says you're using the latest and greatest version of HTML - it's called the living standard. This needs to come first because the browser needs to know right away before it ever renders any HTML which version of HTML you're actually using.
Another thing that's also important to make sure that your page displays properly is to have a meta tag for making sure your special characters are encoded properly. For this HTML page as a whole, let's say it was written in English. On the starting tag, add a space and then add an attribute called lang with a value of "en". This is short for language. Tag name, space, attribute equals and then in quotes put your value. Don't do this in the ending tag, just the start tag.
You won't see much change in the page, but watch the space up top here; notice that it did change a little bit. From very old versions of HTML to newer ones, that's really the only change you'd see right now. But there are other things that you're opting into getting the latest features of, so it's always important to have that document type.Another thing that's also important to make sure that your page displays properly is to have a meta tag for making sure your special characters are encoded properly.
Before we do that, that's going to get into some attributes, so let's introduce the idea of an attribute.Attributes are like preferences for tags; you'll see more of these as you get into other HTML. You want to be able to specify the language of the page, so that screen readers, for example, could be able to pronounce things in the proper way, if hyphenation would be enabled on the page it would know how to hyphenate.For this HTML page as a whole, I want to say that this was written in English, so on the starting tag (you never do this on the ending tag) you put in a space and then you can add what's called an attribute, which is like a preference. In this case, we have the language attribute (lang is short for language) - there's a space between your tag name and your attribute. The attributes are always the name of the attribute equals and a value in quotes.
In this case, we're going to do "en" which is for English, but there are other things like "es" for español.If you had additional attributes, you'd put another space and have another attribute. Some tags require certain attributes, some are optional like in this case - we don't have to put a language, but it's useful to have there.
Let's do one more tag here and then wrap up this page. We're going to do the meta tag now. Meta tags are useful for multiple purposes. They can be used for a variety of things. Meta information is just information about a file. It's useful to tell the page some specific things like maybe some preferences or just give it more information so that browsers can know more about this page. It goes in the head because the page needs to know these things, but it's not content that people see directly on the page itself.
So, before I actually do anything with this particular meta tag, Chrome and Firefox display this page perfectly fine. I'm going to right-click on that and say open this in Firefox, because they have different defaults than the web used to have. But we've got some special characters in here like this apostrophe is actually a special apostrophe - it's the correct typographically correct apostrophe.
We need to say to make sure that this is encoded using Unicode - Unicode is Unicode for all special characters, and it works across all platforms. So, the tag is going to have the name of the attribute and a value in quotes. The name of the tag is separated from the attribute with a space. This is the same format. So, this is going to make sure that all of our special characters are displayed properly.
In the end, we have created a very simple web page getting you started using HTML. The basic idea here is that there are tags that need to be wrapped around things to markup them, and in some cases like the doctype and the meta tag, there is no ending tag - it's just a single solitary tag by itself. Most tags are going to have a start and an end and they're going to wrap around the content they need to mark up. So, these are the fundamental basic concepts that are going to be true of basically all HTML. All the additional tags and attributes are going to work the same syntax. This is the syntax of how you write HTML. So, really learning the rest of HTML is mostly about learning different tags and how those work.