Scribd
Upload
35 views

Web Application Engineering: Lecture 2 - HTML Shahbaz Ahmad

HTML (Hypertext Markup Language) is a markup language used to define the structure and layout of web pages. It uses tags to mark up text, images, and other content that is displayed in a web browser. Some key points covered in the document include: - HTML documents contain tags like <html> and <body> to define the overall structure. The <head> contains meta information while the <body> contains visible page content. - Text formatting can be controlled using tags like <p> for paragraphs, <br> for line breaks, and <h1>-<h6> for headings of different sizes. - Attributes can be added to tags to further control formatting and layout,

Uploaded by

Mariam Chuhdry
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
35 views

Web Application Engineering: Lecture 2 - HTML Shahbaz Ahmad

HTML (Hypertext Markup Language) is a markup language used to define the structure and layout of web pages. It uses tags to mark up text, images, and other content that is displayed in a web browser. Some key points covered in the document include: - HTML documents contain tags like <html> and <body> to define the overall structure. The <head> contains meta information while the <body> contains visible page content. - Text formatting can be controlled using tags like <p> for paragraphs, <br> for line breaks, and <h1>-<h6> for headings of different sizes. - Attributes can be added to tags to further control formatting and layout,

Uploaded by

Mariam Chuhdry
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/ 22

Web Application Engineering

Lecture 2 – HTML

Shahbaz Ahmad
HTML (Hyper Text Markup Language)

• A markup language for describing web pages using tags


• The tags describe document content
• HTML documents are text documents that contain:
– formatting instructions, called tags
– the text that is to be displayed on a Web page
– HTML stands for Hyper text markup language. It is a formatting language used to
develop web page. It is not a programming language. It is used to define text, image
etc in web page. It uses tags to specify how the content of web page will be
displayed.

Markup Language
• It is a set of markup tags or set of characters or symbols
• Define a document’s logical structure or how a document
should be printed or displayed
Lecture 2 - Web Server, URI and HTML
HTML Concepts
HTML Documents
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

HyperText 
• A method by which you move around on the web - by clicking on
special text called hyperlinks which bring you to the next page.
• You can go to any place on the Internet whenever you want by clicking
on links
• There is no set order to do things in.

Markup 
• It is what HTML tags do to the text inside them. They mark it as a
certain type of text .

Lecture 2 - Web Server, URI and HTML


HTML Tags
• HTML markup tags are usually called HTML tags

• HTML tags are keywords (tag names) surrounded by angle brackets like <html>

• HTML tags range from formatting commands to controls that allow user input

• HTML tags normally come in pairs like <b> and </b>


– 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, with a forward slash before the tag
name
– Start and end tags are also called opening tags and closing tags

• Example
<tagname> content </tagname>

Lecture 2 - Web Server, URI and HTML


HTML ELEMENTS
• "HTML tags" and "HTML elements" are often used to
describe the same thing.

• But strictly speaking, an HTML element is everything


between the start tag and the end tag, including the
tags

• Example:
<p>This is a paragraph.</p>

Lecture 2 - Web Server, URI and HTML


HTML vs XHTML
HTML
• HTML is an application of SGML (Standard Generalized Markup Language)
• Allows an author to omit certain tags and use attribute minimization

XHTML
• The Extensible HyperText Markup Language, or XHTML, is an application of XML
(Extensible Markup Language)
• It doesn’t permit the omission of any tags or the use of attribute minimization

• Basically, XHTML is HTML (all the html tags are found in XHTML) that follows the
rules of XML (because it is a family of XML).
• For example, while <br> is valid in HTML, it would be required to write <br /> in
XHTML.

Lecture 2 - Web Server, URI and HTML


XHTML

All tags must be in lower case

All documents must have a doctype

All documents must be properly formed

All tags must be closed

All attributes must be added properly

Attributes cannot be shortened

All tags must be properly nested

Lecture 2 - Web Server, URI and HTML


The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration tells browser that this is an
HTML page.
• There are many different documents on the web, and a
browser can only display an HTML page 100% correctly if it
knows the HTML type and version used.
• HTML Example:
<!DOCTYPE html>

Lecture 2 - Web Server, URI and HTML


Basic HTML Syntax
• All HTML documents begin with <html> and end with </html>

• Two other important HTML tags are the <head> tag and the
<body> tag

• The <head> tag contains information that is used by the Web


browser, and you place it at the start of an HTML document,
after the opening <html> tag
• The <head> tag pair and the tags it contains are referred to as
the document head
• Following the document head is the <body> tag, which contains
the document body

Lecture 2 - Web Server, URI and HTML


Head Tags

Lecture 2 - Web Server, URI and HTML


Head Tags
Title
• The <title> element is required in all HTML/XHTML documents.
• The <title> element:
– Defines a title in the browser toolbar
– Provides a title for the page when it is added to favorites
– Displays a title for the page in search-engine results

Lecture 2 - Web Server, URI and HTML


Head Tags
• The <base> tag specifies the base URL/target for all relative
URLs in a page:

Link
• Link include a information e.g stylesheet in a pag
• <link href="style.css" rel="stylesheet" type="text/css"
media="all">

Lecture 2 - Web Server, URI and HTML


Head Tags
META
• Another tag that can be added in the head is a <META> tag. It is used to help
search engines index a page. There are several different meta names.
• The author meta:
<META NAME="author“ CONTENT="Nongjian Zhou">
Style
• Contains style information for a document, or a part of document. The
specific style information is contained inside of this element, usually in the
CSS. E.g
<style type="text/css"> body { color:red; } </style>
Script
• <script language="javascript" type="text/javascript"> function myFunction()
• { alert('Hello world'); }
• </script>

Lecture 2 - Web Server, URI and HTML


HTML Attributes
• You use various parameters, called attributes,
to configure many HTML tags
• You place an attribute before the closing
bracket of the starting tag, and separate it
from the tag name or other attributes with a
space

Lecture 2 - Web Server, URI and HTML


Basic HTML Syntax
Text layout
<html> •the BODY can contain multiple lines
<!-- page02.html -->
<!-- Demo web page --> of text
<head>
<title>Title for Page</title> – text layout and spacing is pretty much
</head> ignored by the browser
<body>
This is a whole lot of text that – every sequence of whitespace is
goes on and on and
on interpreted as a single space
and

on – browser automatically wraps the text to fit


. the window size
.
.
</body>  can layout text in an HTML document
</html> for readability, will not affect how it is
viewed

Lecture 2 - Web Server, URI and HTML


Overriding default layouts
<html>
<!-- page03.html -->
<!-- Demo web page --> •for the most part, layout of the text
must be left to the browser
<head>
<title>Title for Page</title>
</HEAD> •can override some text layout
<body>
<p> – can cause a line break using the <br/> tag
This is a paragraph of text<br/>
made up of two lines. (no closing tag)
</p>

<p>
– can specify a new paragraph (starts on a
This is another paragraph with a
&nbsp; GAP &nbsp; between new line, preceded by a blank line) using
some of the words. <p>…</p>
</p>

<p> – can force a space character using the


&nbsp;&nbsp; This paragraph is<br/>
indented on the first line<br/> symbol for a non-breaking space: &nbsp;
but not on subsequent lines.
</p>
</body>

</html> Lecture 2 - Web Server, URI and HTML


Separating blocks of text
<html>
<!-- page04.html -->
•can specify headings for
<!-- Demo web page --> paragraphs or blocks of text
<head>
<title>Title for Page</title> – <h1>…</h1> tags produce a large, bold
</head>
heading
<body> – <h2>…</h2> tags produce a slightly
<h1>Major heading 1</h1>
<p>
smaller heading
Here is some text. • ...
</p> – <h6>…</h6> tags produce a tiny heading
<h2>Subheading</h2>
<p>
Here is some subtext.
</p>
•can insert a horizontal rule to
divide sections
<hr/>
– <hr/> draws line across window
<h1>Major heading 2</h1>
<p> – <hr width="50%" /> sets width
Here is some more text. – <hr size=10 /> sets thickness
</p>
</body>

</html> Lecture 2 - Web Server, URI and HTML


Text styles
<html> •can specify styles for fonts
<!-- page06.html -->
<!-- Demo web page -->
– <b>… </b> specify bold
<head>
<title>Title for Page</title>
</head> – <i>… </i> specify italics

<body>
– <u>… </u> specify underlined
<p>
Text can be emphasized using
<b>bold</b>, <i>italics</i>, or even – <tt>… </tt> specify typewriter-like (fixed-
<big>resizing</big>. <br/> width) font
<u>Underlining</u> text is not
generally recommended since it looks
too much a like a hyperlink. <br/>
The typewriter font is good for
displaying code: – <big>… </big> increase the size of the font
<small><tt>sum = sum + i;</tt></small>
</p>
</body> – <small>… </small> decrease the size of the
font
</html>

Lecture 2 - Web Server, URI and HTML


Note: if elements are nested, the order of
Lists
<html>
<!-- page09.html --> •there are 3 different types of list
<head>
elements
<title>Title for Page</title>
</head> specifies an ordered list (using
– <ol>…</ol>

<body> numbers or letters to label each list


<p> item)
<ol> •<li> identifies each list item
<li>First thing.
<li>Second thing. •can set type of ordering, start index
<li>Third thing.
</ol>
</p>
– <ul>…</ul>specifies unordered list (using a
<p>
<dl>
bullet for each)
•<li> identifies each list item
<dt>HTML
<dd>HyperText Markup Language
<dt>HTTP
<dd>HyperText Transfer Protocol – <dl>…</dl> specifies a definition list
</dl> •<dt> identifies each term
</p> •<dd> identifies its definition
</body>

</html>
Lecture 2 - Web Server, URI and HTML
Hyperlinks
<html> •perhaps the most important
<!-- page10.html -->
HTML element is the
<head>
<title>Title for Page</title>
hyperlink, or ANCHOR
</head>
– <a href="URL">…</a>
<body>
<p>
<a href="http://www.comsats.edu.pk"> •where URL is the Web address of the page to
COMSATS Institute of Information Technology</a> be displayed when the user clicks on the link
<br>
<a href="page09.html" target="_blank">
Open page09 in a new window</a> •if the page is accessed over the Web, must start
</p> with http://
</body>

</html> •if not there, the browser will assume it is the


name of a local file
– <a href="URL" target="_blank">…</a>

•causes the page to be loaded in a new window

Lecture 2 - Web Server, URI and HTML


Hyperlinks (cont.)
<html>
<!-- page11.html -->
•for long documents, you can even
have links to other locations in that
<head>
<title>Title for Page</title> document
</head>

<body>
–<a name="ident">…</a>
<p align="center">
[ <a href="#HTML">HTML</a> |
•where ident is a variable for identifying this
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> | location
<a href="#TCP">TCP</a> ]
</p> – <a href="#ident">…</a>
<p>
Computer acronyms:
<dl> •will then jump to that location within the file
<a name="HTML"></a><dt>HTML
<dd>HyperText Markup Language
<a name="HTTP"></a><dt>HTTP – <a href="URL#ident">…</a>
<dd>HyperText Transfer Protocol
<a name="IP"></a><dt>IP
<dd>Internet Protocol •can jump into the middle of another file just as
<a name="TCP"></a><dt>TCP easily
<dd>Transfer Control Protocol
</p>
</body>
</html> Lecture 2 - Web Server, URI and HTML

You might also like