Chapter 3: Your first web page – Learning HTML and CSS

In the first three sections of this chapter will explore the basics of working with web files: understanding URLs, and therefore also Hosts and Domains. Uploading local files to remote servers. Editing HTML and source code files with a proper Text Editor.

We will then move to build web pages with the most recent markup language brand available: HTML5 in combination with CSS3. We will take, for as much as possible, a semantic approach to HTML development. Full details on this topic below in this page.

Since the HTML language is the basis for any web page, and has had a considerable evolution since it’s birth in 1990, we will start by a quick overview of this fascinating markup language that in a way is the foundation of the World Wide Web as we know it, with it’s galaxy of interlinked web pages and web sites.

Hyper Text Markup Language – HTML

Web pages always rely on the **HyperText Markup Language, HTML**, for the page layout and text formatting and presentation.

* Building simple web pages or complex online forms for data and options collection
* Formatting the output of one ore more scripts that elaborate the input data collected from the user
* Presenting both the input and output pages of a web application in the context of a consistent and pleasant graphical layout

All these tasks require a knowledge of HTML.

One of the good things about HTML is that, although the mastering of the more subtle, elegant and complex implementations of the language in order to deliver stunning graphical effets and interactive features is maybe reserved to an elite of professionals, very little knowledge is actually required to build a simple page, properly format some contents and publish the page online. In this sense, the web is very democratic and anybody can contribute.

The learning curve for HTML is extremely gentle and forgiving, allowing for immediate productivity with just a basic knowledge. HTML is not a programming language (PHP is, and we will start to lean it in the next chapter), it is instead a Markup language, a language to mark certain parts of a text to indicate that they should be displayed with a particular appearance by browsers. Indeed browsers, such as Firefox, Internet Explorer, Chrome, Opera to cite just a few of the most used, are HTML interpreters.

//Example of text markup or “tagging”. In this example the “header” and “h1” tags are used//
<code><header><h1>Hello World! Welcome to my web site</h1></header></code>

Contents vs appearance of contents – Semantic HTML

Actually to say that HTML controls appearance is not entirely correct. It does so, but indirectly. The specific appearance per se, is defined in the so-called **Cascading Style Sheets or CSS**, a collection of stylistic rules that will apply to specific portions of text or layout, marked-up with HTML.

<box 100% left round red | **Example 3-1: Using the em tag to emphasize text**>

The meaning of a specific portion of text can be specified with html by tagging the text.

<code>We had results in <em>no time</em>!</code>

In this example the “em” tag is used to indicate that “no time” should be __em__phasized. Text tagged with <em> is usually rendered as //italic// by browsers.

We can decide that in our webpage, or maybe our whole website, we would like to emphasize text by bolding it, instead of italicizing it: the default behavior of the browser can be overridden by using the Style Sheets. To accomplish this, we could use, in the CSS definitions:

<code>em {font-style : none; font-weight : bold;}</code>

You could also use the “strong” tag, that renders as bold by default, instead of the em tag.

<code>We had results in <strong>no time</strong>!</code>

Note how, while the term “strong” has an emphasis on appearance, you’d really expect this to be bold, “em” is a more semantical tag biased toward the generic meaning of the tagged text rather than appearance.

The HTML language is in constant evolution to adapt to and, in a constant feedback loop, shape, the evolution of the whole Internet. Increasingly, and actually very strongly from HTML version number 4.01, there is a migration toward the concept of **Semantic HTML**, where HTML is used to define the meaning or nature of the different sections of the web page, rather than their appearance.
For example:

* this part of the web page is the footer
* this part is a lateral news box for the biology news
* this part is a lateral news box for the technology news
* this part is a navigation menu (made by internal links, links to other pages on the same site)
* this piece of text is a title
* this piece of text is a subtitle
* this part of text is a link to a web page on a different website (this is called an external link)
* this part is a post by a user. Within the post, this part is the name of the user and this other part is the message

We define the nature of parts of text or parts of the layout (for example a lateral box). The meaning of these parts, what they are rather than what they do look like. This is why we talk about semantic HTML.

HTML1 vs HTML4.01 and HTML5

Old HTML 1, worked differently. You would use HTML to indicate, directly, that a part of text should be bold and red. This is about appearance, not semantic nature of the tagged (marked-up) parts.

In HTML4.01, a standard for a long time, and more recently and even more drastically, in HTML5, contents and semantics, defined by the HTML itself, have been separated from the graphical aspect of the contents, which is instead defined by the CSS. The same HTML page styled by two different CSS can change it’s aspect entirely and dramatically. In a section of this chapter we will make the exercise to look at a web page with or without a CSS applied, an you will be able to appreciate how deeply the appearance of an HTML page can be controlled by leveraging on the CSS.

HTML1 vs HTML4.01 and HTML5 - Semantic HTML and division between contents and appearance
Figure 3-1: HTML1 vs HTML4.01 and HTML5 – Semantic HTML and division between contents and appearance

We see how this might still seem a bit confusing to you. Where and how is html used? How are CSS implemented, “linked” to the HTML. Don’t worry as we will get very practical about all this and make a number of easy to follow step-by-step examples in the next sections.

For an in-depth review on the importance of using modern semantic or “Web 2.0” techniques while developing for the web in the field of Bioinformatics, see this article:

Zhang Z, Cheung KH, Townsend JP. Bringing Web 2.0 to bioinformatics. Brief Bioinform. 2009 Jan;10(1):1-10. PMID: 18842678

Uniform Resource Locators: URLs

Before we move on though, there is still one thing you should become very familiar with: the Uniform Resource Locator or URL. This is the univoque address of a file on the Internet. The concept of URL lies at the heart of the World Wide Web, a web of pages linked to each other. Linking a page is indeed possible because it always have a unique web address or URL.

We also need to understand, and this is crucial, the relationship between the location of one of our files on the internet (it’s URL) and within our Linux filesystem (it’s path). Let’s move on the the next section, dedicated to the URL anatomy.

Chapter Sections

Leave a Reply

Your email address will not be published. Required fields are marked *