Introduction to HTML

UNIT 1

What is Web Development?

Web development includes web designing, development, and maintenance of a website. It focuses on building web pages
and websites. We develop websites by writing codes using various programming languages.Additionally, web
development also involves optimizing websites for speed, performance, and search engine visibility. It is a dynamic field
that requires continuous learning and adaptation to new technologies and trends in the industry.

Three technologies that we use in web development are.

HTML

HTML, which stands for hypertext markup language, is a crucial tool in web development. It is the language used to
create the structure and layout of a webpage by writing various codes. HTML utilizes tags, which are enclosed in angle
brackets, to define different elements on a webpage such as images, text, tables, and more. These tags provide instructions
to web browsers on how to display the content of a webpage to users. By mastering HTML, developers are able to create
visually appealing and interactive websites that are essential in today's digital age.

CSS: CSS stands for Cascading Style Sheets.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout
designs, variations in display for different devices and screen sizes as well as a variety of other effects.

JavaScript

JavaScript helps us to give the functionality to the website.JavaScript can be used to create interactive elements, such as
pop-up windows, form validation, and dynamic content updates. It allows for a more engaging user experience by
responding to user actions in real-time. Additionally, JavaScript can be used to communicate with servers, retrieve data,
and dynamically display information without requiring the user to reload the entire page. This makes websites more
dynamic and responsive to user input.

What Is HTML?

If you want to build a website, the first language that you need to learn is HTML.HTML, which stands for Hypertext
Markup Language, is a pretty simple language. It consists of different elements which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and
closing angle brackets. The opening tag indicates where the element begins. Similar to the opening tag, the closing tag is
also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name.
Everything inside the opening and closing tags is the content.

Code:

<p>Hello this is some HTML code</p>

But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an
opening tag that cannot have any content. These elements are typically used to insert or embed something in the
document.

For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto
the page.

Code:

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

In the example above, the <img> element only consists of one tag that does not have any content. This element is used
to insert an image file from “Unsplash” in the document.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear in the content.

Code:

<img src="https://images.unsplash.com/photo" width="50">

In the example above, the <img> element has 2 attributes: src or source to specify the path of the image, and width to
specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

 There is a space between attributes and the element name

 Attributes are added in the opening tag

 Elements can have many attributes

 Attributes usually have a name and a value: name=“value”

How to create an HTML document

Open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it
index.html. Enter the code below in the text area.
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

How to run the HTML file

To see the output of the code added save the files and write click on the file and open with the browser.The browser
will parse the HTML file and show the output.

This is the minimal code that an HTML document should have to make up a website. And here we have:

 <!DOCTYPE html>: First we have Doctype. For some historical reason in HTML we have to include the doctype for
everything to work correctly.

 <html lang="en"></html>: The <html> element wraps all the content on the page, also known as the root element.
And we should always include the lang attribute to declare the language of the page.

 <head></head>: The <head> element is a container for everything you want to include, but not content that you
show to your users.

 <meta charset="UTF-8" />: The first meta element is used to set the character set to be UTF-8, which includes most
characters from written languages.

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />: The second meta element specifies
the browser viewport. This setting is for a mobile-optimized site. <title>Document</title>: This is the <title>
element. It sets the title of the page.

 <body></body>: The <body> element contains all the content on the page.This where the majority of our elements
are written.

Some Common HTML elements:

<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

These elements are used to organize the content into different sections. They are usually self-explanatory, for example,
<header> usually represents a group of the introduction and navigation section, <nav> represents the section that
contains navigation links, and so on.
Text Elements

These include heading tags such as <h1> to <h6>, paragraph tags <p>, division tags <div>, span tags <span>, unordered
list tags <ul>, ordered list tags <ol>, and list item tags <li>. Each of these tags serves a specific purpose in organizing and
presenting information on a website. By utilizing these tags effectively, web developers can create visually appealing
and well-structured webpages that are easy to navigate and understand for users. It is important to understand the
function of each tag and how they can be used in combination to achieve the desired layout and design for a webpage.

These elements are used to organize content or text blocks.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Code:

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Output

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after
a paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and comes with line breaks
before and after.
The <div> element is often used to group sections of a web page together.

<div>
<h2>India</h2>
<p>Delhi is the capital city of India.</p>
<p>Delhi has over 20 million inhabitants.</p>
</div>

HTML Images

The HTML <img> tag is used to embed an image in a web page.

The <img> tag is empty, it contains attributes only, and does not have a closing tag. The <img> tag has
two required attributes:
● src - Specifies the path to the image
● alt - Specifies an alternate text for the image code:

<img src="url" alt="alternatetext">

HTML Lists

HTML lists come in three main categories: unordered lists, ordered lists, and definition lists. Each type serves a specific
purpose

Unordered lists
Unordered lists are perfect for presenting items that do not have a particular sequence or order. They are typically
displayed with bullet points, which make them visually distinct from ordered lists. An example might be a grocery
shopping list.To create an unordered list, you can use the <ul> (unordered list) element and nest individual list items
within <li> (list item) elements:

Code:

<ul>
 <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Output:

This code will generate a simple unordered list like this:

● Item 1

● Item 2

● Item 3

Ordered lists

Ordered lists, as the name suggests, are useful when you want to present items in a specific sequence or order. They are
displayed with numbers or letters by default, but you can customize the numbering style using CSS. An example might
be a ranked list of your favorite movies.
To create an ordered list, use the <ol> (ordered list) element and nest list items within <li> elements:

Code:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Output:
This code will produce an ordered list like this:

1. First item

2. Second item

3. Third item

Ordered lists are useful for creating step-by-step instructions, ranking items, or any situation where a specific order
matters.
How to create definition lists
Definition lists are designed to present terms and their corresponding definitions. They consist of a list of terms
enclosed in (definition term) elements and their associated definitions enclosed in (definition description) elements.
Here's an example:

Code:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used for structuring content on the web.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling web documents.</dd>

<dt>JavaScript</dt>
<dd>A programming language used for adding interactivity to web pages.</dd>
</dl>

Output:

This code will create a definition list like this:

HTML
HyperText Markup Language, used for structuring content on the web.

CSS
Cascading Style Sheets, used for styling web documents.

JavaScript
A programming language used for adding interactivity to web pages.

Definition lists are particularly handy for glossaries and dictionaries, where you need to pair terms with their meanings.

CSS:Cascading style sheets

Using HTML tags like <head>, <body>, and so on can help you organize your web page content nicely, but only up to a
point.

HTML-only pages can be pleasant and easy to read – which is hugely important – but, after a while, they all do tend to
look the same.