HTML stands for HyperText Markup Language and is used to structure text for a web browser.

Document writing software like Microsoft word, allows you to structure text into paragraphs and lists, bold and coloured print, etc. HTML is used to mark text in a way in which browsers can interpret and present the text in structured form. Text is marked by putting the desired text between 'tags' (<>). Most (but not all) tags have an opening tag (put before the desired text) and closing tag (put after the desired text). Opening tags are contained in <> and closing tags in </>. For example the paragraph markup uses the letter 'p' and so to make a body of text into a what your browser will understand as a paragraph you put the paragraph text between <p> and </p>. For instance, to show separate paragraphs, you write: <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p> Here are the markup tags you will need for the first exercise: <p> = paragraph <h1> = primary header <h2> = secondary header <em> = making text italics (<strong> is the tag for making text bold) <ul> = an unordered or bulleted list (like this one) <li> = marks a piece of text as being a list item <blockquote> = marks a piece of text as being a quotation <img> = image tag for inserting a picture

These last two tags require something extra. They require attributes. Attributes provide additional information about HTML elements. So for the <blockquote> you should, as good journalistic practice, add a cite attribute which is a link to where the quote has come from, e.g. <blockquote cite=link>quotation</blockquote>. The image tag is a type of tag that does not require a closing tag (as there is no text to surround). It just has a src attribute that provides a link to an image e.g. <img src=link>. In order to learn some HTML we will be using Thimble. Thimble has a text editor in the left-hand window where you can write text like in a document editor. The right-hand window will show you how a browser will interpret this text and show it to the user. For your HTML assignment you need to go to this thimble page url: https://thimble.webmaker.org/p/ffjt. There you'll find an unformatted news article from Al Jazeera (with some extras). The text which has been copied and pasted into the text editor looks like it would in a document editor, with paragraphs. Now look to the right at what the user will see. Add /edit on to the url and begin adding the necessary tags in the left-hand window and see the results in the preview window on the right! If you click on any element in the preview it will take you to the corresponding script in the editor window. Now that you know how its done we need you to: Make the first sentence the main headline

Make the second sentence the secondary headline Add paragraph tags to the paragraphs Make the last modified information italic Put this image (http://www.dw.de/image/0,,16233560_401,00.jpg ) in under the last modified information Make Tight race a second headline The sentence starting If another party wins ... is a quotation from http://www.reuters.com/article/2012/09/11/us-dutch-election-idUSBRE88A0UW20120911 Add the tags to make it into a blockquote. Parties In The Dutch Election is a second headline and the party names should be in an unordered list

A word of the wise: There are many many more HTML tags e.g. http://www.w3schools.com/tags/default.asp HTML5 adds many new syntactic features. These include the new <video>, <audio> and <canvas> elements. These features are designed to make it easy to include and handle multimedia and graphical content on the web. Other new elements, such as <section>, <article>, <header> and <nav>, are designed to enrich the semantic content of documents. In the next assignment you'll style the article in CSS! --------------------------------------------------------CSS is short for Cascading Style Sheets. CSS adds all the dressing to the page which you have marked up in HTML. Things like font size and colour, background colour and borders are all changed using in CSS. Technically, you should have a separate document with all your styling (called the style sheet) but for the purpose of this exercise you will use inline CSS to style the news article. This means we'll be adding style attributes to our HTML tags. The a typical styled tag looks something like <tag style=style-property:style-value></tag>. For example <p style="color:green">The text in this paragraph is green!</p>. To add more than one property, just separate the properties with a semi-colon ";" e.g. <p style="color:green ; font-size:8px">The text in this paragraph is green and the fonts are 10 pixels in size! </p> From the last assignment you should have gotten something like this https://thimble.webmaker.org/p/ffyc. And now you'll add some style to this article. Here are the style properties we'll be using for this exercise: background-color color text-align font-family

font-size

Now, go to the last assignment link about and do the following: Make the headline font Arial Make the "Last modified" font blue and size 8px Give the blockquote a background colour of #E0E0DE, font size 0.8em and font family Georgia Centre the "Parties In The Dutch Election" heading and make it the Georgia font Give the unordered list a background colour of #F2D59D

Note: all the spellings are in American English so the properties are color and center The above recommended colours may look strange to you. Even though colors are pretty subjective, there are some standard values like white, black, blue, red, green, yellow and even teal. You can sometimes specify a light colour like light gray. But all colours in HTML are specified by # followed by 6 alphanumeric characters. This is because HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). So the first two character specify the red value, the second two the green and the last two the blue. You can find the HEX value for any colour in HTML with http://www.colorpicker.com/ The next thing that might look weird is the 0.8em. Em makes the font size measurements relative to the size of the "M" in a font (based on traditional typographic measurements), so 0.8em is 80% of the current font size. You can also specify a size in terms of pixels, e.g. 80px but use of em sizes is preferable. Here is a challenging CSS assignment. Try to make the list of Dutch parties into an info box. To do this you will need to use properties like padding and margin. The layout of their values can have one of four forms. For example: margin:10px 5px 15px 20px; top margin is 10px right margin is 5px bottom margin is 15px left margin is 20px margin:10px 5px 15px; top margin is 10px right and left margins are 5px bottom margin is 15px margin:10px 5px; top and bottom margins are 10px right and left margins are 5px margin:10px; all four margins are 10px Note: Negative values are not allowed.

Now that you know how its done we need you to: Surround the "Parties In The Dutch Election" header and the unordered list in a <div> tag. Tags like div and span don't do anything where you will see a direct change. They act as a free tag with which to group structures and styling. Cut and paste everything in the <div> to just below the paragraph starting "Party leaders had one more chance..." Give the "Parties In The Dutch Election" header a padding property of value 0 1em and a font-size of 1.2em. To move your info box to the right the div needs a property float of value right and a margin of 0 0 0 1em

Does your thimble look like this? https://thimble.webmaker.org/p/iyr Feel free to play around, remix and restyle what you see online! -----------------------------------------------------------------------------------------------------------------------------------------BIAS THE NEWS Mixing it up Now for some fun! This is a group exercise and we have not laid out any specific steps but want to see what you come up with. We want you to bias the news. Think headline, think photos, think quotes but also think colours and fonts. We want you to pick a story. It can be about anything you want but we do recommend it be a meaty story; a continuing one with many angles. Then we want you to figure out ways to bias it! Make it left leaning, right leaning, scaremongering, religiously biased, Western biased, tabloid-like, etc. Think what would it look like on the Huffington Post site or on the New York Times or The Daily Mirror. Pick all the different ways it can be portrayed. Then find an base article (maybe something from Reuters) and each member of your team will have to use their HTML/CSS skills to bias it to their chosen leaning. For example, take Hurricane Sandy. You could make it leaning towards a climate change agenda, or alarmist, or even religious. Take a look at what your teammates have come up with. Feel free to work in pairs or consult with other groups. If youre happy with your results and feeling up to it, get your group back into an editorial team and make one impartial and objective story from your various Thimbles. ---------------------Getting social with it

Before we asked you to start off with a news story. Now we want you to think of a dense news story but we dont want you to look on news sites, we want you to take your sources from the social web! YouTube, Flickr, Twitter, etc. Make a storify. But make it with an agenda in mind. ----------------------------------------------------------------------------------------------------------------------------- ----------------------------For a great and easy way to learn HTML, CSS, JavaScript (and now Python and Ruby) check out http://www.codecademy.com/ Popcorn story http://www.bbc.co.uk/news/uk-18798942