EE103 Web Technology

EE103 Web Technology

Lecturer: Dr. M RajarajanEmail: [email protected]

Web: http://www.staff.city.ac.uk/~raj

BooksCourse Text Book ‘Sams Teach Yourself HTML and XHTML in 24

Hours’, Dick Oliver, ISBN 0-672-32076-2, 2002.Recommended Reading ‘Internetworking with TCP/IP Principles,

Protocols and Architectures’, Douglas E. Comer, ISBN 0-13-018380-6, 2000

‘Computer Networks and Internets with Internet Applications’, Douglas E. Comer, ISBN 0-13-091449-5, 2001

Syllabus

Week 1 Understanding HTML and XHTML A simple Web page Linking to other Web pages Publishing your HTML pages

Week 2 Text alignments, lists, and special

characters Advanced text formatting and links Creating HTML forms Creating your own web page graphics

Week 3 Putting graphics on a Web page Custom backgrounds and colours Creating animated graphics Page design and layout

Week 4 Graphics links and imagemaps Advanced layout with tables Using style sheets Embedding multimedia in Web

pages

Week 5 Interactive pages with Applets and

ActiveX Web page scripting for non-

programmers Setting pages in motion with Dynamic

HTML Multipage layout with frames

Week 6 Organizing and managing a web

site Helping people find your web

pages Using XML to describe data Planning for the future of HTML

Week 7 Email FTP Telnet Search Engines and Agents

Week 8 Internet Structure Layers

Week 9 Multimedia Technology Video streaming and casting

Week 10 Internet Security Fire walls, Proxy servers Cookies, Web Tracking Digital certificates and parental

control

What is HTML? HyperText Markup Language is a tag based

language that describes how documents are viewed and formatted through hypertext transfer protocol (http).

Documents can be designed to link to other documents, images, multimedia, etc. HTML is not a programming language, however, it is a structured document layout language. Hence, there is no logic being processed.

Early History?

1989 CERN - WWW project proposal

1992 - Laying the foundations

Early browsers were cumbersome to install

1993 NCSA Mosaic released, Web takes off

What can html do? Provides document layout Links files Links images Links to multimedia (sound and

video) Provides presentation to the

viewer

What you need to create and launch your web page? A Computer A text editor A browser (IE/Netscape) An Internet connection

You the web designer

HTML Specification HTML standards are upheld by the World Wide

Web Consortium (W3C). Set standards based on current technologies

that best suite the language. Ensures that software developers create similar software implementations to achieve similar functionality

HTML is in version 4.01 More information can be found at

http://www.w3.org. W3C also sets standards for XML, CSS, to

mention a few.

HTML in its basic form

<html><head><title>MY HOME PAGE</title></head><body>This is the body that will appear

in the viewer’s browser.</body></html>

XML

XML – eXtensible Markup Language Allows user defined tag names

( HTML uses predefined tags) XML is used to explain how the

data is organized

XHTML

XHTML – eXtensible Hypertext Markup Langauge This is an application of the XML HTML is the set of codes (that's the "markup language") that

a writer puts into a document to make it displayable on the World Wide Web.

XML is a structured set of rules for how one might define any kind of data to be shared on the Web

It's called an "extensible" markup language because anyone can invent a particular set of markup for a particular purpose and as long as everyone uses it (the writer and an application program at the receiver's end)

XHTML

XHTML requires strict adherence to coding rules. Notably, it requires that you use closing as well as opening elements (this is known as well-formed syntax) and that all elements be in lower case. HTML was much less rigorous about notation and browsers tended to be even more forgiving.

This means that XHTML files will tend to be "busier" than HTML. However, they won't necessarily be harder to read because rigor may force more order in coding. In addition, the major editing and file creation tools will probably lay out pages for easier readability.

XHTML

XHTML would seem to encourage a more structured and conceptual way of thinking about content and, combined with the style sheet, a more creative way of displaying it.

XHTML will make it easier for people to dream up and add new elements (and develop browsers or other applications that support them).

How Web Pages Work The user types the page they are

interested and the page appears on the screen

The advantage of the web pages over paper pages is that web pages are interactive. Web pages also have animations and sound

Web Browsers A web browser is a computer program

that interprets the components of an HTML file to collect, arrange, and display the parts of a web page

HTML file contains HTML commands, dynamic contents such as small scripts, Java Applets, and ActiveX controls

Browsers can also use ‘plug-ins’ to interpret audio and video

Example Web Pages

<html>

<head><title>The Toyologist</title></head>

<body background="toyback3.gif" bgcolor="magenta"

text="blue" link="purple" vlink="white" alink="magenta">

<img src="ologist4b.gif" align="right" />

<img src="toyolog7.gif" align="top" />

<ul>

<li>FREE

<a href="remind.htm">Birthday Remind-O-Matic</a></li>

<li>INSTANT

<a href="commend.htm">Toy Recommendation</a></li>

<li>CUSTOM

<a href="report.htm">E-Mail Toyology Report</a></li>

<li>CONSULT

<a href="consult.htm">with the Toyologist</a></li>

<li>BUY A TOY

<a href="order.htm">Online Order Form</a></b></li>

</ul>

<div align="center">

Brought to you by Once Upon a Time Toys in Stowe, Vermont, USA

</div></body></html>

HTML structure<html><head>

<title>Example HTML</title>

</head><body>Document

Content</body></html>

Being the document

Document head Document head

element Document Body

End document

ALL HTML documents contain this basic structure.

What Happens When You Surf the Web ?

When the user types an address such as http://www.city.ac.uk in the address window of the browser he/she acts as a client

The requested web address is sent to the directory server

The server translates the address into a machine readable form of addresses that can be used by the computers connected on the web.

The request is then routed to the computer that hosts the site

HTML tags HTML coded commands are called ‘tags’ because

they “tag” pieces of text and tell the Web browser what kind of text it is.

HTML contains, in most situations, an opening tag and a closing tag.

<html> - beginning tag </html> - ending tag Tags are defined by reserved names (<a>, <html>,

<p>, <br>, etc. Tags also contain attributes that defines the

display of text that is enclosed by the tags.

URL An address on the Web is known as a

URL e.g: http://www.w3.org

URL – Uniform Resource Locator

HTML Attributes

<p align=“left”> This text is aligned left</p>

<body bgcolor=“black” text=“white”>This text will appear white with a black background.</body>

<a href=http://www.city.ac.uk>City University</a>

align, bgcolor, text, and href are all attributes of their tags. They describe layout or positioning of text.

Editing web pages

Type the text with any word processor or text editor and save as an html file (with extension .html)

To insert graphics, animations, video, or interactive scripts on the page you need to type HTML commands that will point to the source destination

The media files stay separate from the text files even though they appear as if they are part of the same document

HTML Creaters

Microsoft FrontPage

Microsoft Visual InterDev

Macromedia Dreamweaver

Adobe GoLive

Many Faces of HTML

Most web pages will look the same on Netscape Navigator and IE

They will look the same on PC’s , UNIX and Macintoshes

Users of the same version of the same browser can alter the font size and background

Web browsers usually change the background to white when sending pages to a printer

How to view the source code of a web page ?

Click with the right mouse button Select View Source from the

pop-up menu. This is a great way to get an intuitive idea how HTML works and learn by other's examples.

HTML Content HTML can be written in any text

editor or WYSIWYG (What you see is what you get) editor.

HTML is simply text that contains tags.

HTML pages are static, they don’t change unless the designer alters the page.

Must have HTML tags <html> - indicates that this is a web page </html> - indicates that the end of the web

page <title> and </title> - Browser will display

any text within the tags at the very top of the browser window

<body> and </body> - Used to define the contents of the web page

“HTml” tags are not case sensitive XHTML standard require that all tag names

be in lower case

Paragraphs and Line Breaks

Browsers pays no attention to line endings or the number of spaces between words

When the text reaches the edge of the browser window, it automatically wraps down to the next line, no matter where the line breaks were in the original HTML file

Paragraphs and Line Breaks (cont..)

XHTML defines white spaces as a space character, tab character, carriage return or as a line feed character

<p> and </p> - Used to skip a line between paragraphs

<br> - Forces a line break within a paragraph ( does not need a closing tag) – in XHTML standard <br />

Comments

You can use any text editor or word processor to create HTML Web pages. Though you may eventually want to use an editor especially designed for HTML, for now I recommend you use the editor or word processor you're most familiar with. That way you won't have to learn a new software program at the same time you're starting to learn HTML.

Even a simple text editor like Windows Notepad will work just fine

Linking to other web pages

The main tag to define links is called the anchor tag - <a>

Define the address of the page to link to in quotes after “href=“

<a href=http://www.google.com>Click Me!</a>

href – ‘hypertext reference’ and is called an attribute of the <a> tag.

<html>

<head><title>You Aren't There</title></head>

<body>

<h1>Wonders of the World</h1>

Vacations aren't cheap. But who needs them anymore, with so

many live cameras connected to the World Wide Web? Pack a

picnic, and you can visit spacious pastures (complete with

scenic cows) in

<a href="http://www.accsyst.com/cow.html">Alloway, New Jersey</a> or, for the more scientifically minded, at

<a href="http://www.almaden.ibm.com/almaden/cattle/home_cow.htm">IBM

Almaden Research Center</a>. Or if it's scenery you're

after, adventure to <a href="http://www.inwap.com/backyard/">a

half-paved backyard in Fremont, California.</a></p>

</body>

</html>

Example web page with links

web page with links cont ..

To create a link from one page to another page on the same computer does not need any internet address

e.g < a href=“coursenotes.htm”>Click here to view the course notes. </a>

web page with links cont ..

Relative Addresses

A relative address describes the path from one Web page to another, instead of a full (or absolute) internet address

e.g <a href=“lions/african.html”>Learn About African Lions </a>

Note: The forward slash (/) is always used to separate directory folders in HTML

Summary

When you create a link from one page to another page on the same computer, it isn't necessary to specify a complete Internet address. If the two pages are in the same directory folder, you can simply use the name of the HTML file. Using just filenames instead of a complete Internet addresses saves you a lot of typing. And more importantly, the links between your pages will work properly no matter where the pages are located. You can test the links while the files are still right on your computer's hard drive. Then you can move them to a computer on the Internet, or to a CD-ROM or DVD disk, and all the links will still work correctly

Questions ??

Define the terms Internet, Web page and WWW.

The Internet is the “network of networks” that connects millions of computers around the world

Can you create Web pages with Microsoft Word or Wordperfect ?

Yes

How many files would you need to store on your computer to make a Web page with some text and two images ?

Three files. One for the text, and one for each graphics image

Questions?? What is HTML ?HyperText Markup Language is a tag based

language that describes how documents are viewed and formatted through hypertext transfer protocol (http).

What you need to create and launch your web page ?

A computer A text editor A browser An Internet Connection

Questions?? Who defines the HTML standards ? W3C What is the current version of HTML ? 4.01 What are the basic tags you need to

create a simple Web page? html head title body

Questions ? Define XML ? eXtensible Markup Language Why XML more advanced ? Allows user defined tag names XHTML requires opening and closing tags True / False XHTML will make harder for people to

add new elements True / False

Questions ? What does a HTML file contains ? HTML commands Scripts Java Applets ActiveX What is the <a> tag used for ? To link to another destination What tag is defined within the <head> and </head>

tag <title>

Questions ? When you type a Web address on the

browser window you act as a server True / False What does the server do ? Translates the address into a machine

readable form of addresses What is the name for the HTML coded

commands ? tags

Questions ? What is an ‘attribute’ ? Defines the display of text that is enclosed by the

tags Define URL ? Uniform Resource Locator Check the syntax of the code below:<body bgcolor=blue text=“red” </body> How to save a HTML file ? Use .html extension

Questions ? How to view the source code of a Web page ? Click the right mouse Select view source Simple HTML pages are dynamic – True/False HTML is case sensitive – True/False How to skip a line between paragraphs ? <p> and </p> How to force a line break <br>

Questions ? What is a relative address ? It describes the path from one

Web page to another, instead of a full Internet address

Setting up an Internet Web Site

To make the web page publicly accessible you need to put it on a web server

It is common practice to use web servers from internet service providers (ISP) to host your pages

You can use one company to host your web site and another separate company to access the Internet

Transferring pages to a web server

Web server computer sends web pages to people using the Hypertext Transfer Protocol (HTTP) information exchange standard

To upload a page to your web site an older communication standard called the File Transfer Protocol (FTP) is used

Transferring pages to a web server cont… (using FTP program)

ftp to the City University web server (e.g city.ac.uk)

Give your ‘username’ and ‘password’’

Select the ‘public_html’ directory on the right side

highlight the files on the left side of the screen and transfer them using the ‘----->’ to the right side

Exit from the ftp window

rlogin to ‘paddington’ or ‘euston’ and give your ‘username’ and ‘password’

Type ‘websetup’ on the UNIX command prompt

Publishing web pages on the server From the Public Access Windows PCs, choose Start ,

Programs, Internet Utilities, then Telnet to City

From a normal Windows build (with an internet connection), choose Start, then Run and type telnet unix.city.ac.uk

1.Login in to the Unix server using your Computing Services login name and password.

2.If you get a menu of options, type H for Publish HTML

documents, then say Y (yes) to all the questionsorIf you get a prompt, type websetup, then say Y (yes) to all the questions

HTML Common Tags

<html> <body> <a> - <a href=“”> <a name=“”><p><ul><li><table><frameset><frame><I><b>

Images

<html><head><title>Image Example</title></head><body><img src=“imageFile.gif”></body></html> Images are added with the img tag. Common

image file types are *.gif and *.jpg

Text Alignment, Lists, and Special Characters To align a paragraph to the right

margin, you use the align= “right” inside the <p> tag

If an attribute is left out then the system uses the default attribute

The word ‘align’ is called the ‘attribute’

Attributes control the functionality of the tag

Text Alignment, Lists, and Special Characters The attributes can be in lowercase or

upper case. But for compatibility with XHTML uses use lowercase. The new standard will also require quotation marks around attribute values

To set the alignment of more than one paragraph or heading at a time use the align attribute with the <div> or division tag

Special characters Special characters can be inserted using the look up table . These can be found online at

http://www.w3.org/tr/rechtml40/sgml/entities.html

For example the word café would look like this:

café or café

Most of the characters found in the world’s languages have been assigned numeric values in a coding system known as Unicode

e.g. first six lowercase characters of the Greek alphabet are assigned the numbers 945-950

Entities An entity is a sequence of characters that tells a

browser to substitute a character for the sequence

They always contain an ampersand as a prefix and a semicolon as the suffix

The XHTML defining documents include the definitions of many entities. These defintions are found in documents that are known as Document Type Definition or DTD documents

For more details http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent

Types of HTML Lists The bulleted list is called an unordered list - <ul>

Bullets appear at each <li> instead of numbers

The numbered list at the top is called an ordered list - <ol>

Numbers and line breaks appear automatically at each <li>, and the entire list is intended

The list of terms and their meaning is called a definition list - <dl>

The <dt> tag goes in front of each term to be defined, with a <dd> tag in front of each definition

Types of HTML Lists

Advanced Text Formatting and Links

For boldface text, use the <b> at the beginning and the </b> at the end sis the text

For italic use the <I> tag and the </I> tag

To make something bold and italic use the <b><i> and </i></b> tags

Can use italics in headings but boldface won’t show in headings as they are already bold

Example of <div> tag

Typeface

The latest version of Netscape and IE font control

The <font face> attribute enables you to specify the actual typeface that should be used to display text

e.g: <font face = “lucida sans unicode, arial, helvetical”>

It starts with a bang. Then everything industrialists revolt this time. Japan gets nuked and takes over the world economy, the Berlin wall and Soviets fall, and the United States all sue Microsoft over the Internet. The end.

Linking your email address into a web page

Using the <a> tag you can link to your email address

Using this method the readers of your web page can talk back to you

E.g:

<a href=mailto:[email protected]> Send any comments</a>

When someone clicks ‘send any comments’ a mail window will appear in which the message can be typed and sent

Linking your email address into a web page examples

Emmanuel Kant, President [email protected]

Martin Heidegger, Secretary [email protected]

Georg Wilhelm Friedrick Hegel, Senior Officer [email protected]

The email address from the link is entered automatically, and the user can simply click the mail button to send the message

Font size and colour

The font ‘size’ and ‘colour’ attributes give control over the appearance of the text

e.g: <font size=5 colour=“red”>This text will be big and red.</font>

The ‘size’ attribute can take any value from 1 to 7 ( 3 being the default)

The colour attribute can take any of the following colours: Black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon. Purple, navy, olive, silver, or teal

HTML tags that add special formatting to text

<small> - Small text

<big> - Big small text

<sup> - Superscript small

<sub> Subscript small

<strike> - Strikethrough Small

<u> - Undeline small

<strong> - Strong text

<pre> - Monospaced smallfont; preserves spaces and line breaks

Using named anchors

<html><head><title>AlphabeticalShakespeare</title></head>

<body>

<a name="top"></a>

<h2>First Lines of Every Shakespearean Sonnet</h2>

<p><a href="#top">Return to Index.</a></p>

<hr />

</body></html>

Note: The # symbol means that the word top refers to a named anchor point within the current document, rather than to a separate page

Sample code for Forms

<html><head><title>FREE!</title></head>

<body>

<h1>Free Electronic Junk Mail!</h1>

enter your e-mail address below and click on the <i>SignUP!</i> button.

<form method="post" action="/cgi-bin/cgiemail/mail2.txt"><input name="success" type="hidden"

value="http://24hourHTMLcafe.com/hour8/thanks.htm" />

<input type="text" name="anotherone" size="25" />

<input type="image" src="signup.gif" border="0" align="top" />

</form>

</body></html>

HTML Help

View the lecture slides@ http://www.staff.city.ac.uk/~raj

For complete spec, http://www.w3c.org

Assignment 1 Create a simple web page with a standard text editor

(Notepad/WordPad) Remember to save in .htm or .html format Post page on the university server. If you are stuck check my links @:http://www.staff.city.ac.uk/~raj/webtec.html Check the WebTec coursework at**:http://www.staff.city.ac.uk/~raj/ee301CW.htm

**10% of the Course Work mark is for attendance