HTML Tutorial: What Is HTML? | Create Web Page Using HTML | Learn HTML in 20 Minutes | Edureka


Are you the one
who is planning to step into web development
and don’t know where and how to start. So here’s an introductory
web development session for you guys, mainly
focused on What is HTML. So Good morning, Good afternoon and good evening Ladies and gentlemen, my name is Atul and on
the behalf of Edureka, I welcome you guys to this YouTube session
on what is HTML? Well, roughly you can understand that HTML for a web development
is almost the same as what a bone is to your body.
HTML is the one which defines the core structure
of your web page or your website. So I don’t think that I should be telling you
that is the very first thing that you must learn
before drilling down to web development and creating
your first web page or website. But before we
proceed any further and learn more about HTML, let’s have a quick look at
today’s agenda for this session. So I’ll start this session by giving you a fair
understanding of what is HTML and we’ll also discuss
about the myths or the misconceptions
related to HTML which I guess most
of you have in your mind. Once I’m done with it, I’ll tell you about
how web pages and websites are designed and we’re
HTML CSS and JavaScript which themselves into it. Okay. Now once you guys
are comfortable with this part, then we’ll move ahead and learn about how you
can write your first HTML codes to create a very
basic webpage in this part. I’ll tell you about
various tags and attribute which you will use to create
and structure your webpage. All right, once done with it in the next part
of HTML implementation. I’ll show you how Ed Eureka WordPress blogs
uses HTML and what happen if you change any
of the tag, all right, and finally we’ll end
our session with some FAQs and doubt which I have come
across from different Learners. I hope the agenda is
clear to you guys, okay? So let’s start
with what is HTML. Well HTML is a markup language which was developed by
Tim Berners-Lee to create the electronic document
which most of you referred to as Pages or web pages. Let me just expand
the letter of HTML for a better understanding. Well the vote HTML stands
for hypertext markup language. Hypertext is a method
by which you can move around the web by clicking
on special text call hyperlinks, which brings you
to the next page. Well the fact that it is hyper. It just means that it is not linear that is you can go
to any place on the internet whenever you want just
by clicking on the links. All right. Next comes the M part and stands
for markup will markup is what HTML tags due to the text
inside them they mark it as a certain type of text
like italicize text or bold text or anything. So basically the mark-up deals
with structuring your web page in a specific format. All right. So HTML is called
hypertext markup language because it is a language that allows the user
to improve the appearance. Solve and Link text
with the data on the internet. I hope now you guys have
a fair idea of what is HTML. So how many of you
are planning to add it under the section of programming language you know yet since most of you so HTML is
a programming language. Is this what you
have been thinking till now? Well, I’m sorry to tell you
guys but all of you who thought that it’s a programming language
are wrong HTML is definitely a language but it’s not
a programming language generally a programming language is
the one which allows you to describe some sort of process
of doing something right? Whereas on the other hand HTML
is a way of adding context and structure to the text. Always remember HTML is
not a programming language. It’s a hypertext
markup language. So from next time when you are preparing a CV
don’t add HTML and and section of programming language known I
hope now all of us agree to it and on the same page. Okay, so let’s move ahead and let me show you
guys some of the application of HTML which you guys come
across in a day to day life. Let me just open some website. W dot amazon.com. Okay. So this is how the first page
of Amazon looks like the visual which is C is a combination
of HTML and CSS. Let me show you the skeleton of
this webpage or let me show you how the page would look if I remove all
these styles from it. Let me just move it
disable all styles. Okay done. So there’s how your amazon.com would look like if I remove
all these styles from it. So there is a raw HTML
version of amazon.com. I like so let’s come back to our discussion
generally the website which you see is a collection
of multiple web pages, which is made
using the combination of HTML CSS and JavaScript. The skeleton of the page
is made using HTML. The designing part is added
using the CSS and finally JavaScript is used to make
your website more interactive. I hope now you guys have
a basic idea of what HTML is and where does that fit
into the webpage or website development? So I guess we can move ahead and discuss about
how does it work? So inside this will be
discussing about HTML tags. So let’s move ahead and see
what’s in it. So here’s an example
of basic HTML code. Well, I have written this code
in my notepad plus plus but you guys can write
down a note pad or even you can use IDs
like Adam more brackets. Well, as you can see
these shortcodes over here, these are known as tags. These words between angular
bracket are known as HTML tags. Okay, they’re used to label pieces of content
such as heading paragraph or even it allows
some other cool stuff like adding a majors and table to your web page
or to tell your browser what to render on the page and what not obviously different
tags perform different function. Don’t worry. We’ll discuss about them
in detail in our next video on HTML tutorial
for now just understand that HTML tags normally comes
and pair like p + /p okay. The first tag
in the pair is a start tag and the second tag
is the end tag, the only difference
between the end tag and start tag is
the forward slash symbol. It’s like the end. I guess is written just
like the start tag, but only the forward
slash symbol is inserted before the targeting. Okay fine. So now that you know,
what an HTML tag is, let’s see whether you can understand
this simple HTML code or not. Let me discuss each line
the code one by one so starting with exclamation
mark doctype HTML. So what does this mean? Well, if you are
mentioning this tag, it means that you are defining
your document to be of HTML5 or in other words. You are going to
use HTML5 version. Okay. The next line is
or the next tag is HTML tag, as you can see, there is
no forward slash symbol. So it is a opening tag. So our next tag is HTML. This is the root element
of the HTML page this tag specifies that
from here the page starts. Okay. Next comes the body tag
inside this body tag. We specify all the visible
content on the page. We specify all
the visible page content. Okay. Next comes the H1 tag
H1 tag is a header tag and is used to define a Hurting. All right, there are
multiple header tags like H1 H2 H3 H4 and so on. Alright, so as you can see, I have closed my H1 tag
with /h one. This means that my first
header or headline. So this thing would be treated
as my first heading. Okay. Next comes the P tag the P defines a paragraph
So after headline what you do you
guys just go ahead and write the paragraph
inside it right so below each one
comes the P tag. Well, it’s not necessary. But generally the paragraph
comes after the header. Okay. So whatever you have to write
inside the paragraph just mention it within the start
and end tag of the paragraph. Okay, then finally what we did we close
the body tag and the HTML tag. Okay. Let me just write this code
and my notepad and show you how does it actually work? Let me just open my Notepad plus plus So let’s create
a new file saw starting tax. And so I am writing
the HTML5 code. So my first tag would be
exclamation mark doctype HTML. All right. Next what I want to do. I want to define a HTML tag next would be a body tag
inside that will Define. What are the
visible page content? Alright. So inside body
what I will do first, I will Define my first header. So let’s define H1 header. So inside that I’ll
mention like this is my first headline I like and I’ll close the start by /h one done after
specifying my headline. I’ll write some Paris
under so let’s define our paragraph starting tagline. This is my first paragraph
Let’s close this as well /p let’s close the body and
let’s close the HTML. And done. So now that you have written
your HTML code your next step would be to save your code
with extension of dot HTML. So let’s click on Save instead
of normal text file select dot HTML hypertext
markup language file and side that just rename the folder. I’ll rename it to
like Basic dot HTML and I’ll save it fine. So now when you’ll go
back to save location and open the basic
dot HTML file see that your file opens in
to your default browser. But as you can see here, the browser is only
showing the content without their respective tags. There is no tag like H1 tag
or P tag in it, right? You’re just seeing
the content over here. So these browser
do not display the HTML tags, but what it does it
reads the file and translates the text
into a visible form there by using them to render
the content of the page. All right. Well, if you are practicing it
along let me just congratulate you on creating
your very first web page. Yeah, guys. You heard me right? This is your web page. Let me just show you
the very first web page that was ever created. Let’s search for it
first page ever created. So as you can see
other Google found me this the first web page went
live on August 6 1991. It was dedicated to information
on World Wide Web project that was made by
Tim berners-lee it ran on the NEX T computer are
the European Organization for nuclear research at CER. The first web page address
was I guess this let’s see if it still works or not. Cool. So this webpage
is still working. Can you see how basic
this web page as well? This was a very first web page
that was ever created. Well, there’s a very
basic webpage comparing to what we have
right now currently. If you see the webpage
at consists of this type of Animation that type
of Animation SVG image PNG image and many other plugins
and add-ons on the webpage or website, right? So don’t worry about that. So once you are done with going
through the entire playlist of web development, I can assure you that you would definitely
be able to create a dynamic and interactive
web page for yourself. Okay for now, let me just come
back to our topic. Let’s not deviate from it. So for now let’s just focus on what is HTML later
on step by step. We’ll move ahead. All right, let’s move
ahead and see what’s next. So the next comes
HTML tags attribute. So what are these
HTML tag attributes? Well one last thing to know
about taxes attributes these attributes defined
special features of a Ugh, if dogs are windows and doors than attribute specify
the specific building detail. This could be the width
and height to the frame or whether the window opens
or the door has a lock. It’s that kind of attribute
which I’m talking about like well attributes
are always included inside the opening tag, like one example is present
on your screen. Well, we are defining here a tag
this a tag is basically used for hyperlink using this
you can hyperlink your text to any other Link in other words if the user click
on that hyperlink text, you’ll be redirected
to another website or any other webpage. Whatever you have linked to
Let’s consider this for example, a space href this.href
is an attribute name what you’re doing
here defining attribute and the value of attribute is
what triple w dot at Eureka.com. All right. So this entire thing a href
equals triple w dot Ed, u– record or Co inside codes
this tag is your opening tag. All right, and what you have mentioned
like href equals Well, w dot Ed u– a car dot Co this is
your attribute and after that what are you doing here
specifying the text which has to be hyperlinked with
triple w dot Ed u– Rica.com and finally you’re
closing the tart so once you are done with it and you open this
in your web page, you will see that you
will get a hyperlink text. Let me show you the example that would make things
more clear to you like er, doc type HTML body
should be common. Let me just add a tag
over here after that. Let’s specify attribute
name for me. I’ll use href you can give
any name to attribute. All right. Next what I will do I’ll specify
the attribute value for it for me. It is HTTP colon forward slash triple W Ed Eureka.com
close this okay. So there is like starting
tag then finally. What I will do I
will Define my subject line like click here to learn more. All right, and then
what I’ll do, I’ll close my a tag right? Let’s save it. As you can see here. We got a hyperlink text. Click here to learn more. Let’s click it. Let’s see whether
it is redirecting to the website or not. So yeah, it is definitely redirecting me to Triple
w dot ed u re car.com. So we have just created
a very basic web page with some hyper
linked text on it. Okay. Now that we have covered
about the basic of HTML in this what is HTML session. Let me just show you
the HTML structure of our blog this will give you the idea
of actual implementation of HTML and industries to
create a web page. Well, we are dead Eureka. We use web page to write our blogs WordPress is
an open source software that you can use to create
a beautiful website or blog currently. It is used by more than 60
million website including 30.6% of the top ten million website, as of April 2008 e, let me just show you
how we guys are dead. You regard create
a blog slash log slash. Let’s add a new post
sad any name like HTML Sick and inside that let me
just write a few lines like this is my first blog. Let’s define a headline. Like what is HTML? Let’s change it to heading 1. Alright, so as you can see here, we have heading 1
heading 2 3 4 5 & 6 so next part would be to define the paragraph So
what is HTML HTML is a hyper text markup language that is used to create
a web page or a website. Okay done fine. Let me show you
how this looks like. Let’s save it. And let’s preview
the basic block that we have just created. So there’s how your blog
would look like. Like this was my headline. What is HTML and under that I Define that HTML is
hypertext markup language that is used to create
a webpage or website. All right. So what if I want to make
this HTML as bold so let’s add tag over here
strong tag strong HTML. That’s it. Not the entire sentence
so strong so strong and forward slash strong. So now what do you think? What would be the Bold part? Let’s save it any guess anyone. You know, what you will be getting the entire
statement as the Bold. This was the original right? So, can you see
this entire statement changed to bold and why cause you mentioned strong
at the starting and the end, so whatever would come under the start and close tag
would be treated as bold. What if I just want
to make HTML bolt? So what I will do
I will just Define a closing tag So HTML, okay, and I will remove
this closing tag from here and let’s save it. So currently you can see
that HTML is hypertext markup language this
entire line is volt. Let me just refresh it
and show you what the changes which you got. So yeah, so now you can see that only this HTML is volt rest
other our normal text, right? So this was just one
of the way of adding elements in our blog I like and now let’s just move ahead and end our session
with some of the effects use and doubt which I have come
across from different Learners. So the first one is is creating
my webpage going to take long. We’ll remember the
first HTML code that we wrote in our notepad plus plus and open
our default browser. Well, that was also an example
of a web page it hardly took me a minute, right? So yeah, how long will it take
to create a web page depends on what you want from your web page learning HTML will only take
a few days of reading and learning the code
for what you want. Don’t worry about the basics
in my next video. I’ll teach you
about it and I’m sure if you will practice it along you will surely learn
it with an r or two. So once you are done
with the basics and you have proper ID
of the tags, you can. He starts showcasing a creativity and
creating HTML Pages. All right, fine. So coming to the next question. Do I have to be online
at all the time while developing my web page? No, not at all. You can code your entire
website offline by storing it all on your computer and later than when you
get your system connected to the internet just
transfer all this file to the web later in future whenever you
have new content just add that to the existing online
version of your site. It’s really quite simple right
fine coming the next question. Is it possible to create
a website without HTML? Well, the answer is yes as
well as know depending on what you mean by developing
without HTML or css. If you mean that you don’t have
any notation of HTML and CSS. So therefore you don’t know
how to code a website. Well, if this was your question
that don’t worry about that, there are plenty of services that allows you
to build a website without any knowledge of HTML or css like Squarespace
wakes WordPress and But if you mean that ultimately
you want a website that has not written
in HTML and CSS. Well, I’m sorry to tell you but HTML CSS and JavaScript
are the only language that a browser can use
to render a website. You can develop a website
and python PHP or any other language. But ultimately what
those languages do is to create HTML and CSS. All right, you won’t find
any cases of those language in your final page. Well JavaScript is bit different because it can be used
inside the page to trigger and play Dynamics action, like sending the data
from a form error or confirmation messages images or content sliders or
any other Dynamic interaction. So concluding this I tell that your entire web
page would consist of HTML as the main code
and you can’t do without it. All right, you can use
CSS to express the style of the elements on the page like color shapes Shadows transition transparency
responsiveness Etc. And finally JavaScript if you need any server
communication and dynamic Martin as it clear now. Okay. So thank you guys. This was all for this session. See you soon in my next session
on HTML tutorial for now in case you have any doubt
feel free to add your doubt in the comment section below. Thank you. I hope you have enjoyed
listening to this video. Please be kind enough to like it and you can comment any
of your doubts and queries and we will reply them at the earliest do look out
for more videos in our playlist And subscribe to Edureka
channel to learn more. Happy learning.

Comments 25

Leave a Reply

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