Scribd
Upload
23 views

HTML

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, images and more. HTML documents have a basic structure including <html>, <head>, and <body> tags. Within the body, tags like <h1> - <h6> define headings, <p> defines paragraphs, and <img> embeds images. Attributes provide additional information about elements, and the style attribute can control text and background colors, fonts, sizes and other styles.

Uploaded by

Prathap
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

HTML

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, images and more. HTML documents have a basic structure including <html>, <head>, and <body> tags. Within the body, tags like <h1> - <h6> define headings, <p> defines paragraphs, and <img> embeds images. Attributes provide additional information about elements, and the style attribute can control text and background colors, fonts, sizes and other styles.

Uploaded by

Prathap
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

HTML

-> HTML is the standard markup language for creating web pages.
-> HTML invented by Tim Berners-Lee.
-> HTML stands for Hyper Text Markup Language.
-> HTML describes the structure of a web page.
-> HTML is not case sensitive.

A Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> My First Heading</h1>
<p> My First Paragraph </p>
</body>
</html>

HTML Element:

An HTML element is defined by a start tag, some content and an end tag.

<tagname> content </tagname>

The HTML element is everything from the start tag to the end tag.

<h1> My First Heading </h1>

Suppose <br> is start tag but it do not have end tag so it is called empty
element.

Web Browsers:

The Purpose of a web browser(Chrome, Edge, Firefox, Safari) is to read


HTML documents and display them correctly.

HTML Page Structure:

<html>

<head>

<title>Page title</title>

</head>
<body>

<h1>This is a heading</h1>

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

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

</body>

</html>

HTML Documents:

All HTML documents must start with a document type declaration: <!
DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

-> <!DOCTYPE> must only appear once at the top of the page (before any
html tags).

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

-> <h1> defines the most important heading, <h6> defines the least important
heading.

-> HTML paragraphs are defined with the <p> tag.

HTML Links:

HTML links are defined with the <a> tag,

<a href=”https://www.google.com”> This is a link</a>

The links destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images:

HTML images are defined with <img> tag.

<img src=“w3schools.jpg” alt=“w3schools.com” width=“104” height=“142”


Source file - src, alternative text - alt, width and height are provided as
attributes.

HTML Elements:

An HTML element is defined by a start tag, some content, and an end tag.

<p> My First Paragraph</p>


<br> - empty elements do not have end tag.

-> nested HTML elements

<!DOCTYPE html>
<html>
<body>
<h1> My First Heading </h1>
<p> My First Paragraph </p>
</body>
</html>

HTML Attributes:

HTML attributes provide additional information about html elements.

-> 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”.

The href attribute -

<a> tag defines a hyper link. The href attribute specifies the url of the page
the link.

<a href=“www.google.com”> hi </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_girl.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_girl.jpg” width=”500” height=”600”>

The alt Atribute -

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_typo.jpg” alt=“Girl with a jacket”>

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

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

HTML Headings:

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

<h1> defines the most important heading. <h6> defines the least important
heading.
<!DOCTYPE html>

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_headings by HTTrack Website Copier/3.x [XR&CO'2014],
Mon, 05 Sep 2022 14:26:44 GMT -->

</html>

Bigger Headings -

<h1 style=“font-size:60px;”>Heading 1</h1>

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>

HTML Display:

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra
lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the
page is displayed.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

Output -

This paragraph contains a lot of lines in the source code, but the browser
ignores it.

This paragraph contains a lot of spaces in the source code, but the browser
ignores it.

The number of lines in a paragraph depends on the size of the browser


window. If you resize the browser window, the number of lines in this
paragraph will change.

HTML Horizontal Rules:


The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an


HTML page

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_headings_hr by HTTrack Website Copier/3.x
[XR&CO'2014], Mon, 05 Sep 2022 14:26:44 GMT -->
</html>

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

HTML Line Breaks:


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph

<p> This is <br> a paragraph<br>with line <b> breaks.</p>

Output -

This is
a paragraph
With line
Breaks.

The Poem Problem

This poem will display on a single line:

Example

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</p>

Output-

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies
over the ocean. Oh, bring back my Bonnie to me.

Solution - The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks.
Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

Output -

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Styles:

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

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_styles_intro by HTTrack Website Copier/3.x [XR&CO'2014],
Mon, 05 Sep 2022 14:26:44 GMT -->
</html>

Output -
I am normal

I am red

I am blue

I am big
-> Html Style Attribute,

<tagname style =“property:value”

-> background-color

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_styles_background-color by HTTrack Website Copier/3.x
[XR&CO'2014], Mon, 05 Sep 2022 14:26:44 GMT -->

</html>

-> Text Color (color)

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>


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

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_styles_color by HTTrack Website Copier/3.x [XR&CO'2014],
Mon, 05 Sep 2022 14:26:44 GMT -->
</html>
Output -

This is a heading

This is a paragraph.

-> Fonts (font-family)

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>


<p style="font-family:courier;">This is a paragraph.</p>

</body>

<!-- Mirrored from www.w3schools.com/html/tryit.asp?


filename=tryhtml_styles_font-family by HTTrack Website Copier/3.x
[XR&CO'2014], Mon, 05 Sep 2022 14:26:44 GMT -->
</html>

-> Text Siza (font-size)

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>


<p style="font-size:160%;">This is a paragraph.</p>

</body>

</html>

-> Text Alignment (text-align)

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:center;">Centered paragraph.</p>
</body>

</html>

HTML Text Formatting:

HTML Contains several elements for defining text with a special meaning.

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>


<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

Output -

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements -

<b> - bold text


<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML Quotation and Citation Elements:

<blockquote> -
The HTML <blockquote> element defines a section that is quoted from
another source.

Browsers usually indent <blockquote> elements.

<!DOCTYPE html>

<html>

<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For nearly 60 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100 countries and is
supported by more than one million members in the United States and close
to five million globally.

</blockquote>

</body>

</html>

HTML <q> for short quotations -

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.


<!DOCTYPE html>
<html>
<body>

<p>Browsers usually insert quotation marks around the q element.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

</body>

</html>

Output -

Browsers usually insert quotation marks around the q element.

WWF's goal is to: “Build a future where people live in harmony with nature.”

<abbr> -

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",


"CSS", "Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation
systems and search-engines.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded


in 1948.</p>

<address> -

The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address,


phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.
<!DOCTYPE html>
<html>
<body>

<p>The HTML address element defines contact information (author/owner) of


a document or article.</p>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>

</html>

Output -

The HTML address element defines contact information (author/owner) of a


document or article.

Written by John Doe.


Visit us at:
Example.com
Box 564, Disneyland
USA

<cite> -

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

<bdo> -

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction.
<!DOCTYPE html>
<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be
written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>

Output -

If your browser supports bi-directional override (bdo), the next line will be
written from right to left (rtl):

This line will be written from right to left

HTML Quotation and Citation Elements -

<abbr> - defines an abbreviation or acronym.


<address> - defines contact information for the author/owner of a document.
<bdo> - defines the text direction.
<blockquote> - defines a section that is quoted from another source.
<cite> - Defines the title of a work
<q> - Defines a short inline quotation.

HTML Comments:

<! - - write your comments here -->

HTML Colors:

HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.

-> background-color
-> color (text color)
-> border(border color
-> Color values,
The following three <div> elements have their background color set with RGB,
HEX and HSL Values.

rgb(255,99,71), #ff6347, hsl(9, 100%, 64%)


The Following two <div> elements have their background color ser with RGBA
and HSLA values, which add an alpha channel to the color (here we have
50% transparency).

Rgba(255, 99, 71, 0.5)

Hsla(9, 100%, 64%, 0.5)

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>


<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71,
0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%,
0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using
RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color
values.</p>

</body>

</html>

-> rgb(red green blue)


-> rgba(red green blue alpha)
-> HEX Color values - #rrggbb(red(rr), green(gg) and blue(bb))
-> #000000 - display black
-> #ffffff - display white
-> HSL (hue, saturation and lightness)
-> HSLA (hue, saturation, lightness and alpha)

HTML Style - CSS:

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS
files. However, in this tutorial we will use inline and internal styles, because
this is easier to demonstrate, and easier for you to try it yourself.

-> Inline CSS,

<h1 style=“color:blue;”> blue </h1>

-> Internal CSS,

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

-> External Css,

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

=> styles.css

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

CSS Colors, Fonts and Sizes:

-> color
-> font-family
-> font-size
-> border(border:2px solid powderblue;)
-> padding(padding:30px)
-> margin(margin:50px)
-> link to external css,
<link rel=”stylesheet” href=“styles.css”>

HTML Links:

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

<a> tag refers a hyper link,

<a href=”url”> link text </a>


HTML Links - The target attribute

The target attribute specifies where to open the linked document.

_self -> Default.


_blank -> New window or tab.
_parent -> parent frame.
_top -> full body of the window.

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - Different colors

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

HTML Links - create Bookmarks


Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>


<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>

</html>

HTML Images:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>

</html>
Image as a link,

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>

</html>

Common Image Formats -

APNG (Animated Portable Network Graphics) (.apng)


GIF (Graphics Interchange Format) (.gif)
ICO (Microsoft Icon) (.ico, .cur)
JPEG (Joint Photographic Expert Group Image) (.jpg, .jpeg, .jfif, .pjpeg, .pjp)
PNG (Portable Network Graphics) (.png)
SVG (Scalable Vector Graphics) (.svg)

HTML Image maps -

The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"


height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.html">
</map>

</body>

</html>

HTML Background Images -

To add a background image on an HTML element, use the HTML style


attribute and the CSS background-image property.

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a p element:</p>

<p style="background-image: url('img_girl.jpg');">


You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>

</html>

HTML <picture> element -

The HTML <picture> element allows you to display different pictures for
different devices or screen sizes.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at


different viewport sizes.
The browser looks for the first source element where the media query
matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration
block.
The img element is used to provide backward compatibility for browsers that
do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and


earlier or Safari 9.0 and earlier.</p>

</body>

</html>

HTML Favicon :

A Favicon is a small image displayed next to the page title in the browsers
tab.

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
HTML Table:
HTML tables allow web developers to arrange data into rows and columns.

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

-> Everything between <td> and </td> are the content of the table cell.

-> tr stands for tab;le row.

-> th stands for table headers.

HTML Table borders -

You might also like