- Read Tutorial
- Watch Guide Video
Now, depending on your experience, you may already know what HTML is, and so this can be more of a review for you, but what it is is it stands for Hypertext Markup Language. Now, when you hear "language," you may think that it's a programming language, but it is not, and the reason for that is because it can't perform dynamic tasks.
HTML, by itself, is more like a document that can allow you to organize your code in a way that you can build applications with it.
Now if you're curious on the name, what does "Hypertext" mean? Well, in order to learn about that, we need to go back to the very beginning days of the Internet, so this is decades ago, and when the original developers were coming up with the Internet, they didn't have a way of connecting documents, and so if you were to think about a website, technically it is a series of documents that are connected.
So if you're on a home page, and you click on the "about us" link or the "contact us" link, what you're doing is you are being connected to a different document, and so some of the original inventors of the Internet, what they did is they created what are called hyperlinks.
And these hyperlinks would allow for connecting one document to another one and creating that association, and so that's where kind of the source of the name "Hypertext" came from.
So how does HTML actually work? Well, the browser is able to take a HTML document, and it's able to render that, so that it looks more like a web page, but in reality, the way that HTML actually is structured is it gives the ability for developers to set up tags on a page.
The browser then can render those tags, it picks up each one of those tags, and it knows how to process those. So with that in mind, let's take a high-level view, and let's go and see what HTML code actually looks like.
So, right here on the screen, I have the Daily Smarty website up, and what we're going to walk through right now, you could do with literally any website out there. We're not going to dive much into what the code means or really how it's structured because we have an entire course dedicated just to that.
What my goal is for this screen cast is to walk you through what the HTML code looks like because that's the goal of this entire video is to give you that overview. So in order to see that, you can open up a browser, and then there are a couple ways to see the HTML code.
You can right-click anywhere on the page and simply click on either "Inspect" or "View Page Source."
For the case of what we're going to be doing, either one of these will work. If I click "View Page Source," you'll see it brings up all of this crazy-looking code like that,
and if I click on "Inspect," just like this, then it actually pops open a window, or it may slide a window up, and it gives you the ability to simply inspect the code.
So this is, at the end of the day, what every website in the world has been built with. You can see that we have a HTML document, and at the very top, you can see it even says, "doctype," so this is where you define that this is a HTML document.
Now, the structure of HTML, or the way it looks, is it's made up of these little angle brackets, so you have your doctype, you have where all of your HTML code is going to go, and you may even have some elements like styles right here, and we're going to have a whole video that walks through what CSS looks like and then we'll have a course dedicated to CSS as well.
But for right now, I just want you to see what it looks like. Now, if I were to close this, and I'll open up again, let's see how we can tell the browser that we want this code right here,
this little sentence, to be a heading because, as you can see, we have all kinds of different styles here on the page. We have this heading, we have where it says how many people have viewed this particular post, we have paragraph tags, or we have these ... you have paragraphs right here, and then we actually have code.
So how can the browser know how to render that? Well, it's because we wrap it up in tags. So if I right-click on this heading here, and click on "Inspect," you can see that it takes me right to the spot of the HTML document where that code is placed.
So you can see that we have what is called a tag here, and all that says is that the HTML document is telling the browser to take all of the content in this tag, so where it starts here, where it says "h1," to where we have this "/h1." That is how the browser or the mobile browser or application ... that is how it knows where this tag starts and where it ends.
And so, you can see it says "How to Build an Anagram Function in JavaScript," and so we're going to get into how we can build our own headings, how we can add custom styles once we get into the course itself.
But, as you can see, what my goal was is to simply show you that this is a document. At the end of the day, every website in the world is made up of just a plain HTML document that allows you to structure your code in a unified way.
Now, let's switch over to a different website. So if I go to just Google.com, and if I do the same thing, click on, "Inspect," you'll see that we have the same type of code.
Now it's written differently obviously. There is a search engine, it has one type of look and feel, and the other application is a blogging application, so it's going to have a different structure, but at the end of the day, you can see it says "doctype html" here at the top, and then it has all of these other tags underneath it, and this is how you can organize your code on the page.
So, now that you have a good idea for what HTML looks like, in the next guide, we're going to walk through CSS.