Learning HTML, CSS, and JavaScript
In that directory create a sub-folder called "scripts"
Using Hyper Text Markup Language (HTML)
(Mine is sublime)
Then open a new document and save as basic.html
in your folder called "basic website"
<!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>
It will look something like this
Great work!
We need to add some style.
But first, let's learn a bit more HTML
<!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>
Open a new file in your text editor
Save as "basic.css"
Save in the directory called "scripts"
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;
}
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.
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
<!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>
double click the basic.html file to view your site locally
Javascript is a high level, dynamic, and interpreted programming language.
Now let's use it to...
Open a new file using a text editor
Save as script.js
Save it in the directory called "scripts"
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>";
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;
}
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>
On your about page - add a little professional blurb about yourself. Add contact information, links to LinkedIn or other professional profiles
On your maps page, add links to your work
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?
the way to add your static map is the same as adding any image
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