Web Engineering Lec01-02 - Introduction to Web.pptx

HTML
Head part is to communicate information with other web pages/search
engines etc. In short, we can say that head part is to communicate with
machines.
Body part is to communicate information with users/humans.
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>

HEAD ELEMENT
 HEAD tag always keep behind the HTML tag.
 Head part is to communicate information with other web
pages/search engines etc. In short, we can say that head
part is to communicate with machines.
 Things are going in the HEAD section, consider to be
META data content model these includes
 TITLE,
 META,
 LINK, STYLE, SCRIPT.

EXAMPLE
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8” />
<link rel=“stylesheet” type=“text/css” href=“main.css” /> // To
link stylesheet
</head>
<body>
This is my first homepage.
</body>
</html> 4

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

LINK ELEMENT
 LINK element is used to have relationship with other
documents. LINK tag is mostly used to add external style
sheet
 Example:
<head>
<link rel=“stylesheet” type=“text/css”
href=“main.css” />
<script src="myscripts.js“ rel=“javascript”
type=“javascript/text”> </script>
</head>
6

STYLE ELEMENT
 STYLE element is used to embed style sheet on a same web
page.
 Example:
<head>
<style>
p {
color:black;
}
</style>
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
</head>
7

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

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.
 <meta name=“keywords” content=“Amazing, New, Bill,
Page Web site, C++ Tutorials bla bla” />
 <meta name=“description” content=“Small paragraph
with 250 words about introduction of the page.” />
9

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

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.
 <b> Bold </b>
 <i> Italic </i>
 <u> Underline </u>
 This is a <sub> subscript </sub>
 This is a <sup> superscript </sup>
11

HIGHLIGHTING TEXT
 HTML provides new inline element called MARK to
highlighting text.
 Example:
<p>
The attackers set about acquiring the control over the
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>
12

HEADING TAGS
 Heading elements are available at six level. Heading is
block level element.
 <h1> Heading 1 </h1>
13

HYPER LINK
 In HTML, you create a hyper link with Anchor tag.
 Example:
<body>
<p>
Here is a link to
<a href=“http://www.uol.edu.pk/” target=“_blank” title
=“SEO friendly keyword for link” >my home page</a>.
</p>
</body>

IMAGE TAG
 It is very common to use images as links.
 Example:
<p>
<img src="uol.png" width="100px"
height="100px">
</p>

USING IMAGE AS LINK
 It is very common to use images as links.
 Example:
<p>
Here is a link to <a href=“”><img src=“abc.png"
width="100px" height="100px">
</a>.
</p>
16

HTTP, WEB SERVER, WEB BROWSER
 Http – Hypertext transport protocol
 Web Browser - A web browser (commonly referred to as
a browser) is a software application for retrieving,
presenting, and traversing information resources on
the World Wide Web for example IE, Firefox, Chrome etc.
 Web Server - Web servers are computers that deliver
(serves up) Web pages. Every Web server has an IP
address and possibly a domain name. For example, if you
enter the URL http://www.webopedia.com/index.html in your
browser, this sends a request to the Web server whose
domain name is webopedia.com.

ISP, DNS, FTP
 ISP - An Internet service provider (ISP) is an
organization that provides services for accessing,
using, or participating in the Internet.
 DNS - (Domain Name System) The Internet's
system for converting alphabetic names into
numeric IP addresses. For example, when a Web
address (URL) is typed into a browser, DNS servers
return the IP address of the Web server associated
with that name.
 FTP - The File Transfer Protocol (FTP) is a
standard network protocol used to transfer
computer files between a client and server on a
computer network.

URI, URN, URL
 URI - Uniform Resource Identifier
 URN - Uniform Resource Name
 URL - Uniform Resource Locator

Web Engineering Lec01-02 - Introduction to Web.pptx

Recommended

Recommended

More Related Content

Similar to Web Engineering Lec01-02 - Introduction to Web.pptx

Similar to Web Engineering Lec01-02 - Introduction to Web.pptx (20)

More from Javaid Iqbal

More from Javaid Iqbal (7)

Recently uploaded

Recently uploaded (20)

Web Engineering Lec01-02 - Introduction to Web.pptx