Agenda

1. Intorduction to Web Development

2. Front-end Development and it’s frameworks.

3. Introduction to Web Page and it’s working.

4. What is HTML ?
5. Anatomy of HTML Element and difference between Element and a Tag.

6. What are Attributes in HTML Tags.

7. Head, Title and Body elements in HTML.

8. What are different types of Tags ?

Web Development:
Web Development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, we
programming, and database management. It is the creation of an application that works over the internet i.e. websites.

Web Development can be classified into two ways:

Frontend Development

Backend Development
So, in this module we are going to start our web development journey with Frontend Development:

Front-End Development:
Front-end web development deals with designing the look, the feel of the website, and the web applications from the users’ perspective. Hence, all
the things are considered such as the access to content, ease of navigation and elegant functionality of elements on the website, and more.
Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or We
Application so that a user can see and interact with them directly.

Frameworks for Front-End Development:

Frameworks :-
CSS: Bootsrap, Tailwind CSS, Material UI.
Javascript: React Js, Angular Js, Veu Js.
Stack for Frontend Development:
We are going to follow MERN Stack for our journey of learning Web Development.
And in this module as we are going over frontend development, So, we will be learning React part of our stack in this Frontend module after learning o
core for web page development i.e., HTML, CSS, JavaScript.

Web Page :
A webpage is a document written in HTML and can be viewed on any web browser. It is contained within the web server, which can be accessed b
entering the URL for that web page, and once it is loaded, it appears on the user's web browser. Each webpage is linked with a unique URL; hence tw
pages cannot have the same URL.
A webpage may contain text, links for other pages, graphics, videos, etc. Moreover, it is mainly used to provide information to the user in tex
images, etc.
A webpage is a part of a website; it means a website contains different web pages.

As we have seen a webpage is written document in HTML, which can be styled using CSS and can be made interactive using Javascript language, th
is why these are three primary basic technologies for web development.
A example of web page is as:
Working of a Web Page:
A simple web page is created using HTML, which is a markup language. However, we can also use CSS and JavaScript to add more functionalities an
make it more attractive.
It is created using HTML, hence containing different markup tags that specify how the data should be formatted on screen.
The webpage is contained within the webserver. To load this webpage, a client sends the request to the server, and generally, the browser is known a
the client, which can request the page on the internet.

The web browser requests the page on the internet. Once it is responded to by the server, the browser interprets the markup tags and displays them o
the user's screen in the correct format.

As we are starting our Frontend development in this module.

So, in this lecture we are going to start with the basics of HTML, Let’s now dive directly into HTML.

What is HTML ?
HTML is the building block any web page. HTML stands for “Hyper Text Markup Language”.

A markup language is a computer language that defines the structure and presentation of raw text.

In HTML, the computer can interpret raw textthat is wrapped in HTML elements.
HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You
probably clicked on a couple of hyperlinks on your way to this Codecademy course.

HTML is not a programming language, it is just a markup language which provides the basic structure and markup for a web page.
As we come across all kinds of documents in our daily lives such as Newspaper articles, Insurance forms etc. In all these documents, the structure an
markup of the information is very important in helping readers to understand the messages you are trying to convey and to navigate around th
document.
We can say that our web pages are the electronic versions of these documents and the structure and markup for the web pages is determined by HTML
We use HTML code to markup our website’s data with identifying tags so that the browser knows what type of data it is reading as well as how the da
should be displayed. We add HTML code to the words we want to appear on the web page.
Let’s take an example of HTML code:

<html>
<body>

<h1>This is the main heading.

heading.</h1>

<p>This is the first paragraph of the web page.

page.</p>

<h2>This is the sub-heading

heading..</h2>

<p>This is the second paragraph of the web page.

page.</p>

</body>

</html>

Output (Web page) from above code will look like as:

The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up
two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about th
information that sits between its opening and closing tags.
Let’s see the above example line by line:

The opening tag indicates that anything between it and a closing tag is HTML code.
The tag indicates that anything between it and a closing tag should be shown in the main window of the browser.
Words between

and
are main heading on the web page.
Words between and are the new paragraph on the web page.

Anatomy of HTML:
Let’s take a look at each part element:

Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.

Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.
Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash ( / ) inside of them, directly after
the left angle bracket.
Difference between an Element & Tag :
Element :
HTML uses different elements in it’s code.
Each element contains a closing and opening tag with the information given to the browser in between these tags.
Tag :
As every element in HTML contains a closing and opening tag.
These tag acts like containers. They tell you something about the information that lies in between in their closing and opening tags.

Attributes in HTML Tags:

Attributes provide additional information about the contents of an element.
They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

Attribute Name:
The attribute name indicates what kind of extra information you are supplying about the element's content.

Attribute Value:
The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different values.

Main Elements of HTML:

HTML Element:
The <html> element, the root of an HTML document. All content/structure for an HTML document should be contained between the opening an
closing <html> tags. It tells the browser that the code between these tags is html code.

<!DOCTYPE html>
<html>
<body>
<!-- code -->
<body>
</html>

Document Type Declaration:

The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to th
browser about what type of document to expect and which version of HTML is being used, in this case it’s HTML5.

<!DOCTYPE html>

Head Element:
The <head> element contains general information about an HTML page that isn’t displayed on the page itself. This information is called metadata an
includes things like the title of the HTML document and links to stylesheets.

<html>
<head>
Links and Metadata is contained in this element-->
--Links
<!--
</head>
</html>

Title Element:
The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser’s title bar or tab in which th
HTML page is displayed. The <title> element can only be contained inside a document’s <head> element.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
</html>

Body Element:
The <body> element represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Body of the page</p>
</body>
 </html>

Heading Tags in HTML:

Headings in HTML are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader
attention. Other times, headings are used to describe content, like the title of a movie or an educational article.
HTML follows a similar pattern. In HTML, there are six different headings*.* Headings **can be used for a variety of purposes, like titling section
articles, or other forms of content.
The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

1.

- For main heading.

2.

3.

4.

5.
6.

<h1>This is a Main Heading</h1>

<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

Result:

DIV Tags:
The <div> element is used as a container that divides an HTML document into sections and is short for “division”. <div> elements can contain flo
content such as headings, paragraphs, links, images, etc.
 <div> 's don’t inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. <div>
allow us to group HTML elements to apply the same styles for all HTML elements inside.

<body>
<div>
<h1>Using Div's.</h1>
<p>Great for grouping elements!</p>
</div>
</body>

Result:

Paragraph Tag:
To create a paragraph, surround the words that make up the paragraph with an opening
tag and closing
tag. By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs.

Span Tag:
<span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.

>
div>
<div
>Text Tags
h1>
<h1 </h1
Tags< >
h1>
>
div>
</div
>
div>
<div
<p><span>
span>Span Tag
Tag<</span> Inside of a paragraph Tag.</p>
span>
>
div>
</div

Result:
HTML Self Closing Tags:
A self closing tags in HTML are the type of HTML Tags that need not to be closed manually by its closing tag, which means there is no saperate closin
tag for it as .
A few examples of self closing tags are

, ,
,

, etc.

Self closing tags are also alternatively known as void tags, empty tags, singletons tags, etc. i.e these tags do not have contents and also can not hav
any child.

< br /> Line Break Tag:

As you have already seen, the browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line brea
inside the middle of a paragraph you can use the line break tag
.

Horizontal Line Tag:

To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between section
using the

tag.

<body>
<p>para before break<br />middle part of para after break
<br />last part of para after break
break..</p>
<p>Para before the horizontal line.
line.</p>
<hr />
<p>Para after the horizontal line.
line.</p>
</body>

Result :
Anchor Tag:
The HTML <a> tag defines a hyperlink i.e. you can click on a link and jump to another document.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

<a href="https://www.almabetter.com">Visit AlmaBetter</a>

In the above code, Visit AlmaBetter text will be shown on the browser window and when you will click it, then it will take you the destination defined in th
href attribute, which in this case is almabetter website.
Link Color:

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

Target Attribute in Anchor Tag:

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked

_blank - Opens the document in a new window or tab

_parent - Opens the document in the parent frame

_top - Opens the document in the full body of the window

<a href="https://www.almabetter.com" target="_blank" >Visit AlmaBetter</a>

In the above code, when you click on text Visit AlmaBetter shown on browser window then, it browser will open AlmaBetter website on a new window.

Lists in HTML:
Unordered List Tag:
You can use an unordered list tag ( <ul> ) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point

List Item Tag:

Each item in the list is placed between an opening
 tag and a closing
tag. (The li stands for list item.)

<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>
</ul>

Result:

Ordered List Tag:

Ordered lists ( <ol> ) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a proces
or rank items for first to last.

You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags

<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20 minutes until tender</li>
milk,
<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk mixture</li>
 </ol>

Result:

Image Tag:
To add an image into the page you need to use an

element. This is an self closing element (which means there is no closing tag).

It must carry the following two attributes:

src:

This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.
alt:

This provides a text description of the image which describes the image if you cannot see it.

title:
You can also use the title attribute with the

element to provide additional information about the image.

height, width:
These attributes specify the size of image on the page.

<img src="imgae-location.jpg" alt

src= ="a logo image" title
alt= ="logo of almabetter" />
title=

Video Tag:
To add an video into the page you need to use anelement.
Theelement has a number of attributes which allow you to control video playback:

src:

This attribute specifies the path to the video.

controls:

When used, this attribute indicates that the browser should supply its own controls for playback.
autoplay:

When used, this attribute specifies that the file should play automatically.
loop:

When used, this attribute indicates that the video should start playing again once it has ended.
preload:

This attribute tells the browser what to do when the page loads.
height, width:
These attributes specify the size of the player in pixels.

<video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300"

preload controls loop>
<p>A video of a puppy playing in the snow</p>
</video>

Button Tag:
The tag is used to create a clickable button within HTML form on your webpage. You can put content like text or image within the........ tag.
You should always specify the type attribute for
 tag. Different browsers use different default type for the button element.

<button type="button">Click Me</button>

There are some other HTML Tags which are as follows in the table below:

HTML Tag Description of the Tag

<abbr> Describes an abbreviation (acronyms)

<address> Describes an address information

<b> Specific text weight bold

<caption> Define a table caption

<code> Specifies computer code text

<del> Specific text deleted in web document

<dl> Define a definition list

<dd> Defines a definition description in a definition list

<fieldset> Defines a grouping of related form elements

<i> Defines a italic format text

<ins> Used to indicate text that is inserted into a page and indicates changes to a document.

<legend> Used to add a caption (title) to a group of related form elements that are grouped together into the
tag.

<map> Defines an clickable image map.

<q> Represents the short quotation.

<s> Text display in strikethrough style.

<samp> Represents text that should be interpreted as sample output from a computer program.

<u> Defines a underline text.

So, till now we have been able to learn all basics about HTML.

From next lecture, we are going to start some advance topics in HTML like tables, forms etc.

Interview Questions
What is HTML?

HTML or Hypertext Markup Language was created by Berners-Lee in 1991. It is a markup language used to create and structure website
templates or web pages to present the content on the World Wide Web. It consists of a series of elements and the HTML elements tell the
browser how to display the content. HTML helps in making the text more interactive and dynamic. You can save an HTML page by adding
.html or .html in web page name.

What is the difference between HTML elements and tags?

HTML Elements Tags

1. The element is an individual component of the HTML web page or document that 1. HTML tag (either opening or
consists of a start tag, its attributes, an end tag, and everything in between. closing) is used to mark the
start or end of an element.

2. They usually consist of a start tag, content, and an end tag. 2. They begin with < symbol
and end with > symbol.
Whatever is written inside < and
> are called tags.

3. HTML Elements hold the content. 3. HTML Tags hold the HTML
element.

4. They specify the general content. 4. HTML tags are like keywords.
Each tag has a unique meaning.

5. For example, 5. For example, is an opening

This is an example of a paragraph. anchor tag and is a closing
anchor tag.

What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are defined directly after the tag name. They only appear in
opening tags and not in closing tags.
HTML attributes usually consist of name/value pairs like name=”value”. The Attribute values should always be enclosed in quotation marks.
The name parameter takes the name of the property that is to be assigned to the element. The value takes the property value or extent of
the property names that can be aligned over the element.

Some commonly used HTML attributes include src Attribute, alt Attribute, id Attribute, and href Attribute.

Thank You !