How to Make A Website Using HTML and CSS

hi guys this is Brian from website Learners today we are going to see how you can create a website using HTML HTML stands for hyper text markup language it's the language which web browsers use to display web pages on your computer in this video we will see how you can create your very own HTML website like this it'll have a logo with an interactive menu some content with a button images and a video we'll also make additional pages and add links to them in the menu and by clicking on the links you will be taken to those pages watching this video you'll be able to create this website on your computer just by adding some HTML code on your notepad now all you need to have to follow this tutorial is a notepad if you're on Windows or text edit if you're on Mac so let's get started now to create a website using HTML the first step is to open notepad on your computer so to open Notepad let's go to start and then type Notepad and press enter so now we have our Notepad once we have our notepad next let's go to step 2 which is to create a HTML file so to create a HTML file we are going to Simply Save this empty file as an HTML file so to save this file as HTML all you have to do is go to file and click save as now let's save this file on our desktop and here you need to give a name for your file I'm going to name this as home now to say this file has an HTML file we need to enter dot HTML at the end of the name so let's type dot HTML and click save now if we go to our desktop you can see that we've got our HTML file here so now if you open it you can see that the file opens in our browser so now we've successfully created a HTML file which is displaying in this blank page so as you can see here this page is empty because we've not written anything yet so next let's create the first item on our page using HTML now if we enter any text here then save our note and refresh the browser you can see that we now have the same text on this web page which we entered here okay now let's say you want to make this text big like a heading we need to enter a H1 at the start and the end of the text so let's type H1 here let's go here and now let's type slash before the H1 and close the tag now if we save the file and refresh this page you can see that we have now got the heading so this is how HTML works now in the same way you can add content to this page using the text and tags like these now like H1 tags there are several other tags which you can use to build your page to see a list of most popular tags just click the link below this video and here you can see a list of most common HTML tags and how you can use them let's go to The Heading tag now let's say you want to add a smaller heading like this you can add the h2 tag instead of H1 so first let's enter the text that we want then close the h2 tag with a slash now if we save the file go to the browser and click refresh you can see that we have got the smaller heading okay so now you know how to use HTML tags next let's start building this page and make it into something like this first let's remove this heading and then change the heading to the one we want I'm going to type new adventure in ice cream now if we save the file then refresh the browser you can see that we have got the heading once you have added the heading let's say you want to add a paragraph of text under this heading let's go to the reference page and click here so to add the text we are going to use this tag called the paragraph tag so let's go to our Notepad and then type P tag and enter the text you want then close the P tag with a slash so let's save this file go to the browser and click refresh you can see that we have got a text here once you have added the text next let's add a horizontal line here so to add the line we are going to use the HR tag so let's type HR now since the line doesn't have any content inside it it does not require an end tag so just having an HR tag is enough to get the line so now if we save the file and refresh the browser you can see that we have got a line here so now we have added the heading text line now let's say you want to bring this text to the next line like this all you have to do is enter the Break Tag right here so let's go here and then type the BR tag for a line break now if we save it and click refresh you can see that we have added a break between these two lines now let's go here and add another Break Tag here so let's save the file and click refresh okay so now we have created this section next let's see how you can change the design of these elements that we've added to the page so to style these contents we are going to use something called CSS what a CSS CSS tells our browser how to display these HTML elements on the screen now let's say you want to increase the size of this heading all you have to do is just go to the H1 tag then Enter space and type style equal to and then enter these two quotation marks now inside the quotes you need to add the CSS code which will change the style of this heading now to change the size of this heading let's go to our reference page here you can see some common CSS Styles just click on it now to change the font size of this heading we can use the font size CSS property and this is the CSS code for changing the font size now let's copy this by clicking here and then go back to our Notepad and paste it in between our quotes so now we have told our browser that this element needs to have a font size of 50 pixels so now if we save this file and go to the browser then click refresh you can see that our heading is now bigger okay this is how you can change the style of any item on your page using CSS now you can do the same for any HTML tag that you want for example the paragraph tag or the HR tag and you can also add multiple styles to the same tag now let's say you want this text to appear at the center of your page you can do that by adding another CSS property to this element now to get the property for centering this text let's go back to our reference page and go to text align this is the property which can align our text to the center so let's copy the score and then keep your cursor after the semicolon of the first property then paste the new property so now we've added both the font size and the textile and property to this heading element so now if we save the file and if we go here and then refresh our browser you can see that our heading has been moved to the center now in the same way let's change the style of this paragraph text too so as we did before let's go to the paragraph tag and then type style equals to and add the quotation marks now let's copy the same CSS code and then paste it here now instead of 50 pixels let's change the text size to 20. so now if we save it and click refresh you can see that our style has been applied now here we can see that these lines are a bit too close to each other so to add some space between these lines let's go back to our reference page and here you can see a property called line height so let's copy that and paste it here now if we save the file and go to the browser and click refresh you can see that it looks much better now let's say you want to add some space between this text and this line how do we do that so when CSS we can use a property called margin to add space outside the element so let's go to our reference page then find the margin property and as we need to add space to the bottom of our element let's copy margin bottom property and then go to the last style of a paragraph element then paste the margin property here now if we save it and go to the browser and click refresh you can see that our Gap has been added okay so now we have successfully completed styling our first section using CSS now let's say you want to add an image here how do we do that so next let's see how you can add images to your website now to add the image first you need to copy the image which we are going to use into the same folder where your HTML file is located now I have saved this HTML file on my desktop so I'm going to copy these images that I want to use on this page to the same desktop folder so let's copy the images and then paste it on the desktop once you're done next let's see how you can add this image to your website so to add the image we need to find the HTML tag for adding images to our page so let's go to the reference page now in the HTML tag section you will find the tag for adding images now this is the HTML tag that we need to use to add our image so let's copy this code and then paste it here now here you can see that we need to add the name of our image like this where we have the file name along with its extension so let's enter the file name of our image here now to get the file extension just right click on the image and click properties and here you can see the extension of the image which is dot PNG so let's go to notepad and type dot PNG next to the file name now if you save this file go to your web page and click refresh you can see that we have now got our image so now you know how you can add an image using HTML now in the same way we will add two more images to our website so we will copy this code and then paste it here now we will change the name of the images to match the exact file names that we have here now if we save it and click refresh you can see that we have got our images now as you can see these images are displayed one by one let's say you want to reduce the width of these images so that they can be displayed side by side like this you can do that by adding an attribute to this image element so the attribute that we are going to add is called width now to add the attribute all you have to do is just go to the image element and type space style is equals to codes let's go to the reference page and go to CSS tiles here you can see the width property now let's copy the width from here and paste it so let's say the total percentage of the browser is 100 percentage now if we divide that by 3 for our three images we get 33.33 percentage so let's enter 33 percentage as the width for each image so now if we save the file go to the browser and click refresh you can see that our image is evenly distributed across the browser size even if we change the browser size foreign and are always evenly distributed so now you know how you can add images to your site now before we go to the next section let's quickly add a heading before these images so let's copy this heading and paste it here and now let's change this text so now if we save the file and refresh the page you can see that we have got a heading above our images okay so now we have successfully completed these two sections next let's see how we can add a link like this to your website by creating a link like this you can redirect your users to other websites or even other pages on your website for example when we go to the site you can see that when we click this link it goes to a different page so now let's see how you can create a similar link on your website now to find the HTML tag for creating a link let's go back to our reference page now go to the link tag and here you can see that this is the HTML tag for adding links so let's go to our notepad and then keep the cursor where you want to add the link as I want to add my link here after the paragraph I'm going to keep my cursor here now to add the link first we need to type the attack which is called the anchor tag now inside the anchor tag we need to add an attribute called href this attribute will tell the browser where the link needs to go so I'm going to type a href equal to and inside the code we need to enter the location of the page where the link needs to point to so let's say you want the link to take people to google.com so you just enter that link in between these codes so let's go to google.com then copy this link and paste it here now once you have added the link next here you need to enter the text which needs to appear as a link on this page so let's say you want the link to say read more let's enter read more here and now if we save the page and go to our site then click refresh you can see that we have got a link now if we click on this link you can see that it now takes us to google.com which we entered here so this is how you can add links to your web page now in this link we pointed to another website which is google.com but what if you want to link to another page on your own website we can do that easily I'll show you how you can do that later in this video now as you can see this link is not looking that attractive so next let's see how you can make this link into a button like this now to make this link into a button we are going to use CSS again first let's increase the size of the button text so let's go here and then type style equal to double quotes now let's copy the CSS for font size and then paste it here and now if we save the page and click refresh you can see that the font size has been increased next let's add a background color to this button so let's go to this tab now go to CSS tiles and click background color now as you can see this is the CSS which will change the background color so let's copy this and then paste it here now you can change the color to anything you want now if we save this page and go to our site then click refresh you can see that we've got the red background color now as you can see this is not looking good we need to do three more things to make it look better so once you've added the background color next let's see how you can add a space on all the sides of the button like this so let's go to this tab now we are going to use the padding property this will help you to add space inside the HTML element here as you can see each value refers to space which needs to be added on each side of the element so to add the space around the button let's copy this now let's go to the end of the previous CSS line on the a tag and then paste the padding property here now you can change the size values as you need now if you save the file and refresh it you can see that a button has now got the right spacing next let's change this text color to white so let's go to the reference page and click color property now copy this code and paste it here now if we save and refresh you can see that our text is now in white finally let's bring this button to the center of this page so to bring the elements to the center of the page we have been using this CSS code but this code will not work for a few elements now if we go to our reference page and click this here you can find the list of elements which does not support the centering property and here you will find the elements which support centering property as you can see the attack does not support the text Ln property here so to Center this button we need to put the attack inside a div tag and then apply the CSS to it a div tag is used for grouping the HTML elements together and can also be used to position elements on the page so next let's see how you can move this button which is an air tag to the center with the help of a div tag so let's go to notepad now before the air tag let's enter the div tag and then go to the end of the attack and then close the div tag now to move this button to the center we need to add CSS to this div tag so let's type space style equal to double quotes and then copy this code and paste it here now if we click save and refresh you can see that our button has now moved to the center so now you know how you can add a button to your website and Center it on your page next let's see how you can add a video like this to your website now to add a video here let's go to the reference page and click this here you can find the video tag which can be used to add a video to your website so let's copy this and then go back to our Notepad and paste it here now like we did before for adding images inside the codes you can enter the name of the video file along with its extension there's also another way in which you can add a video file or an image file to your site which is to put your files inside a particular folder and then point to it so first let's create a folder called video and then copy our video to this folder now to add this to the website we need to enter the location of this video in our HTML code so let's go back to our Notepad and here instead of just a file name we need to add the location of the file before this name now as you can see this is the location of our video and this is our file name so let's enter both of them here and as you can see our folder is called video let's type video here and then type a slash now this tells our browser that it needs to look for this video inside the video folder now enter the file name and its extension which is MP4 so let's type dot MP4 once you're done save the file and now if we go back to our website and click refresh you can see that we have got a video okay now let's move this video to the center as we saw before the text align property will not work for a few elements so if we go to our reference page and go here you can see that video tag is not supported for xln property so like we did before we are going to add a div tag and then add CSS to it for centering the video so we'll copy this div tag and then paste it here now close the div tag and save the file now if you go to your website and click refresh you can see that the video has been moved to the center once you have added the video let's quickly add a heading before this so let's copy this heading and paste it here and now let's change this text now if we click save and then click refresh you can see that we have got a heading above our video so now we have successfully added these contents to our site next let's see how you can add a header like this which has a logo and a menu first let's see how you can add a logo to the top of our page so to add a logo let's go to our reference page and copy the image code here now go to notepad and paste it before the H1 tag now let's change the file name of our logo so let's enter the file name and extension now if we click save and click refresh you can see that we have got our logo now to move this logo to the center like we did before let's add the div tag so let's copy the div code from here and then paste it above the image then close the div tag now save the file and click refresh and as you can see the logo has been moved to the center now let's say you want to add space above the logo we can do that by adding margin top property so let's go to this tab and go to CSS tiles click margin now copy this code and then paste it here now if you saved the file and click refresh you can see that we have got the space above the logo so now we have successfully added the logo next let's see how you can add a simple menu like this to your website so to add a menu let's go to this reference page and go to HTML elements then click this link tag but this is the link which is going to help us create a simple menu so let's copy this code then go to notepad and then paste the code here in the same way you can paste as many codes as you want I'm going to create two more menu items once you have pasted the code the answer of this text let's add the name of the menu item we want to do that remove this text and then enter the name of the menu item you want I am going to enter home now in the same way let's enter the name of the menu items for the other tools once you have done that save the file and then go to this page and click refresh you can see that we have got a menu and as you can see our menu is not looking like how we wanted it to look so we will do the same styling that we have done here to do that we'll use the same code from here which has CSS code for margin and centering so let's select this copy this code till here and then paste it here once you've done that close the div tag and once you're done save the file now if we click refresh here you can see that our menu looks much better now okay now here you can see that there is not enough space between the menu items so let's see how we can add space between the menu of items and make our menu look better for the visitors so to add space we need to add a CSS property in the menu code so we've added let's go to this reference page go to CSS tiles then click padding now this code will help you create the space between the menu items so let's copy this code then go to notepad now before we paste the code here we need to enter a new code so after the a tag let's enter the code which is tile is equals to double quotes now inside the double quotes let's paste the code which we copied earlier once you have pasted the code now in the same way let's add the same CSS property for the other menu codes once you have done that save the file and click refresh and now you can see that pace has been added between the menu items okay now you know how to add space between the menu items and our menu looks much better now okay now if you click on any menu item you can see that it does not take us to any page this is because we didn't add the link to our menu item now in order to make the menu work first we need to create these pages and add a link to that page on our menu so next let's see how you can create another page on the website now instead of creating a new page from scratch I'm going to take a copy of this page and then change its content so let's go to the notepad then go to file click new window and a new window will be opened now let's copy this content in the home page and then paste it here once you have done that save the file now here enter the name of your page I'm going to call it as about and then type dot HTML to tell our computer that this is an HTML file and not a text file now make sure you save this file in the same folder where your home page is located and then click save now if we go to the file explorer and open the about page you can see that we have got the same content which we have on our home page so next let's start editing this page so to edit it let's right click on the about file then go here and click open with Notepad then you will get this about page HTML code okay now on this page I only have The Heading a paragraph and a button so first let's remove these sections from the page to do that first let's select these codes and delete it once you have done that let's start editing the content of our about page first I'm going to change the heading text and then the paragraph text so now if we save it and click refresh you can see that we have got our about page so now we have created another page on our website in the same way you can create other pages on the website once you have created all the pages let's minimize these two windows and we have the HTML code for our home page once you have done that next let's see how you can link these pages to the menu so to do that let's go to our home Page's HTML code now instead of this hashtag we need to add the links of the respective Pages now as we want this home menu item to take us to our home page file let's enter homed HTML instead of this hashtag now in the same way let's add a link for other menu items once you're done adding the page file names save the file and now if you go back to the home page click refresh and if we click on about you can see that it takes us to the about page which means the links have been added to our menu items now let's add the links to the other Pages too foreign once you're done now if we go to our website you can see that we have got clickable links on our menu and now if we click on about you can see that it takes us to the about page and if you click on service the service page will appear now we'll go back to home so this is how you can add a menu on your website and then link it to the pages you want okay so now we have successfully created our entire site and now you know how you can build your entire website using HTML now as you can see we have created our website locally on our computer and this means this site can only be viewed by us from our own computer now let's say you want the site to be viewed by everyone on the internet from anywhere on the world how can you do that so next let's see how you can make this website live for anyone on the internet once you do this anyone in the world will be able to access it now to make this website live we are going to do three steps the first step is to choose a name for your website so to choose the name click the link below this video and it will take you to this page now enter the name you want here and click search now you can see that this name is available once you choose your website name you can now go to the next step which is to get this domain name and hosting domain is the name of your website which people need to enter to visit your site hosting is the place where websites files are stored on the internet right now we have our website files here on our computer and see a website from the mobile or computer you need to get the hosting which will store these files on the internet and can be accessed by anyone so to get this domain name and hosting click get domain let's click add to cart click continue and it will take you to this page now here it will ask us to choose a hosting plan now hosting is needed so that your website is visible on the internet and can be accessed by anyone and as you can see here it provides the space to store your website on the internet So based on the number of websites that you want to build you can choose a plan here I want to build one website so I am going to choose this plan now here you can choose how long you want the hosting for you can choose any length here and as you go longer you can see that we are getting a discount now I'm going to choose 12 months and click continue now here you can see that we're getting a domain for free and our hosting now both of these are valid for one year which means once we complete this purchase our site will be live on the internet for one year so to get our domain and hosting let's fill up these details now here enter your details choose the payment method you want here again enter your details and click order now okay so now we successfully place the order and we've got a domain and hosting so now if we click here you can see that we have successfully got a hosting and domain so once you've got your hosting and domain now if you open a new tab and enter a domain name which is scoopies.com you can see that we have got this page this means our site is now live and now you can go to the third step which is to upload a HTML website files to our hosting to do that go to Wordpress hosting click hosting now click here then scroll down and click file manager and you will get this page now click public HTML folder and here we need to upload our files so to upload our files click upload here now let's open the folder which has our HTML files so once you have these files ready instead of uploading them one by one we are going to compress them into one file so to compress it let's select all the files then right click go to send to and click compressed file now you will get the zip file now just drag the zip file from your computer and drop it here the file will be uploaded to your Hosting account and once this done if you click go back you can see that we have got a zip file now to complete the upload we need to extract all our website files from the zip file so to extract the files just like zip file then click extract now click extract files and now if we click close you can see that all our website files are now extracted once you extract the zip file now if we go to this tab and click refresh you can see that we have got our website files here now if we click on any file it will take you to this page now instead of clicking on the files from here if you want to directly visit your site after entering your domain name we need to add a code to our hosting to do that let's go back to this tab click settings here now enable this and click save and as you can see we have got some more files now now to get a site directly when entering the domain name we need to add a code in this file so just right click on it click edit and again click edit now go to the video you're watching right now and in the description you will find the code which has to be added to your hosting so just copy the code go back to the hosting and paste it here and then click save changes now if we open a new tab and enter our domain name which is copies.com you can see that our website is live this is how you can publish your website live on the internet now you know how to publish your site by getting the hosting and domain and you can access your website by using the short domain name but if you don't want the short domain name and just want to publish your website online there's another way to do it which is completely free so next we're gonna see how you can publish your website on the internet for free in this free method you will be given a custom link like this for your website and anyone can access your website using that link but you will not be having short domain name for your website like website.com or dot org so to publish a site for free we are going to do four steps the first step is to create an account in GitHub this is the website which is going to help us publish our site on the internet go to github.com and click sign up Now to create an account fill up these details and click create account so now we have successfully created our account on GitHub once you have created your account we can now go to the next step which is to create a new project so let's click here and here you need to give a name for your project now enable this option called public click create Repository and it will take you to this page which means your project is now created once you have created your project we can now go to the third step which is to upload your website files so to upload your files click on uploading an existing file now before uploading our website files make sure your homepage is named index since GitHub will look for the index name file as the entry file for your site ours is called home so let's rename it to index okay now if you remember we added a link to our home page in the menu we added home.html but since we've renamed a home page to index if someone visits our site and clicks on our home page it does not take them to the home page so to fix this we need to change this link to index.html so to do that let's right click on the index.html page then go to open with and click Notepad now you will get the homepage HTML code page to allow the vistas to get the home page select this home and rename it to index once you have done that save the file and finally close this index page HTML code okay so now we've changed the menu item link which is home.html to index.html in the same way we need to rename the link home.html to index.html to the other pages so let's change it for your about page like we did before right click on about page file then go to open with click Notepad and you will get the about page HTML code now let's select home and rename it to index once you have done that save the file and close this file like we did before let's rename the link from home.html to index.html for the service page okay once you have these files ready just drag the files and drop them here as you can see the files are being uploaded once the files are uploaded scroll down and click commit changes so now we successfully uploaded the files to our website once you're done next let's go to the final step which is to publish your site so to publish your site let's go to settings click pages now click here and select Main then click save and now as you can see our site is ready and we have got the site link here to check that just click the link and as you can see we have got the exact site we created live on the internet so this is how you can publish HTML site on the internet for free okay that's it guys now you know how you can create your own website from start to end using HTML if you're ready to make the website on your own using HTML just click the link below this video and it will take you to the reference page which we saw in this video so make sure you use it and start creating your website today and if you want to learn how to create a website easily without coding you can watch this video now while creating your site if you need content for your pages or if you want to add blog posts there's an amazing AI tool that creates unique SEO optimized content it's called gravity red you can check it out using the link in the description so thanks for watching guys I'll see you all in the next video take care bye bye

Channel: Website Learners

Views: 317,189

Keywords: create website, html and css html tutorial, css tutorial, complete website design, how to create a website using html, create a website with html, html website tutorial, learn html for website, html for beginners, how to make a website, create a website for free, how to create a website with notepad, how to create a website with css, build a website using html and css

Id: sWoMNeHRcnk

Length: 45min 39sec (2739 seconds)

Published: Wed Jul 12 2023