Web Development Tutorial | HTML 5, Structure of a web site


Hi there I am Iosef Bodnar welcome
to another tutorial this tutorial has the goal to talk about the structure of a
website I intend to start a series of tutorials regard to web development as I
told you the goal of this tutorial is about the structure of a web site a very
good idea to understand very well the structure of a website is to go
effectively on a website and to talk there about the structure of a website
therefore I launched this Chrome browser I use this Google Chrome browser
because it’s got a very good tool named inspect which will help us to understand
the structure of a web site so I’m going to type here in a Google box Wikipedia
for example and here let’s select this with left click and this will lead me on
this main web page of Wikipedia here right click and select inspect which
will divide browser into on the left side as you can see we have the the main
page of Wikipedia and on the right side is this inspect tool which contain the
code behind this web page but as this looks now is very good
way to visualise the element which webpage is made up so each webpage is
made up by this four elements doctype HTML head and body let’s start with the
first element namely doctype this refers to the type to the document type which
web page is made up here is this HTML this means this web page is made up is
done by HTML by the way HTML stands for hypertext markup language there are
other version of HTML and XHTML the latest version of HTML is html5 if this
HTML which appear by this element doctype will be replaced by XHTML this
means that this webpage would be made by XHTML and not HTML let’s go further
the another element of a web page structure is this HTML which is the
first thing what maybe you have noticed this HTML element
is made up by two tags this is a open tag and another one is this closed tag
the closed tag is got extra this back slash a tag is made up by two angular
brackets as you can see a open bracket and closed bracket on the right side and
inside of these brackets is placed either a text like here HTML or could be
just a letter like P which refers to paragraph also inside the tag could be
attribute as you can see now for this element HTML for example this lang which
refers to multi-language because it’s got is value mul
surrounded by this double quotes the next element of the structure of a
website is this head it’s got two tags a open tag and a close tag as you can see
the same as a HTML tag I’m going to open this element and I go further inside
this head element and the main thing what you have to keep in your mind is
that each element which are placed inside head element does not appear on
web page they are working behind the webpage and
they have a very big goal to make a page to be a web page to be understandable
and to work properly and they have a very important goal for search engine
as well for example we have this metadata element which with this
attribute character set which has this value utf-8 this utf-8 is encoding
standard which contains the most symbols and characters used around the world and
this metadata which is a machine possible together with each attribute
character set will help the browser to display the web page more understandable
very important is this element title here we place usually the name of our
web page which should be very suggestive because they are searched by such engine
like Google Yahoo Bing and so on again we have metadata with this two
attribute name which has this value of description and another attribute
contain where is placed the description of
web page these are such as well by search engine also this metadata has
another important attribute keyword where we can place keywords which are
very important or suggestive for our webpage which will be searched by search
engine and such engine will place our webpage on the top of the web
page so keep in your mind these elements which are placed inside the head element
has a very important aim for a search engine as well you will see here this
element script inside this element would be placed JavaScript which is important
for animation for dynamic of your website as well usually inside this head
element you will place internal cascading style sheet which refers to
style and design of website and the last element of the structure of a website is
this body element which contains as well two tags a open tags body and a close
tag body as you can see let’s open our this element and this time each element
which appears in inside this body element will appear on web page for
example I selected is h1 element which is heading
and if you look over on the left side you will see the part highlighted which
is the part where h1 element appears on this web page I go further
and I selected this div element and you can see if you look over on the left
side you can see the part where this element appear on the web page and so on
so that was all about the structure of web site to resume the structure of a
web site contains four elements namely Doctype HTML, Head and Body
that’s all for today thank you for watching this video tutorial I’m waiting
for you to watch my other video tutorials and maybe to follow this
series of web development see you next time

Leave a Reply

Your email address will not be published. Required fields are marked *