ERTH 401 / GEOP 501 Computer Tools. Lecture 12: Websites. Ronni Grapenthin MSEC 356 x5924. November 13, 2017

Size: px

Start display at page:

Download "ERTH 401 / GEOP 501 Computer Tools. Lecture 12: Websites. Ronni Grapenthin MSEC 356 x5924. November 13, 2017"

Charity Mavis McDonald
5 years ago
Views:

1 1 / 6 ERTH 401 / GEOP 501 Computer Tools Lecture 12: Websites Ronni Grapenthin rg@nmt.edu MSEC 356 x5924 November 13, 2017

2 ... get em while they re fresh 2 / 6 (latest edition I found was for 2010.)

3 The Internet (pop culture) Search Google Images for "Internet": Google Images 3/6

4 Actually (1 client-server pair) 4 / 6 Geek Stuff.com

5 The Internet (really) 5 / 6 wikipedia

6 Protocol Stack 6 / 6 cellbiol.com

7 Introduction 2 / 15 We are here to help you learn how to learn. Prof. Dr. Klaus Bothe, Humboldt-Universität Berlin

8 Introduction 3 / 15 We are here to make you appreciate free knowledge after presenting the concepts. me, here

9 4 / 15 Before anything... Think about: the content a structure a layout maintenance stolen off the Internet

10 4 / 15 Before anything... Think about: the content a structure a layout maintenance stolen off the Internet

11 4 / 15 Before anything... Think about: the content a structure a layout maintenance nothing s more lame than an outdated website! stolen off the Internet

12 5 / 15 Basics... website = content + structure + layout = content + HTML + CSS

13 5 / 15 Basics... website = content + structure + layout = content + HTML + CSS HTML: HyperText Markup Language CSS: Cascading Style Sheets

14 (X)HTML 6 / 15 (extensible) HyperText Markup Language: The innovate idea were links!

15 6 / 15 (X)HTML (extensible) HyperText Markup Language: The innovate idea were links! hyper- + text; coined by Ted Nelson circa 1965 (source: wiktionary.org): A hypertext system, then, is a memex-like device for creating and manipulating hypertexts, both for on-line browsing, and for reducing selected portions of such texts... S. Carmody, W. Gross, T. Nelson, D. Rice, and A. van Dam A Hypertext Editing System for the /360 (1969)

16 6 / 15 (X)HTML (extensible) HyperText Markup Language: The innovate idea were links! hyper- + text; coined by Ted Nelson circa 1965 (source: wiktionary.org): A hypertext system, then, is a memex-like device for creating and manipulating hypertexts, both for on-line browsing, and for reducing selected portions of such texts... 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 language tags to describe web sites: <TAGNAME attribute= value >...</TAGNAME>

17 7 / 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 Internet! < / 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>

18 HTML tags 8 / 15 simple (invalid) website <html> <! HTML tag opens document ( t h i s is a comment! ) > <head> <! s t a r t the header part ( here goes meta information ) > < 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> <! close ALL tags! > <body> <! This is where the good s t u f f is the body of the page > <h1>dear Mama, I m on the Internet! < / h1> <! a header ( includes l i n e b r e a k ) > <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 i n k! > < / body> < / html> <! end of the story >

19 HTML tags 9 / 15 simple valid website <!DOCTYPE html PUBLIC " //W3C/ / DTD XHTML 1.0 Transitional / / 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 Declaration i s mandatory, without one v a l i d a t i o n of a document i s impossible > <html xmlns= " http : / / org /1999/ xhtml " xml : lang= " en " lang= " en "> <! Document Types based on XML need a mandatory xmlns= " " on the root element. That s l i f e > <head> <meta http equiv= " Content Type " content= " text / html ; charset=utf 8" / > <! Declaring a character 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 Internet! < / 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> is your friend!

20 10 / 15 CSS Cascading Style Sheets define how to display HTML elements allow to keep data and their representation separate can be external (in separate file) saves a lot of work different CSS for different media (screen, print,... ) definition of CSS inside a HTML file contrary to original intention Syntax: TAGNAME[#id] [TAGNAME] { attribute1: value; attribute2: value; }

21 CSS 11 / 15 simple CSS example body { c o l o r : black ; background c o l o r : white ; font size : %; font f a m i l y : Helvetica, A r i a l, sans s e r i f ; margin : 0; padding : 1em 0; text a l i g n : center ; / c e n t e r i n g i n i n t e r n e t e x p l o r e r / } a { c o l o r : black ; background c o l o r : white ; font size : %; font f a m i l y : Helvetica, A r i a l, sans s e r i f ; margin : 0; padding : 0em 0; text a l i g n : center ; / c e n t e r i n g i n i n t e r n e t e x p l o r e r / } h1 { font size : 1.25em; color : #666666; margin : 0; padding : 0.3em; t e x 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 black ; }

22 CSS for different media 12 / 15 Different CSS for different occasions:... <link r e l = " stylesheet " href= " /common / shared. css?254z2 " type= " text / css " media= " screen " / > <link r e l = " stylesheet " href= " /common / commonprint. css?254z2 " type= " text / css " media= " p r i n t " / > <link r e l = " stylesheet " href= " / monobook / main. css?254z2 " type= " text / css " media= " screen " / > <link r e l = " stylesheet " href= " / chick / main. css?254z2 " type= " text / css " media= " handheld " / >... From

23 It s a website, right? Necessities for websites: the Internet a 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! 13 / 15

24 It s a website, right? Necessities for websites: the Internet a 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 #! / bin / csh # takes f o l d e r i n ~/www that s to be updated on f a i r w e a t h e r as # argument i f ( $#argv < 1) then echo " Usage : $0 <folder in ~/www> " e x i t endif rsync avz exclude= " ~" exclude= " flatpress " ~/www/ $1 ronni@fairweather. gps. alaska. edu : / export / 13 / 15

25 14 / 15 It s a website, right? Some useful things most webservers per default look for index.html as a start site use Gimp or other tools that have color palettes to get webcolor whitespaces in HTML document are ignored by browser format neatly though! work on a local mirror, though!

26 Then there are Dynamic Websites / 15 Program reacting on input from website, is executed on server, creates HTML code and sends this back to client.

INTERNET!!!11!1. Beyond the Mouse A Short Course on Programming. 10b. HTML/CSS or: I m on the. Ronni Grapenthin. November 13, 2011

INTERNET!!!11!1. Beyond the Mouse A Short Course on Programming. 10b. HTML/CSS or: I m on the. Ronni Grapenthin. November 13, 2011 1 / 15 Beyond the Mouse A Short Course on Programming 10b. HTML/CSS or: I m on the INTERNET!!!11!1 Ronni Grapenthin Geophysical Institute, University of Alaska Fairbanks Not Enough Work (panel 3), http://xkcd.com/554