Week 5 – HTML Formatting + Design

Having already learnt a little about the structure and principles of HTML pages, this week we will explore techniques for controlling the layout and design of a webpage. But first, via w3schools, let’s examine the context of HTML in 2011.

HTML = Hyper Text Markup Language (designed to display data)

XML = eXtensible Markup Language. (designed to transport and store data.)

XHTML = a stricter cleaner version of HTML, eXtensible Hypertext Markup Language. It combines everything within HTML 4 with the strict syntax of XML. (Unlike HTML, XHTML documents require all coding rules to be adhered to, for pages to work properly. This makes it ideal for running on mobile phones which do not have the resources or power to interpret documents with poorly formed code).

RSS is written in XML and stands for Really Simple Syndication, and defines an easy way to share and view headlines and content.

HTML 5 = is the next generation of HTML, and although most modern browsers have some HTML5 support, it is still a work in progress. Notably for those interested in sound, it introduces a new standard for playing audio in a web browser page. It also does the same for video, and offers a new way to draw graphics on a webpage with javascript (a scripting language to add interactivity to webpages). (We will be having a much more detailed look at the issues around the embedding of sound and video during week 9)

CSS = Cascading Style Sheets. Whereas HTML defines the content and structure of a document (eg it states which part is a heading, or a paragraph, using appropriate tags), CSS defines how these HTML elements are displayed (eg what font + font colour should be used etc ).

That’s our context above.

Given that this isn’t a web design course (we have a much wider focus than just the technicalities of building webpages, including analysis of the social, cultural, legal and economic dimensions of the online environment, as relevant to the music industry), and given that we have limited time – we’re focussing on learning a foundation of HTML to build webpages and just a little CSS to control how those pages look. If later desiring to pursue web development in more detail, the above context should help. And so, onto lay-out and design – which means HTML + CSS.

HTML Lay-Out – Introducing HTML Tables

The W3Schools HTML examples page hosts a large and useful series of examples all on one page. These range from the basic structure of a document through to links, images, advanced form functions and our focus today – tables. Tables allow content in a webpage to be arranged within grids of rows and columns. By creating tables of certain sizes, and putting content within specific table rows or columns, and leaving other rows or columns empty if we wish, we can control where content appears on the page, eg:

Column 1 text

 

(empty column) Column 2 text

TASK: Construct a html page which includes a table.
Your table should have 3 columns, 2 rows and some example text.
Adjust your table so it is 800 pixels wide. Experiment with the width of each column. (table width/

– Have a look at the code for a basic table at W3Schools, try altering some of the code, then press ‘edit can click me’ to see changes. Then move onto this table tutorialand use this to help build your html page with table. Name your new page table1.html and upload to your server with Fetch.

Using CSS to Control Colours + Fonts

There are 3 ways to use CSS to format a document in a particular style:
1. An External Style Sheet. This is a separate document with the extension .css, which lists the styles wanted for the document ( eg font colour, background colour. If a .css file is linked in the head section of a HTML document, that HTML document will be displayed according to the style rules of the .css file. This is the easiest method to style many pages.
2. Internal Style Sheet. This method inserts a list of style rules, using the style tag, inside the head section of a HTML page. This is an easy way to style a single page.
3. Inline Styles. This method inserts a style into a specific HTML tag, by using the style attribute.

How colours are classified on the web. Complete HTML colour chart. Colour Schemer (helps pick compatible colour schemes).

CSS TASK: Experiment with the 3 methods of CSS formatting.
Use your previously saved HTML page to experiment with the following:
Changing the colour of the page background
Changing the colour of the text
– Placing an image in the background
Adjusting your table.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: