Wikiversity

Web Science/Part1: Foundations of the web/Web content/Summary, further reading, homework

< Web Science | Part1: Foundations of the web | Web content

Summary, further reading, homework

Learning goals

  1. Understand the separation between content, structure, layout and meta data
  2. Review HTML, CSS, XML, SVG and RDFa
  3. Understand what makes a clean HTML markup ("separation of concerns") vs. unclean one ("mixing responsibilities"); and implications (better or worse maintenance, better or worse personalization, better or worse accessibility)

Video

Script

Wget script (Linux) to download all the videos of this part Run it in a command line and it will download all the videos. 

wget https://upload.wikimedia.org/wikipedia/commons/f/f3/Motivating_Mark_Up_for_Web_Content.webm -O 7-1.Motivating_Mark_Up_for_Web_Content.webm
wget https://upload.wikimedia.org/wikipedia/commons/0/0b/Working-with-XML.webm -O 7-2.Working-with-XML.webm
wget https://upload.wikimedia.org/wikipedia/commons/5/58/Basic_Introduction_to_HTML.webm -O 7-3.Basic_Introduction_to_HTML.webm
wget https://upload.wikimedia.org/wikipedia/commons/4/46/Layout_HTML_elements_using_inline_style_attributes.webm -O 7-4.Layout_HTML_elements_using_inline_style_attributes.webm
wget https://upload.wikimedia.org/wikipedia/commons/8/8b/Motivation_for_usings_stylesheets_rather_than_inline_style_attributes.webm -O 7-5.Motivation_for_usings_stylesheets_rather_than_inline_style_attributes.webm
wget https://upload.wikimedia.org/wikipedia/commons/3/3f/Introduction_to_Cascading_Style_Sheets.webm -O 7-6.Introduction_to_Cascading_Style_Sheets.webm
wget https://upload.wikimedia.org/wikipedia/commons/7/70/Adding_Media_Content_to_a_HTML_file.webm -O 7-7.Adding_Media_Content_to_a_HTML_file.webm
wget https://upload.wikimedia.org/wikipedia/commons/1/14/Introduction_to_metadata.webm -O 7-8.Introduction_to_metadata.webm

It's important while doing these challenges to not think about how the page will be displayed yet, but instead focus on creating meaningful mark-up!

Challenge 1: Which heading to choose?

OK, let's get started! This first challenge builds on the skills you developed in What is HTML, helping you to decide when to use an <h2> heading and when to use an <h1> heading.

This is what your finished page should look like in your browser
Copy-n-paste the following html into a new text-file (in Notepad or your preferred text editor) and save your file with the name html_challenge1.html.

Open your file in a web browser and compare it to the image displayed here (you can right-click on the image to open a larger version in another window or tab).

Your challenge is to add

  • headings (<h1>, <h2>, <h3> etc.)
  • paragraphs (<p>)
  • emphasis and strong (<em> and <strong>)

so that your page looks like the one in the image! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Sundial</title>
  </head>
  <body>

    Sundial

    From Wikipedia, the free encyclopedia.

    A sundial measures time by the position of the sun. The most commonly seen designs, such as the
    'ordinary' or standard garden sundial, cast a shadow on a flat surface marked with the hours of
    the day. As the position of the sun changes, the time indicated by the shadow changes. However,
    sundials can be designed for any surface where a fixed object casts a predictable shadow.

    Most sundial designs indicate apparent solar time. Minor design variations can measure standard
    and daylight saving time, as well.

    History

    Sundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from ancient
    Egypt, and were developed further by other cultures, including the Chinese, Greek, and Roman
    cultures. A type of sundial without gnomon is described in the old Old Testament
    (Isaiah 38:2).

    The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to have
    invented a universal sundial that could be used anywhere on Earth. The French astronomer Oronce
    Fine constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani published
    a treatise on the sundial in 1570, in which he included instructions for the manufacture and
    laying out of mural (vertical) and horizontal sundials. Giuseppe Biancani's Constructio
    instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying
    illustrations.

    Installation of standard sundials

    Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a
    sundial, it may be installed so that it will keep time. However, some mass-produced garden
    sundials are inaccurate because of poor design and cannot be corrected. A sundial designed for
    one latitude can be adjusted for use at another latitude by tilting its base so that its style
    or gnomon is parallel to the Earth's axis of rotation, so that it points at the north celestial
    pole in the northern hemisphere, or the south celestial pole in the southern hemisphere.

    A local standard time zone is nominally 15 degrees wide, but may be modified to follow
    geographic and political boundaries. A sundial can be rotated around its style or gnomon (which
    must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a
    rotation in the range of 7.5 degrees east to 23 degrees west suffices.

    To correct for daylight saving time, a face needs two sets of numerals or a correction table.
    An informal standard is to have numerals in hot colors for summer, and in cool colors for
    winter. Rotating the sundial will not work well because most sundials do not have equal hour
    angles.

    Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute
    variation through the year, known as the equation of time, because the Earth's orbit is
    slightly elliptical and its axis is tilted relative to the plane of its orbit. A quality
    sundial will include a permanently-mounted table or graph giving this correction for at least
    each month of the year. Some more-complex sundials have curved hour-lines, curved gnomons or
    other arrangements to directly display the clock time.

  </body>
</html>

Note: Yes, it's true, a web browser will display the h1 heading very large, and the h6 heading quite small, and all the other headings in between! But don't get into the habit of selecting an h4 heading because it displays with the size that you're after! You can always modify the size of your elements using your stylesheet (more on that later).

The key is to use the headings to structure your information in a useful (and meaningful) way! For example, every page should only ever have one main heading - your h1 heading. An h2 heading should only ever be a sub-heading of your h1 heading. Similarly, an h3 heading should only ever be a sub-heading of an h2 heading etc.

Once you are happy with your work (and have checked it in your browser), read through Paragraphs and Headings tutorial over at Wikibooks and compare your markup! Make sure you chat about the decisions you made with someone around you if possible!

Once you're all finished, read through the following excellent snippets from HTML dog as a summary of what you've learned:

For help with this challenge, you can refer to the HTML Dog's Link Tutorial.

Save your page as links.html and add a link to another page (if you already have an index.html page this would be a good candidate).

Add some links to Google.com and this HTML challenges page (don't forget the http:// bit at the beginning! Try it without and see what happens).

Internal links let you link to parts of the same page, like the table of contents at the top of this page.

Create a longish page (use the Lipsum Generator to painlessly create a big block of text), add an identifier about halfway down the page, and put a link to it at the top of the page.

Now add another identifier to the top of the page, and add a 'Top of page' link at your halfway mark so you can quickly navigate from top to halfway and back again.

(For bonus points, make a link that goes straight to the Hyperlinks heading on this page! How can you find out what identifier you need to link to?)

Add a hyperlink to your email address. When a visitor clicks on the link it should open up their email software with your email address filled in and the subject line set to say "Hello".

You'll have to search to find out how to do this one! What words are best to get the information you need? Hint!.

For merit points consider:

  • why email links might not be such a good idea
  • how to avoid some of the problems they create

Challenge 3: Tables for tabular data

Use the HTML Dog intermediate tutorial on tables to re-create this table.

Notes:

  • If you don't have a border, check the <table> tag for an attribute you may have missed.
  • You shouldn't need to add any bold to get your heading looking like a heading.
  • As always, validate your page to make sure you've got everything in the right place.

Challenge 4: Lists, lists and more lists

Numbers, bullets and definitions

3 lists

Re-create the html page shown here (click on the image to see it full size).

For this challenge, you might want to refer to Tizag's list tutorial.

There are 3 lists on the page: a definition list, an unordered list, and an odd looking ordered list. Hint: To re-create the ordered list you'll need to add a 'type' attribute to each LI tag. Note that adding this attribute will make your code not validate as HTML 4 Strict, but it can be replaced later when you start working with Cascading Style Sheets.

Nested lists

Nested lists

A 'nested' list is a list that contains another list. On the web, they're commonly used for indexes or tables of contents (such as the one at the top of his page!) or menus that show all the pages inside of a section of a website.

Try recreating the nested list to the right. Use your HTML validator software to check errors as you go along -- it's better to pick up problems early on, especially with how lists must be nested in others.

Hint: To recreate the nested list from the image, you'll need to use the 'type' attribute on the UL or OL tags. Like the previous list, adding this attribute will make your code invalid, but we can correct it later by using CSS instead.

Further reading

no further reading defined
You can define further reading here.
In general you can use the edit button in the upper right corner of a section to edit its content.

Discussion

Home   Part1: Foundations of the web   Part2: Emerging Web properties   Part3: Behavioral Models   Part4: Web & society   Participate   About the Web Science MOOC
Course elements  


Quick Navigation: Video - Script - further Reading - Quiz - Discussion


Quick Navigation: Video - Script - further Reading - Quiz - Discussion

Script for: Summary, Further readings & Homework

no script has been added to this page. be the first to do so by editing the source of this page and including a script= field to the lesson template

Quick Navigation: Video - Script - further Reading - Quiz - Discussion

Further information, readings and exercises about Summary, Further readings & Homework
  • Write clean HTML page about your 3 movie/3 song/3 book collection
* Depict it with http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
* validate it with http://www.w3schools.com/xml/xml_validator.asp
  • If you are not blind or having bad eye sight, imagine you are blind. Try to understand texts based on the following input
* Listen to a piece of pure ascii content spoken to you by http://www.acapela-group.com/text-to-speech-interactive-demo.html (or another text to speech module)
* Listen to a piece of html text spoken to you by http://www.acapela-group.com/text-to-speech-interactive-demo.html (or another text to speech module)
* Read Web Accessibility Guidelines (http://www.w3.org/TR/WCAG20/)


Quick Navigation: Video - Script - further Reading - Quiz - Discussion

Check your understanding of: Summary, Further readings & Homework

1 Which of the following statements is true?

HTML does not define layout
HTML tables can be used to position objects
Frames can be used to position objects
HTML is an alternative to XML
XML is better than HTML
HTML pages are always very accessible to blind people
Images make a page inaccessible to blind people

2 Which of the following is true:

WYSIWIG HTML Editors take care of separating content and layout
the paragraph tag is layouting its content
the bold tag is emphasizing

3 Markup of content is of good quality when

transformation rules to target layout are kept to a minimum
the markup can be used for many different purposes
the resulting DOM tree is shallow
the resulting DOM tree is deep
the markup is easy to understand for a human reader
the target problem can be solved


Quick Navigation: Video - Script - further Reading - Quiz - Discussion

Discuss Summary, Further readings & Homework with others

Join the discussion: Ask and questions and provide answers

  • If you click the ask a question button you're question will appear at the bottom of this list.
  • If you click the give an answer you will be able to provide an answer to the questions that have been asked so far.

quiz problem

the bold tag is emphasizing → because if it occurs in a piece of text that is bold for other reasons, e.g. a bold heading, it does not emphasize at all

...but if there is no heading, bold is emphasizing. So, where is the truth? =)

2. I'd rather say that

Markup of content is of good quality when

or the document should be

  • well formed (proper nesting, tag balance, attribute's value quoted, etc)
  • valid (DTD, XSD)

What is "the markup can be used for many different purposes"? You mean that one document can be represented in different ways using different CSS, or what?

I completely can not understand a lot of questions from the quizzes. --oleamm (discuss • contribs) 22:33, 14 February 2014 (UTC)

world time zone

why the earth world time zone is tilted? --27.34.51.128 (discuss) 02:42, 12 December 2017 (UTC)


navigational context


Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Science/Part1:_Foundations_of_the_web/Web_content/Summary,_further_reading,_homework&oldid=2224807"