XHTML and CSS Tutorial - 4 - Paragraphs and Line Breaks Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys welcome to your
fourth XHTML and CSS tutorial and in
this tutorial what I'm gonna be doing is
teaching you guys about paragraphs and
line breaks so if you haven't noticed
already what I did is I deleted
everything out of our body so we just
have a blank empty body with no tags in
because that was the stuff we learned
about on the last oral in this tutorial
we're on to bigger and better things
so anyways you should have a website
that when you refresh it it's just blank
again so like I was saying let's go
ahead and learn about paragraphs now
first of all if you don't know what a
paragraph is then I don't even know how
you figure it out how to watch this
tutorial because you're just clueless
but a paragraph is basically chunks of
text and it makes articles and magazines
and text on a website easier to read so
you would think that whenever you
created a website that making paragraphs
would be essential to that so I know
what you're thinking Bucky if I want to
create a paragraph on my website it's
simple just go ahead into my body and
type in any text Bucky is the best ever
paragraph one go ahead
end it make a new paragraph a couple
lines down and said because he loves
bacon eats it too and a bunch of typos
perfect so one paragraph to paragraph
let's save this and take a look at our
awesome website with paragraphs refresh
it woah WTF Bucky why the heck is this
all on one line that's not what I typed
in here we'll check it out XHTML is
something called what is it called
what's the technical name for I think
it's like whitespace insensitive or
something and what this means is even
though you see all these spaces and you
know new paragraphs your browser looks
at all of this in one long line of code
so it doesn't know that you have spaces
or you want new paragraphs here you need
to tell it explicitly so whenever we
create a website and we want paragraphs
we have to surround the sections of text
that we want in paragraphs with special
tags now we do this well let's just go
ahead and
do this the special tag for a paragraph
is P so let's go ahead and make this
paragraph by starting it here and ending
it here and we'll make this a paragraph
two and we'll put a P right here and a P
right there so now we actually have
these two paragraphs instead of just
random text so before your browser look
this is one big sentence oh my god this
girl keeps texting me and let me see
what she's saying I'll read it to you
guys because she's probably like reading
my text and all your tutorials
well too bad quit texting me want to try
and teach oMG my final was terrible I
hate my life yeah I'm definitely not
texting her back so anyways let's go
ahead and I lost track so anyways your
browser used to see one long line of
text so now what we're telling it to do
is alright make this text into paragraph
and makes this text into a paragraph so
let's go ahead and save this and see
what we got instead of this long line of
text right here let's refresh it and bam
look at that two brand-new beautiful
beautiful beautiful paragraphs I'm
getting a little excited there but
alright so now that's good at all but
whatever saying all right Bucky I kinda
am going for this look but what I want
is I want this to be on the next line so
we already know that with paragraphs we
have a space in between just like you
know a regular paragraph one but let's
go ahead and make it on the next line
instead of you know having a space in
between so go ahead delete all your PP
ref tags and we already know this we
already know you can't do that because
when we save it it's going to turn into
one long line again so what is you know
the trick that we can do to you know
make it just on the next line kind of
like it's like here well we can't
surround it in paragraph tags because
that'll add a space in between any time
we want to simulate you know just head
hitting enter on the keyboard and moving
the text the next line we
to add something called a line break now
you know how all the tags we created so
far with exception of this one has an
opening and a closing and that is so
your website knows where to start in
order to end where your body knows where
to start and where to end where your
head knows we're starting in where your
title knows where to start and where to
end and everything in between it is the
title well whenever you hit make a line
break you don't really need a beginning
and an end of a line break that's like
doing something like dumb like when I
press ENTER on my keyboard it doesn't
need to know when you started it or when
you end it it just needs to know when I
press ENTER go the next line plain and
simple so the tag for a line break is
gonna be a little bit different than an
opening and closing tag let me go go
ahead and show you guys what the tag is
so let's go ahead and move this all on
one line first of all and in between it
we're gonna put a special tag and that's
BR and after it go ahead and make your
forward slash so AC in normal closing
tags we put the forward slash before the
keyword but in this one we're putting it
after the keyword anytime you have a
single tag you put the forward slash
after the keyword and this is the same
for line breaks images something called
a horizontal line or horizontal rule but
anyways we'll get into that later so
anyways let's go ahead and save this and
here's what's gonna happen it's gonna
say Bucky is the best ever on the first
line then it's gonna hit a break which
is pretty much gonna shift everything
down into the very next line and then
it's gonna say because he loves bacana
in Yahtzee - hmm interesting so anyways
let's go ahead and refresh this and bam
look at that it breaks right here and on
the very next line it continues with the
rest of its crap so that's how you make
a basic line break and why those are
useful so something that that may be
really useful for is like if you're
making an address but Bucky Roberts won
331 whatever
very live I don't even know my dress
right now but anyways that's that so
let's go ahead and let me create a basic
website real quick with the tools that
we learned so far we're gonna start out
with a header which is at h1 and end it
with h1 now everything in between here
is gonna be a header and be like best
website ever with exclamation point now
under this header I might want a
paragraph so let's go ahead I make all
my text first some people do this some
people write this is my paragraph make
sure you got a couple typos in there and
then they make the tags but what I like
to do is I like to make both the text
first and then fill in whatever I want a
middle that way I don't forget about one
tag or the other so let's go ahead and
after this we might like make like a ch2
h2 and right this is the second header
and let's go ahead and make a paragraph
under this one and right this is the
second paragraph good enough and now
let's go ahead and add a line break be
our space four slash and after this
right and now I'm done with this
tutorial pretty bad but anyways you get
the point so let's go ahead and save
this and so we guys let me make sure I
didn't mess up anything before I
embarrass myself yeah how embarrass
myself some other way so let's go ahead
and take a look at this beautiful
website header 1 best website ever and
here's my first paragraph and then
header 2 it's a little bit smaller but
still noticeable and here's my second
paragraph with a line break in the
middle and about 2000 typos so there you
have it there is how you create headers
paragraphs line breaks and all that good
stuff so in the next tutorial I think
we're ready to move on to something a
little more advanced so don't go ahead
and start creating awesome websites so
far because you know if this is all you
know then you
probably can't get a job with Microsoft
just yet so hold on to your horses and
wait to the next tutorial but for now in
the meantime go ahead and hit that
subscribe button and thank guys for
watching and uh I'll see you guys later