Difference between revisions of "Creating your own website using JavaScript HTML, hosted on GitHub"

From CUOSGwiki
Jump to navigationJump to search
Line 45: Line 45:
   
 
=== Adding a map to display your desired location ===
  
=== Adding a map to display your desired location ===
  +
  +
  +
== Adding a Navigation Bar ==
  +
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.
  +
<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>

Revision as of 01:17, 5 December 2022

Objective

Getting Started

Downloading the software

Data collection

Navigating Atom

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. Copy and paste the following into 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

Creating a title

Adding text to your document

Adding images

Adding lists: Ordered and Unordered

Adding a map to display your desired location

Adding a Navigation Bar

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. 

       CONTACT INFO

       Loeb Building

       Carleton University

       1125 Colonel By Drive

       Ottawa, ON

       K1S 5B6

       (613) 520-2600
Retrieved from "https://dges.carleton.ca/CUOSGwiki/index.php?title=Creating_your_own_website_using_JavaScript_HTML,_hosted_on_GitHub&oldid=18876"