Fundamentals of HTML5 and CSS3
Hypertext markup language (HTML) structures documents such as web pages by formatting the content available on the web pages and converting pure information into a graphically descriptive representation (Robbins, 2014). HTML was developed to a significant degree by Tim Berners-Lee (Walter, 2008) at the European Nuclear Research Center CERN in Geneva (European Organization for Nuclear Research, n.d.). HTML can be described as the language that ultimately gives web pages (and websites) the appearance and structure that is seen by end users.
HTML’s origin can be traced back to the development of the World Wide Web in the late 1990s (selfHTML, n.d.-b). One of the main goals of HTML was to create a description language that could run on any platform. At CERN, a way to efficiently distribute measurement data and research results was sought, so that, for example, the measurement data collected in Geneva could be analyzed by scientific institutions all over the world. For this, it was necessary to provide the raw data and a classical transmission protocol for adequate interpretation of the obtained results. This led to the birth of the internet, which resulted in the first version of the HTML specification on November 3, 1992 (selfHTML, n.d.-b).
HTML differs from the programming languages discussed so far in that it knows no logical command flow structures (such as loops), but describes how the result (the web page) should ultimately look. To describe the respective commands, we work in tags, which begin in each case, for example, with a tag in the form <h1> and end with a tag in the form </h1>. This syntax is very similar to the syntax used in XML. For example, an HTML document is always introduced as follows:
<!DOCTYPE html> <html> <head> <title> Test Website </title> </head> <body> <h1> Hello world </h1> <p>This is my first HTML document </p> <a href="http://www.google.com/">I am a link</a> <img src="Image.jpg" alt="I am an image in an HTML document"> </body> </html>
An HTML document always begins by declaring the document type. This ultimately serves to tell the browser what the document in question is about. This is an example of an HTML document, so the declaration can look like this: <!DOCTYPE html>. Then, the actual HTML elements follow. An HTML element always begins with a start tag in the form <…>, followed by the content of the respective tag and an end tag in the form </…>. In addition, an HTML document can have a header element, in which, for example, the title of a web page is defined. This will be displayed in the browser or the tab label of the browser. The actual content of an HTML document is listed in a body element.
For example, <h1> is used to create a bold heading, after which <p> is used to introduce a paragraph. An <a href> tag leads to the definition of a link (the tag here is actually just “a”, “href” is, strictly speaking, an attribute that describes the characteristics of the “a” tag: here, around the exact link). An <img> tag is used to embed an image into the HTML web page. The modern advancement of HTML to HTML5 has also enabled targeted animation control, the embedding of videos, and much more. If web pages need to be extended by logical structures and arithmetic operations, or, for example, database connections are desired, this cannot be realized with HTML alone and requires the use of PHP. The HTML tags <a>…</a>, i.e., opening and closing tags, are also called HTML elements. Selected HTML tags, along with their functions, can be seen in the following table (selfHTML n.d.-b).
| Overview of Selected HTML Commands | |
|---|---|
| Command/tag | Description |
| <h1> | Headline (highest level) |
| <a href=“URL”> | Link |
| <img src=“path”> | Embeds an image |
| <head> | Metadata |
| <title> | Website title |
| <table> | Table |
Attributes of HTML Tags
As mentioned above, attributes in HTML tags describe a more precise function. Through this, it is possible to assign further values to an HTML tag. Attributes are assigned within the tag, starting with the respective attribute and followed by the respective value of the attribute (separated by “=”), which is typically specified in quotation marks.
<img> element
With an <img> tag, it is possible to embed an image into an HTML web page: <img src=”photo.png”>. “img” is an HTML element for controlling or including images in an HTML web page. With the “src” attribute, it is possible to define the exact image (via the exact file name and, if applicable, the address path to the respective file, whereby both local addresses and addresses on the internet can be considered here). If we want to define the size of the image to be loaded, we can use the additional attributes “width” and “height”: <img src=”photo.png” width=”500″ height=”600>. In this case, the image to be loaded, “photo.png,” would be displayed with a width of 500 x 600 pixels. If an image cannot be displayed, it is often helpful to offer a user a text that roughly reflects what the image is supposed to represent. One way we can achieve this is by using an “alt” attribute. For example, if we want our website visitors to see the text “IU Logo” in case the image “photo.png” cannot be loaded, we ensure the alternative output of the text using <img src=”photo.png” alt=”Logo”>. Some selected attributes of the <img> tag are shown in the following table.
| Selected Attributes of the <img> Tag | |
|---|---|
| Attribute | Description |
| src | Path to image element |
| old | Text that is displayed when the desired image cannot be loaded. |
| width | Width of the image to be implemented |
| height | Height of the image to be implemented |
Headings
To make a web page, especially a text, appear structured and clear, we can use headings. HTML has, like most word processing programs, different hierarchy levels for headings. The h1 tag is used to create the first hierarchy level of a heading. A heading lower in the hierarchy is then introduced by means of an h2 tag. Let’s look at the following example to illustrate this:
<html> <body> <h1>Header 1</h1> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <h2>Header 2</h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <h3>Header 3</h3> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <h4>Header 4</h4> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <h5>Header 5</h5> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <h6>Header 6</h6> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At </body> </html>
This results in the following output on the user’s screen.
Lorem Ipsum
The example text used here (“Lorem ipsum…”) is a computer-generated filler text, which is often used as a placeholder in web design to give the external appearance a structure. This text is later replaced. This allows developers and designers to work on a project in parallel. “Lorem ipsum” appears to be written in Latin, but has no semantic or syntactic meaning.
Comments
Often, when writing an HTML document, it can be useful (or even necessary) to leave comments in the document, e.g., as a note to oneself or a colleague regarding how something was implemented and why. This is achieved in HTML as follows: <!- – I am a comment – – >. The character combination at the beginning of a comment is interpreted by a browser such that it does not display the text contained in the comment in the user’s browser. This text remains in the source code, hidden from the user.
Paragraphs
HTML is also capable of inserting paragraphs. This is advantageous in that continuous text, which is formulated coherently but differs slightly in the subject matter, can be separated for better readability. We can start a new paragraph with a <p> element followed by the content of the paragraph. Once the paragraph is finished, the paragraph is closed with the <p> tag:
<p> Here is a paragraph. </p> <p> Here is another paragraph. </p>
Links
A very common tool in web design is the use of links. Links ultimately serve to redirect a user, e.g., with a mouse click, from one page to another. Links are created in HTML using an <a> element followed by an “href” attribute:
<a href="https://www.google.com/">Google</a>
Here we encounter another challenge: we may not want the link to be displayed as the actual URL, as this would affect the readability of the web page, especially when dealing with very long URLs. Instead, we can close the angle brackets after the “href” attribute and specify the text with which the included link will be labeled. The link element is then closed with the </a> tag.
Lists
It is often necessary to enumerate individual elements and give them an external structure. One way to achieve this is using lists. HTML is capable of generating both unordered and ordered lists.
We define an unordered list with a ul element. Elements (the respective “list items”) are input with the li tag. With the following short HTML implementation, we can create an unordered shopping list:
<html> <body> <h2>Shopping list</h2> <ul> <li>Coffee</li> <li>Water</li> <li>Milk</li> <li>Ice cream</li> </ul> </body> </html>
In the browser, this unordered list is then displayed as follows.
The unordered list shown here can be quite easily converted to an ordered (numbered) list in HTML by creating the list using an <ol> (“ordered list”) tag instead:
<html> <body> <h2>Shopping list</h2> <ol> <li>Coffee</li> <li>Water</li> <li>Milk</li> <li>Ice cream</li> </ol> </body> </html>
This then leads to the following output.
Tables
It is also possible to insert tables in HTML, e.g., in order to make information clear and comprehensible. A table is defined in HTML with the <table> tag. The <tr> tag then specifies the individual rows of the table. The respective header, i.e., the column heading of a table, is created with the <th> tag. The respective entries (or table data) in a cell are embedded as <td> tags. An HTML table is structured in such a way that the description of the table ultimately becomes increasingly specific, i.e., from the table declaration itself to the content of a specific cell. The formatting HTML uses is already stored in the HTML standard, so entries in the <th> element will always appear bold and centered.
In the following example, we will try to compile the stock of a small warehouse in a HTML table. The hypothetical inventory system should have options for entering an item description, an item number, the price, and the quantity available in the warehouse. Three articles (1—3) are then to be entered into the table as an example. A possible implementation of such a table is as follows:
Code
<html> <body> <h2>stock</h2> <table> <tr> <th>Item</th> <th>Itemno</th> <th>Price</th> <th>Quantity</th> </tr> <tr> <td>Item 1</td> <td>1234</td> <td>50</td> <td>94</td> </tr> <tr> <td>Item2</td> <td>4567</td> <td>25</td> <td>20</td> </tr> <tr> <td>Item 3</td> <td>5794</td> <td>10</td> <td>45</td> </tr> </table> </body> </html>
The corresponding output in the browser would look like this.
ID of an HTML Element
Similar to how a name identifies a person, we can also assign names to individual HTML elements in order to identify them again later. For example, if we have a heading that is described by an <h1> element, we can assign a name to it using the “id” attribute. In concrete terms, an implementation would look like this:
<h1 id="FirstHeader">I am a header</h1>
The IDs of an HTML document are not displayed in the browser. They are only used for internal reference. The declaration of an ID for an HTML element is case sensitive. This means that even identical names will result in correspondingly different IDs once different upper- and lowercase letters are used.
So, what are IDs useful for? With IDs, it becomes possible to access or refer to the element with the desired ID at (almost) any place in the HTML document (this is typically achieved by means of a pound sign (#) placed in front of the ID). For example, we can introduce a style element into the header of an HTML document, which is opened with <style>, followed by the respective content, and closed with </style>. For example, if we want to set the background color of the heading to blue, we would use the following code.
Here we have also used a style definition, which actually follows the syntax of Cascading Style Sheets (CSS). In the style element, the heading with the respective ID is addressed by “#FirstHeading” and applied to the commands that are listed in curly brackets that follow. In this case, this refers only to the background color, i.e., “background-color,” to which we assign the value “blue.” This is confirmed with a semicolon. In the user’s browser, this would lead to the following output.
Classes
In the same way IDs can be assigned to HTML elements, it is also possible to aggregate several HTML elements into a class. A class definition is introduced by the “class” attribute. If this is accessed again in a later step, the same operation is applied to all class elements. While accessing IDs takes place by means of a pound sign, this is done for classes by means of a prefixed period (.). Let’s look at an another example.
In this example document, we have embedded some headings that are assigned to the classes “FirstHeading” and “SecondHeading.” We have now specified a style definition for each of the two classes in the style element. All elements that belong to the class “FirstHeading” have a blue background. All elements of the class “SecondHeading” have a yellow background. This leads to the following output in the browser
div class
A very commonly used class is the div class. By means of div elements, it is possible to group text, namely the text that is inserted inside the div element:
<div> Here comes the text </div>
We will see below, especially in the context of CSS, that the use of such div classes offers some advantages when it comes to setting the design for an HTML document.
Creation of a Form Using HTML
Forms in web applications are typically still generated using HTML. A form can generally have the following form elements:
- single-line and multi-line text fields for input
- elements for file upload
- selection lists
- text fields by means of which the arrow keys can be used to increase or decrease the corresponding values
- radio buttons for either/or selection
- checkboxes for both/and selection
- dates
- buttons
For these elements, HTML has <form> tags, which allow the creation of forms, or, in essence, input fields. A form is placed between <form> and </form>. Everything that is entered inside this tag is recognized as form content when the HTML code is later processed by the browser. We can generate the first input field using the command below.
