writing HTML

HTML stands for hypertext

Markup language and it's basically just a language that we can use to create web pages

So if you've ever been on the internet almost every single page on the internet was written in this language called HTML

And in HTML you can define the series of HTML tags

Which will define the layout and the look and the feel of your website

So if you can learn what those HTML tags are and if you can learn where to put them and how to use them together

Then you can build your own website. It's actually a lot easier than people think to build a custom website

I mean so often people will run off to use like content management systems or they use programs to build websites for them

But sometimes it's fun to just go in and get your hands dirty and start building a website from scratch

And you're gonna learn how to do that in this course in this course

I'm gonna cover the basics of using HTML

So from the first lesson on to the last lesson

You're gonna be writing HTML you're gonna be learning new tags and you're gonna be learning new ways to manipulate a webpage to make it

Look and feel the way that you want it to hTML is an invaluable skill

I mean even just putting HTML experience on your resume

Could help you get a job one day or it could just be something cool that you could brag to your friends about as awesome

As it is

I think sometimes people can be a little bit

Intimidated to try and learn HTML because it seems like there's so much to learn and it seems so complicated

I'm here to tell you that it's actually really

Easy to learn and I'm gonna be here with you throughout the entire course walking you through all of the basics. Trust me

I've known HTML for a while so I know what's worth learning and what's not we're gonna cover everything that you need

We're going to talk about all the important things and by the end of this course, you're gonna have a true and full

Understanding of what hTML is how to use it and how to build your own website

In this tutorial I want to talk to you about choosing a text editor for

HTML now whenever you are writing HTML, you're actually writing it inside of what's called an HTML file

So this is a file just a lot like a text file but instead of a dot

Txt or a dot do CX extension. We have a dot HTML extension

so with HTML you're basically just writing these HTML files and then your web browser is able to take those files and

Display them as web pages and it's some of this really cool thing

but the first step in writing hTML is picking some program that you can use to write these HTML files and

There's a bunch of different options

when you're trying to choose an HTML text editor and I think a lot of times it can get a little bit confusing or maybe

even a little bit overwhelming just because there's so many options and so many people have different opinions on which is the best

Editor and you know, what's the best thing for beginners to do in this video?

I just want to give you an overview of like what are your options and then maybe give you some recommendations?

As far as like where to start so with HTML text editors, really all you need is just a simple text editor

so any text editor that you have which is capable of editing files and saving them in different formats is gonna work for you and

Generally when you're writing HTML, you don't want to use like a word processing program

There's a lot of word processors out there, you know Microsoft Word Google Docs LibreOffice

These are like these big word processing programs

and

This is generally not something that you want to use

so you don't want to be typing out your HTML inside of a you know, Microsoft Word, that's

Kind of an overkill when you're running HTML the simpler the better

So a lot of times for beginners people will recommend that you use the just very simple text editor that you have on your computer

On windows it's gonna be notepad on Mac

It's like TextEdit and these are just the bare-bones

Simple text editors and it's actually more than enough that you need to write

HTML and so like I said generally for beginners writing HTML in something simple like notepad or TextEdit

really forces you to focus on writing the HTML and you

to type out every single line and you have to really look to make sure that everything's formatted correctly and

Ultimately, it'll just help you to really grasp the fundamentals

But if you're somebody who doesn't want to use like notepad or TextEdit

You can actually use a specially designed

Program and there's a bunch of these programs out there which are specially designed to write HTML in some of the popular programs

There's one called atom sublime

Brackets txt regular webstorm. There's a bunch of these different programs that have been developed by different companies and

you can go online and do a bunch of research, but

Essentially what these are are programs that are especially designed to help you write your HTML

So they'll take the HTML and they might display it differently

They might give you the ability to use like add-ons or different features that will make writing HTML a little bit easier

But as a penalty for that

They're also a little bit more complicated to use and so like I said generally for beginners like the less

Complicated things are the better. So you may want to err more on the side of doing something simple

And then once you learn HTML move up to one of these other programs, I want to show you sort of the difference in what?

these might look like

So over here, I have TextEdit and this is just the default like text editor on Macs

So if I open this you'll see here I have this file and this is actually an HTML file

So inside of this file

I have written a bunch of HTML and this is like the simplest HTML document you're ever gonna see

But this is what writing HTML would look like in something like this

and so if I wanted to add some more HTML down here I could just type it out and

You know, it's very simple there's nothing to configure there's nothing to add on you just sort of write out your HTML

But something more complicated it would be a program like this

This is called Adam

and this is one of those text editors I was talking about and this makes it you know a little bit easier for you to

Write the HTML you can see it's formatted a little bit differently, right? So

This is the same code by the way. So over here, these little tags are color. This is colored up here

So there's different colors generally programs

Like this will allow you to choose different themes so I could you know

Make the whole look in the feel of this different. So there's a lot of really cool options and

Configuration options that you can use with a text editor like this

But we also need to understand is writing HTML and this is doing exactly the same thing as this doing functionally

These are the same thing. They're just you know, it's an environment for us to write HTML in so here's my recommendation to you

I would definitely recommend and a lot of people recommend this starting with a simple text editor like this. It doesn't have to be

TextEdit, but it can be something simple and the whole idea

Is that the simpler the better when you're first learning HTML?

You don't want to have to worry about you know, configuring different things or working with some heavy text editor

you know using something light and simple like

TextEdit is just gonna allow you to focus on the HTML and then once you have a grasp for writing HTML

And you really feel comfortable doing it. Then you can move up to a program like this now, obviously, that's just my recommendation

You don't have to listen to me. And if you do want to choose a program like this

Definitely do your research try out a couple different programs see which one fits for you

You're gonna hear a lot of people online saying like this text editor is the best that one's the best, you know

People always get into little fights about those things. But the best text editor is the one that is right for you

And so it's the one that you enjoy using the most

Don't listen so much to what other people are saying

the best way to pick is just to try a bunch of these different text editors and as you go through this course

Even you can try a bunch of different ones and see how you like using each one

but again for beginners

I would recommend starting simple hTML is a really simple language

And so the less you can bog it down with like all these

Plugins and add-ons and themes like the better it is because with web development and just programming in general

It's usually the simpler and the more straightforward something is the better it is

In this tutorial I want to talk to you about creating your first HTML file

So I'm going to show you how to create an HTML file

I'll show you how you can view that HTML file on your web browser and I'll show you how to set up your

HTML file with some default HTML code in order to make it work properly

So the first thing I'm going to do is create a folder for my project

so I'm gonna create a folder that I can put my HTML files in for my website over here in my

file explorer I'm just gonna make a new folder and

I'm just gonna call this

GA underscores site for draft Khadem e site and

then now what we can do is open up this folder inside of my text editor so I'm gonna come over here and I'll just

this project folder

And now inside of this folder I'm gonna create a new file so I'm gonna say new file and I'm just gonna call this

Index dot HTML

Now the reason I'm naming this file index dot HTML is because generally when you're creating your first web page

You want to name it index dot HTML

Index that HTML is a special file name that we can use and if a file is named index.html

And it's at the root directory of your folder. Then your web browser will think that that's the home page of your website

So if you're just creating one web page like this, it's a good idea for us to name it index dot HTML

But really you can name it whatever you want. I'm gonna name mine

index.html and

So now we have our HTML file open. So this is actually a

File now that we can use and view on our web browser

So if I just came over here and type hello world

I can actually take this file and I'm just gonna open it up inside of my web browser

So I'm gonna click open open with and then I'll open it with my web browser

So I'm going to open it with Google Chrome

And now what will happen and you'll see this file will open up and over here on the web browser

We have our text. So this is like the simplest

purest form of HTML which is just typing out some bare-bones text inside of an HTML file and

It'll display here on our screen. But if we want to have an HTML file that's like an official file and that's structured correctly

We're actually gonna have to add in some extra

Code in here so I'm gonna get rid of this and we're gonna create what's called an HTML tag

Now hTML is a language that's used to define

Layouts for web pages and we can define those layouts

Using things called tags so I can create a series of tags and those tags will basically tell my web browser

How I want my website to look and what content I want to have on my website. So

in order to kind of

Start creating our HTML file. We're gonna have to create a basic

Skeleton of HTML tags and these are just standard tags that every HTML file is gonna have and they're basically going to give our browser

Different information about what's in our file so up here

The first tag that I want to create is gonna be called

doctype and we're basically going to define what the document type of this file is gonna be and

We're gonna create an HTML file. So i'm gonna type an exclamation point

Do see typ e all caps just like that and then I want to say HTML

So this tag is basically telling my web browser

the type of this document is

HTML so, this is an HTML document and

Now down here. I can start creating what are called container tags. So this is a single tag

We only need one of these tags, but in HTML

There's a lot of tags which are called container tags and it basically means that there's two tags

So there's a starting tag and there's an ending tag and you can put other tags inside of them

So they act as containers for either content or other HTML tags

And the first one we're gonna create is just called the HTML tag, so I'm gonna make it less than sign

HTML and a greater than sign and now I can close off this tag

So this is the starting tag, and I want to create an ending tag

So I'm going to create that down here

and the way that you create an Tagg is you take the name of the starting tag and

You basically just put a forward slash before it and then you type out the name of the starting tag

So this is now a pair of tags and you can see the relationship right? So up here. We have the starting tag

So hTML is the name of this tag, you could say that this is an HTML tag and this is the ending tag

So it uses that same name, but it uses this forward slash

so that forward slash is used to denote that this is the ending tag and this HTML tag is

Gonna be necessary for any HTML files that you have. This is basically like the highest level tag in our website

It's like the overall container tag for our website. And so all of the