Scribd
Upload
20 views25 pages

CSC336-WT Lec3 Slides

web technology

Uploaded by

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

CSC336-WT Lec3 Slides

web technology

Uploaded by

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

Lecture # 3

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad

Ethics in Information Technology, Sixth Edition 1


Agenda

• Brief Overview of HTML


• History of HTML
• Difference between HTML & XHTML
• Elements and Tags
• Block Level vs. Inline Elements
• Introduction to HTML Validator
• Conclusion
What is HTML?
link Hypertext link **Hyper means beyond (outside, elsewhere)
WebPage Hyper Text Document
Web Page Markup Language Hyper Text Markup Language
(WPML) HTML

Markup Language: A markup language is a computer language that uses tags to define elements within a document.

HTML defines the


HTML stands for It is the standard
structure of a
HyperText Markup language used to
webpage using
Language. create webpages.
elements and tags.
History of HTML
HTML5 becomes the current
standard with new features like
Tim Berners-Lee invents HTML HTML 2.0 introduces new audio, video, and semantic
while working at CERN. features (forms, tables). tags.

1989 1995 2014

1993 1997

First version of HTML is HTML 4.0 becomes a major


released (HTML 1.0). update (more tags, multimedia
support).
Evolution of HTML

HTML 1.0 - 4.01: Focused on basic page structure,


links, images, and forms.

HTML5: Added more flexibility for modern web


development, including multimedia support and
better structuring of content.
• Definition: A markup language designed to store and transport
data.
• Purpose: Focuses on the structure and organization of data, not
how it is displayed.
• Key Features:
• Allows defining custom tags (e.g., <student>, <book>)
• Self-descriptive and human-readable format
XML • Used in web services (e.g., SOAP), data storage, and
configurations
(eXtensible • Strict Syntax:
• Must have a root element
Markup • Tags must be properly closed
• Case-sensitive
Language) • Usage Example:
<bookstore>
<book>
<title>Learning XML</title>
<author>John Doe</author>
</book>
</bookstore>
• Definition: A stricter, XML-based version of HTML.
• Purpose: Ensures better compatibility across different platforms and
browsers by enforcing stricter coding rules.

XHTML • Key Features:


• Combines the structure of HTML with the syntax rules of XML

(eXtensible • All elements must be properly nested and closed


• Tags must be lowercase
HyperText • Documents must be well-formed to be valid
• Usage Example:
Markup <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Language) <html xmlns="http://www.w3.org/1999/xhtml">
<head><title>My XHTML Page</title></head>
<body><h1>Welcome!</h1><p>This is an XHTML page.</p></body>
</html>
XHTML stands for Extensible HyperText
Markup Language.

It is a stricter, XML-based version of


HTML.
Introduction to
XHTML Requires well-formed code, e.g., closing
all tags.

Difference: HTML is more lenient; XHTML


enforces strict coding standards.
HTML:

• Less strict, allows some flexibility in


writing tags.
Key Differences • Allows non-closed tags (e.g., <img>).

between HTML XHTML:


& XHTML
• Stricter syntax (e.g., <img />).
• All tags must be closed and properly
nested.
• Used where web standards and XML
compliance are required.
HTML: Hello World

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
</head>
<body>
Hello, world!
</body>
</html>
Document Object Model
An HTML element is a
combination of a tag, its
attributes, and the content inside.
What are
Example: <h1>Heading</h1> is an
HTML HTML element.
Elements?
The opening tag (<h1>) and the
closing tag (</h1>) define the
element, with content inside.
Headings: <h1> to <h6> (For defining
headings)
Paragraph: <p> (For paragraphs of text)

Common Links: <a> (Anchor tag for hyperlinks)


HTML Tags
Images: <img> (For inserting images)

Lists: <ul>, <ol>, <li> (For


unordered/ordered lists)
Attributes in HTML

Attributes provide
additional information Common attributes:
about HTML elements.
• Example: <img • src (source for images),
src="image.jpg" alt="An • href (link for anchor tags),
image"> • id and class (for styling
and scripting).
Block Level Elements

Block level elements


They take up the full
create a line break Examples:
width available.
before and after them.

<div>, <p>,
<h1>, <ul>,
<table>
Inline Elements

Inline elements do not Examples: Inline elements fit


start on a new line and
only take as much width
<span>, <a>, <img>, within block
<strong>, <em> elements.
as necessary.
Block vs Inline Elements (Comparison)

Block Elements:

• Start on a new line.


• Take full width.
• Can contain other block or inline elements.

Inline Elements:

• Stay on the same line.


• Take only the space they need.
• Can only contain inline elements.
Block Vs Inline Display
Example Elements: Block Vs Inline
Introduction to Validator

HTML Validator is a
Ensures your HTML Tools: W3C Markup
tool used to check
follows W3C Validator, Nu
the syntax of HTML
standards. HTML Checker.
documents.
Importance of Validation

Ensures your
Helps to find
code works
errors and fix
across
them early.
browsers.

Provides
Guarantees
accessibility
proper
compliance
structure and
(important for
better SEO
users with
ranking.
disabilities).
How to Use a Validator

Visit a tool like the W3C


Upload your HTML file or
Validator
paste your code.
(https://validator.w3.org/).

The tool will highlight Example: Correcting


errors and suggest missing closing tags, invalid
corrections. attributes, etc.
Lesson Learning Outcomes (LLOs)

• HTML is the foundation of web development.


• Understanding its history, structure, and validation
helps create better, cleaner websites.
• Knowing the difference between block vs inline
elements and using validators ensures your website is
functional and optimized.

You might also like