Jodddddddddddcomputer_Chapter_4.pptx.pdf
ankitayadavay123
3 views
12 slides
Mar 05, 2025
Slide 1 of 12
1
2
3
4
5
6
7
8
9
10
11
12
About This Presentation
Educational purpose
Slide Content
Learning the Basics of HTML
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)
Modern Web Development Workshop - 1
➢HTML defines three tags that are used to define the page’s overall structure and
provide some simple header information. These three tags—<html>, <head>, and
<body>—make up the basic skeleton of every web page.
➢The first line of each page must include a DOCTYPE identifier. Although it’s not a
page structure tag.
➢The DOCTYPE identifier, or document type declaration, is a line of code that tells a
web browser what version of HTML or XML a document is written in: html or xml.
➢The HTML5 document type appears before the page structure tags:
<!DOCTYPE html> <!-- the DOCTYPE declaration for HTML5-->
<html>
<head>
<title>Page Title</title>
</head>
<body>
...your page content…
</body>
</html>
Structuring Your HTML
➔All the text and HTML elements in your
web page should be placed within the
beginning and ending HTML tags.
provide some simple header information. These three tags—<html>, <head>, and
<body>—make up the basic skeleton of every web page.
➢The first line of each page must include a DOCTYPE identifier. Although it’s not a
page structure tag.
➢The DOCTYPE identifier, or document type declaration, is a line of code that tells a
web browser what version of HTML or XML a document is written in: html or xml.
➢The HTML5 document type appears before the page structure tags:
<!DOCTYPE html> <!-- the DOCTYPE declaration for HTML5-->
<html>
<head>
<title>Page Title</title>
</head>
<body>
...your page content…
</body>
</html>
Structuring Your HTML
➔All the text and HTML elements in your
web page should be placed within the
beginning and ending HTML tags.
➢The first page structure tag in every HTML page is the <html>
tag.
➢The <html> tag serves as a container for all of the tags that
make up the page.
➢It is required because both XML and SGML specify that every
document have a root element.
➢You should always include the lang attribute inside the <html>
tag, to declare the language of the Web page.
<html lang="en"><!--Specifies the english language -->
<p lang=”en”> <!--Specifies the english language in paragraph -->
The <html> Tag
tag.
➢The <html> tag serves as a container for all of the tags that
make up the page.
➢It is required because both XML and SGML specify that every
document have a root element.
➢You should always include the lang attribute inside the <html>
tag, to declare the language of the Web page.
<html lang="en"><!--Specifies the english language -->
<p lang=”en”> <!--Specifies the english language in paragraph -->
The <html> Tag
➢The <head> tag is a container for the tags that contain information about
the page, rather than information that will be displayed on the page.
➢The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
➢Metadata is not displayed.
➢Metadata typically define the document title, link, styles, scripts, and other
meta information.
➢The following elements can go inside the <head> element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
The <head> Tag
Example:
<!DOCTYPE html>
<html>
<head>
<title>This is the Title. It will be explained later on </title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
...your page...
</html>
the page, rather than information that will be displayed on the page.
➢The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
➢Metadata is not displayed.
➢Metadata typically define the document title, link, styles, scripts, and other
meta information.
➢The following elements can go inside the <head> element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
The <head> Tag
Example:
<!DOCTYPE html>
<html>
<head>
<title>This is the Title. It will be explained later on </title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
...your page...
</html>
➢The <body> element contains all the contents of an HTML document,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
➢Both <body> and </body> tags go inside the <html> tags
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The <body> Tag
Body Attribute Values Description
background
It contains the URL of the background image. It
is used to set the background image.
bgcolor
It is used to specify the background color of an
image.
alink It is used to specify the color of the active link.
link It is used to specify the color of visited links.
text It specifies the color of the text in a document.
vlink It specifies the color of visited links.
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
➢Both <body> and </body> tags go inside the <html> tags
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The <body> Tag
Body Attribute Values Description
background
It contains the URL of the background image. It
is used to set the background image.
bgcolor
It is used to specify the background color of an
image.
alink It is used to specify the color of the active link.
link It is used to specify the color of visited links.
text It specifies the color of the text in a document.
vlink It specifies the color of visited links.
The <body> Tag’s Attributes:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor=red>
<h1>Hello world!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body background=’smile.png’>
<h1>Hello world!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor=red>
<h1>Hello world!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body background=’smile.png’>
<h1>Hello world!</h1>
</body>
</html>
➢Headings are used to add titles to sections of a page. HTML defines six
levels (h1 through h6) of headings.
➢Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute, using the CSS font-size property.
<h1>Mythology Through the Ages</h1>
<h2>Common Mythological Themes</h2>
<h2>Earliest Known Myths</h2>
<h2>Origins of Mythology</h2>
<h3>Mesopotamian Mythology</h3>
<h3>Egyptian Mythology</h3>
<h4>The Story of Isis and Osiris</h4>
<h4>Horus and Set: The Battle of Good vs. Evil</h4>
<h4>The Twelve Hours of the Underworld</h4>
<h4>The River Styx</h4>
<h2>History in Myth</h2>
Headings in HTML
levels (h1 through h6) of headings.
➢Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute, using the CSS font-size property.
<h1>Mythology Through the Ages</h1>
<h2>Common Mythological Themes</h2>
<h2>Earliest Known Myths</h2>
<h2>Origins of Mythology</h2>
<h3>Mesopotamian Mythology</h3>
<h3>Egyptian Mythology</h3>
<h4>The Story of Isis and Osiris</h4>
<h4>Horus and Set: The Battle of Good vs. Evil</h4>
<h4>The Twelve Hours of the Underworld</h4>
<h4>The River Styx</h4>
<h2>History in Myth</h2>
Headings in HTML
Headings in HTML
TagDescription Size
<h1>Defines the most important heading. 2em (32px)
<h2>Defines a level 2 heading. 1.5em (24px)
<h3>Defines a level 3 heading. 1.17em (18.72px)
<h4>Defines a level 4 heading. 1em (16px)
<h5>Defines a level 5 heading. 0.83em (13.28px)
<h6>Defines the least important heading. 0.67em (10.72px)
TagDescription Size
<h1>Defines the most important heading. 2em (32px)
<h2>Defines a level 2 heading. 1.5em (24px)
<h3>Defines a level 3 heading. 1.17em (18.72px)
<h4>Defines a level 4 heading. 1em (16px)
<h5>Defines a level 5 heading. 0.83em (13.28px)
<h6>Defines the least important heading. 0.67em (10.72px)
➢Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page.
➢On web browsers, paragraphs display as blocks of text separated from adjacent
blocks by blank lines, white spaces, or first-line indentation.
<p>The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern’s
sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada
from her imprisonment in the dragon’s lair. </p>
What is an HTML Paragraph?
➢On web browsers, paragraphs display as blocks of text separated from adjacent
blocks by blank lines, white spaces, or first-line indentation.
<p>The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern’s
sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada
from her imprisonment in the dragon’s lair. </p>
What is an HTML Paragraph?
➢You can put comments into HTML pages to describe the page
itself or to provide some kind of indication of the status of the
page.
➢HTML comments are not displayed in the browser, but they can
help document your HTML source code.
➢Everything between the <!-- and the --> will be hidden from the
display.
<!— This is a comment →
➔Is it possible to put HTML tags inside comments?
Yes, you can enclose HTML tags within comments, and the browser will not
display them.
Comments in HTML
itself or to provide some kind of indication of the status of the
page.
➢HTML comments are not displayed in the browser, but they can
help document your HTML source code.
➢Everything between the <!-- and the --> will be hidden from the
display.
<!— This is a comment →
➔Is it possible to put HTML tags inside comments?
Yes, you can enclose HTML tags within comments, and the browser will not
display them.
Comments in HTML
1.What three HTML tags are used to describe the overall structure of a
web page, and what do each of them define?
2.Where does the <title> tag go, and what is it used for?
3.How many different levels of headings does HTML support? What are
their tags?
4.Why is it a good idea to use two-sided paragraph tags, even though the
closing tag </p> is optional in HTML?
5.Can you put a span inside a paragraph?
6.How to have < > and “ ” symbols in a paragraph?
7.What is the correct sequence of HTML tags (in Head, Title, HTML,
Body) for starting a webpage?
8.Use the HTML comment tag to make a comment out of the "This is a
comment" text.
<h1>This is a heading</h1>
This is a comment
<p>This is a paragraph.</p>
Quiz
web page, and what do each of them define?
2.Where does the <title> tag go, and what is it used for?
3.How many different levels of headings does HTML support? What are
their tags?
4.Why is it a good idea to use two-sided paragraph tags, even though the
closing tag </p> is optional in HTML?
5.Can you put a span inside a paragraph?
6.How to have < > and “ ” symbols in a paragraph?
7.What is the correct sequence of HTML tags (in Head, Title, HTML,
Body) for starting a webpage?
8.Use the HTML comment tag to make a comment out of the "This is a
comment" text.
<h1>This is a heading</h1>
This is a comment
<p>This is a paragraph.</p>
Quiz
Thank You
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3
- Slides 12
- Age 285 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
39 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
42 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
38 views
14
Fertility awareness methods for women in the society
Isaiah47
36 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
34 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
37 views