Welcome to Advanced GIS, Lecture 4
This is a web page that can be viewed as slides.
→ to move forward
← to go back
Class 4
defines the structure and content of a page, loads other bits
adds style to parts of a page
makes web pages dynamic (eg AJAX)
your browser loads the HTML, which tells it which CSS and JavaScript files to get (if any)
(we'll talk about CSS soon)
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html><!doctype html>
<html>
<head>
</head>
<body>
Content to show on the
page goes here!
</body>
</html><!doctype html><!doctype html><html><html><head>
</head><body>
</body></html><!doctype html>
<html>
<head>
</head>
<body>
</body>
</html><body><body>the body opening tag
<body>the body opening tag
opening tags always start with
<
<body>the body opening tag
opening tags always start with
<
and end with
>
</body>the body closing tag
</body>the body closing tag
closing tags always start with
</
and end with
>
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html><!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html><p>
Text goes <em>here</em>
</p><p>
Text goes <strong>here</strong>
</p><a>
This should be a link
</a><a href="http://example.com/awesome/page">
This should be a link
</a><img src="" /><iframe width="100%" height="520" frameborder="0"
src="https://thenewschool.carto.com/u/brelsfoeagain/
builder/fd0fea4a-ee46-11e6-8c31-0ecd1babdde5/embed"
allowfullscreen webkitallowfullscreen mozallowfullscreen
oallowfullscreen msallowfullscreen></iframe>iframeiframe<ul>
<li>eggs</li>
<li>milk</li>
<li>bread</li>
</ul><ul>
<li>eggs</li>
<li>milk</li>
<li>bread</li>
</ul><ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol><ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol><div>
</div><div id="infobar">
</div><div id="infobar">
text
search
</div><span></span><input /><input type="text" /><input type="checkbox" /><input type="radio" />{{}} around a field name will be replaced by the value of that field for the feature you clicked{{neighbourhood}}, {{neighbourhood_group}}{{neighbourhood}}, {{neighbourhood_group}}
becomes
SoHo, Manhattan
<p>
<a href="http://data.cityofnewyork.us">source</a>
</p><p>
<a href="{{url}}">learn more</a>
</p><p>
<a href="{{url}}">learn more</a>
</p>url)<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>"a p element"
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>"a body element"
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>"the p element is in the body element"
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>"the p element is also in the html element"
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>everything in the html element is indented once
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>everything in the body element is indented again
<!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html><!doctype html>
<html>
<head>
</head>
<body>
<p>
Text goes here
</p>
</body>
</html>