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:

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/fu8a/edit 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 it’s done we need you to:

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.

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 8 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:

Now, go to the last assignment link and do the following:

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:

Note: Negative values are not allowed.

Now that you know how it’s done we need you to:

Does your thimble look like this? https://thimble.webmaker.org/p/iyr

Why not do away with tedious inline styling? Styling is almost always done in separate sheets. These are scripts put in the same directory as the main page and attached using a <script></script> tag in the <head> of the main page. For now, we can add CSS to the entire webpage without having to add it to each tag by using a <style></style> tag in the <head> of the page. To style big chunks of markup you need to surround segments with <div></div> tags. To hook on styling to each particular div you need to give it an attribute id e.g. my unordered list is going to be surrounded by <div id=”info-box”></div>.

To signal to the markup that we are going to attach styling to the div or elements in the div our general layout is:

tag {

        property: value;

        property: value;

}

For example if we wanted to make the text in the <body> of font Arial we would type:

body {

        font-family: Arial;

}

Now the whole point of adding divs is that we can add style to certain parts of the article. So to move the unordered list to be to the right of the browser we would type:

#info-box {

        float: right;

}

Note: # signifies all tags with id of the #. For a class we use . (dot).

If we wanted to style tags inside the info-box div we type:

#info-box ul {

              background-color: #F2D59D;

      }

Check out this thimble https://thimble.webmaker.org/p/f4gc/edit and see how you like style sheets instead of inline styling.

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 you’re 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 don’t 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 and  CSS check out http://www.codecademy.com/tracks/web