You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _sessions/c1s1/1_what_is_a_webpage.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -42,7 +42,7 @@ Back in the early days of the web HTML would both store the information and tell
42
42
43
43
#### Viewing HTML, CSS and js
44
44
45
-
Because the HTML, CSS and js 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.
45
+
Because the HTML, CSS and js are sent to 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.
46
46
47
47
Every browser provides a way to look at the source of the page you're currently viewing. In Chrome you do `View > Developer > View Source`. This will show you the raw HTML but isn't always the easiest thing to look at.
Copy file name to clipboardExpand all lines: _sessions/c1s1/5_more_html.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: More HTML
3
3
---
4
-
Now we will look at some slightly more interesting things you can do with HTML.
4
+
Now we will look at some slightly more interesting things you can do with HTML.
5
5
6
6
### HTML file layout
7
7
@@ -20,7 +20,7 @@ Now we will look at some slightly more interesting things you can do with HTML.
20
20
* The doctype tells you what sort of html you're using (html5, html4 ...). With html5 it's simple - you just write `html`.
21
21
* Everything is wrapped in an `<html> ... </html>` tag
22
22
* Things within the `<head> .. </head>` are used to provide information about the page
23
-
* Only things within the `<body> ... </body>` tags are displayed on the page
23
+
* Only things within the `<body> ... </body>` tags are displayed on the page
24
24
* ... for example the text within `<title> ... </title>` will be displayed in the browser bar
25
25
26
26
### Headings
@@ -78,7 +78,7 @@ Now we will look at some slightly more interesting things you can do with HTML.
78
78
{% endhighlight %}
79
79
80
80
* The `href` property tells you where the link will point
81
-
* You can specify this link it different ways:
81
+
* You can specify this link in different ways:
82
82
* absolute external link e.g. "http://www.facebook.com"
83
83
* 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 `www.example.com` the link will point to `www.example.com/about`
84
84
* 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 `about` in the same folder as your current html file.
@@ -91,7 +91,7 @@ Now we will look at some slightly more interesting things you can do with HTML.
91
91
<imgalt='my cat'src="my_cat.png">
92
92
{% endhighlight %}
93
93
94
-
* The `alt` 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.
94
+
* The `alt` 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.
95
95
* 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 `my_cat.png` in the same folder as the html file.
96
96
97
97
### Tables
@@ -124,11 +124,11 @@ Now we will look at some slightly more interesting things you can do with HTML.
124
124
125
125
Now you will use these ideas to create a richer web page.
126
126
127
-
{% exercise %}
128
-
1. Go to the github repository for this session: [https://github.com/code61/learning_html](https://github.com/code61/learning_html)
129
-
2.*Clone* the repository down into your `coding_course` folder (by clicking 'Clone in Desktop' in the bottom right).
130
-
3. Open the whole folder in Sublime Text
131
-
4. Open the file `example.html` in Chrome and look around with the developer tools
132
-
5. Open the file `notes.html` in Sublime Text.
127
+
{% exercise %}
128
+
1. Go to the github repository for this session: [https://github.com/code61/learning_html](https://github.com/code61/learning_html)
129
+
2.Download the code into your `coding_course` folder (by clicking 'Download ZIP' in the bottom right).
130
+
3. Open the whole folder in Sublime Text
131
+
4. Open the file `example.html` in Chrome and look around with the developer tools
132
+
5. Open the file `notes.html` in Sublime Text.
133
133
6. Change `notes.html` into valid html so that it looks like `notes_solution.jpg`
0 commit comments