HTML Crash Course For Absolute Beginners

Sharing buttons:


hey guys welcome to the first video of

my web development for absolute

beginners series this entire series is

meant for anyone wanting to learn basic

web design and web development and

there's absolutely no prerequisites I'm

teaching this course as if I'm talking

to someone that's never written a line

of HTML before so don't worry about

having any kind of prior web development

knowledge this will be an ongoing course

or ongoing series and each video will

focus on a different topic so in this

particular video we're going to be

focusing on HTML only then we'll move on

to CSS and possibly some JavaScript I

also want to show you how to upload a

website to the Internet alright so just

a couple things before we begin so I

want to stress that this this course and

this this video the series is for

beginners okay if you've been a

subscriber for a while I can almost

guarantee that you're going to know

everything in this video and in this

year well maybe not in the series but in

this video at least you know if you've

been building websites and you're going

to know the basics I'm doing a series

like this because I don't really feel

like I have a place to start on my

channel for absolute beginners people

that that really don't know anything

about web development so hopefully my my

advanced programmers that are that have

subscribed to me can understand that and

just know that you know this isn't going

to be an ongoing thing for you know for

the next 20 videos it's just this series

all right also there's going to be

little to no CSS in this particular

video that's going to be covered most

likely in the next video and just to

warn you HTML without CSS is very very

ugly we're not focusing on the style at

all here we're focusing on HTML syntax

all right so we will be sticking to

html5 I don't want to confuse anybody by

you know throwing in standards from HTML

4 or XHTML or any other derivative

anything like that so we're going to

stick to HTML 5 only so we will be

working with examples we'll be building

a cheat sheet but we're also going to

take a look at some slides along the way

all right now you're not going to learn

HTML or anything for that matter in five

or 10 minutes I've actually seen videos

called you know learn HTML in five

minutes and

and that's just absolute if

you're going to be a web developer you

have to be patient and you have to you

have to really enjoy learning because

you're going to be learning even when

you land a good job you're going to be

learning every single day so try and be

patient try to follow along I know

people can get a little aggravated with

videos that are over like you know 25

minutes but you know if you if you're

that impatient where you can't watch an

hour-long course then you're probably in

the wrong profession and I don't mean to

sound harsh or anything but I don't want

to scare anybody down the wrong path and

I really do mean that wholeheartedly

alright so enough with the preference

let's go ahead and get started so what

is HTML it stands for hypertext markup

language and a lot of people just

starting out don't realize that HTML is

not a programming language at any level

it's a markup language for creating web

pages and documents ok HTML documents

one of the key elements of a programming

language is logic so you can have things

like conditionals where you can say if

this is true then do this HTML however

doesn't have any of that hTML is used to

just display in format elements of a web

page that may be a text paragraph or a

heading a bullet list or an image or

many other things it's strictly

presentational just try to remember that

there's no logic there's no actual

programming so an example of a

programming language would be JavaScript

or PHP or c-sharp

these are intricate languages and

they're responsible for things like

connecting to a database you know for

like an online store or something like

that user login dynamic functionality

things like that

now with that said that doesn't make any

programming language more important than

HTML in fact if you're getting into web

development HTML in at least in my

opinion is much more important because

hTML is the building block of the web

every single site that you see outputs

HTML to the browser no matter what kind

of advanced programming it uses on the

back end all right you can build a

website using just HTML and CSS CSS of

course as a styling language and we'll

get into that in another video but you

can have just an HTML site without any

any JavaScript or any PHP or anything

like that it will be purely

presentational you can't have like an


store or anything with just HTML but you

can have a basic business website with

you know information about the company

and so on now it is hotter these days to

get a job with just HTML and CSS

knowledge but you can do it there are

still companies that are that are you

know purchasing websites that are

strictly presentational all right so I

don't want to spend too much time on

this stuff so let's move on to what we

actually need to get started so to get

started building websites you only

really need two things you need a

browser to view the HTML and you need a

text editor to write the HTML now don't

worry about what kind of computer you

have if you're on Windows Mac or Linux

it doesn't matter as long as you have

these two things everything that I'm

doing in this in a series and then this

video is completely cross-platform so

for a browser can be whatever you want

I'd highly suggest Google Chrome it's

the fastest and in my opinion it's the

best for any web developer but of course

you can use Firefox or Safari even edge

just please for god sakes don't use

internet explorer if you're using

something less than Windows 10 please

download a different browser all right

so you can also use any text editor you

want which one and which one is up to

you you could even use Windows notepad

but I wouldn't suggest it you want to

use something with line numbers and

syntax highlighting stuff like that I'm

going to be using an editor called

sublime text which is available for

Windows Mac and Linux so we feel free to

download it I'm going to show you where

and how to download it I'm using sublime

text because it's very simple it's very

light when I'm working with other

technologies and languages I usually use

something called Adam or Visual Studio

code but I think that those are overkill

for what we're doing here so before we

move on let's go ahead and install

sublime text so that we can start

writing HTML alright guys so you want to

go to www.hsn

if you want it if you want to use

something else that's fine now this

program is free to try if you want to

keep using it that's just buying a

license if you use it without a license

it doesn't have any limitations or

anything like that you're just going to

get a pop up every once in a while that

says you should probably buy a license

alright so let's go ahead and download

this I'm going to click the big download

button here alright so once that's done

we can go ahead and open it it's just

going to be a simple

Staller for windows and of course you

can grab this for mac or linux so let's

go through this default location is fine

I'm going to choose to add it to the

Explorer context menu what that will do

is it'll allow us to right-click on an

HTML file and say open it open with

sublime text so we definitely want that

checked and that we're just going to

install alright so it should be all set

let's click finish and now we should be

able to open it up I'm just going to

search for it down here my search bar if

it opens and let's just see right here

sublime text 3 ok there's also sublime

text 2 but 3 obviously is the newer

version alright so this is what a text

editor looks like I'm not going to go

through all the features I just want to

strictly focus on HTML syntax so now

that we have our editor installed we can

go ahead and we can start to create our

HTML file so one great thing about hTML

is we don't need any kind of special

server or hosting company to write and

test HTML you can simply create a file

right on your computer you can give it a

dot HTML extension and you can open it

up with your browser now when your site

is ready to deploy to the Internet you

will need to buy a domain name you'll

need a hosting package and then you'll

need to upload everything to your web

host ok and I'll get into that in a

later video but for now we can build our

site or build our cheat sheet locally

without that stuff so to create an HTML

file it has to have an HTML extension

you can call it whatever you want you

just have to end it with dot HTML this

will allow it to be displayed correctly

in a web browser now one thing to

remember that your home page should

always be called index.html if you go to

a domain like let's say W W something

calm and you upload a file called

index.html that's the file that's going

to show on that root domain ok if you

upload a file let's say about dot HTML

that's going to show when you go to

something calm slash about dot HTML so

the index file will always be the root

file of the home page unless of course

you're messing with server settings and

you change it but by default that's

that's the behavior it's going to look

at index.html

alright guys so we're going to go ahead

and create our first HTML file now I'm

going to put the

in a folder so I'm going to create a

folder I'm going to call this HTML cheat

sheet okay and then inside that folder

let's create a new file by going to new

text document and we're going to call

this index dot HTML okay we'll just say

yes we want to change the file extension

and notice that mine has a chrome icon

by default because Chrome is my default

browser and that's what opens up the

HTML file yours may be different now if

you if you're using Windows you may have

an issue where you don't see the dot

HTML okay if you're not seeing that what

you want to do is you want to go to view

options change folder and search options

all right you want to go to view and

then down here you want to uncheck hide

extensions for known file types okay you

want to make sure that's unchecked and

then click apply and then you're going

to see the extension and it may say

something like index.html dot txt just

make sure you get rid of the dot text

all right I'm sure most of you know that

but just in case there's people that

don't alright so what we want to do now

is we want to open this with sublime

text so we can actually just right click

and say open with sublime text let me

just bring it over it opened up on a

different screen and that's going to

open it up you can see up in the tab it

says index.html now another thing you

could have done is you could just go to

file open and you could find that on

your computer that HTML file and open it

alright so now that we have that open

what I'm going to do is just type in

hello world here just text no tags or

anything yet and you want to make sure

you save it so you can either go to file

save or you can just hit ctrl s which is

what I would suggest it's much quicker

and then it saves okay now what we want

to do is open it up so let's go ahead

and let's open it up with Chrome and

that's the default so all I have to do

is double click and then that's going to

open it up in the Chrome browser and you

can see it says hello world

all right so even if we put just text in

here with no HTML tags at all it's still

going to show the text in the browser

all right now what I'm going to do is

just snap this to the edge here and then

we're going to just going to open up

sublime text on this side and I'm going

to make sublime a little bit bigger than

the browser for now

just so we can see everything all the

code and I just want to talk a little

bit about HTML tags

so when HTML tag is the basic building

block of any webpage different tags

format the way that information and text

is displayed so element names are

surrounded in angle brackets are greater

than and less than symbols and tags

usually come in pairs one to start tag

ones an end tag we look over here we

have a start tag the end tag and then we

have content in between all right in

this example here we have about us as

the content of the text and it's

surrounded in h1 tags which stands for

heading 1 and I'm going to get into the

specific tags later on all right here's

another example with a paragraph tag and

we just have the text this is a

paragraph now notice with the BR tag

here there's no opening and close it's

just one tag this is called a self

closing tag and these are basically tags

that don't have any content within them

okay notice that the slash is actually

after the element ok so BR slash it's

after and this is kind this is an XHTML

style so we don't really need to do this

in html5 you can if you want but you can

just use just simply BR okay and BR is a

line break tag so it's just basically

going to push it down a line and there's

no reason to have any content like this

inside of a line break so that's why

it's considered a self closing tag

alright now there's a very specific

structure to an HTML document so this is

a quick diagram I just want to look at

you'll see that we have everything is

surrounded in HTML tags we have the

start and ending tag inside that we have

a head area and we have a body area now

the head has nothing to do with the

output that's in the browser the head

has things like the page title it has

things like links to CSS files and

JavaScript files that you want to use

metadata such as the description and

keywords things like that the

description and keywords are actually

used by search engines like Google so

that it knows some more information

about what's what's actually on the web

page alright and then in the body we

have the actual markup that's going to

display in the browser so headings text


things like that now this is an example

of a very simple web page notice that we

have the HTML tags the head the body we

also have this thing at the top this is

a doctype and it's not technically an

HTML tag it's just a declaration and it

should always be the first thing on the

web page and what this does is it tells

the browser what type of HTML this is

actually written in now this is the

standard doctype for html5 ok let's take

a look at some of the other ones so as I

said this is html5 if you were using

HTML 4.0 point R 4.0 1 it would have to

be a doctype like this and you start

getting into different different types

whether it's strict or transitional and

it can get very complicated same thing

with XHTML I'm not going to get into

that because I don't want to confuse you

guys we're going to just stick with

html5 just know that other doc types are

a lot more complicated alright guys so

we're going to get started on the

structure of our HTML document so I made

this bigger so there's no no doubt that

you guys can see this I'm going to get

rid of the hello world here and like I

said the first thing we want to put in

here is the doctype so we want to put an

angle bracket or a less span and then an

exclamation and then we just want the

word doctype usually in all caps and

then HTML and then the closing bracket

okay so this is the official doctype for

html5 after that we want to put in our

HTML tags ok that's going to wrap

everything now notice in sublime

when I think when I put the angle

bracket and then when as soon as I hit

the backslash or so I'm sorry a forward

slash it actually gives us the ending

tag automatically so we don't have to

type it out all right another thing we

can do is let's say for the head tag

here we can just put the text head and

click tab and it will give us both the

beginning and the end tag all right so

just a helpful shortcut in sublime and

moat and most um text editors at that

alright so in addition to the head we

need the body so let's go ahead and put

the body tags in alright now in the head

all I want is the title so let's go

ahead and do that and we'll say HTML

can't spell cheatsheet

save that and then over here I'm going

to reload and notice there's nothing in

the actual browser here because we have

nothing in the body but if you look at

the tab you'll see it says HTML cheat

sheet ok so whatever we put in the title

here is going to show in this tab now a

lot of times when you're building

websites you're going to want to see the

exact source code that's running in the

browser and for that we can do a control

U and this is going to show us the exact

HTML that's being parsed now what we're

doing here is building us just a static

HTML site so it's going to look exactly

like this but when you're using

languages like let's say PHP where you

have dynamic programming that's kind of

generating the HTML for you from

variables and things like that this is

very helpful because you can see the

exact HTML that's being parsed and you

can't see it in your actual code alright

so another thing that is very helpful in

chrome and other browsers is the

developer tools so if we hit f12 we get

this little console down here and

there's different things here there's

JavaScript console there's networking so

you can see how what pages are loading

and so on there's a lot of advanced

stuff here but for now we're just going

to look at the elements tab which just

shows the HTML we don't have anything in

the body but if we did we could hover

over things and it'll actually give it a

highlight up here which is very helpful

and you can even edit stuff down here

which I might get into later all right

it's not going to stick if you get it

down here but it will for you know until

the page is refreshed so let's go back

to our body over here and we're going to

start to look at some tags so we're

going to start with headings now before

we go into tags I just want to mention

comment so with HTML you can have these

comments with the less than exclamation

and then two hyphens and then let's give

it just a comment we'll just say this is

where our headings are going to go and

then we want to end the comment with

devil - and then greater than now this

is not going to be parsed by the browser

if I save this and reload you're not

going to see it show up here because

it's a comment ok it's treated as it's

just for the the developer to see all

right now when it comes to headings

there's six different tags we can use we

have H

1 through h6 all right so let's go ahead

and put an h1 in here and I'm just going

to say heading 1 and save and let's

reload and notice that it gives it a

bigger text ok so the browser by default

has some core styling in it and an h1 is

going to make the text bigger it's also

going to add some padding around the

edges so that you know but the next

piece of content will be pushed down a

little all right so that's an h1 and

that's the biggest heading there is ok

so let's take a look at an h2 so we'll

say heading 2 and save that and you'll

see that it's a little smaller notice

the padding in between the two alright

so what I'll do now is just copy this

and let's do 3 4 5 6 ok so this will be

an h3 4 5 & 6 this will be 3 4 5 & 6 and

we're just going to change these as well

all right now I want you guys to have

this to look back on if you need it

whoops 2 3 4 5 & 6 all right so let's go

ahead and save and reload the browser

and you'll see the different sizes of

the headings now you can change the

sizes of these texts through CSS which

you know we're going to get into

probably in the next video of the series

where we can change the font we can

change the size whatever you'd like you

could even make all these headings the

same size through CSS all right so the

next thing we're going to look at our

paragraphs so to put a comment here

we'll say paragraph and a paragraph is

just P okay it's just a P tag now I'm

going to give you a little hint in

sublime if you ever want to generate

dummy text which is just kind of just

sample text to use for development you

can actually just type in larom the word

larom and then tab and that's going to

give you some lorem ipsum now if you

wanted a certain amount of words like

let's say we wanted 10 words you could

say warm 10 tab oops I guess you can't

do that in sublime I actually haven't

used sublime in a while I usually use

atom or visual studio code and you can

do that there I'm not sure why it

doesn't work here

but anyways we'll just generate some

text and we'll save that and a paragraph

just like the headings has some default

styling okay so for one for one it has a

display block which means it's a block

level element so if we were to take

another paragraph and go ahead and paste

that in and reload you'll see that it's

automatically on a new line it also has

some margin okay it has I believe one

eeehm of margin or one M and M is a

measurement in CSS just like pixels

except it's used for more responsive

stuff so if we hit f12 and look at the

developer tools I'm just going to make

this a little bigger and we look down in

elements now you can see we can hover

over everything and it'll show us it up

top and if we look at the paragraph here

and I just click on it over here you'll

actually see any CSS or any styling that

is associated with this particular

paragraph or whatever tag we're hovering

over and when you see this user agent

stylesheet this is the default browser

styling so you can see a paragraph is

displayed as a block so it's block level

and then it actually has some default

margin now I'm not going to talk about

margin and padding and stuff too much in

this video because this is strictly HTML

margin and padding is CSS okay so this

is going to be very little to no CSS in

this video but just know that margin is

spacing around the element okay and

you'll see that there's this before and

after is actually the top and bottom so

that's why you see this space right here

it's actually 1m okay or 1 a.m. which is

a measurement in CSS so we do have

margin on the top and bottom by default

okay and then zero pixels on the start

and end which is the left and right of

the paragraph and it even gives us a

little diagram here you'll see we have

the power graph and if you look up in

the body it shows it highlighted padding

which there isn't any border and then

the margin and you actually see the

margin highlighted up above okay so this

is really helpful again I couldn't

imagine doing web development without

without the chrome tools now tags can

either be in line or block level element

so inline tags or inline elements do not

start a new line when you use

okay they take only the necessary with

they need block level elements however

start a new line and they take the full

width of that line so if this is

confusing don't worry about it I will

give you some examples block level

elements include tags like div heading

or heading sorry h1 through h6

paragraphs form inline elements includes

spans images links and I'm going to go

over all this stuff in a little bit but

just know that some tags are block level

some are inline so let's go into our

paragraph here and I'm going to add some

other tags here okay and these are all

going to be inline they're not going to

make us start a new line when we use

them so let's take a look at strong ok

so strong is basically you want to

surround something and say that this

text should be strong in some way now by

default it's going to be bold so if we

save this and I reload you'll see that

the text we surrounded the strong tags

with is actually going to be bold by

default but that doesn't necessarily

mean that it has to be bold you can grab

on to this from within your CSS and you

can change the font size you can make it

italic whatever you want to do just know

that it's a semantic tag for for making

the text stick out ok and this is

usually this will usually replace the

old bold tags which are not semantic at

all and not recommended anymore okay

same thing with e/m okay so ii m is for

emphasized okay so let's surround this

text right here with e/m and we'll save

and reload and again by default it's

going to be hopelessly put to space

there by default it's going to be italic

okay so you'll see right here but again

you can grab on to this in CSS and you

can change it to whatever style you want

it just basically means that this part

of the the document should be emphasized

so this text should be emphasized

alright so now let's take a look at

links so what I'm going to do is I'll go

let's go to the second paragraph here

and let's say we want to wrap this text

in a link to go to either another page

on our site or an external website so a

link is actually an a tag so let's say a

and we're going to give it an attribute

I'm going to talk

attributes in a second okay but let's

surround this text here all right and

then if I save that and reload notice

over here we now have this text as a

link now the href attribute is going to

be the location that we want this link

to open and this could be either local

it could be let's say if we had an about

dot HTML page on our site or it could be

external so if we want to put HTTP will

say and if I save that we go

over here and we click on that link it's

going to open now notice it

opens it on the same page usually when

you have an external website you don't

want the user to just leave your site

like that so what you could do is you

could add another attribute called

target and one of the values for this is

underscore blank and that's going to

open up a new tab with this site so if

we save reload and click this notice

that Google opens on a new tab and we

still have our site right here okay so

it stops the user from having to leave

your site okay and you usually only want

to use target blank if it's an external

site if you're going to another page on

your website you don't want that to

happen you don't want all these tabs

opening up when you're just navigating

the site so all HTML tags can have

something called an attribute or

multiple attributes and what they do is

they provide more information about a

certain element for instance the href

provided in the link we just did we

created an a tag with an href and what

the href does is as you saw is it opens

up or directs it to a certain location a

certain website link okay we also

provided the target attribute which is

not required but it still allowed us to

make it so that the link opened in

another tab all right now attributes are

always placed at the start tag and

they're always formatted as key value

pairs okay the actual attribute itself

such as href our target as we saw that's

the key and then whatever the value is

all right so we have the attribute name

or the attribute key and then the value

now the value is always going to be in

quotes you can use double quotes or

single quotes I would suggest double

quotes because that's that's

usually what's used that's most popular

alright guys so let's get back to our

HTML so we're going to go below the

paragraphs that we just created and now

I'm going to show you something called a

list okay

so there's basically two kinds of Lists

as an unordered list and an ordered list

so let's start with an unordered list

which is a UL tag so in the UL we need

to have list items okay a list is

basically like a bullet point a bullet

point list so each list item is going to

have an li tag and then in here we can

put whatever we want let's just put the

text list item 1 okay and then I'm just

going to copy this and we'll go ahead

and we'll put four of them in so say

let's tie them one two three four and

doesn't matter what you put inside here

well let's go ahead and save that and

reload and notice that we have bullet

points now for our list items it also

adds some default padding notice that

this is pushed over by default and if we

go ahead and open up our chrome tools

and exit to make it a little bigger

there we go so over here let's hover

over ul and you'll see that there's

actually some default styling from user

Asian style sheet which is the basically

just the browser default so it's

displayed as a block okay it has a list

style type of disk which you can change

within the CSS if you want to have a

different kind of bullet point it adds

some margin okay

actually yeah it adds margin before and

after one one M and then also adds 40

pixels of padding on the start which is

the left okay so it pushes it over 40

pixels and of course you can overwrite

this from within your CSS if you want to

change that you can also remove the

bullet points you can do whatever you

want as far as styling but that's we're

not getting into that just yet alright

so that is an unordered list now we also

have an ordered list which is an oil tax

so what I'll do is just copy this and

I'm just going to change it to an oh L

instead of a ul okay we'll save that

reload and notice that the ordered list

now gets rid of the bullet points and

replaces it with the numbers

okay so it'll automatically add numbers

to your list now unordered lists are

usually what's used for website

navigation when you see a nav bar up at

the top that's usually just an unordered

list it's just styled so that the

elements float you know float to this to

the right they're displayed inline and

it has some really nice background

colors and things like that but the H as

far as the HTML goes it's usually just a

simple list all right so next thing

we're going to look at our tables so

let's put a comment here and we'll just

say table so it's going to be a table

tag all right and there's quite a few

tags that go into building a table so we

have a table and then we have a head an

area for the heading and then an area

for the table body so we say tea head

okay and then we're going to have tea

body now in the heading is where we're

going to put the row that has like you

know if we're going to have a name email

and age column alright so these will be

the headings of each columns so we're

going to put a TR okay TR is table row

and then each heading is going to have a

th tag alright so this will be let's say

name we'll put another one this will be

email and let's say age okay so these

are the headings now if I save this and

reload this is what it's going to look

like by default now I'm going to do

something here because I don't want you

guys to have to keep looking at the

bottom of the screen so what I'm going

to do is just put in a div right here

with a style attribute you don't have to

do this I just want to move this stuff

down I'm just going to put a margin top

of 500 pixels all right and that's just

going to make it so that I can put this

so you guys can look in the middle now

not at the bottom alright so back to our

table we have our tea head with our

table row and our headings now we want

another TR okay and this time we're not

going to use th because these aren't

headings anymore this is actual data so

we're going to use TD okay so let's say

we want to name just put my name and

then we'll put another TD with an email

we'll just say Brad add

something calm and then we'll put age

put 35 save that reload and now we have

some data inside of our table okay and

you're most likely going to have more

than one row so what I'll do is copy


oops paste it in two times and let's

just change the name up here we'll say

John Doe say 45 and then change this

will say Sara Williams and flips will

make her 25

all right so we'll reload and now we

have a couple names and again this is

going to look very ugly because we're

not we don't have any CSS whatsoever

it's just HTML markup okay and this is

what a default table looks like now the

way that we build HTML websites has

changed along the way along the past few

years okay we used to use tables to

actually create website layouts for

instance you have a sidebar and then the

main area and then another sidebar and

that could actually be a table with a

couple columns that is not recommended

anymore you don't want to use tables for

anything for your layout you want to use

tables for tabular data only so if you

have like a list of customers with their

names and info like this that's fine to

use a table but do not use it for your

layout you want to use CSS for your

website layout all right that that's

very 1999 ish to use tables for layouts

okay and there's there's little rules

like that that they're not enforced by

the browser per se or by the technology

but it's just there's a right and a

wrong way to do things and I'm a big

advocate for you know doing things

differently and not everyone not being

the same but just some things are just

wrong and using tabular using tables for

for a layout is wrong all right so now

we're going to move on to forms okay

which you see a lot of on the internet

now the important thing to know about

forms is that with HTML we can create

the actual look of the form but we can't


functionality to the forum with HTML for

instance a login form you can build the

actual look of the form of HTML but to

actually make it function you need to

have something like PHP or some other

programming language with dynamic

functionality all right so we're only

covering the look of the form so we're

going to put in a form tag all right now

usually with a form you'll see an

attribute called action and that's going

to basically submit the form to a

certain page for instance a PHP page so

let's say it was going to go to a file

called processed PHP on our server and

maybe that would be a newsletter form or

a register form something like that

you'll also see method and Method is

usually going to be post or a form this

meaning that we're making a post request

to the server and posts are used to do

things like add data to a database stuff

like that it's it's it's pretty secure

as opposed to get which is going to

submit it and with a get request you'll

actually see the data filled in in the

URL and it's not very safe but it's fine

for things like search things where

you're not actually adding data or

something to a server alright but that's

a lot more advanced we're not going to

get into that now ok I will leave this

here but just know that this is this has

to do with more advanced server-side

programming so in our form let's go

ahead and let's add a label ok so we're

going to have a couple inputs we're

going to put a label for I would say

first name all right and then under that

let's put an input tag so an input is

going to have an attribute called type

because there's a lot of different

inputs this is actually going to be a

text input okay which is probably the

most common and then the name attribute

has to do with again server-side

programming if we were submitting this

to a PHP file this name attribute is how

we would grab the value of this form

that's submitted ok so it's not going to

make any difference to us what we put

here but I'm just going to put first -

name alright so let's go ahead and save

that reload and this is what we get

now this is awfully close to the table

so I'm going to do is put a line break

here usually two separate things like

this we would use CSS but I'm not

getting into CSS yet so let's just put a

line break that's going to push it down

a little bit

all right we also have an HR tag which I

haven't talked about yet which is a

horizontal rule and that gives us kind

of a line in our brows in our page so if

I reload you'll see we now have a line

that goes across the page I'm just going

to put another BR under it as well all

right so just separates allows us to

separate things so let's create another

field here on our form let's do a last

name so what I'll do is copy this and

let's just change this to last name name

last name actually you know what usually

what I do here is use camel case so

we'll go like this instead of the -

camel case is basically starting it with

a lower case and then every other word

every word after that is going to be

upper case so now we have a first name

and a last name if I reload you'll see

it down here now labels and inputs of

both inline that's why they're on the

same line here and they only take up the

amount of width that that element takes

up usually you'll have form form fields

you know on separate lines so what I'm

going to do is wrap them in a div

because remember divs are block level

elements so that'll actually put it on

the next line look alright so let's do

that and then we'll put a div here wrap

that around both the label and the input

okay so now if we reload now they're on

separate lines they're still pretty

close together like I said we would use

CSS to add some padding there but I'm

just going to put a line break in

between the two okay all right so let's

look at some of the other types of field

now you may want an email let's put a

line break there so for email you could

of course use text just change this you

could use text but with each with html5

we now have a type that we can use

called email

and that'll actually add a little bit of

validation without having to add any

JavaScript to anything if we try to

submit our form and it's not a valid

email address and we have the type of

email it's going to give us a little

error that pops up all right so you want

to use type email when you're dealing

with an email address all right so let's

say let's copy that and let's put let's

say message so what I want to do here is

I want to use a text area which is kind

of like a bigger text input so for that

we don't actually use an input tag

there's an actual text area tag okay so

we'll go like that and usually your text

area if you're submitting to you know to

a server-side file you'll have a name so

we'll call it message all right we'll

save that reload and now we have a text

area okay and you can actually make it

bigger and smaller with this little

control here another field that that

you'll see quite a bit is a select list

okay so for that I'm just going to copy

this div so let's say this is I don't

know we'll just say gender I guess so

let's say we want a select list to

choose either male or female

so we'll put a select we'll give it a

name of gender okay now each select is

going to have and it's going to have a

couple options so that'll be the option

tag and then usually you'll have a value

associated with each option so let's say

male okay and then the actual text to be

displayed will go in here like that

all right so let's save that's coming

copy that and just to be politically

correct we'll go ahead and do another so

this will be female and this will be


all right so if we save that and reload

now we have a little select list with

male/female other for gender all right

now we have a couple other few of field

types that I want to show you but I'm

just going to paste these in because

they're kind of running out of time here

so I'm going to go right under this div

and I'm going to paste in a couple more

so this is actually a number type so

we're putting an age here with the type

of number and it has a name and then I

also added a value here because we can

also add a predefined value to our

inputs all right and then we also have

the type of date okay so this is

actually a date selector and these are

these are html5 okay so these are both

html5 standards so let's save that and

reload and now if you have a number and

actually has these arrows where we can

switch we can make the number go up and

down and then the date you'll see we

have this date selector okay now like I

said we can have a value we can put a

value to anything we want here now

before html5 if you wanted to have like

for instance we'll put a value here and

we'll just say let's say we wanted to

say enter first name okay and reload

usually you know before each shell five

we would have to do this I'm going to

use JavaScript to make it so that when

we clicked in here this would go away

okay and that was that was a real pain

in the ass

so with html5 they actually added a

placeholder that we could use here okay

so we'll say placeholder equals into

first-name and now you'll see that it's

grayed out and if I click in here we can

actually replace it okay so that that

made things a lot easier so the last

thing we would need for the form is an

input button so let's go down to the

bottom here and what I'm going to do is

put in an input and we're going to say

type submit okay and we'll give it a

name of submit and it's also going to

need a value which is going to be the

actual text of the button which will be

submit all right so we'll reload and now

we have a submit button okay it's going

to put it's going to actually get

submitted to processed PHP because

that's what we put in the act

of the forum but that doesn't actually

exist okay now we can also have buttons

outside of forms so let's go under the

form I'm just going to put a comment

here and there's a button tag okay so

we'll put a button tag here and we'll

just say click me now this isn't going

to do anything if we reload it's going

to show the button but it's not going to

do anything because in order to hook up

a button to actually do something you

need to use JavaScript okay so what you

would do is you would add an event like

click equals and then you have some

function but we're not going to get into

that that's something for another video

okay we're just focusing on HTML here

and as you can see HTML isn't doesn't

really do much as far as you know

functionality and dynamic that that's

why it's not a programming language it's

a markup language that's just used to

display stuff on the screen and then use

other languages like JavaScript to make

it dynamic alright so the next thing I

want to look at our images or the image

tag okay so for images we're going to

use an IMG tag and this is actually a

self closing tag we don't need to do

slash image or anything like that you

see it doesn't even sublime text doesn't

even do it for us automatically

alright now an image tag by itself means

nothing because it doesn't know what

image to load so let's go ahead and grab

an image just going to search for sample

image we'll grab this bird here okay

whoops I mean to do that we'll just save

it and I'm going to save it into where

is this I think it's on my desktop yeah

HTML cheat sheet and let's uh let's save

it as just sample dot jpg all right and

then what we'll do is go to our image

and we'll say source ok source attribute

and we're going to set this to the name

of the image which is sample dot jpg all

right and then we'll go back to our HTML

reload and now we have the image now the

reason it

the reason it knows where to look is

because this is actually in the same

folder as our index.html so we don't

have to put any folder names or anything

here so what I'm going to do is open up

our folder and you can see that it's in

the same file in the same directory so

usually when you build websites you'll

have a folder called images or IMG or

something like that and then you'll have

your images inside there now if I reload

we're going to it's not going to show

the image because it doesn't it's

looking in the root here but it's really

in the images folder so what we would

have to do is change the location here

to go to images slash sample JPEG and we

reload and now it's back all right now

with images you should also use an alt

attribute and basically what this does

is if it can't find the image it's going

to display whatever text is here so

let's just say my sample image okay now

if I if I save and reload we're not

going to see any difference but if for

some reason it can't find the image

let's just change the name and save and

reload now you'll see that it'll display

the text so you see you have a way to

kind of show what this image is even if

it doesn't even if it doesn't load or it

can't find it all right let's just

change that back all right now there's

also a width and height attribute you

can use an HTML usually I would suggest

using CSS to do this stuff but it is

available so let's say we wanted this to

be say 200 pixels and reload it'll

change it to 200 pixels notice that

images are also inline that's why it's

not on a new line so what I'm going to

do here is just put a line break have to

put it up I put it below the image

all right and notice that the height is

set to auto okay so the height is Auto

so the image still looks good but if you

wanted to change the height up you could

do that as well so let's say change it

to 50 and reload and it'll distort it

but it will change it to what you set it

to but I'm just going to keep the height

I'm just going to get rid of the height

so it's Auto now if you wanted to you

could wrap a link around the image

let's put an A here alright and then you

could actually point to the location of

the image so we'll just grab this put

that in the href and reload and now if I

click on the image it's going to open it

up in the browser

okay browsers don't just open up HTML

files they can open up other types such

as an image all right so we're almost

done with the basic HTML tags and I want

to move on to html5 semantic tags but

last thing I want to show you is

quotations okay so we have different

quotation elements we can use so it's a

quotation and those are blockquote

abbreviate and cite okay so let's start

with blockquote and this is usually used

just for that for some kind of quote so

let's put in a blockquote tag and this

takes an attribute called site and this

is going to be from you know from where

the quote comes from let's say it comes

from traversing mediacom and we'll just

put some sample text in here I'll say

LARM tabs and we'll save that and you'll

see that it does add a little bit of

styling it gives it some padding and

pushes it to the middle a little bit

it's not going to show the actual site

okay if we look at the source code it

will so if we go down right here you'll

see it does show it here all right and

you can style this however you want from

within CSS we also have the abbr tag or

abbreviation tag so let's say we have a

paragraph here and we'll say the I'll

say the www

is awesome all right now this we all

know stands for World Wide Web so what

I'm going to do is just wrap this in an

ad BR tag and we're going to give it a

title and we'll say World Wide Web okay

so it's used for abbreviations so let's

go ahead and save that reload and now

notice that it has an underlined if we

go when we hover it it'll show us the

full the full title okay we also have a

site tag AC ite so let's put another

paragraph here and let's say HTML crash

course by Brad Travis II okay and then

we'll just wrap HTML crash course in a

site tag okay we'll save that reload and

it gives us this italic style here

alright and it lets its semantic to let

the browser know that this is something

that's being cited alright so those are

the basic HTML tags and elements now

what I want to do is talk a little bit

about html5 semantic tags so the html5

semantic tags clearly describe their

meaning to both the browser and the

developer so if we look over here these

are the tags that were added and this is

kind of a diagram of what you would use

these for okay you use them to kind of

lay out your website so if header which

obviously would be the header usually

have your logo things like that your

social media links then we have the nav

tag which would be your nav bar section

okay section would describe like the

copy text or something like that on your

home page or whatever and then if you

have like a blog you could have an

article tag around each post in the blog

a side has to do with just like sidebar

content alright and then you have the

footer which is going to be your you

know your copyright or your your privacy

policy links things like that

okay so html5 created these tags to kind

of structure your document even further

alright guys so what we're going to do

is we're going to create a new HTML page

and we're going to use these html5

semantic tags

map out our page so let's go to let's

see HTML cheat sheet folder we have our

index page where I'm going to create a

new text document and I'm going to call

this blog blog dot HTML okay so we'll

say this is kind of a you know like a

blog blog page or a news page something

like that so let's open that up with

sublime text just bring that over

alright and just like with the index

page we need to have our doctype our

HTML head tags things like that

now with sublime text is actually a

shortcut we can do and that's to do HTML

tab and it'll give us kind of a default

structure so just a nice little shortcut

now in the title let's just say we'll

just say my blog alright we're going to

add some other stuff in the head in a

little bit as well but let's go ahead

and start with our html5 semantic tags

so first thing we're going to do is have

a header alright and in the header we're

just going to have an h1 and we'll just

say my website okay again this is going

to look very ugly because they're not

using CSS but just structurally you want

to have your header at the top all right

then what we'll do is have a section

okay so this would be like the the main

area of the web of the page so if this

were like an about page we could have a

couple paragraphs about the company or

whatever this is a blog blog page so

what we're going to do is we're going to

have some article tags and then in each

article will be each blog post okay so

let's go ahead and put in h3 here that

would be that the title will just say

blog post one alright and then another

attack that I haven't showed you yet is

the small tag and small is usually used

for like create dates things like that

just like sub content so let's just stay

posted by Brad on July 17 okay so let's

save that and take a look real quick so

we're going to go up here in our browser

and we're going to just change

index.html to blog

dot html' all right that's what it's

going to look like and by default the

small tags will actually make the text

smaller so let's put the actual post

which will put it inside of a paragraph

so I'm going to type larom tab gives us

some sample content all right and then

usually on your main blog page you'll

have more than one article what I'm

going to do is I'm going to give this a

class of post okay so each article will

have a class of post and then let's just

copy this and we'll just paste in a

couple more okay this one will be blog

post two and blog post three all right

so if we save that reload now we have a

couple of blog posts you may also have a

link at the bottom of each one that goes

to the full the full post so let's just

put put an a tag and it would go to

something like you know post dot HTML or

something like that and then we'll say

read more okay and then let's just copy

that go one here and here all right and

since a paragraph is a block level

element it's going to go on to the next

line even though an a tag is in line

since the one before is a block level

it's going to push it to the next line

now you may want to have some kind of

sidebar on your page with like let's say

the blog post categories so what we'll

do is go outside of the section and

we're going to put an aside or a side

whatever you want to call it okay and

then in here let's say these are

categories so we'll put an h3 will say

categories and let's put a UL with some

allies with some links so let's say this

we'll just put these two go to a number

sign which basically just means the same

page we're on it's not going to go


so we'll say category one will copy that

and we'll say category two and three and

we'll save it reload and now we have our

categories now usually you'd use CSS to

probably float these to the

side rather than have them down here but

that's something we'll get into later

all right now usually when you have some

kind of navigation you want to use the

html5 nav tags so what we would do is

just surround the UL in the navs okay

and we can grab onto this within the CSS

and style it if we want and then finally

we're just going to have the footer so

let's go outside of the aside and put in

a footer tag and we're just going to put

a power graph we'll say copy right now

within HTML you also have these entities

you can use our symbols and there's

different codes for each one so for a

copyright we can do ampere stamp copy

semicolon and that will give us a

copyright symbol all right we'll say

2017 and we'll just say my website okay

we'll save it reload and now we have

copyright 2017 my website as our footer

all right now sometimes you may have

more than one header and footer so it's

a good idea to give these an ID or a

class so in this case I'm going to give

it an ID of just main header okay the

same thing with the footer down here

we'll give that an ID of main footer

because some people might actually use

for instance that the title of a blog

post the title and date and stuff they

might wrap that inside of a header it

doesn't necessarily mean it has to be

your your your main website header okay

now I really don't want to get into CSS

in this video but I will add just a

couple simple styles to the header all

right now when you're adding CSS usually

you want to put in an external file but

you can put it up in the in the head

area inside of a style tag okay and you

can let it know that this is going to be

CSS this is not required the type you

don't have to have this but sublime

actually puts it by default and then in

here let's say we want to grab on to the

ID of main header so when ideas

represent is represented with a number

sign okay so we'll say id main - header

I'm not going over this thoroughly

because we will do this in the next

video but for the main header let's say

we want

we want to align the text to the center

let's say we want to add a background

color of black okay since the background

is black let's change the text color

which is just going to be color and

we'll change that to white and then I'm

just going to add a little bit of

padding around everything so we'll say

10 pixels so I'll save that reload and

now we have a little website header all

right we want to grab on to the footer

remember we gave it an ID of main footer

and all I'm going to do with that is

just text aligned to the center and

we'll just make the font size a little

bigger all right don't worry about

learning these styles yet we're going to

go over all of this in the next video so

let's save it reload and now our footer

is centered all right the last thing I'm

going to go over is the meta tags that

you can use in your head area okay so

when Google indexes your website or your

webpages it's going to look at the

description and it's going to look at

your keywords things like that so let's

go right under the title here and let's

put in a meta tag now meta tags are

going to have a name attribute so we're

going to say this is the description of

our page and then it's going to have a

Content attribute which will be the

actual content so let's just say awesome

blog by traversing media okay so that's

our description and then we can also add

keywords so that would be another meta

tag with the name of keywords okay it's

going to have content and the content is

going to be a comma separated list so

we'll say web design web design blog web

dev blog you might put your company name

stuff like that alright and if we save

that there's not going to be any

difference from here if we look at the

source code control you you'll see that

now that stuff is added here and Google

will actually look at that stuff when it

scans your web site so the last thing I

want to do is just link the two pages


teach eat and the blog area so what I'll

do is put a link in the blog page see

we'll go right under the header here and

we'll just put to put an a tag and

that's going to go to index.html and

let's just say go to index all right so

if we reload we have this go to index I

click that that'll bring us here now

let's go to index.html and we'll go to

the very top right under the body and

let's put an a tag and we'll say go to

blog dot HTML and the text will say go

to blog and then let's just put an HR

underneath ok reload and now we can

switch back and forth to our pages and

that's how navigation is put together

alright guys so I think we're going to

stop here all that all this markup will

be in the description

allow the link to download the zip file

hopefully you learned something from

this and you enjoyed it like I said at

the beginning of the video of yours if

you're a subscriber of mine you probably

already know all this stuff if you if

you've watched the whole thing that's

awesome thanks for that and that's it

please subscribe if you like this I do

you know much more advanced stuff so

you'll learn much more and leave it a

like if you liked it if you didn't like

it go ahead and leave it a dislike and I

will see you in the next video