introduction to html with thimble

7/30/2019 Introduction to HTML with Thimble

1/5

HTML stands forHyperText Markup Languageand 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

and
. For instance, to show separate paragraphs, you write:
This is the first paragraph

This is the second paragraph

This is the third paragraph

Here are the markup tags you will need for the first exercise:

= paragraph = primary header

= secondary header

= making text italics ( is the tag for making text bold)

= an unordered or bulleted list (like this one)

= marks a piece of text as being a list item

= marks a piece of text as being a quotation

= image tag for inserting a picture

These last two tags require something extra. They requireattributes. Attributes provide additional

information about HTML elements. So for the you should, as good journalistic practice, add

a cite attribute which is a link to where the quote has come from, e.g. quotation.

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. .

In order to learn some HTML we will be usingThimble. 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
http://en.wikipedia.org/wiki/Htmlhttp://en.wikipedia.org/wiki/Htmlhttp://en.wikipedia.org/wiki/Htmlhttp://en.wikipedia.org/wiki/Html#Attributeshttp://en.wikipedia.org/wiki/Html#Attributeshttp://en.wikipedia.org/wiki/Html#Attributeshttps://thimble.webmaker.org/en-US/https://thimble.webmaker.org/en-US/https://thimble.webmaker.org/en-US/https://thimble.webmaker.org/p/ffjthttps://thimble.webmaker.org/p/ffjthttps://thimble.webmaker.org/p/ffjthttps://thimble.webmaker.org/p/ffjthttps://thimble.webmaker.org/en-US/http://en.wikipedia.org/wiki/Html#Attributeshttp://en.wikipedia.org/wiki/Html


2/5

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

HTML5adds many new syntactic features. These include the new,and

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 , , and , are

designed to enrich the semantic content of documents.

In the next assignment you'll style the article in CSS!

---------------------------------------------------------

CSSis 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 . For example

The text in this paragraph is green!
. To add more than one property, just
separate the properties with a semi-colon ";" e.g.

The text in this

paragraph is green and the fonts are 10 pixels in size!

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
http://www.dw.de/image/0,,16233560_401,00.jpghttp://www.dw.de/image/0,,16233560_401,00.jpghttp://www.dw.de/image/0,,16233560_401,00.jpghttp://www.reuters.com/article/2012/09/11/us-dutch-election-idUSBRE88A0UW20120911http://www.reuters.com/article/2012/09/11/us-dutch-election-idUSBRE88A0UW20120911http://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://en.wikipedia.org/wiki/Html5http://en.wikipedia.org/wiki/Html5http://en.wikipedia.org/wiki/HTML5_videohttp://en.wikipedia.org/wiki/HTML5_videohttp://en.wikipedia.org/wiki/HTML5_videohttp://en.wikipedia.org/wiki/HTML5_audiohttp://en.wikipedia.org/wiki/HTML5_audiohttp://en.wikipedia.org/wiki/HTML5_audiohttp://en.wikipedia.org/wiki/Canvas_elementhttp://en.wikipedia.org/wiki/Canvas_elementhttp://en.wikipedia.org/wiki/Canvas_elementhttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttps://thimble.webmaker.org/p/ffychttps://thimble.webmaker.org/p/ffychttps://thimble.webmaker.org/p/ffychttps://thimble.webmaker.org/p/ffychttp://en.wikipedia.org/wiki/Cascading_Style_Sheetshttp://en.wikipedia.org/wiki/Canvas_elementhttp://en.wikipedia.org/wiki/HTML5_audiohttp://en.wikipedia.org/wiki/HTML5_videohttp://en.wikipedia.org/wiki/Html5http://www.w3schools.com/tags/default.asphttp://www.reuters.com/article/2012/09/11/us-dutch-election-idUSBRE88A0UW20120911http://www.dw.de/image/0,,16233560_401,00.jpg


3/5

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 allcoloursin 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 withhttp://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.
http://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colorshttp://www.colorpicker.com/http://www.colorpicker.com/http://www.colorpicker.com/http://www.colorpicker.com/http://en.wikipedia.org/wiki/Web_colors


4/5

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 tag. Tags

like div and span don't do anything where you will see a direct change. They act as a free tag withwhich to group structures and styling.

Cut and paste everything in the 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 makeone impartial and objective story from your various Thimbles.

----------------------

Getting social with it
https://thimble.webmaker.org/p/iyrhttps://thimble.webmaker.org/p/iyrhttps://thimble.webmaker.org/p/iyrhttps://thimble.webmaker.org/p/iyrhttps://thimble.webmaker.org/p/iyr


5/5

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 astorify. 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 storyhttp://www.bbc.co.uk/news/uk-18798942
http://storify.com/http://storify.com/http://storify.com/http://www.codecademy.com/http://www.codecademy.com/http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.codecademy.com/http://storify.com/

introduction to html with thimble

Documents