-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (218 loc) · 25.2 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Workshop 19: HTML & CSS</title>
<meta name="description" content="Manchester Raspberry Jam Workshop 19, covering HTML and CSS." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#e5286d">
<meta name="apple-mobile-web-app-status-bar-style" content="#e5286d">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<link rel="manifest" href="manifest.json">
<link rel="icon" sizes="48x48" href="css/icon_48.png">
<link rel="icon" sizes="128x128" href="css/icon_128.png">
<link rel="icon" sizes="192x192" href="css/icon_192.png">
<link rel="stylesheet" type="text/css" href="css/master.css" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" />
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<header>
<!--<img id="logo" src="css/logo_300p.png" alt="Manchester Raspberry Jam Logo"/>-->
<a id="mcrraspjam" href="http://www.mcrraspjam.org.uk" target="_blank">Manchester Raspberry Jam</a>
<h1 id="title">Workshop 19: HTML & CSS</h1>
</header>
<main>
<div id="downloadlink">
This booklet is available online at <a href="https://mcrraspjam.github.io/booklet-workshop19/" target="_blank">mcrraspjam.github.io/booklet-workshop19</a> (HTML) or <a href="http://bit.ly/mcrraspjam" target="_blank">bit.ly/mcrraspjam</a> (PDF)
</div>
<section id="contents">
<p>This workshop will teach you how to create basic web pages using HTML and CSS.</p>
<p>Difficulty: Intermediate workshop</p>
<h2>Contents</h2>
<nav>
<ol class="contents" start="0">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#helloworld">Hello, World!</a>
<ol class="subcontents noprint">
<li><a href="#helloworld-html">Writing the content with HTML</a></li>
<li><a href="#helloworld-css">Changing the look with CSS</a></li>
</ol>
</li>
<li><a href="#devtools">Developer Tools</a></li>
<li><a href="#wikipedia">Styling a Webpage</a>
<ol class="subcontents noprint">
<li><a href="#wikipedia-page">Page Layout</a></li>
<li><a href="#wikipedia-infobox">Infobox Table</a></li>
<li><a href="#wikipedia-image">Floating Images</a></li>
</ol>
</li>
<li><a href="#homepage">Creating a Personal Homepage</a>
<ol class="subcontents noprint">
<li><a href="#homepage-page">Page Layout and Header</a></li>
</ol>
</li>
</ol>
</nav>
</section>
<section id="introduction">
<h2>0 Introduction</h2>
<p>Most pages on the World Wide Web are text documents written in <b>HTML</b> (HyperText Markup Language). A 'stylesheet language' called <b>CSS</b> (Cascading Style Sheets) is often used to change the visuals of the HTML.</p>
<p>In this workshop, we'll learn what both of these languages do, and use them to create our own web pages</p>
<p class="noscreen">The files for this workshop can be found at <a href="http://bit.ly/mcrraspjam" target="_blank">bit.ly/mcrraspjam</a></p>
<h3 class="noprint">What you'll need</h3>
<p class="noprint">Any computer with a web browser and a text editor, preferably one with syntax highlighting.</p>
<p class="noprint">The files for this workshop can be found <a href="https://drive.google.com/open?id=16zO2YEDwCdGpDIXZgB3duoQTpvyMehwu" target="_blank">here</a>.</p>
<h3>About these booklets</h3>
<p>The aim of these booklets is to help you attempt these workshops at home, and to explain concepts in more detail than at the workshop. You don't need to follow these booklets during the workshop, but you can if you'd like to.</p>
<p>When you need to make changes to your code, they'll be presented in <em>listings</em> like the example below:</p>
<iframe class="codeblock" src="code/listing_intro.html" onload="resizeIframe(this)"></iframe>
<h4>Everything else</h4>
<p class="noprint">The GitHub repo for these notes can be found at <a href="https://github.com/McrRaspJam/booklet-workshop19" target="_blank">github.com/McrRaspJam/booklet-workshop19</a></p>
<p>To allow modification and redistribution of our workshop notes, they are distributed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> License.</p>
<p>If you get stuck, find errors or have feedback about these booklets, please email me at: <a href="mailto:[email protected]">[email protected]</a></p>
</section>
<section id="helloworld">
<h2>1 Hello, World!</h2>
<p>Boot your computer to the desktop. If you're using a Raspberry Pi that does not log in automatically, the default login is:</p>
<p><b>username:</b> pi<br /> <b>password:</b> raspberry</p>
<p>Once at the desktop, open the text editor of your choice. We will be using <em>Geany</em>, which can be found in the application menu of Raspbian under <span class="monospace">Programming → Geany IDE</span></p>
<figure class="autoimage">
<img src="img/geany.png" alt="The Geany IDE window" />
<p>The Geany IDE window (shown on Windows)</p>
</figure>
<p>The Geany IDE window will open, with a new file already opened. <b>Click</b> <span class="monospace">File → Save As...</span> and save the empty file inside the workshop 19 folder <span class="monospace">~/McrRaspJam<wbr>/Workshop 19<wbr>/0_helloworld/</span> with the name <span class="monospace">helloworld.html</span></p>
<section id="helloworld-html">
<h3>Writing the content with HTML</h3>
<p>HTML is a <em>markup language</em>, which means that it determines the content of a webpage. The following code creates a very simple webpage with a single text message:</p>
<iframe class="codeblock" src="code/listing_hw1.html" onload="resizeIframe(this)"></iframe>
<p>You can try opening the .html file in a web browser now, and you should see 'Hello, World!' appear on screen in the tab that opens.</p>
<p class="noprint">Some additional information about the type of webpage should also be added. It's not too important to know what these changes do yet, but they'll be present in all of our HTML documents.</p>
<iframe class="codeblock noprint" src="code/listing_hw2.html" onload="resizeIframe(this)"></iframe>
<h4>What the code means</h4>
<p>Let's go over the code we just wrote line-by-line, and see what everything does. Following the first line (which just tells any program reading the file what it is) we have our first tag, called html.</p>
<iframe class="codeblock" src="code/listing_hw3.html" onload="resizeIframe(this)"></iframe>
<p>Tags almost always come in pairs. The first <span class="monospace"><html></span> opens the tag, and the second, which has a /, closes the tag. We know that anything between these tags is part of the HTML code of our webpage.</p>
<iframe class="codeblock" src="code/listing_hw4.html" onload="resizeIframe(this)"></iframe>
<p>Next, we have two sets of tags, <span class="monospace"><head></span> and <span class="monospace"><body></span>. The 'head' elements are anything that <em>won't</em> be drawn on the page, whereas the <em>body</em> element should all appear visually on the page.</p>
<p>The text 'Hello, World!' has been placed inside the <span class="monospace"><body></span> tag, so it appears on screen.</p>
<p class="noprint">Given that <span class="monospace"><title>Hello, World!</title></span> therefore does not appear on the webpage itself, what do you think it does? Once you've made a guess, try changing it, then save and reload the page and see what changes.</p>
</section>
<section id="helloworld-css">
<h3>Changing the look with CSS</h3>
<p> We've seen that HTML determines what appears on-screen in a webpage. CSS is a <em>style sheet language</em>, which means it takes a HTML page and applys visual styles to it, allowing us to change the layout and presentation of our pages.</p>
<p><b>Create</b> a new file and save it in the same folder as your html file with the name <span class="monospace">style.css</span>. We will write our first <em>rule</em> as follows:</p>
<iframe class="codeblock" src="code/listing_hw5.html" onload="resizeIframe(this)"></iframe>
<p>In order to make our CSS apply to our webpage, we need to tell the HTML code to load the stylesheet. We do that by adding a special tag to the page head.</p>
<iframe class="codeblock" src="code/listing_hw6.html" onload="resizeIframe(this)"></iframe>
<p class="noprint">This tag says that we're going to load a stylesheet, and that it's found in the file named 'style.css'.</p>
<p>Now, when you save and reload the page, several things should have changed. What 3 things have happened?</p>
<p>In CSS, parts of the HTML code are chosen using <em>selectors</em>, and then <em>rules</em> are applied to anything that matches the selector. In our small piece of CSS, the selector is <span class="monospace">body</span>. This looks for all body tags (of which there is only one) and applys the rules to them.</p>
<p>The text in our page is inside the <span class="monospace">body</span> tag, so if we added a rule to change it, all text we added to our site would be changed. Let's add more tags in our HTML, so we can style specific bits of text.</p>
<iframe class="codeblock" src="code/listing_hw7.html" onload="resizeIframe(this)"></iframe>
<p><span class="monospace">h1</span> means 'Heading 1', and suggests that the text within is the page title. We can add the following CSS to change the size and colour of the text. (watch out for the american spelling 'color')</p>
<iframe class="codeblock" src="code/listing_hw8.html" onload="resizeIframe(this)"></iframe>
<p>We added an 'id' to our <span class="monospace"><span></span> tag which we can use to style just one tag instead of all span tags on the page. To style an id instead of a tag, start the selector with <span class="monospace">#</span>.</p>
<iframe class="codeblock" src="code/listing_hw9.html" onload="resizeIframe(this)"></iframe>
<figure class="autoimage">
<img src="img/helloworld.png" alt="The completed Hello, World! webpage" />
<p>The completed 'Hello, World!'' webpage</p>
</figure>
</section>
</section>
<section id="devtools">
<h2>2 Developer Tools</h2>
<p class="noscreen"><em>Read more about developer tools on the online notes</em></p>
<p class="noprint">Included in most web browsers are a set of tool menus for web developers. These tools are quite comprehensive, and include things like debuggers for Javascript scripting and performance monitors for complex 2D and 3D content. We're going to use the inspector tool to view individual elements and which bits of CSS are affecting them.</p>
<p class="noprint" style="font-size:0.9rem; font-style:italic">The following instructions are for Chromium/Chrome, but can also be followed with Mozilla Firefox, and the process should be similar on other browsers.</p>
<p class="noprint">If you haven't already, open these notes in your browser, and press <span class="monospace">F12</span> to bring up the developer tools panel. The panel should open up in the <em>elements/inspector</em> tab, and a copy of the page's source code should be visible underneath.</p>
<figure class="autoimage-noenlarge noprint">
<img src="img/icon-selector.png" alt="" />
<p>The 'Select element' button</p>
</figure>
<p class="noprint">Click the button in the top left of the panel. This allows you to select elements on the page using the mouse. You can hover over elements to see their CSS <em>Box Model</em>.</p>
<p class="noprint">In Chromium, the element is hightlighted in blue, and the margin space is highlighted in orange. Another part of the box model is <em>padding</em>. Try find an element in this page which has padding. How does padding differ to margin?</p>
</section>
<section id="wikipedia">
<h2>3 Styling a Webpage</h2>
<p>Let's try creating a stylesheet for a more complete web page. Go to <span class="monospace">~/McrRaspJam<wbr>/Workshop 19<wbr>/1_wikipedia/</span> and then open the file <span class="monospace">raspberrypi.html</span> in your text editor.</p>
<p>This file is a truncated copy of the <a href="https://en.wikipedia.org/wiki/Raspberry_Pi" target="_blank">Wikipedia entry</a> for the Raspberry Pi. The page has the same information as the Wikipedia page it came from, but it currently has no stylesheet applied to it. We're going to design our own stylesheet for the page.</p>
<figure class="autoimage">
<img src="img/wiki-before.png" alt="" />
<p>The copy of Wikipedia's Raspberry Pi entry</p>
</figure>
<p>Start by taking a look at the head of the HTML file. You can see that a stylesheet should be being loaded with the line <span class="monospace"><link rel="stylesheet" href="style.css"></span> but there isn't a style.css file in the folder yet. Create a new file called <span class="monospace">style.css</span> and open it in your text editor.</p>
<p class="noprint">From here on, the notes will provide an example of how a stylesheet could be, but feel free to change sizes, spacing and colours how you prefer.</p>
<section id="wikipedia-page">
<h3>Page Layout</h3>
<p>A typical layout for articles on the web is to display the text in a single column, placed in the centre of the screen.</p>
<p class="noprint">the first HTML tag that we can select in our stylesheet is the <span class="monospace"><html></span> tag itself. We will make this the background of our page, setting the background colour to a light grey. We can also set our font and text size here, as all tags are within the <span class="monospace"><html></span> tag and will <em>inherit</em> that font.</p>
<iframe class="codeblock" src="code/listing_wi1.html" onload="resizeIframe(this)"></iframe>
<p>Immediately inside the <span class="monospace"><html></span> tag in our webpage is the <span class="monospace"><body></span> tag, which we will style as the page itself.</p>
<p class="noprint">We will set the background colour to white so it looks different to the background. We'll limit the width; we could set a pixel value like <span class="monospace">800px</span> but we'll use <span class="monospace">em</span> which is a unit that is relative to the font size. We'll also set the margin to <span class="monospace">0 auto</span>, which means the horizontal margins are automatic, centring the tag on the page. Finally, we'll set the padding so the text isn't pressed against the edge of the body tag.</p>
<iframe class="codeblock" src="code/listing_wi2.html" onload="resizeIframe(this)"></iframe>
<figure class="autoimage">
<img src="img/wiki-body.png" alt="" />
<p>The page after adding html/body rules</p>
</figure>
</section>
<section id="wikipedia-infobox">
<h3>Infobox Table</h3>
<p>The infobox is a feature on many Wikipedia pages, it is a simple table that outlines many pieces of information about the subject. We won't go into the details of HTML tables today, but let's decorate a few parts of it.</p>
<p>We'll start by putting a border around the table, so it is clear where it begins and ends on the page. A CSS border has three properties; the thickness of the line, the style (solid, dashed, double, etc) and the colour. We'll also give it a background colour and center it in the page.</p>
<iframe class="codeblock" src="code/listing_wi3.html" onload="resizeIframe(this)"></iframe>
<p>Next, we'll centre the images inside the table. We'll use the selector <span class="monospace">#infobox img</span>, which selects any <span class="monospace"><img></span> tags inside the tag with <span class="monospace">id="infobox"</span>. We can use the same margin trick to centre images, but we need to change the <span class="monospace">display</span> rule.</p>
<iframe class="codeblock" src="code/listing_wi4.html" onload="resizeIframe(this)"></iframe>
<p>The list of operating systems uses a <span class="monospace"><ul></span> (unordered list) tag, which by default is shown as bullet points. Bullet points aren't needed in this case, so we can disable those with CSS as well. We'll also remove the padding that is used to make space for the bullet points.</p>
<iframe class="codeblock" src="code/listing_wi5.html" onload="resizeIframe(this)"></iframe>
<p class="noprint"><b>Extra:</b> Each of the operating systems in the list has a 'class', categorising it into a family of operating systems. Try colouring each item <span class="monospace"><li></span> in the list based on these classes. Here are some colour codes you could use:</p>
<ul class="noprint swatches">
<li>#dfbfff <span class="swatch" style="background-color: #dfbfff"></span></li>
<li>#bfcaff <span class="swatch" style="background-color: #bfcaff"></span></li>
<li>#bfffbf <span class="swatch" style="background-color: #bfffbf"></span></li>
<li>#ffbfbf <span class="swatch" style="background-color: #ffbfbf"></span></li>
<li>purple <span class="swatch" style="background-color: purple"></span></li>
<li>blue <span class="swatch" style="background-color: blue"></span></li>
<li>green <span class="swatch" style="background-color: green"></span></li>
<li>red <span class="swatch" style="background-color: red"></span></li>
</ul>
<p class="noprint">To select a class, start the selector with a <span class="monospace">.</span>, e.g. <span class="monospace">.os-other {</span></p>
</section>
<section id="wikipedia-image">
<h3>Floating Images</h3>
<p>On Wikipedia, images sit to the right of the text on the page. This is very easy to do with CSS with the <span class="monospace">float</span> rule. We'll also add a border.</p>
<iframe class="codeblock" src="code/listing_wi6.html" onload="resizeIframe(this)"></iframe>
<figure class="autoimage">
<img src="img/wiki-after.png" alt="" />
<p>Wikipedia page with a completed stylesheet</p>
</figure>
</section>
</section>
<section id="homepage">
<h2>4 Creating a Personal Homepage</h2>
<p>For our final webpage today, we'll be creating a personalised webpage. You can make it about yourself if you'd like, the version in the notes will be about Babbage the Bear, the Raspberry Pi's official mascot.</p>
<figure class="autoimage noprint">
<img src="img/babbage.jpg" alt="" style="max-height:480px" />
<p>Babbage the Bear in full Raspberry Pi regalia.</p>
</figure>
<section id="homepage-page">
<h3>Page Layout and Header</h3>
<p>First, we'll create a new blank HTML page, and add a simple header.</p>
<iframe class="codeblock" src="code/listing_hp1a.html" onload="resizeIframe(this)"></iframe>
<p>Now we'll create the stylesheet <span class="monospace">style.css</span>. We need to conside what shape we want our page to be. The thin column we used for the Wikipedia page is great for long pieces of text, but our homepage will only have a small amount of text. Let's try centering our page in the middle of the screen</p>
<iframe class="codeblock" src="code/listing_hp1b.html" onload="resizeIframe(this)"></iframe>
<p>We've used the same <span class="monospace">margin: 0 auto;</span> trick to center the page horizontally. To move the page down from the top, we've used a top margin of <span class="monospace">25vh</span>, which means 25% of the viewport (screen) height.</p>
<p>Let's add an image of our page subject. If you wanted to, you could use a Raspberry Pi camera to take a picture for your own page, but for now, there are some images from the Raspberry Pi website graphics in the <span class="monospace">img</span> folder. Pick one you like, and add it as an <span class="monospace"><img></span> tag.</p>
<iframe class="codeblock" src="code/listing_hp2a.html" onload="resizeIframe(this)"></iframe>
<p>In our CSS, we'll select the image using <span class="monospace">header img</span> and centre the image, set it's width to something smaller, and round the edges with the <span class="monospace">border-radius</span> rule.</p>
<p><em>Section will be completed after the jam.</em></p>
</section>
</section>
</main>
</body>
</html>