Learn HTML 2020

Learn HTML 2020

Are you the one who is getting to step into web development and do not know where and the way to start out .


So here’s an introductory web development session for you guys, mainly focused on what’s 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 website or your website. So i do not think that I should be telling you that’s the very very first thing that you simply must learn before drilling right down to web development and creating your first web page or website.


But before we proceed any longer and learn more about HTML, let’s have a fast check out today’s agenda for this session. So I’ll start this session by supplying you with a good understanding of what’s HTML and we’ll also discuss about the myths or the misconceptions associated with HTML which I guess most of you have in your mind. Once I’m through with it, I’ll tell you about how sites 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 study how you’ll write your first HTML codes to make a really 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 through with it within the next a 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 even have encounter from different Learners. I hope the agenda is obvious to you guys, okay? So let’s start with what is HTML. Well HTML may be a terminology which was developed by Tim Berners-Lee to make the electronic document which most of you mentioned as Pages or sites . Let me just expand the letter of HTML for a better understanding. Well the vote HTML stands for hypertext terminology . Hypertext may be a method by which you’ll move round the web by clicking on special text call hyperlinks, which brings you to subsequent page.


Well the fact that it is hyper. It just means it’s not linear that’s you’ll attend anywhere on the web whenever you would like just by clicking on the links. All right. Next comes the M part and stands for markup will markup is what HTML tags thanks to the text inside them they mark it as a particular sort of text like italicize text or bold text or anything. So basically the mark-up deals with structuring your website during 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 info on the web . 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 isa programming language. Is this what you’ve got 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 programing language is that the one which allows you to explain some kind of process of doing something right? Whereas on the opposite hand HTML may be 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 once you are preparing a CV don’t add HTML and and section of programing language known I hope now all folks comply with 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 formed using HTML. The designing part is added using the CSS and eventually JavaScript is employed to form your website more interactive. I hope now you guys have a basic idea of what HTML is and where does that fit in to the webpage or website development? So I guess we can move ahead and discuss about how does it work? So inside this may 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 but you guys can write down a note pad or even you can use IDs like Adam more brackets. Well, as you’ll see these short codes up here , these are known as tags. These words between angular bracket are referred to as HTML tags. Okay, they’re wont to label pieces of content like heading paragraph or maybe it allows another cool stuff like adding a majors and table to your web page or to inform 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 intimately 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 tagis 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 a bit like the beginning tag, but only the forward slash symbol is inserted before the targeting. Okay fine. So now that you simply know, what an HTML tag is, let’s examine whether you’ll understand this easy HTML code or not. Let me discuss each line the code one by one so starting with exclamation mark doc type HTML. So what does this mean? Well, if you’re mentioning this tag, it means you’re defining your document to be of HTML5 or in other words.


You are going to use HTML5 version. Okay. The next line is or subsequent tag is HTML tag, as you’ll see, there’s no forward slash symbol. So it is a opening tag. So our next tag is HTML. This is the basis element of the HTML page this tag specifies that from here the page starts. Okay. Next is the H1 tag. All right, there are multiple header tags like H1 H2 H3 H4 then on. Alright, so as you’ll see, I even have closed my H1 tag with /h one. This means that my first header or headline.


So after headline what you are doing you guys just plow ahead and write the paragraph inside it right so below all comes the P tag. Well, it’s not necessary.  So whatever you’ve got to write down inside the paragraph just mention it within the beginning and end tag of the paragraph. Okay, then finally what we did we close the body tag and therefore 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 doc type 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 into 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 subsequent computer are the ecu 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 web page 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 web page comparing to what we have right now currently. If you see the web page at consists of this type of Animation that type of Animation SVG image PNG image and many other plugins and add-ons on the web page 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 comeback to our topic. Let’s not deviate from it. So for now let’s just specialise in what’s HTML afterward 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 item to understand about taxes attributes these attributes defined special features of a Ugh, if dogs are windows and doors than attribute specify the precise building detail. This could be the width and height to the frame or whether the window opens or the door features a lock. It’s that sort 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 essentially used for hyperlink using this you’ll hyperlink your text to the other Link in other words if the user click thereon hyperlink text, you will be redirected to a different website or the other webpage. Whatever you’ve got linked to Let’s consider this for instance , an area href this .href is an attribute name what you’re doing here defining attribute.


All right. So this complete 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’ve got mentioned like href equals Well, w dot Ed u– a car dot Co this is often your attribute and then 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 Triplew dot ed u re car.com. So we have just created a very basic web page with some hyperlinked 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 60million 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 posts ad 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 1heading 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.

 Okay. So thank you guys. This was all for this session. See you soon in my next session on HTML tutorial for now just in case you’ve got any doubt be happy to feature your doubt within the comment section below.


Thank you.

Leave a Reply