HTML & CSS for beginners

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.

All videos of the tutorial HTML & CSS for beginners

The Hypertext Markup Language is the house and court language of the WWW. The first version of this language was published in 1992. Since then, HTML has undergone numerous modifications and has now reached version 5. (Although version 5 has still not been officially adopted as the standard, it is already quite well supported in current browsers).

HTML is a so-called markup language that can be used to structure content. Stylesheets are responsible for formatting the content. More about them below.

The World Wide Web Consortium (W3C for short) is responsible for the further development of HTML.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.

You should keep an eye on the W3C website regularly to keep up to date with the latest developments in the web sector.

When dealing with HTML, one question is crucial: Which version should I use? As you can imagine, a language like HTML is constantly being updated. New elements are added, old ones are removed.

Here are the most important language versions and milestones of HTML:

- HTML (November 1992): This was the first version. The focus here was exclusively on text documents.

- HTML 2.0 (November 1995): There are now also elements for images and forms.

- HTML 4.0 (December 1997): Stylesheets, frames and scripts are introduced.

- XHTML 1.0 (January 2000): This is a reformulation of HTML 4.0 using XML.

- HTML5 (April 2009): This is still a working draft, so not yet an adopted standard.

The focus in the following tutorials will be on HTML5. This is because HTML5 is supposed to finally give the HTML world a jolt. And indeed, the new specification has numerous interesting innovations to offer. These include, for example, significantly more convenient forms, progress indicators, character elements and an improved document structure. The new standard also allows videos to be embedded in websites without plug-ins and there is a drag & drop interface.

The first proposal for HTML5 was published back in 2004 by the Web Hypertext Application Technology Working Group (WHATWG) under the name Web Applications 1.0.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.



Although HTML5 has not yet been published as an official standard, browser manufacturers have already incorporated numerous HTML5 functions into their products. This is not surprising, as the WHATWG is an alliance of the browser manufacturers Apple, Mozilla and Opera, among others. The WHATWG was founded as a direct reaction to the sluggish development of web standards by the World Wide Web Consortium (W3C).

At this point, one might ask what motivated the browser manufacturers to develop their own HTML standard. After all, the development of HTML was previously firmly in the hands of the W3C. From the browser manufacturers' point of view, the problems began when the W3C converted HTML 4.01 into XHTML 1 without making any particular corrections to the content. Originally, the W3C wanted to establish XHTML 1 as a first step towards an XML-based web. XHTML 2 was to be the final stage of development. It was precisely the W3C's focus on XML that annoyed the browser manufacturers. In their eyes, the XML approach is impractical and does not reflect the actual wishes of users. (Which, of course, the W3C sees differently).

Since 2007, the W3C and the WHATWG have been jointly developing or working on an HTML5 specification. The latest developments on HTML5 can be found at http://www.w3.org/TR/html5/.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.



The focus of the upcoming tutorials will be on HTML5.

CSS for formatting

You have probably already worked with document templates in Word or other word processing programs. For example, when you select a line, you can choose a style sheet.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.



The heading is then displayed depending on the formatting selected in the document template for this style sheet. When you change the document template, the appearance of the heading also changes.

What does Word have to do with HTML? There are also style sheets for HTML documents. These templates can be defined using CSS (Cascading Stylesheets). Thanks to CSS, you can, for example, specify that main headings (h1) should be 22 pixels in size and displayed in green Arial font.

Stylesheets enable the strict separation of structure and layout. HTML is used to structure the documents. How the elements ultimately look, however, is determined with CSS.

What you need

In the following tutorials, you will get to know HTML and CSS step by step. You don't need any complex software to implement websites based on HTML and CSS yourself. In the simplest case - if you are working under Windows - you can use the standard editor.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.

It's not particularly convenient, but it's enough to get you started. However, if you prefer something more convenient, you should look for a "real" HTML editor. One of the classics here is of course Dreamweaver.

However, this editor is not free.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.

On the other hand, phase5(http://www.phase5.info/) is free for private users. So if you want to use the editor for private purposes, this is a good and free tool.

HTML & CSS for beginners (Part 01): A first look at HTML, CSS & Co.



In addition to an editor, you should also have the most important browsers installed to test the website. In fact, browsers sometimes interpret HTML and CSS quite differently. With this in mind, extensive testing of the pages in different browsers is a must. You should have at least Internet Explorer, Google Chrome and Mozilla Firefox installed. Ideally, you should also test the site in the Opera browser and on a tablet/smartphone.