-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml.html
327 lines (307 loc) · 22.7 KB
/
html.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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#first">Introduction</a></li>
<li><a href="#what">What is HTML?</a></li>
<li><a href="#dev">Developer Tools</a></li>
<li><a href="#folder">Website Folder</a></li>
<li><a href="#firstHTML">Your First HTML</a></li>
<li><a href="#index">index.html</a></li>
<li><a href="#moreHTML">More HTML</a></li>
<ul>
<li><a href="#headings">Headings</a></li>
<li><a href="#text">Paragraphs and Text</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#blockquotes">Blockquotes</a></li>
</ul>
<li><a href="#final">Final Exercise</a></li>
<li><a href="#valid">Valid HTML</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="first">Your First HTML Session</h1>
<p>
In this session we will take our first step towards creating Ben's website. Together, by the end of the session we will have created <a href="/exercises/first.html">this.</a>
</p>
<p>
Although it may not look like much, getting the bare bones of the site created quickly will speed up development down the road.
</p>
<h2 id="what">What is HTML?</h2>
<p>
Every website on the Internet is just a set of files that your browser (Chrome in this case) knows how to display. These three file types are:
</p>
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/html5.png" alt="...">
<div class="caption">
<h3>HTML</h3>
<p>Used for displaying the content and structure of your site</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/css3.jpeg" alt="...">
<div class="caption">
<h3>CSS</h3>
<p>Used for the design of your site, what it looks like.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/js.jpeg" alt="...">
<div class="caption">
<h3>JavaScript</h3>
<p>Used for the behaviour of your site, what it does.</p>
</div>
</div>
</div>
</div>
<p>
All of these technologies are said to be <em>client side technologies</em>, this means that HTML, CSS and JavaScript runs on your computer.
</p>
<p>
When you visit a website what you are actually doing is requesting the HTML, CSS and JavaScript files from a <em>web server</em> that <em>hosts</em> that sites files. Your browser then reads these files and displays them to you as a web page.
</p>
<p>
This has an interesting side effect that we will discover now.
</p>
<h2 id="dev">Developer Tools</h2>
<p>
Because the HTML, CSS and JavaScript are sent you your browser, it is easy for you to look at them. There are no secrets in HTML, CSS or JS. If there's a part of a webpage that you like, it's easy to find out how it is coded and use the technique yourself.
</p>
<p>
Every browser provides a way for you to look at the <em>source</em> of the site your are currently browsing, and Chrome's is especially good.
</p>
<p>
Google Chrome comes with a powerful set of developer tools built in that allow you to interactively inspect the source code of a site that you visit. To open developer tools use <code>View > Developer > Developer Tools</code>
</p>
<tasks>
<item title="Browse to your favourite website"></item>
<item title="Open Developer Tools"><code>View > Developer > Developer Tools</code></item>
<item title="Select Elements tab"></item>
<item title="Select the magnifying glass"> Should be on the left hand side of the developer tools<img src="images/magnify.jpg"></item>
<item title="Hover over the HTML code in the developer tools box and watch as different parts of the page get highlighted."><br /></item>
<item title="Try changing some HTML"> Double clicking on the HTML in developer tools should allow you to change it.</item>
<item title="Try chaging some CSS"> CSS is located in the top box on the right</item>
<item title="Refresh the page"> Note that the changes disappear</item>
</tasks>
<h2 id="folder">A website in a folder</h2>
<p>
One of the great things about HTML is that you don't need a lot to see it working on your laptop, all you need is a text editor and a web browser.
</p>
<p>
To get up and running you need to understand that a website is just a collection of files that all live inside one folder. This folder effectivly becomes your website. When we want to put our website on the Internet, all we need to do is move this folder to a <em>web server</em> somewhere.
</p>
<p>
Anything that you want to appear on your website must be within this folder. HTML, CSS, JavaScript, Images & Downloadable Content, it all must go inside this folder
</p>
<tasks>
<item title="Create a new folder on your laptop"> It doesn't matter where it is or what you call it, as long as you remember this. Don't give it a name with spaces in though, use underscores instead.</item>
</tasks>
<h2 id="usingSublime">Using Sublime Text</h2>
<tasks>
<item title="Open Sublime Text 2"></item>
</tasks>
<p>
All HTML that we will ever write needs to be written in a text editor. Remember from the prep work that we use Sublime as it doesn't save any extra nasty characters like Word does and it gives us Syntax highlighting, this will make more sense later!
</p>
<h2 id="firstHTML">Our first look at real HTML</h2>
<p>
Ok - let's write our first bit of HTML, remember the site we are trying to create in this session is <a href="/exercises/first.html">here.</a>
</p>
<p>
Let's take our first step towards that by creating a heading element on our site.
</p>
<pre>
<h1> My Little Coding Shop </h1>
</pre>
<tasks>
<item title="Copy the above <h1> code into a new file in Sublime"></item>
<item title="Save the file as index.html"></item>
<item title="Use Chrome to open this file"><code>File > Open File </code> Then navigate to the folder and file you just created</item>
<item title="Check that you have a heading displayed"></item>
</tasks>
<h2 id="index">Why index.html</h2>
<p>
All html files must have the .html extension. This tells the computer that this is a HTML file.
</p>
<p>
The default name for a HTML file is index.html This means that unless you ask for another file specifically, you will be given the index.html file
</p>
<p>
This is really important as it means that the homepage of every website is called index.html. Try it out!
</p>
<tasks>
<item title="Visit Code First: Girls">http://www.codefirstgirls.org.uk</item>
<item title="Visit Code First: Girls index.html">http://www.codefirstgirls.org.uk/index.html</item>
</tasks>
<h2 id="moreHTML">More HTML</h2>
<p>
There are loads of HTML tags that you can use to define the structure of your page, and they all follow a similar format to the heading above.
</p>
<h3 id="headings">Headings</h3>
<pre>
<code class="html"><span class="nt"><h1></span>Top level heading<span class="nt"></h1></span>
<span class="nt"><h3></span>Lower level heading<span class="nt"></h3></span>
</code>
</pre>
<ul>
<li>There are six levels of heading <code>h1</code> .. <code>h6</code></li>
<li>The higher numbers are more important</li>
<li>It's usual to only have one <code>h1</code> on a page</li>
<li>You rarely see anything below <code>h4</code> in real pages</li>
</ul>
<h3 id="text">Paragraphs and text</h3>
<pre><code class="html"><span class="nt"><p></span>This is a paragraph.<span class="nt"></p></span>
<span class="nt"><p></span>This is another paragraph. It has some <span class="nt"><em></span>italic text<span class="nt"></em></span> and some <span class="nt"><strong></span>bold text<span class="nt"></strong></span>.<span class="nt"></p></span>
</code></pre>
<ul>
<li>Paragraphs are created using the <code><p></code> tag</li>
<li>The <code><em></code> tag is used to provide emphasis. In reality that means italics - in fact the tag <code><i></code> also works. Using em is better though as it fits with the idea of semantic markup - marking your information as to its meaning, instead of how you want it to look.</li>
<li>The <code><strong></code> tag is used to make text stand out. It basically means bold - <code><b></code> also works, but <code><strong></code> is better - see above.
</li>
</ul>
<h3 id="lists">Lists</h3>
<pre><code class="html"><span class="nt"><ul></span>
<span class="nt"><li></span>Apples<span class="nt"></li></span>
<span class="nt"><li></span>Oranges<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre>
<ul>
<li>Lists have a nested structure</li>
<li><code><ul></code> is for an <em>unordered</em> list. This means bullet points.</li>
<li><code><ol></code> is for an <em>ordered</em> list. That means automatic numbering.</li>
<li>In both types of list you add items using a <code><li></code> tag. This stands for <em>list item</em>.</li>
</ul>
<h3 id="links">Links</h3>
<pre><code class="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.facebook.com"</span><span class="nt">></span>this is a link to facebook<span class="nt"></a></span>
</code></pre>
<ul>
<li>The <code>href</code> property tells you where the link will point</li>
<li>You can specify this link it different ways:
<ul>
<li>absolute external link e.g. 'http://www.facebook.com'</li>
<li>absolute local link e.g. '/about'. This links to a file relative to the root of your webserver. For example if your site is at <code>www.example.com</code> the link will point to <code>www.example.com/about</code></li>
<li>relative local link e.g. 'about'. This links to a file relative to the current html document. In this case it will link to the file called <code>about</code> in the same folder as your current html file.</li>
</ul>
</li>
<li>You can also link to places in the same document using <code>href="#my_tag"</code>. This</li>
<li>You can get the link to open in a new tag like this: <code><a href="http://www.facebook.com" target="_blank"></code></li>
</ul>
<h3 id="buttons">Buttons</h3>
<pre><code class="html"><span class="nt"><button</span><span class="nt">></span>this is a my button text<span class="nt"></button></span>
</code></pre>
<h3 id="images">Images</h3>
<pre><code class="html"><span class="nt"><img</span> <span class="na">alt=</span><span class="s">'my cat'</span> <span class="na">src=</span><span class="s">"my_cat.png"</span><span class="nt">></span>
</code></pre>
<ul>
<li>The <code>alt</code> tag is for providing a description of your image. This is useful for partially sighted people using screen readers, or in case the image doesn’t load.</li>
<li>The file can be linked to in the same way as href. In the example above we use a relative local link to a file called <code>my_cat.png</code> in the same folder as the html file.</li>
</ul>
<h3 id="blockquotes">Blockquotes</h3>
<pre><code class="html"><blockquote>Some inspirational quote here</blockquote></code></pre>
<p>
The blockquote tag specifies a section of text that is quoted from another source. It's very similar to a traditional paragraph tag but it is more <em>semantic</em>.
</p>
<h2 id="final">Final Exercises</h2>
<p>
Using the tags above we're now going to complete this sessions exercise. We'll get our site to look just like <a href="exercises/first.html">our target site</a>.
</p>
<tasks>
<item title="Add a paragraph">Below your <code><h1></code> tag add a <code><p></code> tag. Add some text inside it and close it with a <code></p></code></item>
<item title="Add a button">Below your <code></p></code> tag add a <code><button>Shop now</button></code> set of tags </item>
<item title="Add an unordered list">Add a <code><ul>...</ul></code> pair of tags</item>
<item title="Add three list items">Between your <code><ul></code> and <code></ul></code> tags add a <code><li>...</li></code> tag</item>
<item title="Add text in to the list items">Add the text for the list item. The first should be "Home"</item>
<item title="Repeat the above two steps"> For each of the three list items repeat the above</item>
<item title="Download the images"> Right click on each of the images <a href="exercises/first.html">here</a> and Save the image to your website folder</item>
<item title="Add an image">Using a <code><img></code> tag add the first image of a product to your site. Hint, the code you'll need will look similar to <code><img src="style.jpg"></code> Where alice.jpg must match the exact filename of the image that you downloaded</item>
<item title="Add the other two images"></item>
<item title="Use paragraphs for the quotations"> Below each of the <code><img></code> tags add <code><p>...</p></code> tags</item>
<item title="Paste (or write new) descriptions"> Between the <code><p></code> and <code></p></code> tags paste the contents of the product descriptions</item>
<item title="Use links for the prices">Below the paragraphs of product descriptions add a <code><a href="#">..</a></code> set of tags. Place the text including the price inside each.</item>
</tasks>
<p>
If you get stuck, look at the <a href="exercises/first.html">solution</a> and use Chrome's developer tools to help you out.
</p>
<p>
There's one last thing we need to fix, our bullet point list should be links, but at the moment they're plain text. We can <em>nest</em> as many tags inside each other as we like, so to create nested links within a bullet point you can use the following code:
</p>
<pre>
<ul>
<li>
<a href="#">Text here</a>
</li>
</ul></pre>
<tasks>
<item title="Add links to your bullet points"> Using the above code, add links to each of the three bullet points. It doesn't matter where the href points, we'll fix this later. Commonly web developers use the # symbol before they fill in this detail later</item>
</tasks>
<h2 id="valid">One last thing</h2>
<p>
One last thing - this isn't valid HTML yet. All HTML documents must follow a strict pattern to be considered HTML. That pattern is:
</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Page title<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
...
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre>
<p>
This is commonly called HTML boilerplate or skeleton code.
</p>
<ul>
<li>The doctype tells you what sort of html you're using (html5, html4 ...). With html5 it's simple - you just write <code>html</code>.</li>
<li>Everything is wrapped in an <code><html> ... </html></code> tag</li>
<li>Only things within the <code><body> ... </body></code> tags are displayed on the page</li>
<li>Things within the <code><head> .. </head></code> are used to provide more information about the page</li>
<li>.. for exmple the thing within <code><title> ... </title></code> will be displayed in the browser bar</li>
</ul>
<tasks>
<item title="Add a DOCTYPE">Add the html5 doctype from above as the first line of your index.html file</item>
<item title="Add the HTML tags"> Underneath the DOCTYPE add a <code><html></code> tag. On the last line add the closing <code></html></code> tag</item>
<item title="Add the head"> Under the opening <code><html></code> tag add the <code><head></code> and <code></head></code> tags</item>
<item title="Add the body">Below the <code></head></code> tag add the <code><body></code> tag and add the closing <code></body></code> tag above the <code></html></code> tag at the bottom of the file</item>
</tasks>
</div>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>