Make a Website Together, by hand.

Learning HTML, CSS, and JavaScript

all code from this tutorial can be found here

https://github.com/bricker0/BasicWebsite

What is a web browser? 

Fetches and displays content found on the web

A web browser is a software application that allows users to access and view content on the World Wide Web. It fetches web pages, images, videos, and other files from web servers and displays them on the user's device. Think of it as the window through which you see and interact with the internet. 

HTML is the noun

CSS is the adjective

JavaScript is the verb

Web browsers interpret...

Get organized!

Create a local

(on your own computer)

directory (folder) called "website"

This is called the "root" directory

In that directory create a sub-folders or sub-directories and name them "scripts"

and another named "img"

Can you guess what will go in these?

HTML

Create a Website

Using Hyper Text Markup Language (HTML)

Open your fav text editor

(Mine is sublime Notebook++ is also good) 

Then create a new document and save as index.html

in your folder called "website"

index.html

lives in your root directory and is your home page!

 

It is automatically opened when visitors enter the domain without specifying a specific file

HTML hints

 

Get started

  • Tell the browser what it is reading <html>
  • Add a <head> 
  • Add a <title>Home</title> this is what the reader will see in the open tab in their web browser 
  • Now close the head </head>

  • Now add text to the body of the document<body>

    <h1>Hello World</h1>

    </body>

  • and close the document</html>

Your code should look something like this

<!DOCTYPE html>
<html>
<head>
<title>Home</title>

</head>
<body>

<h1>Hello World</h1>


</body>
</html>

open your html file locally in  a website browser

It will look something like this

Hooray!

Great work!

But this is a little boring...

We need to add some style. 

But first, let's learn a bit more HTML

HTML basics that will help

  • line break <br>
  • make your text bold <b>text here will be bold</b>
  • I want to add a link - when you click it, it will take the enduser to that site.
    • <a href="website.com">Check this out</a>
  • I want to add some style-->Let's move on to CSS then

It is encouraged to leave yourself notes

  • adding // or <!–-  before your text and --> after you text, this is called "commenting out" your code
  • This means that other programmers will see it, but the browser will not make it visible to the end user.
<!DOCTYPE html>
<html>
<head>
//this will be visible in the open tab of a web browser
<title>basics</title>

</head>
<body>
<!–- The title is a greeting to the world! -–>
<h1>Hello World</h1>

<!–-  next I will say a bit about myself and this website in the paragraph -–>

<p>I Love Geospatial Technologies!
My Name is Britta Ricker. Contact me at b.a.ricker at uu.nl
</p>

//That is all for now. closing up shop
</body>
</html>

Make two more pages

  • Before we move on, let's create two new web pages
  • open a new document in your text editor and save as: 
    • maps.html
    • about.html

In your map.html file

add your static map

notice the name of the map

Alt is the text that will appear when the user hovers over your image or map

notice the file extension - match yours

<img src="img/linge_red_blue.png" alt="linge" width="800" height="300">

<html>
<head>

<title>DEM</title>

</head>
<body>

<h1>Digital Elevation Model</h1>

<p>I made this map using QGIS and data from the UN SDGs</p>

<img src="img/linge_red_blue.png" alt="linge" width="800" height="300">


</body>
</html>

Basic website showing a static map

CSS

Cascading Style Sheet (CSS) is good for

Create a CSS file

Open a new file in your text editor

Save as "basic.css"

Save in the directory called "scripts"

  • Style the background
  • Style the heading font
  • Style the paragraph font
body {
    background-color: #140500;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
   text-align: center;
}

h1 {
    color: red;
    text-align: center;
}

p {
    
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    text-align: center;
    color: orange;
    font-size: 20px;
}

What does this code do?

CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS describes how elements must be rendered on screen, on paper, or in other media.

Don't use the same style

as me

Use style guides and suggestion sites to find the hex # style recommendations: 

Here is a good one for color schemes

 

On your site, change the following

  • Fonts - size, color, type
  • Background color
  • Change alignment

Don't forget to reference the CSS in the HTML

<!DOCTYPE html>
<html>
<head>
<title>basics</title>
<!---this will call the css file-->
 <link href="scripts/basic.css" rel="stylesheet">
</head>
<body>

<h1>Hello World</h1>

<p>I Love Geospatial Technologies!
My Name is Britta Ricker. Contact me at b.a.ricker at uu.nl
</p>

</body>
</html>

Let's check out the update, test locally

double click the index.html file to view your site locally

index.html

is always your HOME page,

your landing page!

JavaScript

JavaScript is good for

  • User interaction
  • Dynamism 
  • Making Maps!

Javascript is a high level, dynamic, and interpreted programming language.

Examples

Now let's use it to...

Make a 

Navigation Menu
 

Let's Create a JavaScript File

Open a new file using a text editor

Save as script.js

Save it in the directory called "scripts"

Enter the following code

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"<li><a href='maps.html'>Maps</a></li>" +
"</ul>";

Update CSS file to add style to the menu

ul#menu {
    padding: 0;
    margin-bottom: 11px;
    text-align: center;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
    text-align: center;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
    text-align: center;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
    text-align: center;
}

Reference the JS in each page (HTML file) for the menu to show up at all!

Add the following code to your html doc so that the menu will render

//Add this line where you want your menu to appear
<nav id="nav01"></nav>

//add this reference anywhere
<script src="scripts/script.js"></script>

My site now looks like this

https://github.com/bricker0/BasicWebsite

Don't 
Stop
There

About

On your about page - add a little professional blurb about yourself. Add contact information, links to LinkedIn or other professional profiles

Individual Maps

Create a new page for each of you maps,

use iFrames and other techniques to add your maps

add links to your work

add your maps as you make them

 

From your SDG Map on Leaflet

Your Static SDG map made with QGIS - jpg

From Google Earth Engine

Something else you have been wanting to try? 

<a href="#" class="image fit"><iframe position= center; width="100%" height="500px" src="LINK TO YOUR MAP HERE" frameborder="2" allow="accelerometer; autoplay; encrypted-media; gyroscope" allowfullscreen></iframe></a></a>

Tips and tricks when using the templates: 

iframes are great.

insert iframe with the following code.

Make sure to add the link to your own map. you may also change other parameters

Add an image

the way to add your static map is the same as adding any image 

put the image in your img directory and then reference it in the html - adjust the height and width to match the page or image

<img src="img/linge_red_blue.png" alt="linge" width="800" height="300">

Add your map

example from GEE - later

Great Work!

Made with Slides.com