HTML stands for Hypertext Markup Language. It is a standard markup language used for
creating web pages and web applications. HTML provides the structure and content of a webpage,
including text, images, videos, and links. It uses tags to define different elements on a
webpage and their attributes, such as font size, color, and alignment. HTML is the foundation of
the World Wide Web and is essential for creating and publishing content on the internet.
It is a software application that easily establishes a visual representation of a file location and makes it
easier for users to understand. It contains development tools such as text editors, code libraries,
compilers, and testing platforms, and includes at least build automation tools and debuggers.
Net Beans and Eclipse are good examples of IDEs, which contain a compiler, an interpreter, or both; other
IDEs like Sharp Develop and Lazarus do not include these tools. The IDE is capable of using the
functionality of multiple programming processes in a single process. Some IDEs will work on a specific
programming language, and they also contain multilingual capabilities. IDEs like Eclipse, ActiveState
Komodo, IntelliJ IDEA, My Eclipse, Oracle JDeveloper, Net Beans, Codenvy, and Microsoft Visual Studio
support multiple languages.
IDE is the Integrated Development Environment that provides the user
interface for code development with testing and debugging features. It
helps to organize the project artefacts that are relevant to the source code
of the software application. It provides several tools and features to make
the web development easy and standardize. In this course, we will use
visual studio code provided by Microsoft.
Container and Empty tags
To instruct the browser how to display the material, HTML uses predefined
tags. Tags are nothing more than some instructions surrounded by angle
brackets (<>). Tags are utilised across the website, but many of the
developers are not clear as to whether a given tag is a container or empty.
Most of them are confused sometime that which tag should include an
ending tag in addition to the opening tag or not, they become confused.
There are two types of tags:
Empty tags
Container tags
Empty tags
The tags that do not contain any closing tags are known as empty tags.
Empty tags contain only the opening tag but they perform some action in
the webpage.
Syntax: <tag name>
Container tags
Opening tag, contents, and Closing tag are the three components that make
the container tags. They may also have other tags in the content section.
The start tag and end tag, used in pairs as the opening and closing tags. If
you don't remember to close the container element, the browser will
continue to use the opening tag's effects all the way to the ending of the
page. Therefore, take caution when using container tags. In HTML,
container tags make up the vast bulk of tags.
Syntax: <tag name>….</tag name>
Heading Tag
The headings of a page are defined using an HTML heading tag. The HTML
heading hierarchy has six levels h1, h2, h3, h4, h5, and h6, with h1 being the
highest level and h6 being the lowest.
h1 is used for Main heading.
h2 is used for Sub-headings.
If there are further sections under the subheadings then h3, h4 and h5 are used.
h6 for the small heading.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<h1>Welcome to CodingNito</h1>
<h2>Welcome to CodingNito</h2>
<h3>Welcome to CodingNito</h3>
<h4>Welcome to CodingNito</h4>
<h5>Welcome to CodingNito</h5>
<h6>Welcome to CodingNito</h6>
</body>
</html>
OUTPUT
Welcome to CodingNito
Welcome to CodingNito
Welcome to CodingNito
Welcome to CodingNito
Welcome to CodingNito
Welcome to CodingNito
Net Beans and Eclipse are good examples of IDEs, which contain a compiler, an interpreter, or both; other
IDEs like Sharp Develop and Lazarus do not include these tools. The IDE is capable of using the
functionality of multiple programming processes in a single process. Some IDEs will work on a specific
programming language, and they also contain multilingual capabilities. IDEs like Eclipse, ActiveState
Komodo, IntelliJ IDEA, My Eclipse, Oracle JDeveloper, Net Beans, Codenvy, and Microsoft Visual Studio
support multiple languages.
IDE is the Integrated Development Environment that provides the user
interface for code development with testing and debugging features. It
helps to organize the project artefacts that are relevant to the source code
of the software application. It provides several tools and features to make
the web development easy and standardize. In this course, we will use
visual studio code provided by Microsoft.
Paragraph Tag
In HTML, a paragraph is defined by the p tag. Therefore, everything that
is written between p and p is considered to be a paragraph. Even if
we don't use the closing tag, p, most browsers still treat a line as a
paragraph, although this could lead to unexpected outcomes. Therefore, we
must apply the closing tag and that is a standard procedure
<p>
This is the use of Paragraph Tag. it will remove every extra spaces
and unwanted new lines.
</p>
This is the use of Paragraph Tag. it will remove every extra spaces
and unwanted new lines.
Br Tag
In HTML document, a line break is made with the br tag. It is typically used
in poems or addresses where line breaks are required. It is an empty tag,
and hence end tag is not required. The br tag works similar to the Enter
key in a word processor if it is included in the HTML code.
This is the use of br tag.<br> It move the upcoming words into the new line
This is the use of br tag. It move the upcoming words into the new line
Formatting tags
In HTML texts can be formatted easily like other text-editing programmes.
We'll go over a few of these possibilities.
Bold text ==> <b>Bolded Text</b></li>
Important text ==> <strong>Important Text</strong></li>
Italic text ==> <i>Italic Text</i></li>
Emphasized text ==> <em>Emphasized Text</em></li>
Marked text ==> <mark>Marked Text</mark></li>
Smaller text ==> <small>Smaller Text</small></li>
Deleted text ==> <del>Deleted Text</del></li>
Inserted text ==> <ins>Insterted Text</ins></li>
Subscript text ==> <sub>Subscript Tet</sub></li>
Superscript text ==> <sup>Superscript Text</sup></li>
OUTPUT
Bold text ==> Bolded Text
Important text ==> Important Text
Italic text ==> Italic Text
Emphasized text ==> Emphasized Text
Marked text ==> Marked Text
Smaller text ==> Smaller Text
Deleted text ==> Deleted Text
Inserted text ==> Insterted Text
Subscript text ==> Subscript Tet
Superscript text ==> Superscript Text
NOTE: All tags are container tags and need a closing tag
Iframe tags
In HTML, the term iframe stands for Inline Frame. The ‘iframe’ tag creates a
rectangular area within the content where a different document with scroll
bars and borders, may be displayed by the browser. To embed another
document inside the current HTML document, use an inline frame. An
iframe element's reference can be specified using the
HTML iframe name property. iframes are essentially used to display a
webpage inside the one that is now shown. The URL of the document that
contains the iframe is specified using the 'src' attribute
The HTML Quotation elements are used to insert quoted texts in a web
page, which are portions of text that differ from the regular text in the web
page. Some of the most used HTML quotation elements are listed below:
TAG DESCRIPTION
abbr ==> Defines a contraction or acronym.
address ==> Provides the author's or document owner's
bdo ==> Define the text direction
blockquote ==> Describe a passage that is a quotation from another source
cite ==> Define a short inline quote
q ==> Define quote’s title
NOTE: All tags are container tags and need a closing tag
Adding images in website
A website or webpage can contain images by using the HTML img tag. In
modern websites, images are linked to web pages using the img element,
which contains space for the image.
<img src="cdnto.jpg" alt="Loading please wait">
OUTPUT
Here you can see the ouput of the image
Adding audio in website
Music or other audio streams can be included in a document by using the
audio tag. One or more "source" tags with various audio sources are
contained in the "audio" tag. The text written between the audio and
audio tags will be visible in browsers. MP3, WAV, and OGG are the three
audio formats that HTML supports.
The video element inserts the contents of a media player that allows
video playback. You can also use video tag for audio input as well, but served
experience could be better with audio tag for audio insertions.
A hyperlink, also known as a link or web link, refers to data that includes a
destination address. By clicking, touching, or hovering on the link, a user
can quickly and easily navigate to the destination and follow it, jump to it,
or be routed there.
An HTML table is a set of data that is organised into rows and columns, or
even in a more complicated structure. Tables are frequently used in data
analysis, research, and communication. Tables are helpful for a variety of
activities, including the presentation of text and numerical data. In the
tabular form arrangement, we can compare two or more objects. Databases
are built using tables.
By using the "table" tag, an HTML table is defined. The "tr" tag specifies
each table row. The "th" tag designates a table header. Table heads are bold
and centred by default. The "td" tag defines a table data or column
Border
In HTML, a border is shown around the contents of tables using the Table
Border tag. You can give values for this around the table, such as 0 to
display no border around the table cells and 1 to display a border around
the table cells
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<table border = “2px”>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
</body>
</html>
OUTPUT
heading 1
heading 2
data 1
data 2
Rowspan
HTML's ‘rowspan’ property defines how many rows a cell should span. If a
row extends across two rows, it will occupy the space occupied by two
rows in that table. It permits a single table cell to extend across the height
of many cells or rows. In spread-sheet programmes like Excel, it offers the
same functionality as "merge cell."
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<table border = “2px”>
<tr>
<th rowspan="2">heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
</body>
</html>
OUTPUT
heading 1
heading 2
data 1
data 2
Colspan
HTML's colspan attribute defines how many columns a cell should span. It
enables a single table cell to stretch across many columns or cells. It offers
the same features as a spread-sheet programme like Excel's "merge cell"
function.
<!DOCTYPE html>
<<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<table border = “2px”>
<tr>
<th>heading 1</th>
<th colspan=”2”>heading 2</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
</table>
</body>
</html>
OUTPUT
heading 1
heading 2
data 1
data 2
>
Lists in HTML
A list is a condensed collection of linked information that is used to present data or other information on websites. For example, in order to purchase things, we must first develop a list that can be ordered or browsed.
Types of List
Ordered List
An ordered list is a collection of elements whose order is determined by their position in the list. An ordered list is arranged numerically. The ordering is provided by this numbering system, which incorporates numeric, alphabetic, or roman numerals. The ordered list ol tag is used to create an ordered list. The li tag is used to define each element of an ordered list.
Un-Ordered List An unordered list is a list of items where the order of the items is not important. An unordered list is made with the unordered list ul tag. It
also known as "bullet list." Each element of an unordered list is defined
using the li tag.
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</body>
</html>
item 1
item 2
item 3
Favicons
An emblem used to designate a website or blog is contained in a tiny file
called a favicon. It is sometimes referred to as a bookmark icon, webpage
icon, or tab icon. The address bar, browser tab, browser history, bookmark
bar, etc. all display this icon. A favicon's image is in.ico file format. Although
there are many different file types, all browsers support the .ico format.
Inline elements are those elements that cover the whole line if they need
just a single alphabet space. Block elements are those elements that cover
only that amount of space they need that means if we use an inline element
and put some element next to it, it comes in the different line if we use
block element it comes next to the element. For e.g. div tag is an inline
element whereas span tag is a block element.
The Div Tag
The division tag is also known as the div tag. HTML uses the div tag to
create content divisions in web pages such (text, images, navigation bar,
etc.). The div element is the most useful in web development because it
allows us to divide out the data on a web page and create specific sections
for different types of information or functions. The element inside this tag
is inline elements.
The Span Tag
A general inline container for inline items and content is the HTML span
element. When no other semantic element is available, it is used to group
elements for stylistic purposes. The element inside this tag is block
elements.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>
<p>Welcome to codingnito</p>
</span>
</body>
</html>
OUTPUT
Welcome to codingnito
Difference between Div and Span
Here, you can see that div is an inlin element which the whole line for its element whereas span is a block element, which the minimum sufficient space to be need for th element.
ID and Classes
ID
The document is identified by the id attribute, which is a special identifier.
JavaScript and CSS both employ it to carry out a specific task for a distinct
element. The id attribute in CSS is utilised by preceding id with the #
symbol. The same id name can be assigned to only one tag in a single HTML
file.
Syntax: div id=id_name> </div>
Class
The class property for an HTML element defines one or more class names.
Any HTML element can use the class attribute. The class attribute in CSS is
utilised by preceding class with the (.) symbol. CSS and JavaScript can both
use the class name to perform specific actions on items that have the
specified class name.
Syntax: div class="class_name"> </div>
Semantics
The following semantic HTML elements can be used to specify various web
page components:
article: This tag is used to define a self-contained, independent piece of content within a document.
It could represent a blog post, a news article, a comment, or any other similar content.
aside: The aside tag is used to mark content that is tangentially related to the main content of the webpage.
It is often used for sidebars, advertising, or additional information that complements the main content.
details: This tag is used to create a disclosure widget, which allows the user to reveal or hide additional information.
It is typically used for collapsible content, such as FAQs or long descriptions, with a clickable summary.
figcaption: The figcaption tag is used to provide a caption or a title for a figure element. It is typically
used in conjunction with images or multimedia content to provide a description or context.
figure: This tag is used to encapsulate any content that is referenced from the main content, such as images, illustrations,
diagrams, or videos. The figure tag provides a semantic grouping for such content.
footer: The footer tag represents the footer section of a webpage or a section. It is typically used to include information
like copyright notices, contact details, related links, or social media icons. The footer is usually placed at the bottom of the webpage.
header: This tag is used to define the introductory content or a container for a group of introductory content at
the top of a webpage or a section. It often contains the website's logo, site title, navigation menus, and other relevant information.
main: The main tag represents the main content area of a webpage. It should contain the primary content that is
unique to that page. While there can be multiple section elements within main, there should only be one main> per page.
mark: This tag is used to highlight or mark a specific portion of text within a document. It can be useful for
emphasizing keywords or important information.
nav: The nav tag is used to define a section of navigation links or menus on a webpage. It typically includes
links to different pages or sections within the website, allowing users to navigate through the content.
section: This tag is used to define a distinct section within a document. It helps in structuring the content and
grouping related information together. Each section should have a unique heading to provide a clear structure to the content.
summary: The summary tag is used in conjunction with the details tag to provide a visible heading or summary for the
collapsible content. It represents the default visible text that users see before expanding the details.
time: This tag is used to represent a specific date, time, or duration. It can be used to indicate when an article was
published, the time of an event, or any other time-related information.
HTML's "form" element allows for the data collection of inputs and
interactive controls. In other terms, a form is a container that contains
input elements like text, email, number, radio buttons, check-boxes, submit
buttons, etc. It provides facilities for entering text, numbers, values, emails,
passwords, and control fields like these. Forms are typically used when you
want to gather or input some information. For example to purchase an item
in online shopping, a user must first submit his name, personal details and
item description etc. in the form.
<label> ==> It specifies the label for elements.
<input> ==> It is used to change the type of input data from the form to text, password, email, and so on.
<button> ==> It defines a clickable button that can control other elements or perform a function.
<select> ==> It's used to make a drop-down menu.
<textarea> ==> It is used to receive long text input.
<fieldset> ==> It's used to draw a box around her form elements and group the data that goes with them.
<legend> ==> It specifies the captions for fieldset elements.
<datalist> ==> It specifies pre-defined list options for input controls.
<output> ==> It displays the results of calculations.
<option> ==> It is used to define drop-down menu options.
<optgroup> ==> It is used in a drop-down list to define group-related options.
<label> ==> It specifies the label for elements.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="#">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML form Attributes
_blank ==> The response is displayed in a new window or tab
_self ==> The response is displayed in the current window
_parent ==> The response is displayed in the parent frame
_top ==> The response is displayed in the full body of the window
framename ==> The response is displayed in a named iframe
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="birthdate">Date of Birth:</label>
<input type="date" id="birthdate" name="birthdate" required>
<br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br><br>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<br><br>
<label for="upload">Upload File:</label>
<input type="file" id="upload" name="upload">
<br><br>
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color" value="#000000">
<br><br>
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<br><br>
<label for="terms">Agree to Terms:</label>
<input type="checkbox" id="terms" name="terms" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Working with Meta
The meta tag specifies information about an HTML document. Metadata
is a information (data) about data. meta tags are always placed inside the
head element and are typically used to specify the character set, page
description, keywords, document author, and viewport settings. Metadata
will not be displayed on the page, but it can be parsed by machines.
Browsers (how to display content or reload page), search engines
(keywords), and other web services all use metadata. Through the meta
tag, web designers can take control of the viewport (the user's visible area
of a web page).
<meta name="keywords" content="HTML, CSS, JavaScript"> ==> Define keywords for search engines<br>
<meta name="description" content="Free Web tutorials for HTML and CSS"> ==> Define a description of your web page<br>
<meta name="author" content="John Doe"> ==> Define the author of a page<br>
<meta httpsequiv="refresh" content="30"> ==> Refresh document every 30 seconds<br>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ==> Setting the viewport to make your website look good on all devices
Here you can see the ouput of the image
