Further reading HTML and CSS

Motivation 

In the Weather Station part 2 project, you used HTML and CSS to describe to your web browser how to display the data. This section will provide a simple tutorial for revisiting that project and customizing the information and the way it is displayed.

HTML

HTML stands for Hypertext Markup Language and is one of the cornerstone technologies for the World Wide Web. HTML is used to structure documents (mostly web pages). It was invented in 1980 by Tim Berners-Lee. The language is composed of elements, which are represented by tags. For example, if you wanted to include an image on your webpage, you would use the image element, which is represented as the <img /> tag.

In the early days, HTML was used both to structure a web page and to describe how it is presented. However, needing to contstantly modify large amounts of HTML in order to make small changes to the presentational layout proved to be unsustainable for rapidly-changing web pages. Based on the recommendations of the World Wide Web Consortium (W3C), CSS has been adopted to describe the presentation of web pages, allowing HTML to only provide the structure and content of the document.

CSS

CSS stands for Cascading Stylesheets and is a language used to describe the presentation of web pages as well as other documents (XML, SVG, etc). This separation allows things like fonts, color, and size to be determined by the style sheet, rather than having these design and presentation elements defined in the structure of the page itself. Like with HTML, specifications are maintained by the W3C.

Weather Station Example 

In the Weather Station part 2 project, the following HTML document was created:

Download file Copy to clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Your Weather Station</h1>
<br>
Requests received: 3<p id="date"></p><script>document.getElementById("date").innerHTML = 'Date: ' + Date();</script><p><br>
Temperature: 78.75F<br>
Humidity: 30.00%<br>
Air Pressure: 100090.00Pa<br>
UV Index: 0.02<br>
</body>
</html>

This is a simple HTML document that follows a pretty standard structure, with the <head> , <style> , and <body> tags. The actual content of the document is also very simple, containing a <h1> heading of "Your Weather Station", the number of requests received (dynamically populated by the web server), the current date (populated by some javascript), and the weather data populated by our weather station.

By adding CSS within the <style> and </style> tags, we can change the way this webpage appears. As an example,

Download file Copy to clipboard
1
2
3
4
5
6
body {
    color: red;
}
h1 {
    color: blue;
}

Placing the above CSS inside the <style> tag will change the <h1> ("Your Weather Station") text to blue, and the rest of the text to the color red.

You can test these changes on your web browser and then, once you get the code as you like it, modify the code and upload it to your Uno board so the weather station displays the page in your browser the way you want it to look.

Further learning 

Mozilla Developer Network's documanation pages provide excellent tutorials and reference documentation on HTML, CSS, Javascript, and even server-side website programming.

WS3Schools, a website that derives its name from W3C, but that has no official affiliation, provides great, free, and in-depth tutorials on HTML, CSS, Javascript, and other popular languages and frameworks used for building webpages.