EE103 Web Technology

1
EE103 Web Technology

• Lecturer Dr. M Rajarajan
• Email R.Muttukrishnan_at_city.ac.uk
• Web http//www.staff.city.ac.uk/raj

2
Books

• Course 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

3
Syllabus

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

4

• Week 2
• Text alignments, lists, and special characters
• Advanced text formatting and links
• Creating HTML forms
• Creating your own web page graphics

5

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

6

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

7

• 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

8

• 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

9

• Week 7
• Email
• FTP
• Telnet
• Search Engines and Agents

10

• Week 8
• Internet Structure
• Layers
• Week 9
• Multimedia Technology
• Video streaming and casting

11

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

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

13
Early History?

• 1989 CERN - WWW project proposal
• 1992 - Laying the foundations
• Early browsers were cumbersome to install
• 1993 NCSA Mosaic released, Web takes off

14
What can html do?

• Provides document layout
• Links files
• Links images
• Links to multimedia (sound and video)
• Provides presentation to the viewer

15
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

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

17
HTML in its basic form

• MY HOME PAGE
• This is the body that will appear in the
  viewers browser.

18
XML

• XML eXtensible Markup Language
• Allows user defined tag names ( HTML uses
  predefined tags)
• XML is used to explain how the data is organized

19
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)

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

21
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).

22
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

23
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

24
Example Web Pages
25
The Toyologist
text"blue" link"purple" vlink"white"
alink"magenta" align"right" / align"top" /

• FREE href"remind.htm"Birthday Remind-O-Matic


• INSTANT Toy
  Recommendation
• CUSTOM href"report.htm"E-Mail Toyology
  Report
• CONSULT href"consult.htm"with the Toyologist
iBUY A TOY Online Order
Form

Broug
ht to you by Once Upon a Time Toys in Stowe,
Vermont, USA
26
HTML structure

• Example HTML
• Document Content

• Being the document
• Document head
• Document head element
• Document Body
• End document

ALL HTML documents contain this basic structure.
27
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

28
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.
• - beginning tag
• - ending tag
• Tags are defined by reserved names (, ,
  ,
  , etc.
• Tags also contain attributes that defines the
  display of text that is enclosed by the tags.

29
URL

• An address on the Web is known as a URL
• e.g http//www.w3.org
• URL Uniform Resource Locator

30
HTML Attributes

• This text is aligned left
• This text will
  appear white with a black background.
• City
  University
• align, bgcolor, text, and href are all attributes
  of their tags. They describe layout or
  positioning of text.

31
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

32
HTML Creaters

• Microsoft FrontPage
• Microsoft Visual InterDev
• Macromedia Dreamweaver
• Adobe GoLive

33
Many Faces of HTML

• Most web pages will look the same on Netscape
  Navigator and IE
• They will look the same on PCs , 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

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

35
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 dont change unless
  the designer alters the page.

36
Must have HTML tags

• - indicates that this is a web page
• - indicates that the end of the web page
• and - Browser will display any
  text within the tags at the very top of the
  browser window
• and - 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

37
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

38
Paragraphs and Line Breaks (cont..)

• XHTML defines white spaces as a space character,
  tab character, carriage return or as a line feed
  character
• and - Used to skip a line between
  paragraphs
• 
  - Forces a line break within a paragraph (
  does not need a closing tag) in XHTML standard
  
  

39
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
40
Linking to other web pages

• The main tag to define links is called the
  anchor tag -
• Define the address of the page to link to in
  quotes after href
• Click Me!
• href hypertext reference and is called an
  attribute of the tag.

41
You Aren't There Wonders of the World 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 href"http//www.accsyst.com/cow.html"Alloway,
New Jersey or, for the more scientifically
minded, at maden/cattle/home_cow.htm"IBM Almaden Research
Center. Or if it's scenery you're after,
adventure to d/"a half-paved backyard in Fremont,
California.
42
Example web page with links
43
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 Click here to view
  the course notes.

44
web page with links cont ..
45
Relative Addresses

• A relative address describes the path from one
  Web page to another, instead of a full (or
  absolute) internet address
• e.g Learn About
  African Lions
• Note The forward slash (/) is always used to
  separate directory folders in HTML

46
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
47
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

48
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

49
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

50
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

51
Questions ?

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

52
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

53
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
• How to save a HTML file ?
• Use .html extension

54
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 ?
• and
• How to force a line break
• 
  

55
Questions ?

• What is a relative address ?
• It describes the path from one Web page to
  another, instead of a full Internet address

56
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

57
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

58
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

59
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
• Login in to the Unix server using your Computing
  Services login name and password.
• 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

60
HTML Common Tags

• -
• 
  61
  Images
  • Image Example
  • Images are added with the img tag. Common
    image file types are .gif and .jpg
  
  62
  Text Alignment, Lists, and Special Characters
  • To align a paragraph to the right margin, you use
    the align right inside the 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
  
  63
  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 or division tag
  
  64
  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
  • caf233 or cafeacute
  • Most of the characters found in the worlds
    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
  
  65
  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/x
    html-symbol.ent
  
  66
  Types of HTML Lists
  • The bulleted list is called an unordered list -
    
    • Bullets appear at each
    • instead of
      numbers
    • The numbered list at the top is called an
      ordered list -
      1. Numbers and line breaks appear automatically at
         each
      2. , and the entire list is intended
      3. The list of terms and their meaning is called a
         definition list -
      4. The tag goes in front of each term to be
         defined, with a tag in front of each
         definition
    
    67
    Types of HTML Lists
    68
    Advanced Text Formatting and Links
    • For boldface text, use the at the beginning
      and the at the end sis the text
    • For italic use the tag and the tag
    • To make something bold and italic use the
      and tags
    • Can use italics in headings but boldface wont
      show in headings as they are already bold
    
    69
    Example of tag
    70
    Typeface
    • The latest version of Netscape and IE font
      control
    • The attribute enables you to specify
      the actual typeface that should be used to
      display text
    • e.g 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.
    
    71
    Linking your email address into a web page
    • Using the tag you can link to your email
      address
    • Using this method the readers of your web page
      can talk back to you
    • E.g
    • Send any
      comments
    • When someone clicks send any comments a mail
      window will appear in which the message can be
      typed and sent
    
    72
    Linking your email address into a web page
    examples
    • Emmanuel Kant, President manny_at_24hourhtmlcafe.
      com
    • Martin Heidegger, Secretary marty_at_24hourhtmlcafe
      .com
    • Georg Wilhelm Friedrick Hegel, Senior Officer
      will-fred_at_24hourhtmlcafe.com
    • The email address from the link is entered
      automatically, and the user can simply click the
      mail button to send the message
    
    73
    Font size and colour
    • The font size and colour attributes give
      control over the appearance of the text
    • e.g This text will
      be big and red.
    • 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
    
    74
    HTML tags that add special formatting to text
    - Small text - Big small
    text - Superscript small Subscript
    small - Strikethrough Small -
    Undeline small - Strong text -
    Monospaced smallfont preserves spaces and line
    breaks
    
    75
    Using named anchors
    AlphabeticalShakespeare
    First
    Lines of Every Shakespearean Sonnet href"top"Return to Index. / Note The symbol means that
    the word top refers to a named anchor point
    within the current document, rather than to a
    separate page
    
    76
    Sample code for Forms
    FREE! Free Electronic Junk Mail! enter your
    e-mail address below and click on the
    SignUP! button. action"/cgi-bin/cgiemail/mail2.txt" name"success" type"hidden" value"http//24hour
    HTMLcafe.com/hour8/thanks.htm" / type"text" name"anotherone" size"25" / type"image" src"signup.gif" border"0"
    align"top" /
    
    77
    HTML Help
    • View the lecture slides_at_
    • http//www.staff.city.ac.uk/raj
    • For complete spec, http//www.w3c.org
    
    78
    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 _at_
    • 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