0% found this document useful (0 votes)

15 views71 pages

HTML

HTML, or HyperText Markup Language, is the foundational language for creating web pages, defining their structure and meaning. HTML5, the latest version, introduces new elements, multimedia support, and improved APIs, enhancing web functionality and user experience. Semantic elements in HTML improve accessibility and SEO by providing clear context and meaning to the content.

Uploaded by

rishikajat03

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

15 views71 pages

HTML

Uploaded by

rishikajat03

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

HTML - HyperText Markup Language

It is the most basic building block of the Web. released in 1993.

HTML – defines the meaning and structure of web content. For example, content could be structured within a set of paragraphs, a list of
bulleted points, or using images and data tables.
CSS – describe a web page appearance/presentation.
JS - functionality/behaviour

HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display.

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites.
A markup language is used to define the text document within the tag which defines the structure of web pages.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements"
such
as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>,
<datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.

To annotate text means to add notes, comments, or explanations to a text. This can include highlighting, underlining, or writing in the
margins to provide additional information, clarify meanings, or express personal reactions.
Annotations help in understanding and remembering the content better, making it a useful strategy for studying and analyzing texts.

What is HTML5?
HTML5 is the latest version of HyperText Markup Language, which supports multimedia, tags and elements, improved document markups
and new APIs

1. New Elements and Attributes: HTML5 introduces new semantic elements like <header>, <footer>, <article>,
and <section> to better define the structure of web pages12.
2. Multimedia Support: It includes native support for audio and video elements through the <audio> and <video> tags,
eliminating the need for external plugins12.f
3. Graphics and Effects: The <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images, and it
also supports scalable vector graphics (SVG)12.
4. Form Enhancements: HTML5 provides new input types (e.g., email, date) and attributes for better form validation and user
experience12.
5. APIs and DOM: It includes various APIs like the Geolocation API, Web Storage API, and more, which enhance the functionality of
web applications1
Feature Html Html5
s

definition A hypertext markup language HTML5 is a new version of HTML with new functionalities with markup language with Internet technolo
(HTML) is the primary language for
developing web pages.

Multimedi Language in HTML does not have HTML5 supports both video and audio.
a support support for video and audio.

Storage The HTML browser uses cache HTML5 has the storage options like:application cache, SQL database, and web storage.
memory as temporary storage.

Browser HTML is compatible with almost all In HTML5, we have many new tags, elements, and some tags that have been removed/modified, so
compatibil browsers because it has been
ity present for a long time, and the
browser made modifications to
support all the features.

Graphics In HTML, vector graphics are In HTML5, vector graphics are supported by default.
support possible with tools LikeSilver
light, Adobe Flash, VML, etc.

Threading In HTML, the browser interface and The HTML5 has the JavaScript Web Worker API, which allows the browser interface to run in multiple t
JavaScript running in the same
thread.

Storage Uses cookies to store data. Uses local storage instead of cookies

Vector Vector graphics are possible with Vector graphics is an integral part of HTML5, SVG and canvas.
and the help of technologies like VML,
Graphics Silverlight, Flash,etc.

Shapes It is not possible to create shapes We can draw shapes like circles, rectangles, triangles.
like circles, rectangles,
triangles.
Doc type Doctype declaration in html is too The DOCTYPE declaration in html5 is very simple "<! DOCTYPE html>
long
<! DOCTYPE HTML PUBLIC "- //
W3C // DTD HTML 4.01 // EN"
"[Link]
dtd">

Character Character encoding in HTML is too Character encoding declaration is simple <meta charset = "UTF-8">
Encoding long.
<! DOCTYPE HTML PUBLIC "- //
W3C // DTD HTML 4.0
Transitional // EN">

Multimedi Audio and video are not the part of Audio and video are essential parts of HTML5,like: <Audio>, <Video>.
a support HTML4.

Vector In HTML4, vector graphics are Vector graphics are an integral part of HTML5, SVG, and canvas.
Graphics possible with the help of
techniques like VML, Silver light
and Flash.

Html5 uses cookies. It supplies local storage in place of cookies.

Shapes It is not possible to draw shapes Using html5, you can draw shapes like circles, rectangles, triangles.
like circles, rectangles, triangles.

Browser Works with all older browsers A new browser supports this.
Support

HTML tags are the building blocks of HTML (HyperText Markup Language) used to create and structure web pages. They are enclosed in
angle brackets (< >) and typically come in pairs: an opening tag and a closing tag. The closing tag has a forward slash (/) before the tag
name.
HTML tags are keywords that instruct web browsers on how to display and format a web page.
Anatomy of an HTML element

Attributes

Attributes contain extra information about the element that you don't want to appear in the actual content.

The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the
same class value) with style information and other things.

You can put elements inside other elements too — this is called nesting.

Some elements have no content and do not have closing tags are called void elements. Take the <img>

The <!DOCTYPE> declaration in an HTML document serves a crucial role. It informs the web browser about the version of HTML being used,
ensuring that the browser renders the page correctly. Here are some key points about <!DOCTYPE>

Including a <!DOCTYPE> declaration triggers standards mode, where the browser renders the page according to modern web
standards. Without it, the browser may enter quirks mode, leading to inconsistent rendering across different browsers.

Standard (Standards) Mode Behavior:

When a browser renders a page in Standard Mode, it follows the rules and specifications set by web standards organizations like the W3C
(World Wide Web Consortium). This means that the HTML and CSS are interpreted consistently across different browsers, leading to more
predictable and uniform rendering. Here are some behaviors you can expect:
 Box Model: The width and height of elements include only the content box, not padding, border, or margin.
 Floating Elements: Floats work as intended according to the CSS specifications.
 Document Object Model (DOM) Manipulation: JavaScript interacts with the DOM in a predictable manner.
 CSS Properties: Modern CSS properties and layouts, such as Flexbox and Grid, are rendered correctly.

Quirks Mode Behavior:

Quirks Mode, on the other hand, is designed to mimic the behavior of older browsers before web standards were established. This ensures
that older websites, which might rely on these "quirks," still function properly. Some notable quirks include:
 Box Model: The width and height of elements include the content, padding, and border, which can lead to unexpected layout
issues.
 Floating Elements: Floats might behave inconsistently, causing layout problems.
 DOM Manipulation: JavaScript interactions with the DOM might not behave as expected.
 CSS Properties: Some modern CSS properties might not be supported or might behave differently.

Document Type Definition (DTD): In older versions of HTML (like HTML 4.01), the <!DOCTYPE> declaration was more complex and
included a reference to a Document Type Definition (DTD), which specified the rules for the HTML document structure

The <html> tag is fundamental in an HTML document as it represents the root of the document.

1. Root Element: The <html> tag encapsulates all other HTML elements (except for the <!DOCTYPE> declaration). It signifies
the beginning and end of an HTML document 12.
2. Language Declaration: It often includes the lang attribute to specify the language of the document, which helps
search engines and browsers understand the content better 1.
3. Structure: Inside the <html> tag, you typically have two main sections:
o <head>: Contains meta-information about the document, such as the title, character set, and links to stylesheets.
o <body>: Contains the actual content of the document, such as text, images, links, and other elements.

Character Encoding: It tells the browser to use UTF-8 encoding, which supports a wide range of characters from different languages,
including special symbols and emojis.
 <meta name="viewport" content="width=device-width"> tag is essential for creating responsive web designs. Here’s why it’s important:

1. Responsive Design: It ensures that your web page adjusts its layout based on the device’s screen size. This is crucial for making your website
look good on both desktop and mobile devices.
2. Viewport Width: The width=device-width part sets the width of the page to match the width of the device’s screen. This means the content will
fit the screen size of the device, whether it’s a phone, tablet, or desktop.
3. Initial Scale: Often, you’ll see this tag used with initial-scale=1.0, which sets the initial zoom level when the page is first loaded by the browser.

 <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is
also used to describe the page when you bookmark/favorite it.
 The <title> contents are also used in search results.

Many <meta> elements include name and content attribute

name specifies the type of meta element it is; what type of information it contains.

content specifies the actual meta content.

Two such meta elements that are useful to include on your page define the author of the page, and provide a concise description of the page.

<meta name="author" content="Chris Mills" />

the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide
keywords for search engines to determine the relevance of that page for different search terms — is ignored by search engines, because
spammers were just filling the keyword list with hundreds of keywords, biasing results.

<link rel="icon" href="[Link]" type="image/x-icon" />---- favicon

<h1> represents the main heading, <h2> represents subheadings, <h3> represents sub-subheadings, and so on.

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Semantic elements in HTML are elements that clearly describe their meaning in a human- and machine-readable way. These elements not
only define the structure of the content but also give it clear context and meaning, making it easier for both developers and browsers to
understand the webpage's structure.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

Why Do I Need to Use Semantic HTML Tags?

1. Accessibility: Helps screen readers understand the content better, making websites more accessible for
people with disabilities.
2. SEO: Improves search engine rankings by helping search engines understand the content.
3. Readability: Makes the code easier to read and maintain for developers.
4. Consistency: Creates a consistent structure across web pages, enhancing user experience.
5. Future-Proofing: Ensures compatibility with future web technologies and browsers.
HTML <article> Element
The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the
web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

The <article> element in HTML is used to represent a self-contained piece of content that can be independently
distributed or reused. This could include things like blog posts, news articles, forum posts, or any other independent
item of content.

HTML5 <aside> Element

The <aside> element represent the content which is indirectly giving information to the main content of the page.
It is frequently represented as a sidebar.

Details and Summary

The “details” defines additional details that the user can hide or view. “summary” defines a visible
heading for a “details” element.

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as
the last child of a <figure> element.

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information

Footer
Footer located at the bottom of any article or document, they can contain contact details, copyright
information etc. There can be multiple footers on a page.

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents
Main
It defines the main content of the document. The content inside the main tag should be unique.

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

Nesting <article> tag in <section> tag or Vice Versa?

We know that the<article> element specifies independent, self-contained content and the
<section> element defines section in a document.
In HTML, we can use <section> elements within <article> elements, and <article> elements within
<section> elements.
We can also use <section> elements within <section> elements, and <article> elements within
<article> elements.
For example:
In a newspaper, the sport <article> in the sport section, may have a technical section in each
<article>.
HTML5 <nav> Element
The HTML <nav> element is used to define a set of navigation links.

<mark> Defines marked/highlighted text

HEADING

In HTML, headings are used to define the titles or subtitles of sections on a webpage.
HTML headings, from <h1> to <h6>, indicate content hierarchy and importance. Search engines use them for indexing. Users navigate
by headings. Employ <h1> for main titles, <h2> for subsections, and progressively lower levels for less important content to maintain
structure and readability.
 <h1>: Main heading, used for the most important title.
 <h2>: Subheading, used for sections under the main heading.
 <h3>: Sub-subheading, used for subsections under <h2>.
 <h4>: Further subsections under <h3>.
 <h5>: Even smaller subsections.
 <h6>: The smallest heading, used for the least important titles.

The default size of HTML headings can be changed, using the style attribute.

Why Do Headings are Important?

1. SEO Impact:
 Search engines index headings to understand content structure.
 Well-organized headings enhance visibility and ranking.
2. Highlighting Key Topics:
 Headings emphasize essential information.
 Readers quickly grasp the document’s structure.`

PARAGRAPH

In HTML, a paragraph is defined using the <p> tag. Paragraphs are block-level elements, meaning they start on a new line and take up the
full width available.

Key Points:
 New Line: Each paragraph starts on a new line.
 Spacing: Browsers automatically add some space (margin) before and after each paragraph for better readability 12.
 Block-Level Element: Paragraphs are block-level elements, meaning they occupy the full width of their container

LISTS

An HTML list is a record of related information used to display the data or any information on web pages in the ordered or unordered
form.
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML
lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Note: We can create a list inside another list, which will be termed as nested List.

HTML List Tags

Here is the list of all lists tags HTML:
Tag Description

<ul
> Defines an unordered list

<ol
> Defines an ordered list

<li> Defines a list item

<dl
> Defines a description list

<dt Defines a term in a

> description list

<dd Details the term in a

> description list

Unordered
Unordered lists are used to mark up lists of items for which the order of the items doesn't matter. Let's take a shopping list as an
example:
milk
eggs
bread
hummus

The unordered list items are marked with bullets. It is also known as bulleted lists. An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
Attribute: This tag contains two attributes which are listed below:
 compact: It will render the list smaller.
 type: It specifies which kind of marker is used in the list.

Ordered
Ordered lists are lists in which the order of the items does matter. Let's take a set of directions as an example:

Drive to the end of the road

Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road.

In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag. Each list item starts with
the “li” tag.

Attributes:
 compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
 reversed: It defines that the order will be descending.
 start: It defines from which number or alphabet the order will start.
 type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.

The compact attribute in HTML was used to reduce the space between items in a list, making the list appear more compact.

HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested
list.

LINE BREAK

In HTML, a line break is created using the <br> tag. This tag is an empty element, meaning it doesn’t have a closing tag. It’s used to insert
a single line break, similar to pressing “Enter” on your keyboard.

When to Use <br>:

 Addresses: For formatting addresses.
 Poems: For writing poems where line breaks are significant.
 Short Lines: For breaking lines in short pieces of text.
Important Note:
Avoid using <br> to create space between paragraphs. Instead, use CSS to manage spacing and layout.

what is difference between bold and strong?

<b> (Bold):
 Purpose: Used for stylistic purposes to make text bold without implying any extra importance or emphasis.

<strong> (Strong):
 Purpose: Used to indicate that the text is of strong importance or emphasis. It conveys semantic meaning, which can be
understood by screen readers and search engines.

Key Differences:
 Semantic Meaning: <strong> adds semantic meaning, indicating importance, while <b> is purely for visual styling12.
 Accessibility: Screen readers and search engines recognize <strong> as important, but <b> is just bold text without additional
significance12.
what is difference between italic and emphasized?

<i> (Italic):
 Purpose: Used for stylistic purposes to indicate text that is set off from the normal prose, such as foreign words, technical terms,
or fictional character thoughts.
<em> (Emphasis):
 Purpose: Used to emphasize text, indicating that it should be read with more stress or importance. This tag adds semantic
meaning, which can be recognized by screen readers and search engines.

 Key Differences:
Semantic Meaning: <em> adds semantic emphasis, indicating importance, while <i> is purely for visual styling12.
Accessibility: Screen readers and search engines recognize <em> as emphasized text, but <i> is just italicized text without
additional significance.

COMMENTS

In HTML, comments are used to add notes or explanations within the code that are not displayed in the browser. They help developers
understand the code better and can be useful for debugging or temporarily disabling code. Comments are enclosed within

Types of Comments in HTML:

1. Single-Line Comment:
o Used to comment out a single line of code.

2. Multi-Line Comment:
o Used to comment out multiple lines of code.

BACKGROUND COLOR & TEXT COLOR

In HTML, you can set the background color & text color of an element using the background-color & color property in CSS. There are
several ways to do this:
1. Inline CSS:
 Add the style attribute directly to the HTML element.
2. Internal CSS:
 Use the <style> tag within the <head> section of your HTML document.
3. External CSS:
 Link to an external CSS file using the <link> tag.
COLOR VALUES

HTML Colors can be applied to text, backgrounds, borders, links, forms, tables, etc.

HTML Colors Name

HTML color names offer a user-friendly way to specify colors. From classic colors like Red, Green, Blue, Pink, Purple, Sky Blue, Gray,
and Orange, to more exotic shades, HTML provides a wide palette for web designers. There are 140 colors.

Color Values
Color values in HTML define the color of elements. They can be specified using various formats such as hexadecimal, RGB, RGBA, HSL,
HSLA, color names, and system color keywords.

What is RGB?
RGB stands for Red, Green, and Blue. It’s an additive color model used primarily for sensing, representation, and display of images in
electronic systems, such as televisions and computers. The RGB model is based on the human perception of colors.
Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!

Here are some examples:

Black: rgb(0, 0, 0) (no light)

White: rgb(255, 255, 255) (full intensity of all three colors)
Red: rgb(255, 0, 0) (full intensity of red, no green or blue)
Green: rgb(0, 255, 0) (full intensity of green, no red or blue)
Blue: rgb(0, 0, 255) (full intensity of blue, no red or green)
Yellow: rgb(255, 255, 0) (full intensity of red and green, no blue)
Cyan: rgb(0, 255, 255) (full intensity of green and blue, no red)
Magenta: rgb(255, 0, 255) (full intensity of red and blue, no green)

Additive Color Mixing

The RGB model is an additive color model, which means that colors are created by adding light. When you combine red, green, and blue
light at full intensity, you get white light. Conversely, when you combine them at zero intensity, you get black.
Digital Imaging: RGB is used in digital cameras, scanners, and other imaging devices to capture and display images.
Displays: Computer monitors, televisions, and other digital screens use RGB to display images and videos.
Why RGB?
The RGB model is used because it aligns with the way our eyes perceive color. Our eyes have three types of color receptors
(cones) that are sensitive to red, green, and blue light. By adjusting the intensity of these three colors, we can create a wide
range of colors that our eyes can perceive.

Conclusion
Understanding the RGB color model is essential for anyone working with digital media, web design, or any field that
involves color representation on screens. It allows you to precisely control the colors in your projects and create visually

appealing designs.
RGBA Color Values
RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

Digital Imaging: RGBA is used in image editing software to manage layers and transparency effects.
Graphics and Animation: RGBA is essential for creating smooth transitions and overlays in graphics and animations.
Why Use RGBA?
The alpha channel in RGBA allows for more flexibility in design by enabling transparency. This is particularly useful for creating overlays,
shadows, and other effects that require varying levels of opacity.

Conclusion
Understanding the RGBA color model is crucial for web developers and designers who want to create visually appealing and dynamic
designs. It provides an additional layer of control over color transparency, enhancing the overall user experience.

RGB Color Format RGBA Color Format

RGB is a three-channel format

RGBA is a four-channel format containing data for Red, Green,
containing data for Red, Green, and
Blue, and an Alpha value.
Blue.

The CSS function rgb() has wide The CSS function rgba() may have limited support in the older
browser support. browser.

The opacity of the color cannot be The opacity of the color can be easily controlled by specifying the
specified using this color format. opacity in terms of a parameter.

RGBA provides more flexibility in design by allowing you to create

effects like overlays, shadows, and semi-transparent elements
HEX

The HEX color model is another way to represent colors in web design and digital imaging. HEX stands for hexadecimal, a base-16 number
system. Here’s a detailed explanation:

What is HEX?
HEX color codes are six-digit codes that represent colors using the hexadecimal number system. Each pair of digits in the code
corresponds to the intensity of red, green, and blue components of the color.

How Does HEX Work?

A HEX color code is written as #RRGGBB, where:
RR represents the red component.
GG represents the green component.
BB represents the blue component.
Each pair of digits can range from 00 to FF (in hexadecimal), which corresponds to 0 to 255 in decimal.

Color Representation
Here are some examples of HEX color codes:

Black: #000000 (no light)

White: #FFFFFF (full intensity of all three colors)
Red: #FF0000 (full intensity of red, no green or blue)
Green: #00FF00 (full intensity of green, no red or blue)
Blue: #0000FF (full intensity of blue, no red or green)
Yellow: #FFFF00 (full intensity of red and green, no blue)
Cyan: #00FFFF (full intensity of green and blue, no red)
Magenta: #FF00FF (full intensity of red and blue, no green)

Web Design: HEX codes are widely used in CSS to specify colors.

Digital Imaging: HEX codes are used in image editing software to manage colors.
Graphics and Animation: HEX codes are essential for creating precise color schemes in graphics and animations.
Why Use HEX?
The HEX color model is popular because it is compact and easy to read. It is also widely supported in web development and design tools.
HSL Color Fomat
HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.
 Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240
represents blue color.
 Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely
unsaturated (gray).
 Lightness: It takes percentage value, where 100% represents white, while 0% represents black.

HSLA COLOR FORMAT

HSLA Color Values

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)Cre

Creating hyperlinks

ng hyperlinks
HTML links, or hyperlinks, connect web pages and are created using the `<a>` tag with the `href` attribute. They enable users to
navigate between pages or resources. Links can be text, images, or other elements, enhancing web navigation and interactivity. Users
can click on links to navigate between different pages or resources.
Note: A hyperlink can be represented by an image or any other HTML element, not just text.
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

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the "[Link] part)

Tip: If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

Advanced Features
Anchor Links: Link to a specific part of the same page using an ID.

Absolute URL: An absolute URL contains all the information needed to locate a resource. This includes the protocol (e.g., HTTP, HTTPS),
the domain name, and the path. It's a complete address that works no matter where the hyperlink is placed.
 Example: [Link]
Relative URL: A relative URL, on the other hand, is a partial address that’s relative to the current page's URL. It doesn’t include the
protocol or domain name and is often used within the same website to link to another page or resource.
 Example: /path/to/resource (assuming the base URL is [Link]
Differences:
Feature Absolute URL Relative URL
Completen Fully complete URL, with protocol and
Partial URL, missing protocol and domain
ess domain name
Can be used anywhere, regardless of the Used within the same website, dependent on the
Usage
current URL base URL
Example [Link] /path/to/resource

Document fragments
It's possible to link to a specific part of an HTML document, known as a document fragment, rather than just to the top of the document.
To do this you first have to assign an id attribute to the element you want to link to. It normally makes sense to link to a specific heading,
so this would look something like the following:

<h2 id="Mailing_address">Mailing address</h2>

Then to link to that specific id, you'd include it at the end of the URL, preceded by a hash/pound symbol (#), for example:

<p>
Want to write us a letter? Use our
<a href="[Link]#Mailing_address">mailing address</a>.
</p>

You can even use the document fragment reference on its own to link to another part of the current document:

Attribute Value Description

download filename Specifies that the target will be downloaded when a user clicks
on the hyperlink

href URL Specifies the URL of the page the link goes to

hreflang language_code Specifies the language of the linked document

media media_query Specifies what media/device the linked document is optimized

for

ping list_of_URLs Specifies a space-separated list of URLs to which, when the link
is followed, post requests with the body ping will be sent by the
browser (in the background). Typically used for tracking.

referrerpolicy no-referrer Specifies which referrer information to send with the link
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url

rel alternate Specifies the relationship between the current document and
author the linked document
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag

target _blank Specifies where to open the linked document

_parent
_self
_top

type media_type Specifies the media type of the linked document

Email links
It's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page.
This is done using the <a> element and the mailto: URL scheme.

 Use the mailto: scheme inside the href attribute to create a link that opens the user's email program

<a href="[Link] email to nowhere</a>

In fact, the email address is optional. If you omit it and your href is "[Link] a new outgoing email window will be opened by the user's
email client with no destination address. This is often useful as "Share" links that users can click to send an email to an address of their
choosing.
We can also include the cc, bcc, subject and body.
IMG

The <img> tag is used to embed an image in an HTML page. This is a void element
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the
referenced image.
The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image
loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag.

Note: Search engines also read image filenames and count them towards SEO. Therefore, you should give your image a descriptive
filename; [Link] is better than [Link].

Never point the src attribute at an image hosted on someone else's website without permission. This is called "hotlinking".

src attribute:
The src attribute in <img> tag specifies the image’s location. If the URL is correct, the browser retrieves and displays the image;
otherwise, it shows a broken link icon.

Alternative text
The next attribute we'll look at is alt. Its value is supposed to be a textual description of the image, for use in situations where the image
cannot be seen/displayed or takes a long time to render because of a slow internet connection.
The easiest way to test your alt text is to purposely misspell your filename.

Width and height

You can use the width and height attributes to specify the width and height of your image. They are given as integers without a unit, and
represent the image's width and height in pixels.

IMAGE MAP
Creating an image map in HTML allows you to define clickable areas within an image.

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the clickable areas.

Insert the Image: Use the <img> tag to display your image and add the usemap attribute to link it to the image map.
<img src="[Link]" alt="Description" usemap="#image-map">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the
image and the image map.

Define the Image Map: Use the <map> tag to create the image map and give it a name that matches the usemap attribute.
<map name="image-map">

</map>

The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of these values:
 rect - defines a rectangular region
 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image.

Shape="rect"
 The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.
 So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top
 The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top

<area shape="rect" coords="34,44,270,350" alt="Description" href="[Link]">

Shape="circle"
 To add a circle area, first locate the coordinates of the center of the circle: 337,300
 Then specify the radius of the circle: 44 pixels

<area shape="circle" coords="337,300,44" alt="Description" href="[Link]">

Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).
This can be used to create any shape.
Like maybe a croissant shape!

<img src="[Link]" alt="Workplace" usemap="#workmap">

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.
Add a click event to the <area> element to execute a JavaScript function

 Use the HTML <map> element to define an image map

 Use the HTML <area> element to define the clickable areas in the image map
 Use the HTML usemap attribute of the <img> element to point to an image map

PICTURE ELEMENT

The <picture> element in HTML is a powerful tool for responsive web design, allowing you to specify multiple image sources for different
display scenarios.
Structure of the <picture> Element
The <picture> element contains one or more <source> elements and an <img> element. The browser will choose the most
appropriate image based on the conditions specified in the <source> elements.

Components

1. <picture> Element: Acts as a container for the <source> elements and the <img> element.
2. <source> Elements: Define different image sources and conditions for when each should be used.
o srcset Attribute: Specifies the URL of the image to be used.
o media Attribute: Defines the media condition (similar to a media query) that must be met for this source to be used.
3. <img> Element: Provides a default image and alt text. This is used if none of the <source> conditions are met or if the browser
does not support the <picture> element.

Use Cases

Art Direction: Serve different images for different screen sizes or orientations.

Format Support: Provide images in different formats to ensure compatibility with various browsers.

Responsive Images: Load different images based on the device’s screen size to save bandwidth and improve load times.

There are two main purposes for the <picture> element:

1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with
matching attribute values, and ignore any of the following elements.

2. Format Support

Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and
the browser will use the first format it recognizes, and ignore any of the following elements.

Benefits

 Flexibility: Allows for different images to be served based on screen size, resolution, and format support.
 Performance: Helps in optimizing load times by serving appropriately sized images.
 Compatibility: Ensures that a fallback image is always available for browsers that do not support the <picture> element.
TABLE
An HTML Table is an arrangement of data in rows and columns in tabular format. Tables are useful for various
tasks, such as presenting text information and numerical data. A table is a useful tool for quickly and easily finding
connections between different types of data. Tables are also used to create databases .

Tags used in HTML Tables

HTML Tags Descriptions

Defines the structure for organizing

<table> data in rows and columns within a
web page.

Represents a row within an HTML

<tr>
table, containing individual cells.

Shows a table header cell that

<th>
typically holds titles or headings.

Represents a standard data cell,

<td>
holding content or data.

Provides a title or description for the

<caption>
entire table.

<thead> Defines the header section of a table,

HTML Tags Descriptions

often containing column labels.

Represents the main content area of a

<tbody> table, separating it from the header or
footer.

Specifies the footer section of a table,

<tfoot>
typically holding summaries or totals.

Defines attributes for

<col> table columns that can be applied to
multiple columns at once.

Groups together a set of columns in

<colgroup> a table to which you can apply
formatting or properties collectively.

Defining Tables in HTML

An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the
“th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.
Table Cells
Table Cell are the building blocks for defining the Table. It is denoted with <td> as a start tag & </td> as a end tag.
Syntax
</td> Content...</td>
Table Rows
The rows can be formed with the help of combination of Table Cells. It is denoted by <tr> and </tr> tag as a start & end
tags.
Syntax
</tr> Content...</tr>
Table Headers
The Headers are generally use to provide the Heading. The Table Headers can also be used to add the heading to the Table.
This contains the <th> & </th> tags.
Syntax
</th> Content...</th>

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:
table, th, td {
border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Dotted Table Borders
With the border-style property, you can set the appearance of the border.

The following values are allowed:

 dotted
 dashed
 solid
 double
 groove
 ridge

 inset

 outset
 none
 hidden

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element.
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element,
which in this case is the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element
HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

EMIL TOBIAS LINUS

8:00
9:00
10:00
11:00
12:00
13:00

MON TUE WED THU FRI

8:00
9:00
10:00
11:00
12:00
DECEMBER

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element.

Align Table Headers

By default, table headers are bold and centered:

Firstname Lastname Age

Jill Smith 50
Eve Jackson 94

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name Age
Jill Smith 50
Eve Jackson 94

To do this, use the colspan attribute on the <th> element

Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings
Month Savings
January $100
February $50

To add a caption to a table, use the <caption> tag

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding

hello hello hello

With Spacing
hello hello hello
hello hello hello
hello hello hello

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element

HTML Table Colspan & Rowspan

NAME

APRIL

2022

FIESTA
HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute

Note: The value of the colspan attribute represents the number of columns to span.

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

To style every other table row element, use the :nth-child(even) selector like this:

tr:nth-child(even) {
background-color: #D6EEEE;
}
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.

Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and every other
column.
If you use a transparent color you will get an overlapping effect.
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

HTML Table Colgroup

The <colgroup> element is used to style specific columns of a table.

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns that get the style.
The style attribute specifies the style to give the columns.

Note: The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements,
like <thead>, <tr>, <td> etc., but after the <caption> element, if present.

There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:
width property
visibility property
background properties
border properties
All other CSS properties will have no effect on your tables.

Multiple Col Elements

If you want to style more columns with different styles, use more <col> elements inside the <colgroup>.
Empty Colgroups
If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles) for the columns before.
Hide Columns
You can hide columns with the visibility: collapse property

<th> Tag

 Purpose: The <th> tag is used to define a header cell in a table. These cells are typically bold and centered by default.
 Usage: It is used within a <tr> (table row) element.
 Attributes: Common attributes include colspan, rowspan, scope, and abbr

<thead> Tag

 Purpose: The <thead> tag is used to group a set of rows that contain the header information for a table. It helps in organizing the
table structure and can be useful for styling and accessibility.
 Usage: It is used as a container for one or more <tr> elements that contain <th> elements. It is typically placed before
the <tbody> and <tfoot> elements.
 Attributes: Common attributes include align, valign, and char

Key Differences
1. Function:
o <th>: Defines individual header cells.
o <thead>: Groups header rows together.
2. Placement:
o <th>: Placed within <tr> elements.
o <thead>: Placed directly within the <table> element, typically before <tbody> and <tfoot>.
3. Scope:
o <th>: Used for individual cells.
o <thead>: Used for a group of header rows.
4. Styling and Accessibility:
o <th>: Provides semantic meaning to individual cells.
o <thead>: Helps browsers and assistive technologies understand the structure of the table, making it easier to style and
navigate

 Unordered Lists (<ul>): Use list-style-type to change bullet style.

o ul {
o list-style-type: square; /* Options: disc, circle, square, none */
o }

 Ordered Lists (<ol>): Use list-style-type to change numbering style.

o ol {
o list-style-type: upper-roman; /* Options: decimal, lower-alpha, upper-alpha, lower-roman, upper-
roman */
o }

 Custom Markers: Use list-style-image to set custom images as markers.

o ul {
o list-style-image: url('[Link]');
o }

 Nested Lists: Create sub-lists by nesting <ul> or <ol> elements.

o <ul>
o <li>Item 1
o <ul>
o <li>Sub-item 1</li>
o <li>Sub-item 2</li>
o </ul>
o </li>
o <li>Item 2</li>
o </ul>
 Horizontal Lists: Use CSS to style lists horizontally.
o [Link] {
o list-style-type: none;
o margin: 0;
o padding: 0;
o overflow: hidden;
o }
o
o [Link] li {
o float: left;
o margin-right: 10px;
o }

BLOCK LEVEL ELEMENT

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the
element.

A block-level element in HTML is an element that starts on a new line and takes up the full width available, stretching out to the left and
right as far as it can. Here are some key characteristics and examples:

Characteristics of Block-Level Elements

1. Starts on a New Line: Each block-level element begins on a new line, creating a distinct block of content.
2. Full Width: By default, block-level elements take up the entire width of their parent container.
3. Can Contain Other Elements: Block-level elements can contain other block-level elements and inline elements.
4. Vertical Layout: They stack vertically, one after the other.
Common Block-Level Elements

 <div>: Defines a division or section in an HTML document.

 <p>: Defines a paragraph.
 <h1> to <h6>: Define HTML headings.
 <ul> and <ol>: Define unordered and ordered lists, respectively.
 <li>: Defines a list item.
 <table>, <tr>, <th>, <td>: Define tables and their components.
 <header>, <footer>, <section>, <article>, <nav>: Define different sections of a webpage.

Block-level elements are essential for structuring and organizing content on a webpage. They help create a clear and readable layout by
stacking content vertically and taking up the full width of their container

You can style block-level elements using CSS to control their appearance, such as width, height, margins, padding, and borders.

INLINE ELEMENT

An inline element in HTML is an element that does not start on a new line and only takes up as much width as necessary. Here are some
key characteristics and examples:

Characteristics of Inline Elements

1. Does Not Start on a New Line: Inline elements flow within the content and do not break the line.
2. Takes Up Only Necessary Width: They occupy only the space required by their content.
3. Can Contain Other Inline Elements: Inline elements can contain other inline elements but not block-level elements.
4. Part of the Text Flow: They are part of the text flow, meaning they align with the surrounding text.

Common Inline Elements

 <a>: Defines a hyperlink.

 <span>: Used to group inline elements for styling.
 <img>: Embeds an image.
 <strong>: Defines important text (usually bold).
 <em>: Defines emphasized text (usually italic).
 <br>: Inserts a line break.
 <input>: Defines an input field.
 <label>: Defines a label for an input element.
 <code>: Defines a piece of computer code.

Inline elements are essential for formatting and styling specific parts of your content without disrupting the flow of text. They are used
within block-level elements to enhance the presentation and functionality of your webpage.

You can style inline elements using CSS to control their appearance, such as color, font, and background.

Key Differences
1. Layout:
o Block-Level: Starts on a new line and takes up the full width.
o Inline: Does not start on a new line and only takes up as much width as necessary.
2. Containment:
o Block-Level: Can contain both block-level and inline elements.
o Inline: Can only contain other inline elements.
3. Usage:
o Block-Level: Used for larger sections of content and layout structuring.
o Inline: Used for smaller pieces of content within block-level elements.

Inline elements allow other inline elements to sit Block elements doesn’t allow other elements to sit
behind. behind

Inline elements don’t have top and bottom

Block elements have top and bottom margin.
margin

Do not cause line breaks. Cause line breaks before and after the element.
CLASS AND ID

The class attribute in HTML is used to assign one or more class names to an HTML element. These class names can then be used to apply
CSS styles or manipulate the element with JavaScript. 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.

Purpose of the class Attribute

1. Styling with CSS: The class attribute allows you to apply specific styles to elements. By defining a class in your CSS, you can style
multiple elements consistently.
2. JavaScript Manipulation: You can use JavaScript to select and manipulate elements with a specific class.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.

You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.

The id attribute in HTML is used to assign a unique identifier to an HTML element. This identifier must be unique within the entire HTML
document, meaning no two elements can share the same id. Here’s a detailed explanation:

Purpose of the id Attribute

1. Styling with CSS: The id attribute allows you to apply specific styles to an element. By defining an id in your CSS, you can style that
particular element uniquely.
2. JavaScript Manipulation: You can use JavaScript to select and manipulate elements with a specific id.
3. Linking and Navigation: The id attribute can be used to create bookmarks within a page, allowing users to jump to specific
sections.

Note: In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using the # symbol followed by id.

 The value of the id attribute is case sensitive

 The id attribute is also used to create HTML bookmarks
 Create bookmarks for navigation within a page.
The class and id attributes in HTML are both used to identify and style elements, but they serve different purposes and have
distinct characteristics

Key Differences

1. Uniqueness:
o class: Can be applied to multiple elements.
o id: Must be unique within the document.
2. CSS Selectors:
o class: Selected with a dot (.).
o id: Selected with a hash (#).
3. JavaScript Access:
o class: Accessed with getElementsByClassName.
o id: Accessed with getElementById.
4. Use Cases:
o class: Ideal for styling multiple elements with the same style or for grouping elements for JavaScript manipulation.
o id: Ideal for targeting a single, unique element for styling or JavaScript manipulation.

IFRAME

The <iframe> element in HTML is used to embed another HTML document within the current document in the rectangular region.. This
can be useful for displaying content from other websites, such as videos, maps, or other web pages.

The webpage content and iframe contents can interact with each other using JavaScript.

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence
it is also called as an Inline frame.

Supported Attributes:
Attributes Description

Specifies a set of extra restrictions on the content that can be loaded in

allow
an <iframe>.

allowfullscreen Indicates whether the <iframe> can be displayed in fullscreen mode.

allowpaymentreq
Enables payment requests for content inside the <iframe>.
uest

height Sets the height of the <iframe> element.

width Sets the width of the <iframe> element.

loading Specifies how the content of the <iframe> should be loaded.

scrolling Controls whether or not the <iframe> should have scrollbars.

Specifies the name of the <iframe> for targeting its content or for
name
referencing it in JavaScript.

referrerpolicy Sets the referrer policy for the <iframe> content.

sandbox Specifies an extra set of restrictions for the content in the <iframe>.
Attributes Description

src Specifies the URL of the document to embed in the <iframe>.

srcdoc Specifies the HTML content of the page to display in the <iframe>.

Security Considerations
 Cross-Origin Content: Be cautious when embedding content from other domains, as it can pose security risks.
 Sandboxing: Use the sandbox attribute to apply restrictions to the iframe content
<iframe src="[Link] sandbox="allow-scripts allow-same-origin"></iframe>

<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedding a YouTube Video</h1>
<iframe width="560" height="315" src="[Link] title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</body>
</html>

Non-semantic elements:

Non-semantic elements in HTML are those that do not provide any information about the content they contain. They are used
primarily for layout and styling purposes, without conveying any specific meaning or structure. Here are some key points and
examples:
Characteristics of Non-Semantic Elements
1. No Meaning: Non-semantic elements do not describe the content they contain.
2. Layout and Styling: They are often used to group content together for styling or layout purposes.
3. Require Additional Attributes: To make their purpose clear, they often need additional attributes like class or id.
Common Non-Semantic Elements
 <div>: A generic container for flow content. It has no effect on the content or layout until styled using CSS.
 <span>: A generic container for inline content. It is used to group inline elements for styling purposes.
Semantic VS Non-semantic

Key Differences
1. Meaning:
o Semantic Elements: Provide meaning and context about the content.
o Non-Semantic Elements: Do not provide any inherent meaning.
2. Usage:
o Semantic Elements: Used to structure content meaningfully.
o Non-Semantic Elements: Used for layout and styling without conveying content meaning.
3. Accessibility and SEO:
o Semantic Elements: Enhance accessibility and SEO.
o Non-Semantic Elements: Do not contribute to accessibility or SEO.

They describe how the content within them is

They can contain anything
supposed to behave

The ‘class’ attribute can be used to work with

They have specific attributes for their structure
their structure

HTML ENTITIES

HTML entities are special characters that have a specific meaning in HTML and are used to display or represent certain
characters, symbols, or special characters in a web page. They are particularly useful for displaying characters that are
reserved in HTML or not easily typed on a keyboard.

Entity names are case sensitive.

Purpose of HTML Entities

1. Reserved Characters: Some characters, like < and >, are reserved in HTML because they are used to define tags. To
display these characters, you need to use HTML entities.
2. Special Characters: Characters that are not available on a standard keyboard, such as ©, €, and ¥, can be displayed
using HTML entities.
3. Non-Breaking Spaces: To prevent text from breaking into a new line, you can use the non-breaking space entity.

HTML entities start with an ampersand (&) and end with a semicolon (;). There are two types of entities:
Entity Names: These are easier to remember and use. &entity_name;
Entity Numbers: These can be either decimal or hexadecimal. &#entity_number;

Common HTML Entities

 Less Than: < or <
 Greater Than: > or >
 Ampersand: & or &
 Double Quote: " or "
 Single Quote: ' or '
 Non-Breaking Space:  

Advantages and Disadvantages of HTML Entity

Advantages
 Entity names can be easy to remember.
Disadvantages
 Browsers might not support all the entity names, instead, they can support the use of entity numbers.

Reserved Characters
These characters are either reserved for HTML or those which are not present in the basic keyboard & can’t use them directly. Some of
the reserved characters representations are given below:
Reserved Character Entity Name

& &

< <

> >
Reserved Character Entity Name

“ "

Other Characters
Some characters that aren’t available directly on our keyboard, therefore such an entity can be used to represent it by using
their entity number. These keywords are directly not available to type, we need to specify their entity number. Here #x
before the numbers represents the hexadecimal representation.
Character Entities

≥ &GreaterEqual;

€ €

∃ ∃

Non-breaking Space
It is used to provide space that will not break into a new line. This HTML entity is represented by   that will separate the
2 words & will stick together without breaking it into a new line. We can also use the non-breaking space for preventing the
browsers from truncating spaces in HTML pages. The non-breaking hyphen (-) is used to define a hyphen character (-) that
does not break into a new line.
Example
 12:00 PM
 256 km/h
If we use to write 10 spaces in our text, then the browser will remove 9 of them. In order to add real spaces in our text, we
can use the character entity

Combining Diacritical Marks

A diacritical mark is a “glyph” added to a letter. Diacritical marks like grave ( ` ̀) and acute ( ́ ) are called accents. It can
appear both above and below a letter, inside a letter, and between two letters. Diacritical marks can be used in combination
with alphanumeric characters to generate a character that is not present in the character set (encoding) used on the page.
Here is the list of some diacritical marks.
Symbols Character Construct Final Result

̀ a à à

́ a á á

̂ a â â

̃ a ã ã

̀ O Ò Ò

́ O Ó Ó

̂ O Ô Ô

̃ O Õ Õ
EMBEDDING AUDIO & VIDEO

Embedding Audio
To embed audio in HTML, use the <audio> element. You can include multiple sources to ensure compatibility with different
browsers.

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Attributes
 controls: Adds audio controls like play, pause, and volume.
 autoplay: Starts playing the audio automatically.
 loop: Loops the audio.
 muted: Mutes the audio by default.

Embedding Video
To embed video in HTML, use the <video> element. Similar to audio, you can include multiple sources for compatibility.

<video width="320" height="240" controls>

<source src="videofile.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

Attributes
 controls: Adds video controls like play, pause, and volume.
 autoplay: Starts playing the video automatically.
 loop: Loops the video.
 muted: Mutes the video by default.
 poster: Specifies an image to be shown while the video is downloading or until the user hits the play button.
HTML FORMS

An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button. This file contains a server-side
script that handles the form data

Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target attribute specifies where to display the response that is received after submitting the form.
The target attribute can have one of the following values:
Value Description

_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

The Method Attribute

The method attribute 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").
The default HTTP method when submitting form data is GET.
Notes on GET:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:
 Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked.

The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

The Novalidate Attribute

The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
The <input> Element
One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

The <label> Element

The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user
focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes)
- because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <select> Element

The <select> element defines a drop-down list.

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:

Visible Values:
Use the size attribute to specify the number of visible values:

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value.

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area).
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

The <button> Element

The <button> element defines a clickable button

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the
button element.
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script)

HTML Input Types

Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
Tip: The default value of the type attribute is "text".

Input Type Text

<input type="text"> defines a single-line text input field.

Input Type Password

<input type="password"> defines a password field.
The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
If you omit the submit button's value attribute, the button will get a default text.

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

Input Type Radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices.

This is how the HTML code above will be displayed in a browser:

HTML
CSS
JavaScript

Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

Input Type Button

<input type="button"> defines a button.

Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.

Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
You can also use the min and max attributes to add restrictions to dates.

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

Input Type Image

The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's
developer tools or "View Source" functionality. Do not use hidden inputs as a form of security!

Input Type Month

The <input type="month"> allows the user to select a month and year.
Depending on browser support, a date picker can show up in the input field.

Input Type Number

The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.(min-max)

Input Restrictions
Here is a list of some common input restrictions:
Attribute Description

checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or
type="radio")
disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control).
Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max,
and step attributes

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Input Type Week

The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
HTML Input Attributes
The value Attribute
The input value attribute specifies an initial value for an input field.

The readonly Attribute

The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!

The disabled Attribute

The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!

The size Attribute

The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

The maxlength Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this
attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

The min and max Attributes

The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Tip: Use the max and min attributes together to create a range of legal values.

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
The multiple attribute works with the following input types: email, and file.
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is
submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a
short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, number, tel, email, and password.

The required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number,
checkbox, radio, and file.

The step Attribute

The input step attribute specifies the legal number intervals for an input field.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it
must also be checked by the receiver (the server)!

The autofocus Attribute

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

The height and width Attributes

The input height and width attributes specify the height and width of an <input type="image"> element.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the
image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and
cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the
images load).

The list Attribute

The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display
options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.

The form Attribute

The input form attribute specifies the form the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

The formaction Attribute

The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and image.

The formenctype Attribute

The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with
method="post").
Note: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the following input types: submit and image.

The formmethod Attribute

The input formmethod attribute defines the HTTP method for sending form-data to the action URL.
Note: This attribute overrides the method attribute of the <form> element.
The formmethod attribute works with the following input types: submit and image.
The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").
Notes on the "get" method:
 This method appends the form-data to the URL in name/value pairs
 This method is useful for form submissions where a user want to bookmark the result
 There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that
all of the form-data will be correctly transferred
 Never use the "get" method to
The formtarget Attribute
The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received
after submitting the form.
Note: This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the following input types: submit and image.

The formnovalidate Attribute

The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute works with the following input types: submit.

The novalidate Attribute

The novalidate attribute is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be validated when submitted.

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
 pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)
Notes on the "post" method:
 This method sends the form-data as an HTTP post transaction
 Form submissions with the "post" method cannot be bookmarked
 The "post" method is more robust and secure than "get", and "post" does not have size limitations

Anchor vs Link

1. Anchor Tag (<a>):

 Purpose: Creates hyperlinks to other webpages, sections of the same page, or email addresses.
 Usage: It's an inline element. These links are clickable.

2. Link Tag (<link>):

 Purpose: Defines a relationship between the current document and an external resource, most commonly used
to link CSS stylesheets.
 Usage: It's a void element, meaning it doesn't have content. These links are not clickable.

Scripts in the <head>:

 Use When: You need the script to load before the page content is rendered .
 Drawback: Can delay the rendering of page content because the browser stops parsing HTML to download and execut
e the script.

Scripts at the End of the <body>:

 Use When: You want the page content to load first, and scripts to run after the DOM is fully loaded. This is ideal for int
eractive elements and improving page load speed.

Normal Script Loading:

 Execution: Blocks HTML parsing while the script is being downloaded and executed.
 Placement: Typically placed at the end of the body to avoid blocking the rendering of the page.

Async:
 Execution: Downloads the script asynchronously while the HTML continues to parse. Executes the script as soon as it'
s downloaded, without waiting for the HTML parsing to complete.
 Use Case: Useful for independent scripts that don’t rely on other scripts or DOM content.

Defer:
 Execution: Downloads the script asynchronously while the HTML continues to parse but delays execution until after th
e HTML is fully parsed.
 Use Case: Ideal for scripts that need to be executed after the complete HTML is available but before the DOMContentL
oaded event.

Summarized Differences:
 Normal: Blocks HTML parsing.
 Async: Doesn't block HTML parsing; executes as soon as possible.
 Defer: Doesn't block HTML parsing; executes after parsing is complete.

<h1> Tag:
 Purpose: Represents the most important heading on the page.
 Usage: Used for titling sections or the main title of the document.

<header> Tag:
 Purpose: Represents a container for introductory content or navigational links.
 Usage: Can contain headings, logos, and other introductory elements.

Understanding HTML5 Features and Structure
No ratings yet
Understanding HTML5 Features and Structure
8 pages
Introduction to HTML and HTML5 Basics
No ratings yet
Introduction to HTML and HTML5 Basics
41 pages
HTML5 Basics for Web Design Beginners
No ratings yet
HTML5 Basics for Web Design Beginners
49 pages
Introduction to HTML and Its Evolution
No ratings yet
Introduction to HTML and Its Evolution
7 pages
Overview of HTML5 Features
No ratings yet
Overview of HTML5 Features
72 pages
Comprehensive Guide to HTML Basics
No ratings yet
Comprehensive Guide to HTML Basics
6 pages
Understanding HTML Basics and Versions
No ratings yet
Understanding HTML Basics and Versions
16 pages
Understanding HTML: Basics and Uses
No ratings yet
Understanding HTML: Basics and Uses
5 pages
HTML5 and CSS3 Fundamentals Guide
No ratings yet
HTML5 and CSS3 Fundamentals Guide
15 pages
HTML5 Features and Benefits Explained
No ratings yet
HTML5 Features and Benefits Explained
50 pages
Understanding HTML: Basics & Features
100% (1)
Understanding HTML: Basics & Features
16 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
Understanding HTML Elements and Features
No ratings yet
Understanding HTML Elements and Features
29 pages
Understanding HTML: Basics & Versions
No ratings yet
Understanding HTML: Basics & Versions
16 pages
HTML5 Structure and Syntax Overview
No ratings yet
HTML5 Structure and Syntax Overview
15 pages
Decap472 Web Technologies
No ratings yet
Decap472 Web Technologies
196 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
7 pages
HTML Fundamentals and Versions Explained
No ratings yet
HTML Fundamentals and Versions Explained
29 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
34 pages
Introduction To HTML
No ratings yet
Introduction To HTML
4 pages
HTML Handbook for Beginners and Pros
No ratings yet
HTML Handbook for Beginners and Pros
87 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
49 pages
HTML Basics Handbook for Beginners
No ratings yet
HTML Basics Handbook for Beginners
72 pages
HTML Basics: Structure and Syntax Guide
No ratings yet
HTML Basics: Structure and Syntax Guide
16 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
104 pages
HTML5 Web Design Basics Explained
No ratings yet
HTML5 Web Design Basics Explained
104 pages
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
No ratings yet
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
56 pages
HTML5 Figure Element Guidelines
No ratings yet
HTML5 Figure Element Guidelines
58 pages
Understanding HTML Basics and Evolution
No ratings yet
Understanding HTML Basics and Evolution
45 pages
Understanding HTML: Basics and Evolution
No ratings yet
Understanding HTML: Basics and Evolution
106 pages
Learnwebdevelopmentwithvegibit PDF
100% (1)
Learnwebdevelopmentwithvegibit PDF
2,135 pages
HTML Tags Overview and Structure
No ratings yet
HTML Tags Overview and Structure
29 pages
Web Technology - 2 - 1756689298766
No ratings yet
Web Technology - 2 - 1756689298766
62 pages
Introduction to HTML and HTML5 Basics
No ratings yet
Introduction to HTML and HTML5 Basics
88 pages
HTML Notesssss
No ratings yet
HTML Notesssss
37 pages
Understanding HTML: Basics and Benefits
No ratings yet
Understanding HTML: Basics and Benefits
20 pages
HTML Basics: Structure & Syntax Guide
No ratings yet
HTML Basics: Structure & Syntax Guide
31 pages
Introduction to HTML5 Basics
No ratings yet
Introduction to HTML5 Basics
23 pages
Understanding HTML Structure and Elements
No ratings yet
Understanding HTML Structure and Elements
13 pages
HTML Basics: Structure and Usage Guide
No ratings yet
HTML Basics: Structure and Usage Guide
17 pages
HTML and CSS Syllabus Overview
No ratings yet
HTML and CSS Syllabus Overview
31 pages
HTML Editor Experiment Assignment
No ratings yet
HTML Editor Experiment Assignment
52 pages
IWT Module 4
No ratings yet
IWT Module 4
48 pages
HTML vs HTML5: Key Features Explained
No ratings yet
HTML vs HTML5: Key Features Explained
15 pages
HTML and CSS Web Development Guide
No ratings yet
HTML and CSS Web Development Guide
73 pages
HTML and JavaScript Essentials Guide
No ratings yet
HTML and JavaScript Essentials Guide
17 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
6 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
5 pages
HTML Basics: Structure and History
No ratings yet
HTML Basics: Structure and History
20 pages
Evolution of HTML: A Historical Overview
No ratings yet
Evolution of HTML: A Historical Overview
42 pages
Summer Frontend Development Training Report
No ratings yet
Summer Frontend Development Training Report
9 pages
Introduction to HTML Basics and History
No ratings yet
Introduction to HTML Basics and History
32 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
49 pages
Understanding HTML: Types, Uses, Trends
No ratings yet
Understanding HTML: Types, Uses, Trends
54 pages
HTML Basics for Beginners and Pros
No ratings yet
HTML Basics for Beginners and Pros
72 pages
Web Design Basics: HTML & CSS Guide
No ratings yet
Web Design Basics: HTML & CSS Guide
60 pages
HTML Introduction 1
No ratings yet
HTML Introduction 1
75 pages
HTML5 Basics and Web Design Elements
No ratings yet
HTML5 Basics and Web Design Elements
67 pages
HTML and XHTML: History and Syntax Guide
No ratings yet
HTML and XHTML: History and Syntax Guide
75 pages
Web Systems and Technologies Syllabus
No ratings yet
Web Systems and Technologies Syllabus
3 pages
Class 10 Forest and Wildlife Mind Map
No ratings yet
Class 10 Forest and Wildlife Mind Map
34 pages
Currency Converter Webpage Overview
No ratings yet
Currency Converter Webpage Overview
9 pages
Responsive Tourism Website Development
No ratings yet
Responsive Tourism Website Development
14 pages
Computer Science Student Profile Summary
No ratings yet
Computer Science Student Profile Summary
2 pages
Web Development Internship Report
No ratings yet
Web Development Internship Report
17 pages
BCA Syllabus 2023-26: Rajasthan University
No ratings yet
BCA Syllabus 2023-26: Rajasthan University
53 pages
HTML, CSS, JavaScript & PHP SOPs Guide
No ratings yet
HTML, CSS, JavaScript & PHP SOPs Guide
1 page
Nagpur Travel Guide: Top Attractions
No ratings yet
Nagpur Travel Guide: Top Attractions
2 pages
Algorithm Visualization Project Report
No ratings yet
Algorithm Visualization Project Report
18 pages
PHP-Based Automatic Timetable Generator
No ratings yet
PHP-Based Automatic Timetable Generator
6 pages
Hotel Management System Project Overview
No ratings yet
Hotel Management System Project Overview
31 pages
Digital Library Management System Overview
No ratings yet
Digital Library Management System Overview
99 pages
Full Stack Java Internship Report
No ratings yet
Full Stack Java Internship Report
47 pages
AgroLink-BD: Bilingual Agri Marketplace
No ratings yet
AgroLink-BD: Bilingual Agri Marketplace
5 pages
Best Tools for Building E-Commerce Stores
No ratings yet
Best Tools for Building E-Commerce Stores
3 pages
AI Plagiarism Checker Project Report
No ratings yet
AI Plagiarism Checker Project Report
23 pages
CSS Basics and Styling Techniques
No ratings yet
CSS Basics and Styling Techniques
22 pages
Class 9 Computer Science FBISE 2026 Guide
No ratings yet
Class 9 Computer Science FBISE 2026 Guide
11 pages
Web Technologies Question Bank Guide
No ratings yet
Web Technologies Question Bank Guide
2 pages
Complete Flutter Development Bootcamp
No ratings yet
Complete Flutter Development Bootcamp
19 pages
Institute Web Page Design Project
No ratings yet
Institute Web Page Design Project
36 pages
CSS Basics: Style Rules & Techniques
No ratings yet
CSS Basics: Style Rules & Techniques
48 pages
It Practice Paper 1 To 5
No ratings yet
It Practice Paper 1 To 5
22 pages
History of HTML: Key Milestones
No ratings yet
History of HTML: Key Milestones
8 pages
Gantt Charts: The Ultimate Cheat Sheet
No ratings yet
Gantt Charts: The Ultimate Cheat Sheet
15 pages
Bike Rental Management System Project
0% (1)
Bike Rental Management System Project
53 pages
Ottona Hospital Management System Sample
No ratings yet
Ottona Hospital Management System Sample
75 pages
Test Bank for HTML5, CSS3, JavaScript
No ratings yet
Test Bank for HTML5, CSS3, JavaScript
15 pages
FastHTML: A Full-Stack Framework Guide
No ratings yet
FastHTML: A Full-Stack Framework Guide
34 pages