-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (188 loc) · 13.7 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!-- this is a comment -->
<!-- a comment is a thing that the computer ignores -->
<!-- a comment is a thing for humans to read -->
<!-- a comment helps humans understand the code written for computers -->
<!-- you can read these comments to understand what the different things mean -->
<!-- OR: just skip to <body> and start editing the peas. -->
<!-- all the stuff below, until title, is standard things you can pretty much just copy and paste -->
<!-- without worrying too much about what it means-->
<!DOCTYPE html> <!-- this tells the computer that the document type is html -->
<!-- html is the language that web browsers speak -->
<!-- web browsers (Chrome, Safari, Firefox) read html files (text) and make
them into fabulous websites with images, videos, etc. -->
<!-- our code says to the browser: "please interpret all of this stuff according
to the html standards that we have agreed on globally" -->
<html lang="en">
<!-- this "html tag": <html> tells the browser, the html code begins now -->
<!-- lang="en" tells screen readers that the text on this webpage is in English -->
<head>
<!-- this is the website "header", which includes metadata about the website, such as: -->
<meta charset="UTF-8">
<!-- charset = "character set", this tells the browser to display all
possible characters correctly on the page -->
<!-- if not determined, results in gibberish on screen, eg. "hääyö" becomes "hääyö" -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- this tells the browser to adjust the content depending on the size of the "viewport" -->
<!-- the viewport is basically the user's screen -->
<!-- nowadays people will navigate websites on their phones or computers -->
<!-- so it's important to adjust the website content accordingly -->
<title>how to make a website</title>
<!-- now the fun begins! -->
<!-- whatever you write inside the title tag, ie. between <title></title> -->
<!-- will appeare on the tab in your browser!-->
<!-- tells the browser to get a font so we can display peas: -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- here we link to a CSS "stylesheet", in which we can define fonts, colors, font size, etc. -->
<!-- we can also define these things on a need-by-need basis, "inline" in the html code -->
<!-- but sometimes, and often, it makes sense to define things for the whole website -->
<!-- Below I write some CSS here for my document: -->
<style>
.noto-color-emoji-regular {
font-family: "Noto Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
}
body {background-color: rgb(255, 189, 241);}
p {font-size: 24px; font-family: "Noto Color Emoji"}
</style> <!-- above I set the background color of the body of my page (the
entire page, to this light pinkish color. Color, not colour.)-->
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!-- here we define the "favicon", what a strange name -->
<!-- this is one of my favorite parts about making a website -->
<!-- you create a 32x32 PIXEL or 64x64 PIXEL image (VERY TINY) -->
<!-- and then this image is displayed as a tiny icon in the tab, next to the website title -->
</head>
<!-- this, backslash before the tag name </>, tells the browser: "end of all
the metadata things I wanted to tell you" -->
<body>
<!-- here begins the BODY of a website, this is all the CONTENT, the STUFF
of the website, the meat and bones. -->
<!-- in our case: images and text -->
<h1>This is a website about how to make a website.</h1>
<!-- this is a header tag, h1, it's like the most important header on my website. -->
<!-- you also have h2, h3, h4, like subheadings/subchapters of your website. -->
<!-- below is a "p" tag, p is for "paragraph" -->
<!-- tags are for telling the browser: this is a paragraph, this is a heading, this is an image, etc. -->
<!-- we open them like this: <p> and we close them like this: </p> -->
<!-- the stuff inside, <p>STUFF INSIDE</p>, is the actual text we write for humans to read-->
<!-- Much like selecting formatting in a word processor: this is a heading, so display it bigger etc. -->
<p><em>One</em>, open this page with developer tools to see and modify the source code (the html).</p>
<p><em>Two</em>, create a GitHub account. Then create a repository called: yourusername.github.io, download and copy this index.html into it and publish a webpage.</p>
<p><em>Three</em>, download a code editor, modify the index.html, drag and drop the new file to your repository and see your changes updated on your website.</p>
<hr><!--to start a new section of the page-->
<h2><em>One</em></h2>
<p>please click option+command+I (mac) or F12 or Control+Shift+I (windows/linux) on chrome for developer tools so you can read the source code. Right click and select "edit as HTML" to make modifications to the code and see the changes on the page.</p>
<hr><!-- the "hr" tag creates a horizontal line. No need to close it. Simple way of doing layout. -->
<h2><em>Two</em></h2>
<p>Go to <a target="_blank" href="https://github.com">GitHub.com</a>. Create an account - choose your username wisely.</p>
<p>Create a repository called yourusername.github.io (eg: username is pea, so I create a repository called pea.github.io).</p>
<p>The syntax is very important. If you don't write your very exact username (lower case), your website will not work.</p>
<p>DO NOT TOUCH the other settings. That is: go against your insticts, because yes, the repository needs to be public, otherwise your website will not be publicly visible. Do not add a readme, do not add a .gitignore.</p>
<p> Click on "Get started by ... uploading an existing file."</p>
<p>Go to <a target="_blank" href="https://github.com/trhi/website">https://github.com/trhi/website</a>. Click on the green <> code button -> download ZIP.</p>
<p>Unzip. Drag and drop the contents of the folder called "website-main" (it containts a file called index.html) to the screen you have open for uploading files to your repository: yourusername.github.io.</p>
<p>Wait a moment, something like three minutes. Then navigate to yourusername.github.io to see your website published on the internet.</p>
<hr><!--to start a new section of the page-->
<h2><em>Three</em></h2>
<p>Download <a target="_blank" href="https://code.visualstudio.com/">visual studio code</a> (or some other code editor). Open the index.html file in VS code and edit it. Save. Press "run and debug" to view the file in the browser. Drag and drop index.html to your github repository to update your webpage.</p>
<hr><!--to start a new section of the page-->
<h2><em>→ A very simple website</em></h2>
<p>Two very basic things: how to write text and how to display an image.</p>
<p>p, lower case, is for paragraph, the paragraph tag, a p. It is pronounced the same as pea 🫛.</p>
<!-- now I will make small modifications to this "p"'s style: -->
<p style="font-size: 50px;">This is how you increase the font size of a pea 🫛.</p>
<p style="color: seagreen;">This is how you add color to a pea 🫛.</p>
<p style="font-size:36px; color: deeppink;">This is how you increase the font size and the color of a pea 🫛.</p>
<p>This is how you <em>emphasize a pea</em> 🫛.</p>
<p>The more I repeat pea 🫛, the stranger it begins to sound 🔊.</p>
<hr><!--to start a new section of the page-->
<p>I will now add an <em>image</em>:</p>
<img style="width: 100%;" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Pisum_sativum_%28fruit%29_3.jpg"></img>
<!-- src tells the browser where to find the image -->
<!-- I searched for a "public domain" image on wikimedia commons and copy pasted the URL of the image in src above. -->
<!-- You could also drag and drop an image, eg. myimage.jpg to your github repository -->
<!-- And in src you would write: src="myimage.jpg" -->
<!-- make the image take up 100% of the width of the screen -->
<p>I want the <em>image</em> to be small: fifty percent of the width of the screen.</p>
<img style="width: 50%;" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Pisum_sativum_%28fruit%29_3.jpg"></img>
<hr><!--to start a new section of the page-->
<p>Now I am going to create a div - a content division element. I am going to make a div that has all my images.</p>
<p>Now I am going to place the div so that it is perfectly centered on my page:</p>
<div style="width: 80%; margin:auto;"> <!-- width: take up 80% of the html document width
margin: calculate the margin size accordingly, automatically -->
<img style="width:100%;" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Pisum_sativum_%28fruit%29_3.jpg"></img>
<!--and make the image width 100% of the width of the division element-->
<p>↓ The image below ↓ works like <em>a link</em>. Click on the image. It will take you to a webpage about peas.</p>
<a target="_blank" href="https://en.wikipedia.org/wiki/Pea"><img style="width:100%;" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Pisum_sativum_%28fruit%29_3.jpg"></img></a>
<!-- the "a" tag means "anchor" - confusing, right? In early days of
html and the internet, it meant that the text inside
the tag was an anchor to another part of the html document, or to another page.
In the words of Tim Berners Lee, "inventor" of the internet:
"I used the term "anchor" for the thing -- document or part of
document -- a link starts or ends on" (post on
X/Twitter on February 4th, 2020).
So I can write: Click <a>here</a> to go to another site. If the user
clicks on "here", the text nestled inside the anchor tag it will take them to another site.
We tell the browser WHERE to take the user by specifying the "href",
the hypertext reference. This can be a website URL/address,
but it can also be other things, such as a link to another
section of the same page we are already on.
I also specify: target="_blank;", this means that the link will open in a new browser tab.
-->
</div>
<hr><!--to start a new section of the page-->
<h2><em>→ Some websites</em></h2>
<p>A list of websites written in html for you to explore. Copy and modify their source code:</p>
<p style="font-size: 25px;">The <a target="_blank" href="https://info.cern.ch/hypertext/WWW/TheProject.html">first ever website</a> in the world.</p>
<p style="font-size: 25px;"><a target="_blank" href="https://terhimarttila.com/">Terhi Marttila</a>. Reads like a CV, with links to works.</p>
<p style="font-size: 25px;"><a target="_blank" href="https://www.moboid.com/protectionsong/precare.html">The website for protection song precare zine</a>, a work by Heather Kelly.</p>
<p style="font-size: 25px;"><a target="_blank" href="https://thehtml.review/archive">A huge bunch of amazing websites by different artists</a>. Click on their name to access their website.</p>
<p style="font-size: 25px;"><a target="_blank" href="https://taper.badquar.to/">taper</a>. Lot's of tiny websites that are artworks, open the source code and modify it.</p>
<hr><!--to start a new section of the page-->
<h2><em>→ Some resources for learning html</em></h2>
<p>Ask <a target="_blank" href="https://chat.openai.com/">https://chat.openai.com/</a> (chatGPT) for help on how to write html.</p>
<p>Read the reference at <a target="_blank" href="https://developer.mozilla.org/">Mozilla developer network</a> for information on different html elements and their properties.</p>
<p>Look for advice on <a target="_blank" href="https://stackoverflow.com/">https://stackoverflow.com/</a>, a forum where people advise eachother.</p>
<p>Read about and study html on <a target="_blank" href="https://www.w3schools.com/">w3schools</a>.</p>
<p>Explore resources or take a free course on html on <a target="_blank" href="https://www.codecademy.com/">codecademy</a>.</p>
<hr><!--to start a new section of the page-->
<pre>
~ ~
* * * *
* *
~ * * ~ *
* ~ * * ~
) ( ) *
* ~ ) (_) ( (_) ) (_) ( *
* (_) # ) (_) ) # ( (_) ( # (_) *
_#.-#(_)-#-(_)#(_)-#-(_)#-.#_
* .' # # # # # # # # # # # `. ~ *
: # # # # # # # # :
~ :. # # # # .: *
* | `-.__ __.-' | *
| `````"""""""""""````` | *
* | | ||\ |~)|~)\ / |
| |~||~\|~ |~ | | ~
~ * | | *
| |~)||~)~|~| ||~\|\ \ / | *
* _.-| |~)||~\ | |~|| /|~\ | |-._
.' '. ~ ~ .' `. *
: `-.__ __.-' :
`. `````"""""""""""````` .'
`-.._ _..-'
`````""""-----------""""`````
------------------------------------------------
</pre>
<p style="font-size:50px; color: deeppink;"><strong>Happy Birthday</strong> 🐥</p>
<audio controls>
<source src="terhi_unfinished_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p style="font-size: 50px;">Happy Birthday 🐥</p>
</body>
<!-- again a backslash before the tag name, telling the browser that it's time to close the body, nothing more on this website -->
</html>
<!-- and a last backslash, to tell the browser that the html file is now over and out -->