Scribd
Upload
24 views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views

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