Welcome to Advanced GIS, Lecture 7

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced GIS

Class 7

thematic mapping blog

NYTimes Mayoral Primaries map

HTML

HyperText Markup Language

HTML

HyperText Markup Language

(text with links)

vox

Stanford

Tim Berners-Lee

The original RFC (standard) for HTML

independent.co.uk

twitter

Mosaic, initially released in 1993

Mosaic

HTML gives structure to web pages

for HTML, structure is just the regions on a page

HTML isn't going to help you make things look nice

(we'll talk about CSS soon)

every HTML page starts out the same way:

<!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>

tells the browser, "get ready, I'm about to start speaking HTML"

<html>

tells the browser, "okay, this is the beginning of the HTML"

<head>
</head>

things we'll get to later (styles and scripts) go between these

<body>
</body>

page content goes between these

</html>

tells the browser, "this is the end of the 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>
            Check out my paragraph!
        </p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out<br />
            my paragraph!
        </p>
    </body>
</html>

<p>
    Check out <em>my paragraph!
</p>

<p>
    Check out <strong>my</strong>
    paragraph!
</p>

<a>
    This should be a link
</a>

<a href="http://example.com/awesome/page">
    This should be a link
</a>

<img src="" />

Looking at other people's pages

view source

developer tools

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

<div>
</div>

<div id="header">
</div>

<div id="header">
    logo
    mailing list
    etc
</div>

<span></span>

<input />

<input type="text" />

<input type="checkbox" />

yes

no

maybe

<input type="radio" />

yes

no

maybe

html

head

body

p

br

a

img

em

strong

ul

ol

li

div

span

input

HTML reference on class page

HTML in CartoDB

some notes on terminology

elements

element:

an opening tag, closing tag, and all the things inside it

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

"a p element"

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

"a body element"

elements go inside other elements

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

"the p element is in the body element"

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

"the p element is also in the html element"

indent elements one more step than the elements they are inside

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

everything in the html element is indented once

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

everything in the body element is indented again

make sure you move an entire element

move this

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

don't move this

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            Check out my paragraph!
        </p>
    </body>
</html>

`iframe`

lets you embed other pages in your page

<iframe width='100%' height='520' 
frameborder='0' src='http://eric.cartodb.com/
viz/22a36ecc-0eb6-11e3-8f2f-5404a6a69006/
embed_map' allowfullscreen webkitallowfullscreen 
mozallowfullscreen oallowfullscreen 
msallowfullscreen></iframe>

Advanced GIS

thematic mapping blog

NYTimes Mayoral Primaries map

HTML

HyperText Markup Language

HTML

HyperText Markup Language

(text with links)

Tim Berners-Lee

The original RFC (standard) for HTML

Mosaic, initially released in 1993

Mosaic

HTML gives structure to web pages

for HTML, structure is just the regions on a page

HTML isn't going to help you make things look nice

HTML isn't going to help you make things look nice

every HTML page starts out the same way:

tells the browser, "get ready, I'm about to start speaking HTML"

tells the browser, "okay, this is the beginning of the HTML"

things we'll get to later (styles and scripts) go between these

page content goes between these

tells the browser, "this is the end of the HTML"

Looking at other people's pages

view source

developer tools

HTML reference on class page

HTML in CartoDB

some notes on terminology

elements

element:

an opening tag, closing tag, and all the things inside it

elements go inside other elements

indent elements one more step than the elements they are inside

make sure you move an entire element

move this

don't move this

iframe

iframe

lets you embed other pages in your page

this is going to take some effort

don't memorize this stuff

copy paste is recommended

copy paste (with your customizations) is recommended

learn more here

and here

avoid!

recommended

recommended

google it

neocities.org

pages.github.com

`iframe`

`iframe`