Scribd
Upload
33 views23 pages

Lecture 3

The document discusses the history and structure of HTML, including key HTML elements like headings, paragraphs, links, images and videos. It covers the differences between block-level and inline elements, and how to properly structure an HTML page with tags like <html>, <head>, <title>, and <body>. It also mentions using the W3C validator to check pages for standard compliance.

Uploaded by

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

Lecture 3

The document discusses the history and structure of HTML, including key HTML elements like headings, paragraphs, links, images and videos. It covers the differences between block-level and inline elements, and how to properly structure an HTML page with tags like <html>, <head>, <title>, and <body>. It also mentions using the W3C validator to check pages for standard compliance.

Uploaded by

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

Web Technologies

Introduction to HTML
Today’s Lecture
• HTML History
• HTML and XHTML
• HTML Elements
• Block Level Element vs Inline Element
• HTML Page Structure
• W3C Validator
HTML History
• HTML stands for Hypertext Markup Language.
• HTML is a markup language.
• A markup language is a set of markup tags.
• Tags describe document content or layout.
• HTML documents contain HTML tags and plain text.
• First mentioned on the Internet by Tim Berners-Lee in late 1991.
• HTML 2.0 was published in Nov 1995.
• HTML 3.2 was published in Jan 1997.
• HTML 4.0 was published in Dec 1997.
• HTML 5.0 was published in Oct 2014.
HTML and XHTML
• HTML gives content structure and meaning by defining that content.
– Examples are <title>, <body>, <p>, and <b>.
• Some Important Key Points:
– <!DOCTYPE html>, <html>, <head>, <title>, and <body>
are mandatory.
– Elements must always be properly nested.

• XHTML stands for eXtensible HyperText Markup Language.


• XHTML is a more restrictive form of HTML, following to the XML
standards (eXtensible Markup Language).
HTML Elements
• HTML element is defined by a start tag, some content, and an end
tag.
– Syntax: <tagname> content goes here </tagname>
– Example: <p> this is a paragraph statement. </p>
– Example: <a href="hib.html"> click here to view </a>
• Some tags don't contain any information; can be opened and closed
in one tag. These tags are known as singleton tags.
– Example: line break <br>, and horizontal line <hr>
Block-Level Element vs Inline Element
• Block-Level Element
– Always starts on a new line, and takes up full width available.
– Examples: <div>, <p>, <ol>, <ul>, <h1> - <h6>, etc.
• Inline Element
– Does not start on a new line, and only takes up as much width
as necessary.
– Examples: <b>, <strong>, <i>, <em>, <small>, <a>, <img>,
<label>, etc.
HTML Page Structure
• <html> represents the root of an HTML document.
• <html> is the container for all other HTML elements (except for <!
DOCTYPE html>).
• Include lang (language) attribute inside the <html> tag, to declare
the language of the Web page. This is meant to assist search
engines and browsers.
• HTML page is saved into a file ending with extension .html
HTML Page Structure
• HTML Head Tag <head>
– <head> is a container that contain <title>, <style>, <meta>,
<link>, <script>…
– <head> is placed between <html> tag and the <body> tag.
• HTML Title Tag <title>
– <title> defines the title of the document.
– Title shown in the browser's title bar or in the page's tab.
– It is placed within the head of the page.
– Title provides a title for the page when it is added to favorites
(i.e., bookmark).
– Title displays a title for the page in search-engine results.
HTML Page Structure
• HTML Body Tag <body>
– <body> defines the document's body.
– <body> contains all the content of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
– There can only be one <body> element in an HTML document.
HTML Page Structure
• HTML Paragraph Tag <p>
– <p> defines a paragraph.
– <p> is used to indicate the start of the paragraph, and </p> is
used to indicate the end of the paragraph.
– Browsers automatically add a single blank line before and after
each <p> element.
HTML Page Structure
• HTML Heading Tags <h1>,...,<h6>
– <h1> to <h6> defines headings.
– <h1> defines most important heading.
– <h6> defines least important heading.
– <h1> heading should be used for main heading, followed by
<h2> heading, and so on.
HTML Page Structure
• HTML Links Tag <a>
• HTML links are hyperlinks.
• <a> defines a hyperlink, which is used to link from one page to
another.
 Example: <a href=“file.html”>
 href indicates the link's destination URL.
 It can be absolute (to another web site or server)
or relative (to another page on same site).
HTML Page Structure
• HTML Images Tag <img>
– <img> is used to embed an image.
– <img> has two required attributes:
• src - Specifies the source/path to the image.
• alt - Specifies an alternate text for the image.
HTML Page Structure
• HTML Images Tag <img>
• Image as a Link
• If image is contained within same folder or directory:
o <img src="hib.jpg" width="25" height="25">

• To display images from another folder:


o <img src="/images/hib.png" width= "25" height= "25">

• If image is on another server, then use complete link:


o <img src="https://comsats.edu.pk/img/comsats.png">
HTML Page Structure
• HTML Video Tag <video>
– <video> is used to embed a video content in a document.
– <video> is a pair tag and have a closing tag.
<html>
<head>
<title>video</title>
</head>
<body>
<h1>video</h1>
<video src=“video.mp4" controls height="336px" width="300px"></video>
</body>
</html>
HTML Page Structure
• HTML Video Tag <video>
Optional Attributes
HTML Page Structure
• HTML Audio Tag <audio>
– <audio> is used to embed audio content in a document.
– <audio> is a pair tag and have a closing tag.

<html>
<head>
<title>video</title>
</head>
<body>
<h1>audio</h1>
<audio src="anthem.mp3" controls></audio>
</body>
</html>
HTML Page Structure
• HTML Audio Tag <audio>
Attributes
HTML Page Structure
• HTML Phrase Tags
– HTML phrase tags are special purpose tags.
– Some examples of phrase tags are:
• Abbreviation tag : <abbr>
• Marked tag: <mark>
• Strong tag: <strong>
• Emphasized tag : <em>
• Short quote tag : <q>
• Code tag: <code>
HTML Page Structure
• <strong>, and <em>
– <strong> is used to define text with strong importance.
• The content inside is typically displayed in bold.
– <em> is used to define emphasized text.
• The content inside is typically displayed in italic.
W3C Validator
• It checks that either tags are
following W3C formatting
standards or not.
• If fail to validate website's
pages based on W3C
standards, then website will
most likely suffer from errors.

Disclaimer – images added only for educational purpose.


Summary of Today’s Lecture
• HTML History
• HTML and XHTML
• HTML Elements
• Block Level Element vs Inline Element
• HTML Page Structure
• W3C Validator
References
• https://developer.mozilla.org/en-US/docs/Web/HTML
• https://www.w3schools.com/html/
• https://validator.w3.org/

You might also like