Scribd
Upload
7 views

Vs codeis a source code editor (8)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in the communication process. It explains the structure of HTML documents, the importance of CSS and JavaScript for styling and interactivity, and introduces key HTML elements and attributes. Additionally, it covers the basics of creating a website, including essential tags, linking files, and embedding media, while emphasizing the distinction between frontend and backend development.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Vs codeis a source code editor (8)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in the communication process. It explains the structure of HTML documents, the importance of CSS and JavaScript for styling and interactivity, and introduces key HTML elements and attributes. Additionally, it covers the basics of creating a website, including essential tags, linking files, and embedding media, while emphasizing the distinction between frontend and backend development.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Chapter 0– Introduction :

VS Code: A source code editor.

How does a website work?

The process of communication between the client, browser, and server is as follows:

1. The client sends a request.


2. The browser forwards the request to the server.
3. The server processes the request.
4. The server sends the data back to the browser.
5. The browser displays the data to the client.

When we want to access any information on the internet, we search for it using a
web browser. The web browser retrieves the content from web servers, where it is
stored in the form of HTML documents.

An HTML document is created by writing code with specific tags in a code editor
of your choice. The document is then saved with the '.html' extension. Once
saved, the browser interprets the HTML document, reads it, and renders the web
page.

The text editor has the HTML code of a website. This website can now be viewed
in a beautifully rendered format using a computer program known as a web
browser.

What is a Web Browser?


A web browser is a program that understands HTML tags and renders them in a
human-readable format that is easily viewable by people visiting the website.

A browser is an application that reads HTML documents and displays them as web
pages.
What is an HTML Document?
An HTML document is a text document saved with the '.html' or '.htm' extension,
containing text and specific tags enclosed in '< >

What is a Rendered Page:


The rendered page is the output screen of our HTML Document which is the page
displayed on the browser.

How does a basic website work?


• Web Browser(client) requests websites like www.codewithharry.com from
the web server.
• Web server in return sends HTML, CSS, and JavaScript files to it.
• HTML, CSS, and JavaScript files are parsed by a web browser which is
responsible for showing you a beautiful website.

How does a browser work?


A web browser processes and displays HTML as web pages. Since browsers can't
directly access stored content, they request it from a server, which responds with
the necessary files.

Browsers handle two key tasks:

1. Parsing – Converts raw data into characters, tokens, and nodes, organizing
them into a DOM (Document Object Model) tree.
2. Rendering – The DOM tree is processed, styled, and displayed on the
screen.

The Backend
The backend, handles behind-the-scenes operations like storing and processing
data when users interact with the frontend. It uses languages like Python, Ruby,
and Java.

The Frontend
• Frontend refers to the visible part of a website or app that users interact
with, like the tables, images, and buttons. It's built using languages like
HTML, CSS, and JavaScript.
• HTML: The structure of a webpage.
• CSS: The style and design of the page.
• JavaScript: Adds interactivity and dynamic content to the website.

In essence, frontend is what users see, while backend manages the functionality.

Git and GitHub


• Git is an open-source version control system.
• GitHub is a platform owned by Microsoft that helps you host repositories
and collaborate remotely using Git.

File Organization
• For HTML: index.html
• For CSS: style.css
• For JavaScript: script.js

Linking CSS and JavaScript Files to HTML


1. Linking a CSS file to HTML: In the <head> section of your HTML file:

<link rel="stylesheet" href="style.css">

2. Linking a JavaScript file to HTML: In the <body> section of your HTML


file:

<script src="script.js"></script>

HTML : Hyper Text Mark Up language : 'Hypertext' refers to the linking of text with
other documents, while 'markup language' denotes a language that utilizes a
specific set of tags.

HTML is the language of the web. It is used to create websites.

is a markup language not a programming language

We use HTML tags to defne look & feel of a websile

What is an HTML Element?

HTML Element = Start Tag + Content + End Tag

What is a Nested HTML Element?


Nested HTML Element = One HTML Element Inside Another HTML Element

In this example, the <b> element (child) is nested inside the <h1> element
(parent).

What is an Empty HTML Element or void elements or self-closing elements ?

Empty HTML Element = Tags with No Content

HTML Attributes
HTML attributes are used to define the characteristics of an HTML element

They are placed within the element's opening tag and consist of two
parts: the name and the value.
• Name: Specifies the property for that element.
• Value: Sets the value of that property for the element.

Types of HTML Attributes


There are three main types of HTML attributes:

Types d'attributs HTML


1. Attributs de base : Appliqués à la plupart des éléments HTML.
Exemples :
a. id, class, title, style.
2. Attributs d'internationalisation : Adaptent le document aux langues et
régions.
Exemples :
a. lang, dir.
3. Attributs génériques : Fournissent des informations supplémentaires sans
affecter l'apparence.
Exemples :
a. data-*.

Core attributes are some of the most widely used attributes in HTML. There are
four main types:
• id
• class
• title
• Style

HTML Id & Classes


HTML offers multiple ways to select and style elements. Two of the most
commonly used selectors are IDs and Classes. This blog explores what they are,
how to use them, and their differences.

ID Attribute :
An ID is an attribute, a unique identifier assigned to only one HTML element within
a page. It is often used for unique styling and JavaScript manipulations.

<div id="myUniqueID">This is a div with an ID.</div>

Class Attribute :
The class attribute lets you give the same name to multiple HTML elements. That
way, you can easily change their look or behavior all at once. Classes are not
unique and can be assigned to multiple elements.

The Style Tag


The style tag in HTML is used to include embedded CSS (Cascading Style Sheets)
within an HTML document. It is commonly placed within the <head> section of the
HTML file, although it can technically be used in the <body> as well. The style tag
allows you to define the look and feel of various HTML elements on the page,
including their colors, sizes, margins, and other visual styles.

Here's a simple example:

<head>
<style>
/* CSS rules go here */
p {
color: blue;
font-size: 18px;
}
. highlight {
background-color: yellow;
}
</style>

Using IDs and Classes in CSS


In CSS, elements with IDs are selected using a hash (#) symbol before the ID, and
elements with classes are selected using a dot (.) before the class name

Title Attribute :
The title attribute shows a small text when you move the mouse over an element.

Style Attribute :
The style attribute applies CSS directly to an element for quick styling.

<p style="color: red;">This text is red</p>

HTML Comments :
Comments in HTML are like little notes you leave in your code for yourself or other
people.

These notes help make the code easier to understand but don't show up on the
actual website. The web browser just skips over them!

Types of Comments in HTML


HTML primarily supports two types of comments:

Single-line Comments
Single-line comments are contained within one line. They are useful for short
annotations.

<!-- This is a single-line comment -->


Multi-line Comments
Multi-line comments span across multiple lines, making them ideal for detailed
explanations or temporarily disabling blocks of code.

<!--
This is a multi-line comment.
It spans multiple lines.
-->

Then Why CSS & JavaScript:


HTML is the skeleton that structures your content ,It creates the structure of a
webpage.

CSS (Cascading Style Sheets) – Styling: It controls the design and layout of a
webpage.

JavaScript – Interactivity & Behavior : It adds functionality and interactivity to a


webpage.

✔ HTML → Provides content and structure.


✔ CSS → Makes it visually appealing.
✔ JavaScript → Adds interactivity and functionality.

Chapter 1- Creating our frst website :


We start building is website by creating a file named index.html

A Basic HTML Page :


Main HTML Tags

Skeletal Tags
<!DOCTYPE html>: "Specifies the document type

<html> Tag: "Root of an HTML Page"

<html> </html>

The <html> tag is the root element that wraps all the content on the page. It
generally contains two main sections: the header (<head>...</head>) and the
body (<body>...</body>).

<head> Tag: "Header Part of an HTML Page"


<head> </head>

The <head> tag contains meta information and the title of the document. While
the title appears in the browser tab, meta information is often used for SEO
purposes.

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>

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.

title> Tag: "Title Part of an HTML Page"


<title> </title>
The <title> tag defines the title of the document, which is displayed in the
browser's title tab.

<body> Tag: "Body Part of an HTML Page"


<body> </body>
The <body> tag encloses the main content of the page, and everything within this
tag is displayed in the browser.

The image below shows the skeletal tags and essential tags needed to define the
layout of a webpage

Heading Tags
In HTML, heading tags ranging from <h1> to <h6> are used to define the
structure and layout of text on a web page. These tags help create a hierarchical
organization of content, making it easier for both users and search engines to
understand the page's content.

Paragraph Tag
To create well-structured text in your HTML document, the <p> tag is essential for
defining paragraphs.

<p> Tag: Defining a Paragraph in HTML


The <p> tag is used to format text into distinct paragraphs. Each paragraph
element is separated by automatic empty line spaces above and below the
content, providing a clear visual separation. The tag must be closed with its
corresponding </p> tag.

<p> </p>

Attributes and Styling


While the <p> tag is straightforward, you can enhance its functionality using
various attributes like class or id for CSS styling. You can also include inline styles
using the style attribute.

<p class="example" style="color: blue;">this a styled pg </p>

Horizontal Line Tag


To add a horizontal line in your HTML document, the <hr> tag comes in handy.
How to use the <hr> tag?
The syntax of the hr tag looks something like this.

<hr>

The <hr> tag is an empty or self-closing tag, meaning it doesn't require a closing
tag. It serves as a visual separator, dividing different sections of your document
with a horizontal line.

Line Break Tag


To insert a line break in your HTML document, you can utilize the <br> tag.

<br> tag is used to insert line breaks in text or paragraphs

The syntax for the <br> tag looks like this:

<br>

The <br> tag is commonly referred to as an empty or self-closing tag, meaning it


doesn't require a closing tag. This tag is responsible for breaking text lines or
separating paragraphs. When implemented, it automatically moves the text
following the tag to the next line.

It's particularly useful in formatting textual content where line breaks are essential
for readability or visual layout. For instance, it can be used in addresses, poems, or
song lyrics to preserve the original line structure.

Anchor Tag
Links are fundamental to navigating the web. In HTML, links are created using the
<a> tag, also known as the Anchor tag.

Key Characteristics of HTML Links


• Specified by the <a> tag.
• Also known as hyperlinks.
• Used to link one document to another.
• Includes a closing tag </a>.

Essential Attributes of the Anchor Tag


HTML links primarily use two attributes:
• href attribute: Defines the URL the link points to.
• target attribute: Specifies where to open the linked document.

Target Attribute Values


• _blank: Opens the linked document in a new window or tab.
• _top: Opens document in the full body of the window.
• _self: Opens document in the same window or tab (default behavior).
• _parent: Opens the linked document in the parent frame.

Linking to Specific Page Sections


To link to a specific section of a webpage, you can:
• Use the name or id attribute of the target section.
• Use a hyperlink with a hash (#) followed by the target id or name.

Let's say you have a long webpage with multiple sections, and you want to create
a link at the top that, when clicked, takes the user directly to a specific section
further down the page. You can do this using HTML links that target specific
sections.
Image Tag
Images play a crucial role in enhancing web pages by providing a visual context
that complements textual content. In HTML, the <img> tag is used to embed
images into web pages.

Basic Syntax for Embedding Images


This is how the syntax to embed an image in html looks like:

<img src="image's path" />

Setting Mandatory Attributes


The "src" and "alt" attributes are essential for the proper functioning of the
<img> tag.
• src attribute: Specifies the path to the image file.
• alt attribute: Provides a text description for the image.

<img src="images/profile_picture.jpg" alt="Profile Picture"/>


Note: To find the image's location, right-click on the image, go to properties, and
check the location field.

Setting Image Dimensions


Although dimensions can be set using the "width" and "height" attributes in the
<img> tag, modern best practices recommend using CSS for this purpose.

<img src="image.png" alt="Description"width="300"height="100"/>

Note: Styling dimensions and other properties are now more commonly managed
through CSS for better flexibility and maintainability.

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.

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>

<img> Tag Example

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

CSS Background Example

.background {
background-image: url('image.svg');
}
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>

Creating Complex Shapes

SVG can also be used to create more complex shapes like polygons,
lines, and text.
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>

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>

Embedding Google Maps

<iframe
src="https://maps.google.com/maps?q=LOCATION&output=embed"
frameborder="0"></iframe>
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>

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>
HTML Semantic Tags

HTML5 introduced a range of semantic tags that provide meaning to the


structure of web content. This blog will guide you through the importance
and usage of these tags.

What are Semantic Tags?

Semantic tags add meaning to your HTML. They tell both the browser and
the developer what kind of content is being presented.
Here are some of the key semantic tags you must know about:

1. <header>: Used to represent the top section of a web page, often


containing headings, logos, and navigation.
2. <nav>: Signifies a navigation menu on a web page.
3. <article>: Indicates a self-contained piece of content, such as a blog
post or news article.
4. <section>: Represents a thematic grouping of content on a web page.
5. <aside>: Typically used for sidebars or content that is tangentially
related to the main content.
6. <footer>: Represents the footer of a web page, usually containing
copyright information and contact details.
7. <figure> and <figcaption>: Used for embedding images, diagrams, or
charts, along with a caption.
8. <main>: Signifies the main content area of a web page.
9. <time>: Used to represent time-related information, like dates and
times.
Why Use Semantic Tags?

They enhance SEO, improve accessibility, and make your code easier to
read and maintain.

Commonly Used Semantic Tags

Here are some commonly used semantic tags in HTML:


• header: Contains introductory content.
• footer: Holds footer information.
• article: Encapsulates a self-contained composition.
• section: Represents a standalone section.
• aside: Contains content aside from the content it is placed in.
• nav: Holds navigation links.

Examples

Using the <header> tags and <footer> tags

<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<footer>
<p>Copyright 2023</p>
</footer>
Using the <article> and <section> tags

<article>
<h2>Article Title</h2>
<section>
<p>Content here</p>
</section>
</article>

Using the <aside> and <nav> tags

<aside>
<p>This is an aside content</p>
</aside>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>

Using the <figure> and <figcaption> tags

<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is an example image.</figcaption>
</figure>
Conclusion
Using HTML's semantic tags can greatly benefit both your website's SEO
and the maintainability of your code. They offer a way to structure your
HTML in a meaningful manner, making your website more accessible and
easier to understand.
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>

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;
}
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>

The <center> Tag

Used to center-align elements.


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

The <u> Tag

Used to underline text.


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

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>

Replacing <center>

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


centered</div>

Replacing <u>

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


underlined</span>

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.
Character Sets

Character sets are an essential concept in HTML, influencing how textual


content is displayed and interpreted by the browser. This blog aims to
elucidate what character sets are, why they matter, and how to specify
them in HTML.

What is a Character Set?

A character set is a set of symbols and characters that a computer uses


to represent text. In HTML, specifying the correct character set ensures
that text is displayed properly across different browsers and platforms.

Why is it Important?

Using the correct character set is crucial for:


• Accurate Rendering: To ensure that browsers correctly display your
text.
• Multi-language Support: To display text in various languages and
alphabets.
• Data Integrity: To make sure the data sent and received remains
consistent.

Specifying Character Set in HTML

The character set is generally specified using the <meta> tag within the
<head> section of an HTML document
<meta charset="UTF-8">

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">

Using ISO-8859-1

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


charset=ISO-8859-1">

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.
Pre Tag
The <pre> tag serves as an indispensable tool in HTML for displaying
preformatted text, such as code snippets in various programming languages.

What Does the <pre> Tag Do?


The <pre> tag preserves the original formatting of text, making it an excellent
choice for displaying code where spacing and indentation are key.

Syntax for Using the <pre> Tag


<pre> </pre>

When to Use the <pre> Tag?


The <pre> tag is most effective when you want the text to display on your HTML
page exactly as it was typed, without any formatting changes. It is especially useful
for displaying code snippets or preformatted text from data files.

HTML Inline Elements


Inline Elements don't start on a new line. It only takes the width required to cover
the content.

HTML elements are generally divided into two categories: Block-level and Inline
elements.

What are Inline Elements?

Inline elements in HTML are elements that:

1. Do not start on a new line and are part of the flow of surrounding content.
2. Take up only as much width as needed based on their content.
3. Can contain other inline elements, but should not contain block-level
elements (like <div> or <p>).

<span>This is <strong>important</strong> text.</span>

Common Inline Elements


• <span>: A generic inline container for text
• <a>: Defines a hyperlink
• <strong>: Defines important text
• <em>: Defines emphasized text
• <img>: Embeds an image
• <input>: Defines an input control

Styling Inline Elements


You can use CSS to style inline elements. However, some properties like width and
height may not apply.

Here is an exhaustive list of the most used Inline Elements:


• <a>
• <abbr>
• <acronym>
• <button>
• <br>
• <big>
• <bdo>
• <b>
• <cite>
• <code>
• <dfn>
• <i>
• <em>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <output>
• <tt>
• <time>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>
HTML Block Elements
You already know about HTML inline elements. All HTML tags have specific display
behavior: they are either block-level elements or inline elements.

What are Block-level Elements?


Block-level elements are those that start on a new line and take up the entire width
of their container by default. They essentially claim all the horizontal space for
themselves, pushing any content that comes after them to a new line.

Characteristics of Block-level Elements:


• Always start on a new line.
• Take up the full width available.
• Width and height can be controlled via CSS.
• Can contain other block-level as well as inline elements.

Common Block-level Elements:


• <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Headings
• <p> - Paragraphs
• <hr> - Horizontal rule
• <address> - Address information
• <article> - Article content
• <aside> - Sidebar content
• <blockquote> - Block quotations
• <canvas> - Drawing area
• <dd> - Description in a description list
• <div> - Generic container
• <dl> - Description list
• <dt> - Term in a description list
• <fieldset> - Group of related form elements
• <figcaption> - Caption for a figure
• <figure> - Image or media with a caption
• <footer> - Footer of a section or page
• <form> - HTML form
• <header> - Header of a section or page
• <li> - List item
• <main> - Main content of a document
• <nav> - Navigation links
• <noscript> - Alternate content when JavaScript is not enabled
• <ol> - Ordered list
• <ul> - Unordered list
• <pre> - Preformatted text
• <section> - Standalone section in a document
• <table> - Table
• <video> - Video content

List Tags
1. Unordered list.
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

2. ordered list.
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>

Customizing Bullet Points with 'type' Attribute


You can specify the style of bullet points using the type attribute. It
supports three values:
• disc - default bullet style
• square
• circle

Setting the 'type' Attribute


The type attribute specifies the style of numbering. You have several
options:
1. Uppercase Roman Numerals: Use type="I"
2. Lowercase Roman Numerals: Use type="i"
3. Arabic Numerals: Use type="1" (This is the default if the type attribute is
not specified)
4. Lowercase Alphabetical Letters: Use type="a"
5. Uppercase Alphabetical Letters: Use type="A"

Setting the 'start' Attribute


The start attribute specifies the starting number for the list.

<ol type="A" start="3">


<li>Pen</li>
<li>Pencil</li>
</ol>

Definition list:

HTML Definition Lists


A Definition List in HTML is used to represent a list of terms along with their
corresponding descriptions or definitions. The Definition List is created using the
<dl> (Definition List) element, which wraps around one or more pairs of <dt>
(Definition Term) and <dd> (Definition Description) elements.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
In this example:
• <dl> is the container for the list.
• <dt> defines the terms that you want to explain.
• <dd> contains the definitions or explanations for the terms.

HTML Tables
• HTML tables allow you to arrange data like text, images, and links in rows
and columns. You use the <table> tag to start and end a table.

Syntax of HTML Table


<table>
</table>

Key Elements of HTML Table


<table>: Defines the table itself.
<tr>: Used for table rows.
<th>: Used for table headings.

<td>: Used for table cells (data).

Basic Table Structure


<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Harry</td>
<td>100</td>
</tr>
</table>
Adding a Caption
To add a title to your table, you can use the <caption> element. This element
helps both in terms of SEO and accessibility.

Table Headers and Footers


Besides <th> for individual header cells, HTML tables allow you to group header
or footer content using <thead> and <tfoot>.

<table>
<thead>
<!-- header content -->
</thead>
<tfoot>
<!-- footer content -->
</tfoot>
<tbody>
<!-- body content -->
</tbody>
</table>
Column Groups
You can use the <colgroup> and <col> elements to apply styles to an entire
column in an HTML table.

<table>
<colgroup>
<col style="background-color:yellow">
</colgroup>
<!-- rest of the table -->
</table>

Accessibility in Tables
To make your tables more accessible, you can use the scope attribute in <th>
elements to specify if they are headers for columns, rows, or groups of columns or
rows.

<th scope="col">Name</th>
<th scope="col">Age</th>

Sample HTML Table


Here is an example HTML table with all the important elements:
<table border="1">
<!-- Caption -->
<caption>Employee Information</caption>

<!-- Table Header -->


<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>

<!-- Table Body -->


<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
<td>Manager</td>
<td>$90,000</td>
</tr>
</tbody>

<!-- Table Footer -->


<tfoot>
<tr>
<td colspan="3">Total Employees</td>
<td>3</td>
</tr>
</tfoot>
</table>

Tables
<TABLE>...</TABLE> → Table definition
<TABLE width="x%"> → Table width in percentage
<TABLE width=x> → Table width in pixels
<TABLE border=x> → Border thickness
<TABLE cellpadding=x> → Space between border and text
<TABLE cellspacing=x> → Space between cells
Table Rows & Cells

<TR>...</TR> → Table row


<TD>...</TD> → Table cell

<TD bgcolor=colorcode> → Cell background color


<TD width="x%"> → Column width in percentage
<TD width=x> → Column width in pixels
<TD align=halign> → Cell alignment (left, center, right)
<TD valign=valign> → Vertical alignment (top, middle, bottom)
<TD colspan=x> → Merges multiple columns
<TD rowspan=x> → Merges multiple rows

Introduction to HTML Forms


HTML forms are essential for collecting user input on web pages. Whether it's a
search bar, a login screen, or a multi-field registration form, HTML forms play a key
role in web interactions. They enable users to submit data, which can be
processed, stored, or returned by a server.

Why Do We Use Forms?


Forms serve as the gateway between the user and the server, allowing for
dynamic, interactive web experiences. They are crucial for tasks such as user
authentication, data submission, feedback collection, and more. Simply put, forms
make websites more engaging and functional.

HTML Forms Structure:


The fundamental structure of an HTML form is encapsulated within the <form>
tags. Inside these tags, you'll place various form controls like text fields,
checkboxes, radio buttons, and buttons for submitting the form.

HTML Input Types

Input types in HTML forms are the backbone of interactive web


applications. They allow users to send information to web servers for
various purposes like searching, logging in, or providing feedback. In this
blog, we'll explore common HTML input types: text, password, radio, and
checkbox.

Text Input

The text input type is the most basic form of input and is widely used for
collecting simple text data.
<input type="text" name="username" placeholder="Enter your
username">
In the above example, the placeholder attribute provides a hint to the
user about what to enter.

Password Input

The password input type is similar to the text type but hides the
characters entered by the user for security reasons.
<input type="password" name="password" placeholder="Enter your
password">

Radio Buttons

Radio buttons are used when you want the user to select only one option
from a set of choices.
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkbox

Checkboxes allow the user to select multiple options from a set.


<input type="checkbox" id="subscribe" name="subscribe"
value="yes">
<label for="subscribe">Subscribe to newsletter</label>
How to Use Form Controls?
The <input> tag is commonly used to create form controls. The attributes of this
tag define the control's behavior.

<input type="" name="" value="">

The "type" attribute specifies the type of input control (e.g., text, password,
checkbox).

The "name" attribute is used for identifying the control, especially when the data
is sent to the server.

The "value" attribute sets a default value for the control, which the user can
overwrite.
Textarea & Select

These elements allow for more complex data collection and provide a
better user experience.

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>

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>

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>

action

The action attribute specifies the URL where the form data should be sent
after submission.
<form action="/submit.php" method="POST">
</form>

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>

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">

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">

required

The required attribute makes a field mandatory to fill out.


<input type="text" required>
autofocus

The autofocus attribute automatically focuses the cursor on the


particular input when the page loads.
<input type="text" autofocus>

HTML5 Validation Attributes

required

As mentioned above, this attribute makes a field mandatory.


<input type="text" required>

pattern

The pattern attribute specifies a regular expression that the input must
match to be valid.
<input type="text" pattern="[a-zA-Z0-9]+">

THyperlinks
• <A href="http://...">...</A> → External link to a webpage
• <A href="mailto:email@example.com">...</A> → Email link
• <A href="file.html">...</A> → Link to a local page in the same folder
• <A name="xyz">...</A> → Anchor definition
• <A href="#xyz">...</A> → Link to an anchor in the same file
• <A href="file.html#xyz">...</A> → Link to an anchor in another file

Images
• <IMG src="imageURL"> → Inserts an image (GIF, JPG, PNG)
• <IMG ... width=x height=y> → Scales the image (in pixels)
• <IMG ... border=x> → Defines the image border thickness
• <IMG ... alt="text"> → Alternative text when image is not displayed
• <IMG ... align=valign> → Aligns image relative to text line
• <IMG ... align=halign> → Aligns text around image (left, right)
• <IMG ... hspace=x> → Horizontal spacing around the image
• <IMG ... vspace=y> → Vertical spacing around the image
• <IMG ... usemap=#map> → Uses an image map
• Image Map

<MAP name="mapname">
<AREA href="url" shape="rect" coords="x1,y1,x2,y2" alt="text">
<AREA href="url" shape="circle" coords="x,y,radius" alt="text">
<AREA href="url" shape="poly" coords="x1,y1,x2,y2,...xn,yn"
alt="text">
<AREA href="url" shape="default" alt="text">
</MAP>

rect → Rectangle
circle → Circle

poly → Polygon

default → Default shape

You might also like