Posts Tagged ‘html’
Week 2 morning session – CSS
Posted July 31, 2009
on: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
Team intros – Pontus Westerberg
Posted July 16, 2009
on: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).