High Level Languages

1
High Level Languages

• Lecture 5
• HTML

Chris Coleman cqc_at_cs.nott.ac.uk
2
Last time

• On Friday we did
• Regular Expressions

3
This time

• Today
• Introduction to HTML
• Document structure
• Basic style
• Style Sheets
• Headings
• Links
• Validating HTML
• Sending data to scripts

4
Programming for the Web

• The next part of the course is how to write Web
  based programs
• We'll be covering
• How Web documents are made
• How to get Perl to produce them
• This lecture will be on HTML, the language of Web
  documents

5
HTML Intro

• Web documents are written in a language called
  HTML
• This course cannot cover HTML in any great depth
• We'll be doing just enough to allow us to write
  Web applications
• Up to you if you want to learn more

6
HTML Viewing your documents

• HTML documents are plain text files with the
  extension .html
• You can create them in any text editor
• I recommend NEdit (again)

7
HTML Viewing your documents

• Once you've created a document you can view it by
  pointing your Web browser at the location, e.g.
  H\web\page1.html
• Alternatively, if you place the files in your
  public_html directory on the server your
  documents will appear on the Web

8
HTML Viewing your documents

• You should also make sure the permissions are
  correct
• chmod 644 mypage.html
• Your document is now available at
• http//www.cs.nott.ac.uk/username/mypage.html

9
HTML Viewing your documents

• If you name your file index.html it will the
  document loaded whenever someone views your
  directory without specifying a document name
• http//www.cs.nott.ac.uk/djm
• is the same as
• http//www.cs.nott.ac.uk/djm/index.html

10
HTML Tags

• A HTML document is made up of a mixture of free
  text (like this sentence) and tags which
  describe the document
• A tag is identified by being between angle
  brackets, e.g.

11
HTML Tags

• Some tags appear in pairs, e.g.
• you can make some text bold
• and some other text italic
• or even both
• A tag that starts with a / is a closing tag, so
  we start a bold section before the word bold
  and close it afterwards.

12
HTML Tags

• Note the nesting around the word both, you
  should always close the innermost tag first.
• This is wrong
• or even both

13
HTML Tags

• Other tags exist on their own
• An example is the br tag which forces a new-line
• This is line 1
  
• This is line 2
• Note that HTML won't go to a new-line when it
  sees a return, you'll need
  

14
HTML Documents

• A HTML document is essentially a collection of
  nested tags
• The outer most one is html which encompasses the
  whole document

15
HTML Running example

16
HTML Documents

• We now sub-divide the html section into two parts
• head
• body
• head contains information about the document and
  body what is actually to be displayed

17
HTML Running example

18
HTML Titles

• The most used tag in head is title
• This specifies the text that will appear in your
  browser's title bar
• It is also used when someone bookmarks your page
• Make it short and meaningful

19
HTML Running example

• My first Web page

20
HTML Documents

• That's all we need in terms of document structure
• The rest of this lecture is going to be about
  things to put in the body section

21
HTML Adding text

• You can add a block of text to your document by
  surrounding it with p tags
• The quick brown fox jumped
• over the slow lazy dog
• Don't forget HTML ignores extra white space so
  all of that will appear as one line (browser
  width permitting)

22
HTML Adding text

• You can use things like b (bold) and i (italic)
  within a paragraph block
• You can use br as well to force line breaks

23
HTML Running example

• This page shows some features of HTML.
• One thing you can do is add style like
  bold and italics to your text.

24
HTML Headings

• HTML has six levels of headings from h1 (biggest)
  to h6 (smallest)
• Usually only h1 to h3 are used
• These headings can be placed in the body tag
  directly and should not be within p tags

25
HTML Running example

• Welcome
• This page shows some features of HTML.
• Styles
• One thing you can do is add style like
  bold and italics to your text.

26
HTML Links

• Links to other documents are specified with the a
  tag
• The a tag has an attribute called href
• Attributes are extra pieces of data specified in
  the opening tag
• e.g. blah blah

27
HTML Links

• In the href attribute you can put just the name
  of the document if it's in the same directory as
  the current one
• I have another page
• Alternatively, you can specify the full location
• Search Google

28
HTML Tables

• Tables provide a way of formatting HTML and
  provide basic positioning on the page.
• Not very hard to understand but require quite
  alot of code. As such not described here.
• But have a look at
• http//www.pageresource.com/html/table1.htm
• May be usefull for the coursework...

29
HTML Cascading Style Sheets

• Cascading Style sheets (CSS)
• Used to define how to display HTML elements
• Styles stored either in an external style sheet,
  or within a CSS definition in the section.
• Definitions look like
• selector property value
• body color black
• multiple properties can be defined if split with
  a ''
• p text-align center color red

30
HTML Cascading Style Sheets

• An inline stylesheet example
• hr color sienna
• p margin-left 20px
• body background-image url("images/back40.gif")
• External CSS are defined in plain text files with
  a .css extension
• Linked to specific pages with the tag.
• href"mystyle.css" /

31
HTML / XHTML

• The type of HTML we have discussed so far is
  XHTML v1.0
• What is XHTML?
• EXtensible HyperText Markup Language
• Aimed to replace HTML
• A stricter and cleaner version of HTML
• XHTML is HTML defined as an XML document
• Pages can be read by all XML enabled devices.

32
XHTML Rules

• XHTML Basic Rules
• Elements must be properly nested
• bold and italic
• documents must be well formed
• XHTML elements must be nested correctly in pairs
• Tag names must be lowercase
• All Elements must be closed eg.
• Hello World
  -
• Horizontal Rule
• This is a paragraph

33
XHTML Rules

• Three types
• STRICT - This is pure XHTML.
• TRANSITIONAL - A more compatible version with
  current browsers.
• FRAMESET - Everything in traditional, including
  frames as well.
• Include as the first line of each page a Document
  Type Definition (DTD)
• "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"

34
XHTML Validation

• Validation Checks structure and syntax of
  documents.
• Visit the URL below
• http//validator.w3.org/
• Then either
• A) Save source of a page to a local file, and
  upload to the server.
• B) Enter the URL of the page you wish to
  validate.
• A list of errors on your page will then be
  displayed.

35
HTML Sending data to scripts

• A key part of Web programming is being able to
  send data to the script from the page
• Two ways to do this
• Embedded within a link
• A form
• We'll cover how to receive this information next
  lecture

36
HTML Sending data to scripts

• A link containing extra data may look like this
• 4"
• link here
• The a tag itself is quite standard, an opening a
  tag, some text which forms the link and then the
  closing tag
• The difference is all in the href attribute

37
HTML Sending data to scripts

• href"test.cgi?iddjmampnameduncanampage24"
• test.cgi is the name of the script we're sending
  data to
• The ? marks the border between script name and
  data being sent

38
HTML Sending data to scripts

• href"test.cgi?iddjmampnameduncanampage24"
• The data is in pairs, each pair is separated by
  an amp
• Within the pair, the data is in the form of
  keyvalue

39
HTML Sending data to scripts

• Properties of this method
• Links with data can be embedded directly into
  HTML
• No requirement for user to enter values
• Values are fixed
• Destination can be bookmarked
• Limit on the amount of data that can be sent
• Sending characters like space requires a little
  more work

40
HTML Forms

• The other way of sending data to a script is with
  a HTML form
• You've seen these before on pages like Google or
  anywhere you've been able to enter or select data
  and submit it to a server

41
HTML Forms

• A form is enclosed within form tags
• The action attribute specifies the script to
  processes the form
• The method attribute should be either get or push
  (more later)

42
HTML Forms

• There are a number of form related tags that
  allow data to be entered
• Most of these are variants of the input tag and
  have a name attribute which is the key for the
  data
• First, we'll look at text input

43
HTML Text input

• maxlength"20" value"youridhere" /
• The text input type shows a single line text
  input
• size specifies the size on screen (optional)
• maxlength is the maximum number of characters the
  input will accept (optional)
• value is the default text in the box (optional)

44
HTML Checkboxes

• value"yes" /
• A checkbox is a switch that can either be on or
  off
• value is the data sent if the checkbox is ticked
• If you have checked"checked" then the checkbox
  is on by default

45
HTML Radio buttons

• /
• Radio buttons allow you to specify a group of
  buttons, of which only one can be checked at a
  time
• Radio buttons behave as a group when they have
  the same name
• Other attributes are the same as for checkboxes

46
HTML Hidden

• page" /
• This specifies some data to send along with the
  form that is fixed and the user has no input to

47
HTML Select boxes

• Drop-down selection boxes are done by first
  having a surrounding select tag
• This tag should have a name attribute

48
HTML Select boxes

• Within the select tag use option tags for each
  option in the drop down
• The option tag should have a value attribute
  which is the data that will be passed to the
  script if this option is selected
• The text in the option tag is what the user will
  see
• selected"selected" is used to specify the default

49
HTML Select boxes

• English
  (International)
• English (US)
• French
• German

50
HTML Submitting a form

• The submit input type provides a button that lets
  the use send the data
• The value attribute specifies the text to appear
  in the button (option)

51
HTML Forms summary

• Properties of this method
• User can enter data
• Range of visual entry methods
• Results can be bookmarked (get method)
• Results cannot be bookmarked (post method)
• Limit on data able to be sent (get method)
• No limit on data able to be sent (post method)
• Easy to send characters like space

52
HTML Summary

• This really was only an outline
• Plenty of HTML guides around on-line
• www.jalfrezi.com is one
• HTML is not difficult! - For the coursework it is
  assumed that you 'know HTML'. Therefore, if it's
  not in the notes Look it up on the web. Don't
  just assume you don't need to know it!

53
Summary

• We covered
• Introduction to HTML
• Document structure
• Basic style
• Headings
• Links
• XHTML vs HTML
• CSS
• Sending data to scripts