Valuable knowledge and beautiful design are of not much use if we cannot share them and collaborate with others. To achieve this on our most extensive network, the internet, one generally needs to build a website. But what is actually a website? Each website page is composed of a framework written in HTML, or hypertext markup language, which describes the main elements on that page, such as panels, text, (links to) images, etc. One level up, each page also has a corresponding CSS sheet, or cascading style sheet, that determines how all the HTML-defined elements appear on the page. CSS-defined properties include size, color, hover behavior, simple animations, etc. Additionally, each page can also have a JavaScript-written set of instructions that describes more complicated animations. When we access a website, our browser reads the HTML, CSS and JavaScript instructions for every page and translates these instructions into a clickable visual representation of the website.

To nicely illustrate this structure and functionality, I am sharing with you the complete code for a website hand-written by me. Just follow the link bellow to download the file, unzip, and double-click on “index.html”. This should open the homepage locally in your browser (or right-click on “index.html”, open with, choose browser). The code can be seen by opening the individual files with any text editor (right-click, open with, e.g. Editor on Windows), or from your browser by right-clicking on any page and selecting view page source (or inspect element, depending on the browser).

Website Download Link

What is HTML?

The World Wide Web

Like most other services (such as e-mail or FTP), the WWW is based on the client-server model: Web servers provide information that users can access with the help of a so-called client program (that is in In this case, the web browser) across the network. The World Wide Web uses the Hypertext Transfer Protocol (HTTP) for the transmission of information (texts, images, etc.), which you can recognise by the fact that a web address entered in the browser begins with the HTTP prefix.

What is Hypertext?

Hypertext is generally understood to mean the nonlinear organization of information, which obtains a network-like structure through logical connections (references, links). Hypertexts offer the advantage over linear information processing of being able to represent even very complex contents almost without redundancy.

The Principle of Markup Languages

The technology used to publish hypertexts on the Web is a markup language called Hypertext Markup Language, or HTML for short. The main feature of markup languages in general, and HTML in particular, is the fact that they are in the form of plain text files in which the structuring and formatting information is integrated directly into the text by means of so-called “tags”. Today, markup languages are used in many areas to create documents: in the printing industry, for example, PostScript, the markup language developed by Adobe, is used to print page layouts on different output devices in variable size without any loss. For example, PostScript defines font, font size, indent, page margins, size and position of images, and so on.

The Philosophy of HTML

For HTML documents, the web browser — more specifically, the rendering engine integrated in the browser — usually serves as an interpreter of the HTML source code. As soon as you open an HTML page with a browser, the instructions in the HTML tags are "translated" into visual information and appear as a formatted document on the screen. The purpose of HTML is that the structure of the page be understood by all computers. The respective graphical processing is not the focus. Cascading Style Sheets (CSS) have been developed for this purpose. With the help of this supplement to HTML, the appearance of HTML documents can be determined exactly and their presentation adapted to different output devices. With HTML, only the logical structure of the document is created, while layout and design are realised with CSS.

HTML: Development and Standards

The Origins of the World Wide Web

The basic concepts of the WWW go back to a group of scientists at the European Centre for Particle Physics CERN in Geneva. In 1989, Tim Berners-Lee proposed a communication network that would allow scientists to easily share information between computers across the boundaries of different operating systems. A key step towards broader use of the WWW came in 1993 from the National Centre for Supercomputing Applications (NCSA) at the University of Illinois, USA. A young student named Marc Andreessen developed the first web browser for standard PCs: Mosaic.

The World Wide Web Consortium (W3C)

In 1994, a panel of specialists from several international universities and companies, chaired by Tim Berners-Lee, set out to develop standards for web communication. This group later became known as the World Wide Web Consortium (W3C). It still defines the standards and the further development of HTML.

HTML5

To counteract the confusion arising from the development of different HTML versions, an expert group founded by several browser manufacturers WHATWG (Web Hypertext Application Technology Working Group) published in mid-2004 under the name Web Applications 1.0 the first proposal for HTML5. Since May 2007, the W3C and the WHATWG jointly develop the HTML5 specification. HTML5 offers many new possibilities. One of them is the <video> tag, which allows you to embed videos in websites without the need for a browser plug-in, such as Flash. But also audio and numerous new interface elements are part of the functionality of HTML5.

How are HTML Pages Created?

In principle, any text editor that can store pure text files with the extension .txt is suitable for creating HTML pages. But there are also far more advanced text editors that specialise in creating HTML code and other programming languages that can make your job much easier. For example, such programs use so-called syntax highlighting, which automatically renders different code areas in different colors, making the code much more readable, or provides your lines of code with a line numbering that can help you troubleshoot (the best, in my opinion, being Adobe Dreamweaver). HTML documents must be saved with the extension .html, so that the web browser knows that it is an HTML document and correctly interprets the tags. Each web browser has a software component called a rendering engine. This component is responsible for interpreting and formatting HTML and CSS code (this process is referred to as rendering or parsing).

What are HTML Files Made Of?

Tags

HTML pages are simple text files that can be created and edited using any text editor. However, the text contains in addition to the actual information control commands (markup/labels), so-called tags that tell the browser what the page has to look like. The interpreting of these commands by the browser is also called parsing or rendering ("translating", “reproducing”). The source code of an HTML file can therefore be divided into two categories: 1) The content: This is normal text that contains the actual information of the HTML page. 2) The markup. This is the code that describes how the content should be structured and displayed. These HTML control characters are called tags ("labels") and are invisible to the viewer of the website. They are enclosed in angle brackets <>. Example:

<p> This is a paragraph. </p>

<p> This is another paragraph. </p>

The <p> tag defines a text area as a paragraph. The browser automatically generates a blank line.

The HTML Framework

Each HTML page must be structured in this way:

• The outer container <html> </html> tells the browser that it is an HTML file.
• Furthermore, there is the header between the <head> and </head> tags. This part contains information about the document that is not displayed in the browser.
• An exception to this is just the <title> tag inside the header. Here you specify the title of the document, which is displayed in the title bar of the browser window.
• Additionally, the header can contain so-called meta tags. This is special information for browsers, web servers and automatic search programs ("robots"). The head can also contain JavaScript code and CSS definitions.
• Finally, inside the <body> </body> container is the information that visitors to your website get to see, which means they are visible in the browser's viewport.

The framework of a simple, blank HTML page is always the same and looks like this:

The document type definition (DTD) is an integral part of HTML documents and describes what type of document it is. The DTD defines which tags and attributes can be used in a document and what their meaning is. The DTD is specified at the beginning of each HTML document - starting with !DOCTYPE.

Nested Tags

HTML tags can (and must partially) be nested inside each other. So you can embed a text area in more than one tag. The nesting of HTML tags is done according to the »Tupperware principle«: You can close a Tupperware box and put it in a larger can, close it and place it in an even larger can. For example, to make a text bold and italic, you can use the following code:

<strong> <em> Do you know Tupperware? </em> </strong>

Block and Inline Elements

In principle, HTML tags can be divided into two groups: the block elements and the inline elements.

• Block elements are tags that automatically generate a paragraph in the browser. Of course, this includes the p tag, but also the tags for creating headers <h1> to <h6> and lists <ul> and <ol>.
• Inline elements are tags that can be used in running text and that do not produce a paragraph. They are usually applied to text or other objects within a block element and can usually be nested at will. Inline elements are, for example, the strong-tag for highlighting text, the a-tag for generating hyperlinks or the img-tag for displaying images.

Atributes

Many HTML tags can, and in some cases even have to be defined by attributes. Example:

<input type="text"/>

The <input> tag generates form elements, such as text boxes, checkboxes, or password fields, that allow users to enter data on a Web site. However, to define which type of form field to use, you must use the "type" attribute and assign it a value (“text”). Any number of attributes can be used at the same time; the order does not matter. For example, both of the following spellings would be correct:

<img src=“image.jpg" alt=“some image”/>, or

<img alt=“some image“ src=“image.jpg"/>

With the above tag, you can place a picture on your page. The attribute src (= source) defines which image should be displayed. The alt attribute defines an alternative text (picture description) in case the picture can not be displayed. Each tag has a number of specific attributes associated with it. So you need to know which attributes you can use with which tag or which tag expects which attributes.

What is CSS?

With CSS (Cascading Style Sheets), it is possible to make universal formatting presets for every single element of your HTML pages and to centrally manage and change these presets at will. Using CSS, you can position HTML elements exactly on your page, set sizes, border styles, font and background colors, and even place objects on different layers on top of each other.

Furthermore, CSS allow the allocation of different style templates for different output devices. For example, it is possible to define a different CSS preset for the display of a web page in the browser than for the output on a printer - the same web page then looks completely different in print than in the browser.

The term Responsive Web Design has become known as a further development of this concept: Web layouts can now be dynamically adapted to the screen size of various mobile devices: for example, if the screen is too narrow for a menu bar, it is simply minimised to an icon. With the help of CSS, a complete separation between the form and content of a page can be achieved: the presentation depends on the output medium, the content is always the same and does not need to be changed.

Using CSS

Defining CSS for HTML Pages

Basically, there are three ways to use CSS to set design guidelines for your HTML documents:

1. You note the CSS presets in a separate file that can be linked to any number of HTML documents. The presets then apply to all linked pages, and changes in this file affect all linked pages.
2. You note down your CSS presets in the <head> of an HTML file. In this case, the defaults only apply to this one page.
3. You write down the CSS code directly in the <body> of your HTML file only for a specific element, such as a paragraph.

You can combine these three options as you wish. It goes without saying that the first variant is closest to the basic idea of CSS and should therefore normally be used. The other variants at most supplement the specifications in the external file. This will allow you to extend or override your general presets for a specific file (such as your home page) or an item (for example, a special graphic on your page).

Including CSS Presets in the Header

Use <style> to define in normal HTML syntax the area in which to write your CSS presets. This tag informs the browser that from here on CSS presets follow. With the optional attribute media, you can specify the output medium for which your specifications should apply. That could look something like this:

Outsourcing CSS Presets to an External File

As soon as you want to format more than one HTML page with the same CSS presets (which is almost always the case), it's worth outsourcing to an external file. Changes you make in this file will then affect all HTML documents associated with this file. External CSS files are also plain text files and have the extension .css. These files contain only your CSS presets (selectors, properties and values) and no HTML syntax. In the head of all your HTML files to which you want to apply these CSS presets, note only the following line of code instead of the <style> block (the order of the rel, href, and media attributes is irrelevant, as always):

<link rel="stylesheet" href="styles.css" media="screen"/>

Use <link> to initiate the reference to the external file. With rel, you indicate that the link refers to a style sheet. With href you specify the path to the external file according to the usual rules. The name of the CSS file (here styles.css) is of course freely selectable. With media, you finally define the output medium for which the CSS specifications are intended.

Inline Formatting

The third way to define CSS presets is inline formatting. This method is the most ineffective and should only be used in exceptional cases. With this method, your CSS presets only apply to a single HTML element and are written directly into the HTML code. At best, they are used for overriding common CSS presets for a particular item. You can do this with the HTML “style” attribute, which you can apply to any HTML tag. The value assigned to this style attribute is the CSS properties in CSS syntax. The HTML tag serves as a kind of "selector" here. Examples:

General Syntax

The easiest way to use CSS to define common formatting preferences for your document is to assign properties to existing HTML tags. You can use CSS to assign arbitrary properties to any HTML element. This is done via so-called selectors. For example, you want to format all paragraphs <p> in your document with the Helvetica font. Write down the following code:

Write down the properties you want to assign for the p tag in curly brackets . Within these brackets is the property you want to change (here the font family), and after a colon the value that you want to assign to this property (here Helvetica). This is followed by a semicolon, after which you can assign further properties to the p-tag. The general syntax for CSS presets looks like this:

In addition to the font, we now want to change the font size. For this, we note another property for the p-selector after the semicolon: