Scribd
Upload
17 views

HTML Notes

The document discusses the history and evolution of HTML from its origins in 1989 to the present living standard. It covers major versions like HTML 1.0, 2.0, 3.2, 4.01, and 5, as well as XHTML 1.0. Modern web development involves using HTML along with CSS and JavaScript to build interactive web applications. The document also provides overviews of HTML document structure, common elements like headings and paragraphs, and attributes that can be used across elements.

Uploaded by

welida5850
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

HTML Notes

The document discusses the history and evolution of HTML from its origins in 1989 to the present living standard. It covers major versions like HTML 1.0, 2.0, 3.2, 4.01, and 5, as well as XHTML 1.0. Modern web development involves using HTML along with CSS and JavaScript to build interactive web applications. The document also provides overviews of HTML document structure, common elements like headings and paragraphs, and attributes that can be used across elements.

Uploaded by

welida5850
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML -Krishnan

The history of HTML (Hypertext Markup Language) is closely tied to the development and evolution
of the World Wide Web. Here is a brief overview of the key milestones and versions in the history of HTML:
1. Tim Berners-Lee's Proposal (1989): HTML's origins can be traced back to the late 1980s when
British computer scientist Tim Berners-Lee, working at CERN (the European Organization for Nuclear
Research), proposed a system for sharing information among scientists by using a "hypertext"
system. This proposal laid the foundation for the World Wide Web.
2. HTML 1.0 (1993): The first official specification for HTML, known as HTML 1.0, was published in
1993. It introduced the basic structure of HTML documents, including elements like headings,
paragraphs, links, and lists.
3. HTML 2.0 (1995): HTML 2.0 was published in 1995 and added new features such as forms and
tables. This version of HTML helped in the early development of the web.
4. HTML 3.2 (1997): HTML 3.2, released in 1997, brought improvements in terms of support for tables
and frames. It was widely adopted and used during the mid- to late-1990s.
5. HTML 4.01 (1999): HTML 4.01 was released in 1999 and further refined the standard with features
like cascading style sheets (CSS) support and improved form handling.
6. XHTML 1.0 (2000): Extensible Hyper Text Markup Language (XHTML) was introduced in 2000, which
aimed to combine the benefits of XML with HTML. XHTML was an attempt to make HTML more
consistent and better structured.
7. HTML5 (2014): HTML5 is a major revision of the HTML standard. It introduced a wide range of new
elements, attributes, and APIs. HTML5 also incorporated multimedia elements like <video> and
<audio, support for local storage, and the <canvas> element for graphics.
8. HTML5.1 (2016) and HTML5.2 (2017): These were incremental updates to HTML5, introducing new
elements and features.
9. HTML Living Standard (Ongoing): Unlike previous versions with specific release dates, the HTML
specification has moved to a "living standard" model, where it continually evolves. The latest
features and improvements are added gradually, and there may not be distinct versions in the
traditional sense.
10. Web Components and Modern Web Technologies: HTML is now part of a broader ecosystem that
includes CSS and JavaScript. Modern web development involves using web components,
frameworks, and libraries to create interactive and dynamic web applications.
HTML Document Structure
HTML Document Structure: An HTML document is structured with opening and closing HTML tags.
The basic structure includes an opening <html> tag, which encloses two main sections: the <head> and
<body>. The <head> section contains metadata, while the <body> section contains the visible content of
the web page.

Elements and Tags


Elements and Tags: HTML uses elements and tags to structure content. Elements are defined by an
opening tag, content, and a closing tag. Common elements include headings, paragraphs, lists, and more.

HTML Attributes
HTML elements often include attributes that provide additional information about an element.
Attributes are placed within the opening tag and have a name and a value. For example, the href attribute
in an anchor tag specifies the URL to link to.

There are some HTML attributes that can be used with various HTML elements to provide additional
information, behaviour, or styling. These attributes are not specific to a single element and can be applied
to many different elements. Here are some of the commonly used attributes that can be used with various
HTML elements:
1. id Attribute:
• Used to give an element a unique identifier. This identifier can be used for styling with CSS or
targeting the element with JavaScript.
• Can be applied to most HTML elements.
2. class Attribute:
• Used to assign one or more classes to an element. Classes are a way to group elements for
styling with CSS or targeting with JavaScript.
• Can be applied to most HTML elements.
3. style Attribute:
• Allows you to add inline CSS styles to an element for individual styling. It's not typically
recommended for large-scale styling but can be useful for small adjustments.
• Can be applied to most HTML elements.
4. title Attribute:
• Provides additional information about an element, and the information is displayed as a
tooltip when a user hovers over the element.
• Can be applied to most HTML elements.
These are some attributes common attributes can be used for any elements in html.
Head and Body Sections:
The <head> section contains metadata for the page, such as the page title, character encoding, and
links to external resources like stylesheets and scripts. The <body> section contains the visible content that
users see.
Headings:
Headings are used to define the structure and hierarchy of content. There are six levels of headings,
from <h1> (most important) to <h6> (least important).

Paragraph Tag:
The <p> element is used to create paragraphs of text.
Anchor tag
The anchor tag (<a>) in HTML is used to create hyperlinks, allowing users to navigate to other web
pages, resources, or specific sections within the same page. The primary attribute associated with the
anchor tag is the href attribute, which defines the URL of the destination. However, there are several other
attributes and options that can be used to customize the behavior and appearance of links. Here's an
explanation of the anchor tag and its different attributes:
1. href (Hypertext Reference): The href attribute is the most important attribute for the anchor tag. It
specifies the URL or destination to which the link points. It can be an absolute URL, a relative URL, or an
email address:
• Absolute URL:
<a href="https://www.example.com">Visit Example</a>
• Relative URL (link to a local page or resource):
<a href="about.html">About Us</a>
• Email link:
<a href="mailto:[email protected]">Contact Us</a>
2. target: The target attribute defines where the linked content will open. Common values include:
• _blank: Opens the link in a new tab or window.
• _self (default): Opens the link in the same window or tab.
• _parent: Opens the link in the parent frame or window.
• _top: Opens the link in the full body of the window.
Example using the target attribute to open a link in a new tab:

3. download: The download attribute is used to indicate that the linked resource should be downloaded
rather than navigated to. When set, the browser will prompt the user to download the linked content.

4. title: The title attribute provides additional information about the link. When a user hovers their cursor

over the link, the text in the title attribute is displayed as a tooltip.
5. aria-label (Accessibility Label): The aria-label attribute is used to provide an accessible label for screen
readers. It describes the purpose of the link, making it more accessible to users with disabilities.

6. Other Attributes: While these are the most commonly used attributes, the anchor tag can also accept
other attributes for various purposes, such as styling with CSS or JavaScript functionality.

These attributes can be combined and customized to create links that suit your specific needs. Links
are a fundamental part of web navigation and can greatly enhance the user experience on a website.
Images and Media
Images and Media are essential components of web content that can greatly enhance the visual and
auditory aspects of a web page. In this explanation, we'll cover how to add images, image attributes, and the audio
and video elements, along with their different attributes.

1. Copying file path

1. Navigate to the file for which you want to copy the path in File Explorer.

2. Right-click on the file to open the context menu.


3. In the context menu, select "Properties."
4. In the Properties window that opens, you'll see several tabs at the top. Click on the "General" tab if
it's not already selected. This tab typically displays information about the file, including its location.
5. In the "Location" field on the "General" tab, you'll see the full file path. This is the path to the file
you want to copy.
6. Click on the path in the "Location" field to highlight it.
7. Right-click on the highlighted path, and then select "Copy" from the context menu.
8. Also copy and paste the file name.
It will look like the following → "E:\Wallpaper\image2.jpg"
or
the easiest way is, move the media file same folder where the HTML file is stored then just mention
the file name as src value. The above same method applicable for any type of file.
1. Adding Images and it’s Attributes and copying file path
To add images to an HTML document, you use the <img> (image) element. This element is self-closing and
does not have a closing tag. It requires the src attribute to specify the image file's source (URL or file path).
Here's a basic example:

• src (Source): Specifies the URL or file path of the image.


• alt (Alternative Text): Provides a text description of the image for accessibility and in case the image
cannot be displayed.
• width: Sets the width of the image in pixels.
• height: Sets the height of the image in pixels.
• title: Provides additional information about the image as a tooltip.
• class: Assigns a class for styling with CSS.
• id: Provides a unique identifier for the image for use with JavaScript.

Linking images from the internet

Here src attribute value was copied from the internet. The above path had been taken from the internet.

2. Audio Elements

1. <audio></audio>: This is the opening and closing tag that defines the audio element.

2. src: This attribute specifies the source URL of the audio file. You can use different audio formats (e.g.,
MP3, Ogg, WAV).

3. controls: Adds playback controls, allowing users to play, pause, adjust volume, and seek within the audio.

Multiple Sources:

To ensure compatibility with various browsers, you can provide multiple source files of different
formats using the <source> element.

The browser will choose the first supported format. Because all the browsers might not support
same video format. So, if possible, it’s better to add audio file with different file formats like the above.

• <audio>: This is the opening tag for the audio element.

• src="E:\K-391 ignite.mp3": This attribute specifies the source URL of the audio file. In this case, the
audio file is located at "E:\K-391 ignite.mp3" on your local file system.

• controls: This attribute adds audio playback controls, allowing users to play, pause, adjust volume,
and seek within the audio.
Other attributes in audio:

1. loop:

• Causes the audio to play in a continuous loop, restarting when it reaches the end.

2. muted:

• Mutes the audio when the page loads. Users can unmute it using the audio controls.

3. Video Elements

The <video> tag in HTML is used to embed video content directly into web pages. It provides a native way to
play video without the need for external plugins or video players. Here's a detailed explanation of the <video> tag
and its key attributes:

Basic Usage:

To embed a video in an HTML document, you use the <video> element. You specify the video file's source
with the src attribute and can provide playback controls for the user. Here's a basic example:

• <video>: This is the opening tag that defines the video element.

• src: This attribute specifies the source URL of the video file. You can use different video formats (e.g., MP4,
WebM).

• controls: This attribute adds video playback controls, allowing users to play, pause, adjust volume, and seek
within the video.

All other attributes:

• <video>: This is the opening tag for the video element.

• src="E:\Movies\Gran.Turismo.2023.mkv": Specifies the source URL of the video file. In this case, the video
file is located on your local file system at "E:\Movies\Gran.Turismo.2023.mkv." Please note that using local
file paths like this will only work on your local machine.

• controls: This attribute adds video playback controls, allowing users to play, pause, adjust volume, and seek
within the video.

• autoplay: Automatically starts playing the video as soon as the page loads.

• muted: Mutes the video when the page loads. Users can unmute it using the video controls.

• loop: Causes the video to play in a continuous loop, restarting when it reaches the end.

Please be aware that using local file paths like "E:\Movies\Gran.Turismo.2023.mkv" in a web page will only work on
your local machine and won't be accessible to others on the internet. When publishing web content, it's typical to
use relative or absolute URLs to link to video files hosted on a web server.
Multiple Sources:

To ensure compatibility with various browsers, you can provide multiple source files of different formats
using the <source> element. The browser will choose the first supported format.

All other video attributes

1. src: Specifies the source URL of the video file.

2. controls: Adds playback controls to the video element.

3. autoplay: Automatically starts playing the video as soon as the page loads.

4. loop: Causes the video to play in a continuous loop.

5. width: Sets the width of the video in pixels.

6. height: Sets the height of the video in pixels.

7. aria-label: Provides an accessible label for the video, conveying its purpose or content to screen reader users.
HTML Comments:
HTML comments are used to include explanatory notes within the HTML code. These comments are
not visible in the web browser and do not affect the rendering of the webpage. They are primarily meant
for developers and are useful for providing documentation, explanations, or making temporary notes in the
code. HTML comments are enclosed within <!-- and --> tags.
<!-- This is an HTML comment -->

You can also use comments to explain your code or make notes for yourself and other developers working on
the same code. And anything that’s inside <!-- and --> will not be shown in the output window. We can see that
below.

Output:
HTML Lists
HTML Lists allow you to organize and structure content into various types of lists. There are three
main types of lists in HTML: Ordered Lists, Unordered Lists, and Definition Lists, each with its own set of
attributes and uses.
1. Ordered Lists (<ol>):
Ordered lists are used to create numbered lists. The <ol> and <li> elements are used to define an
ordered list. The common attributes used with ordered lists are:
• type: Specifies the type of numbering for list items. Possible values include:
• "1" (default): Arabic numerals (1, 2, 3...).
• "A": Uppercase letters (A, B, C...).
• "a": Lowercase letters (a, b, c...).
• "I": Uppercase Roman numerals (I, II, III...).
• "i": Lowercase Roman numerals (i, ii, iii...).
• start: Specifies the starting value for the list items. This allows you to set a custom number from
which the list should begin. The attributes value can only be number. Below is the example and
output.

2. Unordered Lists (<ul>):


Unordered lists are used to create bullet-point lists. The <ul> and <li> elements are used to define an
unordered list. The common attributes used with unordered lists are:
• type: Specifies the type of bullet point marker. Possible values include:
• "disc" (default): Filled circle.
• "circle": Empty circle.
• "square": Filled square.
3.Defintion List
A definition list in HTML, created using the <dl>, <dt>, and <dd> elements, is a way to structure and
present a list of terms and their corresponding definitions. It's typically used when you need to define and
explain terms, glossary items, or attributes. Here's a detailed explanation of how to create a definition list in
HTML:
• A definition list consists of three main HTML elements: <dl> (Definition List), <dt> (Definition Term),
and <dd> (Definition Description).
• <dl> serves as the container for the entire list of terms and definitions.
• <dt> is used to define a term or label within the list.
• <dd> follows a <dt>, providing the corresponding definition or description of the term.
• Definition lists are commonly used to present terms and their meanings, glossary items, or
descriptions of attributes.
• When rendered in a web browser, a definition list typically displays terms and their definitions in a
structured format, making it easy for users to understand and learn from the content.

Nested List
A nested list nothing but a list inside a list. That can be any type ordered, unordered or Definition
list.
Tables in HTML.
Tags used in HTML Tables
1. <table> Element:
• The <table> element is the container for the entire table. It encloses all the other table
elements.
2. <caption> Element:
• The <caption> element provides a title or caption for the table. In this example, the caption
is "Monthly Expenses."
3. <thead> Element:
• The <thead> element defines the table header section. This section typically contains row(s)
that define the column headers. It helps in associating labels with the data in the table.
4. <tr> Element (Table Row):
• Inside the <thead>, you have a single <tr> element representing a table row for the column
headers.
5. <th> Element (Table Header Cell):
• Inside the header row, you have two <th> elements, which are used to define header cells.
These cells contain labels for the two columns: "Category" and "Amount."
6. <tbody> Element:
• The <tbody> element defines the table body section, where the actual data rows are placed.
7. <tr> Elements (Table Data Rows):
• Inside the <tbody>, there are two <tr> elements, each representing a data row. These rows
contain the actual data.
8. <td> Elements (Table Data Cells):
• Inside each data row, there are two <td> elements, which represent data cells. The first <td>
contains the category name ("Rent" and "Utilities"), and the second <td> contains the
corresponding amounts ("$1000" and "$200").
9. <tfoot> Element:
• The <tfoot> element defines the table footer section, often used for summaries or additional
information at the bottom of the table. It is structured similarly to the <thead> and can
contain rows and cells as needed.
HTML table Attributes:
1. border: This attribute specifies the width of the table border. For example, <table border="1"> will
create a table with a border of 1 pixel.
2. cellpadding: This attribute specifies the padding within individual table cells. It controls the space
between the content of a cell and the cell's border.
3. cellspacing: This attribute specifies the spacing between table cells. It controls the space between
adjacent cells.
4. width: This attribute specifies the width of the table. You can set it to a specific pixel value or a
percentage of the available space.
5. height: This attribute specifies the height of the table. Similarly, you can set it to a specific pixel
value or a percentage.
6. summary: The summary attribute is used to provide a summary or description of the table's
content, which can be beneficial for accessibility purposes.
7. caption: The <caption> element is used to add a title or caption to the table. It's typically placed
inside the <table> element.
8. colspan and rowspan: These attributes are used in table cells to merge cells horizontally (colspan)
or vertically (rowspan). For example, if you want to merge two cells across columns, you can use
colspan="2".
9. scope: The scope attribute is used with <th> elements to specify whether a header cell pertains to a
row ("row") or a column ("col"). This can improve accessibility for screen readers.

Simple HTML table:


HTML table using semantic elements<thead>, <tbody>, <tfoot>.
When to use these?
In HTML, <thead>, <tbody>, and <tfoot> are elements used to structure tables. They are not
required for basic tables, but they are useful for improving table semantics, accessibility, and for styling or
scripting purposes.

Example and Output:


HTML table with all the attributes. (Use attributes based on the requirement)
HTML Forms
HTML Forms are an essential part of web development and are used to collect and submit data
from users. Forms are created using a combination of HTML elements and attributes. Here's a brief
overview of HTML form elements and some of their attributes:
HTML forms can include various tags to create form elements and structure the form. Here's a list of HTML
tags commonly used in forms:
1. <form>: Defines the root element for creating a form. It specifies the structure and attributes of the
form, including the action and method.
2. <input>: Creates various types of input fields, such as text, password, radio buttons, checkboxes,
and more. The type attribute specifies the input type.
3. <textarea>: Creates a multi-line text input field for longer text or comments.
4. <select>: Generates a dropdown menu or list of options. It uses <option> elements to define the
available choices.
5. <button>: Creates a clickable button within the form. It can be used for custom actions or form
submission.
6. <label>: Provides a label for a form element, helping with accessibility and usability by associating
text with form controls.
7. <fieldset>: Groups related form elements together, improving form structure and organization.
8. <legend>: Used in conjunction with <fieldset>, it provides a legend or title for the grouped form
elements.
9. <optgroup>: Groups related <option> elements within a <select> dropdown.
10. <option>: Defines individual choices within a <select> dropdown.
11. <input type="submit">: Creates a submit button to submit the form.
12. <input type="reset">: Creates a reset button to clear the form fields.
13. <input type="radio">: Creates a radio button for selecting one option from a group of options.
14. <input type="checkbox">: Creates checkboxes for selecting multiple options.
15. <input type="file">: Allows users to select and upload files to the server.
16. <input type="hidden">: Provides hidden data that is not visible to the user but can be sent with the
form submission.
17. <input type="date">: Provides a date picker input for selecting dates.
18. <input type="time">: Offers a time picker input for selecting times.
19. <input type="email">: Provides an input field for email addresses and includes email validation.
20. <input type="url">: Offers an input field for URLs, including URL validation.
21. <input type="number">: Creates an input field for numeric values.
22. <input type="range">: Provides a slider control for selecting a value within a specified range.
23. <input type="color">: Generates a color picker input for selecting colors.
24. <input type="tel">: Creates an input field for telephone numbers.
25. <input type="search">: Provides an input field specifically designed for search queries.

Attributes used in form


1. action (in <form>):
• Purpose: Specifies the URL where the form data will be sent when submitted.
2. type:
• Purpose of type attribute is to create different type of input fields.
3. method (in <form>):
• Purpose: Defines the HTTP request method for form submission, either "get" or "post."
4. id (in various form elements):
• Purpose: Provides a unique identifier for the HTML elements, making it easier to target them
with CSS or JavaScript.
5. name (in various form elements):
• Purpose: Assigns a name to the form elements, which is used to identify and handle the
form data on the server-side when the form is submitted.
6. rows and cols (in <textarea>):
• Purpose: Specifies the number of visible rows and columns in a text area.
7. min and max (in various input elements):
• Purpose: Sets the minimum and maximum allowed values for numeric and range input
elements.
8. pattern (in various input elements):
• Purpose: Defines a regular expression pattern for validation, ensuring that the user's input
adheres to a specific format.
9. value (in various input elements):
• Purpose: Sets the initial value for input elements, such as text, date, time, and color inputs.
10. for (in <label> elements):
• Purpose: Associates the label with a specific form element by matching the for attribute with
the id attribute of the input element.
11. value (in <option> elements):
• Purpose: Specifies the value associated with each option in a <select> element. When the
form is submitted, this value is sent to the server.
Output:
Meta Tags:
Meta tags are HTML elements used to provide metadata about a web page. Metadata is information
about the page itself, such as its character encoding, viewport settings, authorship, description, and
keywords. Meta tags are placed within the <head> section of an HTML document and are not displayed on
the web page. They serve various purposes, including:
1. <meta charset="UTF-8">
This meta tag defines the character encoding for the web page. Using UTF-8 ensures that
special characters and different languages are displayed correctly.
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag is used for responsive web design. It helps adapt the page's layout to different
screen sizes, particularly on mobile devices.
3. <meta name="description" content="Brief page description">
This meta tag provides a short description of the page's content. It's often used by search
engines to display in search results.
4. <meta name="keywords" content="keyword1, keyword2, keyword3">
Historically, this meta tag was used to list relevant keywords for the page. However, modern
search engines typically do not rely on it for ranking. So no that important.
HTML5 Semantic Elements (header, nav, section, article, etc.)
HTML5 introduced a set of semantic elements that provide a more structured and meaningful way to
describe the content and structure of a web page. Semantic elements help both developers and web
browsers understand the purpose and hierarchy of different parts of a webpage. Here's a detailed
explanation of some of the key HTML5 semantic elements:
1. <header>:
• The <header> element typically contains the introductory content of a web page or a
section, such as the site logo, navigation menu, and possibly a page heading.
• It's usually placed at the top of the page or the top of a section.
2. <nav>:
• The <nav> element is used to define a navigation menu. It can contain links to other pages
or sections within the same page.
• It helps in differentiating the primary navigation from other content.
3. <main>:
• The <main> element represents the main content of the page. There should be only one
<main> element per page.
• It's a helpful element for screen readers and search engines to understand the primary
content of the page.
4. <article>:
• The <article> element is used to mark up a self-contained composition within a document,
such as a blog post, news article, forum post, or a comment.
• It should make sense on its own and can be syndicated independently.
5. <section>:
• The <section> element is a generic container for grouping related content. It helps to divide
a page into thematic sections.
• It is not meant to define the outline or table of contents but rather to group content with a
common theme.
6. <aside>:
• The <aside> element is used for content that is tangentially related to the content around it,
such as sidebars, advertisements, or pull quotes.
• It can be used within an <article> to provide additional information, or outside to provide
supplementary content for the entire page.
7. <footer>:
• The <footer> element is typically found at the bottom of a page or a section and contains
information about the content, such as copyright information, author information, and links
to related documents.
• It helps in distinguishing the footer from the main content.
8. <figure> and <figcaption>:
• The <figure> element is used to encapsulate any content that is referenced from the main
content, such as images, charts, videos, etc.
• The <figcaption> element can be used within a <figure> to provide a caption for the content
it contains.
These semantic elements are more than just a way to style a webpage; they provide structural and
meaningful information to the document, which is useful for accessibility, search engines, and maintaining
a clear document structure. Using these elements appropriately can make your HTML code more
understandable, maintainable, and better optimized for various web technologies.

Look at the example code in the next page and the output in the following page.
The Same page when CSS applied.
Marquee Tag
The <marquee> tag is used to create scrolling or moving text or images on a web page. It's a simple way to
add animation or motion to your content, but it's not commonly used in modern web development. Still,
understanding how it works can be informative.
Here are the key attributes of the <marquee> tag:
1. direction: It specifies the direction of the scrolling, such as "left," "right," "up," or "down."
2. scrollamount: This attribute controls the speed of scrolling. A higher value makes the content move
faster.
3. scrolldelay: It sets the delay (in milliseconds) before the scrolling starts.
4. loop: You can specify how many times the scrolling should repeat. A value of "-1" indicates an
infinite loop.
Here's a basic example of how to use the <marquee> tag to create scrolling text:

Here's what the above<marquee> tag you provided will do:


1. It will display the text "This text is scrolling from right to left."
2. The text will start scrolling from the right side of the marquee element and move to the left.
3. It will scroll at a speed of 5 pixels per iteration, which means it moves 5 pixels each time it updates.
4. There will be a 20-millisecond delay before the scrolling starts, creating a brief pause before the
scrolling action.
5. The scrolling action will repeat three times due to the loop="3" attribute.

While the <marquee> tag was popular in the early days of the web for creating animations and scrolling
text, it has several drawbacks and is no longer recommended:
1. Accessibility: <marquee> is not accessible, as it can be disorienting and difficult for users with
disabilities to interact with.
2. Usability: Scrolling text can be distracting and irritating to many users, leading to a poor user
experience.
3. Cross-browser Compatibility: <marquee> is not well-supported in modern browsers, and its
behaviour can vary between different browsers.
4. Deprecated: It is considered obsolete and has been removed in HTML5, though some browsers may
still support it for backward compatibility.
To achieve scrolling or animation effects in modern web development, it is recommended to use CSS
animations and transitions for smoother, more controllable, and accessible effects. JavaScript can also be
used to create dynamic and interactive animations on web pages.
iframe tag in html
An <iframe> (short for "inline frame") is an HTML element used to embed another HTML document
or web page within the current web page. It allows you to display content from another source, such as a
different website, a video, a map, or any web page, within a designated section of your page. Iframes are a
powerful tool for integrating external content into your website. Here's a detailed explanation of how
iframes work and how to use them:
Basic <iframe> structure:

Attributes of the <iframe> element:


1. src: This is the most important attribute, and it specifies the URL of the external web page you want
to embed. It could be an absolute or relative URL.
2. width: Specifies the width of the iframe in pixels or as a percentage of the container's width.
3. height: Specifies the height of the iframe in pixels or as a percentage of the container's height.
4. frameborder: This attribute is used to control whether or not to display a border around the iframe.
Common values are "0" (no border) or "1" (display a border).
5. scrolling: Determines if scrollbars should appear within the iframe. Common values are "yes" (show
scrollbars), "no" (hide scrollbars), or "auto" (show scrollbars only when needed).
Examples of <iframe> usage:
1. Embedding Map

Steps to get Google map embed code:

1.Go to Maps website

2.Choose a location

3.Click “share” button

4.You will see “embed map” or ”embed” and click copy

5.Paste in .html source file


2.Embedding YouTube video

Steps to get YouTube video embed code:

1.Go to YouTube website and choose a video

3.Click “share” button and You will see” embed”. click


“embed” and click copy

5.Paste in .html source file and Refresh output page

3.Embedding pdf.
Inside src attribute paste the path of pdf file and define height and width. Refresh the page.

Some important points to consider:

• Security: Be cautious about embedding content from untrusted sources, as it may pose security
risks. It's essential to ensure that the content you embed does not contain malicious code.
• Responsiveness: When using iframes, consider how they will behave on different screen sizes. You
may need to make your iframes responsive by adjusting the width and height using CSS or by using
CSS frameworks like Bootstrap.
• Accessibility: Ensure that the content within the iframe is accessible and does not create issues for
users with disabilities.
• Loading time: Be aware that loading content from external sources may impact the loading time of
your web page, especially if the external content is slow to load.
In summary, iframes are a versatile tool for embedding content from external sources into your web pages.
However, they should be used with caution and attention to security and user experience considerations.
HTML Entities:
HTML entities are special codes used in HTML documents to display characters that have special
meanings in HTML or that are not easily typed on a keyboard. They are typically used to display reserved
characters, such as < and >, or characters with special meanings in HTML, like & (ampersand), or to display
characters from character sets or languages that are not easily entered via a keyboard.
HTML entities are represented by their entity names or entity numbers, enclosed in an ampersand (&) and
a semicolon (;). The basic syntax is:
1. Using Entity Names:
• &entity_name; (e.g., &lt; for <, &gt; for >)
2. Using Entity Numbers(Decimal codes):
• &#entity_number; (e.g., &#60; for <, &#62; for >)
Here are some common HTML entities:
• &lt; or &#60;: Less than symbol (<)
• &gt; or &#62;: Greater than symbol (>)
• &amp; or &#38;: Ampersand (&)
• &quot; or &#34;: Double quotation mark (")
• &apos; or &#39;: Single quotation mark (')
• &copy; or &#169;: Copyright symbol (©)
• &reg; or &#174;: Registered trademark symbol (®) Scan above QR to get HTML
Decimal code for Entities
• &euro; or &#8364;: Euro currency symbol (€)
• &pound; or &#163;: Pound sterling currency symbol (£)
Below is the example and sample output
HTML Text formatting tags
1. <b> and <strong> Tags:
• <b> is used for making text bold.
• <strong> is used to indicate that the enclosed text is of strong importance.
2. <i> and <em> Tags:
• <i> is used for italicizing text.
• <em> is used to emphasize the enclosed text.
3. <u> Tag:
• <u> is used for underlining text.
4. <s> and <del> Tags:
• <s> is used for striking through text.
• <del> is used to indicate deleted or removed text.
5. <sup> and <sub> Tags:
• <sup> is used for superscript text (raised above the line).
• <sub> is used for subscript text (lowered below the line).
6. <span> Tag:
• <span> is a generic inline container that is often used with CSS for applying styles to a
specific part of text.
7. <font> Tag (deprecated):
• The <font> tag was used to set font-related attributes like size and color. However, it's
deprecated in HTML5, and it's better to use CSS for font styling.
8. <mark> Tag:
• <mark> is used to highlight and mark a section of text.
9. <code> Tag:
• <code> is used to display inline code or code snippets.
10. <pre> Tag:
• <pre> is used to display preformatted text. It preserves spacing and line breaks.

Look at the example code and output in the next page.


Output:

You might also like