Introduction
Today's Web applications have become extremely powerful and complex, however the technology with which to construct them has not changed much, it has maintained the same structure and purpose as in the early days. On the contrary the techniques or mechanism to use that technology are constantly evolving. The foundation of Web development falls under three items HTML, CSS and JavaScript.
HTML is the standard language for structuring the content of Web pages. HTML5 is the latest revision of the Hypertext Markup Language (HTML). HTML5 has two main advantages over its predecessors, first it does not require the use of proprietary APIs to handle, for example, multimedia content; second, it uses semantic elements which make it easy to organise the code. We will come across both of these and many other features of HTML as we progress in the exercise.
CSS or Cascading Style Sheets is a style language used for describing the presentation of a document written in a markup language, for example HTML, XML or SVG. CSS is designed primarily to enable the separation content from presentation. CSS provides constructs to define presentation aspects such as layout, colors, fonts, etc. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML documents to share formatting by specifying their common style in a separate CSS file. This separation of formatting and content also makes it possible to present the same content in different styles for different rendering methods, such as on-screen, in print, on a mobile, etc.
Even if you don't have much experience with HTML and CSS, it should be easy to follow along. The idea is to build a web page that contains basic elements such as a navigation menu, multiple sections, and a mash-up with a map and a few thematic layers.
JavaScript is the scripting language used for adding interactive features to Web pages. It can be used to create menus, validate forms, swap images, or just about anything else you can think of to do on a Web page.
What you will learn
In this exercise you will learn how to:
- Create a set of web pages using HTML5;
- Style these web pages using CSS3;
- Add Javascript (using the OpenLayers web mapping library) to create a dynamic web map using OpenStreetMap data;
What you will NOT learn
In this short version of the exercise we will not go into the actual design of the website. The design of a website is an elaborate process that takes into account the users, their user requirements, and goes through several web design phases.
For now, we will just use a simple design that came out of such a process (see figure 2) as our starting point...
Creating the landing page
To start working on the site, open the file explorer and create a new folder called simple-website inside your personal web accessible folder. Remember to replace the <<SNUMBER>> placeholder with your own student number.
https://gisedu.itc.utwente.nl/student/<<SNUMBER>>/simple-website
Inside the new folder we will create a default page, or "landing page". This file should be called index.html. A file with that name will be automatically loaded whenever a user points the browser to the directory without specifying a filename. Create the /simple-website/index.html file using the code that's shown in Listing 1.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>A Simple Website</title> </head> <body> <p>Here goes the page content...</p> </body> </html> |
This file starts with the so-called Document Type Declaration, or doctype. This is simply a way to tell the browser—or any other parsers—what type of document they're looking at. Then we declare the language of the page. Further down we declare the characterset used to be UTF-8. For now we will focus on presenting the page on computer screens and as such we set the width of the viewport to the full width of the device and set the initial zoom level, or initial-scale to 1.0. Note that there are multiple values available for these parameters, you can later on check the documentation and try out the various options. Point the browser to the site's URL to get access to the landing page.
The browser should render a white page with some text as we have not added any real content, nor any styling. You should additionally see a title in the browser tab. This title will also be shown in search engine results and in any favourites list to which the page is added too. In the next section we will add content and styling in a structured manner...
