Lazy Web Basics 1: HTML Intro

okay we are going to learn HTML so it's
gonna be like 10 seconds of history and
why HTML exists and then we're gonna
move into the basic structure of HTML
which will take another 10 seconds
because HTML is super super easy and I'm
not here to explain everything about it
I'm just going to give you enough so
that you can survive granted surviving
with HTML isn't that hard it's really
everything else that's more difficult so
this should be pretty short so hTML is
one of the building blocks of the modern
web and also that historic web on the
other two parts that are important are
CSS and JavaScript but you can't really
use them without HTML so we are starting
with HTML now the thing that you really
don't care about is HTML what does it
stand for and it stands for hypertext
markup language which either sounds
really really cool or really really
boring depending upon who you are so
let's break it down
first part we have hypertext which is
obviously an amazing futuristic version
of normal text so once upon a time there
was a guy named Tim berners-lee and he
was like hey we have a bunch of text but
wouldn't it be cooler if this text were
like amazing future text that could link
to other documents and be marked up and
everything would be amazing so what
stopped just having text and let's have
hypertext instead and everyone was like
yes this is amazing and then the Queen
was like you are super cool Tim
berners-lee let's Knight you and turn
you into Sir Tim berners-lee so when the
London Olympics happened they were like
look at this cool guy he invented the
internet and everyone's like who is this
guy but yet he's famous and cool you
should like him so anyway he basically
invented the web
he invented hypertext and let's cover
the second out of this markup language
why is it a markup language what is a
markup language well one if you list
HTML in a list of programming languages
you're gonna get run over by a car
because it is not a programming language
it's a markup language the idea behind a
markup language is let's say that you
are reading the New York Times when you
visit this web page there are certain
things that are on this page so normally
when you think of marking up something
you think of let's say your teacher in
high school who was like ah you spelled
this wrong this suck of this paragraph
isn't any good and she just writes in
red ink all over your page and then
marks different words or different
paragraphs or different sections to kind
of say you did something terrible and
wrong it's kind of the same thing a
little bit with HTML being a markup
language the idea is think about a web
page as having a bunch of different
stuff on it so this is a headline this
is an image this is paragraph this is a
paragraph this might be a header up here
this might be a footer down here and the
idea with a markup language is that it
explains to the browser what all of
those different sections are so instead
of you know drawing a circle around this
title we're drawing a circle around this
paragraph and saying this is a paragraph
this is a title appeared you use these
things called HTML tags and every HTML
tag means something different so h1
means like the number one headline P
means
paragraph IMG means image M means
emphasis that ends up being italic so
basically what hTML is is
people came up with a list of what all
of these different terms are and all the
different possible parts that you could
have on a webpage so when you build that
webpage you say here's the headline here
are a bunch of paragraphs here is an
image so there aren't that many tags you
think that there's a lot lot of stuff on
this page right it all looks different
there I don't know 20 30 tags something
like that so let's just jump in and
start to use them so this is a title if
I just type this and I save it in a file
and I call that file I'm gonna call it
index.html so dot HTML means this is an
HTML file save it I'm gonna open it in
chrome and it says this is a title that
doesn't really look like a title but it
does look like something it's not a
blank page so the magic thing about HTML
is even though I didn't try to use any
HTML tags here I didn't use anything
that looks like an h1 or P or IMG or
emphasis or any of that even though when
I just typed words the browser's like
okay this is something I can display so
just know that even if you're screwing
up your HTML all of the time it's not
like learning Python it's not like
learning programming in programming if
you type something a little wrong your
computer explodes but if you're learning
HTML it's a lot easier because the
computer is just like oh I kind of get
what you're doing it'll be fine so we
need to use an h1 tag to say this is a
title so the way tags work is they're
actually broken down into two parts this
and that so this part is your opening
tag this tag here says hey we're about
to give you an h1 we're about to give
you a number one had
and then you have your closing tag here
the difference between the two is this
forward slash here so this says to the
beginning of a title this says it's the
end of a title save it
refresh tada it's now a title so if I
told you I wanted a similar headline
this is an h1 it's the number one
headline if I said I wanted a slightly
smaller headline let's say and number
two headline how does that look and you
say I know how to do it already because
I'm not an idiot
save refresh there we go a smaller one
smaller one a smaller one so h3 h3 h4 h4
so there is an h1 and h2 and h3 and h4
there's an h5 there's an h6 but there is
no h7 because that wouldn't make any
sense but apparently having one through
six is totally cool and fine we talked
about other things that show up
paragraphs we have our P tag right here
it looks exactly the same as what we did
before I am typing a paragraph here save
it one of the nice things about using a
text editor that is smart is if I start
to make that angle bracket and hit
forward slash it automatically completes
with a P because it says hey you opened
up a P tag over here I know that you're
trying to make a closing one over here
so I'm just gonna make it easy for you
so save refresh there we go let me throw
out some more paragraphs more paragraphs
more paragraphs looking great so when
you're typing a paragraph there are a
few different ways you could say I am
typing a paragraph here because you
could say I'm typing typing a paragraph
here or I'm typing typing a paragraph
here and there are different words that
you could
say emphasize over the course of that
sentence so let's try them out let's say
I want to emphasize paragraph BAM so
refresh beautiful italicized as
paragraph there this goes to show that
you can put tags inside of other tags
sometimes so an emphasis tag you can
emphasize anything we could emphasize
smaller title up here so and then
smaller title there is italicized now
you say someone I would have thought
that emphasizing something made it bold
if you want to bold something sign em
tag it's a strong tag and you are blown
away by a strong tag because you're like
Soma they actually typed out an entire
word instead of abbreviating like all
they do here yeah it's true
programmers are lazy we hate typing so
generally things are pretty small
you got heard of HTML 5 basically the
difference between HTML 5 and earlier
versions of HTML is they added a bunch
of a few new tags and they added like
the video tag and the footer tag and
things like that and they're all very
very long words so when you see them
just think that's probably something a
little more modern all right
now what we need to do is we need to get
an image because the one other thing I
told you about is IMG is image so let's
do that let's find an image we'll look
up an image of the cat because who
doesn't want an image of a cat and we're
gonna save this cat image into the same
folder as our index.html yes I said
folder I'm sorry
directory so we have our index.html file
right here we have our cat
dot PNG right here even though this
should clearly be a JPEG but that's life
okay IMG and you're like wait is it
gonna be IMG cat dot PNG does that make
sense
save it refresh and it just says the
word cat dot PNG so this is the browser
being gracious this is HTML being easy
because according to HTML what we just
did is the stupidest thing that HTML has
ever seen it has no idea what we're
trying to do but it's like look maybe
they just want to type the word cat PNG
that'll be fine what we want to do
though is we want to have an image and
we want to say image go be cat PNG go
get cat a PNG and fill it in so here's
how it works
the image tag is what's called a
self-closing tag it's a tag that doesn't
need one of these closers over here but
what it does need is to know what it's
trying to display so along with the tag
here we also type SRC equals cat dot PNG
we refresh and there we go a beautiful
picture of a somewhat skeptical cat SRC
is called an attribute what an attribute
is is it's just extra information you
can add to a tag all tags have some
attributes that they can share we'll
talk about them later but generally
speaking here I'll add it to our list
over here attributes so IMG needs SRC
right beautiful so it's just extra
information that you give a tag to maybe
make it do something else so for the
image tag if you want it to display an
image you always have to say SRC so one
of the few things you need to memorize
about HTML
another time that attributes will come
up is if you're talking about links so
if we have this over here where h1 is
the headline 1 P is paragraph IMG is
image iya is emphasis and I say we are
gonna make a link what do you think the
tag for a link is and you say it's link
and then you say no no wait it's gonna
be shorter it's gonna be L and then I'm
like no all of that is wrong what it is
is it's a tag obviously obviously an a
tag an anchor tag why it's life a equals
anchor so this is going to be a link
right here and your question is going to
be okay typing a parent graph is going
to be a link but the important part of a
link is that a link actually goes
somewhere so where is this link going to
go and I say well maybe we want it to go
to Google or something bought it how are
we going to make it go there and you say
well you just talked about attributes so
maybe there's an attribute for an a tag
that tells it where the link should go
and I say you're genius this is great
it's like you already watched this so a
needs H ref just hypertext reference why
not a space href equals HTTP
www.marykay.co.uk/awilliam let's say
when we click this link we wanted it to
open in a new window
target equals underscore new underscore
blank there like a thousand ways to do
it and some of them are official and
some of them are
but now when i refresh when I click this
hey it opens in a new window now if we
have questions about HTML tags so we
want to know about the a tag in HTML
w3schools is like the oldest most
established place that you can get
answers about HTML but I have found MDM
Mozilla developer Network to be better
there's some reason I actually hate w3
schools if we're gonna be honest but I
don't remember what the reason is so you
can use either of them they're both good
websites oh you probably shouldn't need
to end up on Stack Overflow if you're
googling this stuff cuz Stack Overflow
is for super technical things and people
talking to each other and HTML is just
really really simple and really easy so
if we scroll around here this tells us
all the different attributes character
set chords download href href flying
media name brow Rev shape target type
literally the only things you ever use
our href has to be where should this
length go to and once in a blue moon you
use target but generally speaking when
you're using HTML tags you use like for
HTML tags and you use like three
attributes and that's all you have to
memorize so this was an introduction to
HTML if I tell you there are other HTML
tags if I tell you there is a tag for
video or a tag for a sidebar or a tag
for a section of a page or a footer
you now know oh all I have to do is take
the name of the tag and then type some
stuff in it and then maybe it needs an
attribute such as blah to equals y3
right so you now know all of the
fundamentals of HTML and if you ever
need to ask an HTML question again just
ask the internet because it'll take like
10 seconds for you to
your answer