-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
82 lines (62 loc) · 4.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<!--The head contains metadata about our page and it's the place where we can load css files (for -->
<!--styling) and javascript files.-->
<head>
<meta name="author" content="Stephan Risi">
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<!-- Load JQuery and Bootstrap. They are javascript library that handle the layouting for us.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--Set the title for the page-->
<title>Github Pages Tutorial</title>
<!-- The nav bar remains the same for every page, so by defining it in only one file, we only
need to edit it in one place when we make changes to it. -->
<script> $(function(){$("#header").load("header.html");});</script>
<!-- Import the css file, which defines how our website looks -->
<link href="css/main.css" rel="stylesheet">
</head>
<!--We define the elements that we actually want to display in the body element-->
<body>
<!--This element is a placeholder for the header with the navbar, which we load above-->
<div id="header"></div>
<!--a div (for division) defines a section of the page. By giving the div below (which contains-->
<!--all of the text the class "column", we can control, for example, how large the borders to the-->
<!--left and right of the page should be.-->
<div class="column">
<!--And with that, we can finally display the actual text on the website:-->
<!--h1 stands for heading 1, the largest kind of header. You can add smaller headings with h2, h3 etc.-->
<!--Note: we need to both open (<h1>) and close (</h1>) all of the tags that we use.-->
<h1>Welcome to the Github Pages Tutorial</h1>
<!--p stands for paragraph, the main text building blocks we're working with.-->
<p>Hi there! This is a tutorial on how to set up a simple static website with
<!--This is a link. It contains the website we link to as a href (hypertext reference)-->
<!--as well as the clickable link text. Here, we're linking to pages.github.com and display -->
<!--the term Github Pages-->
<!-- Here's how links work generally: <a href="website-we-link.to">Clickable link text</a>-->
<a href="https://pages.github.com/">Github Pages</a>
created by <a href="http://web.mit.edu/crystall/www/">Crystal Lee</a> and
<a href="http://stanford.edu/~risi/">Stephan Risi</a>. You can also have a look at the
<a href="https://github.com/srisi/github_pages_tutorial">underlying Github repository</a>.
</p>
<p>
The beauty of using Github Pages is that you don’t need to worry about hosting or
setting up your own server. You can just create and edit html files and they will
be immediately available to everyone. This tutorial is inspired by a similar
<a href="http://miriamposner.com/classes/dh201w19/tutorials-guides/web-development/publish-your-website-with-github-pages/">tutorial</a>
created by <a href="http://miriamposner.com/">Miriam Posner</a>, who has also
<a href="http://miriamposner.com/classes/dh201w19/final-project/building-your-project-site/">written
about the advantages and disadvantages of using Github Pages</a> in more detail.
</p>
<p>
We will walk you through the process of setting up a <a href="https://github.com">Github</a>
account, making edits to the page, and using it as a place to host your own work.
</p>
<p>
Whenever you’re ready you can get started with the first section,
<a href="setup.html">setup</a>.
</p>
</div>
</body>