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 "basic website"

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

HTML

Create a Website

Using Hyper Text Markup Language (HTML)

Open your fav text editor

(Mine is sublime)

Then open a new document and save as basic.html

in your folder called "basic website"

First things first

  • Tell the browser what it is reading <html>
  • Add a <head> 
  • Add a <title>Hello World!</title>
  • Now close the head </head>
  • Next open the body of your document/webpages with <body>
  • Tell the user what they are reading about in the heading think of this as the title of your map <h1>About Me!</h1>
  • Then tell them more in the paragraph <p>My name is Britta Ricker and I love geospatial technology!</p>
  • Then close it all up with </body></html>

Your code should look something like this

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

</head>
<body>

<h1>Hello World</h1>

<p>I Love Geospatial Technologies!
My Name is Britta Ricker. Contact me at bricker0 at uw.edu
</p>

</body>
</html>

In a 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>
  • I want to add a link - see the code below- the bold text will be visible on the website and 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 bricker0 at uw.edu
</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

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 bricker0 at uw.edu
</p>

</body>
</html>

Let's check out the update, test locally

double click the basic.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='basic.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

Maps

On your maps page, add links to your work

add your maps

1. From Google Earth Engine

2. From your SDG Map App

3. your Static SDG map made with QGIS - jpg

4. One more! Your choice - map from your mobile app data? Something else you have been wanting to try? 

Add an image

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

Add your map

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

<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

Make a Website Together, by hand.

By Britta Ricker

Made with Slides.com

Make a Website Together, by hand.

  • 1,611

More from Britta Ricker