HTML Basics in 4 Minutes

hey Welcome to our first lesson on HTML you want to know how to make websites right you are in the perfect spot because HTML is where it all starts HTML is like the skeleton of any website and guess what we are going to learn it together step by step you might be wondering what is HTML all about it stands for hypertext markup language cool to know but that info alone isn't enough first up HTML is used for structuring web pages think of it as the blueprint of a building and where can we see our HTML code in action right in a web browser like Google Chrome at its core HTML is made up of elements these are the building blocks like paragraphs images and links that you can piece together to build something great to sum it up HTML structures your web pages is viewable in a browser and consists of elements all right let's get started and have a look at some HTML code here you can see HTML code to the left and to the right you will see how the code looks when you open it in the browser it shows a very simple web page with only two elements a heading and a text paragraph now I'm going to show you how to download a code editor I'm using intellig idea ultimate but it's a professional tool which costs some money so I recommend you getting the community version which is completely free another popular and Powerful code editor is Visual Studio code which is also free to download and use after you have downloaded your code editor it's time to open it first we want to create a file called index.html the index. HTML file always serves as the homepage of your website the homepage is the first page which is shown when you open the website in the browser remember that every HTML file consists of elements now we will have a closer look at how elements work most elements consists of two tags the opening and the closing tag the element we have just created here is the so-called HTML element which is the main element of every HTML page next we're going to have a look at the head element the head element is used to define metadata of the page for example the title of the page let's set the title to my website as you can see just as the main element before the title element has an opening and closing tag too let's open the HTML file in the browser now we just get to see a blank page that's because we haven't added any any content elements to the page yet but a very interesting thing we already can see is the website's title which is shown in the browser tab above now we will learn the cool stuff and that's how to add content to our web pages all of the content elements of a web page are defined within the body element let us create the body element just like the other elements before with an opening and closing tag now it's time to add our first content element to our page it's an H1 heading which is the main heading of the page you will learn more about HTML headings in a future video of this course now it's time to see our code in action and have a look at our newly created heading in the browser a heading alone is boring so we're going to add a text paragraph so our heading isn't lonely anymore you can create text paragraphs using the P element when we open the browser again we will see our heading and the text paragraph the last thing we're going to learn in this video are HTML attributes attributes are a way to customize HTML elements for example to define the target URL of a link to create a link element with HTML we use the a tag attributes are defined within the opening tag of elements to define the target URL of this link we use the hre attribute let's point the link to Wikipedia the text between the opening and closing tag is the label of the link which is shown on the page let's set the label to Wikipedia as well we want to open the browser again and have a look at our link now as you would expect if we click the link the browser navigat to Wikipedia we have reached the end of this video thank you for watching if you like the series so far give the video a like And subscribe to our channel to not miss out on any content about learning to code

Channel: Learndev

Views: 17,718

Keywords: HTML, Learn to code, Coding tutorial

Id: 7M9JSPKAbvk

Length: 4min 13sec (253 seconds)

Published: Fri Mar 15 2024