Day 1

HTML

HTML Declaration
- Every HTML starts with a document type declaration: <!DOCTYPE html>
- A DOCTYPE will specify that the type of the document is HTML so that the browser can identify.
- For VSCode you can use '!' to generate the basic HTML sitemap such as below so you don't have to type through all the basic elements 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>Hello World</title>
</head>
<body>
    <h1>This is the body</h1>
</body>
</html>

Headings

defined from h1 to h6
the headers are used based upon priority and importance of the text

<body>
	<h1> First Heading </h1>
	<h2> Second Heading </h2>
	<h3> Third Heading </h3>
	<h4> Fourth Heading </h4>
	<h5> Fifth Heading </h5>
	<h6> Sixth Heading </h6>
</body>

Result:

Paragraph

The p tag is used to create a paragraph or a group of text and is incorporated between<p> tag.

<body>
	<p>
		This is a paragraph
	</p>
</body>

Anchor Tag
- The anchor tag is used to hold the url and it uses href which is a hyperlink reference.
- It can also be used with image and when clicked on it's content, it redirects the user to the path that was determined within the anchor tag.
```
<body>
	<a href = "https://www.google.com">Google</a>
</body>
```
Block element and inline element
- Block element will always start with a new line
- The element will come as a block level
- <span> tag , <img> tag
  - it creates an inline element that mark up the part of a text or image element
Elements in HTML5

The elements are also known as tags and includes various tags such as <header> <footer> <canvas> and many more.

HTML5 - New Tags (Elements)

Attributes in HTML5

The attributes defines properties of the element such as width and height of the image.

List of attributes in HTML5:

href

<!--
The href attribute specifies the URL of the page that <a> tag defines
-->

<a href="https://www.google.com"> Google </a>

src

<!--
The src attribute specifies the path to the image.
-->

<img src="hello.jpg">

width & height

<!--
It is used to specify the width and height of an image.
The width & height is determined in pixels.
-->

<img src="hello.jpg" width="300" height="400">

<!--
You can use this in CSS instead of HTML as well.
-->

alt

<!--
This attribute is used to define an alternate text for an image.
It is useful for accessibility because:
1. If a user uses a screen reader, this tag will help them read.
2. If a slow connection, then this tag will let user know about the content.
-->

<img src = "hello.jpg" alt="This is a hello">

style

<!--
It is used to add styles to an element, such as color, font, size.
-->

<p style = "color: blue;"> Red Colored Text </p>

<!--
This component is a part of stylesheet.
-->

lang

<!--
The lang attribute is used to define the language.
The language that is set for this code is english as en.
-->

<!DOCTYPE html>
<html lang="en">

title

<!--
It defines some extra information about an element.
The text defined in title is displayed when u hover the cursor
to that element.
-->

<p title="This is a hello world text"> Hello World </p>

HELPFUL LINKS:

HTML Tutorial

HTML Tutorial for Beginners: HTML Crash Course [2021]

Learn HTML - Free Interactive HTML Tutorial

Day 1

HELPFUL LINKS:

Read more

Day 3

Day 2 [ HTML + CSS ]