Posts Tagged ‘html’
Week 2 morning session – CSS
Posted on: July 31, 2009
In the morning of the second day we covered CSS – cascading style sheets.
In the previous week we had covered inline styles – (for example <p style=”font-family:arial,verdana,sans-serif”>.
We explained that that is one way of doing it but that it is really impractical as you have to define the style each time you use an element. A much better way of doing it is using an external style sheet where you only define the style of each tag once.
First we asked the students to go back to their index.html page that they had created during the first week of the course and delete all the inline styles. They were then asked to create a styles.css file using notepad and save it next to their index.html file.
We then showed how to set up a head with a <title> and a <link> to styles.css in their index.html file:
<head>
<title>Welcome to my website</title>
<link href=”styles.css” rel=”stylesheet” typle=”text/css” media=”all” />
</head>
Next the students were shown how to set up the style sheet with the basic elements and their CSS selectors:
body {
background-color: yellow;
}
h1 {
color: blue;
font-size: 170%;
font-family: arial, verdana, sans-serif;
}
p {
font-family: arial,verdana,sans-serif;
}
and so on.
We also explained borders, margins and padding and how to style the different states of the <a> tag: a, a:hover, a:visited and a:active.
With some of the faster groups we were also able to start looking at <div> tags with id’s and classes, for example:
<div id=”redborder”>
<h2>A second level header</h2>
<p>Some ccontent.</p>
</div>
The following CSS selectors were covered:
- background-color
- background-image
- background-position
- background-repeat
- color
- font-size
- border
- margin
- padding
- font-family
- text-decoration
- font-weight
With a few students we were also able to touch a bit on floats.
CSS specialism
In addition to the basic CSS course, we also ran a CSS specialism one Friday morning. In this course we went through a tutorial from subcide.com which built up to this two-column layout with a header and a footer:
From subcide.com
Week 1 – HTML and social networking
Posted on: July 23, 2009
We’ve just finished teaching the HTML and social networking part of the course.
We were really pleased with how all the groups took to writing HTML. For a handful the lesson was a refresher course; for most HTML was completely unknown to them beforehand.
However, each day we got through all the material we wanted to teach and we were impressed by how the students built on the basic information we gave them, experimenting and trying different things out.
In the afternoons we discussed the uses of social networking beyond the personal. We tied this in to the particular interests and experiences of the different groups – the school students, teachers and community groups all brought their own perspectives to issues such as crowdsourcing, online collaboration and community engagement.
We had some really good, wide-ranging discussions – it’s fair to say it went better than I had hoped.
Tomorrow we’re offering the first of our specialisms – a morning of more advanced HTML for those that want to learn more. Next week we’ll be moving on to tackle CSS and then blogging.
Incidentally, in due course, all the materials from the course will be going up on this blog and the wiki (for which the link escapes me just now).
(Pic – I Know HTML by kk+)
Team intros – Pontus Westerberg
Posted on: July 16, 2009
Hi, My name’s Pontus and here’s my introduction.
I first heard of this project through Twitter (where else) via @podnosh who retweeted an invitation by @timdavies for interested potential volunteers to get in touch. I love volunteering overseas – I have previously done it in Kenya and Zimbabwe – and thought this would be a great opportunity to share my skills, meet new people and experience a new culture.
I’m focusing on HTML and CSS skills and have developed an introductory HTML course which centres around creating an online CV. It will cover:
- How to set up an HTML page in notepad
- HTML elements and attributes
- Links, images etc
- Inline styles and some basic CSS selectors
- FTP, domain names, hosting
- External style sheets (depending on how far we get)
About me – I’m the Web Editor for Futurebuilders, the UK’s largest social investor, and have previously worked with online and offline communications for several charities. Last year I spent six months as a volunteer for Leonard Cheshire Disability East and North Africa in Nairobi, Kenya, designing its website and developing other communications materials.
I’ve also helped with online communications for the Sanitary Pad Programme in Kenya, a campaign for Nelson Mandela’s 90th birthday for Action for Southern Africa and the Centre for Accessible Environments and do a lot of online volunteering through the UN Online Volunteering Scheme.
I normally blog over at Eatanicecream (although I’ve been very lazy lately).
