HTML5 AND CSS3 TUTORIAL 2

LINE BREAKS, PARAGRAPH AND HEADER

hey Everyone how's it going it's Haris Ali

and welcome to tutorial number 2

and in this tutorial we are going to

start taking a look at certain things

that we can put in the body of our web

page

ok so the first few things that we're

going to talk about in this tutorial are

the line breaks and paragraphs and headers

I'll

just go ahead and I'll write some

paragraphs are here so this could be

paragraph 1

 this paragraph 1 and you

think ok well i can break down two lines

and this could be paragraph 2 and then

and then you think okay cool

i'm going to go ahead and save this and

I should get three

nice paragraphs printed out in the

browser but unfortunately that's not the

case

ok so if i go ahead then i launched this

in Google Chrome  you can see that I've got

all three things printed out on the

screen but they all appeared in one line

what’s wrong going on here

well let me explain it to you this way

HTML is actually wide space insensitive

so it doesn't really matter how much

space we leave in between yeah i mean i

could put in our whole what is that like

probably 20 enters or something and when

i go back and click refresh

nothing's changed ok so that's why we

use these things called tags

they basically tell HTML

how to mark up the text inside of them

ok so to break down one line

what we do is we use this break tag so

that is BR with a forward slash just

like that

wanna break down another line then I go

ahead and I'll put one there as well

ok so now when I save this and I go back

to Google Chrome and click refresh you can see

we've got this on line one

line two - and line three

okay so they're all on their own

separate lives

but that's actually just

how to break down a line

so this is the equivalent of hitting

enter on your keyboard

but if you guys actually want to have

paragraphs and paragraphs have spaces in

between these two lines then we have to

go ahead and we use a different tag

called the paragraph tag so to do that

you're just going to go ahead and put in

the smaller than and greater than sign

with a  and same thing on the side as

well

ok so that is the start of one of our

paragraphs and then this is the end of

that paragraph

ok so we'll go ahead and we'll do that

 that was some kind of wrong but hey

we'll go back and click refresh and now

as you can see we've got these three

pretty cool paragraphs all printed out

nicely on the screen with space in

between them

ok so that's quite cool

we've covered how to actually break down

one line and we also covered how to make

different paragraphs so let's take a

look at how to actually make headers on

the web page

ok now we actually get six different

kinds of headers by default

ok and they are actually named h1 just

right down until h6

so we've got h1 h2 h3 h4 h5 h6

and obviously when you have to go ahead

and end these tags

ok and we can go ahead and just

type some stuff in here to see

what all these headers come out looking

like

so this would be the biggest header h1

is obviously the biggest and then h6 is

going to be the smallest

let's go ahead and save this and now

when we go back to Google chrome again and

click refresh you can see we've got all

six headings is printed out on our web page

starting from h1 being the biggest

and h6 being really really small that

you can't even see it

ok so those are the different headers

that we have available to us in HTML but

we can change these up a little that

which we will learn about later on in

the series but for now that's how to

make a header in HTML

so thank you very much guys don't forget

to subscribe please feel free to leave a

comment like or share the video

it's really going to help my channel

grow and i'll see you guys in the next

tutorial

HTML5 AND CSS3 TUTORIAL 1

CREATING OUR FIRST WEBPAGE

hey how's it going it's UZAIR

here and welcome to tutorial

and in this tutorial we are

going to start writing our first webpage

so the first thing we have to do is

actually save an HTML file so i'm going

to go ahead and click Save

where I want to save mine

but you guys can save yours wherever you

want.

ok so I've got an html5 tutorials folder and I'm

going to save tutorial one in there

ok and because this is our first webpage

whenever you save your home page you

need to save it as index dot HTML

ok and if you guys want to make sure

that it saves correctly as an HTML file

then you can just go ahead on this

drop-down list and look for HTML which

is over the hypertext markup language

ok so that's what HTML stands for is

hypertext markup language so let's go

ahead and save this

okay we've got our first web or our

first HTML file now because HTML is a

mark up language what that means is that everything is

written in these things called tags

ok and some people call them elements

now a tag looks something like this so

you go ahead and the top in the smaller

than sign and the greater the inside and

then you type in whatever the tags name

is so let's say for instance we had a

tag that was called tag

now this isn't actually a real tag but

you know just for the purposes of explaining

that's pretty much what a tag looks like

and we usually have two of these tags so

we usually have an opening tag and then

a closing tag and the only difference

being that a closing tag has that

forward slash before the tag name

ok and what these tags would then do is

Mark up some bit of text in between us

so let's say i had some text here then

these tags would be telling the browser

how to show this text on the screen ok

so they basically mark up these tags

markup this text that's what they're there for and we

also get single tags in HTML so we can

also go ahead and they look like this

like tag but then there would be closing

/ before the end of the tag so we've got

single text and then we've got double

tags which you saw just now

ok but those aren't real tags so

we can get started with writing some

real HTML code ok and the first thing we have to do

whenever we start writing a web page is

start off with something called the

doctype tag and what that does is

declare what doctype we are using what

so basically what version of HTML

we are using ok and because we're using

html5. then we type in !DOCTYPE i always put mine as all

uppercase but i think it works fine as

lower case as well and then I go ahead and type in the word

HTML

ok now with previous visit versions with

previous versions not versions of HTML

ok we used to have to type like some

really long doc type element in here but

with html5 all we have to do is type doctype HTML

and we're done

ok so that is our doctype declared and

our browser now knows that it's looking

at a html5 document

so now that we've got that on our page

the next thing we have to do is

actually told the browser where HTML

starts and ends

so the way we do that is by putting in

another HTML tag so HTML and as you can

see this one turns blue and most of our

HTML tags are all going to blue

from now on I guess that is where our

HTML starts and then we also have to put

in an ending HTML tag so i'm going to go

ahead and in mine off over there

ok and this is known to most people as

the root element

ok because all the other HTML code that

we're going to type in goes in between

these two tags ok

so you're not going to put any HTML

outside of these two tags

ok and that is why it's called the root

element because everything has its root

in that a tag

so the first two tags that we're going to

put in this HTML tag actually divide our

website or webpage into two different

sections

ok so the first one is called the head

and we have to go ahead and that

off as well and then the next part is

called the body and ending body now what

we've done is we've split this HTML into

two different sections so we've got our

head and then we've got our body

it does look a lot more tidy to have

everything nicely indented like this so

i can tell exactly where my head starts

and ends and exactly where my body starts and ends

so that one of the things that we can put in our head

is called the title and ending title and what

this does is like display the little bit

of text at the top of the browser and in

the top of the tab

just put this is my first web page
the body that is where all of the

stuff that the user is going to see has

to go so basically just type in some text i'm in the body

so I'm in the body

ok and if we save this now and we run

this in google chrome what we've done is we've

just created our first webpage and as

you can see i'm in the body is displayed

in the part of the website that the user

is going to be looking at and then our

title is actually up here in the tab for

chrome and it says this is my 1st

web page so that's pretty much how all of that

works but there's one last thing i want

to mention to you guys and that is

inside of our head we also have to

include another tag which is a meta tag

and you guys might not understand all of

this just yet but it'll probably make

sense to you guys later on in the series

so just I show you

charset equals utf-8 ok I'm going to

end that off with a slash because this

is going to be a single tag

this is not going to be a

valid HTML document

so thanks guys to reading this tutorial and stay tuned for next blog