Scribd
Upload
18 views53 pages

HTML-1 (CLASS NOTES)

The document provides an introduction to HTML, explaining its purpose as a markup language for structuring web content. It covers the basic structure of an HTML document, the use of HTML tags and elements, attributes, and examples of how HTML interacts with CSS and JavaScript. Additionally, it discusses various HTML features such as comments, heading tags, and styling options.

Uploaded by

cxalbxer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views53 pages

HTML-1 (CLASS NOTES)

The document provides an introduction to HTML, explaining its purpose as a markup language for structuring web content. It covers the basic structure of an HTML document, the use of HTML tags and elements, attributes, and examples of how HTML interacts with CSS and JavaScript. Additionally, it discusses various HTML features such as comments, heading tags, and styling options.

Uploaded by

cxalbxer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

Web Application

Development
BCS 102
HTML Introduction
• HTML stands for Hyper Text Markup Language
• HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991
as a standard for creating web pages
• It's a markup language used to structure content on the web, defining
elements like headings, paragraphs, links, and images
• Hypertext refers to the linking of text with other web pages, documents, or
sections within the same document) through hyperlinks, while 'markup
language' denotes a language that utilizes a specific set of tags.
• HTML is a markup language and not a programming language.
Let’s understand with an
example
Café Menu
HTML (Menu Content)
HTML is like the actual menu in a restaurant. It lists the dishes, categories, prices, and descriptions.
Example: The list of appetizers, main courses, and desserts with descriptions and prices are like
HTML elements <h1>, <p>, <ul>, and <li>.

CSS (Menu Design)


Role: CSS is the design of the menu, including the fonts, layout, colors, and overall presentation.
Example: Choosing fonts, background colors, and spacing to make the menu visually appealing is
like setting font-family, background-color, and margin in CSS.

JavaScript (Interactive Features)


Role: JavaScript adds interactivity to the menu, like highlighting dishes, showing recommendations,
or allowing customers to filter by dietary preferences.
Example: Hover effects to highlight menu items, filtering options for vegetarian dishes, or a pop-up
showing the chef's special are like JavaScript functions that handle user interactions.
Smartphone App
HTML (App Layout and Content)
HTML provides the layout and basic content of the app, like screens, buttons, and forms.
Example: The login screen, buttons, text fields, and images within the app are like HTML
elements <form>, <input>, <button>, and <img>.

CSS (App Styling)


Role: CSS styles the app’s interface, determining how each screen and element looks.
Example: The color of buttons, fonts, spacing between elements, and background images are
styled using CSS properties background-color, font-family, margin, and border-radius.

JavaScript (App Logic and Interaction)


Role: JavaScript controls the app’s logic, handling actions like logging in, fetching data, and
responding to user input.
Example: Submitting a form, loading user data from a server, and handling touch gestures are
functions handled by JavaScript.
Every HTML document begins with a document
•
type declaration (<!DOCTYPE html>) that tells
Structure of HTML Document
the browser that this is an HTML5 document.

• The <html> tag is the root element that


encapsulates all the content on the page.
The document is then enclosed within <html> tags,
which contain two main sections:
<head>
<body>

 The <head> section contains metadata and the


title of the webpage, which appears in the
browser's title bar.
 The <title> tag sets the title of the web page,
which is displayed in the browser's title bar or tab.
 The <body> tag contains the visible content of the
web page. This is where text, images, links and
other elements go.
HTML Tags

• HTML tags are used to define elements in an HTML document.


• Tags are words enclosed within < and > angle brackets.
• Tags are typically written in pairs: an opening tag (<tagname>) and a closing tag
(</tagname>), with content between them.
• Some tags are self-closing (e.g., <img>, <br>, <hr>).
• An HTML tag acts as a container for content or other HTML tags.
• They serve as keywords that instruct the web browser on how to format and display
the content.
• HTML tags are not case sensitive: <P> means the same as <p>.
Tags

1) Paired Tags (Container Tags)


• These are tags that come in pairs, consisting of an opening tag and a
corresponding closing tag. The content goes between these two tags.

• Opening Tag: The opening tag starts with < and ends with >. For example, <p>.
• Closing Tag: The closing tag also starts with < but includes a forward slash /
before the tag name, and ends with >. For example, </p>.
• Examples:
Paragraphs: <p>This is a paragraph for our first assignment</p>
2) Unpaired Tags (Self-Closing Tags or Stand-Alone Tags)
• These are tags that don't require a closing tag. They are self-contained, encapsulating all the information
within a single tag.

• Self-Closing Tag: A self-closing tag starts with < and ends with /> (though the / is optional in HTML5).

• Note: Later if you happen to use react or a framework like Next.js, you will have to close the tag like this
<br/> <hr/>.
• Examples of self-closing tags:
• Line Break: <br>
• Horizontal Rule: <hr>
• Image: <img src="image.jpg" alt="An example image">
HTML Element
• An HTML element is a complete set that consists of a start tag (or opening tag), content, and
an end tag (or closing tag).

• HTML Element = Start Tag + Content + End Tag

• For example:
<h1>This is heading</h1>
In this example, <h1> is the start tag, "This is heading" is the content, and </h1> is the end
tag. Together, they form an HTML element.
• A nested HTML element is an HTML structure where one element is placed inside another
element.

• The enclosing element is often referred to as the "parent," while the enclosed element is called
the "child."

• Nested HTML Element = One HTML Element Inside Another HTML Element

• For example:
<h1><b>This is heading</b></h1>
In this example, the <b> element (child) is nested inside the <h1> element (parent).
• An empty HTML element is one that does not have a closing tag or content. These
elements are also known as "void elements" or "self-closing elements."

• Empty HTML Element = Tags with No Content

• For example:
<br>
This is a break tag, which has no content and no closing tag. It's used to insert a line
break within text or other inline elements.
The <hr> tag, used for horizontal rules, is another example of an empty or void
element.
The <html> element is the root element and it defines the
whole HTML document.

<!DOCTYPE html>
It has a start tag <html> and an end tag </html>.
<html>
<body> Then, inside the <html> element there is a <body>
element and inside <body> tag there are tags : <h1> and
<p>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Let’s Recap
• HTML Tags
HTML tags are the markers that define the start and end of an element. They are
wrapped in angle brackets, like <p> and </p>.

• HTML Elements
An HTML element includes an opening tag, content, and a closing tag, forming a
complete set. For example, <p>This is a paragraph.</p>
HTML Attributes

• HTML attributes are used to define the characteristics(additional


information) of an HTML element.
• They are placed within the element's opening tag and consist of two parts:
the name and the value like: name="value"

• Name: Specifies the property for that element.


• Value: Sets the value of that property for the element.
• Attributes are always specified in the start tag
• All HTML elements can have attributes
Href attribute
The <a> tag defines a hyperlink.
Example: The href attribute specifies the URL of the
page the link goes to
<!DOCTYPE html>
Hypertext reference
<html>
<body>
<h1>href Attribute</h1>
<p>HTML links are defined with the a tag. The link
address is specified in the href attribute:</p>
<a href="https://www.flipkart.com">Shopping
time</a>
</body>
</html>
src Attribute

The <img> tag is used to embed an image in an Example:


HTML page.
<!DOCTYPE html>
The src attribute specifies the path to the image to <html>
be displayed
<body>

<h3>src Attribute</h3>
source

width and height Attributes <img src="C:\Users\DELL\Desktop\flower.jpg"


width="50" height="65">
The <img> tag should also contain the
width and height attributes, which specify </body>
the width and height of the image (in </html>
pixels).
alt Attribute
• The required alt attribute for the <img> tag specifies an alternate text for
an image, if the image for some reason cannot be displayed. This can be
due to a slow connection, or an error in the src attribute, or if the user uses
a screen reader.

• Example:
<img src="C:\Users\DELL\Desktop\flower.jpg" alt="beautiful flowers"
width="50" height="65">
ID Attribute
The ID attribute is used to assign a unique identifier to an HTML
element. Each element with an ID has its own unique identity, similar to
how each individual has a unique identity. Multiple elements cannot
have the same ID.

Example:

<p id="Btech">This orientation is scheduled for Btech</p>


<p id="MCA">This orientation is scheduled for MCA</p>

In this example, the ID attribute helps to distinguish between two


paragraphs by having different values: "Btech" and "MCA".
Class Attribute

• The class attribute is used to associate an HTML element with


a particular class, typically for styling or JavaScript
manipulation. Unlike the ID attribute, the class attribute is not
unique, and multiple elements can share the same class
Title Attribute
• The title attribute provides additional information about an element and is often
displayed as a tooltip when the mouse hovers over it.

Example :

<!DOCTYPE html>

<html>

<body>

<p title="Hello, I'm a tooltip">To display the title attribute as a tooltip, put mouse over this
paragraph.</p>

</body>

</html>

Output:
Style Attribute
• The style attribute allows for inline styling of HTML elements
• It is used in conjunction with CSS properties to directly style
individual elements within the HTML code.

• Example:
<p style="color:orange;">write this text in orange colour</p>

We will study style attribute in detail further


Lang attribute
lang attribute inside the <html> tag is used to declare the language of the Web page. This is meant to
assist search engines and browsers.

Example:

<!DOCTYPE html>

<html lang="en">

<body>

------

</body>

</html>

The first two characters define the language of the HTML page, and the last two characters define the
country.

• The following example specifies English as the language and United States as the country:

<html lang="en-US">
Some points to keep in mind
• When the attribute value itself contains double quotes, it is
necessary to use single quotes and vice versa.
Example:
<p title='This is my sweet "home"'>What is this</p>
Let’s recap
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for
images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font,
size, and more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an element
Comments
• HTML comments are not displayed in the browser.
• These are like notes you write and these notes help make the code easier to
understand but don't show up on the actual website.The web browser just
skips them.
• They help in code readability and documentation.
• HTML comments are denoted by <!-- content -->.
• The shortcut key for commenting out code is Ctrl + /.
• Comments can be used to hide content temporarily
• HTML supports both single-line and multi-line comments.
• Comments are also great for debugging HTML, because you can comment
out HTML lines of code, one at a time, to search for errors.
Types of Comments in HTML
1)Single-line Comments 2)Multi-line Comments
Single-line comments are contained within one Multi-line comments span across multiple lines,
line. They are useful for short annotations. making them ideal for detailed explanations or
temporarily disabling blocks of code.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<body>
<h3>This will be shown on the webpage</h3>
<h3>This will be shown on the webpage</h3>
<!--This is a comment and will not be shown-->
<!--
</body>
This is a comment and will not be shown
</html>
<p>This is for my notes</p>

-->

</body>

</html>
Heading Tags
• These tags help create a hierarchical organization of content, making it easier for both
users and search engines to understand the page's content. Resulting in better
readability
• In HTML, heading tags ranging from <h1> to <h6> are used to define the structure and
layout of text on a web page.
• The <h1> tag is generally used for the main title and is the largest and most
prominent, while <h2> to <h6> tags are used for subheadings.
• <h1> tag: defines the first-level heading and is typically the largest and boldest among
all the heading tags. It is often used for the main title of the page.
• <h2> Tag: Used for major section headings
• <h3> Tag: Used for sub-sections
• <h4> Tag: Often used for headings within an <h3> section; useful for further breaking
down content.
• <h5> Tag: Rarely used and suitable for deeply nested sections or less important
headings.
• <h6> Tag: The smallest heading tag and is used for very specific or minor headings,
A question for you
Write HTML code to get the following output:

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Paragraph Tag
• The <p> tag is used to format text into distinct paragraphs.
• Each paragraph element is separated by automatic empty line spaces above
and below the content, providing a clear visual separation. The tag must be
closed with its corresponding </p> tag.
• A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
• The browser will automatically remove any extra spaces and lines when the
page is displayed:

Output:
Horizontal line tag
• To add a horizontal line in your HTML document.
• The <hr> tag is an empty or self-closing tag, means it doesn't require a
closing tag.
•It serves as a visual separator, dividing different sections of your document
with a horizontal line.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading</h1>
<p>You can add text here.</p>
<hr>
<hr>
<p>Add some more text here.</p>
<hr>
</body>
• Output:
Break Tag
• To insert a line break in your HTML document, you can utilize the <br> tag.
• <br> tag is used to insert line breaks in text or paragraphs
• Use <br> if you want a line break (a new line) without starting a new paragraph
Example:
<!DOCTYPE html>
<html>
<body>

<p>hello,<br>this is an example of<br>br tag</p>

</body>
• Output:
Style Attribute
• Example: <p style="color:orange;">write this text in orange colour</p>
• Syntax : <tagname style="property:value;">
• The property is a CSS property. The value is a CSS value
1) Background-color
The CSS background-color property defines the background color for an
HTML element.
Example:
<!DOCTYPE html>
<html>
<body style="background-color:green;">
<h1>Background colour</h1>
</body>
</html>
2) color
The CSS color property defines the text color for an HTML element:
Example:
<p style="color:pink;">This is a paragraph.</p>

3) font-family
The CSS font-family property defines the font to be used for an HTML element:
Example:
<p style="font-family:times new roman;">This is style attribute</p>
<p style="font-family:castellar;">trying another font</p>

4) font-size
Example:
<h1 style="font-size:150%;">This is a heading</h1>
<p style="font-size:120%;">This is a paragraph.</p>
<!-- even if you keep the size of heading and paragraph same then also size remains same,the
• 5) text-align
The CSS text-align property defines the horizontal text
alignment for an HTML element:
Example:
<p style="text-align:right;">Parapgraph is aligned at right</p>
Text Formatting Tags
• Example:
<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>


<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
• The HTML <mark> element defines text that should be marked or highlighted

Example:

<p>Make sure to bring your <mark>admit cards</mark> on the examination day.</p>

Output:

• The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text

Example:

<p>We will have class in <del>IT</del> ECE department</p>

• The HTML <small> element defines smaller text

Example:

<p>This is some normal size text.</p>

<p><small>This is smaller text.</small></p>


Border color
• Example:
• <h1 style="border: 5px solid green;">Hello World</h1>
HTML Lists
• HTML provides different types of lists to display data in various forms. Each list
contains one or more list items.
2 Types of lists are there in HTML:
• Unordered List: Displays items using bullets.
• Ordered List: Displays items in a numerical sequence, and supports various
numbering styles like Arabic numerals, Roman numerals, and so on.
• Definition List: Organizes items in a format similar to a dictionary, with terms
and their corresponding definitions.
• Unordered HTML List
An unordered list starts with the <ul>
tag.
Each list item starts with the <li> tag.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered HTML list</h2>
<ul>
<li>B.Tech</li>
<li>BCA</li>
<li>BBA</li>
</ul>
</body>
</html>
• Ordered List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
Example:

<!DOCTYPE html>
<html>
<body>
<h2>Ordered HTML list</h2>
<ol>
<li>B.Tech</li>
<li>BBA</li>
<li>BCA</li>
</ol>
</body>
</html>
.
• A description list is a list of terms, with a description of each term.

<!DOCTYPE html>
<html>
dl- description list
<body> dd- description data
dt-description details
<h1>Description List</h1>
<dl>
<dt>M.Tech</dt>
<dd>- It's a PG course</dd>
<dt>B.Tech</dt>
<dd>- It's a UG course</dd>
</dl>
</body>
Unordered HTML Lists-Different types
of marker
The CSS list-style-type property is used to define the style of the list item marker.
Example:
<ul style="list-style-type:disc;">
<li>B.Tech</li>
<li>BCA</li>
<li>BBA</li>
</ul>

• <ul style="list-style-type:circle;">
• <ul style="list-style-type:square;">
• <ul style="list-style-type:none;">
Nested HTML Lists (Unordered list)
Example:
<ul>
<li>BCA</li>
<li>B.Tech
<ul>
<li>IT</li>
<li>AI/ML</li>
</ul>
</li>
<li>BBA</li>
</ul>
Output:
Ordered HTML Lists-Different
types of marker
Example:
<ol type="1">
<li>B.Tech</li>
<li>BBA</li>
<li>BCA</li>
</ol>

• <ol type="A">
• <ol type="a">
• <ol type="I">
• <ol type="i">
Specified number list counting
• Example:
<ol start="20">
<li>B.Tech</li>
<li>BBA</li>
<li>BCA</li>
</ol>

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


<li>B.Tech</li>
<li>BBA</li>
<li>BCA</li>
</ol>
Output:
Nested HTML Lists (Ordered list)
• Example:
<ol>
<li>BCA</li>
<li>B.tech
<ol>
<li>Semester 1</li>
<li>Semester 2</li>
</ol>
</li>
<li>BBA</li>
</ol>
Output
Another example:
<ol type="I">
<li>BCA</li>
<li>B.tech
<ol>
<li>Semester 1</li>
<li>Semester 2</li>
</ol>
</li>
<li>BBA</li>
</ol>

You might also like