Scribd
Upload
4 views24 pages

html.notes

Uploaded by

rdanve7
Copyright
© © All Rights Reserved
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
4 views24 pages

html.notes

Uploaded by

rdanve7
Copyright
© © All Rights Reserved
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
You are on page 1/ 24

Textarea & Select

In addition to the basic input types, HTML forms offer other controls
like textarea and select for richer user interaction. These elements
allow for more complex data collection and provide a better user
experience. In this blog, we will dive into these form controls and provide
examples.

The Textarea Element


The textarea element is used when you need multiline text input from
the user. This is particularly useful for comments, reviews, or any other
type of input where the length is unpredictable.

<textarea name="comment" rows="4" cols="50">


Enter your comment here...
</textarea>

Copy
The rows and cols attributes define the visible dimensions of the
textarea.

The Select Element


The select element creates a dropdown menu for the user. It is useful
when you have a predefined list of options for the user to choose from.

<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>

Copy
Each option inside the select tag represents an item in the dropdown
list.

Combining Textarea and Select


You can combine textarea and select in the same form to capture
varied types of user input.
<form action="/submit">
<textarea name="comment" rows="4" cols="50">Enter
your comment here...</textarea>
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
<input type="submit" value="Submit">
</form>

Copy

Conclusion
The textarea and select elements add another layer of interactivity
to HTML forms, allowing for more complex and useful data collection.
Understanding how to use these elements effectively can greatly
enhance your web application's user interface.

More on forms
HTML forms are the backbone of interactive websites. They allow users
to submit data, which can be processed on the server. While we have
covered basic input types in previous tutorials, this tutorial aims to delve
deeper into form attributes, both common and new HTML5 additions.
We'll also look at HTML5 validation attributes to ensure data integrity.
Common Attributes

action
The action attribute specifies the URL where the form data should be
sent after submission.

<form action="/submit.php" method="POST">


</form>
Copy

method
The method attribute defines how data is sent. The two most common
methods are GET and POST.

<form action="/submit.php" method="POST">


</form>

Copy

name
The name attribute specifies the name for the form element, making it
easier to reference in scripts or the server-side code.

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

Copy

New HTML5 Attributes

placeholder
This attribute provides a hint to the user as to what can be entered in the
field.

<input type="text" placeholder="Enter your username">

Copy

required
The required attribute makes a field mandatory to fill out.

<input type="text" required>

Copy

autofocus
The autofocus attribute automatically focuses the cursor on the
particular input when the page loads.
<input type="text" autofocus>

Copy

HTML5 Validation Attributes

required
As mentioned above, this attribute makes a field mandatory.

<input type="text" required>

Copy

pattern
The pattern attribute specifies a regular expression that the input must
match to be valid.

<input type="text" pattern="[a-zA-Z0-9]+">

Copy

Conclusion

Understanding the different attributes available for HTML forms is crucial


for building robust and user-friendly web applications. This tutorial
covered both commonly used and new HTML5-specific attributes that
enhance functionality and user interaction. Employing these attributes
effectively will greatly enhance your web forms.

HTML Meta Tags


The <meta> tags in HTML provide metadata about the HTML document.
Metadata is data (information) about data. <meta> tags always go inside
the document's <head> tag and are typically used to specify the
character set, page description, keywords, author, and other metadata.
Below is an example HTML code snippet that includes various types
of <meta> tags commonly used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <!-- Responsive design -->
<meta http-equiv="X-UA-Compatible"
content="ie=edge"> <!-- Internet Explorer compatibility
-->
<meta name="description" content="This is a
description of the web page"> <!-- Description for
search engines -->
<meta name="keywords" content="HTML, CSS,
JavaScript"> <!-- Keywords for search engines -->
<meta name="author" content="Your Name"> <!--
Author name -->
<title>Document</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>

Copy

Explanation of each meta tag:


1. Character Encoding (charset): <meta charset="UTF-
8"> sets the character encoding for the webpage. UTF-8 is
the most common and recommended.
2. Viewport: <meta name="viewport"
content="width=device-width, initial-
scale=1.0"> sets the viewport to scale the page to the
screen width, useful for responsive design.
3. IE Compatibility: <meta http-equiv="X-UA-
Compatible" content="ie=edge"> specifies that the
page should be rendered using the latest rendering engine
available on Internet Explorer.
4. Description: <meta name="description"
content="This is a description of the web
page"> provides a brief description of the webpage, which
search engines may use in search results.
5. Keywords: <meta name="keywords" content="HTML,
CSS, JavaScript"> specifies keywords for the webpage,
which were historically used by search engines but are less
relevant today.
6. Author: <meta name="author" content="Your
Name"> indicates the name of the author of the webpage.

How to add favicon in HTML?

A favicon is a small icon that appears next to your website's title in


browser tabs. It helps in branding and easy identification among multiple
tabs.

Step 1: Create/Choose Favicon


Make a square image, usually 16x16 or 32x32 pixels, in .ico format.
You can create a favicon from this website

Step 2: Upload Favicon


Place the .ico file in your website's root directory,
where index.html is located.

Step 3: Update HTML


Insert the following code in the <head> section of your index.html file:
<link rel="icon" href="favicon.ico" type="image/x-
icon">

Copy
Replace favicon.ico with your file's path if different.

Step 4: Test
Open your site in different browsers to make sure the favicon appears.
In the next tutorial, we will talk about more HTML head elements

Link & Script Tags


The <link> and <script> tags are essential elements within an HTML
document's <head> section. They serve various purposes, like linking
external stylesheets or including JavaScript files.

The <link> Tag

The <link> tag is commonly used to link external stylesheets to an


HTML document. It's a self-closing tag, meaning it doesn't require a
closing tag.
Below is an example HTML code snippet that includes a <link> tag to
link an external stylesheet:

<link rel="stylesheet" type="text/css"


href="styles.css">

Copy

The <script> Tag

The <script> tag is used to include JavaScript code or files in an HTML


document. Unlike the <link> tag, the <script> tag must be closed
with a </script> tag.
Below is an example HTML code snippet that includes a <script> tag
to link an external JavaScript file:
<script src="script.js"
type="text/javascript"></script>

Copy

Conclusion

The <link> and <script> tags are crucial for linking external
resources like stylesheets and JavaScript files, enhancing the
functionality and presentation of your HTML documents.

Video & Audio Tags


This tutorial aims to provide a comprehensive guide on
using <video> and <audio> tags in HTML to embed media files.

The <video> Tag


The <video> tag is used to embed video files in an HTML
document. It supports multiple attributes to control the video
playback.
Example usage:

<video src="video.mp4" controls></video>

Copy

Attributes for <video> Tag

 src: Specifies the path to the video file.


 controls: Adds video controls, like play, pause, and
volume.
 autoplay: Automatically starts playing the video when
the page loads.
 loop: Repeats the video once it ends.
 muted: Mutes the video by default.
 poster: Specifies an image to be displayed before the
video starts playing.
 width and height: Specifies the dimensions of the
video.
The <audio> Tag
The <audio> tag is used to embed audio files in an HTML
document. It also supports multiple attributes for control.
Example usage:

<audio src="audio.mp3" controls></audio>

Copy

Attributes for <audio> Tag

 src: Specifies the path to the audio file.


 controls: Adds audio controls, like play, pause, and
volume.
 autoplay: Automatically starts playing the audio when
the page loads.
 loop: Repeats the audio once it ends.
 muted: Mutes the audio by default.
 preload: Specifies if and how the audio should be
loaded when the page loads ('auto', 'metadata', 'none').

The "preload" attribute can have the following values:


1. none: This is the default value. It indicates that the
browser should not preload the audio file at all. The
audio file will only start downloading when the user
initiates playback.
2. metadata: This value tells the browser to preload only
the metadata of the audio file, such as its duration and
basic information about the audio. This can be useful if
you want to display the audio duration to the user
without fully loading the audio data.
3. auto: This value instructs the browser to preload the
entire audio file as much as possible without delaying
the loading of other important page content. The
browser will try to load the audio file in the
background so that it's ready to play when the user
decides to start it.
Conclusion

The <video> and <audio> tags are powerful tools for


embedding media content in HTML documents. Utilizing their
attributes allows you to offer an interactive and dynamic user
experience.

SVG in HTML
Scalable Vector Graphics (SVG) has become an indispensable
part of modern web development. SVG enables developers to
create high-quality, scalable graphics that look crisp at any size
or resolution. In this blog post, we'll explore the basics of using
SVG in HTML, its benefits, and some practical examples.
What is SVG?

SVG stands for Scalable Vector Graphics. Unlike raster images


like PNGs or JPGs, SVGs are not pixel-based. They're composed
of vectors—mathematical formulas that describe shapes, paths,
and fills. This means SVGs can be resized without losing quality.
Why Use SVG?

Scalability
SVG images can be scaled indefinitely without losing quality,
which is ideal for responsive web design.

File Size
SVG files are often smaller than their raster counterparts,
especially for simple shapes and icons.

Flexibility
SVGs can be styled, animated, and manipulated using CSS and
JavaScript.
How to Embed SVG in HTML

SVG can be embedded in HTML in several ways:

1. Inline SVG: Directly writing the SVG XML code within


HTML.
2. Using an <img> tag: Point the src attribute to an SVG
file.
3. Using CSS: Setting SVG as a background image in a CSS
file.
Inline SVG Example

<svg height="100" width="100">


<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="red" />
</svg>

Copy

<img> Tag Example

<img src="image.svg" alt="Sample SVG">

Copy

CSS Background Example

.background {
background-image: url('image.svg');
}

Copy

SVG Attributes

SVG comes with a set of attributes to control its behavior:

 width and height: To set the dimensions.


 viewBox: To set the coordinate system.
 fill and stroke: To set the colors.

Practical Examples

Creating a Simple Icon

<svg height="30" width="30">


<rect width="30" height="30"
style="fill:rgb(0,0,255);stroke-
width:1;stroke:rgb(0,0,0)" />
</svg>
Copy

Creating Complex Shapes


SVG can also be used to create more complex shapes like
polygons, lines, and text.
Conclusion

SVG offers a powerful way to add scalable and interactive


graphics to your HTML documents. Its compatibility with CSS
and JavaScript makes it a versatile choice for modern web
development. Whether you're creating simple icons or intricate
illustrations, SVG has got you covered.

iFrames in HTML
iFrames, or Inline Frames, are an integral part of modern web
development. They allow you to embed another HTML page
within your current page. In this blog, we'll delve into the utility
of iFrames, their attributes, and some use-cases.
What is an iFrame?

An iFrame is an HTML element that enables an inline frame for


the embedding of external content. Essentially, you can load
another web page within a designated area of your current
webpage.
Why Use iFrames?

iFrames offer a variety of use-cases:

 Content Isolation: iFrames allow you to isolate third-


party content, which can improve security.
 Modularity: Easily embed external plugins, widgets, or
content.
 Resource Separation: Content within an iFrame can
load separately from the rest of the page.

Basic Syntax

The basic syntax of an iFrame is quite straightforward:


<iframe src="URL" width="width"
height="height"></iframe>

Copy

Attributes of iFrame

Several attributes can enhance the functionality of an iFrame:

 src: Specifies the URL of the page to embed.


 height and width: Define the dimensions.
 frameborder: Indicates whether to display a border.
 scrolling: Controls the scrollbars.
 name: For targeting the iFrame in JavaScript.

Practical Examples

Embedding a YouTube Video

<iframe src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen></iframe>

Copy

Embedding Google Maps

<iframe src="https://maps.google.com/maps?
q=LOCATION&output=embed" frameborder="0"></iframe>

Copy

Conclusion

iFrames offers a convenient way to embed external content into


your web pages. Their flexibility and ease of use make them an
invaluable tool for modern web development.

HTML Code Tag


The HTML <code> tag is a powerful element for displaying code
snippets within a webpage. It preserves both spaces and line
breaks, making it ideal for showcasing code. In this blog post,
we'll explore how to use the <code> tag effectively, especially in
conjunction with Prism for code highlighting.

What is the <code> Tag?


The <code> tag is a semantic HTML tag that's used for
displaying code snippets. It can be used both inline and within a
block-level element like <pre>.

Why Use the <code> Tag?


 Semantic Meaning: Provides semantic value to the
enclosed code.
 Readability: This makes it easier for both browsers and
developers to understand that the text is code.
 Styling: Easier to style and highlight with CSS or
JavaScript libraries like Prism.

Basic Usage

The most straightforward way to use the <code> tag is inline for
short code snippets:

<code>Your code here</code>

Copy
Using <code> with <pre>
For multiline code snippets, it's common to combine
the <code> tag with the <pre> tag:

<pre><code>Your multiline code here</code></pre>

Copy

Conclusion

The HTML <code> tag is a simple yet powerful way to include


code snippets in your webpage.

HTML Canvas
The <canvas> element in HTML is a powerful feature for
rendering graphics and shapes directly within web pages.
Though it's often paired with JavaScript for dynamic rendering,
the canvas itself is an HTML element. In this blog, we'll explore
what you can do with the <canvas> element alone.

What is Canvas?

The <canvas> element serves as a container for graphics, which


can be rendered via scripting. Essentially, it offers a drawing
area for visual content.
Why Use Canvas?

Here are some reasons why you might use


the <canvas> element:

 Graphics: For drawing shapes, graphs, and other visual


representations.
 Dynamic Content: To dynamically update visual
elements.
 Interactivity: Though this involves JavaScript, the
canvas element is the foundation for interactive
graphical content.
Basic Syntax

Here's how you can define a simple <canvas> element:

<canvas id="myCanvas" width="200"


height="100"></canvas>

Copy

Attributes of Canvas

While the <canvas> element is simple, it does have a couple of


important attributes:

 width: Specifies the width of the canvas.


 height: Specifies the height of the canvas.

Styling with CSS

You can also style the <canvas> element with CSS. For example,
to add a border:

canvas {
border: 1px solid black;
}

Copy

Conclusion

The HTML <canvas> element serves as a robust foundation for


creating graphics and other visual elements on a web page.
Even without involving JavaScript, understanding the canvas
element and its basic attributes can be quite useful.

HTML Global Attributes


HTML Global Attributes play a crucial role in HTML development,
providing a consistent set of attributes that can be applied to
any HTML element. In this blog, we'll explore what these
attributes are, their descriptions, and how to use them
effectively.
What Are HTML Global Attributes?

The global attributes are a set of attributes that can be used


with all HTML elements, making them incredibly versatile and
essential for dynamic HTML coding.
List of Common Global Attributes

Attribute Description

accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classes for an element

contenteditable Specifies whether the content is editable or not

Using Global Attributes

Now, let's look at some examples that illustrate the usage of


some of these global attributes.

Using the class Attribute

<div class="container">This is a container.</div>

Copy

Using the id Attribute

<span id="unique">Unique Element</span>

Copy

Using the data-* Attribute for Custom Data

<div data-user="123">Custom Data</div>

Copy
Conclusion

HTML Global Attributes offer a powerful and consistent way to


control and manage HTML elements. Understanding these
attributes can significantly improve your HTML coding efficiency
and the dynamism of the web pages you create.

HTML Entities
HTML entities are a crucial part of HTML markup language. They
enable you to display characters that are reserved in HTML or
that aren't readily available on the keyboard. In this blog, we'll
explore what HTML entities are, their types, and how to use
them.
What Are HTML Entities?

HTML entities are used to represent special characters in a


format that the browser can understand. They start with an
ampersand (&) and end with a semicolon (;).
Why Use HTML Entities?

Here are some reasons:

 Reserved Characters: Characters like <, >, and & are


reserved in HTML.
 Special Symbols: For symbols like ©, ®, or
mathematical symbols.
 Non-Breaking Spaces: To create white spaces that
won't break into a new line.

Common HTML Entities

&lt; for <


&gt; for >
&amp; for &
&nbsp; for a non-breaking space
&copy; for ©

Copy
How to Use HTML Entities

Entities can be implemented easily within HTML code. Here are


some examples:

Using Reserved Characters

<p>The price is 10 &lt; 20.</p>

Copy

Displaying Special Symbols

<p>Copyright &copy; 2023.</p>

Copy

Creating Non-Breaking Spaces

<p>This is an example&nbsp;text.</p>

Copy

Conclusion

HTML entities are essential for rendering special or reserved


characters on a web page. Understanding how to use them
effectively is key to creating web pages that display content as
intended.

HTML Quotation Tag


The use of quotations is common in textual content. HTML
provides specific tags to handle this: <blockquote> for block
quotations and <q> for inline quotations. In this blog, we'll
explore these tags, their attributes, and how to style them.
What Are <blockquote> and <q> Tags?

The <blockquote> and <q> tags serve to define quotations in


HTML. While <blockquote> is used for longer, block-level
quotes, <q> is used for shorter, inline quotes.
Why Use These Tags?

They provide semantic meaning to your quotations, making it


easier for search engines to understand the context and
relevance of the content.
Basic Syntax

<blockquote> Tag

<blockquote cite="source-url">
Quotation text here.
</blockquote>

Copy

<q> Tag

<q cite="source-url">Quotation text here.</q>

Copy

Attributes

Both <blockquote> and <q> tags support the cite attribute:

 cite: Specifies the URL of the quote's source.

Practical Examples

Using <blockquote> for Long Quotes

<blockquote cite="https://example.com">
This is a long quote from an external source. This
quote can span multiple lines and paragraphs.
</blockquote>

Copy

Using <q> for Short, Inline Quotes


The philosopher said, <q cite="https://example.com">The
unexamined life is not worth living.</q>

Copy

Styling with CSS

You can style these tags using CSS to better match the
aesthetics of your website.
Conclusion

The <blockquote> and <q> tags are essential for semantically


marking up quotations in HTML. They provide both readability
and SEO benefits. Understanding how to use these tags
effectively can add more depth and clarity to your web content.

Obsolete HTML Tags


As HTML has evolved, some tags have been deprecated or become
obsolete. While modern browsers might still support them, their use is
discouraged in favor of CSS or more semantic HTML5 elements. In this
blog, we'll explore some of these obsolete tags and their modern
alternatives.

What Are Obsolete Tags?


Obsolete tags are HTML elements that are no longer recommended for
use. They may lack support in modern browsers and are likely to be
phased out entirely in future versions of HTML.

Why Avoid Obsolete Tags?

 Compatibility Issues: Not supported by all modern browsers.


 Accessibility: This may not meet current web accessibility
standards.
 Maintenance: Makes future updates difficult.

Examples of Obsolete Tags

The <font> Tag


Used to specify text color, size, and font.
<font color="red" size="3" face="verdana">This is some
text</font>

Copy

The <center> Tag


Used to center-align elements.

<center>This text will be centered</center>

Copy

The <u> Tag


Used to underline text.

<u>This text will be underlined</u>

Copy

Modern Alternatives
It's better to use CSS for styling and layout as it separates content from
presentation.

Replacing <font>

<span style="color:red; font-size:16px; font-


family:verdana;">This is some text</span>

Copy

Replacing <center>

<div style="text-align:center;">This text will be


centered</div>

Copy

Replacing <u>

<span style="text-decoration:underline;">This text will be


underlined</span>
Copy

Conclusion
Understanding obsolete HTML tags is not just a trip down memory lane;
it also emphasizes the importance of keeping up to date with the latest
web standards. Always opt for modern, semantic HTML and CSS for
styling to ensure your websites are future-proof.
< < Previous

Common Character Sets

Here are some commonly used character sets:

 UTF-8: Universal Character Set, 8-bit. It can represent


any character in the Unicode standard.
 ISO-8859-1: Western Alphabet.
 ASCII: American Standard Code for Information
Interchange.

Examples

Using UTF-8

<meta charset="UTF-8">

Copy

Using ISO-8859-1

<meta http-equiv="Content-Type" content="text/html;


charset=ISO-8859-1">

Copy

Conclusion
Understanding and specifying the correct character set is crucial
for creating web pages that render text accurately across
different platforms and languages. UTF-8 is the most commonly
used and recommended character set due to its wide
applicability and support.

You might also like