CS1102 Internet Computing, 2007-2008
Derek Bridge
Department of Computer Science,
University College Cork
CS1102 Internet Computing: Period I
- Web site development
HMTL/XHTML; CSS; usability; accessibility; multimedia; client-side scripting
- The Internet
Internet technology; protocols; client-server apps; P2P apps; 'attacks'
CS1102 Internet Computing: Period II
- Web app development
Databases; forms; server-side scripting (PHP)
- Web apps
Search; e-commerce; Web 2.0; mobile web
CS1102 Internet Computing: Teaching
- Lectures:
- 2 × 1hr per week
- Tues 2pm & Fri 11 am in G18
- Handouts (partial)
- Practicals:
- 1 × 1hr per week in B10B, starting next week
- You have been assigned to either Tues 1-2 pm or Tues 3-4 pm (see email later this week)
- Complete the weekly worksheet
CS1102 Internet Computing: Assessment
- Written exam:
- 3hr written exam in Summer
- 160 marks
- Continuous assessment:
- Some of the worksheets
- Christmas class test
- 40 marks in total
HTML
Aims:
- to understand structural and presentational markup
- to know the components of HTML
- to understand the hierarchical structure of HTML documents
- to know the most important elements
Markup languages
- Annotations on a document are markup
- In Computer Science, the markup is included as extra text in the document
- It is included for the benefit of programs, such as web browsers
Types of markup
- Structural markup
structural, logical, content-based, meaning, semantics
- Presentational markup
presentational, physical, appearance, layout, formatting, display, rendering
The anatomy of HTML, the HyperText Markup Language
- An HTML document comprises elements
- An element comprises
- content (the text), plus
- markup (the tags)
- A start tag and an end tag delimit the content
- Tags may take attributes and their values to make them more specific
The anatomy of element content
- To include special characters in the content, use character entities, e.g.:
< <> >& &Á Áá ဠ€< <á áa a - A list: http://www.digitalmediaminute.com/reference/entity/index.php
The anatomy of element content
- Sometimes there is no content (an empty element),
for which there's a shorthand:
<img src="photo.jpg"></img> <img src="photo.jpg" />
- One element can be nested within another, to several layers,
provided the nesting is done properly:
<p>This is <em>correct</em></p> <p>This is <em>incorrect</p></em>
The anatomy of HTML
- Comments can make the source file more self-explanatory
<!-- This is an example comment -->
- Multimedia content (e.g. an image, etc.) is not in the document:
- It is stored externally in another document/file;
- It is referenced from within the document.
Element display roles
- Block-level elements
- By default, there is a line break before and after the content
- Inline-level element
- By default, there is no line break before and after the content
Class exercise: Give examples of both.
Display of HTML
A browser takes the document and 'flows' the text and referenced content onto the screen:
- it fills each line as much as possible
- it disregards line breaks and extra spaces in the source
- it takes account of the block-level/inline-level distinction
- it applies a default style to each element
Hierarchical structures: terminology
| tree | node |
| root | leaf |
| parent | child |
| ancestor | descendant |
| sibling |
The hierarchical structure of HTML documents
- A document and its corresponding tree.
![[Tree structure for the document shown on this page.]](xhtmltree1.png)
<html> <head> <title>A simple document</title> </head> <body> <p>One short paragraph.</p> <p>Another short paragraph with <em>emphasised text</em>.</p> </body> </html>
Our elements (so far)
We studied these tags and attributes for structural markup:
-
html (lang), head, title, link, body -
h1—h6, p, em, strong -
a (href) -
ul, ol, li -
table, caption, tr -
th, td (colspan, rowspan) -
img (src, alt)
Another piece of structural markup
- Some attributes only apply to certain tags (e.g.
srcwithimg) - But almost all elements can have an
idattribute - You can invent its value, but it should be unique within the document
- Class exercise: What's it for? (Two purposes)
And another piece of structural markup
- Almost all elements can have a
classattribute - You can invent its value
- Several elements can share the same value
- Class exercise: What's it for?
And yet another piece of structural markup
- We can group the elements of our document into sections of related content
- This is done with the
divtag
And today's last piece of structural markup
- The
spantag is similar to thedivtag - Class exercise: Look at mojitos.html.
- What do you think the difference is between
spananddiv? - What do you think is the point of these elements?
- What do you think the difference is between
HTML editors
- We've been typing 'raw' HTML using a standard text editor
- There are WYSIWYG editors, which
- show you how the web page will eventually look, and
- automatically produce HTML for you
- Examples: Microsoft Word, Microsoft FrontPage (discontinued), Microsoft Expression Web Designer, Adobe Dreamweaver, Mozilla Composer, Nvu
- But be warned: they can produce bad markup
- You may need to edit the result