ERTH 401 / GEOP 501 Computer Tools – Lecture 12: … 401 / GEOP 501 Computer Tools – Lecture 12:...
26
ERTH 401 / GEOP 501 Computer Tools – Lecture 12: Websites – Ronni Grapenthin [email protected] MSEC 356 x5924 November 13, 2017 1/6
Transcript of ERTH 401 / GEOP 501 Computer Tools – Lecture 12: … 401 / GEOP 501 Computer Tools – Lecture 12:...
ERTH 401 / GEOP 501Computer Tools
– Lecture 12: Websites –
Ronni [email protected] 356
x5924
November 13, 2017
1 / 6
. . . get ’em while they’re fresh
(latest edition I found was for 2010.)
2 / 6
The Internet (pop culture)
Search Google Images for "Internet":
Google Images
3 / 6
Actually (1 client-server pair)
Geek Stuff.com
4 / 6
The Internet (really)
wikipedia
5 / 6
Protocol Stack
cellbiol.com
6 / 6
Introduction
“We are here to help you learn how to learn.”Prof. Dr. Klaus Bothe,
Humboldt-Universität Berlin
2 / 15
Introduction
“We are here to make you appreciate free knowledge after
presenting the concepts.”
me, here
http://www.google.com/#q=html+tutorialhttp://www.google.com/#q=css+tutorial
http://www.w3schools.com
3 / 15
Before anything . . .
Think about:
the contenta structurea layoutmaintenance
nothing’s more lame than anoutdated website!
stolen off the Internet
4 / 15
Before anything . . .
Think about:
the contenta structurea layoutmaintenance
nothing’s more lame than anoutdated website!
stolen off the Internet
4 / 15
Before anything . . .
Think about:
the contenta structurea layoutmaintenancenothing’s more lame than anoutdated website!
stolen off the Internet
4 / 15
Basics . . .
website = content + structure + layout
= content + HTML + CSS
HTML: HyperText Markup LanguageCSS: Cascading Style Sheets
5 / 15
Basics . . .
website = content + structure + layout
= content + HTML + CSS
HTML: HyperText Markup LanguageCSS: Cascading Style Sheets
5 / 15
(X)HTML
(eXtensible) HyperText Markup Language: The innovate ideawere links!
hyper- + text ; coined by Ted Nelson circa 1965 (source:wiktionary.org):
A hypertext system, then, is a memex-like device forcreating and manipulating hypertexts, both for on-linebrowsing, and for reducing selected portions of suchtexts . . .
S. Carmody, W. Gross, T. Nelson, D. Rice, and A. van Dam
“A Hypertext Editing System for the /360” (1969)
different versions exist – use XHTML (call it HTML anyway)!it’s a markup language, not a programming languagetags to describe web sites:<TAGNAME attribute=“value”> ...</TAGNAME>
6 / 15
(X)HTML
(eXtensible) HyperText Markup Language: The innovate ideawere links!hyper- + text ; coined by Ted Nelson circa 1965 (source:wiktionary.org):
A hypertext system, then, is a memex-like device forcreating and manipulating hypertexts, both for on-linebrowsing, and for reducing selected portions of suchtexts . . .
S. Carmody, W. Gross, T. Nelson, D. Rice, and A. van Dam
“A Hypertext Editing System for the /360” (1969)
different versions exist – use XHTML (call it HTML anyway)!it’s a markup language, not a programming languagetags to describe web sites:<TAGNAME attribute=“value”> ...</TAGNAME>
6 / 15
(X)HTML
(eXtensible) HyperText Markup Language: The innovate ideawere links!hyper- + text ; coined by Ted Nelson circa 1965 (source:wiktionary.org):
A hypertext system, then, is a memex-like device forcreating and manipulating hypertexts, both for on-linebrowsing, and for reducing selected portions of suchtexts . . .
S. Carmody, W. Gross, T. Nelson, D. Rice, and A. van Dam
“A Hypertext Editing System for the /360” (1969)
different versions exist – use XHTML (call it HTML anyway)!it’s a markup language, not a programming languagetags to describe web sites:<TAGNAME attribute=“value”> ...</TAGNAME>
6 / 15
HTML tags
Websites are interpreted/displayed by browsers (Firefox, Chrome,Opera, Safari, IE, lynx)Browser manufacturers have different ideas of standards /functionality – then, there’s confusion.
simple (invalid) website
<html><head>
< t i t l e > Browser header< / t i t l e >< / head>
<body><h1>Dear Mama, I ’m on the I n t e r n e t ! < / h1><a href=" h t t p : / / www. gps . alaska . edu / programming ">Here ’ s where I learned t h a t s t u f f ! < / a>
< / body>< / html>
7 / 15
HTML tags
simple (invalid) website
<html> < !−− HTML tag opens document ( t h i s i s a comment ! ) −−><head> < !−− s t a r t the header pa r t ( here goes meta i n f o rma t i on ) −−>
< t i t l e >Browser header< / t i t l e >< !−− e . g . the t i t l e of the website , nested i n the header −−>
< / head> < !−− c lose ALL tags ! −−>
<body> < !−− This i s where the good s t u f f i s − the body of the page −−><h1>Dear Mama, I ’m on the I n t e r n e t ! < / h1> < !−− a header ( inc ludes l i neb reak ) −−><a href=" h t t p : / / www. gps . alaska . edu / programming ">Here ’ s where I learned t h a t s t u f f ! < / a>
< !−− f i n a l l y , a l ink ! −−>< / body>
< / html> < !−− end of the s to r y −−>
8 / 15
HTML tags
simple valid website
< !DOCTYPE html PUBLIC " −//W3C/ / DTD XHTML 1.0 T r a n s i t i o n a l / / EN"" h t t p : / / www.w3 . org /TR/ xhtml1 /DTD/ xhtml1−t r a n s i t i o n a l . dtd ">< !−− A DOCTYPE Dec la ra t ion i s mandatory , w i thou t one v a l i d a t i o n o f a document i s imposs ib le −−>
<html xmlns=" h t t p : / / www.w3 . org /1999/ xhtml " xml : lang=" en " lang=" en ">< !−− Document Types based on XML need a mandatory xmlns= " " on the roo t element . That ’ s l i f e −−>
<head><meta ht tp−equiv= " Content−Type " content=" t e x t / html ; charset= u t f−8" / >
< !−− Declar ing a charac te r encoding helps . . . use t h i s l i n e −−>< t i t l e > Browser header< / t i t l e >
< / head>
<body><h1>Dear Mama, I ’m on the I n t e r n e t ! < / h1><a href=" h t t p : / / www. gps . alaska . edu / programming ">Here ’ s where I learned t h a t s t u f f ! < / a>
< / body>< / html>
http://validator.w3.org is your friend!
9 / 15
CSS
Cascading Style Sheetsdefine how to display HTML elementsallow to keep data and their representation separatecan be external (in separate file) – saves a lot of workdifferent CSS for different media (screen, print, . . . )definition of CSS inside a HTML file contrary to original intentionSyntax: TAGNAME[#id] [TAGNAME] { attribute1:value; attribute2: value; }
10 / 15
CSS
simple CSS example
body {co l o r : b lack ; background−co lo r : whi te ;fon t−s ize : 100.01%;fon t−f a m i l y : He lve t ica , A r i a l , sans−s e r i f ;margin : 0 ; padding : 1em 0;tex t−a l i g n : center ; /∗ cen te r ing i n i n t e r n e t exp lo re r ∗ /
}
a {co l o r : b lack ; background−co lo r : whi te ;fon t−s ize : 100.01%;fon t−f a m i l y : He lve t ica , A r i a l , sans−s e r i f ;margin : 0 ; padding : 0em 0;tex t−a l i g n : center ; /∗ cen te r ing i n i n t e r n e t exp lo re r ∗ /
}
h1 {fon t−s ize : 1.25em;co lo r : #666666;margin : 0 ; padding : 0.3em;tex t−a l i g n : r i g h t ;background : # f f f u r l ( . / background . jpg ) no−repeat −10% 20%;background−width :100%;border : 1px s o l i d b lack ;
}
11 / 15
CSS for different media
Different CSS for different occasions:
. . .< l i nk r e l =" s t y l eshee t " href=" /common/ shared . css?254z2 " type=" t e x t / css " media=" screen " / >< l i nk r e l =" s t y l eshee t " href=" /common/ commonPrint . css?254z2 " type=" t e x t / css " media=" p r i n t " / >< l i nk r e l =" s t y l eshee t " href=" / monobook / main . css?254z2 " type=" t e x t / css " media=" screen " / >< l i nk r e l =" s t y l eshee t " href=" / ch ick / main . css?254z2 " type=" t e x t / css " media=" handheld " / >. . .
From http://en.wikipedia.org
12 / 15
It’s a website, right?
Necessities for websites:the Interneta webserver (check with your advisor, or ITC to find a place for your website; department may have options) a copy tool: scp, sftp, rsync (Windows: winscp, FileZilla)work on a local mirror, though!
my webupdate script
# ! / b in / csh# takes f o l d e r i n ~/www that ’ s to be updated on fa i rwea the r as# argument
i f ( $#argv < 1) thenecho " Usage : $0 < f o l d e r i n ~/www>"ex i t
endif
rsync −avz −−exclude="∗~" −−exclude=" f l a t p r e s s " ~/www/ $1 ronni@fa i rweather . gps . alaska . edu : / expor t / f tpweb / htdocs
13 / 15
It’s a website, right?
Necessities for websites:the Interneta webserver (check with your advisor, or ITC to find a place for your website; department may have options)a copy tool: scp, sftp, rsync (Windows: winscp, FileZilla)work on a local mirror, though!
my webupdate script
# ! / b in / csh# takes f o l d e r i n ~/www that ’ s to be updated on fa i rwea the r as# argument
i f ( $#argv < 1) thenecho " Usage : $0 < f o l d e r i n ~/www>"ex i t
endif
rsync −avz −−exclude="∗~" −−exclude=" f l a t p r e s s " ~/www/ $1 ronni@fa i rweather . gps . alaska . edu : / expor t / f tpweb / htdocs
13 / 15
It’s a website, right?
Some useful thingsmost webservers per default look for index.html as a start siteuse Gimp or other tools that have color palettes to get “webcolor”whitespaces in HTML document are ignored by browser – formatneatly though!work on a local mirror, though!
14 / 15
Then there are Dynamic Websites . . .
Program reacting on input from website, is executed on server, createsHTML code and sends this back to client.
15 / 15
