Placeholder Image

字幕表 動画を再生する

  • Hey, welcome to Draft CAD me my name is Mike in this course, I'm gonna cover everything you need to know to get started

  • 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

  • HTML code and HTML tags are gonna go inside of here

  • So now there's two other sets of tags that I need to create

  • The first set is called the head tags, and the second is called the body tags

  • So in any HTML file, there's two basic sections

  • There's the head of the document and then there's the body of the document and the head of the document

  • Defines data about the document so we can define things like the title of the document we can give the document a description

  • We could define other attributes about the document like maybe an image that's associated to the document

  • We can also use the head to import any resources that we need into our HTML file

  • so you'll find out later that we can actually link this HTML file to other types of files and

  • Inside of the head we can do all of that. So the head is sort of like the settings of the HTML file

  • It's like the command center

  • It's sort of like metadata about the actual file and we can create the head by creating head tags

  • So it's gonna be a less than sign we're gonna type head and now we can close off this tag

  • just like that and

  • Now I'm going to create a body tag

  • So the body tag is where we're gonna put like the meat and the bones of the HTML page

  • So the body tag is where all of our HTML content is going to go

  • Generally, the body is gonna be a lot bigger than the head

  • The body is gonna be where you're actually putting all the content for your web page

  • So anything that's in the body for the most part is gonna show up or at least it's gonna get rendered by the browser

  • Now down here. I'm just gonna make these body tags. So I'm gonna say body and we'll make another closing tag

  • Body and so I'm defining all of these different tags

  • And when I open this file up inside of my web browser

  • The web browser is able to look through all of these tags and figure out

  • information about the page

  • so the web browser can actually like parse through all of these different tags and it can figure out how to

  • Display all of the information so you can define

  • information and you can use tags to

  • help define that information and layout that information differently and the web browser will be able to parse through all of that and basically

  • Decipher it and use it to build a website. So it's really cool

  • Now one thing I want to point out is the way that I'm formatting everything

  • so you'll notice here that I have these HTML tags and

  • Inside of these HTML tags. I have this head tag, and I have this body tag

  • So I want to point out the relationship between all of these tags

  • And I'm also going to introduce you guys to some terminology

  • The first thing you want to notice is that I'm indenting the head tag

  • And I'm indenting the body tag so you can see there's like a couple of spaces here

  • this is basically just a tab and

  • Generally when you're writing HTML

  • You want to indent all of your files? And so the rules for indenting are basically like we have this container, right?

  • So I have this HTML tag and this HTML tag and inside of here. We have the head in the body

  • So any tags that are inside other tags you want to indent and so it's just like this

  • Right this head tag is inside of this HTML tag, so I'm indenting it same thing with the body

  • I'm indenting it and that will basically

  • visually help you to decipher the relationships between the tags and we can actually define the

  • relationships with these tags and one of the most common ways to do that is with like

  • family terminology

  • So we would refer to this HTML tag up here as the parent of this head tag

  • And this