CPSC 481: CREATIVE INQUIRY TO WSBF

Size: px

Start display at page:

Download "CPSC 481: CREATIVE INQUIRY TO WSBF"

Mary Morris
5 years ago
Views:

1 CPSC 481: CREATIVE INQUIRY TO WSBF J. Yates Monteith, Fall 2013

2 Schedule HTML and CSS PHP

3 HTML Hypertext Markup Language Markup Language. Does not execute any computation. Marks up text. Decorates it. Browser reads markup and interprets it graphically. Standardized and specified by the W3C. Marks up code specified between <tag> and </tag>

4 HTML History Version by the IETF HTML Working Group. Version 3.2 HTML 4 January, 1997 by the W3C December 1997 by the W3C Added Cascading Style Sheets (CSS) HTML 4.01 (What we use) December 1999 XHTML 1.0 January 2000 HTML 5 Working Draft published in January 2008, W3C. Adds new elements and functionality

5 Structure of HTML Document HTML Section Contains all HTML tags in the document. Enclosed within the <html> </html> tags. Head section: Contains meta-information and information not displayed within the body of the webpage. Enclosed in the <head> </head> tags. Body section Contains all markup code and text to be displayed in the webpage. Enclosed in the <body> </body> tags.

6 Structure <html> <head> </head> <body> </body> </html>

7 Tag Structure <tagtype> The tag determines what the markup is. The tagtype is followed by a set of standard attributes. The standard attributes are followed by a set of optional attributes.

8 Head Section Contains meta-data about page. <title> tags which specify the window title <meta> tags which describe the HTML, character set encoding of the document along with keywords. <link> tags which specify linking the document with the webpage in question. Used for loading various files and style sheets.

9 Body Section Contains all the text of the webpage, plus any imbedded Javascript, PHP, CSS, etc

10 Paragraph tag <p> Defines a paragraph. Primarily used to add style to text (more on this later) Optional Attributes: None Standard Attributes: Class, dir, id, lang, style, title, xml:lang

11 Linebreak <br /> Introduces a single whitespace line break. Optional Attributes: None Standard Attributes: Class, id, style, title

12 Anchor tag <a> Creates a link to another document, by using the href attribute Creates a bookmark inside a document, by using the name attribute Optional Attributes: Charset, coords, href, hreflang, name, rel rev shape, target Standard Attributes: Accesskey, class, dir, id lang, style, tabindex, title, xml:lang

13 Example <a href= Results in Google!

14 Img tag <img> Displays an image in an html page Required attributes src, which specifies where the image is located alt, which specifies mouse-over text for the image Optional Attributes Ismap, longdesc, usemap, vspace, width Standard Attributes Class, dir, id, lang, style, title xml:lang

15 Example <img src=../images/img1.jpg alt= An image! />

16 Div Defines a division or a section in an HTML section. Groups block-elements to format them with styles. Optional Attributes None Standard Attributes Class, dir, id, lang, style, title, xml:lang Used often for specifying where elements go on a page, and how they will be styled with CSS.

17 Span The <span> tag is used to group inline-elements in a document. Provides no visual effect by itself. Provides a hook which can be modified or marked up via JavaScript, etc. Optional Attributes Class, dir, id, lang, style, title, xml:lang

18 Table <table> </table> encodes a table in HTML Can be an NxM Table that encodes and marks up additional text. Contains three tagged elements within it to create the cells. <th> table header <tr> - table row <td> - table cell Tables are a great way to represent data. Horrible way to format and organize an entire webpage.

19 <tr> Encodes a row of a table. Contains one ore more <th> or <td> elements. Optional Attributes Align, char, charoff, valign Standard Attributes Class, dir, id, lang, style, title, xml:lang

20 <th> Defines a header cell in a HTML table. Text is bolded and centered by default Optional Attributes Abbr, align, axis, char, charoff, colspan, heigh, weight rowspan

21 <td> Defines columns within a table Text is non-bolded and left-aligned by default. Optional Attributes Abbr, align, axis, char, charoff, colspan, heigh, weight rowspan

22 Example <table> <tr> <th>column 1</th> <th>column 2</th> </tr> <tr> <td>value 1</td> <td>value 2</td> </tr> </table>

23 Styling So, by default, all of this stuff looks like crap. Enter: Cascading Style Sheets (CSS). CSS is used to format how things look in a browser better than HTML was able to natively. Can be done 3 ways: In-line as an attribute of a tag Defining an internal stylesheet of classes, and assigning classes to tags. By defining a file with classes and including the file, and assigning the classes to the tags.

24 External or Linked Style Included within the head section of your document. Can include multiple styles, but be careful not to have naming conflicts. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Contents of mystyle.css: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

25 Internal Stylesheets Included in the Header section of your document. <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

26 Inline Specified for each HTML element under the style= attribute. <p style="color:sienna;margin-left:20px">this is a paragraph.</p>

27 Types of Styles Too many to talk about today

28 PHP: Hypertext Processor General Purpose Server-Side Scripting Language Produces Dynamic Webpages for web-dev, but can be used for other stuff. Currently at version 5.

29 Installation Linux: Install Apache2, MySQL, PHP5, otherwise known as [L](AMP). Windows Get XAMPP Mac: Get MAMPP

30 How does it work? User goes to webpage. Browser sends request for page, with a set of variables. URL-Based Variables: _GET Hidden variables: _POST Hidden Global Variables: _SESSION The PHP daemon takes the variables, execute the script in question, generates some output and returns it to the browser.

31 How do we do it? Files must be named.php.php files can be a little PHP and little HTML, a lot of HTML and a little PHP, or a lot of PHP and a lot of HTML. All PHP code needs to be surrounded by the <?php?> These tags can occur as many times as we want and can contain as much or as little code as we want.

32 How do we do it? We can produce output by utilizing the echo command. <html> <body> <?php echo Hello World ;?> </body> </html>

33 Language Features Declarative Functional Language We declare variables, we declare functions, functions work on variables, we evaluate the results. Loosely Typed We can declare variables on the fly, and do not need to specify a type. We can switch types of variables through assignment without having to do any sort of casting-magic. Looks just like C Except with respect to Variables.

34 Comments // for single line comments <?php //Single line comment echo Hello World ;?> /* for multi-line comments */ <?php /* This is a multi-line comment */ echo Hello World ;?>

35 Language Syntax Every executable statement that does not begin a basic block requires a semicolon at the end of the statement. Ex. echo Hello world ; Executable statements that are control flow statements or open a basic block do not require a semicolon If($x) { }, for( ) { }, while ($x) { }, etc.

36 Language Syntax: Data Types Supports all the following data types: Integers, Booleans, Floating Points, Strings, Arrays, Objects, Resources, Callbacks, Callbacks. Can retype variables on the fly. <?php $x = 7; $x = Hello Yates ; echo $x;?>

37 Language Syntax: Variables To use a variable, we follow the same naming conventions of C May begin with an underscore, lowercase or uppercase. May contain numbers, underscores. All variables are prepended with a $ As in $my_name, or $your_face

38 Language Semantics: Variables To use a variable, we follow the same naming conventions of C May begin with an underscore, lowercase or uppercase. May contain numbers, underscores. All variables are prepended with a $ As in $my_name, or $your_fac

39 Language Semantics: Variable Scope Scope: Same Scoping rules as C apply <?php $a = 1; //Global Scope function test() { echo $a; //Local scope } test();?>

40 Language Semantics: Variable Scope Globals: Similar to C with extra help <php? $a = 1; $b = 2; function test() { global $a, $b; $b = $a + b; } test(); echo $b;?>

41 Language Semantics: Variable Scope Globals: Similar to C with extra help <php? function test() { static $a = 1; echo $a $a++; } test(); test();?>

42 Operators Same basic arithmetic operators +, -, *, /, %, ++, --, +=, -=, *=, /=, unary negation Same basic comparators ==, === (type equality),!=, <>,!== (type equality), <=, >=, >, < Same basic logical operators, &&,! Same bitwise operators &,, ^ (xor), ~ (not), <<, >>

43 Comparator Stuff Because we are loosely typed, we have rules for what happens when we compare differing types.

44 String Operators. $a. $b concatenates $b onto the end of $a.= accomplishes the compound operation. <?php $a = hello ; $b = world ; $c = $a. $b; $a.= $b?>

45 Control Flow If-else-if-else Just like C If(boolean condition) { //Execute basic block if boolean true } If(boolean) { //Execute basic block if boolean true } else { //execute basic block if boolean false }

46 Control Flow If-else-if-else Just like C If(boolean) { //Execute basic block if boolean true } else if (boolean2) { //execute basic block if boolean2 true } else { //execute basic block if boolean and boolean2 false }

47 Control Flow Switch Just like C Switch(variable) { case value1: break; case value2: break; case default: break; }

48 Control Flow Loops While, do-while, for, foreach Just like C, except for foreach. While(booleanCondition) { //Execute if condition is true prior to entering basic block } //Continue executing until condition is false

49 Control Flow Do { //Execute once //Evaluate boolean condition and execute subsequent times } while(booleancondition);

50 Control Flow for($var = 0; $var < 23; $var++) { //Initialize $var to 0 at first iteration //Evaluate boolean. If true, execute basic block. //At end of basic block, execute loop progress metric } NB: We can have multiple variable declarations, boolean conditions, and loop progress metrics, separated by commas.

51 Control Flow Only applies to arrays. Iterates for the number of items in the array, renaming each cell to the specified variable. foreach($people as $person) { } //Execute, setting $person = people[i], where i=0 NumberOfPeople

52 Functions No explicit return types. No explicit types on paramters Same naming conventions as C [a-za-z_][a-za-z0-9_]* Come of the form Function <function-name>(param-list) { //Executable code }

53 Functions <?php function printhelloworld() { echo HelloWorld! ; } function returnhelloworld() { return Hello World! ; } printhelloworld(); echo returnhelloworld();?>

54 Forms Forms are HTML based and linked with a PHP file. <html> <body> <form action="foo.php" method="post"> Name: <input type="text" name="username" /><br /> <input type="text" name=" " /><br /> <input type="submit" name="submit" value="submit me!" /> </form> </body> </html>

55 Forms <form action="foo.php" method="post"> Action is the script that will be called when the form is submitted. Post is the parameter transmission that will be used. Post refers to hidden variables that are not encoded within the URL GET is another transmission mode that does encode variables in the URL.

56 Forms <input type="text" name="username" /> Type corresponds to the type of form element. Buttons, Text, Checkbox, Radio, Menus, File Select Name tells us what the transmitted variable will be named for the Get or Post Request. Name is also used for any Client-Side scripting that might fill in the form or retrieve its data.

57 Forms <input type="submit" name="submit" value="submit me!" /> Submit button sends a message to the server passing the variables specified in the form through the transmission mode selected in the form.

58 Forms Once the user hits submit, the information is passed to PHP script. Variables can be retrieved two ways by the transmission mode: Get: the superglobal $_GET[key] associative array contains the values encoded at the URL Post: the superglobal $_POST[key] associative array contains the values encoded at the URL

59 Example: form.html and form.php <html> <body> <form action= form.php" method="post"> Name: <input type="text" name="username" /><br /> <input type="text" name=" " /><br /> <input type="submit" name="submit" value="submit me!" /> </form> </body> </html> <html> <body> <?php if(!isset($_post[ username ]!isset($_post[ ]) echo You didn t input your form data! else { $username = $_POST[ username ]; $ = $_POST[ ]; echo Welcome. $username. with . $ ;?> </body> </html>

60 Forms: GET vs. POST Using _GET is exactly the same functionally as using _POST What is the trade-off between using them?

61 Forms: GET vs. POST Using _GET is exactly the same functionally as using _POST What is the trade-off between using them? GET shows the variables to the user via the URL. If we used Get, the URL after clicking Submit would be: POST does not, it keeps the variables hidden. POST is inherently more secure, because the user cannot tamper with data via the URL. POST is harder to debug, because you have to test what s in the _POST array to make sure it s correct.

62 Wrapping Up This was really quick and really dirty. We ll talk about MySQL some other time, but this is enough to get started. W3C has tons of tutorials to use on HTML and PHP The PHP reference is incredibly handy when writing PHP

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text