HTML Crash Course In 30 Minutes
Ram Chaudhary
In this video, we 'll go over the basics of Html for beginning web developers. this
video is for beginners. there are no prerequisites or prior knowledge needed. we
're not going to cover any advanced topics. In this video. we'll go over what all
of this is in just a second. Html consists of elements or tags. each tag starts
with an angle bracket or less than sign or greater than sign.. Each element on the
page usually has an opening and a closing tag that surrounds its content. within
the Html tag. We have the head tag.. There are some tags that do n't have closing
tags and these are considered self-closing. a browser reads the Html document and
then displays the content defined by the Html markup. inline elements do n't start
a new line, they only take the needed width. block Block level elements start a
line and they take the full width available.. headings are for main headings, H1
through H6 and h2 are for subheadings. Google also uses your top headings for Seo..
Vs code lets users add lines and the browser only sees it as one space. if I go
here and add a couple of lines and then save it. You 'll see nothing changed. so if
we wanted to add a line break we could use a br tag. br tags have no content so
there is no reason for closing tags. the B and I tags are not semantic, and they
should not be used anymore... These tags are inline elements, different ways to
format. The text. a division element defines a section in the document and it 's
block level. and then we have a span tag. so span tags define a section of a
document in line.. These are identifiers that we can use later on in CSs or
Javascript. if i just type ImG and then tab, vs code automatically creates the
image tag for. For me. the Alt attribute is a description of the image and is used
by screen readers to improve accessibility and is displayed if the image fails to
load. anchor tags create hyperlinks to content outside of current page or within
the current page..
Anchor tags can be placed anywhere, even nested within other elements. they are
inline as well. they can even wrap this anchor around this image tag. we do n't
want to create multiple tags. When navigating to portions of the current web page..
next we'll talk about lists. there are unordered lists which are bullet points and
ordered lists and these can be numeric or roman.. The table element was not
designed to be a layout tool. in the 90s that 's what it was used for. But today we
use CSs. the purpose of the table element is to display tabular data. when you see
a navigation at the top of a webpage, those are usually lists. in this video we 'll
go over how to style a list as a Navbar. we can build a form within Html that will
submit data to a server without using any. code other than the Html. one tag that
we can add is Fieldset.. This is used to group related elements in a form and draws
a box around those elements. and within the fieldset. We can use a legend. and we
could do first name, we 'll add a line break here. and then we're gon na add table
data here of Jill Smith..
We 're going to add two line breaks to add some spacing for our next input, which
is going to be a submit.. After this we 'll add another line break. and this one
will have a value of submit., so the value there is what the user will see on the
button. so these text inputs. We could add another attribute called placeholder. we
can add a hint or a placeholder for the user when they 're filling it out and they
know first name goes here. when you click on it and fill it out that placeholder
goes away.. next let 's add some radio buttons. so selects are a dropdown list. we
'll add a line break after that one and we 'll move on to select. to change two
identical words or phrases. I can press ctrl d to select that first BMw where the
cursor. was. and then I can select the next BMW. using a CSs framework like
bootstrap. There are different ways of laying out forms and inputs and labels. be
sure to use lower case element names. avoid long lines of code. indent your code
two or four spaces more than the previous line. close tags in the proper order..
Ram Chaudhary
In this video, we 'll go over the basics of Html for beginning web developers. this
video is for beginners. there are no prerequisites or prior knowledge needed. we
're not going to cover any advanced topics. In this video. we'll go over what all
of this is in just a second. Html consists of elements or tags. each tag starts
with an angle bracket or less than sign or greater than sign.. Each element on the
page usually has an opening and a closing tag that surrounds its content. within
the Html tag. We have the head tag.. There are some tags that do n't have closing
tags and these are considered self-closing. a browser reads the Html document and
then displays the content defined by the Html markup. inline elements do n't start
a new line, they only take the needed width. block Block level elements start a
line and they take the full width available.. headings are for main headings, H1
through H6 and h2 are for subheadings. Google also uses your top headings for Seo..
Vs code lets users add lines and the browser only sees it as one space. if I go
here and add a couple of lines and then save it. You 'll see nothing changed. so if
we wanted to add a line break we could use a br tag. br tags have no content so
there is no reason for closing tags. the B and I tags are not semantic, and they
should not be used anymore... These tags are inline elements, different ways to
format. The text. a division element defines a section in the document and it 's
block level. and then we have a span tag. so span tags define a section of a
document in line.. These are identifiers that we can use later on in CSs or
Javascript. if i just type ImG and then tab, vs code automatically creates the
image tag for. For me. the Alt attribute is a description of the image and is used
by screen readers to improve accessibility and is displayed if the image fails to
load. anchor tags create hyperlinks to content outside of current page or within
the current page..
Anchor tags can be placed anywhere, even nested within other elements. they are
inline as well. they can even wrap this anchor around this image tag. we do n't
want to create multiple tags. When navigating to portions of the current web page..
next we'll talk about lists. there are unordered lists which are bullet points and
ordered lists and these can be numeric or roman.. The table element was not
designed to be a layout tool. in the 90s that 's what it was used for. But today we
use CSs. the purpose of the table element is to display tabular data. when you see
a navigation at the top of a webpage, those are usually lists. in this video we 'll
go over how to style a list as a Navbar. we can build a form within Html that will
submit data to a server without using any. code other than the Html. one tag that
we can add is Fieldset.. This is used to group related elements in a form and draws
a box around those elements. and within the fieldset. We can use a legend. and we
could do first name, we 'll add a line break here. and then we're gon na add table
data here of Jill Smith..
We 're going to add two line breaks to add some spacing for our next input, which
is going to be a submit.. After this we 'll add another line break. and this one
will have a value of submit., so the value there is what the user will see on the
button. so these text inputs. We could add another attribute called placeholder. we
can add a hint or a placeholder for the user when they 're filling it out and they
know first name goes here. when you click on it and fill it out that placeholder
goes away.. next let 's add some radio buttons. so selects are a dropdown list. we
'll add a line break after that one and we 'll move on to select. to change two
identical words or phrases. I can press ctrl d to select that first BMw where the
cursor. was. and then I can select the next BMW. using a CSs framework like
bootstrap. There are different ways of laying out forms and inputs and labels. be
sure to use lower case element names. avoid long lines of code. indent your code
two or four spaces more than the previous line. close tags in the proper order..
