Getting Mercator crop of Iceland map (with known extremes of longitude and latitude)

Go to https://planet.openstreetmap.org/ and download the latest openstreetmap .pbf file. It's big so you will have to wait a while. 2) Download OSMConvert - we need this software to crop…

Continue Reading Getting Mercator crop of Iceland map (with known extremes of longitude and latitude)

CSS Combinators

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

CSS combinators are used to target specific areas of an HTML file. They are very useful as they prevent the programmer having to put too many "class=" attributes within the…

Continue Reading CSS Combinators

Responsive websites

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

This methodology used 'float' to position elements in the browser. <!-- index.html --> <!DOCTYPE html> <html> <head> <title>My website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link…

Continue Reading Responsive websites

Inserting images with HTML and CSS

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

Basic image with HTML index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a href="style.css"> </head> <body> <div class="menu-content-wrapper"> <h1>My picture</h1> <img src="img/myImage.jpg" alt="park…

Continue Reading Inserting images with HTML and CSS

Wrappers – beginning to control layout

  • Post author:
  • Post Category:CSS
  • Post Comments:0 Comments

I've added a wrapper to my code. A wrapper essentially has several functions. index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a href="style.css">…

Continue Reading Wrappers – beginning to control layout

Creating menus

  • Post author:
  • Post Category:HTML
  • Post Comments:0 Comments

We create menus using the unordered list tags <ul></ul> and the list item tags <li></li>. Let's start with some raw html and see what it looks like. <!DOCTYPE html> <html>…

Continue Reading Creating menus