CMT602c Internet Computing Introduction to HTML

1
CMT602c Internet Computing Introduction to HTML
2
Course Overview

• We will study the following
• Constructing web pages with HTML
• Stylesheets
• JavaScript
• PHP and MySQL
• Perl
• XML

3
Course Overview

• Internet Computing component of CMT602 (1/4 of
  double module)?
• 11 Lectures Present and discuss web programming
  techniques and technologies
• 10 Practical Laboratory Classes Put into
  practice the techniques taught in lectures
• IMPORTANT You will never become a good
  programmer by just reading a book or attending a
  lecture. You must must MUST! Practice. Take
  advantage of the lab classes.

4
Internet
1969 - forerunner to the internet, the ARPAnet
was developed. United states military wanted a
robust command and control center that could
withstand nuclear attack. Leads to TCP/IP
1945 - Vannevar Bush first proposed the
basics of hypertext. Motivation for the work of
Tim Berners Lee.
1962 - J.C.R. Licklider, appointed head of ARPA.
Licklider was a visionary who pioneered the
idea of networked computers for collaborated
working. Funded many projects related to his idea.
1972 - Advanced Research Projects Agency
was renamed to Defense Advanced Research Project
Agency (DARPA)?
5
Internet

• "For each of these three terminals, I had three
  different sets of user commands. So if I was
  talking online with someone at S.D.C. and I
  wanted to talk to someone I knew at Berkeley or
  M.I.T. about this, I had to get up from the
  S.D.C. terminal, go over and log into the other
  terminal and get in touch with them.

6
Internet
1983 - JANET, based on the SERCnet X. 25
research network, went live. JANET is a network
to support education and research in the UK.
1972 - 1983 various new technologies developed, in
cluding telnet.
1990 - Tim Berners-Lee and CERN in Geneva
implements a hypertext system, invents HTML, HTTP
and URLs, for the international
highenergy physics community
1992 - World- Wide Web released by CERN.
7
Internet
1993 - Marc Andreessen and NCSA and the
University of Illinois develops a graphical user
interface to the WWW, called "Mosaic for X".
First graphical Web browser (rendering engine
behind Tim Berners-Lee is currently the Director
of the World Wide Web Consortium (W3C).
2003-2007 Web 2.0, blogging, social networking
Present - Web 3.0 Tim Berners- Lee
inspired Semantic Web. The meaningful web, human
and MACHINE consumption of web content
8
Internet - Services

• TCP/IP Transmission Control Protocol / Internet
  Protocol
• A computer that participates in the internet has
  an IP address (32 bit, e.g. 131.251.169.1)?
• Client-Server Technology
• Client Push (e.g. ftp file transfer protocol)?
• Server Push
• Domain Name Service (DNS), hierarchically
  organized such as the IP addresses, translates
  and IP address to a human readable name, e.g.
  cs.cf.ac.uk

9
Internet - Services

• Email MIME (Multipurpose Internet Mail
  Extensions)text (text/html), image, video, etc.
• Telnet ssh
• FTP File Transfer Protocol
• Gopher
• IRC Internet Relay Chat
• Newsgroups
• WWW World Wide WebHTTP (Hypertext transfer
  protocol) uses a Question-Answer-Scheme, i.e. a
  browser sends a request und gets a response from
  a server. Note the server does not send out
  anything without a request.

10
Markup languages

• Suppose we have a document containing only plain
  text
• We tag certain parts of the document to indicate
  what they are and how they should be formatted
• This procedure is called marking-up the document
• Tags are usually paired e.g. lttitlegtMy
  Memoirslt/titlegt
• A pair of tags plus their content constitute an
  element
• Un-paired tags are called empty tags

11
Markup languages

• Physical vs Semantic markup
• physical refers to appearance (style) on the page
• semantic refers to structure and meaning
• HTML is the HyperText Markup Language
• HTML is based on SGML (Standard Generalised
  Markup Language) which is more complex
• HTML has a fixed set of tags but is constantly
  evolving, but newer versions are downward
  compatible

12
Markup languages

• HTML places primary emphasis on structure
• paragraphs, headings, lists, images, links, .
• HTML places secondary emphasis on style (CSS)?
• fonts, colours, .
• HTML does not label the meaning of the text (XML)?

13
A basic document

• Every document should start with the following
  line

lt!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.0
Transitional//ENgt

• There are three required elements, defined by the
  tags lthtmlgt, ltheadgt and ltbodygt

lthtmlgt ltheadgt lttitlegtMy Home Pagelt/titlegt
lt/headgt ltbodygt lth1gtWelcomelt/h1gt
lt/bodygt lt/htmlgt
14
Basic structure elements

• lthtmlgt and lt/htmlgt must be the first and last
  tags
• The HEAD section
• must come before the BODY section
• contains generic information about the document
• Elements specified in the HEAD section include
• title, base, link, meta, script, style
• The BODY section
• contains the content of the document (text,
  images etc)
• this content is structured by other tags

15
Block elements

• Block elements define sections of text, usually
  preceded by a blank line
• ltpgtlt/pgt - paragraph
• lth1gtlt/h1gt...lth6gtlt/h6gt - headings
• ltpregtlt/pregt - preserve (original format)?
• ltblockquotegtlt/blockquotegt - indented text
• ltdivgtlt/divgt - division
• used to identify a section of the document that
  may be subject to special formatting (for
  example, using stylesheets).

16
Paragraphs

• Paragraphs ltpgt...lt/pgt
• force a break between the enclosed text and the
  text surrounding it
• the tagged region of text may be subject to
  special formatting
• ltp align"center"gtHere is another paragraphlt/pgt
• align is an attribute of the paragraph tag
• center is the value of the align attribute

ltpgthere is a piece of text that has been placed
inside a paragraphlt/pgt ltp align"center"gtHere is
another paragraphlt/pgt
17
Headings

• Use headings to divide document into sections
• Six levels of importance lth1gt...lth6gt

lthtmlgt ltheadgt lttitlegtHeadingslt/titlegt
lt/headgt ltbodygt lth2gtChapter 1lt/h2gt lth3gt1.
Introductionlt/h3gt This is the introduction
lth3gt2. Next sectionlt/h3gt This is the next
section lth4gt2.1 A subsectionlt/h4gt This is a
subsection lt/bodygt lt/htmlgt
18
Element relationships

• The elements marked by tags form a hierarchy
• The root element is html (marked by
  lthtmlgt...lt/htmlgt)?
• It usually has two children head and body
• each of these are further subdivided
• There are rules for which elements can contain
  other elements
• e.g. headers cannot contain headers
• see http//www.w3.org/ for a full list of rules
• Elements must not overlap each other
• we cannot have lth1gt...lta..gt ... lt/h1gt...lt/agt
• we can have lth1gt...lta..gt ... lt/agt...lt/h1gt

19
Inline descriptive elements

• Descriptive elements affect the appearance of
  text depending on how the text is described
• ltemgtlt/emgt emphasis, usually with italics
• ltstronggtlt/stronggt strong, usually with bold
• ltcitegtlt/citegt citation, usually in italics
• ltcodegtlt/codegt usually results in monotype spacing

ltbodygt A ltemgtfascinatinglt/emgt subject that I
ltstronggtmustlt/stronggt understand lt/bodygt
20
Inline explicit style elements

• ltboldfacegtlt/boldfacegt
• ltbiggtlt/biggt bigger font than surrounding text
• ltsmallgtlt/smallgt smaller font than surrounding
  text
• ltigtlt/igt italics
• ltsgtlt/sgt strikethrough
• ltsubgtlt/subgt subscripts
• ltsupgtlt/supgt superscripts
• ltspangtlt/spangt delimits text for stylesheet
  control
• ltdivgtlt/divgt delimits blocks of text for
  stylesheet control

21
Inline explicit style elements

• ltfontgt attributes
• face - name of font (must be installed)?
• "arial", "times", "verdana", "helvetica"
• size - absolute size (1-7), or relative to
  previous text
• "2", "5", "7", "1", "-2"...
• color - hexadecimal RGB, or a named color
• "3399dd", "blue", "red"
• weight - boldness from 100, 200, ..., 900
• "100", "300", "900"
• e.g.

ltfont face"arial" size"1" color"pink"
weight"300"gt
22
Unordered lists

• Unordered lists ltulgt...lt/ulgt
• ltligt...lt/ligt for the list elements
• each item has a bullet

some normal text ltulgt ltligtappleslt/ligt ltligtorangeslt
/ligt ltligtpearslt/ligt ltligtbananaslt/ligt lt/ulgt
23
Ordered lists

• Ordered lists ltolgt...lt/olgt
• ltligt...lt/ligt for the list elements
• each item has a number

some normal text ltolgt ltligtappleslt/ligt ltligtorangeslt
/ligt ltligtpearslt/ligt ltligtbananaslt/ligt lt/olgt
24
Definition (glossary) lists

• ltdlgtlt/dlgt The enclosing tags
• ltdtgtlt/dtgt The definition term
• ltddgtlt/ddgt The definition

ltdlgt ltdtgtMIMElt/dtgt ltddgt Multipurpose...
lt/ddgt ltdtgtFTPlt/dtgt ltddgt File transfer...
lt/ddgt ltdtgtTCPlt/dtgt ltddgt Transmission...
lt/ddgt lt/dlgt
25
Nested lists

• A list may contain another list
• The inner list is nested inside the outer list

ltbodygt ltolgt ltligtappleslt/ligt ltulgt
ltligtredlt/ligt ltligtgreenlt/ligt lt/ulgt
ltligtorangeslt/ligt ltligtpearslt/ligt
ltligtbananaslt/ligt lt/olgt lt/bodygt
26
Comments

• Comments are delimited by lt!-- and --gt
• lt! this is a comment --gt
• Comments may span multiple lines

ltbodygt lt!-- this is a comment --gt lt/bodygt
27
Horizontal lines

• To insert a horizontal line to divide up parts of
  a document we use the empty tag lthrgt
• Attributes align, size (in pixels), width (in
  pixels or percentage), noshade

ltbodygt lth1gtChapter 1lt/h1gt lthr align"center"
size"3" width"50" noshadegt lth2gtIntroductionlt/h
2gt lt/bodygt
28
Special characters

• Some characters such as lt, gt, " and have
  special meanings.
• To prevent them being interpreted as HTML code,
  they must be written as follows lt gt quot
  amp
• Blank space is normally ignored in HTML. To
  include a space in your document use nbsp

ltbodygt A ltemgt lt fascinating gt lt/emgt subject
that I ltstronggtmnbspunbspsnbsptlt/stronggt
understand lt/bodygt
29
Summary

• Today we looked at
• Internet
• HTML a Markup Language
• Basic structure elements
• Block elements
• Inline descriptive elements
• Inline explicit style elements
• Lists
• Special characters

30
Outlook

• Next time we will look at
• More HTML
• Images
• Links
• Tables, Frames
• Use of color
• Web page design