HTML5 Tutorial 7 - Put Everything Together & Code Video Lecture - HTML5

hello web people's my name is Travis
Nelson this is dev tips for designers
and I got a joke for you why didn't the
website get the girl because I had no
style so this is the last video in a
series I call html5 basics if you
haven't already check out the other
videos yeah yeah yeah yeah yeah and yeah
as this is the final chapter in the
html5 basics series we're gonna put all
that learning to use and mark up a
document as this is a basic series we're
gonna mark up a very basic document I
got this idea from Jen Simmons his
podcast called the web ahead in an
interview with Jen Robbins
she suggested starting with a simple
letter I think that's a good idea okay
let's get started right here on my left
to have a blank HTML page called
index.html I also have in this other tab
content dot txt it's a text file of like
a letter I wrote to my wife for fun and
here on the right-hand of it set and the
right side of the page is a preview
where our HTML will render as we write
it so what we want to do first off is we
want to make sure that this is a I can't
type and talk and say this is a html5
page and what we do it how we do that is
we make a doctype of HTML now my code
editor is called espresso I don't care
what you use but I like this one in my
head there's I want to put also my HTML
Elona
mmm Iain this is the end my HTML tag I
want to declare that it's English that
amusing just so there's no confusion and
so that Google can translate it for
people who are not English inside the
head very simply this today I'm going to
write a title and I'm going to write a
letter to my wife now you'll notice here
that this title automatically showed up
as the title of the website so it's the
title of the tab and you know in your
browser it's going to be it there across
the top that's all I'm going to put in
the head right now there's a lot of
different things that will go in the
head and next week in few weeks after
that I'll jump all into that next I'm
going to do the body now these these
tags here are the essential tags of
every HTML document every document is
going to have a doctype an HTML tag and
then two children direct children of the
HTML of head and body and in the head is
a title tag so in the body is where we
kind of get our hands dirty and we talk
about the different things so I'm going
to grab some of this content here site
title I didn't put in your site title uh
let's say uh letters to my guests is
Super Friends and flips so this is the
title of my website I'm going to put
that in an h1 and notice here that there
is automatically default styling
connected to the h1 tag it just got bold
and large and and I can expect that to
happen because it's an h1 tag if this
were an h2 tag it would be slightly
smaller and whatever else default styles
the browser had for it ok the next thing
I want to do is because this is a site
and not just a web page I'm I have a
navigation item here and in my
navigation I don't have a few the fibs
it's my daughter have a few
links that are going to be in a
navigation I'm going to have a link to
my wife or a letter to my wife a letter
to my dentist and
a letter to my boss I only wrote the one
now okay so my whole entire website is
about letters that I write to my friends
and lovers and there's navigation
element right under the title of the web
the entender the title of the website
and in that navigation I link to the
different types of letters and letters
my wife what I'm a dentist and a letter
to my boss super fantastic fantastic
exciting let's see what else we got uh
okay so the letter of this article I say
that word on purpose I'm going to throw
all this content inside of an article
and then this one is going to be an h2
and this is going to be the title of
this letter
notice here that when I am doing these
line returns I pushed ENTER to make a
new line after the a right over here it
did not wrap and this is really
important because you remember when we
talked about the default display types
are the anchor tag where the a has a
display type of inline there's nothing
pushing it on to the next line if this
was div or a paragraph or something
that's default display block the links
would would wrap right under each other
but they don't because it's inline and I
expected that so the article tells me I
have some content in article but see me
starting out with a paragraph
let's see we got for you okay
and after that here's the poem and the
poem is in a blockquote markup is
telling you that
blockquote
okay so we know that we see that the
default style for blockquote
is that it is a block level element so
it wraps on to its new line and the
browser is putting some extra padding on
the on the left on the right here
because it's indented because it
believes the block quote should be
invented so what I want to do is I want
to format my poem a little better and I
just want some line breaks here because
I know the hair should be line breaks in
my poem yeah there's nothing physically
forcing the copy on to the next line I
had to put a br which is break it's a
line break it's like hitting Enter in
Word or something like that all right
let's jump on down to the next bit of
content oh cool uh this is a paragraph
but it's setting us up for a list now it
doesn't look like this list is oops
now it doesn't look like this list is in
any particular order so me using a ul
which means unordered list list a list
item inside the list is an Li now a ul
and an Li is a is a block level element
meaning that we'll create a new line you
see how turkey is going to wrap right
here when I put it in a in a block to
close these okay so we have a unordered
list right after this paragraph and I'm
listing the things that her beauty is
excess of and she's more beautiful than
tulips and turkey sandwiches turkey
sandwiches that's really beautiful and
smell oh the smell the smell of babies
it's not hard to beat the smell of
babies I mean um
if you have babies you have time okay
now this one who I did prepare an image
golly
oops this is a what is a h4 have
internet so it's quite an image
I drew this drawing for you because I
love to draw charms the ultra serious
hey that's more my stuff like this one
yeah
this is the directory where I'm working
it so I'm saving the image straight into
the directory and now I'm going to pull
in the image by using an IMG tag with a
source attribute and the source
attribute is going to point relative to
my H from my HTML document to my source
image and that's just going to get since
it's in the same directory or the same
folder it's not going to need any path
other than just its name dot the check I
hope there this yep now people who are
really strict would tell you every time
that you need an alt attribute for all
the images that way you don't look like
an idiot when they don't show up because
somebody's blocking the images on the
browser why would they do that I don't
know or when the image is loaded slow
because me as slow browser bandwidth or
when somebody is blind and that's the
ear fault you didn't write an alt tag so
I want to write this you just just
describe just describe with that images
it's a tiger love okay what else we got
here image of it I wrote this to
represent a horizontal rule which is a
semantic break and see that line that's
what I would
are we all still on that block whoa what
is up with you oh look at this I didn't
close out that hit ul tag and that's why
everything was so was silly-willy what
am i guy what's going on here now okay
see I told you I'd get something wrong
and I would have to like go through it
together this is exciting this crap
that's all the time you're doing coders
rubadoux to do Bidoof and then it turns
out it yeah you didn't close a tag
somewhere or something oh that's what I
did yeah boom boom Shakalaka web pages
yah ain't got nothing on me heard so
where was I is this HR here represents a
horizontal rule and horizontal rule
represents this line that's going across
it gives us a nice logical break and the
content although there's not much for
breaking the content here what is this
I want to show you some inline styling
so we have a paragraph here and then
these little asterisks are again because
that's markup codes it means that we
just want that bit of the paragraph to
be bold and in an HTML language we're
going to use the word the keyword strong
where it is the tag strong because it
has more semantic meaning than a B um in
uh old school days we used to use the
letter B to mean bolt which made a lot
of sense but then we realize that like
or if you don't want to be bold look it
just means that it's more important than
the words wrong so html5 said fun it's
not bold it's strong which could be bold
but could be pulled by default but you
know is strong the stampedes so anyway
oh one more thing is h4
I have a some really old music stuck in
my head a little boys
paragraph capitals you know we can do
caps lock we can write a capital P D
it's html5 so we can do it if we want
but we're not going to because I'm not
like that I ain't about that life so
these two underscores here are again
markup text language but I wanted what
what that's trying to say is that this
little bit of text tuition
yeah italicized and one of the over ways
we used to do that is used to use I
tagged little and I which use meant
italic but now we use an M tag which
means emphasis because again what our
italics to blind people or to screen
readers or to SS RSS readers I guess
that's still technically valid but you
know to me it's not semantics its style
in the markup and that's not what we
want so we said oh this should be
emphasized not necessarily italics but
by default emphasis on emphasis tag is
deafness italicized so as you can see
here um down here it's italicized so
that is that and let's jump over here
that's the end of the article um I'm not
going to do anything but if I wanted to
have like a sidebar on my letter website
I would use on the side and I would be
like yo
just my style bar because about that
life you know I mean and then and then
we want to put a footer here and
copyright it because this is extremely
sensitive content and I would be I'll be
torn up if somebody lifted this content
so I'm going to save myself the
embarrassment and the heartache of
somebody lifting my content I'm gonna
throw a copyright on this mug call it
dev tips copyright 2013 okay so let's
look at the results here right on the
right at the top we have a level h1 a
level 1 header tag that best assists
super friends and lovers and um that's
the I usually use an h1 tag to denote
the title of the website an h2 tag to
denote the title of the page within the
website and then I use h3 tags as
section headings in the content that's
kind of standard for me a lot of people
have different styles but that's what I
do I've done it for a long time that way
things are progressing around the
provoke oh and how you kind of do that
and we can talk about that later but I
tend to use h1 tags for the logo or the
heading that's the name of the website
so we have a navigation here so this is
a letter to my wife it's probably active
as I'm scrolling through there is a
letter to my dentist like what the hell
would you do that was messed up and
shopping days of hurt maybe cry and all
these crazy dreams and then a letter to
my boss who is actually quite dope and I
can't complain um a letter to my wife is
the name of the page and then we're
going down we have some paragraphs I
mean here's a blockquote with this
beautiful poem that I wrote
roses are red violets are red everything
is red say that's that's my beautiful
poem a list an ordered unordered list
some you know headings and anyway hey
this has been a lot of fun we've just
done some markup this is this is how the
Internet is built and now we just built
it together
fantastic I'm rambling congratulations
everybody this is the end of the series
html5 basics and now you all are
professional website developers go have
fun
crypts great
okay that brings us to the end of the
video and the end of the entire html5
basic series I hope you guys learned a
lot and enjoyed it watching it as much
as I enjoyed making it for the next few
videos we're going to take a break from
talking about html5 we're going to talk
about internet basics like what is a URL
what is a server how do the documents
work together to build a web page and
like what is a path name and things like
that that should be fun
so tune in the next dev time next dev
channel will be here
dev tipping it up all day long and as
always take a minute to share this video
with your friends leave a comment below
and subscribe subscribe to captives to
subscribe to do - Jane his wife and so
strong yes boy
Oh what do dude in it he's a developer /
president
you designers good at ot the bids then
subscribe