Web Development

1
Web Development

• Lecture Series 1/n (n3?)

2
Who am I?

• First year student in Computing Software
  Engineering
• Freelance web developer designer
• Been doing web design for since I was 13.
• Software consultant
• Been programming since I was 15.
• henrik_at_haf.se

3
Lecture outline
What we will do!

• Tools for web dev.
• Resources for web dev.
• Minimal HTML file
• The HTML box model
• HTML
• Structure
• Doctypes
• etc...
• Cascading Style Sheets

4
Tools for web development
Browsers Plugins

• Firefox 2 / (3)
• Firebug
• https//addons.mozilla.org/en-US/firefox/addon/184
  3
• Web Developer Toolbar
• https//addons.mozilla.org/en-US/firefox/addon/60
• ColorZilla
• http//www.iosart.com/firefox/colorzilla/
• Internet Explorer 6 / 7 / (8)
• Performs badly in all web-related tests. Use when
  HTMLCSS is finished and hack it up so it works.
  Dont start out in this browser.
• Web Developer Toolbar
• http//www.microsoft.com/downloads/details.aspx?Fa
  milyIDE59C3964-672D-4511-BB3E-2D5E1DB91038displa
  ylangen
• Opera 9 / (10)
• Web Developer Toolbar
• http//operawiki.info/WebDevToolbar

5
Tools for web development
Editors for HTML, CSS, XML and XSLT

• Macromedia Dreamweaver 8 / Adobe Dreamweaver CS3
• Great for writing HTML and CSS and performing XML
  transformations. Worse for programming. No
  customizations required.
• http//www.adobe.com/products/dreamweaver/
• Notepad (syntax highlighting)
• Good for writing HTML. Limited functionality.
  Gives you byte-level control.
• Visual Studio 2005
• An IDE for .Net development, syntax highlighting,
  etc. Handles most file types. Must be customized
  to some extent and has some quirks. Doing
  programming in it is great.
• http//msdn2.microsoft.com/en-us/ie/bb188238.aspx
• http//msdn2.microsoft.com/en-gb/academic/default.
  aspx
• http//imaginecup.com/

6
Resources for web development
Stock images Tools

• stock.xchng
• A great stock photo gallery. When starting out,
  without knowledge of all commands in Illustrator
  and Photoshop, designing with images is a bit
  easier.
• http//www.sxc.hu/index.phtml
• W3Cs HTML validator
• Validates your HTML. If something is not working,
  pass it through here and it might help.
• http//validator.w3.org/
• W3Cs CSS validator
• Validates your CSS. If some formatting is off in
  different browsers, pass it through here.
• http//jigsaw.w3.org/css-validator/
• W3Cs link checker
• Not used very often, but may come in handy!
• http//validator.w3.org/checklink

7
General information
About HTTP terminology

• Data is sent in an asynchronous pattern between
  the client (browser) and server (web server e.g.
  Internet Information Services/Apache)
• When you type an URL, a request is sent to the
  server from your client.
• The server sends a response back.
• Communication goes over the HTTP 1.1 protocol. A
  protocol is a standardized way of communication
  between electronic agents.
• http//www.w3.org/Protocols/rfc2616/rfc2616.html
• When the request comes to your browser, it
  renders it, using a rendering engine. Mozilla
  Firefox uses gecko, which originates from
  Netscape Navigator around 2001. Internet Explorer
  uses its own engine. Theres also the Opera
  engine and a whole load of others.
• Any data package sent over HTTP contains a
  MIME-type. (Multipart Internet Mail Extension) It
  governs how it is interpreted by the receiving
  client. HTML is often sent as text/html.

8
Minimal XHTML file
Lets get started!

• Has a DOCTYPE. Helps browsers choose conformance
  mode. (more later)
• Has a title, a body and every tag is closed with
  a slash.

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d
td" lang"en" xmllang"en" Minimali
stic XHTML Document http-equiv"content-type" content"text/htmlc
harsetutf-8" / l
9
Minimal HTML file
Lets get started!

• Differences no xmlns attribute.
• Different DTD/DOCTYPE.
• No Xml tag to start the document.
• HTML Hypertext Markup Language

4.01//EN" "http//www.w3.org/TR/html4/strict.dt
d" Minimalistic
HTML Document -type" content"text/htmlcharsetutf-8"
/
10
HTML tags
Writing tags

• Each tag is an xml element. These will be used
  interchangeably.
• Example
  
• ExampleSwedish National
  Television
• Each tag is closed by a slash / in itself or a
  reciprocal end tag like above.
• There exists zero or many attributes in one tag.
  Whats inside the is the attribute value. The
  inner contents of a tag is a text node unless it
  consists of other tags, but is referred to mostly
  as the contents of.
• The DTD defines what tags and attributes are
  allowed in the document. The DTD is given in the
  DOCTYPE element. (see next slide)
• The value of attr. id can only occur once per
  document! I.e. no two elements may have the same
  id! Values in class, can be duplicated.
• Use the real names!

11
DOCTYPEs/DTDs available
To tell the browser what you want! The major DTDs
in use (99.9)

• HTML 4.01 sent as text/html
• 4.01//EN "http//www.w3.org/TR/html4/strict.dtd"
  
• Transitional//EN "http//www.w3.org/TR/html4/loo
  se.dtd"
• Frameset//EN "http//www.w3.org/TR/html4/framese
  t.dtd"
• XHTML 1.0 sent as text/html or application/xhtmlx
  ml
• Strict//EN "http//www.w3.org/TR/xhtml1/DTD/xhtm
  l1-strict.dtd"
• Transitional//EN "http//www.w3.org/TR/xhtml1/DT
  D/xhtml1-transitional.dtd"
• Frameset//EN "http//www.w3.org/TR/xhtml1/DTD/xh
  tml1-frameset.dtd"
• XHTML 1.1 sent as application/xhtmlxml
• 1.1//EN "http//www.w3.org/TR/xhtml11/DTD/xhtml1
  1.dtd"
• We will be using XHTML 1.0 Strict.

Referencehttp//www.w3.org/QA/2002/04/valid-dtd-l
ist.html
12
HTML tags html, head, body
Commons tags

• Html Compulsory.
• Contains everything, except xml-declaration and
  DOCTYPE.
• Head
• Gives meta-data for
• Browsers content2urlhttp//redirected.com /
  rel"shortcut icon" href"/favicon.ico"
  type"image/ico"
  href"/"
• Humans /
• Rendering The page title that shows in the
  title bar of the browser
• Gives style information or links to styles.
• Gives javascript code or links to javascript.
• Body
• Contains stuff.

13
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags a
Commons tags

• The anchor tag gives you a hyperlink.
• Rendered inline.
• Example textText to show
• hrefs value examples
• /
• ../../home.htm
• mailtohenrik_at_haf.se
• http//hardwareanalysis.com80/

focus charset Charset IMPLIED
type ContentType IMPLIED name
NMTOKEN IMPLIED href URI
IMPLIED hreflang LanguageCode
IMPLIED rel LinkTypes IMPLIED
rev LinkTypes IMPLIED shape
Shape "rect" coords Coords
IMPLIED
14
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags h1-h6
Common tag

• Gives you a semantic heading.
• Rendered as a block, takes inline content.
  Example Site
  title
• Here it takes a text node, which is by definition
  inline.
• There are six levels of headings from h1 (the
  most important) to h6 (the least important).
• More formal definition on next slide.
• The id can be used to style the div block or
  refer to it in dynamic code, called JavaScript.

15
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags h1-h6
Common tag

• PCDATA means text.
• The following code tells you that the tag h1
  takes text or any phrase-type tags (emphasize,
  stress something, definition, code snippet,
  quote, ), or any tag which is in itself inline.

lists blocktext fieldset
table"
misc)"
code q samp kbd var
cite abbr acronym sub sup "
inline "a special fontstyle phrase
inline.forms"
"(PCDATA inline misc.inline)"
h1 Inline
16
btw
What does semantic mean?

• It means the meaning in the context of a
  language, English for example.
• In accessibility discussions, semantics describes
  markup (code) that when read by a human, makes
  sense.

17
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tag p
Common tag

• Gives you a paragraph.
• Like in Word!

18
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags - div
Commons tags

• Gives you a box / content holder.
• Rendered as a block.
• Example Site
  title
• Used for layout.

lists blocktext fieldset
table"
misc)"
Flow "(PCDATA block form inline
misc)"
attrs
19
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags ul, ol
Commons tags

• This is a list
• You can see
• the bulletpoints on the left. In HTML it would be
  written
• ul stands for unordered list. Theres a ol as
  well, which numbers it for you.
• Inside a list item you can insert any type of
  element, really both block level and inline.
• The class attribute can be used to style the
  list.

• This is a
  list
• You can see
• the
  bulletpoints on the left. In HTML it would be
  written

20
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags ul, ol
Commons tags

• Definition of a list

"(PCDATA block form inline
misc)"
21
HTML tags - table
Commons tags

• Example

foundation year of some imaginary companies."
Table 1 Company data
Company
scope"col"Employees
scope"col"Founded
scope"row"ACME Inc 1000
1947
scope"row"XYZ Corp 2000
1973
Read more about tableshttp//www.456bereastreet.c
om/archive/200410/bring_on_the_tables/
22
IMPLIED class CDATA IMPLIED
style StyleSheet IMPLIED title
Text IMPLIED"
HTML tags - table
Commons tags

• Presents tabular data.
• Is NOT used to create layout, unless the whole
  page is one big semantic table!

(colcolgroup), thead?, tfoot?,
(tbodytr))
Inline
tfoot (tr)
(tr)
EMPTY
th Flow
Text IMPLIED width Length
IMPLIED border Pixels IMPLIED
frame TFrame IMPLIED rules
TRules IMPLIED cellspacing Length
IMPLIED cellpadding Length IMPLIED
23
Tags, tags, more tags!
Where to find more of the good stuff.

• Of course, you can read the DTD.
• Or you can go here
• http//www.w3schools.com/tags/default.asp

24
Web Standards
Reconciliation of technologies

• Best practise
• Valid HTML, CSS, JavaScript, Atom/RSS feeds
• Keeping with standards set by the World Wide Web
  Consortium (W3C)
• www.w3c.org
• Gracefully degradable JavaScript
• Equal or similar rendering across clients
• Meeting accessibility semantic guidelines.
• Separation of Concerns
• see http//en.wikipedia.org/wiki/Web_standards or
  ask me further.
• The war on Internet Explorer
• Naaah. Not quite.
• IE6, IE7, IE8.
• Compulsory for any professional web designer /
  developer!

25
Cascading Style Sheets
The second part of the triad HTML, CSS JS

• Changes site wide.
• Lots of power.
• Has selectors
• Each selector has a specificity.
• .classSelector
• idSelector / should not start with a number /
• tagselector
• tagSelectorattribute / doesnt work in IE6
  /tagSelectorattributevalue / doesnt work
  in IE6 /
• Selector chaining
• html body p
• html body psection3-2 ul.commonList
• pclasspreamble / same as p.preamble /

26
Cascading Style Sheets
The second part of the triad HTML, CSS JS

• Versions 1.0, 2.1 and 3.0.
• Versions 2.1 has been a recommendation since
  1998. Works to a great extent in every major
  browser except IE.
• ACID2 test. http//www.webstandards.org/files/acid
  2/test.html

Opera 9.25
Firefox 2.0.8
Safari 2.0
IE6
IE7
Konqueror 3.5
27
The Box Model
Inline, block, table-cell etc.
Read the specificationhttp//www.w3.org/TR/REC-CS
S2/box.html
28
The Box Model

• See the code rendered.

Basic description.
YPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/D
TD/xhtml1-transitional.dtd"xmlns"http//www.w3.org/1999/xhtml"
xmllang"en" Showing
quotquirksquot of box model type"text/css" media"all" html
background-color 333 body padding 15px
h2 margin-top 15px divbox
background-color eee divbox .secondBox
outline 1px solid blue margin-top
15px margin-bottom 15px heading's margin-top 'collapses' through its
parent box."Heading class"secondBox" title"This box's margin-bottom
'merges' with the box below." Text
node Text
node
29
The Box Model
Quirks of the box model.

• Margin
• Goes on the outside
• If the top and bottom margins of a box are
  adjoining, then it is possible for margins to
  collapse through it. In this case, the position
  of the element depends on its relationship with
  the other elements whose margins are being
  collapsed.
• Setting property width.
• Sets the width of only the content area.
• Padding
• Goes on the inside

30
Cascading Style Sheets
The second part of the triad HTML, CSS JS

• Next lecture Creating a layout in CSS!