7/31/2019 04 Web Content Creation_PR_TM

1/9

www.netskills.ac.uk

Web Content Creation

Key Principles

CSC1014

7/31/2019 04 Web Content Creation_PR_TM

2/9

CSC1014

JISC Netskills

Web page basics

Source code delivered to client (browser) Flat file, dynamic generation, via HTTP, via local file

system etc. Browser processes document and renders

display to user Final appearance is a combination of source

construction (by the author) and renderingcapability (in web browser

All web documents use (X)HTML HypertextMark-up Language

With other embedded technologies to enhancedisplay and behaviour

7/31/2019 04 Web Content Creation_PR_TM

3/9

CSC1014

JISC Netskills

Web page delivery

7/31/2019 04 Web Content Creation_PR_TM

4/9

CSC1014

JISC Netskills

HTML: A Simple view

Content Text (and images)

Elements (Tags) Core structure for the content Focus on semantics and organisation Default rendering conventions allow for basic

(functional) display

Attributes Additional information/semantics about elements

7/31/2019 04 Web Content Creation_PR_TM

5/9

CSC1014

JISC Netskills

A simple web page (HTML 4.01)

A Simple (HTML) Document 1

Creating Web Pages

A one-day workshop run by:

Netskills

Creating Web Pages

A one-day workshop run by:

Netskills

7/31/2019 04 Web Content Creation_PR_TM

6/9

CSC1014

JISC Netskills

Presentation-oriented markup

Web pages have: Structured content

An appearance (or presentation) (Optional) behaviour(s)

Specifying all 3 in a single mark-up (like HTML) is problematic Confusion of structure with style Presentation of each page must be managed separately

Users cannot consistently adapt pages Evolution and extension is difficult!

7/31/2019 04 Web Content Creation_PR_TM

7/9

CSC1014

JISC Netskills

Separation of concerns

Content (in XHTML) The information conveyed by a page

Meaningful structure (section headings, paragraphs, emphasis etc.) andsubject matter

tags and attributes for presentation removed from standard (deprecated)

Presentation (in CSS) The appearance of a page (fonts, multi-column layout, colours,

alignments etc.)

Behaviour (in JavaScript) To respond to user input To manage external data manipulation and browser inconsistencies

7/31/2019 04 Web Content Creation_PR_TM

8/9

CSC1014

JISC Netskills

Benefits of separation

Separation of content from presentation tells you (and yourdevice) something meaningful about a page independently of

its appearance Semantic markup versus stylistic instructions Heading level versus large font Strong emphasis versus bold New paragraph versus line break

Plus consistency, accessibility, ease of maintenance etc.

7/31/2019 04 Web Content Creation_PR_TM

9/9

CSC1014

JISC Netskills

One degree of separation

A Simple (HTML) Document

h1 { font-family: Georgia "Times New Roman", serif;

color: green; font-size: 155%; }

p { font-family: Arial, Helvetica, sans-serif; color: red; }

Creating Web Pages

A one-day workshop run by:

Netskills

h1 { font-family: Georgia "Times New Roman", serif;

color: green; font-size: 155%; }

p { font-family: Arial, Helvetica, sans-serif; color: red; }

Creating Web Pages

A one-day workshop run by:

Netskills