Difference between revisions of "Creating your own website using JavaScript HTML, hosted on GitHub"
From CUOSGwiki
Jump to navigationJump to searchGrahamScott (talk | contribs) |
GrahamScott (talk | contribs) |
||
| Line 19: | Line 19: | ||
=== Set up your document === |
=== Set up your document === |
||
| − | For this tutorial, you will want to input the following code. This will set your document as the right type of HTML file, as well as the link to the required packages and links to make your code run. |
+ | For this tutorial, you will want to input the following code. This will set your document as the right type of HTML file, as well as the link to the required packages and links to make your code run. Add this code to your Atom project. |
| + | |||
| − | *Begin your document with this on line 1 of your file: |
||
| − | <!DOCTYPE html> |
||
| − | *Add this to your file on line 2. |
||
| − | <html> |
||
| − | <head> |
||
| − | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"/> |
||
| − | <script src='https://unpkg.com/leaflet@1.9.2/dist/leaflet.js'></script> |
||
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
||
| − | <script src='https://code.jquery.com/jquery-3.5.1.min.js'></script> |
||
| − | <title>GEOM 4008 Tutorial</title> |
||
| − | </head> |
||
| − | </html> |
||
== The body of the website == |
== The body of the website == |
||
| Line 38: | Line 27: | ||
=== Creating a title === |
=== Creating a title === |
||
A title is very important to your website. It will tell the user exactly what they are looking at on your site. Add this code to create a title. |
A title is very important to your website. It will tell the user exactly what they are looking at on your site. Add this code to create a title. |
||
| + | |||
| − | <h1>TITLE</h1> |
||
=== Adding text to your document === |
=== Adding text to your document === |
||
To add text in your document, create a line beginning with <p>. This tells the application you want to make a new paragraph. By adding this one line underneath your header from the previous step, it will create a line of text. |
To add text in your document, create a line beginning with <p>. This tells the application you want to make a new paragraph. By adding this one line underneath your header from the previous step, it will create a line of text. |
||
| + | |||
| − | <p> Insert whatever text you want here. |
||
=== Adding images === |
=== Adding images === |
||
| Line 58: | Line 47: | ||
=== Create contact information === |
=== Create contact information === |
||
This can be inserted at the bottom of your file, but still within the body strings of your code. |
This can be inserted at the bottom of your file, but still within the body strings of your code. |
||
| + | |||
| − | <div id='Contact'> |
||
| − | <hr> |
||
| − | CONTACT INFO<br/> |
||
| − | Loeb Building<br/> |
||
| − | Carleton University<br/> |
||
| − | 1125 Colonel By Drive<br/> |
||
| − | Ottawa, ON<br/> |
||
| − | K1S 5B6<br/> |
||
| − | (613) 520-2600 |
||
| − | </div> |
||
=== Create the navbar === |
=== Create the navbar === |
||
Add this code to the beginning of your body ahead of all the other code to ensure that it will appear at the top of your website. This code will create a navbar with a link to your homepage (top of the document) and the contact info (bottom of the document) |
Add this code to the beginning of your body ahead of all the other code to ensure that it will appear at the top of your website. This code will create a navbar with a link to your homepage (top of the document) and the contact info (bottom of the document) |
||
| + | |||
| − | <div class='navbar'> |
||
| − | <a href='#About Us'>Home</a> |
||
| − | <a href='#Contact'>Contact</a> |
||
| − | </div> |
||
== Final result of your code == |
== Final result of your code == |
||
By following the steps throughout the tutorial, your code should look like this. |
By following the steps throughout the tutorial, your code should look like this. |
||
| − | <!DOCTYPE html> |
||
| − | <html> |
||
| − | <head> |
||
| − | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"/> |
||
| − | <script src='https://unpkg.com/leaflet@1.9.2/dist/leaflet.js'></script> |
||
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
||
| − | <script src='https://code.jquery.com/jquery-3.5.1.min.js'></script> |
||
| − | <title>GEOM 4008 Tutorial</title> |
||
| − | <style> |
||
| − | #mapdiv{ |
||
| − | width:400px; |
||
| − | height:400px; |
||
| − | } |
||
| − | </style> |
||
| − | </head> |
||
| − | <body> |
||
| − | <div class='navbar'> |
||
| − | <a href='#About Us'>Home</a> |
||
| − | <a href='#Contact'>Contact</a> |
||
| − | </div> |
||
| − | <h1>TITLE</h1> |
||
| − | <p> Insert whatever text you want here. |
||
| − | <h2 class='personal'>Picture</h2> |
||
| − | <img src='img\gis.jpeg' height='200px'> |
||
| − | <h3>Unordered list</h3> |
||
| − | <ul> |
||
| − | <li>QGIS</li> |
||
| − | <li>ArcGIS</li> |
||
| − | <li>JavaScript</li> |
||
| − | </ul> |
||
| − | <h3>Ordered list</h3> |
||
| − | <ol> |
||
| − | <li>Loeb Building</li> |
||
| − | <li>Southam Hall</li> |
||
| − | <li>MacOdrum Library</li> |
||
| − | </ol> |
||
| − | <h2>Map</h2> |
||
| − | <div id='mapdiv'> |
||
| − | <script type='text/javascript'> |
||
| − | var mymap=L.map('mapdiv').setView([45.380916, -75.698869], 13); |
||
| − | L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { |
||
| − | maxZoom: 18, |
||
| − | id: 'mapbox/streets-v11', |
||
| − | tileSize: 512, |
||
| − | zoomOffset: -1, |
||
| − | accessToken: 'pk.eyJ1IjoiZ2VvbTQwMDEiLCJhIjoiY2w4bmw3NjN0MDAwZzNvcDl6dnppZnp0YyJ9.5ewi5WQKlGiKEK4hMh8sjA' |
||
| − | }).addTo(mymap); |
||
| − | |||
| − | mymap.on('click', function(e) |
||
| − | { |
||
| − | alert(e.latlng); |
||
| − | L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap).bindPopup('text bubble'); |
||
| − | }); |
||
| − | |||
| − | var place = 'Loeb Building' |
||
| − | geocode_url = "https://nominatim.openstreetmap.org/search"; |
||
| − | $.ajax({ |
||
| − | dataType: 'json', |
||
| − | url: geocode_url, |
||
| − | type: 'get', |
||
| − | data: { |
||
| − | q: place+',Ottawa,Canada', |
||
| − | format: 'json', |
||
| − | }, |
||
| − | success: function(data){ |
||
| − | console.log(data); |
||
| − | L.marker([data[0].lat, data[0].lon], { |
||
| − | |||
| − | }) |
||
| − | .addTo(mymap) |
||
| − | .bindPopup(place); |
||
| − | } |
||
| − | }) |
||
| − | </script> |
||
| − | </div> |
||
| − | <div id='Contact'> |
||
| − | <hr> |
||
| − | CONTACT INFO<br/> |
||
| − | Loeb Building<br/> |
||
| − | Carleton University<br/> |
||
| − | 1125 Colonel By Drive<br/> |
||
| − | Ottawa, ON<br/> |
||
| − | K1S 5B6<br/> |
||
| − | (613) 520-2600 |
||
| − | </div> |
||
| − | </body> |
||
| − | </html> |
||
Revision as of 01:31, 5 December 2022
Contents
Objective
Getting Started
Downloading the software
Data collection
Tips and tricks
Setting up your file
Set your working directory
Set up your document
For this tutorial, you will want to input the following code. This will set your document as the right type of HTML file, as well as the link to the required packages and links to make your code run. Add this code to your Atom project.
The body of the website
Creating a title
A title is very important to your website. It will tell the user exactly what they are looking at on your site. Add this code to create a title.
Adding text to your document
To add text in your document, create a line beginning with
. This tells the application you want to make a new paragraph. By adding this one line underneath your header from the previous step, it will create a line of text.
Adding images
Adding lists: Ordered and Unordered
Adding a map to display your desired location
Style
Your navigation bar will display at the top of the website with links to a section of your website. For this example, I will create a contact information section which the navbar will bring you to.
Create contact information
This can be inserted at the bottom of your file, but still within the body strings of your code.
Add this code to the beginning of your body ahead of all the other code to ensure that it will appear at the top of your website. This code will create a navbar with a link to your homepage (top of the document) and the contact info (bottom of the document)
Final result of your code
By following the steps throughout the tutorial, your code should look like this.
