Scribd
Upload
2 views

lecture01_wt_introduction_to_html

This document provides an overview of HTML, including its definition, structure, and key components such as tags, attributes, and formatting options. It covers the basic structure of an HTML page, the use of the BODY tag, text formatting tags, and different types of lists in HTML. Additionally, it highlights the evolution of HTML standards and the differences between HTML 4.01 and HTML5.

Uploaded by

horizonmart786
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

lecture01_wt_introduction_to_html

This document provides an overview of HTML, including its definition, structure, and key components such as tags, attributes, and formatting options. It covers the basic structure of an HTML page, the use of the BODY tag, text formatting tags, and different types of lists in HTML. Additionally, it highlights the evolution of HTML standards and the differences between HTML 4.01 and HTML5.

Uploaded by

horizonmart786
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

1

Web Engineering
Lecture 06

Modeling web applications

2
Introduction to HTML

3
Summary of Previous Lecture
• Software system architecture
• Specifics of web application architecture
• Layered web architecture
– 2-layered architecture
– 3-layered architecture
– N-layered architecture

4
Outline
• Introduction to HTML
• Basic Structure of a HTML page
• Text formatting tags in HTML
• Lists in HTML

5
1. Introduction to HTML…
• HTML – Hyper-Text Markup Language – The
Language of Web Pages on the World Wide
Web
• 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

6
1. Introduction to HTML…
• It is called markup language because it
contains a set of markup tags
• HTML is a text formatting language
• HTML standards are developed under the
authority of the World Wide Web Consortium
(W3C), headed by Tim Lee
– http://www.w3c.org

7
1. Introduction to HTML…
• It defines the structure of webpages and
determines how data is displayed online
• It has a set of special instructions that can be
added in the text to add formatting and
linking information
• It is directly interpreted by the browser
• HTML is described by different HTML tags
• Each HTML tag describes different document
content

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

10
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>
11
1. Introduction to HTML…
• HTML Tags:
• HTML tags normally come in pairs like <p> and
</p>
• The first tag in a pair is the start tag, the
second tag is the end tag
• The end tag is written like the start tag, but
with a slash before the tag name
• Paired Tags : <HTML> </HTML>
• Singular Tags: <BR>
12
1. Introduction to HTML…
• HTML is not case-sensitive
• Blank and new lines are ignored
• Comment can be added as
<!-- comments -- >
• HTML files have .html extension

13
2. Structure of HTML Page

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

• <TITLE> shows the title of the webpage

15
2. Structure of HTML Page
. Body: indicate the start and end of main body
of textual information
<BODY>
</BODY>
• Body is the part of html page which is
displayed by web browser.

16
2. Structure of HTML Page…
• Example - First HTML page:

17
2. Structure of HTML Page…
• Example Output- First HTML page:

18
2. Structure of HTML Page
• <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration helps the
browser to display a web page correctly
depending on doctype.
• To display a document correctly, the
browser must know both type and version.
• The doctype declaration is not case
sensitive.
19
2. Structure of HTML Page
• Common DOCTYPE Declaration
• HTML5
<!DOCTYPE html>
• HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> 20
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>

21
3. The BODY Tag

Contents of the body

Text=“red”
bgcolor=“pink”

22
4. Formatting text

23
Formatting Text…...

24
4. Formatting text…
• <P>….. </p>: starts a new paragraph
Attributes of paragraph (values)
• Align (left, right, center and justify)
• <BR>: gives an one line break. After this, tag start from
next line
• Text Styles:
• <B> …. </B> , <I> …. </I>, <U> …. </U>
• <HR>: draws horizontal line
Attibutes
• ALIGN (LEFT,CENTER,RIGHT)
• SIZE=2
• WIDTH=100%
25
• color
4. Formatting text…
• Headings (6 sizes)
• <H1> ….. </H1>
• <H2> ….. </H2>
• <H3> ….. </H3>
• <H4> ….. </H4>
• <H5> ….. </H5>
• <H6> ….. </H6>

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

27
4. Formatting text…
• <pre>…… </pre>:
– Spaces and line breaks are supported
– Text is displayed in mono-spaced format
– Text is shown in same format as written in editor
Without <pre>… </pre> With <pre>… </pre>

28
4. Formatting text…

• <Strike>……</Strike>:
– DEL is also used in modern browsers
• <SUB>……</SUB>:
• <SUP>……</SUP>:

29
4. Formatting text…

30
4. Formatting text…

31
4. Formatting text…
• Special Characters:
– Non-breaking space: &nbsp;
– Copyright: &copy; ©
– Registration mark: &reg; ®
– Fraction one qtr: &frac14; ¼
– Greater-than sign: &gt; >
– Less-than sign: &lt; <
– Trademark sign: &trade; ™

32
4. Formatting text…

33
4. Formatting text…

34
5. Lists in HTML
• Two type of list

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

35
5. Lists in HTML
• Un-ordered Lists Example:

36
5. Lists in HTML
• Ordered Lists Example:

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

38
5. Lists in HTML…
• Differences Between HTML 4.01 and HTML5

• In HTML 4.01, the <dl> tag defines a definition list.


• In HTML 5, the <dl> tag defines a description list.

39
5. Lists in HTML…
• Definition Lists Example:

40
5. Lists in HTML…
• Nested List:
• We can nest multiple list to make sub-lists

41
5. Lists in HTML…
• Nested List:
• We can nest multiple list to make sub-list

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

43
THANK YOU

44

You might also like