HTML stands for Hyper text markup language. It is used to create the structure of our web pages. In earlier years it was used to make documents that were displayed as web pages, Its purpose still hasn’t changed but now its much more than just creating documents .It is one of the 3 major languages used in Web development.
Those three languages are :
- HTML
- CSS
- JavaScript
- All of them have different purposes and features that are combined to make a single website.Think of a Website as a Human Body , The HTML would be its skeleton , CSS would be its outer features and JavaScript would be all the internal functionality !
HTML Elements :
HTML elements are basic blocks of a web document.Different Elements have different properties and when combined with other elements can produce changed results.
In this section we will learn about HTML basics. The Elements we will cover are :
Basic HTML boilerplate: This is a basic HTML document.
<!DOCTYPE html> means that document type is html. After that is the html tag with lang attribute in it showing that the language is English.
<head> tag is used to give information about the web page.It contains many meta elements showing which character set to use and what should be the content width.
<title> tag is used to show the title of the page ( usually the one written on the opened tab button)
</> indicates the closing of a tag.
<body> represents the body of the web page.<!-- This is a basic html structure --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html>
Text (displaying text on a web page):
in the <body> tag you can see different elements used such as <p> representing a paragraph and <h1> representing a heading with 1 being the a bigger font and 6 being the smallest.Although keep in mind that its not a matter of size (size can always be changed using css) , headings are used according to the importance of the content.It is preferred that we use only one <h1> heading so that search engines can easily figure out what the content is about !<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is a web page</p>
<h1>This is a html document</h1>
<h3>This is a beginners guide </h3>
</body>
</html>
Note : If you are a extreme beginner and are not sure how to output the result, all you have to do is to open the html document using your web browser.
Entities : Some characters are reserved in HTML , so in order to display them we have to use a special notation.Suppose we wanted to display “I love <html>” on the web page.When we write it in a <p> tag the editor confuses it with <html> element which is another tag.So to solve this problem we use html entities.
The & sign is used , lt stands for less than.
> means greater than.
There are many other entites we can use.You can look up for them if you want to, but we rarely use them.Hyperlinks : Almost all the web pages on the internet include links to other pages.To add these links to our web page we use the anchor element or the <a href=”” >. Every anchor element should have a href or hyper text reference attribute.
What this code does is it creates a word named google and when you click on it , the google search page is opened. target="_blank" attribute means the page will open in a new tab. If we don't use this attribute the page will open in the current tab.</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
</body>
</html>
We can use this element to create link between different pages of our website i.e home page , about page …
Embedding Images : The <img> element is used to add or link images to our website. It includes a src or source attribute and a alt or alternative (text to be displayed in case the images is not available).
</head>
<body>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo">
</body>
</html>