Scribd
Upload
6 views8 pages

Module 2

HTML, or HyperText Markup Language, is the standard markup language for creating web pages, developed by Tim Berners-Lee in 1991. It consists of elements that structure content into headings, paragraphs, images, and links, and can be integrated with other languages like CSS and JavaScript. The document also covers basic HTML syntax, elements, attributes, and how to create lists, tables, and hyperlinks.

Uploaded by

abhinandkv999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views8 pages

Module 2

HTML, or HyperText Markup Language, is the standard markup language for creating web pages, developed by Tim Berners-Lee in 1991. It consists of elements that structure content into headings, paragraphs, images, and links, and can be integrated with other languages like CSS and JavaScript. The document also covers basic HTML syntax, elements, attributes, and how to create lists, tables, and hyperlinks.

Uploaded by

abhinandkv999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

MODULE 2: INTRODUCTION TO HTML

HTML stands for HyperText Markup Language. It was developed by Tim Berners-Lee in
1991. HTML is the standard markup language used for creating web pages. It describes the
structure of a web page and consists of a series of elements.

HTML is not a programming language; it is a mark-up language that tells web browsers
how to display content.
It organizes content into parts like headings, paragraphs, images, links, and more.

HTML is used to build websites.


It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.

Basic Structure of an HTML document


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
contents …..
</body>
</html>

 The <!DOCTYPE html> declaration defines that this document is an HTML5


document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which
together define the element’s structure and functionality.
HTML Elements are the basic building blocks of a webpage and can represent
different types of content, such as text, links, images, or headings.

Syntax
<tagname>Content goes here...</tagname>
Examples of some HTML elements:

<title>My First Heading</title>


<p>My first paragraph.</p>
 An opening tag indicates where the content begins: <tagname>.
 A closing tag indicates where the content ends: </tagname>.
 The actual content resides between the opening and closing tags.
 HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text.
 However, it’s a best practice to use lowercase tags for consistency and readability.

HTML Empty Element or void elements


HTML Elements that do not require a closing tag is known as empty or void element.
<br>, <hr>, <link>, <input> ,<img> etc are HTML empty elements.

HTML - Basic Tags


HTML tags are the fundamental elements of HTML used for defining the structure of the
document. These are letters or words enclosed by angle brackets (< and >).
Heading Tags
Heading tags are used to define headings of documents. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While

<h1>Here is a first heading.</h1>

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag.

<p>Here is a first paragraph of text.</p>

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the next line.

<p>Hello<br />My first website.<br /> developed<br /> using html</p>

Center Tag
The <center> tag aligns text, images, or other HTML elements in the middle of a web page.
<center> <p>This text is in the center.</p> </center>

Horizonal Rule Tag


The horizontal rule (<hr>) tag displays a horizonal line. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.

<p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should
be at bottom</p>
HTML Text Formatting tags
HTML text formatting refers to the use of specific HTML tags to modify the appearance
and structure of text on a webpage. It allows you to style text in different ways.

1. <i> – Italicizes text


Use the <i> tag to display text in italics without implying emphasis.
<i>This is italic text.</i>

2. <small> – Reduces the font size of the text


The <small> tag renders text in a smaller font than the surrounding text.
<small>This text is smaller than the rest.</small>

3. <ins> – Highlights inserted text


The <ins> tag marks text as newly added or inserted, often displayed with an underline.
<ins>This is inserted text.</ins>

4. <sub> – Displays subscript text


Use the <sub> tag for subscripted text, often used in chemical formulas or footnotes.
H<sub>2</sub>O

5. <strong> – Emphasizes important text, often rendered in bold


The <strong> tag is semantically meaningful and indicates that the text is of high
importance.
<strong>This text is bold and important.</strong>

6. <b> – Makes text bold


The <b> tag visually makes the text bold but does not imply any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background color
The <mark> tag highlights text with a background color, similar to using a highlighter on
paper.
<mark>This text is highlighted.</mark>

8. <del> – Strikes through text


The <del> tag is used to show that text has been deleted or is no longer relevant.
<del>This text is crossed out.</del>

9. <em> – Emphasizes text, typically italicized


The <em> tag is used for emphasized text and is usually rendered in italics to highlight
importance.
<em>This text is emphasized.</em>

10. <sup> – Displays superscript text


Use the <sup> tag to show superscripted text, commonly used in exponents or footnotes.
E = mc<sup>2</sup>
HTML Attributes
HTML attributes are special words that provide additional information to an HTML element.

 All HTML elements can have attributes


 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

Below is the syntax of an element HTML having attribute


<tag_name attribute_name="value">contents…</tag_name>

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

<a href="https://www.youtube.com">Visit youtube</a>

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:

<img src="img_flower.jpg">

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):

<img src="img_flower.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen reader.

<img src="img_flower.jpg" alt="beautiful roses ">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

<p style="color:red;">This is a red paragraph.</p>

The lang Attribute


You should always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

The title Attribute


The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:

<p title="I'm a tooltip">This is a paragraph.</p>

Creating hyperlinks
HTML Links
A hyperlink is a specific type of link that allows users to navigate from one web page or resource
to another by clicking on it. You can create hyperlinks using text or images available on a
webpage. A hyperlink is created using the HTML Anchor Tag (</a>).

An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages.

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
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.
<a href="https://www.youtube.com/">Visit youtube.com!</a>

HTML - Images
HTML images provide visual content for web pages, enhancing user experiences and conveying
information. They can be photographs, graphics, icons, or illustrations.

The following is the basic syntax for HTML images:

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

Note: The <img> tag is an empty tag, which means that it can contain only a list of attributes and
has no closing tag.
<img src="image_path" alt="Alternate text for the image" width="200px" height="150px" />
 src: The src attribute defines the path of the image (image URL).
 alt: The alt attribute defines the alternate text; if there is a broken link to the image path, the
alternate text displays on the webpage.
 width and height: The width and height attribute define the height and width for the image.

Make sure you specify the correct image file name in the src attribute. The image name is always
case-sensitive.

The alt attribute is an optional attribute but recommended as it specifies an alternate text for an
image if the image cannot be displayed.

HTML Lists
An HTML List allows you to organize data on web pages into an ordered or unordered
format to make the information easier to read and visually appealing. HTML Lists are very
helpful for creating structured, accessible content in web development.

Types of HTML Lists


There are three main types of lists in HTML:
1. Unordered Lists (<ul>): These lists are used for items that do not need to be in any
specific order. The list items are typically marked with bullets.
2. Ordered Lists (<ol>): These lists are used when the order of the items is important.
Each item in an ordered list is typically marked with numbers or letters.
3. Description Lists (<dl>): These lists are used to contain terms and their corresponding
descriptions.
1. HTML Unordered List or Bulleted List
Unordered lists are ideal for scenarios where the sequence of the items is not important.
The unordered list items are marked with bullets, also known as bulleted lists. An
unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
 Item 1
 Item 2
 Item 3
style=”list-style-type:disc”; it specifies which kind of marker is used in the list. eg:
disc,circle,square or none.

2. Using HTML Ordered List


Ordered lists are used when the items need to follow a specific sequence.
In an ordered list, all list items are marked with numbers by default. An ordered list starts
with the <ol> tag, and each list item begins with the <li> tag.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
1. Item 1
2. Item 2
3. Item 3

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.

3. Using HTML Description List


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 details.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>

Item 1
Description of Item 1
Item 2
Description of Item 2

Nested List in HTML


A nested list in HTML is a list that contains other lists within its list items. This creates a
hierarchical structure.
eg:
 Subjects
o Malayalam
o English
o maths
o computer science
 c
 python
 web
Table
HTML Tables allow you to arrange data into rows and columns on a web page, making it
easy to display information in a structured way.

<table> used for creating HTML table


<tr> used for creating a table row
<th> used for creating table heading
<td> used for creating table data

Note: By default <th> tag is bold and centrally aligned


By default <td> tags are regular and left aligned.
HTML Table example
<!DOCTYPE html>
<html>
<body>
<table border=”1”>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Mark</th>
</tr>
<tr>
<td>Priya</td>
<td>Bsc cs</td>
<td>98</td>
</tr>
<tr>
<td>Arun</td>
<td>English</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Bcom </td>
<td>41</td>
</tr>
</table>
</body>
</html>

Name Subject Mark


Priya Bsc cs 98
Arun English 32
Sam Bcom 41
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.

To make a cell span over multiple columns, use the colspan attribute:
<th colspan=”2” >subject </th> // span over 2 columns
To make a cell span over multiple rows, use the rowspan attribute:
<th rowspan=”3” >name</th> // span over 3 rows

You might also like