Hello, welcome to the setup and overview video for the HTML Crash Course. So what is HTML? Let's cover that first. So HTML is the language of the web. Simply put, if you've been on website, it will have used HTML as part of the website. There are several other languages that you might have used CSS for styling, JavaScript for scripting, back end code, as well as something like PHP, for example, but HTML and CSS.

They are the core fundamentals of the web. So if you're new to HTML, new to web development, you really want to start creating websites, whether that's dedicated websites, for the web, or something like a hybrid mobile application. This will serve you very, very well. With all of these videos, there will be source code, and the source code is available on our GitHub page. If you check in the description, you can get access to that. Free good stuff.

So HTML, what is stand for? You might be wondering, it stands for Hypertext Markup Language. Like I said, it is the language of the web. A few prerequisites before doing this World Series really and doing this video, you don't really need much knowledge beyond just basic computing knowledge. When I say computing, I don't mean computer science, really, I should have just said, just general computer usage knowledge. So how to navigate your computer, how to create files, so really basic knowledge, you don't need anything beyond that.

I'm doing this on a Mac. But the process is virtually the same. A windows Mac, Chromebook. So Linux in general, theoretically, you could do this series on a phone, because you can say fall over like Android, and then open it up in a web browser. But obviously, chances are you're going to be doing it on a computer. So the next thing that you want is some sort of text editor.

Remember, if you can go I've got TextEdit on Mac or Notepad, or WordPad, or something along those lines on Windows, though, those are texts, I mean, note taking applications, text editors. And they could and will work for web development development in general. They don't have features like syntax highlighting which highlight certain parts of your code based on the language that your application is set to. So it's just easier to program and also indentation and just other features that are suited to programming. It's like Word is better for word processing than Notepad or WordPad. That's the same principle for web or just code in editors.

I use sublime and bracket. Those are my favorite at the moment. sublime because very, very lightweight brackets because it's very low. Wait for it provides a lot of features as well. I'm just going to be using sublime for this video series just to keep it simple. Both of these are cross platform, so you can Google it.

And you'll be able to get a Mac link or Windows link. So check them out. So yeah, let's open up sublime. Any textbook that you have, and let's just save the file. So let's save it go to desktop, I'm going to save in a folder called HTML on Akali index. And you do dot html.

Doing dot html identifies the Add HTML file, because they add default extension HTML. You can name it index or home. And what that does is if you open this folder, it automatically look for an index or a home file. If you can't find it, then you'll give you an error or if you explicitly specify a file to open, then it will open that file. So generally speaking, index dot HTML is a form that you will have on your website. So save that.

And as you can see down here is changes to HTM out, because there's a bunch of languages supported. And now we've got HTML. So we can start coding this up. First thing we want to do is put the doctype. So you put less than exclamation mark, Doc, type, HTML. And this just state what HTML version you're using.

This is a simplified one for html5, your old HTML version by 4.01 x HTML there doctype used to be huge, Aki are all different show you how big some of the doctype used to be. Let's get actually get some of the really long one. So yeah, the the doctype used to be this long to specify what HTML version You're using. But luckily with html5, they've made it a lot simpler, which is fantastic, which is good for a Thurman when I was originally doing web development, I had to use these sort of doc types. Once you've done that, you want to create a HTML tag. That's what the all the code tags, anything inside angle brackets is a tag.

And any tag needs to be closed. So you do four slash HTML. That is how you close it, you start it by doing less than the name of the tagline greater than, and to close it, you do less than for slash, name of the tag great. And anything inside of it is a child of this parent tag. So within here, there's two main sections. There's the head and the body tag.

So let's do head and your recall is automatically filled. Yeah, that's another thing that something like sublime does your automatically fills that code so he helps development and the skill body. Save that. So in the head tag, you have stuff like meta tags, which is just information to describe your website. So for example, you could put who the author was, you could help SEO which is search engine optimization with key words and other meta tag as well data, you can have a title. So let's just put a title right now.

Title. And this is what appears in the tab section someone say, awesome website. So if I save this, go back to my web browser. This is the total right here. Let's just minimize that. And then below this, you can have stuff like you can include style sheets, CSS files, Script files as well JavaScript files, generally speaking, you're probably include JavaScript files at the end just before your closing body tag.

The reason for that is CSS you would include before because it's the visualization, the design of the website, you want that to appear first JavaScript files, they use not as important for the initial look and feel of the website. So you load them after. So the website just loads faster to do a comment, if you know where a commented comment is great. If you don't simply post a piece of text that is a run is great for describing parts of your code because as your code expand and become really, really big, it will when you create any theories Morpheus project, it can become difficult to read, especially if you're going back weeks or months later, and you're just like, what the hell is this? This is a great way of writing some basic descriptions which aren't run so far. Put sheet, link.

So this is where stylesheet link like CSS will go. We'll be covering that in a later video. This is java script, links. And in here, we can now just put some text. So it displays on. Hello, we'll say that.

And now to run this file, all you have to do is go to your file, double click it, you're opening your default web browser. And as you can see, it's now opened up is a no trick. If you're using probably any modern web browser, if you right click anywhere, go to inspect. You can see all the front end code which is stuff like HTML, CSS, JavaScript, and as you can see, we can see the comments but they don't actually appear on our website. We can see the Hello World text as well, we see the awesome website title. That's it for this simple setup an overview of HTML.

If you have any questions, feel free to post them on our education platform. So no learning.co.uk also, or recommend that you just have a look at this experiment with not much to experiment with change the title as a bit of text, have a look what comments can do try commenting out code, that's a very, very powerful feature for developing and I will see you in the next video and I hope you have a good day.