Web Systems and Technology Week # 1: University of Gujrat Sialkot Campus PPP

WEB SYSTEMS AND TECHNOLOGY
WEEK # 1
UNIVERSITY OF GUJRAT SIALKOT CAMPUS PPP

FAIZAN UL MUSTAFA
faizan.mustafa@uogsialkot.edu.pk
WEB-Page
 Hypertext document connected to the World

Wide Web. *Hypertext is the text which which contains links to other
texts.
WEB-Site
 Combination of two or more web pages

connected to Internet is called a WEBSITE.
STATICS WEBSITES
DYNAMICS WEBSITES
Then What is WWW?
World Wide Web (Definition)
 An information system on the Internet which allows

documents to be connected to other documents by
hypertext links, enabling the user to search for
information by moving from one document to
another.
More on WWW….!
 Sir Tim Berners-Lee invented the World Wide

Web in 1989.
Conti……!!!
 The first web browser was invented in
1990 by Tim Berners-Lee. It was called
Worldwide Web (no spaces) and was
later renamed Nexus. In 1993, Marc
Andreessen created a browser that was
easy to use and install with the release
of Mosaic (later Netscape).
Why to learn WEB?
 Advantages
 Time
 Localization (Local Info to community level)
 Universality
 Search
 Cheap
Some Basic Terminologies (Revised)
 Web server: a system on the internet containg one or
more web site
 Web site: a collection of one or more web pages
 Web pages: single disk file with a single file name
 Home pages: first page in website
Think about the followings before working your
Web pages.
 Think about the sort of information(content) you want to put
on the Web.
 Set the goals for the Web site.
 Organize your content into main topics.
 Come up with a general structure for pages and topics.
What is HTML?
 Telling the browser what to do, and what props to use.

 A serises of tags that are integrated into a text document.
Tags are ;
 surrounded with angle brackets like this
 or .
 Most tags come in pairs
 exceptions: , , <li> tags …
 The first tag turns the action on, and the second turns it
off.
 The second tag(off switch) starts with a forward slash.
 For example , text 
 can embedded, for instance, to do this:

 <HEAD><TITLE> Your text </HEAD></TITLE> it won't work.
 The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
 not case sensitivity.
 Many tags have attributes.
 For example, centers the paragraph following it.
 Some browsers don't support the some tags and some

attributes.
Basic HTML Document Format
<HTML> See what it

<HEAD> looks like:
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the

document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open Netscape (or any browser) Off-Line
4.Switch to Netscape
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any other
Web page in Netscape.
7.You may now switch back and forth between the
Source and the HTML Document
 switch to Notepad with the Document Source
 make changes
 save the document again
 switch back to Netscape
 click on RELOAD and view the new HTML
Document
 switch to Notepad with the Document Source......
Tags in head
 <HEAD>...</HEAD>-- contains information about the
document
 <TITLE>...</TITLE>-- puts text on the browser's title
bar.
Tags in Body
 Let's talk Text

 Heading: <H1> </H1>
 Center:<Center> </Center>
 Line Break , 
 Phrase Markups: ,
 Create a List
 Unordered list : <UL><li>
 Ordered list: <OL><li>
 Nested
 Add Images
 Use <IMG SRC=imagefilename> tags

 How to specify Relative pathnames
 Attributes of IMG tag

-width,height
-Alt
-Align
-<Img src=my.gif width=50 height=50 align=right
alt=“My image”>
 Add some Link
 Use <A href=filename|URL></a>tags

 How to specify Relative pathnames
 Kinds of URLs
-http://www.women.or.kr
- ftp://ftp.foo.com/home/foo
- gopher://gopher.myhost.com/
- news://news.nuri.net
- mailto:skrhee@women.or.kr
 How to make colors changes?
 Hexadecimal number :
 Color names : 
 Changing the Background color
<BODY BGCOLOR=#19378a>
 Changing Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
 Spot color
WENT'99
 Image Background
<BODY BACKGROUND=bgimg.gif >

Web Systems and Technology Week # 1: University of Gujrat Sialkot Campus PPP

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Systems and Technology Week # 1: University of Gujrat Sialkot Campus PPP

Загружено:

Авторское право:

Доступные форматы

WEB SYSTEMS AND TECHNOLOGY

UNIVERSITY OF GUJRAT SIALKOT CAMPUS PPP

 Hypertext document connected to the World

 Combination of two or more web pages

 An information system on the Internet which allows

 Sir Tim Berners-Lee invented the World Wide

 Telling the browser what to do, and what props to use.

 can embedded, for instance, to do this:

 Some browsers don't support the some tags and some

<HTML> See what it

1.Use an text editor such as Editpad to write the

 Let's talk Text

 Use <IMG SRC=imagefilename> tags

 Attributes of IMG tag

 Use <A href=filename|URL></a>tags

Вам также может понравиться