Scribd
Upload
101 views19 pages

Introduction To HTML: 1 Web Engineering

HTML is a markup language used to define the structure and layout of web pages. An HTML page includes a head and body section. The body section uses tags like <p> for paragraphs, <h1> for headings, and <font> for text styling. Lists are created using unordered <ul> and ordered <ol> lists with <li> list items. The document introduces HTML and covers its basic structure, text formatting tags, and lists.

Uploaded by

Muhammad Ali Haider
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
101 views19 pages

Introduction To HTML: 1 Web Engineering

HTML is a markup language used to define the structure and layout of web pages. An HTML page includes a head and body section. The body section uses tags like <p> for paragraphs, <h1> for headings, and <font> for text styling. Lists are created using unordered <ul> and ordered <ol> lists with <li> list items. The document introduces HTML and covers its basic structure, text formatting tags, and lists.

Uploaded by

Muhammad Ali Haider
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/ 19

Introduction to HTML

Web Engineering 1
Outline
• Introduction to HTML
• Basic Structure of a HTML page
• Text formatting tags in HTML
• Lists in HTML

Web Engineering 2
1. Introduction to HTML…
• HTML – Hyper-Text Markup Language – The
Language of Web Pages on the World Wide
Web
• It defines the structure of webpages and
determines how data is displayed online
• HTML is a text formatting language
• Is a set of special instructions that can be
added in the text to add formatting and
linking information
• Is directly interpreted by the browser
Web Engineering 3
1. Introduction to HTML…
• Hypertext:
– Allows for non-linear linking to other documents
• Markup Language:
– Content is “marked up” or tagged to tell the browser
how to display it
• HTML standards are developed under the
authority of the World Wide Web Consortium
(W3C), headed by Tim Lee
– http://www.w3c.org
Web Engineering 4
1. Introduction to HTML…
• HTML was created in 1991 by Tim Berners-Lee at
CERN in Switzerland
• It was designed to allow scientists to display and
share their research
• 1995- HTML 2
• lots of browsers had added their own bits to HTML
• Dan Connolly and colleagues collected all the
HTML tags that were widely used and collated
them into a draft document
Web Engineering 5
1. Introduction to HTML…
• 1997- HTML 3.2
• It was the first version developed and standardized
exclusively by the W3C
•  HTML 3.2 included the support for applets, text
flow around images, subscripts and superscripts etc
• 1999 – HTML 4.1
• extends HTML with mechanisms for style sheets,
scripting, frames etc.
• HTML5
Web Engineering 6
1. Introduction to HTML…
• HTML Tags:
• Tags are instruction that are directly embedded
into the text of the document
• Is a signal to a browser to do something before just
throwing text on the screen
• Begin with open angle bracket < and ends with
close angle bracket >
– For example <HTML>
• Paired Tags : <HTML> </HTML>
• Singular Tags: <BR>
Web Engineering 7
1. Introduction to HTML…
• HTML is not case-sensitive
• multiple spaces will appear as a single space
• Blank and new lines are ignored
• <!-- comments -- >
• HTML files have .html extension

Web Engineering 8
2. Structure of HTML Page
• The entire web page is enclosed within <HTML> and
</HTML>
• Within these tags two distinct sections are created head
and body
• Head: <HEAD>
<TITLE> …… </TITLE>
</HEAD>

. Body: indicate the start and end of main body of textual


information
<BODY>
</BODY>
Web Engineering 9
2. Structure of HTML Page…
• First HTML page:

Web Engineering 10
3. The BODY Tag
Attributes:
• BGCOLOR: Change the background color
• BACKGROUND: Place an image at background
• TEXT: Change the color of the body text
Example:
• <BODY BGCOLOR=123345 TEXT=Red>
• <BODY BACKGROUND=“img.jpg” TEXT=Red>

Web Engineering 11
4. Formatting text

Web Engineering 12
Formatting Text…...

Web Engineering 13
4. Formatting text…
• <P>….. </p>: starts a new paragraph
• Align (left, right, center and justify)
• <BR>: gives an one line break
• <H1> ….. </H1>: heading
• <HR>: draws horizontal line
• ALIGN (LEFT,CENTER,RIGHT)
• SIZE=2
• WIDTH=100%
• color
• Text Styles:
• <B> …. </B> , <I> …. </I>, <U> …. </U>

Web Engineering 14
4. Formatting text…
• <CENTER>….</CENTER>
• <FONT>……</FONT>
– FONTFACE: Sets the specified font name
– SIZE: Size of the text (between 1 and 7)
– COLOR: Set the color of the text
• Example:
– <FONT FONTFACE=“COMIC SANS MS” SIZE=6 COLOR=RED>
Welcome</FONT>

Web Engineering 15
5. Lists in HTML
• Un-ordered Lists:
– Starting Tag <UL>, Ending Tag </UL>
– List Items <LI>
– Type (FILLROUND, SQUARE)
• Ordered Lists:
– Starting Tag <OL>, Ending Tag </OL>
– List Items <LI>
– Type (“1”, “A”, ‘”a”, ”I”, ”i”)
– Start (Alerts the numbering Sequence)
– Value (Changes the number sequence in the middle of an
ordered list)

Web Engineering 16
5. Lists in HTML…
• Definition Lists:
– Starting Tag<DL>
– Ending Tag </DL>
– Definition Term <DT>
– Definition Description <DD>

Web Engineering 17
Summary
• What is HTML?
• Basic Structure of HTML page
• Body tag attributes
• Text formatting tags
• Lists

Web Engineering 18
References
• Chapter 1, Beginning HTML, XHTML,CSS,
and JavaScript, by Jon Duckett, Wiley
Publishing; 2009, ISBN: 978-0-470-
54070-1.

Web Engineering 19

You might also like