7days. 😎
Yes I'm right you have e give only 7 dedicated days
Day 1
Did you know that the humble HTML code is the backbone of websites?
The HTML tells your browser what each part of the website's content is, and the frame structure of the website is built into the HTML. HTML stands for Hyper Text Markup language and it is the standard markup language for web pages.
Note:- HTML is not a programming language 😁👍
What is the structure of HTML?
<!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>adovdo</title>
</head>
<body>
<a href="indext.html" target=""> Home</a>
<h2>Audio</h2>
<audio controls src="audovdo/audio.mp3">
<a href="audovdo/audio.mp3"> Download audio</a>
</audio>
<h2>video </h2>
<video controls width="250">
<source src="audovdo/video.mp4"
type="video/webm">
</body>
</html>
<!DOCTYPE html>
The HTML page structure includes the very first <!DOCTYPE> it tells the browser know about the version of or standard of HTML but wait it is not a tag or Element remember that.
the head and body tags are used to define the structure of a web page. The head tag contains information about the document, such as the title, meta tags, and some link tags and the body tag contains the actual content of the page.
Inside the head of HTML
The title tag:
<title>FirstWebPage</title>
defines the title of the HTML document. Which you see in the title bar or the page's tab. Yes, these are the important tag for the Html document for SEO.
The Link tag
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
This tag is mostly used to link external resources to the current document like Stylesheets of CSS Or most interesting this is to add a favicon to the website.
The Style tag:
<style>
body{
background-color: aquamarine;
}
</style>
Is a tag that adds internal style to the webpage or the CSS code. We will discuss it more in the CSS Part.
The meta Tag
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
the tag describes the metadata of the HTML page where it contains the page description
Body of HTML
<body>
<a href="indext.html" target=""> Home</a>
<h2>Audio</h2>
<audio controls src="audovdo/audio.mp3">
<a href="audovdo/audio.mp3"> Download audio</a>
</audio>
<h2>video </h2>
<video controls width="250">
<source src="audovdo/video.mp4"
type="video/webm">
</body>
Every information or data that you see on a web page is written in the body of the HTML. That means Body Tag plays the most important role in the web page.
Headings in HTML
h1 to h6 in this h1 tag defines the most important heading and h6 is the least important heading on the HTML page.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
P and Pre-tag
P and Pre-tag define the paragraph on the web page.
<p>Hello world I’m paragraph</p>
lorem ipsum
Whenever we use text tags in HTML we need the text feeler to work efficiently without losing our concentration on reading the meaning. For that, we use lomrem ipsum which generates a random paragraph for us.
<p>lorem30</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nostrum sequi aperiam deserunt odio architecto consequatur? Quae, animi tempore ut quaerat obcaecati praesentium, fugiat fuga eos quibusdam libero impedit? Quo.</p>
Hello world on the web page😂
Without hello world, we are not developers. 😁😊
<!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>FirsrWebpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Now you have e basic understanding of how HTML works and we created our first web page. Part two coming soon...