Hello friends
let's get started straight away and
create our first HTML webpage. I will be
using a text editor named sublime text
which is quite popular in the
professional world. I will guide you
through the step-by-step process of
creating is HTML site  from the scratch.
First let's create a new project folder
for our website. I will name it "first"
Let's create it on the desktop itself.
So a new folder and let's name it
"first". You can name it whatever you wish
to. For the sake of this example I will
just name it as "first"
Ok, let's open the folder and now
here I will create three folders. One for CSS
another for images. I will name it IMG
and the third one
for javascript.  JS.  And now everything should
look fine
this is the best way to arrange files
for your new website instead of placing
all the files in a single folder.
I will save the file.
Let's name the file
index.html
This file should be saved in the folder
named "first". So now we have a blank HTML
file. I will just right click and open
the file in the browser. So now you
and see that the file is completely
blank. You don't get anything on the page
as we haven't typed anything so far.
So let's code first you have to type the
doctype declaration to do this you start
with an exclamation mark and type the
doctype HTML then you start by typing
the opening and closing HTML tags. These
tags begin with an angle bracket. So
this is the opening HTML tag
and this is the closing HTML tag. The
text you see in the grey fonts are
comments.
This is how comments are typed in an
HTML page
These are for our own references and has
nothing to do with the overall web page.
If you have learned any programming
language you will be well aware of
comments. Now within
HTML tags, I will open and close the body
tag. The body is
an important part where the main content
of the website is placed.
Apart from the body tag you also have
the head tag which you have to place
before the body tag. The head tag is an
important tag where all the links to
other CSS and JavaScript files are
placed. The head tag also contains the
title tag.
Within the head tag you can
place the meta character set tag
This is often a declaration kind of a
thing which is used to identify the
character set of the page.
The title tag is mentioned here you can
open and close the title tag. I have just
named the title as document. And now
let's type something within the body tag.
I'm opening and closing the paragraph
tag here and within the paragraph tag
I'm just writing "hello world this is my
first HTML page"
So we have the basic structure of an
HTML webpage here so let's save and
check in our browser.  You can either use
Ctrl+S our Cmd+S or you can go to
file menu and save the file. Now this is
how the document web page looks in the
browser.
Ok, if you use Sublime + Emmet, you
can speed up your code writing skills. Now
I know you are not aware about Emmet.
I will explain about Emmet in a next separate
video.
I will just show you how you can speed
up writing
code using Emmet. I will just
delete this part of the code.
And now I will use a shortcut. Just type
HTML colon 5 and hit tab on your
keyboard and wow!
Here you see how easy it was. I
will just write in the paragraph tag
that this is my first HTML page using
sublime plus Emmet plug-in. And just you
can check in the browser and everything
works fine.  So you can just see how fast
it was to write the code using Sublime
plus Emmet.
I will be covering how to install Emmet
in a separate video. Do subscribe to this
channel so that you get the updates and
I will be covering everything for
designing a website from the beginning
to the end. I will also be looking after
wireframes and how to design a website
in Photoshop and then converting it into
HTML and CSS. This will come in later
parts. First let's learn a few more tags.
Ok, after the paragraph tag let's learn
about the heading's tag.  Now h1. This is
the h1 tag. You have six tags in
headings. h1 to h6.  h1 is the biggest
font, h2 is the second-biggest font.
this is how, this is the h2 tag
h3 tag, this is the h3 tag
type h4
and hit tab. This is the h4 tag. h5
tab. This is the h5 tag. I should have
speeded this up but I think it would be
better for you to follow. If you're
finding the video slow, you can speed it
up. If you're finding it fast just slow
it down in your YouTube settings. You
have it in the bottom right corner of
your video.
Ok, now let's open the page in the
browser.
Here you see that the h1 tag is the
biggest one and it becomes smaller as
you go to h6 tag.  Mostly most
sites use h1 to h4. Only a few sites
might be using h5 and h6. The most common
of these are h1, h2 and h3.  Now let
me copy and cut and paste h2 tag in front
of the h1 tag, just to show that it won't
make any difference in the output. You
might be wondering why? Actually h1 tags
are block element tags. Block
elements are those which use the full width
of the page. i.e They need a separate
line for themselves. So h1 and h6 tags
tags are block elements. So if you
want to place something within the block
elements you will have to use an inline
element. Now the paragraph tag, h2 tags,
these are block element tags. If you need
something to place inside
the h2 on the same line itself
you will need a span tag.  I will show it
in an example. p tag is also block
element
tag.
Ok, let's type here a span tag. 
this is an inline element. Will close the
span tag. Now if we check in the browser
you will notice that the span tag is on
the same line as the h3 tag.
Here you go. You can clearly
notice that the inline element has come
as expected on the same line.
Now these are the examples of the block
element tags.
The paragraph tag
h1 tags and the div or the division tag.
The division tag is also a block element.
Now let's see some examples of the
inline elements.
The href tag, the span tag
and the image tag. These are the
examples of inline elements. Now there
are many tags I will just go through
some of these in this tutorial. I will be
explaining the other tags in details in
our next videos. Do keep watching not
only this video but all the coming
videos in the series. I will be making a
complete series make you acquainted with
all the aspects of web design. So let's
get acquainted with the division tag.
Now i'm gonna just open and close the
division tag and type
this is a block or container or a
container or you can imagine it as just
a box. A division is sort of a box.  You can
just place anything within this box and it
helps to align all our content on a
website in a proper way. That's the main
function or the utility of the division
tag.
Just to show you an example
I will just copy and paste the heading tags
within the division tag.
Now if I check it in the browser you will
not notice any difference because we
didn't style the division tag but still
let's save it and check it in the
browser. So, as I said earlier it
doesn't show any difference. Now let's
give some styling. I know you might be
completely new to CSS but you can just
learn just one or two styles
side-by-side learning HTML and this will
be a great help for you to master how to
create a complete website from the
scratch. So just, I will show you an example
about how to place CSS styling, an
inline styling.  So let's style the
division tag first. div style is equal to
I will just open the quotes color colon
and I will mention a color. Let's type in
gray.
Ok, what it will do is, it will color all
the fonts
within that division tag as gray.  Now
you notice here that all the h1 tags have
automatically been colored gray.
That's because I have given a style to
the division tag which was applied to
all the inside h1 tags. Now let's give a
background color so that you can see the
box or the block. So background color
let's give it as a hex code that is a
hash
or I will just give it hash say okay 777
Don't worry much about this code because
you will slowly master it. Now you can see
that, you can see the box within which
the h1 or the heading tags have been
placed.
I think this has given
you an overall idea about the division
tag.
You can similarly style the paragraph
tag too, if you just want to experiment.
Let's style the paragraph tag as
color red, and let's check in the
browser. Right click, open in browser and
here you see that the font has gone
red.
Now let's create a separate CSS file
style.css and let's copy the CSS to a
completely new page. i.e the
style.css
Let's type in
.red and followed by curly brackets and
within the curly brackets we have to
type the styling that is color or let's
make it redone and give the color red.
And let's again create another style for
the division box. I will just name it
ourbox, dot ourbox and curly brackets and
let's copy the styling from here. Now
this is the professional way to link a
CSS file. i.e We often link
it to an external file instead of giving
the styling within HTML file. This
is the professional way of doing things.
So I will just change the paragraph
tag here and and name the class, give the
class name as redone. Paragraph class
redone and now I will change the inline
style here and change it to class. Style
ourbox or something went wrong here and
I think
ok I just type style there! Sorry! I need to
type class. So let's type in class.
now
Ok, now you have to link the HTML file to
the CSS file otherwise it will not know
from where to get the CSS.  So within the
head tags we will open a link href is equal
to, we will give the path that is css /
style dot css and rel
relationship is equal to stylesheet rel
equal to, rel is equal to stylesheet.
 
And just check it in the browser
and it looks completely fine. If you
check the view source you can see whatever
you have typed in the sublime text
or the text editor and everything looks
completely well indented and professional.
So this is the professional way of
designing a web page and if somebody
looks at your code they will be quite
impressed by the way you have arranged
the things.
I just hope you have learned something
today if anything is not clear just go
back to the section,  just play it around.
If you think it is fast just slow it
down and watch the video again and again,
until you may get it perfected.
I will be covering how to install the
Emmet as I said before in the next part
of the series. Do like and subscribe
please and comment and ask your doubts
and queries below.
I'm always willing to help you just put
on your queries below.
Whatever your queries are,  I would not
mind and if you need a separate tutorial
on a specific topic,  do post your
comments and I will get back to you with
the replies.
Thank you very much keep watching this
channel. See you soon.
