Lecture 2

Markup Language
A markup language is a computer language that uses tags to

define elements within a document. It is human-readable,
meaning markup files contain standard words, rather than
typical programming syntax. While several markup languages
exist, the two most popular are HTML and XML.
HTML
HTML is a markup language used for creating webpages. The contents of each webpage
are defined by HTML tags. Basic page tags, such as <head>, <body>, and <div> define
sections of the page, while tags such as <table>, <form>, <image>, and <a> define
elements within the page. Most elements require a beginning and end tag, with the
content placed between the tags. For example, a link to the TechTerms.com home page
may use the following HTML code:
<a href="https://techterms.com">TechTerms.com</a>
XML
XML is used for storing structured data, rather than formatting information on
a page. While HTML documents use predefined tags (like the examples above),
XML files use custom tags to define elements. For example, an XML file that
stores information about computer models may include the following section:
<computer>
<manufacturer>Dell</manufacturer>
<model>XPS 17</model>
<components>
<processor>2.00 GHz Intel Core
i7</processor>
<ram>6GB</ram>
<storage>1TB</storage>
</components>
</computer>
Continue……………
XML is called the "Extensible Markup Language" since custom tags can be used
to support a wide range of elements. Each XML file is saved in a standard text
format, which makes it easy for software programs to parse or read the data.
Therefore, XML is a common choice for exporting structured data and for sharing
data between multiple programs.
NOTE: Since both HTML and XML files are saved in a plain text format, they can
be viewed in a standard text editor. You can also view the HTML source of an
open webpage by selecting the "View Source" option. This feature is found in the
View menu of most Web browsers.
What is HTML?
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating
Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the
content
•HTML elements label pieces of content such as "this is
a heading", "this is a paragraph", "this is a link", etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
•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.
•The <h1> element defines a large heading
•The <p> element defines a paragraph
• What is an HTML Element?
• An HTML element is defined by a start tag,
some content, and an end tag:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the
start tag to the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
W3C Candidate Recommendation: HTML

2016
5.1
2017 W3C Recommendation: HTML5.1 2nd Edi

tion
2017 W3C Recommendation: HTML5.2
• 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>.
• Example
• <!DOCTYPE html>
<html>
<body>

</body>
</html>
• HTML Headings
• HTML headings are defined with the <h1> to
<h6> tags.
• <h1> defines the most important heading. <h6>
defines the least important heading:
• Example
• <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
• HTML Paragraphs
• HTML paragraphs are defined with the <p>
tag:
• Example
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Paragraphs
• HTML paragraphs are defined with the <p>
tag:
• Example
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Links
• HTML links are defined with the <a> tag:
• Example
• <a href="https://www.w3schools.com">This is
a link</a>
• HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt),
width, and height are provided as attributes:
• Example
• <img src="w3schools.jpg"
alt="W3Schools.com" width="104"
height="142">
• HTML Elements
• An HTML element is defined by a start tag,
some content, and an end tag:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the
start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
• Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other
elements).
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements (<html>, <body>, <h1> and
<p>):
• Example
• <!DOCTYPE html>
<html>
<body>

</body>
</html>
• Example Explained
• The <html> element is the root element and it defines the
whole HTML document.
• It has a start tag <html> and an end tag </html>.
• Then, inside the <html> element there is a <body> element:
• <body>

</body>
• The <body> element defines the document's
body.
• It has a start tag <body> and an end tag
</body>.
• Then, inside the <body> element there are two
other elements: <h1> and <p>:
• The <h1> element defines a heading.
• It has a start tag <h1> and an end tag </h1>:
• The <p> element defines a paragraph.
• It has a start tag <p> and an end tag </p>:
• Never Skip the End Tag
• Some HTML elements will display correctly, even if you forget
the end tag:
• Example
• <html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
• Empty HTML Elements
• HTML elements with no content are called
empty elements.
• The <br> tag defines a line break, and is an
empty element without a closing tag:
• Example
• <p>This is a <br> paragraph with a line
break.</p>
• HTML is Not Case Sensitive
• HTML tags are not case sensitive: <P> means
the same as <p>.
• The HTML standard does not require
lowercase tags, but W3C recommends
lowercase in HTML, and demands lowercase
for stricter document types like XHTML.

Lecture 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 2

Uploaded by

Copyright:

Available Formats

Markup Language

A markup language is a computer language that uses tags to

<h1>My First Heading</h1>

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

W3C Candidate Recommendation: HTML

2017 W3C Recommendation: HTML5.1 2nd Edi

<h1>My First Heading</h1>

<h1>My First Heading</h1>

<h1>My First Heading</h1>

You might also like