Scribd
Upload
2 views

HTML pdf

The document provides an introduction to HTML, explaining its purpose, structure, and basic elements such as tags, headings, paragraphs, and links. It includes examples of HTML code and describes how to create and view HTML documents in a web browser. Additionally, it covers HTML attributes and their usage in enhancing web content.

Uploaded by

Ahalya Lakshmi Pamireddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML pdf

The document provides an introduction to HTML, explaining its purpose, structure, and basic elements such as tags, headings, paragraphs, and links. It includes examples of HTML code and describes how to create and view HTML documents in a web browser. Additionally, it covers HTML attributes and their usage in enhancing web content.

Uploaded by

Ahalya Lakshmi Pamireddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 72

CHAPTER - 1 :: INTRODUCTION TO HTML

:::::::HTML::::::

* HTML stands for Hyper Text Markup Language.


* HTML describes the structure of web pages using markup.
* HTML is used to provide the content(words, images, audio, video, and so on) to
the web pages.
* HTML is a tag-based language. They are defined within the angle brackets(< >)
* HTML files can be created using a text editor.

HTML document is a text document saved with the extension .html or .htm that
contains texts and some tags written between "< >" which give the instructions
needed to configure the web page.

:::Sample HTML document:::

<!DOCTYPE html>
<html>

<head>

<title> Coding Ninjas </title>

</head>

<body>

<h1>Welcome to Coding Ninjas ! </h1>


<p> Let's Start Learning </p>

</body>

</html>

Remember to save the above file with the .html extension. The above code is
called the source code of a website..
All the keywords written between the angular brackets(< >) are different, tags
used for different purposes.

**<!DOCTYPE html> tells the browser that the file being displayed is HTML5 page.
doctype declaration is case insensitive.

**<html> meant to contain all the HTML data and is the start of an HTML
document.

**<head> provides information about the document. It is not displayed in the


browser window.

**<title> provides a title for the document.


**<body> contains everything visible on the web page, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

**<h1> element defines a large heading

**<p> element defines a paragraph

:::HTML ELEMENTS:::

Elements are the things that make up the web page. Tags just
define the beginning and end of the elements. Everything that a web page
includes is an HTML element.

<tagname> Content… </tagname>

➢ The HTML element starts with a opening tag: <tagname>


➢ The content of the HTML element is: Content...
➢ The HTML element ends with an closing tag: </tagname>

Example : <p> Hello World ! </p>

<h1> Hello World ! </h1>

::br Tag::

<br> tag is used to introduce a single line break between the


contents. This means that when this tag is used in between a single line, the
content after this tag will move to the next line.

Example : <h3>We are studying in<br>Coding Ninjas</h3>

Output: We are studying in


Coding Ninjas

Note : Some HTML elements have no content (like the <br> element). These
elements are called "empty elements". Empty elements do not have an end tag!.
::HTML document in Browser::

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to


read HTML documents and display them correctly.
>> Open the file saved with the .html extension, and automatically it will open
in the browser and all the content written inside the <body> tag will be
displayed in the browser.

Coding Ninjas

Welcome to coding Ninjas !


Let's Start Learning

A browser does not display the HTML tags but uses them to determine how to
display the document:

**View source code**

<!DOCTYPE html>
<html>

<head>

<title> Coding Ninjas </title>

</head>

<body>

<h1>Welcome to Coding Ninjas ! </h1>


<p> Let's Start Learning </p>

</body>

</html>

By right-clicking on the web page and selecting the view page source option you
can view the HTML code of that web page.

**HTML codes are written in text editors, and then they are saved with .html or
.htm extension.

Some famous text editors -

1..Visual Studio Code


2..Sublime Text
3..Windows Notepad
Apart from them, many online text editors are also available.

Getting started with HTML::

Step 1 : Install and Open any of the above-mentioned text editors

Step 2 : Write your HTML code

Step 3 : Save your HTML code with .html extension

Step 4 : View the HTML Page in Your Browser

Open the HTML file in any of the browser.

**Basic Code**

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

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MY WEB </title>

</head>

<body>

<h6>
Hello World!
</h6>

</body>

</html>

Save: File name: index.html


Save as type: HTML

CHAPTER - 2 :: HTML TAGS

TOPIC - 1 : HTML Tags and Elements:::

::Tags::
Tags define all elements of the document, i.e. they give meaning to the
plain text of HTML.

.. HTML tags are surrounded by the two characters < and > (They are called
"angle brackets")

'' The tag name can either start from an alphabet or an underscore( _ )

'' The text between the start and end tags is the element content.

'' Tags with an opening and closing can have any number of tags within
themselves

.. HTML tags are not case sensitive, <p> means the same as <P>

'' HTML tags normally comes in pairs("container tags"), i.e. both opening and
closing(it is the same, just the name of the tag with the character '/ ' in the
beginning) tag

Eg: <html> and </html> is a tag that comes in pair

E.g., <br> does not have a closing tag

NOTE : You might come across "self-closing" tags, whereby a br tag, for, e.g..,
will look like <br/> instead of simply <br>.

1. Comments in HTML:">

The comment tag <!-- --> is used to insert comments in the source code.
Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the
source code at a later date. This is especially useful if you have a lot of
code.

2. Paragraphs:">

Paragraphs are blocks of text separated from each other by some space.
They are defined using the <p> and </p> tags. When the p element ends, the next
element appears in the next line.

Example : <p> Sample text ! </p>

Below is the sample code for <p> tag


<!DOCTYPE html>
<html>

<head>

<title>p tag</title>

</head>

<body>

<p>This is line 1.</p>


<p>This is line 2.</p>

<!-- trying to format the text without using p-tag -->


This is line 1.
This is line 2.
This is line 3.

</body>

</html>

It appears on a web browser like this:

P tag

This is line 1.
This is line 2.

This is line 1. This is line 2. This is line 3.

NOTE : When formatting without a p-tag, new lines are appended on the current
line. This happens because the spacing of text doesn’t matter to the browser.

3. Headings:">

These are tags in HTML to mark some content as headings. In fact,


there are six different levels of headings h1, h2, h3, h4, h5 and h6. Among
them, h1 defines the largest heading, and h6 defines the smallest level heading.

Sample code for H tags

<!DOCTYPE html>
<html>

<head>

<title>Heading Levels</title>
</head>

<body>

<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>

</body>

</html>

4. Line Breaks:">

There are multiple ways to provide line breaks or move the content to the
next line.

Writing the HTML code in the next line does not mean it will display the same in
the browser.

Example :
<p>
Hello world !
Welcome you all
to Coding Ninjas
</p>
Display on Browser : Hello world ! Welcome you all to Coding Ninjas

5. HTML Horizontal Rules:">

The <hr> tag defines a thematic break in an HTML page, and is often
displayed as a horizontal line.

The <hr> element is used to separate content (or define a change) in an HTML
page.

NOTE : The <hr> tag is an empty tag, which means that it has no end tag.

6.Break Tag:">

<br> tag is used to introduce a single line break between the


contents. This means that when this tag is used in between a single line, the
content after this tag will move to the next line.
TOPIC - 2 :: IMAGES :::

::IMAGES IN HTML::

Overview:"

You can also directly use the image address from the browser

EX: <img src = "https://files.codingninjas.in/0000000000000723.jpg">

Browser: logo of coding ninjas

TOPIC - 3:: Anchor Tag:::

::Anchor tag in HTML:::

The <a> tag defines a hyperlink, which is used to link from one page to
another.

..You must have seen that clicking on a link opens a new page may be on the
same page or another.

..These web pages are connected using links. They give us the ability to go to a
different web page without each time entering its URL. These kinds of links are
external links, i.e. they help in connecting to external web pages.

..Links can also be internal, which means that they will be linking the content
within the same page. E.g., link to the top of the page or any link to any
specific content on the page.

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

1. href Attribute:">

The most important attribute of the <a> element is the href


attribute, which indicates the link's destination. In other words, the href
attribute is used to address the document to link to.

An anchor can point to any resource on the Web: an HTML page, an image, a sound
file, a movie, etc. These all are known as external links.

Ex::
<h2>Let's start Learning!</h2>
<p> Take daily challenges at
<a href = "http://www.codingninjas.in/students/assignments">Coding
Ninjas</a>

Brower: Let's start Learning!

Take daily challenges at Coding Ninjas.

here Coding Ninjas will get clickable link on that .That will go to what you
have to seen..

NOTE : You need to remember that here also, we can provide the relative URL of a
file as a value to href attribute. Eg: href="/home/myPC/Documents/test.html".

2.Relative and Absolute Linking:">

Relative linking is used to specify local links, i.e. link to files


inside the root folder.
Absolute linking is used to specify outside links, i.e. URL of the web pages.

Relative links works relative to the page. So, when a user clicks a relative
link, the browser looks for the location of the file relative to the current
page.

Four situation arises in this case:-

&.File is present in the same folder - In this case, the name of the file is
provided. Eg: <a href="relativeFile.html">Click Me</a> , will look for the file
inside the same folder.

&.File is present in the subfolder - In this case, the name of the file
provided is preceded with the folder names according to hierarchy.

Eg: <a href="subfolder/down/relativeFile.html">Click Me</a> , will move to


the 'subfolder' folder, then to 'down' folder and look for the file inside it.

&.File is present somewhere in the parent folder - In this case, to move one
folder above use '../'

Eg: <a href="../relativeFile.html">Click Me</a>, will move to the parent


folder and look for the file inside it.

&.File is present in another subfolder of the parent folder - This case covers
the above two cases.

Eg: <a href="../subfolder/relativeFile.html">Click Me</a>, will move to the


parent folder, then to folder named 'subfolder' and look for the file inside it.

Absolute links provide the complete web address of the web page where you want
to go.

Eg: < a href="https://www.codingninjas.in/"> Click Me </a> , will make the


browser directly go to the specified URL.

3.target Attribute:">

With the target attribute, you can define where the linked document
will be opened.

The target attribute has the following values:

.._self : load the URL into the current tab itself. This is the default.

.._blank : load the URL into a new tab or browser window.

.._parent : load the URL into the parent browsing context. If there is no
parent, this behaves the same as _self.

.._top : load the URL into the top-level browsing context. If there is no
parent, this behaves the same as _self.

The line below will open the document in a new browser window:

<a href="https://www.codingninjas.com/" target="_blank" > Coding Ninjas </a>

NOTE : By default, the linked page will be displayed in the current browser
window.

**Code**

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

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Anchor Tag</title>

</head>

<body>

<h1>Anchor Tag</h1>

<p>The <code>&lt;a&gt;</code> tag is used to link a page with other


page, by defining a hyperlink.</p>

<p>It has several attribute but the most important are following :

<ul>
<li><b>href</b> attribute used to define the resource path.</li>

<li><b>target</b> attribute used to specify where to open the


linked page, means within the same page or in a new tab. corresponding values
are _self and _blank.</li>
</ul>

</p>

<!-- define anchor tag here -->


<a href = https://www.naukri.com/code360>Coding Ninjas</a>

</body>

</html>

Output::

Anchor Tag

The <a> tag is used to link a page with other page, by defining a hyperlink.

It has several attribute but the most important are following :

. href attribute used to define the resource path.

. target attribute used to specify where to open the linked page, means
within the same page or in a new tab. corresponding values are _self and _blank.

Coding Ninjas
TOPIC - 4:: Attributes in HTML::

:::Attributes in HTML:::

HTML Attributes can provide additional information about the HTML


elements on your page and control their behaviour.

Example : <tag_name attribute_name="value_value">Content Enclosed</tag_name>

Some points to remember:

..Attributes always come in name/value pairs like this: attribute_name="value".

..Attributes are always added to the start tag of an HTML element.

..Attribute values should always be enclosed in quotes. Double style quotes (“


”) are the most common, but single style quotes (‘ ’) are also allowed.

..In some rare situations, like when the attribute value itself contains quotes,
it is necessary to use single quotes: name='John "ShotGun" Nelson' and
vice-versa.

1.href Attribute:">

href attribute specifies the URL of the page, the link which we need to
provide in the anchor tag.

Example: <a href="https://www.codingninjas.com/"> Coding Ninjas </a>

2.src Attribute:">

The <img> tag is used to embed an image in an HTML page. The src
attribute specifies the path to the image to be displayed:

Example : <img src="https://files.codingninjas.in/cn-logo-dark-9824.svg" >

3.width and height Attributes:">

The <img> tag contains the width and height attributes, which specifies
the width and height of the image (in pixels)
Example : <img src="path.jpg" width="500" height="600">

4.alt Attribute:">

alt attribute or alternate text tells the reader what they are
missing on a page if the browser can't load images. The browser will then
display the alternate text instead of the image.

Syntax: <img src="images/logo.png" alt="Coding Ninjas image">

Browser: Coding Ninjas logo

5.style Attribute:">

style attribute is used to add styles to an element, such as colour,


font, size, and more.

Ex: <p style="color:blue;"> Coding Ninjas</p>

Browser: Coding Ninjas in blue color.

..We will cover the style tag in the next module.

TOPIC - 5: Style Attribute (Inline CSS):::

::Styling in HTML::

Styling on HTML elements can be done by using the style


attribute and
providing some specific values to it. Styling could be done on colour, font,
text size etc.

Syntax : <tagname style = " property : value ; ">

.The property is a CSS property. The value is a CSS value. We will learn
about CSS later.
1. Text Color:">

The CSS colour property is used to set the text colour for an
HTML element.

EX: <h1 style = " color : red ; ">Welcome to Codig ninjas !</h1>
<p style = " color : green; "> Let's start Learning </p>

Browser: Welcome to coding ninjas !, will display in red color.

Let's start Learning, will display in green color.

2. Text Size:">

The CSS font-size property is used to set the text size for an HTML
element.

..You can see in the above example both of the paragraphs have different text
sizes.

EX: <p style = " font-size : 30px;"> Welcome to Coding ninjas !</p>
<p style = " font-size : 100px;"> monospaceLet start Learning</p>

3. Fonts:">

The CSS font-family property is used to set the font to be used for an
HTML element.

Ex: <p style = " font-family : sans-serif ; "> Welcome to coding ninjas! </p>
<p style = " font-family : monospace ; "> Let start Learning </p>

4. Text Alignment:">

The CSS text-align property is used to set the horizontal text


alignment for an HTML element.

EX: <p style = "text-align : center ; "> Welcome to coding ninjas ! </p> # It
will display in center of the screen
<p style = "text-align : right; "> Let start Learning</p> # It will display
in right side of the screen.

5. Background Color:">

The CSS background-colour property is used to set the background colour


for an HTML element.
Ex: <body style = "background-color : yellow">
<p style = "text-align : center ; "> Welcome to coding ninjas ! </p>
<p style = "text-align : center; "> Let start Learning</p>

</body>

6.Multiple styles:">

We can also merge the above styles and set the properties for them, and
properties are separated by semicolons( ; ).

Ex: <p style = "text-align : center ; color : red "> Welcome to coding ninjas !
</p>
<p style = "text-align : center; color : green "> Let start Learning</p>

..In the above example, we merged text-align and colour property for a p-tag.

TOPIC - 6: Text Formatting:::

::Text Formatting in HTML::

HTML provides us with the ability for formatting text just like we do
it in MS Word or any text editing software.

The following HTML tags are used to format the appearance of the text on your
web page.

This can jazz up the look of the web page. However, too much variety in the
text formatting can also look displeasing.HTML also defines special elements for
defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic
text.

Formatting elements were designed to display special types of text :

<b> Defines bold text </b>

<em> Defines emphasized text </em>

<i> Defines italic text </i>

<small> Defines smaller text </small>

<strong> Defines important text </strong>


<sub> Defines subscripted text </sub>

<sup> Defines superscripted text </sup>

<u> Defines underlined text </u>

<ins> Defines inserted text by underlying the text


</ins>

<del> Delete text </del>

<s> Defines Text that is no longer correct, accurate or


relevant by striking through it </s>

<mark> Defines marked/ highlighted text</mark>

<pre> Defines preformatted text </pre>

<tt> Defines text appears as typed by a typewriter </tt>

<code> Defines piece of computer code </code>

<q> Defines the short quoted text </q>

<cite> Defines reference to a cited work </cite>

<abbr> Defines an abbreviation or acronym </abbr>

TOPIC - 7 : Colors:::

:::Colours in HTML:::

The colour property is used to set the foreground colour of an


element's text context and its decoration.

1. Background Color:">

The background-color property sets the background colour of an


element. It has the same value as that of the colour property.

EX: <p style = "background-color : yellow"> Hello </p>

browser: For Hello , the background colour will display in yellow.

2. Text Color:">
The color property sets the colour of an element. It has the same
value as that of the colour property.

Ex: <p style = " color : yellow ;"> Hello </p>

Browser: Hello, will be display in yellow.

3. Border:">

You can make borders around an element which have some specific width,
type and colour. We will cover Borders later in the CSS module .

Ex: <p style=" border : 2px solid green;"> Hello </p>

Browser: Hello , Border will be green color.

4. Colour Values:">

The colour property can be specified in 6 different ways. Each one of


them provides has some difference from the other.

**By name:

All modern browsers support 140 different colours named in CSS. Unlike
HTML, CSS will completely ignore unknown keywords.

The color keywords all represent plain, solid colours, without transparency.

Example: orange, green, blue, light grey, etc.

**Using rgb:

RGB stands for Red, Green and Blue. It is a colour model where a combination
of red,
green and blue forms a colour. The intensity of each colour has values ranging
from 0 to 255. This provides a very large number of colours dataset.

Example : the RGB value for black is: rgb(0, 0, 0) and for white is: rgb(255,
255, 255).

**By hex code:

The colours can be represented by 6 digits hexadecimal code. The codes


are made using the 3 colours (Red, Green and Blue). The first 2 digits are red,
the next 2 are green and the last 2 are blue. So, the syntax for hex code is:
#RRGGBB.

Each hexadecimal value between 00 - FF is similar to 0 - 255.

Example : #000000 is black and #FFFFFF is white.

**Using hsl:

The colour can also be specified using the HSL (Hue, Saturation and
Lightness) components.

..Hue is a degree on the colour wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.

..Saturation, represents the amount of saturation in the colour. It is a


percentage value, 0% means a shade of grey, and 100% is the full colour.

..Lightness, represents the amount of light in the colour. It is also a


percentage, 0% is black, 50% is neither light nor dark, 100% is white.

**Using rgba:

RGBA (Red, Green, Blue, Alpha) is an extension of RGB, provided with alpha
transparency. This alpha value determines the opacity of the RGB defined colour.
The alpha parameter is a number between 0.0 (transparent) and 1.0 (opaque).

Ex: rgba(255, 0, 0, 0.6) is a red color, with 0.6 opacity will have the color.

**Using hsla:

HSLA (Hue, Saturation, Lightness, Alpha) is also an extension of HSL,


provided with
alpha transparency. The alpha value and property is the same as that in RGBA.

Ex: hsla(0, 100%. 50%, 0.6) is also a red color with 0.6 opacity and have same
color.

TOPIC - 8 : Lists:::

:::Lists in HTML:::

Lists are used to group together related pieces of information,


so they are clearly associated with each other and easy to read. Lists are good
from a structural point of view as they help create a well-structured, more
accessible, easy maintain document.

>>HTML supports ordered, unordered and definition lists.

1. Unordered Lists:">

It is used to group a set of related items in no particular order.


Unordered lists are used when the numbering of items is not required. By
default, the items are followed by bullets.

. They are defined using the <ul> tag, and the <li> tag is used for each list
item.

**Code**

<!DOCTYPE html>
<html>

<head>

<title> Unordered Lists </title>

</head>

<body>

<h1> Lists </h1>

<ul>

<li> first item </li>


<li> second item </ii>
<li> third item </li>

</ul>

</body>

</html>

output: Lists

. first item
. second item
. third item

HTML provides an interesting feature to change the style of the list item
marker.
There are 4 types of style in unordered lists:

● type="disc" - sets the list item marker to a bullet (default)

○ type="circle" - sets the list item marker to a circle

■ type="square" - sets the list item marker to a square

- type="none" - the lists items will not be marked

NOTE : The above styles can be produced by using the type attribute. However,
this attribute is now not supported in HTML5, and you now need to change the
style using CSS(we will learn later about it).

2. Ordered Lists:">

It is used to group a set of related items in a specific order. Ordered


lists are used when the numbering of items is required. By default, the items
are followed by numerical numbering.

They are defined using the <ol> tag, and the <li> tag is used for each list
item.

**Code**

<!DOCTYPE html>
<html>

<head>

<title> ordered Lists </title>

</head>

<body>

<h1> Lists </h1>

<ol>

<li> first item </li>


<li> second item </ii>
<li> third item </li>

</ol>

</body>
</html>

output: Lists

1. first item
2. second item
3. third item

Similarly, like the unordered lists, there are also different ways to number the
ordered lists using the type attribute.

1. type="1" - The list items will be numbered with numbers (default)

A. type="A" - The list items will be numbered with uppercase letters

a. type="a" - The list items will be numbered with lowercase letters

I. type="I" - List items will be numbered with uppercase roman numbers

i. type="i" - The list items will be numbered with lowercase roman numbers

NOTE : If you want to change the starting numbering of the list, then the start
attribute is used.

So, if we change <ol> to <ol start="7" >.

Output : Lists

7. first item
8. second item
9. third item

3.Description Lists:">

A definition list is not a list of items. This is a list of terms and


explanations of the terms.

A definition list starts with the <dl> tag. Each definition - list term starts
with the <dt> tag. Each definition - list definition starts with the <dd> tag.

Description lists are very specific in use compared to ordered and


unordered lists and hence are significantly less used. But whenever, a structure
like a list of terms and their description is required, the description lists
are the perfect elements.

Ex: <h2> Description List </h2>


<dl>
<dt> Coffee </dt>

<dd> -black hot drink </dd>

<dt> Milk </dt>

<dd> -white cold drink </dd>

</dl>

Output: A Description List

Coffee
- black hot drink

Milk
- white cold drink

**Sample code**

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

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Makig List - Part 3</title>

</head>

<body>

<h1 style = "text-align: center;">Making List - Part 3</h1>

<!-- Write your code here --><p>


In this list we will showcase favourite music but in different ordering.
</p>

<h1>
Favourite Indian Music
</h1>

<ol start="2">
<li>Bengali folk Music</li>
<li>Gujarati folk music</li>
<li>Marathi folk music</li>
</ol>
<h1>
Favourite Indian Music composer
</h1>

<ol type="I" start="5">


<li >A.R.Rahman</li>
<li>Pritam</li>
<li>Meet Bros</li>
</ol>

<h1>
Favourite Hollywood Song
</h1>

<ol type="A" start="23">


<li>Love me like you do</li>
<li>Let me love you</li>
<li>Perfect</li>
</ol>

</body>

</html>

output: Making List - Part 3


In this list we will showcase favourite music but in different ordering.

Favourite Indian Music

2. Bengali folk Music


3. Gujarati folk music
4. Marathi folk music

Favourite Indian Music composer

V. A.R.Rahman
VI. Pritam
VII. Meet Bros

Favourite Hollywood Song

W. Love me like you do


X. Let me love you
Y. Perfect

CHAPTER - 3 :: HTML use with other components


TOPIC - 1 : Block & Inline::

:::Block & Inline in HTML:::

Block elements are those that take up the full width available on a web
page, effectively blocking out any other elements from sitting next to it on the
left or right.

Inline elements are those that only take up as much width as much needed to
display the contents of the element, thereby allowing other elements to be in
line with the inline element.

>> Block elements always start on a new line.

>> Inline elements do not start from a new line.

Examples of block elements are : <div>, <p>, <h1> to <h6>, <nav>, etc.

Examples of inline elements are : <b>, <i>, <span>, <img>, etc.

1. div tag::

. The <div> tag defines a block-level section or a division in an HTML


document.
. The <div> tag is a block element. It is often used as a container for other
HTML elements.
. The <div> element has no required attributes.

The <div> element is very often used together with CSS to layout a web page. By
default, browsers always place a line break before and after the <div> element.

You can see in the above example that div made the statement take the complete
width of the web page and shifted the content to the next line.

Adding styles to div::

Let’s add background colour to the div element.

EX: <p> Hello and

<div>
Welcome to Coding Ninjas !

</div>

</p>

Output: Hello and

Welcome to Coding Ninjas !

2. span tag::

<span> element is an inline container used to mark up a part of a text or


a part of a document.

. The <span> element has no required attributes, but style, class and id are
common.

. When used together with CSS, the <span> element can be used to style parts of
the text.

EX: <p> Hello and

<span style="background-color: cyan">

Welcome to Coding Ninjas !

</span>

</p>

output: Hello and Welcome to Coding Ninjas ! .

Here the output will be welcome to Coding Ninjas the background of that will be
in cyan color.

** span element does not shift the content to the next but helps to style a
specific part of the content.

TOPIC - 2 : Class and ID::

:::Class and ID in HTML:::

. Classes and id are selectors used in HTML


. They are attributes to any tags

. Majorly used for styling the parts of your content

. Multiple HTML elements can also share the same class/id

. The class name and id name are case sensitive

1. Internal Styling ::

Earlier, we covered the inline type of styling the elements by using


the style attribute, but styling can also be internally in the HTML file by
using an <style> element in the <head> section.

EX: <!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

</head>

<body>

<p> Hello World ! </p>

</body>

</html>

Output: Hello World !

. In the above example, we applied the style to the p element using the internal
styling method.

2. Class Attribute ::

The HTML class attribute is used to specify a single or multiple


class name for an HTML element. The class name can be used by CSS and JavaScript
to do some tasks for HTML elements. You can use this class in CSS with a
specific class, write a period (.) character, followed by the name of the class
for selecting elements.

Ex: <!DOCTYPE html>

<html>

<head>

<style>

.course{

color: red;

background-color: cyan;

</style>

</head>

<body>

<div class="course">

Web Development

</div>

<div class="course">

Android Development

</div>

<div class="course">

Data Structures & ALgorithms

</div>

</body>

</html>

Output : Web Development


Android Development
Data Structures & Algorithms

. In the above example, we applied the style to the “course” class, which was
shared by three divs.

3. Multiple Classes ::

HTML elements can belong to more than one class, or you can say
multiple classes can be given to an element.

To define multiple classes, separate the class names with a space,

Example : <div class =" course strength ">

. Course and fees are the two classes which both are associated with the div

. The element will be styled according to all the classes specified.

** In the following example, the first <div> element belongs to both the course
class and the strength class and will get the CSS styles from both classes.

EX: <!DOCTYPE html>

<html>

<head>

<style>

.course{

color: red;

.strength{

background-color: cyan;

</style>

</head>

<body>

<div class="course strength">

Data Structures & Algorithms


</div>

</body>

</html>

Output: Data Structures & Algorithms

4. id Attribute ::

. The HTML id attribute is used to specify a unique id for an HTML


element.

. You cannot have more than one element with the same id in an HTML document.

. JavaScript also uses it to access and manipulate the element with the specific
id.

Syntax : write a hash character (#), followed by an id name. Then, define the
CSS properties within curly braces { }.

EX: <head>

<style>

#one { color: blue; }

#two { background-color: teal; }

#three { color: green; }

#four {background-color: lightgrey; }

</style>

</head>

<body>

<p id="one"> This is id one! </p>

<p id="two"> This is id two! </p>

<p id="three"> This is id three! </p>

<p id="four"> This is id four!</p>

</body>
Output: This is id one!
This is id two!
This is id three!
This is id four!

NOTE : Multiple id’s to an element is not allowed in HTML.

5. Internal Links ::

Instead of having to resort to the task of scrolling down long pages,


you can make your readers very happy by offering them page jumps as an
alternative mode of transport around your site. Basically, page jumps are just
links (they use the same <a> element as all links), but links that point to a
specific part of the same document, i.e. internal links.

You simply add a unique id value to an existing element using the id attribute.

Example : <h2 id=" heading ">This is the top</h2>


…….
…….
<a href=" #heading ">Go to top</a>

Explanation: In the href attribute, the heading is the id of the heading of this
page. id of an HTML element is an attribute, and it can have any value. While
referring to an id, '#' is used at the beginning of its name.

. Clicking on the link shown below will scroll you to the heading such that it
is the first line of the display.

*** Code for Class Attribute ***

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Data</title>

</head>

<body>
<h3 class="student">Hi students</h3>

</body>

</html>

Output: Hi students

*** Code for Id Attribute ***

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

</head>

<body>

<h3 id="student">Hi students</h3>

</body>

</html>

Output: Hi students

TOPIC - 3 : Adding script to HTML ::

To use JavaScript in your web page, you need to insert it into your HTML
page.

You can write your JavaScript code by using the <script> tag. You then
need to write JavaScript code in between them. This will also help in using the
same script in other web pages as well.

Example : < script type = " text/javascript ">


document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

You can add a type attribute to mention the type of script you are using. But
since default scripts are written in JavaScript, you may not need to write it.

1. Adding External Scripts ::

. <script> tag can be used in another manner as well. It can add external
JavaScript files to the web page.

**
Writing JavaScript code in external files separates it from HTML code. It makes
HTML and JavaScript easier to read and maintain.
**

The external JavaScript files should have the extension - '.js'.

Example : < script type = " text/javascript " src = " myScript.js "> </script>

. The JavaScript file name with the extension is mentioned inside the src
attribute, i.e. file name is myScript.js

. External scripts can be referenced with a full absolute URL or with a path
relative to the current web page.

>> JavaScript in <head> and <body> Tag

You place scripts inside the <head> tag, just like the <link> tag. You
can use both of the ways mentioned above to add the script to the web page by
writing them inside the <head> tag like -

<head>

<!-- Other Header Tags -->

<script type="text/javascript" src="myScript.js"> </script>

</head>
But you can also add script inside the <body> tag as well like -

<body>

<script type="text/javascript" src="myScript.js"></script>

...
<!-- HTML CODE -->
...

</body>

But when you use the above two methods, the JavaScript compilation is done
first, even before the HTML code is rendered on the web page. This slows down
the loading time of the web page, and also, some things might not be as expected
as elements are not rendered at that time.

To improve the web page’s loading time, we can also load and compile the
JavaScript after the page is loaded. To do this, we need to add the script at
the bottom of the <body> tag after the HTML code like -

<body>

…
<!-- HTML CODE -->
...

<script type="text/javascript" src="myScript.js"> </script>

</body>

Now, the HTML code is rendered first, and then after that, the JavaScript is
loaded.

2. Internal JavaScript ::

Rather than making another JavaScript file and attaching it to the HTML
file, you could also write the JavaScript code within the HTML file as we did
for the CSS.

But this method is not recommended much. It could be done if there are some
lines of JavaScript code.
External JavaScript files help us to reuse them in multiple HTML files.

EX: <body>

<h1 id="heading"> Hello World !</h1>

<script type="text/javascript">

document.getElementById("heading").innerHTML = "ByeJavaScript";

</script>

</body>

Output: Bye JavaScript

The above JavaScript code changes the inner HTML content of the element, which
had an id heading associated with it.

3. <noscript> Tag ::

The HTML <noscript> tag defines an alternate content to be displayed to


users that have disabled scripts in their browser or have a browser that doesn't
support scripts:

Ex: <script type="text/javascript">

document.getElementById("heading").innerHTML = "ByeJavaScript";

</script>

<noscript> Sorry, your browser does not support JavaScript! </noscript>

Output: Hello World !

Sorry, your browser does not support JavaScript!

Topic - 4: HTML vs XHTML ::

**XHTML**

XHTML stands for Extensible Hypertext Markup Language. It can be


considered as a part of the XML markup language this is because of XHTML have
features of both XML and HTML. XHTML is extended from XML and HTML. XHTML can be
considered as a better version of HTML.

. XHTML is a stricter, more XML-based version of HTML.

**HTML**

HTML is the Hypertext Markup Language which is the most widely used
language over the internet. HTML is used to create web pages and link them from
one to another. Please note HTML is not a programming language. It is a markup
language. We can use different other technologies like CSS and javaScript to
give a new look to the pages developed by HTML.

Differences from HTML::

. <!DOCTYPE> is mandatory

. The xmlns attribute in <html> is mandatory

. <html>, <head>, <title>, and <body> are mandatory

. Elements must always be properly nested

. Elements must always be closed

. Elements must always be in lowercase

. Attribute names must always be in lowercase

. Attribute values must always be quoted

. Attribute minimization is forbidden

< !DOCTYPE > Is Mandatory

The DOCTYPE in XHTML is different from HTML , it must have an XHTML <!DOCTYPE>
declaration.

The <html>, <head>, <title>, and <body> elements are mandatory , and the xmlns
attribute in <html> must specify the xml namespace for the document.

Example :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Title of document</title>

</head>

<body>

< -- Content -- >

</body>

</html>

1. XHTML Elements Must be Properly Nested ::

>> XHTML elements must be properly nested.

Correct :: <div> <p> Coding Ninjas ! </p> </div>

Wrong :: <div> <p> Coding Ninjas ! </div> </p>

2. XHTML Elements Must Always be Closed XHTML Empty Elements Must Always be
Closed

>> Self closing tags must always be closed in XHTML.

Correct :: Break Line <br/>

<img src = "img.jpg"/>

Wrong :: Break Line <br>

<img src = "img.jpg">

3. XHTML Attribute Names Must be in Lowercase ::

>> In XHTML, attribute names must always be in lowercase.

Correct :: <a href = "https://www.codingninjas.com/"> Coding Ninjas !


</a>
Wrong :: <a HREF = "https://www.codingninjas.com/"> Coding Ninjas !
</a>

4. XHTML Attribute Values Must be Quoted ::

>> In XHTML, attribute values must always be quoted.

Correct :: <a href = "https://www.codingninjas.com/"> Coding Ninjas !


</a>

Wrong :: <a HREF = https://www.codingninjas.com/> Coding Ninjas ! </a>

CHAPTER - 4 : HTML tables

::Tables in HTML::

Tables are used to show the tabular data. To achieve this, many
tags are used. All the table data is enclosed within the <table> tags.

A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). tr stands for table row, which
represents the row of a table, and td stands for table-data, which is the
content of a data cell.

A data cell can contain text, images, lists, paragraphs, forms, horizontal
rules, tables etc.

EX: <table border=1>

<tr>

<td> Row 1, cell 1 </td>


<td> Row 1, cell 2 </td>
<td> Row 1, cell 3 </td>

</tr>

<tr>

<td> Row 2, cell 1 </td>


<td> Row 2, cell 2 </td>
<td> Row 2, cell 3 </td>

</tr>

<tr>

<td> Row 3, cell 1 </td>


<td> Row 3, cell 2 </td>
<td> Row 3, cell 3 </td>

</tr>

<tr>

<td> Row 4, cell 1 </td>


<td> Row 4, cell 2 </td>
<td> Row 4, cell 3 </td>

</tr>

<tr>

<td> Row 5, cell 1 </td>


<td> Row 5, cell 2 </td>
<td> Row 5, cell 3 </td>

</tr>

</table>

Output: || Row 1, cell 1 || Row 1, cell 2 || Row 1, cell 3 ||


|| Row 2, cell 1 || Row 2, cell 2 || Row 2, cell 3 ||
|| Row 3, cell 1 || Row 3, cell 2 || Row 3, cell 3 ||
|| Row 4, cell 1 || Row 4, cell 2 || Row 4, cell 3 ||
|| Row 5, cell 1 || Row 5, cell 2 || Row 5, cell 3 ||

:: border Attribute ::

The border attribute is used for mentioning the thickness of the


borders. If you do not specify a border attribute the table will be displayed
without any borders. Sometimes this can be useful, but most of the time, you
want the borders to show.

Syntax: <table border=1>

** Headings in a Table ::
If you want to add column names, then HTML provides a separate tag for
that. Headings in a table are defined with the <th> tag.

EX: <table border=1>

<tr>

<th> Column 1 </th>


<th> Column 1 </th>
<th> Column 1 </th>

</tr>

<tr>

<td> Row 1, cell 1</td>


<td> Row 1, cell 2</td>
<td> Row 1, cell 3</td>

</tr>

<tr>

<td> Row 2, cell 1</td>


<td> Row 2, cell 2</td>
<td> Row 2, cell 3</td>

</tr>

<tr>

<td> Row 3, cell 1</td>


<td> Row 3, cell 2</td>
<td> Row 3, cell 3</td>

</tr>

<tr>

<td> Row 4, cell 1</td>


<td> Row 4, cell 2</td>
<td> Row 4, cell 3</td>

</tr>

<tr>

<td> Row 5, cell 1</td>


<td> Row 5, cell 2</td>
<td> Row 5, cell 3</td>

</tr>

</table>

Output: || Column 1 || Column 2 || Column 3 ||


|| Row 1, cell 1 || Row 1, cell 2 || Row 1, cell 3 ||
|| Row 2, cell 1 || Row 2, cell 2 || Row 2, cell 3 ||
|| Row 3, cell 1 || Row 3, cell 2 || Row 3, cell 3 ||
|| Row 4, cell 1 || Row 4, cell 2 || Row 4, cell 3 ||
|| Row 5, cell 1 || Row 5, cell 2 || Row 5, cell 3 ||

:: <thead>, <tbody>, <tfoot> ::

>> <thead> tag is used to group header content in an HTML table.

>> <tbody> tag is used to group the body content in an HTML table.

>> <tfoot> tag is used to group footer content in an HTML table.

Browsers use these elements to enable scrolling of the table body


independently of the header and footer. Also, when printing a large table that
spans multiple pages, these elements can enable the table header and footer to
be printed at the top and bottom of each page.

EX: <table border=1>

<thead>

<tr>

<th> Column 1 </th>


<th> Column 1 </th>
<th> Column 1 </th>

</tr>

</thead>

<tbody>

<tr>

<td> Row 1, cell 1</td>


<td> Row 1, cell 2</td>
<td> Row 1, cell 3</td>

</tr>

<tr>

<td> Row 2, cell 1</td>


<td> Row 2, cell 2</td>
<td> Row 2, cell 3</td>

</tr>

<tr>

<td> Row 3, cell 1</td>


<td> Row 3, cell 2</td>
<td> Row 3, cell 3</td>

</tr>

<tr>

<td> Row 4, cell 1</td>


<td> Row 4, cell 2</td>
<td> Row 4, cell 3</td>

</tr>

<tr>

<td> Row 5, cell 1</td>


<td> Row 5, cell 2</td>
<td> Row 5, cell 3</td>

</tr>

</tbody>

<tfoot>

<tr>

<th> Column 1 </th>


<th> Column 1 </th>
<th> Column 1 </th>

</tr>

</tfooft>
</table>
Output: || Column 1 || Column 2 || Column 3 ||
|| Row 1, cell 1 || Row 1, cell 2 || Row 1, cell 3 ||
|| Row 2, cell 1 || Row 2, cell 2 || Row 2, cell 3 ||
|| Row 3, cell 1 || Row 3, cell 2 || Row 3, cell 3 ||
|| Row 4, cell 1 || Row 4, cell 2 || Row 4, cell 3 ||
|| Row 5, cell 1 || Row 5, cell 2 || Row 5, cell 3 ||
|| Column 1 || Column 2 || Column 3 ||

:: caption Tag ::

The <caption> tag defines a table caption.

>> The <caption> tag must be inserted immediately after the <table> tag.

Example : If you add <caption>Table Example</caption> just after the <table>


tag, the table will now look like -

output: Table Example

|| Column 1 || Column 2 || Column 3 ||


|| Row 1, cell 1 || Row 1, cell 2 || Row 1, cell 3 ||
|| Row 2, cell 1 || Row 2, cell 2 || Row 2, cell 3 ||
|| Row 3, cell 1 || Row 3, cell 2 || Row 3, cell 3 ||
|| Row 4, cell 1 || Row 4, cell 2 || Row 4, cell 3 ||
|| Row 5, cell 1 || Row 5, cell 2 || Row 5, cell 3 ||
|| Column 1 || Column 2 || Column 3 ||

NOTE : You can specify only one caption per table.

:: colspan and rowspan Attribute ::

To manage the layout of the tables, two attributes are used, rowspan and
colspan.

>> Attribute rowspan is used to mention the number of rows that a particular
cell will be occupying.

>> Attribute colspan is used to mention the number of columns that a specific
cell will be occupying.
They both are used with the td tag and can also be used with the th tag.

Ex: <table border=1>

<thead>

<tr>

<th> Column 1 </th>


<th colspan="2> Column 2 and 3 heading</th>

</tr>

</thead>

<tbody>

<tr>

<td> Row 1, cell 1</td>


<td colspan="2> (Row 1, cell 2) and (Row1 , cell 3</td>

</tr>

<tr>

<td rowsapn="2"> (Row 2, cell 1) and (Row 3, cell 2)</td>


<td> Row 2, cell 2</td>
<td> Row 2, cell 3</td>

</tr>

<tr>

<td> Row 3, cell 2</td>


<td> Row 3, cell 3</td>

</tr>

</tbody>

<tfoot>

<tr>

<th> Column 1 </th>


<th> Column 1 </th>
<th> Column 1 </th>

</tr>

</tfooft>
</table>

Output: || Column 1 || Column 2 and 3 ||


|| Row 1, cell 1 ||(Row 1, cell 2) and (Row 1, cell 3)||
|| (Row 2, cell 1) and || Row 2, cell 2 || Row 2, cell 3 ||
|| (Row 3, cell 2) || Row 3, cell 2 || Row 3, cell 3 ||

CHAPTER - 5 : HTML forms

Topic - 1 :: Form Attributes :

:::Forms:::

** Forms in HTML ::

"HTML Forms are used to collect different kinds of input from the
user". Through these forms, a user enters the data, which is either processed by
the browser itself (using Javascript) or the data goes to the servers where it
gets processed.

A form is an area that can contain form elements. A form is defined with the
<form> tag.

Syntax : <form>
// Form Elements
</form>

"The <form> element contains different types of input elements, such as


text fields, checkboxes, radio buttons, submit buttons, etc."

**Basic form Example**

Let’s consider a basic form asking for the first name and the last name of the
user.

EX: <form action="/index.html">


<label for="fname">First name:</label>
<input type="text" id="fname" name="firstname">
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="Lastname">
<br><br>
<input type="Submit" value="Submit">
</form>

Output: First name: -------------|


Last name: -------------|

Submit

. In the above example, you can see that several tags and attributes are used.
We will cover them all in the upcoming modules.

. Firstly let’s learn about the form attributes or the functions in submitting
the form.

:: Form Attributes ::

When the form is submitted, the page gets reloaded, and we know
that the form gets submitted. But actually, the form input data is not being
submitted to the server. To get the form to send the input data to the server,
we need to set 2 attributes in the form:

1.action attribute

2.method attribute

Example : <form action="/index.html" method="post"> …. </form>

1. action Attribute ::

The action attribute defines the action to be performed when the form is
submitted.
It tells where the form data is sent when the form is submitted. This contains
the address (i.e. URL) of the file where the data is sent. The URL can be
provided in an absolute and relative path.
NOTE: If the action attribute is not mentioned, the action is set to the
current page URL.

Example : <form action="/index.html">

<label for="fname"> Full Name: </label>


<input type="text" id="fname" name="fullname">
<input type="submit" value="Submit">

</form>

. In the above example, the form data is submitted to the index.html present
relative to the path.

For absolute path : action = “https://www.xyz.com/index.html”

2. method Attribute ::

The method attribute defines how the form data is sent. It


specifies the HTTP method to be used when submitting the form data.

. The form-data can be sent as URL variables (with method="GET") or as HTTP


post transaction (with method="POST").

NOTE: The default HTTP method when submitting form data is GET.

** GET method ::

This method appends the data into the URL with '?' as a separator in
name-value pairs. Since this data will be visible, so sensitive data (like
passwords) should not be sent. This can be used to send query strings.

Syntax : URL?name=value&name=value

EX: https://www.domain.com/url?variable=value&variable=value

? -- start of query string.

& -- separator

Syntax : <form action="/index.html" method="GET">


** POST Method ::

This method appends the data inside the body of the HTTP request. The
post is used to "send the sensitive data" (the submitted form data is not shown
in the URL).

Syntax : <form action="/index.html" method="POST">

3. formaction Attribute ::

The input formation attribute specifies the URL of the file that will
process the input when the form is submitted using that specific button.

NOTE : This attribute overrides the action attribute of the <form> element.

EX: <form action="/index.html>

<label for="fname"> Full Name: </label>


<input type="text" id="fname" name="fname">

<input type="submit" value="Submit as User">


<input type="submit" formaction="/index2.html" value="Submit as
Admin">

</form>

Output: Full Name: --------------

Submit as User || Submit as Admin

In the above example, if you submit by clicking the “Submit as


User” button, the form will be submitted to index.html but submitting by “Submit
as Admin” will submit the form at index2.html.

Topic - 2 :: Form Elements :


1 ::: Input and Label ::: 1

:: Input Tag ::

The <input> tag specifies an input field where the user can
"enter data". <input> elements are used within a <form> element to declare input
controls that allow users to input data.

NOTE : It is an "inline" tag.

:: type Attribute ::

HTML provides different types of input that you can use for different
kinds of entries. By default, the value of type is text, which specifies that we
want single-line text input.

NOTE : type attribute is mandatory

Some more values for the type attribute are -

. submit
. email
. password
. date
. number
. range
. URL
. checkbox
. radio
. hidden
. time

1. Input Type Submit :

type = "submit" represents a button that when selected, will submit


the form. You can control the text that appears on the submit button with the
value attribute.
EX: <input type="submit" value="Submit">

Output: Submit

:: value Attribute ::

Value is not a compulsory attribute to add to the input


element.
The value attribute is used differently for different input types:

>> For "button", "reset", and "submit" : It defines the text on the button

>> For "text", "password", and "hidden" : It defines the initial (default) value
of the input field

>> For "checkbox", "radio", "image" - it defines the value associated with the
input (It is also the value that is sent on submit)

EX: To set India as the default country on the input field

<label for="residence"> Enter the Country: </label> <br/>

<input type="text" id="residence" value="India" />

<input type="submit" value="Submit">

::: name Attribute :::

The HTML form data is sent to the browser or server-side in the


form of (name: value), where value is the entry you provide respective to that
name parameter.

The name attribute is a compulsory attribute for input tag in a form. Without
this attribute, this form element won't be submitted or, in other words would
not be sent to the server.

The name attribute also uniquely identifies that piece of data. The value of the
input is accessed using the name attribute.
** label Tag ::

A label tag describes the kind of input in a form, and it is not


compulsory. You can do that without the use of a label tag. But it is better to
use the <label> tag to describe the kind of input for the form element.

NOTE : This is also an inline tag.

Example : <label for="fname">First name:</label><br/>


<input type="text" id="fname" name="firstname" />

. The label is tied to this input element by giving the "id" attribute of the
input element the same value as the label's "for" attribute.

NOTE : The value of id and name can be the same, and most of the time, this will
be the case.

::: required Attribute :::

It specifies that an input field must be filled out before submitting


the form. Else, it shows a pop up to fill out the required field, or you can say
it defines a mandatory field.

The required attribute is a boolean attribute.

EX: <form>
<input type="text" required>
<input type="submit" value="Submit"/>
</form>

If we click submit without entering any value, this pop-up shows up.

---------------Submit
|
This is a required field

::: placeholder Attribute :::

The placeholder attribute is used with the input element. It


describes a sample value or a short description of the expected format.

. The value of the placeholder attribute specifies a short hint that describes
the expected value of an input field.

EX: <input type="text" name="fname" placeholder="First name">

Output: --------------
| First name |
--------------

2. Input Type password :

It is used for entering passwords in an input field. It is not


shown on the screen, i.e. The characters in a password field are masked (shown
as asterisks or circles).

EX: <form>

<label for="username"> Username: </label><br>


<input type="text" id="username" name="username">

<br>

<label for="pwd"> Password: </label><br>


<input type="text" id="Pwd" name="pwd">

</form>

Output:
Username:

Coding_ninjas

Password:

------------
| ………………. |
------------

3. Input Type Date :

It is used for input fields that should contain a date.

EX: <form>

<label for="dob"> Enter DOB: </label>


<input type="date" id="dob" name="dob">

</form>

Output: Enter DOB: |---------------|


|dd - mm - yyyy |
|---------------|

4. Input type range :

It defines a control for entering a number on a slider control.


Default range is 0 to 100. However, you can set restrictions on the accepted
numbers with the min, max, and step attributes.

EX: <form>

<label for="val"> Value</label>


<input type="range" id="val" name="val" min="0" max="50">

</form>

Output: Value -------|-----

5. Input type checkbox :

Checkboxes are used when more than one option may need to be checked,
or you can also use them to enable or disable something.

. There is also an attribute named checked, that when present, makes the
checkbox selected by default when the page loads.

EX: <form>

<input type="checkbox" name="color1" value="red"> Red <br>

<input type="checkbox" name="color2" value="green"> Green <br>

<input type="checkbox" name="color3" value="white" checked> White

</form>

Output: . Red
. Green
.* White
6. Input type radio :

The radio button is just like a checkbox, but the difference is that
the values of the name attribute are all the same.

. The name attributes are all set to the same value makes these radio buttons
part of the same set, and therefore, you can only select one of them at once.

EX: <form>

<input type="radio" name="gender" value="male" checked> Male <br>

<input type="radio" name="gender" value="female" checked> Female


<br>

<input type="radio" name="gender" value="other"> Other

</form>

Output: .* Male
. Female
. Other

7. Input type hidden :

It defines a hidden input field (not visible to a user).

. The hidden field includes some data and submits it along with the form,
which is not visible to the user.

. A hidden field often stores what database record needs to be updated when the
form is submitted.

EX: <form>

<label for="Name"> Name:</label>

<input type="text" id="Nname" name="Nname"> <br><br>

<input type="hidden" id="loc" name="loc" value="India">

<input type="submit" value="Submit">

</form>
Output: Name: -------------

Submit

2 :: Select Element :: 2

:: Select Element in HTML Forms ::

select tag is used to create a drop-down list of options. The


dropdown list contains many options, and the user can choose one of them.

. The select tag also contains a name attribute, like other form elements,
that represent the associated data submitted to the server.

:: Attributes ::

1. Multiple :

It allows the user to select more than one value. ( Press ctrl and select
)

EX: <select name="select" multiple>

<option value="value1">Option 1</option>

<option value="value2">Option 2</option>

<option value="value3">Option 3</option>

</select>

Output : Option 1
Option 2
Option 3

2. size :

It specifies how many options can be shown at once.


EX: <select name="select" size="2">

<option value="value1">Option 1</option>

<option value="value2">Option 2</option>

<option value="value3">Option 3</option>

</select>

Output: Option 1
Option 2

Only 2 out of 3 options are displayed in the above example, and others can be
seen using the scrollbar.

:: option Element ::

The tag used to define the possible options is <option> tag.


This tag is put inside the <select> tag. For every option in drop down list,
separate <option> element is used.

. The first <option> element from the options' list is selected by default.
To change this predefined option, use the selected attribute with the <option>
tag.

Each option element should have a value attribute, which contains the data value
that will be submitted to the server when that option is selected.

EX: <select name="select">

<option value="red"> Red </option>

<option value="blue"> Blue </option>

<option value="green" selected=""> Green </option>

</select>

Output: Green ^

Red
Blue
Green*

:::optgroup Element:::

The <optgroup> tag is used to group several options together into one
group.

. This will create separate groups of options inside the dropdown.

. The label attribute is used in optgroup to give it a group heading.

EX: <select>

<optgroup label="Books">

<option value="html"> HTML </option>

<option value="css"> CSS </option>

</optgroup>

<optgroup label="Snippets">

<option value="git"> GIT </option>

<option value="java"> Java </option>

</optgroup>

</select>

Ouput: HTML ^

Books
HTML
CSS
Snippets
Git
Java

3 :: Textarea and Fieldset in HTML :: 3

:: Textarea Element ::
The <textarea> element is an input element where the user can input
multi-line text, unlike the <input type = ” text ”> element where there is only
a single line.

. A text area can hold an unlimited number of characters, and text wrapping is
allowed

when the form is submitted.

EX: <form>

<textarea placeholder="Type here...."></textarea>

</form>

Output: |Type here..... |

:: rows and cols Attribute ::

>> These attributes are used to set the size of <textarea>.

>> The rows attribute specifies the visible height of a text area.

>> The cols attribute specifies the visible width of a text area.

EX: <form>

<textarea rows="10" cols="20" placeholder="Type


here...."></textarea>

</form>

Output: | |
| Type here ……….. |
| |
| |

:: fieldset and legend Elements ::


The <fieldset> element is used to provide grouping for a part of an
HTML form. The <fieldset> tag draws a box around the related elements, which
makes it more presentable.

The <legend> element provides a title or explanatory caption for the


rest of the contents of the legend element's parent element. <legend> comes just
after the <fieldset> tag.

EX: <form>

<fieldset>

<legend> Details: </legend>


Name: <input type="text"><br>
Email: <input type="text"><br>

<fieldset>

</form>

Output: -- Details ------------------------------------


| |
|Name: | | |
| |
|Email: | | |
-----------------------------------------------

4 ::: Submit Button ::: 4

:: Submit button in HTML Forms ::

Submit button is a button that, when clicked, automatically submits


the form. The button is defined at the end of the form. There are two different
ways to add submit button to the form, and both of these ways will work in the
same way.

1. via <input> tag


2. via <button> tag

1. input tag :
The <input> tag can also be used to create a button. To use it as a
button, the type attribute is set to value submit. When the click event occurs,
i.e. the user clicks on the button, the form gets submitted. The input tag is a
self-closing tag, so the value of the button is set by the value attribute.

EX: <form>

<input type="submit" value="Submit">

</form>

Output: Submit

2. button tag :

The <button> is also used to create submit button in the form.


Although, the <input> tag also creates a submit button, but there are some
benefits of a button tag over the input tag.

. The button tag is a container tag and, therefore, can contain other tags.
This helps in adding images and other content to the button.

. The button has to set the type attribute to submit to make it a submit
button.

EX: <button type="submit">

<img src="images/logo.png" alt="Learn HTML" height="20"


width="40"/> Submit

</button>

3. autofocus Attribute :

The autofocus attribute is a boolean attribute. When applied to the


button specifies that the button automatically gets focused when the page loads.

EX: <form>

<input type="submit" value="Submit" autofocus>

</form>
Output: *With autofocus : Submit - It will focus

*Without autofocus : Submit

*** Sample Code ****

Question :: Your task is to build a form shown below using HTML form elements
and attributes

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>

<form method="post" action="">

<fieldset>
<!-- Main Heading -->
<legend>REGISTRATION FORM</legend>

<!-- divs for User Details -->


<div>
<label for="fname">First Name</label>
<br>
<input type="text" id= "fname" required >
</div>

<div>
<br>
<label for="lname">Last Name</label>
<br>
<input type="text" id= "lname" >
</div>

<div>
<p>Gender</p>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>

<div>
<br>
<label for="mail">Email</label>
<br>
<input type="email" id= "mail" required placeholder="[email protected]">
</div>

<div>
<br>
<textarea placeholder="Tell us about yourself..." rows="4"
cols="30"></textarea>
</div>

</fieldset>

<br>
<!-- Submit button -->
<input type="submit" autofocus>

</form>

</body>
</html>

Output: ----Registration Form------------------------------


|
| First Name
|
| Last Name
|
| Gender
|
| . Male
| . Female
| .Other
|
| Email
|
| Tell us about yourself
|
|

&& Interview Questions &&

Q1. What is HTML form validation ?

Ans 1.
HTML form validation is a process of examining the HTML form page’s
contents to avoid errored-out data being sent to the server. This process is a
significant step in developing HTML-based web applications, as it can easily
improve the quality of the web page or the web application. There are two ways
to perform the HTML form Validation, and they are by Using HTML5 built-in
functionality and by Using JavaScript.

Q2. What is the usage of a novalidate attribute for the form tag that is
introduced in HTML5?

Ans 2.
Its value is a boolean type that indicates whether or not the data
being submitted by the form will be validated beforehand. By making this false,
forms can be submitted without validation which helps users to resume later
also.

<form action = "" method = "get" novalidate>


Name:<br><input type="name" name="sname"><br>
Doubt:<br><input type="number" name="doubt"><br>
<input type="submit" value="Submit">
</form>

Q3. What are the different new form element types in HTML 5?

Ans 3.

Following is a list of 10 frequently used new elements in HTML 5:

. Color
. Date
. Datetime-local
. Email
. Time
. Url
. Number
. Search
. Range
. Telephone

Q4. What is a button tag?

Ans 4 .
The button tag is used in HTML 5. It is used to create a clickable
button within the HTML form on the web page. It is generally used to create a
"submit" or "reset" button. Let's see the code to display the button.
<button name="button" type="button">Click Here</button>

Q5. What is the use of the required attribute in HTML5?

Ans 5 . It forces a user to fill in text on the text field or text area before
submitting the form. It is used for form validation.

::: Chapter 6 : Fun with HTML :::

Topic - 1: Media in HTML ::

Multimedia is a different content than text that uses sound, music,


videos, movies, animations, etc., on the web. Multimedia consists of audio,
video which can be added to a web page. We can add audio, video and figures with
the help of HTML media elements.

:: Adding Audio and Video ::

HTML can embed audio and videos directly on a web page without any
external support.

1. <video> element is used to add videos


2. <audio> element is used to add audios

>> These elements are not sufficient to add the media. We need to control the
media as well. So, there are several tags and attributes that are required to
add the media entirely.

>> The <audio> and <video> are the same way the content is added to it, and only
the tag name is different.

:: controls Attribute ::

The controls attribute is necessary to add play, pause, and volume


to the audio/video. This gives you the ability to control the video and audio
content.
:: source Tag ::

<source> element is used to "serve the same media content in


multiple formats" so that different browsers can run any of the files that it
supports. It is an empty element.

:: src Attribute ::

The src attribute is used to "specify the URL" of the media file
that is needed to be played. This can have an absolute or relative path.

:: type Attribute ::

The type attribute is used to specify the media type of the media
resource.

. Types for videos could be mp4, WMV etc.


. Types for audios could be MPEG,mp3 etc.

EX: Adding a video to a web page in different supported types for different
browsers

<video controls>

<source src="cn.mp4" type="video/mp4">

<source src="cn.wmv" type="video/wmv">

Your browser does not support the video tag.

</video>

Output: Video will be display on screen.


:: autoplay and muted attribute ::

To start a video automatically, use the autoplay attribute and muted


after autoplay to let your video start playing automatically (but muted).

Example : <video controls autoplay muted>

<source src="cn.mp4" type="video/mp4">

<source src="cn.wmv" type="video/wmv">

Your browser does not support the video tag.

</video>

. By using the height and width attribute, the video size on a web page can also
be customized.

EX: Adding a audio to a web page in different supported types for different
browsers

<audio controls>

<source src="cn.avi" type="audio/avi">

<source src="cn.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

Output: 0:00/0:00 <<))))

. Multiple source tags are used so that the audio plays if any one of the
formats is supported by the browser. Else, the text message will be shown.

NOTE : Autoplay and muted can also be used for the audio element.

:: Adding youtube videos ::

Youtube videos can also be directly added to your web page using the
embed video option on any youtube video.
"<iframe> element" is used to add the video with the src attribute but
a shortcut to that is simply to go to any youtube video and right-click on the
video, then select the ""copy embed code"" option.

*** Copy embed code

>> Paste the code on the code editor, and the video will be added to the web
page.

EX: <iframe width="400" height="200"

src="https://www.youtube.com/embed/wDil2PGNPVI">

</iframe>

NOTE : controls, autoplay and muted attributes can also be used with iframe

Topic - 2 : Google Maps in HTML ::

Google maps view can be added to a web page. Commonly it is used in


company websites to show the location of that company office to the users on
google maps.

Steps 1 : Go to google maps and enter the address you want to show

Step 2 : click on the Share icon.

Step 3 : Select the Embed tab on the Share window.

Step 4 : Click on Copy HTML.

Step 5 : Paste that HTML code as it is

EX:

<!DOCTYPE html>
<html>

<head>

<title></title>

</head>
<body>

<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30615.195624268494!2d
80.97141085072172!3d16.42993214537087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m
3!1m2!1s0x3a361ca9703a5305%3A0xb92bbf81640f13be!2sGudivada%2C%20Andhra%20Pradesh
!5e0!3m2!1sen!2sin!4v1730811406905!5m2!1sen!2sin" width="600" height="450"
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">

</iframe>

</body>

</html>

Topic - 3 : Meta Tag ::

:: Meta tag in HTML ::

>> Metadata defines information about data on your web page.

>> Metadata will not be displayed on the page but will be machine parsable. The
meta tag is a self-closing tag, and the data stored in it is known as metadata.

>> Meta elements are typically used to specify page description, keywords,
author of the document, title, image etc.

. You must have seen card views of a website at many places like this :

**** https://www.codingninjas.com ****

In the above card, you can see the meta image, title and description. If
metadata is not specified in the HTML code, the browser will automatically fetch
this data from the web page, which could also lead to unexpected results.

Attributes that are used in a meta tag:

. name
. Content
. property
. charset
. http-equiv
Meta tags have been one of the essential elements of SEO. They are
used to provide details about your site to search engines. Search engine
optimization (SEO) is defined as the process of affecting the online visibility
of a website or a web page in a web search engine's results.

Search engines such as Google often display the meta description in


search results where they can highly affect user visits to websites. So, it’s
very important to add meta tags to your web pages.

NOTE : There can be any number of meta tags defined within a page inside the
head.

1. name Attribute ::

The name attribute is used to specify the name for the metadata.
The name attribute is used together with the content attribute. This attribute
specifies a name for the information/value of the content attribute.

The name attribute can have one of the 6 values:

. author - specifies the name of the author of the document

. keywords - specifies a comma-separated list of words for SEO purposes

. viewport - specifies the control of the viewport on different devices

. application-name - specifies the name of the application that the page


represents

. description - specifies a description of the page

. generator - specifies the software packages used to generate the document

Syntax : <meta name="value">

NOTE : If the http-equiv attribute is set, the name attribute should not be set.
SEO is used by the search engines like google and bing to search for the
website's content relevant to the user search. This increases the quality and
quantity of traffic on one's website.
2. content Attribute ::

The content attribute gives the value associated with the http-equiv or
name attribute.

Syntax : <meta name/http-equiv="value" content="text">

Example : <meta name="viewport"

content="width=device-width,initial-scale=0.5,minimum-scale=0.5">

3. property Attribute ::

This attribute tells the type of data that should be given to the
metadata. It is used with the content attribute.

Example : <meta property="og:image" content="cn.jpg" />

<meta property="og:title" content="Coding NInjas" />

<meta property="og:description" content="Welcome to Coding


Ninjas" />

4. charset Attribute ::

The charset attribute is used for declaring the character encoding for
the page. It is a good practice to use UTF-8 encoding. However, this must be
taken care of that the declared character set matches the one on the page and is
defined for every page of the website.

Syntax : <meta charset="character_set">


5. http-equiv Attribute ::

The http-equiv attribute provides an HTTP header for the


information/value of the content attribute. The value of this attribute can be
used to alter servers and user agents behaviour.

Syntax : <meta http-equiv="content-type|default-style|refresh">

Example: the refresh value is used to specify the seconds after which the page
will be refreshed. And if, along with the time, a URL is mentioned as
'5;url=https://www.codingninjas.in/', then after 5 seconds, the user would be
redirected to the mentioned URL.

Topic - 4 : Favicon and Emojis in HTML ::

:: Favicon ::

A favicon is a small, iconic image that represents the website.


They are most often found in the address bar of your web browser, but they can
also be used in lists of bookmarks in web browsers and feed aggregators.

You can see an icon beside the title of the page on the tab itself. This is
known as favicon.

Syntax : <link rel="icon" type="image/jpg" href="favicon.png"/>

. The rel defines the relationship with the favicon.

. The href defines the location of the favicon.

. The type defines the media type of the favicon.

Output : Coding Ninjas - Learn >> X

:: Emojis ::
To display emojis on web page meta tag is used with the charset
attribute set to UTF-8 because emojis are characters from the UTF-8 character
set.

Syntax: < meta charset = "UTF-8">

>> Some numbers or characters which can’t be typed on a keyboard can also be
shown on a web page using their UTF-8 code.

Example : Code for A is - &#65


Code for B is - &#66
Code for C is - &#67 and so on..

** UTF-8 codes for Emojis ::

Emojis are not present on the keyboard so they are typed with their specific
codes like :

. &#128515 is for 😃

. &#128516 is for 😄

. &#128517 is for 😅

Example : <h2> Welcome to Coding Ninjas &#128516 </h2>

Output : Welcome to Coding Ninjas 😄

:::: Article Making Example:::

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

</head>
<body>

<div class="container-article">
<div class="article-title">
<h1>
Airport
</h1>
</div>

<div class="article-description">
<h3>
Importance of Airport Security
</h3>
</div>

<div class="article-img-container">
<img
src="https://content.presspage.com/uploads/1911/1920_dsc-4234.jpg?10000"
alt="Airport image" height="100" width="250">
</div>
<div class="article-content">
<p>
<!-- add any content here -->
Airport security plays a key role in engendering trust in passengers when it
comes to air transport. It seems obvious that air travel would not have evolved
the way it has in recent years if it werent secure, if passengers hadnt trusted
that their flight would arrive at its destination without any life-threatening
incidents. Security, therefore, is not only a pillar for the development of
aviation but has actively contributed to the passenger number growth we have
witnessed in recent years. Personally, I would even go as far as to say that
this mode of transport would have become extinct if, throughout the years,
passengers hadnt put their faith in air travel being safe and secure.
</p>
</div>
</div>

</body>
</html>

You might also like