URL - Uniform Resource Locator
Defines the protocol and location of a network resource, like a web-page.
<scheme name|protocol>://host (domain name)[:port][/resource-path]
<
|
>://
[:
][/
]
Examples:
http://cs.indstate.edu/~sbaker/cs479/ https://cs.indstate.edu ftp://mama.indstate.edu/linux/
HTTP - HyperText Transfer Protocol
The protocol used by a web-server to communicate with your web-browser.
1.1 standard: https://www.ietf.org/rfc/rfc2616.txt , described in 1999, 176 pages of light reading. 2.0 standard https://www.ietf.org/rfc/rfc7540.txt
HTML - Hyper-Text Markup Language:
<!-- A comment --> <!DOCTYPE html> <html> <head> <title> Lists </title> <meta charset='utf-8'> </head> <body> <h1> Lists </h1> <h3> Ordered lists </h3> <ol> Numeric <li> Item 1 </li> <li> Item 2 <li> Item 3 <li value=5> Item 5 <li> Item 6 </ol> <ol type='I'> Roman numerals <li> Item 1 </li> <li> Item 2 <li> Item 3 </ol> <h3> Un-ordered lists </h3> <ul type='square'> <li> Item 1 <ul> <li> Sub 1 <li> Sub 2 <li> Sub 3 </ul> <li> Item 2 <ul> <li> Sub 1 <li> Sub 2 <li> Sub 3 </ul> <li> Item 3 </ul> </body> </html>
A comment in HTML is composed by <!-- at the beginning and terminated with a -->.
<!--
-->
The <!DOCTYPE html> tag defines the document as a HTML 5 document. Without this tag the browser may render the page differently.
<!DOCTYPE html>
Some tags such as <title> (change the document title) and <meta> (define meta information about the document, in this case the character encoding) should be inside of the head tag. Anything not in the head tag should be in the body tag(s). The only elements immediately inside of the root level <html> tag should be head or body tags.
<title>
<meta>
<html>
<h1> through <h6> are various sized headings.
<h1>
<h6>
<ol> defines an ordered (numbered/lettered) list, <ul> defines an un-ordered list.
<ol>
<ul>
<li> defines a list element. In HTML 5 it does not need to be "closed", i.e. a </li> tag is unnecessary, as it will be auto-closed when encountering the next list element or the list itself is closed.
<li>
</li>
<table> <tbody> <tr> <th> X <th> A <th> B <th> C <tr> <th rowspan=4> R <td colspan=3> 1 <tr> <td colspan=3> 2 <tr> <td colspan=3> 3 <tr> <td colspan=2> 4 <td> 5 </tbody> </table>
A table can have more than one <tbody> element, which will be created automatically if omitted. <tfoot> and <thead> sections should be used to define table headers and footer sections.
<tbody>
<tfoot>
<thead>
A table is constructed from top to bottom, left to right. A table cell that spans more than one row or column belongs to the row and column in which it first appears.
<tr>, <td> and <th> elements like <li> elements do not need to be closed in HTML 5. They are automatically closed by the next relevant element. When writing HTML by hand, it is recommended to not bother with these closing tags as they reduce readability.
<tr>
<td>
<th>
The 'view source' option in browsers can help you identify errors in your HTML code as common syntax errors will be highlighted red. Though browsers can often deal with bad syntax, it is recommended to fix these errors since it may effect the rendering of the page in different browsers.
Forms are one of the primary means for a user to send data to a server, form elements are also useful for purely ECMAScript front-end programs to interact with the user with. To arrange form elements nicely in the browser they are often contained in a table for proper grid alignment. If this is the case the table itself should either be enclosed in the <form> element itself or each input element should use a name attribute to associate it with a named form defined elsewhere.
<form>
Forms will be used throughout this course, so some attention should be paid to the forms section of the HTML handout.
A form that is to be submitted to a server should have both an action attribute which is the location of the script that will process the form data and a method attribute which is the method that the data is to be sent to the server. The two normal methods are:
Sends the input data to the server encoded in the URL itself, following a question mark that is appended to the resource path in the form of name=value pairs that are separated by ampersands:
http://host/path?var=value&var2=value...
http://
/
?
=
&
Letters (a-zA-Z), numbers (0-9), and characters (*,-,.,_) are left as-is.
*
-
.
_
All other letters are %XX hex encoded (%20 for space for example) Spaces may be encoded as + or %20
As an aside: http://host/path#id
#
Using the GET method for a form is preferable when you wish for the result of a form to be bookmark-able or copy-paste-able.
Sends the input data to the server encoded more like an email message to the server which can then process name/value pairs out of the data. POST is probably required to transfer files of any length. When doing so, the enctype or encoding type for the form should be set to 'multipart/form-data'.
multipart/form-data
The most important types to the input element are: text, password, hidden, checkbox, radio, file, submit, reset and button. Note: input elements are 'void' and do not need to be closed, i.e. there is never a </input> tag following <input type=...>.
input
text
password
hidden
checkbox
radio
file
submit
reset
button
</input>
<input type=...>
Hidden input elements are often used for maintaining session state or adding additional information to a form so that a user does not need to add it themselves. Some of this could be accomplished using cookies/sessions, to be discussed later.
Note: is is possible for a user to modify hidden input elements. Hidden inputs require the same amount of validation as any other form element.
Other important form elements: <select> and <option> elements and <textarea> elements. Note that unlike input elements, these are not void and should always be closed. Also note that the data between the open and closing tag for textarea is the textareas "default value", so also make sure there are no spaces between the opening and closing tags unless you want those spaces in the textarea by default.
<select>
<option>
<textarea>
This example will create a form that submits to itself (when a form has no action attribute the action defaults to it's own URL,) and if the name field is filled out will print the posted data following the form dynamically.
<?php $name=isset($_POST['name'])? htmlspecialchars($_POST['name']) : ""; $mesg=isset($_POST['mesg'])? htmlspecialchars($_POST['mesg']) : ""; ?> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title> Form </title> </head> <body> <h1> A form </h1> <form method=POST> <table> <tr> <td> Name <td> <input type='text' name='name'> <tr> <td> Message <td> <textarea name='mesg'></textarea> <tr> <td colspan=2><input type='reset'><input type='submit'> </table> <?php if ($name != "") { ?> <hr> <h1> Previous submission: </h1> <table> <tr> <td> Name <td> <?php echo "$name"; ?> <tr> <td> Message <td> <pre><?php echo "$mesg";?></pre> </table> <?php } ?> </form> </body> </html>
A PHP file usually ends in .php, which is processed by the server specially, assuming that the server is setup to process PHP files.
PHP code sections are enclosed in <?php ... ?>, anything outside of the PHP code section is considered "output" which is "printed" or output as-is by the server.
<?php
?>
Note that "Output" sections can be place inside of code sections by closing the code section with a ?> and then continuing it with <?php. This is how the "Previous submission" portion of the php script works to output the posted data.
All PHP variables are preceded with a dollar sign ($).
$
"echo" works like the bash shell echo command, any string following it is printed. Variables can be included inside of strings in the same way as in the Unix shell.
The function isset() tests to see if a variable "exists", returning true if it does, false otherwise. We use isset() to test to see if a POST variable has been sent to the PHP script and if so, use it's value, otherwise we'll use the null string.
isset()
The function htmlspecialchars() returns a version of the string passed to it that escapes any HTML entities found in the input string. This will prevent HTML code from being inserted into the output.
htmlspecialchars()
The $_POST[] is an associative array that contains the values from any form inputs that are passed to the script.
$_POST[]
