User:DavidFilip/test

= Web Content =

Overview
 Learning Objectives of this Chapter 
 * 1) Gain a basic understanding of HTML
 * 2) Understand the importance of separation of content and layout
 * 3) Learn about meta data

Introduction
In the first part of this chapter we were introduced to web content and what types of media it includes. We learned why it is important to have markup languages to structure content on the web. We were introduced to XML and created a sample XML file using the example of a list of favorite books. This part will focus on HTML which is a dialect of XML. We will continue using our previous example and create simple web pages displaying our favorite books. We will learn to make our pages more appealing by using different style elements to structure our content. At the end of this chapter we will take a look at meta data and learn why it is so important today.

Learning Objectives of this Section

 * Be able to write simple HTML code having learned a few example elements of HTML (headings, paragraphs, lists,...)
 * See that HTML really is just another simple mark up and has nothing to do with programming
 * Be able to structure web Content using HTML and create pages following a specified structure.

HTML for Web document structures
In this section we will introduce the basic structure of a HTML document. The specification provides a great extend of flexibility as of how to structure content in HTML documents. We will explain some concepts by example. A minimal HTML document might look like the following:

Several options of formatting are relevant for document structure, like such, people are used to in printed documents. Common structural concepts include:
 * headings
 * paragraphs
 * lists
 * emphasizing of text
 * tables

HTML's approach of mapping structure to markup code is that elements define a structure and attributes provide additional information. To understand the approach for the items in the list above, we provide examples for each. Headings can be specified like this:

HTML has a way to set parameters to generic tags, in order to specify respective markup further, by placing attributes. Attributes can be used to add specific information to an area in a document, e.g. an anchor for later reference to the passage in text. In the following example you see the usage of in-text links which utilize this anchor feature to jump from passage to passage. They can naturally coexist with outbound links on the same page.

Via the same scheme, markup information can be embedded exactly at the place in the document where it is needed. As an example look at the following formattings, they all adhere to the nesting concept introduced earlier. Those areas, that are surrounded by tags of a specified marker, get displayed in the formatted way. Paragraphs, subparagraphs or even single letters can have their own markup.

Another concept is the two dimensional table. This structural element brings the possiblity to arrange content in columns and rows. HTML does not infer the type of content that is presented in the fields. Its up to the author of a HTML page to choose what he wants to show in the fields. It could be plotted datapoints, text or media content, possibilities are legion.

Choosing how to present their content, people have implicitly agreed on a set of structural formulae. For instance do bullets preceding words in a row indicate a list of elements with similar properties constituing a group. This idiom is represented in HTML for shorthand use by specific tags, namely the unordered list element tags. In case there is an order in the elements, one can switch to the ordered list element tags, which do the ordering on their own. As is obvious in the following example, the short notation is convenient and hassle free for the author. This encourages to pre-structure one's content at ease, leaving time to concentrate on content matters.

In order to combine various attributes of different meaning, HTML does support all attribute types to work together. Proper nesting takes care of what attribution belongs to which area.

To test example code manually, you can use an online parser: You may interactively type the HTML code examples into W3Schools.com - Try it yourself and will instantly see the results of your submitted HTML code.

See Basic_Introduction_to_HTML.webm for further information.

Layout Elements in HTML
 Learning Objectives 


 * Know about the style attribute and how to use it within HTML elements
 * Realize that there are some limits using the inline style attribute
 * Be able to create websites that follow a certain style guide

In this section we will introduce the HTML style attribute. It allows us to change the layout of our example page in many ways. Examples are font type, background color, borders of tables and so on. The HTML style attribute can be included in any HTML tag.

In the following example we change the overall font type to "Open-Sans", the background color to blue and the letter color to white. We also define the look of our table and changed the color of the book titles to orange.

As you can see there are lots of possible ways to change the look and layout of a web page using the style attribute.

 Motivating Separation of Content and Layout

As you might have noticed in our example the line following line is used twice.

If we would add more items to our list we would have to include this same line of code every time. This not only creates redundancies but might also be a source of errors. This is one of the reasons why it makes sense, to separate the actual content from its layout. That can be done using a separate CSS file which will be further explained in the next section.

See Layout Elements in HTML and Motivating Separation of Content and Layout of the Web Science mooc for further information.

Cascading Stylesheets (CSS)
Learning Objectives


 * be able to name at least 2 important point why to use style sheets
 * know how the cascading process works
 * know the basic syntax of cascading stylesheets

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. CSS can also allow the same markup page to be presented in different styles for different rendering methods, It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed.

See Introduction_to_Cascading_Style_Sheets for further information.

Learning Objectives

 * Know how to include media files like graphics in a web page.
 * Understand that image formats like jpg, bitmap, png are hard to understand for machines.
 * Know how to use an XML based format to create images that are easy to understand for machines and humans

HTML element
In the previous sections we talked about how to create and format web pages with text. This section will focus on including media content like images into web pages. Extending our previous example, we will include the cover of the book Buddenbrooks next to our list item. The HTML tag for this purpose is.

In the following example of the tag we will insert an image of the book cover from Buddenbrooks. The first attribute img src has the source address of the image we want to display as a value. The value of the attribute alt ("error") is displayed if there is a problem with the image and it cannot be loaded. The attributes height and width offer the possibility to scale the size of the image.

This next example has the book cover image included in our previous favorite book list example. If you look closely you'll notice that it differs slightly from our first tag example. It uses Inline CSS to adapt the way the image is displayed. Please see the section on CSS for further information.

Problems with image formats
The most commonly used image formats on the internet (jpg, bitmap, png) have one thing in common - they are not easily machine readable. Images might include additional information like the date of creation or an image description. Formats like jpg, bitmap or png make it difficult to extract these information automatically. SVG offers the possibility to add such information in a machine readable way.

SVG
Scalable Vector Graphics] (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor.

The following example shows an example of a simple SVG created using a text editor.

The following code example shows how to include an external image into an svg graphic with additional information. The additional information is machine readable.

See Adding Media Content to HTML File at 3:08 for further information.

HTML Meta elements
Meta elements were introduced early in HTML. The meta element has two uses: either to emulate the use of an HTTP response header, or to embed additional meta data within the HTML document.

For example:

This specifies that the page should be served with an HTTP header called 'Content-Type' that has a value 'text/html' and sets the Default charset. In the general form, a  element specifies   and associated   attributes describing aspects of the HTML page.

For example: In this example, the  element identifies itself as containing the 'keywords' relevant to the document, books and thomas mann. HTML meta keywords are no longer used by any major search engine, in fact keyword stuffing can negatively affect your rankings.

This is due to the fact that they do not really work because they often were intentionally forged, e.g. wrong keywords given in order to mislead search engine. This resulted in search engines ignoring meta data for two decades.

Since the concept of meta data is very useful with only the implementation using HTML meta elements being flawed several new formats were developed. A driving force in this area have always been search engine providers with the goal to improve search results. The following section will give an overview of the most widely used semantic markup formats today.

Semantic markup formats
 microdata 

Microdata is a specification used to nest meta data within existing content on web pages. Microdata consists of a group of name-value pairs which are called items.

The following example includes HTML Code of two book titles in plain HTML without meta data.

This example includes the same HTML Code with added meta data using the microdata format. The two are display exactly the same by a browser.

A new element is specified by using the itemscope attribute. It creates new group of name-value pairs. Since it does not hold any information yet the itemprop attribute is used to add properties to the item. In our example the property is "booktitle"

See w3 microddata for further information.

 microformats 

Microformats are another semantic markup format which focus on simplicity. There are several microformats specifications available for conveying different kinds of data. Often used examples are the hCard and hCalender specifications.

The following example code shows the contact information of the German Thomas Mann-Society. Again, the first example is simple HTML code without meta data. The second example uses the microformats specification.

hCard includes a set of predefined properties and implements the vCard standard in HTML.

Let's look at another example using microformats and the hCalendar specification.

Conclusion
The purpose of this second chapter on web content was to give you an idea of HTML and how you can use it to structure content. You should now be able to create simple web sites, not only containing text but also other kinds of content. You learned why it is important to separate layout from content and know how to do it by using CSS. We concluded our chapter by giving you a glimpse into meta data and the importance it has on the internet today. So far we have only covered static web content. The next chapter will introduce you to the topic of dynamic web content, the foundation of the web as we know it today.

Quizzes
{What is the advantage of using the SVG format} - The file size is bigger + It contains additional information + It is machine readable

{Why are HTML meta elements not used anymore?} - They were too successful - They were too complicated + They were misused

{Why are separate CSS files used?} - Reduce Bandwith + Avoid redundancy - To save webspace