Sunday, 20 November 2011

Controlling the Web

FEDERAL COMMUNICATIONS COMMISSION Preserving the Open Internet

Google lawyers explain how the financial blockade of Wikileaks could apply to anyone under SOPA.

Documents obtained by Wall St Journal open window into a new global market for off-the-shelf surveillance technology

UK Internet Censors
Blacklist Fileserve File-Hosting Service

HP Computers Underpin Syrian Surveillance

When you request your personal data, Facebook generously keeps most of it so it doesn't overwhelm you.

The Internet gold rush: why your data is valuable.

A secure Internet can save people's lives.

The Internet can recognise your face.

How does Twitter choose trending topics?

Who controls the Internet?

Who controls Asian cyberspace?

Introduction to Parallel Programming and MapReduce

This may, for some of you, be helpful background for the lecture on Indexing the Web.


Google Code: Introduction to Parallel Programming and MapReduce

Wednesday, 16 November 2011

Eliza lab

Today you'll experiment with using regular expressions to mimic Eliza's responses. Using this tool, type in search patterns to match the kinds of sentences that people often type as input to Eliza. Then in the replacement pattern box, write a pattern to produce an Eliza-like response. For example, the search pattern
  • I am (\b\w+\b)
with the replacement pattern
  • How long have you been $1?
will match the sentence
  • I am bored
typed in the input text box and produce
  • How long have you been bored?
in the output text box.
So, now you try it. Write a regular expression search pattern to match sentences of the form:
  • I am sick
  • I am tired
  • I am hungry
Does your search pattern match the following strings and produce the kind of response you would expect?
  • Today I am bored
  • I feel very happy
  • I feel awfully tired
If not, fix your search pattern so that the system generates sensible outputs for each of these. Now try these
  • I feel cold and I want a nap
  • I feel cold and I want a hot drink
  • I like food and drink
  • I like to sing and dance
What if you wanted to generate the response:
  • Have you always enjoyed eating and drinking
in response to the input:
  • I like to eat and drink
Would your search pattern also work for
  • I like to sing and dance
Now write a search pattern that will match sentences like:
  • I am tired and hungry
and produce the response:
  • What do you think makes you hungry and tired?
Now play with this version of Eliza. Find cases where it doesn't respond very naturally and try and write search and replacement patterns that solve the problems you encounter. (Note: they may not all be solvable just by this simple search and replace method.)

Monday, 14 November 2011

More links on SOPA and Protect-IP

SOPA stands for the Stop Online Piracy Act. It is one of two bills being considered by the US congress. The other is the Protect-IP Act.

Note that in a topical and contentious area such as this, Wipipedia may not reflect a settled consensus. It is useful, and sometimes illuminating, to look at the page history to see the "edit wars" that erupt.

Friday, 11 November 2011

Turmoil on the net ...

Twitter stories:

  1. How the US Justice Department legally hacked my Twitter account
  2. Twitter's privacy policy and the Wikileaks case
  3. Who gets custody of Twitter a/c when an employee quits?
  4. CIA tracks tweets

And more ...

What is the Social Graph?

Iran says it is fighting Duqu computer virus, similar to one aimed at nuclear site last year.

Zetas Drug Cartel Reportedly Murders Internet Chat Room Users

Online Bullying Really Not That Common

Google cars use massive amounts of data

Footage from test runs of Google driverless cars. Shows what you can achieve once you have the data.

Policy Issues : some possible leads ...

Please find below a collection of links I have collected over the past couple of months, loosely grouped. I hope these may provide food for thought as you prepare your essay for your final assignment.

These links are provided 'as is'. I make no guarantees that the information provided is reliable (it is up to you to judge that). You should not assume that my linking implies endorsement: I may (privately) endorse or condemn the views expoused.

Bill Gates Shaping the Internet is still available for comment on NB.

What are governments (and others) doing?

Neelie Kroes speech at EU Hackathon: on transparency and blocking (video)

"The future of the internet is too important to be left to chance" Foreign Secretary William Hague reflects on the London Conference on Cyberspace

Background Briefing from the US State Department on Hillary Clinton's Participation In the London Conference on Cyberspace

EU Politician Wants Internet Surveillance Built In to Every Operating System

The U.S is seeking detailed info on the trade impact of Chinese policies that block U.S. companies' websites in China

Google asked to remove 135 YouTube videos for 'UK national security issues'

NSA whistleblower Thomas Drake details intelligence cock-ups - 'Government and companies routinely abuse data privacy'

Who is spying on whom? A crowd-sourced Wiki for information on 'the intelligence contracting industry'.

Technological fixes?

Facebook's massive cyber-security system. Discovering what Facebook knows about you.

FBI official calls for secure, alternate net. Telecomix DNS is going next-level with its own decentralized infrastructure to replace the hierarchical DNS currently in place.

Google's advice on on-line safety.

Researchers developing cyber security software to wipe mobile data based on location

How could regulation make a difference?

Judge rules BT must pay for software that will block access to a site that links to free movies.

The worst thing about censorship is what you don't see

Unfortunately, "Google and the Culture of Search" will not be published until 2012. However, you may want to include your thoughts on "search technology’s broader implications for knowledge production and social relations" in your essay. Those without time machines will have to make do with other sources, and the publisher's blurb (follow the link for this), for inspiration:

Can an algorithm be wrong?

Better the devil you know ... What happens if the banks shut down wikileaks?

PROTECT IP Act would break DNS

Law professors say, "PROTECT IP Act is unconstitutional"

EFF on the PROTECT-IP act

Copyright

Some recent news stories on copyright and IP.
Will Hollywood Break the Internet?
Copyright bill is the 'end of the Internet'.
Warner Bros issued takedowns for files they never saw—and didn't own.

Patents

Will Patents kill hte internet?

Hacking pro bono and otherwise

Online hackers threaten to expose drug cartel's secrets.
Denial of service: Wikipedia Italy went on strike against an 'idiotic proposed law' (lang=it : use Google translate).
Video: Attack of the Hactivists

The unmanned aircraft drones that USA uses to kill people in other nations have been hacked.

State-sponsored hacking in Germany

Hackers used a Trojan horse to break into the systems of more than 50 companies, many of them in the chemical and defense sectors. Symantec traces one command-and-control server to China.

How things go wrong

Programmer's error when creating a regular expression leads to calls for a criminal investigation

... the blame can be laid on a poorly-crafted regular expression. In computer science terms, regular expressions (often abbreviated as "regex") are used for complicated forms of text matching and substitution. They rank among the highest forms of programming arcana, primarily because of their flexibility, but are also some of the most prone to bugs.

Crowd-sourcing crime: Crowd-sourcing began as a legitimate tool to leverage the wisdom of the crowds; the same techniques are increasingly being adopted by the criminal underground for nefarious purposes. Video: The Business of Illegal Data
Feds Indict 7 in massive click-fraud scheme that hit 4 Million Computers

Stuxnet Clone 'Duqu' Possibly Preparing Power Plant Attacks. Windows kernel 'zero-day' found in Duqu attack

A week in Internet censorship: Thailand, Sri Lanka, Egypt, and a suit against Amesys for aiding Libyan surveillance.
U.S. Firm, Blue Coat, provides the technology that Syria uses to Block the Web. Blue Coat told investors its reputation could be harmed if foreign gov clients used tech to violate human rights. Washington Post on this Story

Chinese state media says three people have been arrested for "spreading false rumours" online, warning authorities will quash all such activity.

How WikiLeaks complicated the lives of Belarusian dissidents.
Researchers uncover privacy flaws that can reveal users' identities, locations and digital files. Someone hacked Israel's biometric database. Now 9 million people's personal info is on the loose.

Wednesday, 9 November 2011

Today you will explore the use of regular expressions to scrape information from a web page. You will use the regular expression sandpit. Read the instructions on the sandpit, and experiment to make sure you understand how it works.

The regex crib sheet may be helpful, for reference.

The regular expression sandpit lets you enter a regular expression, and then tag the strings that match it with HTML markup. For example, here is some text scraped from http://uktv.co.uk/food/recipe/aid/513585
The first part of this exercise uses this text.

Ingredients
8 tbsp olive oil
450 g cooked peeled prawns, (ideally freshly shelled), drained and patted dry
1 medium onion, finely chopped
4 stick celery
2 cloves garlic, finely chopped
1 red chilli, de-seeded and finely chopped
1 bunch of fresh mint, leaves chopped
100 g cherry tomatoes, halved
juice of 1 lemons
4 courgettes, grated
150 ml white wine
black pepper
500 g fresh tagliarini
200 ml fresh vegetable stock
25 g unsalted butter
40 g parmesan, freshly grated
Method
Heat the olive oil in a large, heavy-based frying pan. 
Add the prawns and fry until lightly browned. 
Add the onion, celery, garlic, chilli and mint. Fry until the prawns turn nutty brown. 
Add the cherry tomatoes and cook for 2 minutes. 
Stir in the lemon juice, then the courgettes. Cook for 5 minutes. 
Pour in the white wine, bring to the boil and cook for 2 minutes. Remove from direct heat. 
Bring a large pan of salted water to the boil. Add the fresh tagliarini and cook until al dente, around 2 minutes. Strain. 
Add the strained tagliarini to the prawn mixture, followed by the vegetable stock, butter and Parmesan cheese. 
Mix well together over a medium heat with a wooden spoon until glossy. Season with salt and freshly ground pepper and serve at once.

Most recipes on this site have a similar format.

Paste the text into the regular expression sandpit.

Task 1

First, put the regular expression [0-9].* into the regexp box. Then put li into the tag box. This shows you the result of enclosing each match for the regular expression between tags <li> and </li>.

This almost lists all the ingredients, but not quite. Try using the following regular expressions, 1 by 1. Try to understand what is happening.../p>

  • [0-9].*
  • \n[0-9].*
  • \n([0-9]|juice).*
  • \n([0-9]|juice|black).*

Once you are satisfied that you have successfully picked out all the ingredients, click tag text.

To finish the markup of the ingredients, try the regular expression (<li>\n.*)*</li> first with b as the tag, and then ul. Again click tag text.

Now use similar methods to tag each step in the method with li and the whole sequence of steps with ol.

Complete the markup by tagging the words "Ingredients" and "Method" with the tag h2.

Task 2

Now find a recipe online (choose one that is well-structured). Scrape the text using copy and paste and use appropriate regular expressions and tags to mark it up in HTML.

Task 3

Find the Amazon UK page listing Digital Cameras. Use View Source in your browser to examine the html for this page. How are the prices tagged?

Copy the text from the web page (not from the View Source page) and paste it into the regular expression sandpit replace the Jabberwocky poem.

Can you write a regular expression that selects all the prices on this page and nothing else?


The Amazon page also has model numbers, details of resolution (megapixels), zoom factor (e.g. 8x Optical) and screen size (e.g. 2.7 inch), but these are not tagged specially in the page source.

To tag them you would first have to find them. Use the regular expression sandpit to find a regular expressions for each data type – to find all occurrences of each of each data type.

Task 4

For extra fun, scrape the text from this page at www.parliament.uk and tag each address in bold.

Assignment 4: Policy and technology

For your final assignment you should write an essay (2,000-3,000 words) on:

Policy and technology: can we save the internet?


The Internet started as a cooperative endeavour based on mutual trust between organisation with common goals. The open publication and flow of information that the Internet supports has been credited with many improvements, for example in education, healthcare, social inclusion, democratic accountability, and business efficiency.
However, the open nature of the internet has also provided new opportunities for criminals, bigots, repressive governments and unscrupulous corporations, to steal, bully, control and exploit. Your first essay for this course discussed some of these issues.

Your essay for this assignment should address some of the technical and regulatory measures that may be used, for good or ill, by governments, corporations and individuals — to impose and evade controls, to launch and defend against attacks. How could and should governments control the internet? Who should have the power to control what you can post and what you can see? How can such powers be exercised, for good and ill? Can they be effective without destroying the freedoms that have, arguably, stimulated global creativity and innovation so successfully?

You must include a list of sources (not included in the word count). You should quote only sparingly, and identify and attribute any direct quotations.

Links to some relevant recent articles will be posted on this blog.

Bill Gates' article (please leave some comments) at
http://nb.mit.edu/f/1799
provides some useful historical perspective – what has changed since the turn of the century?

You may also find the following links helpful for current new and views:

http://googlepublicpolicy.blogspot.com/

en.wikipedia.org/wiki/Network_neutrality

http://www.savetheinternet.com/faq

en.wikipedia.org/wiki/Internet_privacy

www.facebook.com/savetheinternet

You must include a list of sources (not included in the word count). You should quote only sparingly, and identify and attribute any direct quotations.
The hand-in deadline for this assignment is 4pm on 25th November.
You should submit your report via TurnItIn. See email of 21st September for signup details. Once you have registered, you can sign in at the following url:
https://submit.ac.uk/
The deadline for your submission for this final assignment is 1600 UTC on Friday 25th October November. Unless you have good reason for not meeting this deadline, and we have in advance of the deadline agreed an extension, late work will not be marked.

Sunday, 30 October 2011

Assignment 3 – a drawing in SVG

For your third assignment, you should create a drawing in SVG. Your drawing should create as much variety and interest as you can using as little code as you can.

In particular, you should define and re-use symbols and use css to create variety.
  • If you are an informatics student, your code should also include examples of svg animation.
  • If you are a mathematics student, your code should include uses of svg transformations.
Others are also welcome to use these features of SVG.

For this assignment you have to produce three files (which you can store in a Folder on your Desktop on the Macs in the 3.01 lab mdash; use -assignment3 as the name of this folder).

These files are:
report
A short (max one page) report.
drawing.html
An HTML file containing the SVG representation of your drawing. This file should not contain any style attributes.
svg.css
This file should use CSS properties to style your svg.

Each file should contain your student ID in a comment near the beginning of the file.

drawing.html should use one of the following templates (your code should go inside the sag tags):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="svg.css" />
    <title>SVG and CSS sandpit</title>
  </head>
  <body>

    <svg viewBox="0 0 1000 1000">

    </svg>

 </body>
</html>
This creates a canvas with both x and y coordinates ranging from 0 to 1000. Your css should make the width and height of this element equal to ensure a 1:1 aspect ratio.

Unfortunately our browsers do not render animation when svg is rendered within html. If you use animation, use the following template to demonstrate your drawing, in a file named svg.svg
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="svg.css" type="text/css"?>
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">

</svg>
You can open this file as usual in Safari. You may find it helpful to examine this example.

Submit your assignment by email To annette.leonhard@ed.ac.uk Subject: Assignment-IL-3

Wednesday, 26 October 2011

SimpleVectorGraphics

SVG is an XML dialect for describing simple pictures.

For example, you can describe two circles and a rectangle. These are two of the basic shapes SVG can draw.
<circle cx="100" cy="100" r="5"></circle>
   <circle cx="200" cy="150" r="10"></circle>
   <rect height="150" rx="10" ry="5" 
         width="200" x="50" y="50"></rect>
We use css to style the shapes. All SVG shapes have two attributes named 'stroke' and 'fill' which are used to paint them.
circle{
fill:pink;
stroke:red;
}
rect{
stroke:green;
fill:none;
}
Try this in the SVG sandpit. Copy the SVG and CSS given above into the right text boxes. Click render SVG then Apply CSS.

We can define a symbol by enclosing some basic objects in <symbol> tags and giving it an ID. Then we can use this symbol. See the examples in the sandpit.

Wednesday, 12 October 2011

XSLT Assignment 2 (for Informatics students)

Unless you are also studying another Informatics course, you should do the HTML version of this assignment.

If you are doing this XSLT version of the assignment, first use the lab to do some simple experiments with XSLT.

Go to the w3schools xsl page. This provides an environment where you can experiment with XSL. The example given sets up a simple table. You can edit the XML of the XSLT and then click the Edit and Click Me button to see the result.
  1. Instead of a table, construct a bulleted list of entries, with the title in italics followed by the name of the artist.
  2. Try to present the information in different forms.
  3. Now add the price.  Use CSS to precede it by a £ sign.
  4. Try the sorting example from w3schools.
  5. Can you sort the CDs by price instead of by the artist's name?
  6. Try the conditional test example.
  7. Can you just list the CDs from the 1980s?
  8. Now put the xml version of your recipe in the XML box and try to present it by writing appropriate XSLT in the right-hand box.
  9. You should submit your recipe(s) as XML, together with XSL and CSS for presentation.

Notes

Include your matriculation number (student ID) in each file you submit.
In xml and html please include your student id between <!-- and --> inside the top-level tag of your code. For css, please include your student ID between /* and */ at the end of your recipe.css file.
Submit your assignment by email To annette.leonhard@ed.ac.uk Subject: Assignment-IL-1
You will have to edit a number of text files. We recommend TextEdit on the Mac, but you can use any editor that allows you to edit HTML as plain text. To edit files as plain text in TextEdit, go to the TextEdit Preferences (in the TextEdit menu). Select the Plain Text format under the New Document tab, then tick the box for Ignore rich text commands in HTML files, under the Open and Save tab.
For this assignment you have to produce four files (which you can store in a Folder on your Desktop on the Macs in the 3.01 lab).
These files are:

report
A short (max one page) report.
recipe.xml
An XML representation of your recipe.
recipe.html
An XSL transformation to produce the HTML layout of your recipe.
recipe.css
This file should use CSS properties to style your layout. You may find it useful to look at some examples.
Your folder should also include your image(s) and any other files used in your presentation.

Tuesday, 11 October 2011

HTML Assignment 2


  1. Starting again from the contents of your recipe.txt file, mark up your recipe using HTML tags, using the following template:

    <xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" type="text/css" href="recipe.css" />
    <head>
    <!-- put your student number here -->
    <title>
    ...
    </title>
    </head>
    <body>
    ...
    </body>
    </html>

    The title of your recipe should replace the first ellipsis; the second ellipsis should be replaced by well-formed HTML using the HTML 5 tags.
    The HTML sandpit is set up to process the body of the recipe. So when using this tool just copy the code from the HTML text box to replace the second ellipsis.
  2. Create a file called recipe.css to display your recipe.html file. You can again use the HTML sandpit to experiment, then cut and paste your css code into your text editor so you can save it.
  3. Finally, write a brief report (no more than one page) comparing your experiences with semantic (xml) and presentational (html) markup. You should also report on any problems you had and how you solved them. Save it as report

You should be able to see the results of your work by double-clicking on the recipe.html file. 

Notes

Include your matriculation number (student ID) in each file you submit.
In xml and html please include your student id between <!-- and --> inside the top-level tag of your code. For css, please include your student ID between /* and */ at the end of your recipe.css file.
Submit your assignment by email To annette.leonhard@ed.ac.uk Subject: Assignment-IL-1
You will have to edit a number of text files. We recommend TextEdit on the Mac, but you can use any editor that allows you to edit HTML as plain text. To edit files as plain text in TextEdit, go to the TextEdit Preferences (in the TextEdit menu). Select the Plain Text format under the New Document tab, then tick the box for Ignore rich text commands in HTML files, under the Open and Save tab.
For this assignment you have to produce four files (which you can store in a Folder on your Desktop on the Macs in the 3.01 lab).
These files are:

report
A short (max one page) report.
recipe.xml
An XML representation of your recipe.
recipe.html
An HTML representation of the layout of your recipe.
recipe.css
This file should use CSS properties to style your layout. You may find it useful to look at some examples.
Your folder should also include your image(s) and any other files used in your presentation.

Power Peering

Some content providers are national or global operators. They don’t need to connect via Tier 1. They have Tier 2 peering agreements. 
But those who control the access networks control access to consumers. “Why,” they ask, “should we pay transit charges to tier 2?”  If they want access to our customers, they should pay us. 
So they see themselves as higher in the pecking order than the content providers – and, although they are already charging their customers for internet access, they also want to charge the content providers for access to these customers.

A logical outcome of such exploitation of a monopoly over customer ‘eyeballs’ would be to reverse some of the flows of cash through the hierarchy of ISPs.

Dr Peering gives an excellent account of one example (involving Comcast, Level3 and Netflix):
http://drpeering.net/AskDrPeering/blog/articles/Ask_DrPeering/Entries/2011/9/6_Access_Power_Peering.html


PC World see a danger here:

Comcast Toll on Netflix Screams for Net Neutrality


Comcast fired the net neutrality "shot heard round the world" when it throttled BitTorrent peer-to-peer networking traffic. 
http://www.pcworld.com/businesscenter/article/211964/comcast_toll_on_netflix_screams_for_net_neutrality.html


Comcast see it slightly differently
http://blog.comcast.com/2010/11/10-facts-about-peering-comcast-and-level-3.html
and other weigh-in to support them
http://www.digitalsociety.org/2010/11/level-3-outbid-akamai-on-netflix-by-reselling-stolen-bandwidth/

The latter piece is by George Ou, whose independence has been called into question elsewhere:
http://www.roughlydrafted.com/2007/08/24/zdnets-george-ou-exposed-as-ignorant-microsoft-shill-zoon/

It comes from "Digital Society" a 'think tank' funded by Jon Henke, and Arts+Labs which is itself funded by Viacom, NBC Universal, AT&T, Broadcast Music, Inc. (BMI), Verizon, Auditude, Microsoft,
Songwriters Guild of America, Jib Jab, Blue Pixel, Cisco,  and the American Society of Composers, Authors and Publishers (ASCAP).

Monday, 10 October 2011

Trusting Information on the Internet


Man pays $200,000 to save fake girlfriend in online scam

http://m.techspot.com/42583/

How far should you trust the information that you’re getting on the internet?
http://www.thefifthestate.com.au/archives/28546


A Thought Police for the Internet Age
http://www.counterpunch.org/2011/09/28/the-dangerous-cult-of-the-guardian/

Use and abuse of the Internet

Internet is easy prey for governments

Some of us might like to believe that the genie is out of the bottle and that we all have access to an unstoppable decentralized network. In reality, the internet is entirely controlled by large corporations and central authorities.
http://edition.cnn.com/2011/OPINION/02/05/rushkoff.egypt.internet/


Secret Orders Target Email

The U.S. government has obtained a controversial type of secret court order to forceGoogle Inc. and small Internet provider Sonic.net Inc. to turn over information from the email accounts of WikiLeaks volunteer Jacob Appelbaum, according to documents reviewed by The Wall Street Journal.
http://online.wsj.com/article/SB10001424052970203476804576613284007315072.html

Egypt’s Internet shutdown

We are following the current events in Egypt with concern as it appears that all incoming and outgoing Internet traffic has been disrupted. The Internet Society believes that the Internet is a global medium that fundamentally supports opportunity, empowerment, knowledge, growth, and freedom and that these values should never be taken away from individuals.

http://isoc.org/wp/newsletter/?p=3091

Anonymity and the Dark Side of the Internet


'I wrote a book titled “There’s No Such Thing as Free Speech and It’s a Good Thing, Too.” This book could be titled “There is Such a Thing as the Free Unregulated Internet and It’s a Bad Thing, Too.”'
http://opinionator.blogs.nytimes.com/2011/01/03/anonymity-and-the-dark-side-of-the-internet/

The next Digital Decade
The book's 31 essays address questions such as: Has the Internet been good for our culture? Is the Internet at risk from the drive to build more secure, but less “open” systems and devices? Is the Internet really so “exceptional?” Has it fundamentally changed economics? Who—and what ideas—will govern the Net in 2020? Should online intermediaries like access providers, hosting providers, search engines and social networks do more to “police” their networks, increase transparency, or operate “neutrally?” What future is there for privacy online? Can online free speech be regulated? Can it really unseat tyrants? The book is now available as a free downloadable PDF and for purchase in hardcover.

Wednesday, 28 September 2011

Basic skills 28 September 2011

Before starting on this week's exercise, which is an introduction to assignment 2, you should make sure you are set up to use the Macs in the lab, and check that you can complete some simple tasks.

If you have got this far you have already logged in and are using a browser. If you're not confident about any of the following four tasks, work through this exercise before starting on Lab 2:
  1. Copying and saving text from a web page
  2. Opening an html file in a browser
  3. Editing and modifying an html file
  4. Commenting to give us feedback

Copying and saving text from a web page

  • Open the TextEdit application. This will open a blank document.
  • In the Format menu select Make Plain Text
  • Copy the text below from the web and paste it into your TextEdit document.
    <!DOCTYPE HTML>
    <html>
        <head>
            <title>HTML Hello World</title>
        </head>
        <body>
            <h1>Hullo!</h1>
            <div>
                <img src="http://bit.ly/b1PFic" 
                     alt="Hello World!" />
            </div>
            <h2>h2 heading</h2>
            <p>This is our HTML sample code. 
               It shows several elements:
            </p>
            <ul>
                <li>The html document block.</li>
                <li>The head, which contains 
                    the title of the page.</li>
                <li>The body, 
                    which contains the content.</li>
                <li>An h1 and an h2 header.</li>
                <li>An image.</li>
                <li>A paragraph.</li>
                <li>An unordered list.</li>
            </ul>
        </body>
    </html>
    
  • Did you select Make Plain Text in the Format menu? – If not, do it now!
  • Save the TextEdit document – call it "something.html". (If you are asked whether you want to use ".html" or ".txt", the answer is ".html".)

Opening an html file in a browser

  • Now make a new browser window.
  • Use Open File from the browser File menu to open the document you just saved.

Editing and modifying an html file

  • Edit the document in the TextEdit window.
  • Save it.
  • Reload the page in the browser window.

Commenting to give us feedback

  • Please leave us a comment, using the Comment button below.
  • Comments are moderated so your comment won't appear immediately, but we will read it.
  • Let us know if anything was too hard or too easy.