Web Engineering

Web Engineering
Lecture 1
HTML
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
HEAD ELEMENT
The HEAD section of an HTML document is like a front

matter of a book.
HEAD tag always keep behind the HTML tag.
Things are going in the HEAD section, consider to be
META data content model these includes TITLE,
META, LINK, STYLE, SCRIPT and BASE elements.
EXAMPLE
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8 />
<link rel=stylesheet type=text/css href=main.css />
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
TITLE ELEMENT
The TITLE element is used for setting title of a document.
Title element is required in HTML even its empty. There

may be only one TITLE element in a web page.
Example:
<head>
</head>
LINK ELEMENT
LINK element is used to have relationship with other

documents. LINK tag is used to add external style sheet.
Link is also used to place a small image at title portion of
the web page.
Example:
<head>
<link href="scissors-small.png" type="image/gif"
</head>
rel="shortcut icon" />

6
STYLE ELEMENT
STYLE element is used to embed style sheet on a same web
page.
Example:
<head>
<style>
p{
line-height: 1.2;
}
p.first:first-line {
font-variant: small-caps;
}
</style>
7
</head>
META TAG
META tag is used to describe various aspects of your

HTML page. META means its data about data. It
helps search engine to categorize your page.
The data that can not be display on web page, but can
be used by various process. Like web server deliver it
or user web browsers.
EXAMPLE
<head>
<meta charset=UTF-8 />
<meta http-equiv=refresh content=5;
url=http://sites.google.com/site/cs1113webprog />
</head>
It describes the character being used by this document. So
browser can display properly.
Second META tag will wait for 5 seconds and then redirect
9
to this course web page.
SEARCH ENGINE OPTIMIZATION
The concept of search engine optimization is

interesting widely misunderstood subject.
There are people who tell you that they can increase
search ranking of your page. So your page show higher
in search engine listing. But most part this is not true.
Any technique that can effectively submit search
engine today will not work tomorrow because the
engineers at search engine company update their
algorithms to defeat those technique.
10
EXAMPLE
<meta name=keywords content=Amazing, New, Bill,

Page Web site, C++ Tutorials bla bla />
<meta name=description content=Amazing, New, Bill,
Page Web site, C++ Tutorials bla bla />
Keywords meta tag is originally designed to help the

search engine by allowing content authors to categorize
their contents.
But this feature is abused so badly, that search engine
have stopped using it. So its largely ignored today by
major search engines.
11
EXAMPLE
<title>
Bills Amazing New Page!
-*-*-*Amazing, New, Bill, Page, Web site,
C++ Tutorials, blah blah blah
</title>
So, SEO focus start abusing the title tag by putting the
same garbage in the title tag. Now search engine
algorithms of course ignore this too.
12
The goal of search engine is to provide useful results to

users. They want to categorize your page correctly and
want to rank it according to its actual popularity.
The HTML5 have good set of tags for making it easier
for search engines to read and understand your page.
13
LINE BREAK TAG
Normally your browser will decide, where to break the

line and paragraphs. You may force a line to break using
the <BR> tag.
Example:
<p>
The attackers set about acquiring the control over the
computers to be used in the attack. <br /> By scanning
using Sscan SW, a large numbers of computers attached
to the Internet. Once a computer with a
weak security scheme is identified, the attackers try a
break-in.
</p>
14
FONT ELEMENT
Sometimes you tell browser to show text something in

a different way. Can of course use CSS for this often as
best choice.
HTML does however provide few simple elements, case
where you need something just simple.
15
<b> Bold </b>

<i> Italic </i>
<u> Underline </u>
This is a <sub> subscript </sub>
This is a <sup> superscript </sup>
This is a <small> small </small>
<s> Strikeout </s>
<del> Delete </del>
16
HIGHLIGHTING TEXT
HTML provides new inline element called MARK to

highlighting text.
Example:
<p>
computers to be used in the attack. By
<mark>scanning using Sscan SW,</mark> a large
numbers of computers attached to the Internet. Once a
computer with a weak security scheme is identified,
the attackers try a break-in.
</p>
17
EXAMPLE
Example:
<p>
computers to be used in the attack.
<mark style=background-color: green; color: white;>
By scanning using Sscan SW,
</mark>
a large numbers of computers attached to the
Internet. Once a computer with a weak security
scheme is identified, the attackers try a break-in.
</p>
18
HEADING TAGS
Heading elements are available at six level. Heading is

block level element.
<h1> Heading 1 </h1>

19
QUOTATIONS AND QUOTE MARKS
Example:
<blockquote>
computers to be used in the attack.
"By scanning using 'Sscan'
SW", a large numbers of computers attached to
the Internet. Once a computer with a weak security
scheme is identified, the attackers try a break-in.
</blockquote>
20
PRE-FORMATTED TEXT
PRE tag is used for pre-formatting text and it is useful to display text
in its natural format.
Example:
<pre>
This text is
preformatted
and should be
displayed in a
particular way
and shape without any
reformatting
by
the
browser.
21
</pre>
EXAMPLE
Example:
<pre>
int main (int argc, char ** argv ) {
printf("Hello World!\n");
return 0;
}
</pre>
22
EXAMPLE
Example:
<pre>
<html >
<head >
<meta charset="UTF-8" />
<title >
HTML preformatted Text
</title>
</head>
<body>
<h1> HTML Preformatted Text </h1>
</body >
</html >
</pre>
23

Web Engineering

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Engineering

Uploaded by

Copyright:

Available Formats

Web Engineering

The HEAD section of an HTML document is like a front

The TITLE element is used for setting title of a document.

Title element is required in HTML even its empty. There

LINK element is used to have relationship with other

rel="shortcut icon" />

META tag is used to describe various aspects of your

SEARCH ENGINE OPTIMIZATION

The concept of search engine optimization is

<meta name=keywords content=Amazing, New, Bill,

Keywords meta tag is originally designed to help the

The goal of search engine is to provide useful results to

LINE BREAK TAG

Normally your browser will decide, where to break the

Sometimes you tell browser to show text something in

<b> Bold </b>

HTML provides new inline element called MARK to

Heading elements are available at six level. Heading is

<h1> Heading 1 </h1>

QUOTATIONS AND QUOTE MARKS

You might also like