1. Basic Web Application Development Instructor: Matthew Schurr

2. What is HTML?  HTML documents are the heart of the web.  HTML is made up of: Text Content – what you see Markup – what it looks like/how it is arranged References to other documents – images, videos, pdfs, or other html documents Links to other html documents (web pages)

3. Rendered vs. Source Code  HTML markup language (which is just text) is parsed by the browser to render a complex visual display.  Source: HTML markup language displayed by a text editing program  Rendered HTML: the visual result of parsing HTML markup language displayed by your web browser

4. HTTP and HTML  HTML document is returned as response body to an HTTP request.  HTML document as parsed by browser and (initially) rendered.  As document is parsed, additional resources required for the page are downloaded (via an HTTP request) and (when completed) the page is re-rendered. Cascading Style Sheets Images  Additional resources may also contain links to even more resources, which will similarly be downloaded and rendered as they arrive until everything has loaded completely.

5. Plain Text  Plain text in the source is plain text in rendered HTML.  There are some exceptions to this that we will see later.  Example: Plain text in the source is plain text in rendered HTML.

6. HTML Markup  HTML consists of tags.  We can see that there is an opening and closing tag. Tags are wrapped in <> and closing tags have a “/”.  The contents of a pair of tags can be either plain text or other tags.  A pair of opening and closing tags, and its contents, is referred to as an element.  There are some tags in HTML that do not have any content. We can write these using the shorter notation “ ” rather than “ ”. We call these void tags. Content

7. Bold  contents  Anything inside the tag will appear bold in rendered HTML.  Example: Hello World !

8. Italics  contents  Em – emphasis – italics  Example: Rice University is awesome !  Example: Rice University is awesome!

9. Missing End Tag  What happens if we forget to close an tag?  The result depends on the browser – generally, browser parsers are “forgiving” and everything after the opening tag will be italicized.  Example: Oops! We didn’t close the tag!

10. HTML Attributes  Tags can also have attributes that further describe the element. contents  Attributes may or may not have a value. contents  A tags can have multiple attributes. content

11. Anchors  Anchor tags create clickable links to other resources.  Example: This creates a link to Reddit with the text derp. derp Scroll to location where anchor named marker would be rendered in the document.

12. Images  The tag allows us to embed images into our document.  The src attribute specifies the URL of the image to download.  The alt attribute specifies the text gets displayed when image doesn’t load. It is good practice to include it – it is also used by text to speech software for blind people.  Notice that the image tag does not have any content.  Example: Let's place some text around an image.

13. Relative Paths  When we specify the location of the image in the src attribute of the tag, we do not have to type out an absolute URL. We may wish to use a relative URL. This way if we move the folder containing the document and image, our links will not break.  You may use relative paths anywhere you need to specify the location of an external resource.  Relative Paths (relative to the HTML file) file.ext - means the file named file.ext in the current directory./ - this means the current directory../ - this means the parent directory / - this means relative to the server root (domain name) // - this is equivalent to writing http:// or https:// (the browser will choose automatically which one) http:// - used for a full url https:// - used for a full url over https

14. Quiz: Relative Paths  Assume we are viewing the HTML document at: http://google.com/pages/view/index.html  For each of the following, what is the absolute URL of the image loaded for each of these tags: ○ http://google.com/pages/view/image.png ○ http://google.com/pages/view/image.png ○ http://google.com/image.png ○ http://google.com/pages/image.png ○ http://google.com/image.png ○ http://google.com/image.png ○ https://google.com/img/test.png ○ http://google.com/img/test.png

15. Whitespace  You may have noticed that text spanning multiple lines in the source renders on a single line in HTML. This is because all whitespace in the source is reduced to a single space in rendered HTML.  If we want to make our text span multiple lines in rendered HTML, we can place a (line break) tag at the start of a new line.  Example: this shows you the point Each of these words has its own line.  We can also use the paragraph tag to wrap a paragraph of text. Line breaks will occur between paragraphs.  Example: my paragraph my second paragraph Text not in a paragraph

16. Inline vs. Block  Why have two tags for new lines?  is inline. It simply says to place a line break in the middle of a chunk of text.  The other tags that we have learned ( ) are also inline (these tags do not result in line breaks).  is block tag. It creates an invisible box around the text that can have height and width. This causes the line break between paragraphs.

17. and  and are two elements that can have content. In fact, these elements don’t do anything other than contain their content. Why? – The sections of content marked by these tags can have styles applied to them to adjust the display behavior of their contents. CSS (Cascading StyleSheet) is the separate language that enables us to add styles to our documents and change how different elements are laid out.  The only difference between and is that: is inline is block  Example: one line yep one line one line not one line

18. Nesting Tags with The Same Name  What if we wanted to place two tags with the same name inside of each other? Why would we ever want to do this? When creating complex styles, we may want to use nested,, and elements.  Opening tags are matched to the next closing tag that has not been already been matched to another element (think parentheses).  1 2 3  This is valid HTML markup. The parser matches the red opening and closing tags together and the green opening and closing tags together.

19. Invalid Markup  The above markup is invalid.  What happens when we put it in the browser? Renders bold and italic as you would expect. Browsers are designed to be tolerant to malformed markup (i.e. mismatched tags).  Problems How to determine parent-child relationship of elements for use in document-object-model? More on this later. Bold? Bold and Italics! Italic?

20. Comments  We can indicate comments in HTML as follows:   Comments are not rendered, and exist only in the source.  Comments can help us to remember what we were trying to accomplish when we look at the source later (just like comments in a normal programming language).

21. Tables  We may wish to present data to our user that is best laid out in a table. HTML provides us with a way to create tables.  Tables are best used for their intended purpose: displaying information. However, it is possible to create page layouts using tables.  To indicate a table, we use the tag. The tag only wraps a table – in order to add rows and columns, we’ll also need to use other tags.   You may wish to use the border attribute to help you visualize the table as you are designing it.

22. Table Sections  You may wish to have certain rows of your table marked as a header (for example, the first row of your table may contain the names of all the columns).  You can use the tag to wrap rows that contain table headers and the tag to wrap rows that are part of the table’s body (content).  These tags are not required (the browser will assume ). However, these tags will be useful later when we learn CSS and Javascript.

23. Table Rows  The tag wraps a table row. This tag does not produce any output by itself, but will be useful when you want to apply styles to a row of a table.

24. Table Cells  There are two types of table cells: header and standard. indicates a header cell indicates a standard (data) cell  To add columns to the table, we can add the following inside our tags: Cell Content  For each row, we can add as many cells as we want (this will be the number of columns in the table).  Each row should have the same number of columns.

25. Irregular Table Layouts  Sometimes, we may want to have a cell on one row span more than one column. For example, we may want 2 columns on the first row of our table and 4 columns on the second.  We can accomplish this using the colspan attribute on our or elements.  The number of spanned columns should be the same on each row. In the example above, the first row spans 4 columns and the second row has (spans) 4 columns.

26. Irregular Table Layouts (cont.)  Just as we may want a cell to span more than one column, we might also want a cell to span more than one row.  We can do this using the rowspan attribute on our and elements.  1 2 3  In order to have valid markup, you must have a “full” table at all times. This means you should not be missing a cell element at any place on the table.

27. Tables: Putting it All Together Column Name Column 2 Name Content Content 2

28. Lists  In HTML, we can create lists using the or tags. means unordered list. This will use bullet points. means ordered list. This will use numbers.  We can place elements in the list using the tag. means list item. This tag should only be placed inside of a list ( or ).  It is possible to nest lists inside of other lists (this will increase the indentation level) – think about how this PowerPoint has multiple levels. To do this, we place another list inside a tag.  Item Item2  When designing layouts, lists are often used for navigation bars/panels. It is possible to remove the numbers/bullets or to make list elements populate horizontally rather than vertically (we’ll learn this later).

29. HTML Special Characters  As you may have noticed, certain characters have a special significance in HTML. This includes the “ ” symbol.  What if we wanted to display text that contained one of these symbols?  HTML provides us with a way to represent these symbols so that they will not be treated as markup.  The following symbols that have significance can be replaced with: > = > < = < & = & “ = "  Example: What if we want to talk about html in html? What if we want to talk about in html? What if we want to talk about <html> in html?  Quiz: What html markup renders to “&=&”? Answer: &=&amp;

30. HTML Forms  The form tag is a block tag that wraps an interactive form. If we place an empty form tag (no content inside it), nothing is rendered (much like the table tag). …  Inside of the form tags, we can place inputs and other form elements. Each has a name attribute.  The code below produces a simple text box. When you press enter, the URL will change to match what you enter in the box. e.g. /path/to/example.html?query=whatyoutyped

31. Form Submission Button  Right now, users have to press enter to submit the form. This behavior may be undesirable or confusing. We need to add a submission button.  elements have another attribute: type. Type specifies what kind of input the element represents (a text field, a password box, a check box, etc.)  The default value for type (if it is not specified) is text. This is what created the text box in our previous example.  To create a submission button, we would add:  Clicking on the submit button is equivalent to pressing “Enter” while the text box is focused. You can also still press enter to submit the form.

32. Changing Where The Form Submits  By default, the form submits to the same page that it is located on.  To change this, we can use the action attribute.  This form will search Google for what we type in the box.

33. URL Encoding  What happens if we type a query containing spaces, punctuation, or html markup?  Example: We input: test search query! The value of the parameter q is: test+%3Chtml%3E+search+query%21  What happened? URLs cannot contain spaces or certain characters. To get around this, your browser did something called URL encoding. URL encoding simply allows us to use characters in URL parameters that are not normally allowed.  When the web application software attempts to utilize this input, it will be automatically converted back to “test search query!” as if nothing changed.  URL encoding/decoding is transparent to both the user and web application programmer. It is automatically encoded by the client’s browser when the request is made. It is automatically decoded by the web server software when the request is received and passed to PHP.

34. Form Methods  The form tag also has a method attribute. If you remember Unit 1, there are two main HTTP methods: GET and POST.  The default value for the method attribute is GET. When using GET, all of our inputs are attached as a query string to our action URL.  Question: if you include a query string that has get parameters in your action, what happens? The GET parameters contained in the action are not sent, but the “q” parameter is still set to what we entered. We can use hidden inputs to get around this.  Let’s try using POST instead of GET. What happens when we submit our form now? This time, the GET parameters contained in the action are sent, but the “q” parameter no longer appears in our URL. Was our “q” information still sent to the server? (use the Firefox Network Inspector) Yes! It was sent as POST data in the request body rather than as a GET parameter in the request URI.

35. GET vs POST  We know there are two main methods in HTTP: GET and POST.  Why should we use one method instead of the other?  GET Parameters sent in the URL (not good for sensitive info) Used for fetching documents/files Affected by maximum URL length ~2000 chars Ok to cache locally Shouldn’t make changes to the server  POST Parameters in sent Request Body (good for sensitive info) Used for updating or submitting data No max length (server may enforce a max of several MB) Not ok to cache locally Ok to make changes to the server

36. Problems with GET  Links make GET requests and forms generally make POST requests.  Why does Google Search use a GET form? We are retrieving a piece of information (the search results) from Google. Searching for something does not modify data on the server. The GET parameter generated by the form just gives extra information about what we want to retrieve.  GET requests are intended to be used when fetching information from the server. Browser makers take this into account when they create caching schemes. Sometimes this can cause problems for developers who use GET requests incorrectly.  What if we wanted to use a link to delete some piece of information from the server? This might generate a GET request to “/delete/?id=1”.  Enter “Google Web Accelerator,” “Fasterfox,” etc.  Google Web Accelerator is a browser plugin that automatically pre-fetches all links on a page so that if you go to click them, they will load instantly from the local cache.  When Web Accelerator performs its pre-fetching, it will also pre-fetch all of the links that delete content from the server – effectively deleting everything.  This creates a problem – don’t use GET requests to alter the server!  You should also never use GET requests when sending passwords. The passwords will be exposed in the URL.

37. Dropdown Selection Boxes  We can add selection boxes to our form using. One Two Three  If no value is specified, the browser will automatically set the value to be equivalent to the text inside the tag.  What if we want the default option (the one that is chosen when the page loads) to be a different option than the first one listed, but we don’t want to change the order of our list? Solution: We can use the selected attribute. Two

38. Checkboxes  We can also place checkboxes in our forms.  The GET parameter is set to the value attribute (if it is defined) or defaults to “on” if the box is checked. Note: The default value may vary from browser to browser. It’s good practice to always set a value.  If the box is not checked at all, the parameter does not appear at all in the request.  Thus, to determine whether or not the box was checked in server-side software, we simply check whether or not the parameter is included in the request.

39. Radio Buttons  You’ve probably seen the circular buttons on websites that only allow you to choose one of them. Example: Multiple Choice Tests  Radio buttons function similarly to selection boxes, but are laid out differently (you can always see all the options, not just when you click the selection box).  Normally, radio buttons behave as a group. To achieve this in HTML, we create multiple radio inputs with the same name. Only one of the inputs can be active at a time.  Note that if we create a radio button group that has only one button, behaves as a checkbox that can be turned on but not off.  The value of the GET parameter created by the radio box defaults to “on” (similar to check boxes) if you do not specify a value attribute. Otherwise, the parameter will be set to the value of the selected circle. We need to include a value attribute on each radio button to uniquely identify it. Otherwise, it will display “on” regardless of which button is selected. This defeats the purpose.  If no button in a group is turned on, the input will be absent from the request (similar to checkboxes).

40. Labels  How is the user supposed to know which checkbox or radio button corresponds to what?  You can add text next to the buttons to describe this. I agree.  When you click the text, the checkbox is not toggled. This is annoying behavior because you are now required to click the box itself to toggle it (which is a very small target).  The element solves this problem. I am awesome.  Now, when you click the text, the box is also toggled.

41. Password Fields  You’ve noticed that many website on the internet have password fields. In these fields, what you type appears as dots instead of actual text.  It is possible to set default values for password fields. The value,while it will be hidden in the rendered HTML, is still readable as plain text in the source. Generally, this is undesirable – don’t use default values in password fields. You can view the source of any web page in Firefox by choosing Firefox > Web Developer > Page Source or pressing Ctrl+U.  We will discuss password security more later. For now, notice that passwords are sent in the clear (whether using GET or POST).  Anyone could intercept the HTTP request and retrieve the password from it.  To get around this, we use HTTPS which encrypts the entire request packet. This does not prevent interception, but anyone who intercepts the packet will not be able to make sense of it.

42. Text Areas  We can also place a huge text field in our form that is intended for paragraphs or large amounts of content. Default Value  When we are specifying the default value of our textarea, we should be sure that any characters that have relevance in HTML (for example, > and <) are escaped into their special character equivalents. <html>  The whitespace and line breaks contained inside the are preserved. That is, the whitespace and line breaks will appear inside the rendered text field as they do in the source code.

43. Array Input  In some cases, we may want to accept input in an array format.  This is useful if representing the input as an array makes the input easier to process server-side. Example: You have a set of checkboxes and the user can check more than one of them. You could create a unique input name for each one of the boxes (e.g. opt_1, opt_2, opt_3…). Or, you could also choose to accept the input as a single name (e.g. opt) using an array. On submission, the input be an array containing the values of the boxes that are checked.  Array inputs are indicated by adding “[]” after the input name.  Example: Opt 1 Opt 2 Opt 3

44. Default Values  As a reminder, this is how we can specify the default value that will appear when form elements are rendered on the page.  For textboxes: We can use the value attribute. HTML tags should be escaped inside the attribute value.  For textareas: The content between the tags is the default value. Default HTML tags should be escaped inside the. Spacing preserved.  For selection boxes: We can choose the that we cant to be selected when the page loads using the selected attribute.  For check boxes and radio boxes: If we want a check box or radio box to be selected when the page loads, we use the checked attribute.

45. Hidden Input Fields  You may want to hard code an input that the user can not see or modify.  To do this, we can use a hidden input. 

46. HTML Document Structure  Up to now, we’ve just been looking at small snippets of markup (e.g. content ). These really belong in the section.  We can get away with this because modern browser applications are incredibly tolerant when parsing HTML documents.  Complete HTML documents have:  Title! content  declares the document type  tags surround entire document  contains metadata, javascript, css, page title (appears at top of browser window) – things that are important but not actually rendered visually in the page itself  contains the actual contents of the document (what we’ve been doing) – most interesting stuff happens here

47. Document Tree  HTML involves nesting tags within other tags. Doing so creates a hierarchical tree structure.  This structure will be important when we are working with CSS and Javascript.  The following terminology will be useful: siblings, children, parent, descendants, ancestors.  Example: Content Content

48. Title Tag  The title tag contains the text that will be shown in your browser’s title bar or as the tab’s name.  The title tag should be placed within the tags.  Example: My First Website!

49. Meta Tags  META Tags contain information and/or properties related the HTML document that do not need to be shown to the user (not rendered).  META tags should be placed inside the.  Usually, the information is used by the web browser when preparing the page or by other non-human clients (e.g. search engine bots).  Example Tag:  Examples: Keywords Description

50. Link and Style Tags  Style tags are used to encapsulate Cascading Style Sheet code that embedded directly into the page. We will learn more about CSS in the next unit. /* CSS Code */

51. Link Tags  Link tags are used to reference or include external assets.  Example 1: Shortcut Icon (appears in browser tab)   Example 2: Including CSS Code from an external file 

52. Script Tags  Script tags are used to encapsulate JavaScript code that is placed into the page. /* Javascript Code */  Script tags can also be used to include and execute JavaScript code from a URL.

53. Experimenting with HTML  You can use the following websites to experiment with the HTML markup language:  http://jsfiddle.net/ http://jsfiddle.net/  http://jsbin.com/ http://jsbin.com/  http://dabblet.com/ http://dabblet.com/  http://tinkerbin.com/ http://tinkerbin.com/

54. Firefox Developer Tools  To open up the developer tool, simply right click on any element on the page and choose “Inspect Element” in the context menu.

55. Working with HTML Files  To create an HTML file: Create a new empty file with a.html extension.  To edit an HTML file: Open the file using some text editing program (for example, Sublime Text).  To view an HTML file: Open the file using a browser (for example, Chrome).  To see changes reflected after editing the file, save the file and refresh the page in your browser.