Creating your own website using JavaScript HTML, hosted on GitHub
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. 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
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.
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.
Insert whatever text you want here.
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.
CONTACT INFO
Loeb Building
Carleton University
1125 Colonel By Drive
Ottawa, ON
K1S 5B6
(613) 520-2600
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)