IT202 – WEB APPLICATIONS

MAURA ANN DEEK

WEEK TWO

HTML/XHTML/HTML5
 HYPER-TEXT MARKUP LANGUAGE
(HTML)
• HYPER-TEXT MARKUP LANGUAGE (HTML) - IS A KNOWN AS A
MARKUP LANGUAGE.
• MEANING IT IS A WAY OF ANNOTATING A DOCUMENT IN SUCH A
WAY AS TO MAKE THE ANNOTATIONS DISTINCT FROM THE TEXT
BEING ANNOTATED.
• ALLOWS THE USER TO CONTROL HOW TEXT AND VISUAL
ELEMENTS WILL BE LAID OUT AND DISPLAYED.
• IN ITS SIMPLEST FORM MARKUP IS A WAY TO INDICATE
INFORMATION REGARDING CONTENT THAT IS DISTINCT FROM
THE CONTENT ITSELF.
• IS DONE VIA TAGS/ELEMENTS.
• CAN ALSO ENCODE INFORMATION ON HOW TO DISPLAY THE
CONTENT FOR THE END USER.
 EXTENSIBLE HYPER-TEXT MARKUP LANGUAGE
(XHTML)
• XHTML is a version of HTML that uses stricter XML (eXtensible Markup
Language) syntax rules.

• As the web evolved, web browsers evolved into lenient and permissive
programs. allowing for sloppy HTML (missing or malformed tags and
other syntax errors).

• Created issues with how various browsers would handle these errors.

• XHTML was developed to address these issues.

• The goal of XHTML was to make page rendering more predictable by

forcing web authors to create pages without syntax errors.

• Three version of XHMTL were created:

• XHMTL 1.0 Strict - meant to be rendered by a browser using strict
syntax rules.
• XHTML 1.0 Transitional - more forgiving flavor of XHTML and was
meant to act as a temporary transition to XHTML Strict.
 EXTENSIBLE HYPER-TEXT MARKUP
LANGUAGE (XHTML)
• XML based syntax rules for XHTML are as follows:
• There must be a single root element.
• Element names are composed of any valid characters (most
punctuation characters and spaces are not allowed) in XML.
• Element names can start with a number.
• Element and attributes are case sensitive.
• Attributes must always be within quotes.
• All elements must have a closing element (or be safe closing).
• Standards movement used HTML validators as a means of verifying
that a web page’s markup followed the rules of XHTML Strict or
Transitional.
• Standards were set by W3C (World Wide Web Consortium a standards
organization)
 HYPER-TEXT MARKUP LANGUAGE 5
(HTML5)

• HTML5 – developed by a small group of developers at Opera and Mozilla.

• Group known as WHATWG ( Web Hypertext Application Technology Working
Group).
• Focused less on semantic purity and more on how the web actually existed.
• In 2009 the W3C adopted their work and called it HTML5 also known as
the HTML Living Standard.
• HTML5 has three main aims:
• Specify unambiguously how browsers should deal with invalid markup.
• Provide an open, nonproprietary programming framework (via JavaScript)
for creating rich web applications.
• Backward compatibility with the existing web.
 HYPER-TEXT MARKUP LANGUAGE 5
(HTML5)
• All major browser manufacturers have embraced (at least partially) HTML5.
• Not all browsers and all versions support very feature of HTML5.
• This is done by design as HTML5 is considered a “living” language since it is still evolving.
• We will look at the syntax of HTML5 and learn the fundamental concepts and terms of the
language.
• Basic structure of an HTML document consists of two parts: the DOCTYPE declaration and the
document tree.
• The DOCTYPE declaration which looks as follows: <!DOCTTYPE html> will be the first line of
code in all your
HTML documents. Its purposes is to indicate to the browser that the document is using
HTML5.
• The documents tree starts right after the DOCTYPE declaration and consists of HTML elements
that define the content and structure of the web page.
• HTML documents consist of textual content and HTML elements.
• It is important to note that the term element is often used interchangeably with the word tag.
• For clarification purposes:
• An element is a more expansive term that encompasses the element name within the angle
brackets (this is the actual tag) and the content within the tag.
 HTML5 –ELEMENTS/TAGS
• An HTML element is identified by a tag.
• A tag consists of the element name within brackets (<>).
• The element name exists in both the opening and closing tag.
• A closing tag will have a forward slash before the tag’s name.
• An element can also contain attributes.
• An attribute is a name = value pair that provides information about the
HTML element.
• In XHTML:
• attribute values need to be enclosed within quotes.
• element names and attributes must be lowercase (case sensitive).
• In HTML5
• attribute values do not need to be enclosed within quotes unless they
contain spaces (many web developers still maintain the practice).
• is case insensitive.
• Quotes can be single or double. I suggest you double to maintain a
consistent appearance throughout your code and will help in avoiding errors.
 HTML5 –ELEMENTS/TAGS
• Most elements have an attribute that is considered its most important one.
• For example:
• The <a> element’s most important attribute is the href attribute.
• The <form> element’s most important attribute is the action attribute.
• The <img> element’s most important attribute is the src attribute.
• The <input> element’s most important attribute is the type attribute.
• Of course, some of the above elements have other attributes that are also
important when defining the element
• For example:
• The <input> element has the id and name attributes.
• The <form> element has the method attribute.
 HTML5 –ELEMENTS/TAGS

• Elements that contain content are known as container elements.

• Generally divided into three parts:
• an opening tag
• content
• closing tag
• For example: the <a> element
Opening tag Closing tag

• <a href = "https://www.njit.edu">NJIT</a>

Element name Attribute Content (Can be text or other HTML elements)
 HTML5 –ELEMENTS/TAGS

• HTML can have empty elements.

• An empty element does not contain any text content rather it
instructs the browser to do something.
• They do not have a closing tag.
• An example of an empty element is <img> (the imagine element).
• For example:
<img src = “NJIT.jpg” alt = “NJIT"/>
Element name Trailing Slash (Optional)
 HTML5 –NESTING ELEMENTS
• Often an HTML element will contain other HTML elements.
• This is known as NESTING.
• The container element is said to be the parent of the contained child
element.
• To correctly nest elements the child element’s opening and closing
tags must be completely enclosed within the parent’s opening and
closing tags.
• Any elements contained within the child are known as the descendants
of the parent element and any given child element may be a variety of
ancestors.
• For example: Child element’s tag contained within
• Correct Nesting: Parent element’s tag

<h1> Welcome to <strong> IT202 </strong> </h1>

Child element’s tag not
• Incorrect Nesting: contained within Parent
element’s tag
 HTML5 –NESTING HIERARCHY
• A more complex example:
Ancestor
<body>
Child Parent
<p>
Welcome to <strong> IT202 </strong>
</p>

<h1> HTML5 Lecture </h1>

Sibling
Decendants
<div>
<p>
This is an <span> IMPORTANT </span> topic
</p>
</div>
</body>
 HTML5 –NESTING HIERARCHY
• A different perspective
Descend Chil
ant d <body>

<p> <h1> <div>

Sibling
<strong> <p>

<span>
Ancest
or
 HTML5 –SEMANTIC HTML

• Semantic HTML – is the use of HTML markup to reinforce the semantics

(meaning) of the information in web pages rather than define its
presentation or look.

• A semantic element clearly describes its meaning to both the browser

and the developer.
• non-semantic elements examples: <div> and <span> - Tells nothing
about its content.
• semantic elements examples : <form>, <table>, and <article> -
Clearly defines its content.

• Advantages of using semantic HTML are as follows:

• Maintainability – semantic markup is easier to update and change.
• Performance – semantic webpages are typically quicker to create
and faster to download.
• Accessibility – not all web users are able to view the content of a
page (i.e., users with sight disabilities experience the web via
 HTML5/XHTML - BASICS
• A simple document in XHTML MUST have the following elements:
• <html>
• <head>
• <title>
• <body>
• HTML5 requires just the
• <html>
• <title>
• The <head> and <body> elements are considered to be essential
to make a more “complete” HTML document and therefore are
still used in HTML5.
 HTML5 - SYNTAX
• The basic structure of an HTML5 document is as follows:
<!DOCTYPE html> DOCTYPE DECLARATION
<html>
<head>
.
.
</head> document
<body> tree
.
.
</body>
<html>
 HTML5 - BASICS
• An example of simple HTML5 document:
<!DOCTYPE html> indicates to the browser what type of document is about to be processed
<html lang ="en"> known as the root element contains all the other HTML elements. The
language attribute
indicates the for your web page
<head> contains descriptive elements about the document. Provides information about the
page rather than content of the page
<meta charset="UTF-8"> defines metadata about an HTML document. In this case the the
character coding used for the page (UTF-8 commonly used for the WWW)
<title>Welcome to IT202</title> used to provide a broad description of the document
content. It is displayed in the browser’s tab and is a means to tell search
engines about the topic of the page .
<link rel = "stylesheet" href = "main.css"/> links to an external file (CSS in this case)
<script src = "IT202.js"></script> references an external JavaScript file
</head> closes the head element
<body> contains content (both HTML elements &regular text ) for browser to display
<h1>IT202</h1> creates a heading for document
</body> closes the body element
</html> closes the html element
 HTML5 - BASICS
• A deeper dive:
<body> starts the body of the document

<h1>Vacation Memories</h1> defines a heading

<h2> Paris, France </h2> defines a heading
<p> Presented by Maura Deek</p> defines and closes a paragraph
<p> Photo of The Eiffel Tower defines a paragraph
<a href = "https://www.toureiffel.paris/en">Eiffel Tower</a> defines a hyperlink to
external file
in <strong>Paris France</strong> defines text with strong/bold display image
</p> closes a paragraph
<img src = "https://www.travelleisure.com/landmarks-monuments/eiffel-tower" alt
="Eiffel Tower" /> defines a hyperlink to an image
meaning a link to another page or resource

<h3>Comments/Reviews</h3> defines a heading

<div> defines a container element used to create a logical grouping
<p>By George S.</p> defines and closes a paragraph
<p>Breathtaking</p> defines and closes a paragraph
</div> closes a container element used to create a logical grouping
<hr> adds breaks between paragraphs
<div> defines a container element used to create a logical grouping
<p>By Sally M.</p> defines and closes a paragraph
<p>A MUST See</p> defines and closes a paragraph
</div> closes a container element used to create a logical grouping
 HTML5 - ELEMENTS/TAGS

• Further breakdown of elements:

• <h1> <h2>, etc. - used to define different sized headings.
• HTML provides for six heading levels (h1 through h6).
• Higher the number the smaller the font size.
• Headings are an essential means to show the structure of the
document.
• They create a document outline for the page.
• They organized your content! (Analogy: like an outline for
term paper).
• They are known as block elements (meaning they start on a
new line when displayed and take up the full space of the
area that they are in).
 HTML5 – ELEMENTS/TAGS
• <p> - defines a a paragraph.
• Is the most basic unit of text in an HTML document.
• Is a container element – meaning it can contain HTML and other
inline elements (i.e., <strong>, <a>).
• These are known as inner elements and don’t cause a
paragraph break instead they are part of the regular flow of
the text.
• Is a block element.
• <a> - defines a hyperlink.
• Stands for anchor. A link has two main parts: the destination
(indicated via its href attribute) a label.

• <a href = "https://www.toureiffel.paris/en">Eiffel Tower</a>

destination label
 HTML5 – ELEMENTS/TAGS
• <strong> - used to define text strong/bold image.
• Other common tags:
• <abbr> - an abbreviation (identifies content).
• <br> - line break (identifies content).
• <cite> - citation (i.e., reference to another work) (identifies content).
• <code> - used to display code such as markup or programming code (identifies content).
• <dfn> - used to indicate the term being define within the context of a definition phrase or
sentence (identifies content).
• <em> - emphasis (formats text typically italicizes the text).
• <kbd> - used to define keyboard input that is displayed monospace font (identifies content).
• <mark> - display highlighted text (formats text).
• <q> - indicates text is a quotation and is displayed within quotation marks (identifies
content).
• <samp> - sequence of characters (a sample) that has no other meaning (identifies content).
• <small> - displays fine print that is nonvital text such as copyright or legal notices (formats
text).
• <span> - inline equivalent of <div> element. Generally used to mark text that will receive
special formatting using CSS. (formats text).
• <sub> - displays content as a subscript (formats text).
• <sup> - displays content as a superscript (formats text).
• <time> - a date or a date and time in a standard format (identifies content).
• <var> - a computer variable that is displayed in a monospace font (identifies content).
 HTML5 – ELEMENTS/TAGS
• <img> - defines a hyperlink to an image.
• <img src = "https://www.travelleisure.com/eiffel-tower" alt ="Eiffel Tower" title = "Eiffel
Tower" width = "50" height = "25" />
Specifies the URL of the image to Provides brief Displays text in Specifies the width
display description of title when a and height of image
image if not mouseover in pixels
rendered or for occurs
sight impaired

• <div> - a container element which is used to create a logical

grouping of content ( i.e., text and other HTML elements).
• Is a block element.
• <time> - defines a specified time (or datetime).
• <hr> - used to insert a horizontal rule or thematic break in a
HTML page to divide or separate document sections.
• <br> inserts a line break.
 HTML5 – STRUCTURAL ELEMENTS
•Structural elements were introduced with the release of HTML5.
•All are block elements that allow the coder to give their pages more structure.
•Allow for other block elements to be nested within them.

They are as follows:

• <header> - the header of the page.

•<main> - the main content of the page.
•<section> - a generic section of a page that doesn’t indicate the type of
content.
•<article> - a composition like an article in the paper.
•<nav> - a section of a page that contains links to other pages (navigation
menu).
• <aside> - a section of a page like a sidebar that is related to the content that
is near it.
•<footer> - the footer of the page.
HTML5 – ENTITY CHARACTERS
Entity Charact Description
er
&amp; & Prints an ampersand.
&lt; < Prints a less than sign.
&gt; > Prints a greater than sign.
&copy; © Prints copyright symbol.
&reg; ® Prints registered trademark sign.
&trade; ™ Prints trademark sign.
&deg; ° Prints degree sign.
&plusmn; ± Print plus/minus sign.
&cent; ¢ Prints cent sign (use &pound, &euro,
&yen for pound euro and yen sign).
&quo; “ Prints double quote.
& lsquo; ‘ Prints opening single quote sign.
& rsquo; ‘ Prints closing single quote or
apostrophe.
& nbsp; Prints non-breaking space.
 URL – ABSOLUTE & RELATIVE REFERENCING

• When coding an absolute URL you need to code the complete URL which
includes the domain name, any subdirectories and the file name. For
example: web.njit.edu/myfirstpage.html
• When coding a relative URL remember that it is based on the current
folder which is the folder that contains the current page.
•There are two types of relative URLs:
• A root-relative path which is a relative to the root folder of the website. It
will always start with a forward slash and then goes down one subfolder by
indicating the subfolder name followed by a slash. This pattern continues
until you reach the file needed. For example: /images/logo.jpg refers to
root/images/logo.jpg
• A document-relative path is a relative to the folder the current document is
in. To go down one subfolder, you code the subfolder followed by a slash. This
pattern continues until you reach the file needed. For example:
books/images/logo.jpg refers to the root/books/images/logo.jpg You can also
go up in a document-relative path. To go up one level from the current folder
you code two periods and a slash. This pattern continues until you reach the
file needed. For example: ../index.html refers to root/index.html.
 URL – RELATIVE REFERENCING
• Relative referencing is a way of accessing a file via a path.
• When referencing a page or resource from an external site, a full
absolute reference (path) is required (meaning the complete URL).
• If referencing a resource residing on the same server, a briefer
relative referencing can be used.
• If all the resources for the site reside in the same directory (folder) you can
reference those resources simply via the file name.
• If all resources are not found in a single directory a relative pathname is
required along with the filename. This pathname tells the browser where to
locate the required file on the server.

• Rules to abide by when creating a relative path:

• Pathnames on the web follow Unix conventions.
• Forward slashes (/) are used to separate directory names from each other and
from file names.
• Double periods (..) are used to reference the directory above the current
directory.
 URL – RELATIVE REFERENCING
• Examples of relative referencing (linking to a file):
• File in same directory. <a href = "myfirsthtml.html">
• File within a subdirectory (child). <a href = "IT202/myfirsthtml.html">
• File that is multiple subdirectories below the current directory
(grandchild/descendant). <a href = "htmlcode/IT202/myfirsthtml.html">
• File that is above the current (parent/ancestor). <a href =
"../myfirsthtml.html">
• The ../ indicates the file is found one directory above the current directory.
• File that is multiple subdirectories above the current (parent/ancestor)
use the ../ for each directory that needs to be reference. <a href =
"../../myfirsthtml.html">
• The ../../ indicates the file is found two directories above the current directory.
• Absolute path vs relative paths:
• Absolute – <a href = "IT202/myfirsthtml.html">
• Relative - <a href = "../myfirsthtml.html">
LISTS – ORDERED, UNORDERED AND DESCRIPTION
• Lists are one of the most common block level elements in HTML.
• Lists are created via the <li> element.
• HTML has three types of lists:
• Unordered lists – a collection of items with no particular order.
• Order lists – a collection of items that have a set order.
• Description lists – a collection of name and
description/definition pairs.
• Each item in your list will be created will via an <li> element.
• Nesting of lists is allowed, but you cannot nest lists by directly
nesting one of the list types above (<ul>, <ol>, <dl>) directly within
itself. For example:
<ul> <ul>
Allowed
<li> Not <ul>
Allowed
<ul> <li>
 UNORDERED LISTS
• By default, unordered lists are rendered by the browser as bullets.
• Cascading Style Sheets (CSS) will allow the styling of unordered lists
without bullets.
• Have become the conventional way to markup navigational menus item.
• Contains <li> items within the <ul> parent container.
• An example:
<h2>Shopping List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Bread</li>
</ul>
 ORDERED LISTS

• By default, ordered lists are rendered by browsers as numbered

lists.
• Contain <li> items within the <ol> parent container.
• An example:
<h2>To Do List</h2>
<ol>
<li>Food Shopping</li>
<li>Post Office</li>
<li>Dry Cleaners</li>
<li>Do Wash</li>
</ol>
 ORDERED LISTS
• An example of how you can properly nest unordered and ordered lists.
• This code uses a <ul> element nested within a <ol>element, but both <ol>
and <ul> elements allow nesting within their own tags.
<h2>To Do List</h2>
<ol>
<li>Food Shopping</li>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Bread</li>
</ul>
<li>Post Office</li>
<ul>
<li>Stamps</li>
<li>Mail</li>
</ul>
<li>Dry Cleaners</li>
<ul>
<li>Pickup shirts</li>
<li>Drop off suits</li>
</ul>
<li>Do Wash</li>
<ul>
<li>Do a load of colors</li>
<li>Do a load of whites</li>
</ul>
 ORDERED LIST
• In addition to containing text list items, <li> elements, can contain inline
elements such as links and images and block elements such as headings,
paragraphs and as stated previously other lists.
• An ordered list can also have an attribute called start. The start attribute
allows you to start your list at a value other than the default.
• Below is an example:
Notice that the
second list does
not start with
the number 1.
By using the
start attribute it
begins with the
number 5.

Also notice you

can nest a <ul>
element and still
keep track of the
<ol> numeric
value
 DESCRIPTION LISTS
• Tend to be used less frequently.
• Container for the description list is <dl> element.
• Contains :
• <dt> (term or name to be described)
• <dd> (term description) pairs for each item in the list
• An example:
<dl>
<dt>ft</dt>
<dd>A foot (12 inches)</dd>
<dt>in</dt>
<dd>inch (1/12 of a foot)</dd>
<dt>yd</dt>
<dd>A yard (equal to three feet)</dd>
<dt>mi</dt>
<dd>A mile (is 5280 feet, 1760 yards) </dd>
 LISTS – NAVIGATION BARS
• Lists can also be used to create navigation bars in
conjunction with the <a> element. Styling of a
navigation bar can be done with CSS which we will
learn about in the next lesson. You can create both
vertical and horizontal menus. Below is an example of
a vertical navigation bar.
 TABLES
• Tables in HTML are used to represent information that exists in a two-
dimensional grid consisting of rows and columns meaning that it
consists of rows and columns. Within each row a cell will be defined
for each column. A row can contain two different types of cells: header
cells and data cells. Header cells identify the data in a column or a
row. Data cells contain the data of the table.. Used to display various
items (i.e., pricing information, financial data, calendars, etc.).
• Can contain any type of data (number, text, images, forms and even
tables).
• Created using:
• the <table> element – structure for creating rows and columns for
organizing data.
• the <tr> element - defines a row in an HTML table.
• the <td> element - defines a standard data cell in an HTML table.
• the <th> element - defines a header cell in an HTML table
(headings).
 TABLES
• An example
<table>
<tr>
<th>Student Name</th>
<th>Major</th>
<th>Advisor</th>
</tr>
<tr>
<td>John Smith</td>
<td>Data Science</td>
<td>Jones</td>
</tr>
<tr>
<td>Emma Warren</td>
<td>Electric Engineering</td>
<td>Winters</td>
</tr>
<tr>
<td>Henry Morris</td>
<td>Biology</td>
<td>Waverly</td>
</tr>
<tr>
<td>Miriam Hall</td>
<td>Digital Design</td>
<td>Loudon</td>
</tr>
 TABLES
Rendering of the table from the code on previous slide

<table
>
<tr Student Name Major Advisor
> <th> <th> <th>
<tr>
John Smith. Data Science Jones
<tr <td>
<td> <td>
>
<tr
>
Emma Warren Electrical Engineering Winters
<tr <td> <td> <td>
>
Henry Morris Biology Waverly
<td> <td> <td>

Miriam Hall Digital Design Loudon

<td> <td> <td>
 TABLES
• Tables also allow for a given cell to cover several columns or
rows.
• Achieved via the colspan and rowspan attributes.
• colspan - makes a cell span over multiple rows.
• <th colspan="2">Name</th> - creates a header cell called
Name that spans over two columns.
• rowspan -makes a cell span over multiple rows.
• <th rowspan="2">Phone</th> - creates a header cell called
Phone that spans over two rows.
• Spanning rows is a little less common and a little more
complicated because the rowspan affects the cell content in
multiple rows.
 TABLES
•Example of colspan attribute
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th> Heading “Name” Spans 2
columns
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>20</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>22</td>
</tr>
</table>
 TABLES
Example of rowspan attribute

<table style="width:25%">
<tr>
<th>Name</th>
<td>Jane</td>
</tr> Row “Phone” Spans
<tr> 2 rows

<th rowspan="2">Phone</th>
<td>973-555-5500</td>
</tr>
<tr>
<td>973-555-5505</td>
</tr>
</table>
 TABLES

• Additional table elements:

• <caption> element - provides a brief title or description of a table.
• <thead> element, <tfoot> element and <tbody> element - used
infrequently. Useful when creating a table with a large number of
rows.
• <col> and <colgroup> elements – used for styling of a table.
• <col> - column properties for each column within
a <colgroup> element.
• <colgroup> - allows the styling of a group of columns.
• The properties you can set with these elements are borders,
backgrounds, width and visibility.
• NOTE: <td>, <th> or <tr> element overrides any style string
for <col> or <colgroup> because they are more specific.
 TABLES
• Example using these additional elements:
<table>
Title for Table is good for
<caption>Student Table</caption>
<col class = "studentinfo"/> accessibility
<colgroup id = "studentColumns">
<col/> Describes Columns and can be
<col/> used in styling
</colgroup>
<thead>
<tr>
Table header can be used to include other <tr> elements
<th>Student Name</th>
<th>Major</th>
</tr>
</thead>
<tfoot>
<tr>
Table footer. Note it comes before the body
<td colspan="1">Total Students</td>
<td>2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>John Smith</td>
With styling the browser can scroll this information while keeping the header and footer in place
<td>Data Science</td>
</tr>
<tr>
<td>Miriam Hall</td>
<td>Digital Design</td>
</tr>
</tbody>
</table>
 TABLES

• Before broad support of CSS in browsers HTML tables were

frequently used to create page layouts.
• Tables were embraced by developers as a means of getting
block-level elements to sit side by side.
• We will examine so that when we learn CSS you compare
the two.
 TABLES
<table>
<tr>
<td>
<img src = "BunrattyCastle.JPG" alt = "Bunratty Castle"/>
</td>
<td>
<h2>Bunratty Castle</h2>
<p>County Clare, Ireland</p>
<p>Picture by: Maura Deek</p>
<p>Built by the MacNamaras around the year 1425
resides along the confluence of the Shannon estuary
and the Owenogarney River
</p>
<h3>Other Photos of Bunratty Castle</h3>
<table>
<tr>
<td>
<img src = "BunrattyCastleMainGuard.JPG" alt = "Photo of the Main Guard"/>
<img src = "BunrattyCastleEarlKitchen.JPG" alt = "Photo of the Earl's Kitchen"/>
</td>
</tr>
<tr>
<td>
<img src = "BunrattyCastleGreatHall.JPG" alt = "Photo of the Great Hall"/>
<img src = "BunrattyCastleRobingRoom.JPG" alt = "Photo of the Robing Room"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
 FORMS
• A form provides an alternative way to interact with a web server.
• They contain one or more controls such as textboxes and buttons that
can receive user input/data.
• Forms provide a rich mechanism for a user to interact with the web.
• Allows a user to
• enter text
• choose from item in a list
• click buttons
• All the options above typically allow applications running on a server to
take the input from the HTML form and do something with it.
• For example:
• save it to a database
• interact with an external server
• customize subsequent HTML based on the input.
 EXAMPLE OF A SIMPLE FORM
<form action="recipe.php" method = "POST">
<p>
NOTE: the value
<label>Type of Food</label> following the
attribute (i.e., id
<input type = "text" id = "typeoffood" name = "typeoffood" /> and name) is
enclosed within
</p> quotes.
<p> Quotation marks
are only needed
<label>Country</label> when the
attribute’s value
<select id = "country" name = "country"> contains a space.
I suggest just
<option>Choose a country to find a recipe</option> always using.

<option>Ireland</option>
<option>Italy</option>
<option>Spain</option>
</select>
</p>
<input type="submit"/>
Form
</form> generated
 FORMS

• A Deeper Dive:
• Defined by using the <form> element.
• Is a container for other elements that represent various input
elements as well as plain text and almost any other HTML
element.
• Requires some type of server sided resource to process the
user’s input.
• The process is as follows:
• The user makes a request of the web server via an HTTP
request.
• The browser returns a document that contains the form.
• The user fills out the form and hits submit.
• The user’s form data is sent to the server.
 FORMS

• A visual of process:
 UNDERSTANDING FORMS

• How is form data packaged in a request?

• Via a query string (a series of name=value pairs separated by
ampersands (&)).
• Examining the code from our example we need to look at two elements.
• The <input> element
• The <select> element
• Both of these elements will be used to create query strings (name=value
pair) for the form.
• The name attribute defines the name of the form data and defines the
name of the form data in a query string.
• The values in the query string are the data entered by the user.
 UNDERSTANDING FORMS
• Illustration of how query string (name=value pair)
generated
<input type = "text" id = "typeoffood" name =
"typeoffood" />

Typeoffood=Pasta&country=Italy
name=value pair

<select id = "country" name =

"country">
 UNDERSTANDING FORMS
• Query Strings have rules that are defined by the HTTP protocol.
• Certain characters cannot be part of a query string unless they
are URL encoded. They are as follows:
• spaces
• punctuation symbols
• foreign characters
• For example: if one of the countries in our drop-down menu was
the United States and the type of food a Hot Dog the space
would need to be represented as the + sign.
• Typeoffood=Hot+Dog&country=United+States
• URL encoding is automatically generated by the browser.
 UNDERSTANDING FORMS
• Two important attributes that are essential to any form are:
• action attribute - specifies the URL of a server-side resource that will
process the form data meaning that it specifies the file on a web server
that will process the input data once the form is submitted and therefore
is the MOST important attribute of forms.
• method attribute – indicates the submission method and specifies how the
query string will be transmitted/submitted (via an HTTP method) from the
browser to the server.
• The method attribute has two possible values with the difference between
the two based upon where the browser locates the user’s form input in the
HTTP request.
• GET - the browser locates the data in the URL (sent as part of the URL)
of the request. The data will be visible in the browser and thus is less
secure.
• POST - the form data is packaged as part of the HTTP request and
therefore is located in the HTTP header after the HTTP variables. The
GET VS POST
 GET VS POST
• In general, the choice for which is as follows:
• GET method is used for development/testing.
• POST method for sending data.
• PROS and CONS of each method:
• GET
• Data can be clearly seen in the address bar (advantage in
development/ disadvantage in production).
• Data remains in the browser history and cache (security risk on public
computers).
• Data can be bookmarked (advantageous and disadvantageous).
• Limits the number of characters in the form data returned.
• POST
• Data can contain binary data.
• Data is hidden from the user.
• Submitted data not stored in cache, history or bookmarks.
COMMONLY USED ATTRIBUTES FOR INPUT
ELEMENTS

Attribu Description
te
type The type of the control/input element. For example, text, button,
checkbox.
id A unique id that can be referred to by the client-side code.
name A name that can be referred to by the client-side or server-side
code.
disable A Boolean attribute that disables and grays out the control. The
d control will not be able to receive the focus, the user will not be
able to tab to it and the value is not submitted by the form.
readonl A Boolean attribute that means a user cannot change the
y control’s/element’s value. The control can receive the focus, the
user can tab to it and the value is submitted by the form .
 COMMONLY USED FORM ELEMENTS

• <button> - defines a clickable button.

• <datalist> - defines a list of predefined values that appear in a drop-down
menu to use with input fields allowing the user to select one.
• <fieldset> - groups related elements in a form together.
• <form> - defines the form container.
• <input> - defines an input field (HTML5 defines over 20 different
input types).
• <label> - defines a label for a form input element.
• <legend> - defines a label for a fieldset group.
• <option> - defines an option in a multi-item list.
• <optgroup> - defines a group of related options in a multi-item list.
• <select> - defines a multi-item list.
• <textarea> - defines a multi-line text entry box.
• <output> - defines the result of a calculation.
 TEXT INPUT CONTROLS
• text - creates a single line test entry box that accepts user input. <input type = "text"
name = "firstname"/>
• textarea - creates a multiline text entry box. You can add content text or if using an
HTML5 browser, placeholder text (text that disappears once the user begins to type).
<input type = "textarea" name = “textbox” rows = "4” />
• password - creates a single line text entry box for a password (masks/hides the user
entry as bullets or some other character). <input type = "password” name = "
password"/>
• search - creates a single line text entry box suitable for a search string. This is an HTML5
element. Some browsers on some different platforms will style search elements
differently or will provide a clear field icon within the textbox. <input type = "search "
name = " find " />
• email - creates a single line text entry box suitable for entering an email address. This is
an HTML5 element. Some browsers do provide validation when the form is submitted.
<input type = "email" " name = " email " />
• tel - creates a single line text entry box suitable for entering a telephone number. This is
an HTML5 element. No special formatting or validation is performed. <input type = "tel"
name = "telephone"/>
• url - creates a single line text entry box suitable for entering a URL. This is an HTML5
element. Some browser perform validation on submission. <input type =
TEXT INPUT CONTROLS
 HTML5 ADDITIONAL ELEMENTS AND
ATTRIBUTES
• autofocus attribute - added to form elements on the page which should
automatically have the focus (will be selected or have the cursor on it) when
the page loads.
• autocomplete attribute - tells browser whether control (or the entire form if
placed within the <form> element) should have autocomplete enabled.
Allows the browser to display predictive options for the element based on
previously entered values.
• pattern attribute - specifies a regular expression pattern that must be
matched.
• placeholder attribute - provides a hint (guidance) about the expected format
of the input. It places a starting value in the form’s element.
• required attribute - indicates the field must have a value (meaning it cannot
be left blank).
• title attribute - text that is displayed in the tooltip when the mouse hovers
over a field. This text is also displayed after the browser’s error message.
 CHOICE CONTROLS

• HTML has several different ways for a user to select input from a
list of options:
• <select> element - creates a multiline box for selecting one or
more items.
• radio buttons – allows for the selection of a single item
(default) from a small list of choices (allows all the choices to
be visible).
• checkboxes – allows for the selection of one or more
checkbox(es).
 <SELECT> ELEMENT
• Creates drop-down menu options via the <option> element.
• An id attribute is required to associate the drop-down list with a label.
• The name attribute is needed to reference the form data after the form is
submitted. If omitted, no data from the drop-down list will be submitted by
the form.
• The <option> element defines valid options which can be hidden a in a
drop-down menu or be multiple rows of the list that are visible. If there are
more options than can be displayed a scroll is added to the drop-down list.
• Can also group option items together by using the <optgroup> element.
• The <option> element attributes:
• selected attribute - allows a specific item in the list of values to be
chosen as a default value. If not used the default value will be the first
option in the drop-down menu.
• value attribute - indicates what value will be sent back to the server in
the query string when the option is selected.
 <SELECT> AND <OPTION> ELEMENTS
• An example of a drop-down menu via the <select> and <option>
elements:
Produced by the <select>
element
<label>Choose a Course</label>
<select id = "course" name = "course">
<option>IT114</option>
<option>IT202</option>
<option>IT490</option>
Produced by the <option>
</select> element

NOTE: the code above uses the label element to create the text
Choose a Course. Making the text an option allows it to be shown
as the first option in the dropdown-menu.
 <SELECT> AND <OPTION> ELEMENTS
WITH SIZE ATTRIBUTE
• An example of a drop-down menu via the <select> and <option>
elements and size attribute:
• size attribute specifies the number of visible options in a drop-
down list.
• if its value is greater than 1, but lower than the total number of
options in the list, the browser will add a scroll bar to indicating
more options to view.
Produced by the size attribute

<label>Choose a Course</label>
<select id = "course" name = "course" size = "3">
<option>IT114</option>
<option>IT202</option>
<option>IT490</option>
</select>
 <SELECT> <OPTION> AND
<OPTGROUP>ELEMENTS
• An example of a drop-down menu via the <select> and <option> and
<optgroup> elements:

Produced by the <optgroup> element

<select id = "course" name = "course">
<optgroup label= "Information Technology">
<option>IT114</option>
<option>IT202</option>
<option>IT490</option>
</optgroup>
<optgroup label= "Computer Science">
<option>CS114</option>
<option>CS280</option>
<option>CS490</option>
</optgroup>
</select>
 <SELECT> AND <OPTION> ELEMENTS
AND SELECTED ATTRIBUTE
• An example of a drop-down menu via the <select> and <option>
elements and the selected attribute:
• The selected attribute allows a pre-selected option to be
displayed first in the drop-down list no matter where the item
is located within the list. Produced by selected attribute

<label>Choose a Course</label>
<select id = "course" name = "course"> Note: that IT202 is
displayed even
<option value = "114"> IT114 </option> though it is the
<option value = "202" selected> IT202 </option>
second item in the
list
<option value = "490" > IT490 </option>
</select>
 <SELECT> AND <OPTION> ELEMENTS
AND MULTIPLE ATTRIBUTE
• An example of a drop-down menu via the <select> and <option>
elements and the multiple attribute:
• The multiple attribute allows for the selection of more than one item
from a drop-down menu.
Produced by multiple attribute
<select id = "course" name = "course " multiple>
<option value = "114"> IT114 </option>
<option value = "202"> IT202 </option>
<option value = "490" > IT490 </option> Note: more than one
option item is
</select> allowed to be
selected
 <SELECT> ELEMENT WITH VALUE
ATTRIBUTE
• An example of a drop-down menu via the <select> and <option>
elements and the value attribute:

<label>Course</label> <label>Course</label>
<select id = "course" name = "course"> <select id = "course"
name = "course">
<option>Choose a course</option> <option>Choose a
course</option>
<option> IT114</option> <option> = value = "114"
> IT114 </option>
<option> IT202</option> <option> = value = "202"
> IT202 </option>
Query String
Query
<option> String
IT490</option> <option> = value = "490"
Created
Created
> IT490 when IT202
</option> When IT202 is
is selected
</select>
?course=IT202 </select>selected
?course=202
 RADIO BUTTONS
• Buttons allow for the selection of a single item from a small list of choices as they
are normally presented in “radio groups” which describe a set of related options.
• Use when you want all the choices to be visible.
• Created via the <input> element’s type attribute:
• <input type = "button"/>
• Radio button attributes:
• name attribute – makes buttons mutually exclusively (meaning only one can be
chosen at a time). This is done by having the same value associated with the
name attribute for each button. This can be overwritten by giving each individual
button a unique value associated with the name attribute.
• checked attribute is used to indicate the default value for a button.
• value attribute - indicates what value will be sent back to the server in the query
string when the option is selected. Note: the value attribute is different for each
button which allows the client-side or server-side server code to retrieve the
value of the button selected.
•
 RADIO BUTTONS
An example of buttons created via the <input> element and type
and value attributes:

<label>Travel Destinations?</label>
<br>
<br>
<input type = "radio" name = "destination" value =
"Dublin"/>Dublin, Ireland<br>
<input type = "radio" name = "destination" value =
"Rome"/>Rome, Italy<br>
<input type = "radio" name = "destination" value = "Paris"/>Paris,
France<br>
RADIO BUTTONS AND CHECKED ATTRIBUTE
• An example of buttons created via the <input> element and
type, value and checked attributes:

<label>Travel Destinations?</label>
<br>
<br>
<input type = "radio" name = "destination" value = "Dublin"
checked/>Dublin, Ireland<br>
<input type = "radio" name = "destination" value =
"Rome"/>Rome, Italy<br>
<input type = "radio" name = "destination" value = "Paris"/>Paris,
France<br>
 RADIO BUTTONS
• As stated previously HTML allows you to overwrite the default of
allowing a selection of a single radio button.
• The code below demonstrates this how this can be accomplished.

<label>Travel Destinations?</label>
<br>
<br>
<input type = "radio" name = "destination1" value = "Dublin
"/>Dublin, Ireland<br>
<input type = "radio" name = "destination2" value =
"Rome"/>Rome, Italy<br>
<input type = "radio" name = "destination3" value =
"Paris"/>Paris, France<br>
 CHECK BOXES

• Check boxes are usually used to get yes/no responses.

• Created via the <input> element’s type attribute:
• <input type = ”checkbox"/>
• Check box attributes:
• name attribute – allows checkboxes to be grouped.
• checked attribute - used to set the default value for a check
box.
• Each checkbox will have its value when checked sent to the server
as a name/value pair.
 CHECK BOXES
• An example of check box created via the <input> element and
type and value attributes:

<label>Travel Destinations?</label>
<br>
<br>
<input type = "checkbox" name = "destination" value =
"Dublin"/>Dublin, Ireland<br>
<input type = "checkbox" name = "destination" value =
"Rome"/>Rome, Italy<br>
<input type = "checkbox" name = "destination" value =
"Paris"/>Paris, France<br>
 CHECK BOXES AND CHECKED ATTRIBUTE
• An example of check box created via the <input> element and
type, value and checked attributes:

<label>Travel Destinations?</label>
<br>
<br>
<input type = "checkbox" name = "destination" value = "Dublin"
checked/>Dublin, Ireland<br>
<input type = "checkbox" name = "destination" value = "Rome"/>Rome,
Italy<br>
Note name
<input type = "checkbox" that the checked attribute
= "destination" valuedoes not
= "Paris"/>Paris,
consist of an attribute name = value pair.
France<br>
This is because this attribute is a Boolean
attribute meaning it can have two values on
or off. When turned on the related
checkbox/radio buttons is checked when the
page is rendered.
 CHECK BOXES AND CHECKED ATTRIBUTE
• An example of check box with multiple checkboxes checked.

<label>Travel Destinations?</label>
<br>
<br>
<input type = "checkbox" name = "destination" value = "Dublin"/>Dublin,
Ireland<br>
<input type = "checkbox" name = "destination" value = "Rome"/>Rome,
Italy<br>
<input type = "checkbox" name = "destination" value = "Paris"/>Paris,
France<br>
 RADIO BUTTONS AND CHECK BOXES

• For both radio buttons and checkboxes can use the <label>
element to help with accessibility of these controls. Instead of
having to click on a small button or box this option allows a user
to click on the given text in the <label> element for a radio
button or checkbox when choosing an option. This is
accomplished by setting the for attribute of the <label> element
to the id attribute for the radio button or checkbox.
 BUTTON CONTROLS
• HTML defines several different types of buttons that can be created via the <input> element:
• <input type = "submit"/> element- creates a button that submits form data to a server for
processing automatically without using client-side code. The default value for text in
button is ”Submit”. Can customize the text by using the value attribute.
• <input type = "reset"/> element - creates a button that clears data already entered and
resets them to their default values. The default value for text in button is ”Reset”. Can
customize the text by using the value attribute.
• <input type = "button"/> element - creates a custom button that may require JavaScript for
it to perform any function since when clicked client-side code is usually run. The default
value for text in button is ”Button”. Can customize the text by using the value attribute.
• <input type = "image"/> element - creates a custom button that uses an image as its
display. It works just like the submit but displays an image rather than text. To specify the
URL for the image, use the scr attribute. To specify text if the image cannot be displayed
use the alt attribute. To set the size of the button use the height and width attributes.
• <button> element - creates a custom button.
• differs from the <input type = "button"/> in that it what appears in the button can be
completely customized by the developer.
• For example: the button may include both text and image or skip server-side
processing entirely by using hyperlinks. This button can be turned into a submit
button by using the type = "submit" attribute.
BUTTON CONTROL
 FORM CONTROLS
• HTML has two special purpose form controls:
• <input type = "hidden"/> - used to include data that cannot be seen or
modified when a form is submitted. The field is not displayed in the browser
and therefore the user cannot enter data into it. Instead, the value is set via
the value attribute.
• <input type = "file"/> - used to upload a file from a client to a server. When
using this control, the method attribute must be POST and you must
include the enctype attribute.
• HTML5 introduced two new controls for the input of numeric values. Allowing for
validation of numbers.
• <input type = "number"/> element
• <input type = "range"/> element
• Both provide a means to input numeric values that eliminate the need for
client-side numeric validation.
 DATE AND TIME CONTROLS

• Entering date and time information is a relatively

common occurrence in web development.
• Dates and times often need validation which from a
user’s perspective can be confusing as to what format
is required.
• Date and time controls eliminates the confusion
making the user’s experience easier.
• These controls allow the user to click on a symbol to
the right of these controls and have a panel drop
down that makes it easy to select an entry.
 DATE AND TIME CONTROLS
• The following are the HTML date and time controls:

• date - creates a general date input control. The format for the
date is yyyy-mm-dd <input type = "date"/>
• time - creates a time input control. The format for the time is
HH:MM:SS <input type = "time"/>
• datetime - creates a control in which the user can enter a date
and time. <input type = "datetime"/>
• datetime-local - creates a control to enter date and time without
entering a specified time zone. <input type = "datetime-local"/>
• month - creates a control to enter a month in a year. The format
is yyyy-mm <input type = "month"/>
• week - creates a control to specify a week in a year.
<input type = "week"/>
 COMMENTS
• It is important to remember that you may create a piece of code, but you
may not always be the individual maintaining that piece of code and
therefore comments are an essential part of coding. A common use for
comments is to describe/explain portions of code. They can also be used
to comment out piece of code temporarily when for testing or debugging
purposes. In HTML we denote a comment with the following characters:

• <! - -(starts a comment)

• - - >(ends a comment)

• Since whitespaces such as tabs, spaces and return characters are

ignored in HTML when a page is rendered, they can be used to format
your HTML code making it easier to read.
 TESTING AND DEBUGGING
• Testing of HTML code is rather easy. The simplest way to test HTML is to use the file
management software associated with your operating system (ex: Finder on a Mac, Explorer
on a PC).

•Find the document you are looking to test and double click on the file name.

• The file will then open in your browser. This will allow you to check the content and
appearance of your page.

• It is also important to test your page(s) in various browsers to ensure the page(s) renders as
expected.

• If an error occurs in the rendering, then you will need to debug your code (find the issues
and fix them).

•Some of the issues you may encounter may be trivial while others may be more significant.

•Finding these errors can be done via your browser’s Web Development Tools.

• You can find how to use the tools by reading my posting under the Week 0 module called
Web Development Tools.