Make a Website Together, by hand.

Learning HTML, CSS, and JavaScript

https://github.com/bricker0/BasicWebsite

HTML is the noun

CSS is the adjective

JavaScript is the verb

Get organized!

Create a local directory called "website"

In that directory create a sub-folder called "scripts"

and another called "img"

HTML

Create a Website

Using Hyper Text Markup Language (HTML)

Open your fav text editor

(Mine is sublime Notebook++ is also good) 

Then open a new document and save as index.html

in your folder called "website"

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>
<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: 
    • choropleth.html
    • about.html

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

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

1. From Google Earth Engine

- hint above code section in GEE click App..

2. From your SDG Map App from ArcGIS Online

3. your Static SDG map made with QGIS - jpg

4. and more!

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>

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

Add your map

 

Make a Website Together, by hand.

By Britta Ricker

Made with Slides.com

Make a Website Together, by hand.

  • 1,688

More from Britta Ricker