For starting career as a website designer and developer, you need to get your hands on front-end as well as back-end programming languages. First start with front-end and then proceed to back-end. In the list of front-end languages, HTML comes at the top. It is the most essential one to learn before any language to build a website. In this blog, we are going to see how a basic page is created in HTML.
But before that, let me make you familiar with what HTML really is.
What is HTML?
HTML term mainly stands for Hypertext Markup Language which provides seamless code for creating web pages. It creates the structure of a web page and its elements such as the main pieces of content including heading, paragraph, hyperlinks, etc. HTML5 is the latest version of this web designing language.
Basic types of tags in HTML
1. < !DOCTYPE html > :- This tag is define to html 5 documents, in which all tag is included like head, body, heading, paragraph etc.
2. <HTML>:- This tag defines the root elements of an HTML page.
3. <Head>:- This tag defines the Meta information about the HTML page.
4. <Title>:- This tag defines the title which will be page's title and will show in browser’s tab.
5. <Body>:- This tag defines the body of the document which further includes the tags for adding things like images, paragraphs, headings, hyperlinks, tables, etc.
6. <H1> to <H6>:- There are 6 main heading tags which define the heading in the web page. <H1> is the most important one and <H6> is the least in importance. You can use different tags of headings as the order.
7. <p>:- This tag defines the paragraphs in the web page
Important structure of tag comes under two hats. First is opening tag which comes with the symbol of <>, and second is closing tag which comes with symbol </>.
For instance, for adding heading, you need to add a heading tag with its opening and closing symbols: <h1>heading</h1>.
A simple HTML syntax
<!DOCTYPE htmI>
<htmI>
<head>
<title>page title</title>
</head>
<body>
<h1>My first heading</h2>
<p>Paragraph</p>
</body>
</html>
When add some other elements like Meta tags to this syntax, we get basic page. Below is the syntax, you can follow to create a basic page structure. Meta tags helps browsers and search engines to understand the code.
How to create basic page structure in HTML?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport"content="width=device-width, initial-scale=1.0">
<title>HTML basic</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is the home page of the website</p>
</body>
</html>
Types of colors in HTML
We can’t just imagine a website without colors. In HTML, we can add colors by specifying the name. For instance, take orange, violet, gray, tomato, etc.
There are 3 main areas where you can add color in HTML:
• Background color
• Text color
• Border color
Let’s see how to add colors by defining the type.
1.) Background color: - You can set the background color for HTML elements by following the below given syntax.
<h1 style="background-color: Dodgerblue; ">My heading </h1>
<p style="background- color: Tomato; ">My paragraph</p>
2.) Text color: - You can set or fill any colour on your text. To do so, follow the given below syntax.
<h1 style="colour: tomato">heading</h1>
<p style="colour: medium sea green; ">paragraph</p>
3.) Border colour: - You can add boundary or outline around the text and can give colour to it. Check given below syntax.
<h1 style="border: 2px solid tomato; ">heading</h1>
<h1 style= "border: 2px solid Dodger blue; ">heading</h1>
<h1 style="border: 2px solid violet; ">heading</h1>
When it comes to website creation, no one can ignore the existence of CSS.
CSS: A Styling Friend of HTML
CSS is not a programming language; it is basically a style sheet which has the capabilities to transform the website with its interactive elements. With CSS (Cascading Style Sheets) you can add animations, transitions, and many interactive effects that attract the visitors of your website.
For instance, adding colors through CSS is much easier and quick.
Here’s the example.
<html>
<head>
<style>
body {
background-colour: lightblue;
}
h1{
colour : white;
text-align :center;
}
p{
Font-family: verdana;
Font-size:20px
}
</style>
</head>
<body>
<h1>My first css example</h1>
<p>This is a paragraph</p>
</body>
</html>
If you want to learn both HTML5 & CSS3 from beginning till advanced stage then you get enrolled in Delhi’s best HTML5 & CSS3 training institute which is ADMEC Multimedia. ADMEC Multimedia Institute offers the best HTML5 & CSS3 courses for aspirants like you who want to be a web developer. Get set to start you training with us. Call on +91 9811818122 to attend a demo session today.
