HTML CSS Tutorial for Beginners | Learn HTML & CSS | Full Stack Training | Edureka

so good morning good afternoon and good evening guys based on the time zones you all are coming from so before we get started let me quickly introduce myself to you all first so my name is niraj keria and i've been working in this iit industry for more than 13 years now so let's get started so our main purpose of joining this session is to discuss on html and css how they are used for the web development and then where we are going to start from scratch just seeing how exactly we can design the entire solution and how the html is are used as the main drivers for web development so the main agenda for today's session we are going to discuss on what exactly is html then we are going to discuss on what exactly is css then we are going to see how we can create a website by using these components so first of all listen sand what exactly is html so when we talk about html then html is basically the building block for any website so if you talk about any website then any website is built on three main core technologies if you talk about static website first of all we have html so html is the building block for any element for example if we are placing a form on the page if we are working on building up a form on the page so how the form is going to look that means how what all elements are going to be present in that form suppose we are taking the we want to apply a header section right we want to apply a header we want to add we want to take inputs in the format of text boxes on if a amount of email addresses we want to take input for passwords we want to give them multiple check boxes to select we also want to give them multiple radio buttons to choose as well right and then they can click on submit so all of these elements that means the entire content whether we talk about a simple horizontal line to all the text all the input boxes all the images everything whatever we see on the website that is at the result of the html content that is a result of html so html is what html is the hypertext markup language which helps us in building the entire content that we are seeing on the pages and then for beautifying all of these elements that means how the form elements have to look like how they are going to look like that is given to us by css css refers to cascading style sheet cascading style sheet and then the functionality of it that means suppose if we click on submit then we have to submit the details of the form and then we have to update it in the browser in the database what all data or what kind of content should be displayed once they click on submit so all of these functionalities every functionality that we see on the pages that is given to us by js js refers to javascript and that's why any static website it's a combination of these three html for defining the content that we have css for beautifying them for adding the styling components and then js for adding the functionality part as in javascript just like we have our human body the entire structure is defined by a skeleton there's html the entire skin and the entire structure that is given to us by css for beautifying of the body and then the entire functionality that means how exactly the body has to function that is given to us by js so these three are the core components for any static website all right so that's why these three are considered as a backbone for any web application so html as we discuss html defines what all elements are going to be present so html refers to hypertext marker language and it defines which all elements are going to be available in the web page css simply defines the styling of any page so let's see how we can create a one web page by using any of the editor so there are multiple editors available in the market we can use any of the editors whichever we are comfortable with one of the most popular editors are notepad plus plus so we can make use of notepad plus plus which is available for windows if you're using windows based system then you can make use of this notebook plus so this is how it basically looks like so we can say the updated version for notepad and then we can simply start working on each and every code aspect as you can see here if you're using ios we can either use visual codes visual studio code or you can also use sublime text so here we can make use of this tool this is available for both for windows and ios both there you go and if you are comfortable with visual studio recorded name then you can also download this as well and these all core editors are free of course so there are no licensing involved here for notepad for visual studio code or for sublime text we can use any of these so we have shown you the notepad plus first so this is how the sublime text also looks like so we can work on the entire sublime text editor that we can get used to get started so there's no main difference here so it all comes down to our own comfort level we can choose we can simply create that based on the requirement so now we are going to use the sublime text editor for building a code so first of all we are going to save the file now the extensions that we use for saving in for working or any of the objects we are going to use the extension such as dot or we can use the extension such as home.html and all the objects for any file we are simply recommend to store that as a part of one folder altogether so here we can create a folder and let's say inside this folder we can name the file as suppose home.html and then we can get started so now here we can start by adding now every html document starts with html tag so every html document starts with html tag and every tag also has opening and closing tag in html so we have seen there multiple code editors that we can make use of we can use sublime text we can use visual studio code or we can use any of the editors we got all right so every document starts with the html tags so here we can start with html and here we can open up head section and then under head section we can give a title so let's say we want to give a title as home for edureka that we are going to create we can close the title here so here we start with html then we are placing a head section and then we are closing the head tag so as you can see every tag here needs to be opened and closed as well then only it is going to be treated like a company tag together so for opening a tag we only have to use now these all are what these all are different elements available in html like we have html head and title so here we are opening the entire title and then we are closing it as well right so now once we open the title here now for closing the title we have to make use of this forward slash and then the same tag that we open now once we are done now we want to place title inside the head tag so head is basically like a common section for about the entire website so head section is basically used to define the meta tags for like we have meta keywords description if you want to link if you want to load a style sheet along with the document then we can even mention it in the head tag if you want to load a javascript file before the entire elements of the page loads then we can mention it in the head section and so on all right so these all components have to be mentioned here so down next once we are done now we are going to work on the elements itself so here we are going to work on adding the elements so now once we done with head now we can place body so whatever we are going to place in the body so body is the actual content that means whatever we can see on the webpage that is generally placed inside the body itself for example if we open up microsoft so whatever we can see on microsoft that means from top to bottom whatever we can see here these all are part of body itself so body defines all the elements that is going to be rendered in the browser that exactly is what we mean by body what is the use of meta tags so basically let's say if you are searching for anything for example if you search for edureka on in google right so now we can see how we are seeing multiple results now how these results are given by google by using the meta nam by the meter name and the type that we defined the meter name tags the middle attack for keywords and for adding descriptions for example as a part of the seo we want to make sure that this particular page is treated now we can define media name and keywords that means suppose if anyone is searching for suppose this page is meant for supposed travel website right so here if someone is looking for travel or or book hotels book flights if anyone is looking for these keywords then our page should be included in the search results for these keywords right that exactly is what we are giving as a meta tag same way if we want to add a short description for the page as well right so here we can define the name meta tag as description and then we can give the entire content for that description as well whatever we are going to suppose by cheap light tickets so this can be a short description a simple one liner that is going to be used by the search engines to know more about okay what exactly these pages what is that this page is all about and that exactly is what we mean by mid-attack that means describing what is the content available on the given page so whatever we want to show on the website that is a part of the body type so you have to place the entire content inside body itself so here we can start but if you want to place something in center we can write center and then suppose if you want to display something as h1 right we have multiple header elements available here we have from h1 to h2 h3 h4 h5 h6 depending upon how many heading we want to add and that too at what hierarchical level we want to add as a part of the page for example here we can give h1 now here we can name it as welcome to edureka so now as we discuss every tag needs to be closed as well whatever tag we are opening up so we're here to find welcome to erica so now if we save this page for example if we save this page for now and let's say we try to open the same page in the browser so here we have the page so now this is a content that we have placed here we have defined the title as home edureka and this is the h1 element that we have placed on the page right welcome to eureka and whatever changes we are doing here that is going to be directly rendered in the browser because we don't need to have any kind of compiler when we are working with html all right and suppose let's say we have multiple heading tags available for example we also have a closed center as well as we have opened it up here we have multiple heading tags so we have heading tab from h1 and it just can go to h2 as well this can go to s2 for example here we have h2 again if you want to have a sub heading for h2 again we can give another header for h3 then we can have for h4 another header another sub header then we can have h5 and basically it goes till h6 if we come back we hit refresh we can see the size and weight for each and every header reduces by using the multiple texture now for example now how exactly the heading tag is structured so for understanding this we can come down to our notepad so that we can understand the requirement here let's say we are writing an article about shoes top trends in shows top trends in shows this is a main heading off of a page just like we have in newspapers just like we have in newspapers when we are reading any newspapers what we have we have a main heading of the indian newspaper correct and then we have short we can say when we have small subheading for the same content and then if we like the news then we simply can start reading by going through the entire paragraph of that particular content that's how it works same way we have small headings here for smaller news again they also have multiple subheadings correct and now if you don't like those articles then we can start reading about them correct that's how the entire newspaper is structured because we have to give the weightage we have to give different weightage to different articles and heading as a part of the page same thing is going to be applied here for this page as well so what we can do here suppose if we are writing a blog article where the main heading is top trends and shoes so since this is the main heading we are going to place this under the h1 tag now suppose if you are further subdividing the main header again into sub if we can say multiple equal components so for example here we are going to write the article divide them on men in men and women sections so we have men and women now this is what a subdivision of the main heading correct so and they both are at the same level so we are going to place them both in the same h2 tag we are going to use the same h2 tag for both of these for both of these sub headings now again if we are going to further sub categorize men into two again subcategories as in suppose formal and the casual shows again they both are at the same category at the same level so we can and but again they are subheading for the h2 so the game they're going to be plays as history element as s3 element same way for women again for women also we have defined as and formal and casual again they both are going to be at the same level correct these all elements are all at the same hierarchy level correct so they all are going to have s3 elements defined same way if you are again so the further characterizing cash flow into multiple other categories right then we can define other multiple h1 elements as for the setup at mass it again go on till h5 and add six not more than that same way we see the content in our wikipedia for example if we go ahead and open up wikipedia we may see multiple content there right for example if you're talking about india on wikipedia so you can see the main heading is india itself and then we have multiple subsections like we have suppose we have history our history is going to be the h2 and then history has been further subdivided into ancient india then we have medieval india then we have early modern india and then we have modern india all right and then same way we have geography geography is going to be h2 and then these all can be characterized as for the setup as for the content that we have now next we have css css refers to cascading style sheet so when we want to add the style sheet to the web pages then we have to make use of these css part so basically correct we have this type of content available on the page here so now we want to apply a different styling to different elements for example let's say we have this header we have a second header and then we have third header as javascript correct let's remove these elements from the page for now we have this h3 let's add a simple line as we are learning html and css we can save it we can come back this is the content that we have placed on the website yet so we can place the suppose as paragraph then we can add a paragraph tag we can add a simple paragraph so this is the content that we have on the page now if you want to add images see here we want to add images in the website then we can then for placing the images we have certain tasks as img which is basically used to place the images now let's say we want to place the image just after this entire h1 element here all right so what we can do first of all we have to look for the image for example let's say we look for a white image that you want to place here suppose we have this image that means that needs to be placed here suppose i say here we can save this image let's say we want to say this image so here we can see this image in the same folder in which we are working on so it's always a good practice to make sure that we are placing all the elements all the elements as in if we have multiple pages if we have css pages if we have js pages so we should all be placing them in the same folder in which we are working on so let's say if we name this as slider or we can say slider.jpg as an image if you want we can create a new folder for images we can mention we can place the images under images folder and name it as slider.jpg we can save it that means if we come back to our folder structure we can see here we have home.html that in which we are working on and then under images we have save this image right same way for example when we are working with css files so it's always a good practice to place us style sheets under css it's always a good practice if we are working with javascript files it's always a good practice to place them in a js folder so that we can have a complete clean structure followed when we are working on any html document all right so now let's say we want to place this image in our document in here so what we can do we can come back to our editor and let's say we want to place the image just after this one we are learning human css so here we can use a tag called as img so for placing image we can use the tag as ing space we can define source and then here we can define the source of the image for example here we can now the image that we are trying to place is where in the same root folder but again in the images directory so here we have may place an image as image images and then under images we have the name slide defined as slider.jpg so here we can define slider.jpg so we have to define the element as in tag and then we have to find the attribute for it as in source right and there are some elements where we do not need to close them so we can save it up and if we come back to the browser we can see the image has been placed successfully in the browser itself what we have defined all right and if we are not defining any size for the given image tag then what happens the image is being displayed at its full size so the image is only available at this size this is the full size for the current image so if you want to string the image we want to make it bigger then we have to define the size for this image itself so for that we have to define another attribute such as width or height whatever you want to change here now let's say we want that the width of the image should be restricted to let's say 350 pixels so here we can define 350 save it and now i can see here the image size has been shrinked down to 350. that means even it doesn't matter now if we shrink the entire container or not the image is going to be fixed at the 350 pixel size as you can see here it now is fixed at 350 pixel size and now suppose let's say if you want that image should be responsive as in the image image which should be getting adjusted automatically as for the available size of the window then instead of defining it as a as a different pixel size we can keep it to percentage for example we wanted at any point of time the width of the image should be 50 percent to the image to the width of the container or suppose it should be 70 of the bit so once we save it we come back to the browser we hit refresh as you can see here now at any point of time suppose it doesn't matter whatever the size of the window is the image will always be 70 percent of the width of the entire container that's how you simply made the entire image responsive so it doesn't matter how large the container is how large the window is it is always going to cause to cover 70 of the available size of the window as you can see here all right now let's say we want to add a hyperlink next important element is hyperlink because when we are adding hyperlink to any other page we are simply linking them to other pages correct so for example here we have index page now we want to add a hyperlink a link here which is going to link to another page suppose here we can add a button for example in here we want to add a simple button just after this paragraph we want to add a paragraph or suppose we want to add a simple h4 element and now we want to add a text as oppose wizard google's be as simple as edge whatever is it google now we want is that whenever anyone clicks on this entire h4 element they should be able to go to google's homepage they should be able to to open up google's homepage and if you want to do that again here we have to make sure that we are linking that page we are linking this particular text where to the google's homepage so what we had to do we have to make use of something called as anchor tag we have anchor tag now within the anchor tag we have to place any element that we are going to link and anchor that just like we define the source for the image we also have to define which hyperlink we want to add to this particular texture so here we can make use of edge reference as an edge reference equals to and then here we have to specify the link that we want to hyperlink suppose here we want the user should be going to google's homepage as in google.com google.com so here once you save this if you come back we hit refresh now you can see here this entire page has this hyperlink has been added to this particular text it means now if you click on this in link here we are going to go to the google's home page as you can see here now currently the link is being opened up in the same browser if we want the link should be opened up in some other tab then we only have to add another attribute to it as target underscore equals to underscore blank underscore blank here that means now if we save it we come back we hit refresh now if you click on this link here this link is not going to be opened up in the same browser it is going to be open up in a new tab in a new tab itself not in the same tab but in the new tab that's how it is going to be opened up why because we have added something called as target blank now let's say we come down to styling now currently we have been placing plain html elements on the page now if you want to add starting to any of the elements then styling is basically done by using css as in cascading style sheet so basically using css we can define the style attributes for any of the element we can ask selling using three components three methods first of all we have the inline style we have something called as inline style so now when we say inline that means if we want to add standing to suppose to this h2 element so here we have to add an attribute for style equals to and then whatever styling we want to apply for only this element that we had to specify here for example we want that the color for the text here should be red we can define color colon the value as in red and a semicolon to complete the statement so we can save it if we come back we hit refresh now you can see here the second heading has been converted to a red color text why because we define the saving here for this element so when we define standing along with the element by using the style tag then this is referred as inline size that means here we are giving the setting along with the element this is called as inline style second method is called as internal style sheet now when we say internal it simply means that instead of defining the selling here we can erase this up in the head section just before closing the head tag here we can place an element called as style we can add the style tag here only and whatever styling we want to be applied for the entire page for any of the elements we can place it here for example we wanted h2 element wherever we have used h2 the h2 element should be having the a specific style so here we can write h2 and under curly braces here we have to define the style for example we want the color should be in red color we can define red color and color can be in different values if we know some general colors like we have red blue aqua deep pink light red we have aquamarine so these all are colors having name but we know that there are millions of shades available out there right so if you want to add those millions of shades so here we can make use of this kind of hex code so for example we want to give a specific shade of thread for example we want to give this shade of red this one so here we can copy the hex value here copy this one and in here we can come back and in here instead of red we can specify the hash symbol and then the value that we have copied that means this one this six digit value and here we can define the hex code here suppose we want to change the font family for this font font family as well so here we can define suppose we want this to change before banana if we can develop one family is verdana if we save this we can come back to our page if we come back we hit refresh we can see here the color has been changed plus the entire font family has also been changed why because we have defined the styling here by using the internal style sheet for this particular element as you can see here all right so this method is called as when we define the style sheet define the standing for any element by using this internal style sheet this is called as internal styling all right so first of all we had inline style then this is called this method is called as internal style sheet and then we have external style sheet for example if you want we can create a new document all together we can save it as let's say style.css and now whatever styling we want to apply here we can apply it directly here for example we can cut it and here without specifying anything for the h2 or html we can directly define the selling right away whatever we want and however we want suppose i say here we define this timing for h2 we also want to apply the styling for let's say for this image for this paragraph tag so here we can define paragraph as in p tag and then we can open up curly braces suppose we want to have a paragraph we want to have different shade of color let's say this color we can copy the his code here we can define this color here we want to increase the font size for paragraph so here we can define another attribute as font size let's say we want to use a font size of 18 pixels so here you can define 18 px for pixels if we save this if you come back to the page uh this this is not going to be applicable for this entire page why we haven't made the changes here suppose if you delete the style tag from here if you see the page if you say the style sheet installing is not going to be applicable why because we have defined styling in a separate style sheet correct and there is no styling defined in this instrument document that's why there is no selling applied here now if you want to have this this styling applied in a document then we have to link this style sheet with our html document and that method is called as external style sheets because here we are using we are planning to use an external style sheet in a separate file correct so for linking this style sheet in a html document we have same way we have to place the link in the head section inside the header section itself so here we can use a tag called as link tag we define relation as what this is this is for stylesheet now what is the type of the file we are going to add this is going to be text file in the format of css and then we have to find the source of the file so this file is currently located in the same folder as a html folder as style.css suppose if this was available in here in css so now if you because we have changed the the entire selling component here right so now we can save it now the cc file is available under css folder so now we just define the location as css and under css we have style.css file available and now we can close the link tag if we save this we come back to our page we can hit refresh as you can see whatever selling we defined in that external style sheet it has now been applicable here correct suppose if you want to change this font style for the paragraph as well we can apply the same font family to paragraph if we save this we can come back we can hit refresh the same thing has been applicable here all through the concept for external style sheet as we have defined let me show you a simple thing let's say we are placing we want to place a button let's say we convert this link to a button instead of text we wanted spare button here right so we can come back to home here we have visit google correct so instead of this button what we can do here we can insert this text we can play something as a button and here we can define a class for the button suppose as btn we can name the button as visit google now if we save it we come back we refresh we can see a plain button has been added here right now we want to add a styling to this button so what we can do here we have defined something called as class as well so for doing that what we have done here we define button suppose if we have multiple buttons defined here suppose we also have button as button class defined as btn1 and we have adding another link as visit index page also we add this link for visit edureka so here we can copy the button now we can use another anchor type because for edureka we want to add other page right so here this is going to link to google and here we can define edge reference and this should be linking to suppose to educate website as erica dot co i suppose we want to link to this to this page so here we can copy the link and here we can insert this link so now if we save the page if we come back to the browser now you can see we have two different links here visit google and visit eureka here we have two different content we have visit google and then we have wizard edurica right so now if someone clicks on on this one suppose if someone hovers over this page or over this button then there should be some different effect if someone hovers over this content this button there should be some other effect so we can do that by adding the same thing in the styling so we can so we have we have two different classes here because we want to apply they both are the same element correct so that means if we use button if we define the stunning for button and suppose if we define okay we want to have background color like this one so if we define this one as a background color for the entire button element so if we save it we come back we hit refresh we can see both the buttons have been defined the same color correct i suppose if you want to remove the borders here we can set the borders to none as you can see both the pages both the links are having the same setting but we want to have different selling for this button and different selling for this button so what we can do we can make use of something called as class so we had to find two different classes here we had defined class button for the first button right and for for google and we find the class name as button one for education so for button we want to have a background color of this one and here we can define button padding as suppose 10 pixel and we want that whenever we hover over this button as in btn colon hover so we can add a spatial effect or button hover we want that whenever we are hovering over the button so you can find color for text as white so we wanted whenever we hover over the button the background color should be changed background color should be changed to suppose let's say pure black as in six times zero that's it nothing else should change so here we can save it so now if we come back we can see this is the selling applied to this button by default this is having the entire styling defined now if you hover over this button here as you can see here the styling is automatically getting changed here on our hover effect same thing we can do for the other button as well for eduvaca so for that we have to define something for button1 class so we can copy this we can define so for button one and button hover over so we want that whenever we hover over edius we want to change the color suppose to this trick so here we can copy this and here we can define the same color scheme as hash and the color value everything should remain same and when you hover over the button it should be changed to black as well so if we save it now we come back i can see if both has been defined if you hover over this button here and this one that's how it's going to be changed as part of the selling that we currently defined thank you so much for being a part of this entire session guys and have a great ahead take care bye bye you

Channel: edureka!

Views: 164,001

Keywords: yt:cc=on, html tutorial for beginners, html tutorial, html, html 5, html5 tutorial, html (programming language), html for beginners, learn html, html basics, introduction to html, html tutorials for beginners, html5 tutorial for beginners, how to create website using html, web page using html, html coding, html web page design, html css tutorial, html tags, web development tutorial, html course, html training, web development training, html edureka, edureka

Id: QMnv3QrjZoU

Length: 35min 43sec (2143 seconds)

Published: Sun Sep 06 2020