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

Size: px

Start display at page:

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

Audra Evans
5 years ago
Views:

1 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), November 13, 2011

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

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

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

5 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; }

6 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 ; }

7 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

8 13 / 15 It s a website, right? Necessities for websites: the Internet a webserver (check with your advisor, or Paul Delys / Dave Covey) to get access to GI server a copy tool: scp, sftp, rsync (Windows: winscp, FileZilla) work on a local mirror, though!

9 13 / 15 It s a website, right? Necessities for websites: the Internet a webserver (check with your advisor, or Paul Delys / Dave Covey) to get access to GI server 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 /

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

11 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.

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

1 / 6 ERTH 401 / GEOP 501 Computer Tools Lecture 12: Websites Ronni Grapenthin rg@nmt.edu MSEC 356 x5924 November 13, 2017 ... get em while they re fresh 2 / 6 (latest edition I found was for 2010.) The