ISOM
Structure of this semester
Database Fundamentals
Relational Model
Normalization
ConceptualModeling Query
Languages
AdvancedSQL
XMLDatabases
Java DB Applications –JDBC/JSP
DataMining
0. Intro 1. Design 3. Applications 4. AdvancedTopics
Newbie Users ProfessionalsDesigners
MIS3150
2. Querying
Developers
ISOM
Today’s Buzzwords
• HTML (HyperText Markup Language)
• SEO (Search Engine Optimization)
• HTML Forms
• CSS (Cascading Stylesheets)
• Javascript
ISOM
HTML 101
• HTML is a “markup language” – not a programming language
• Like good old WordPerfect days – everything starts with a “start tag”, ends with an “end tag”
• Started back in early 1990s, we are now at generation 5 of HTML (HTML5)
• Although mostly referred to as HTML, the current language is actually XHTML (X stands for extensible – from XML)
ISOM
Syntax
• Basic syntax: Start tag: <h1> <ul> <li> <ol> End tag: </h1> </ul> </li> </ol> Some tags may not have a separate start and end – one tag
acts as both• E.g., <hr/> <br/>
Attribute: <img src=“icon.png” /> Comments: <!– This is a comment --> Entity reference & Declarations: <!DOCTYPE HTML … >
• Must be well-formed! Cannot end a tag unless all start-tags inside it have ended. Invalid: <b>bold <i>bold and italic</b> italic only</i> Valid: <b>bold <i>bold and italic</i></b> <i>italic
only</i>
ISOM
HTML 101
• All documents begin with a fairly standard “prolog”Document TypeHeader – document meta-data
• Meta tags – containing keywords, subject, etc. mainly for SEO purposes
• Title – providing a title for browsers to use
Body – all the displayed stuff
• Most of this can be generated by editors like DreamWeaver
ISOM
“Blank” HTML document
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body></html>
ISOM
Basic tags
• Headings: <h1>..</h1> through <h6>… </h6>
• Paragraphs: <p> </p>• Lists:
Ordered lists (numbered) <ol> ….</ol>Unordered lists (bulleted) <ul> … </ul>List items <li> …. </li>
• Horizontal rules <hr/>• Forced Line breaks <br/>• Pre-formatted area: <pre> … </pre>
ISOM
Pointing to external resources
• Images <img src=“…” width=“…” height=“…” alt=“…” />
• Links: <a href=“http://…” target=“..” />Use target as _blank to create a new windowUse a named target if you want links to go to a
specific window/frame
• Anchors <a name=“somename”/>• Link to anchors: <a
href=“#somename”>Jump there</a>
ISOM
Simple formatting
• Emphasis and Strength <em>…</em> and <strong> … </strong> Almost same as <i>…</i> and <b>…</b> <em> and <strong> are better so some browsers can
provide emphasis without italics and strength without bold
• Larger and smaller fonts: <large>…</large> <small>…</small> Not a good idea to specify font sizes
• Alignment Almost all tags can be aligned – <p align=“center”>….</p> (or left, or right)
• Colors Use CSS. <p style=“color:red”>This is red</p>
ISOM
Tables
• Most basic table structure:• Tables have rows – rows have data<table>
<tr><th>Header1</th><th>Header 2</th></tr>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</table>
• border attribute can specify table borders of different widths
• Individual cells may be aligned using the align attribute More control using the halign (horizontal) and valign
(Vertical – top, middle, bottom) attributes
ISOM
Web Forms
• Used for interacting with backend applications
• Allows web-pages to interact with users by accepting inputs from users
• Can be static or dynamically generated via languages like JSP, PHP, ASP .NET, Ruby/Rails, etc.
ISOM
Forms 101
• Enclosed within <form> …. </form>• Form attributes:
method: GET or POST action: Where the form data is sent enctype: Used only if you upload attachments or different
encodings
• Basic form widget: <input name=“somename” …. /> Textbox: <input type=“text” size=“20” maxlength=“30” …/> Checkbox: <input type=“checkbox”… /> Radio button: <input type=“radio” …. /> Groups of checkboxes/radio buttons must have same name Submit button: <input type=“submit” … /> Reset button: <input type=“reset” …. /> Normal button: <input type=“button” … /> (used with Javascript
mainly)
ISOM
Other Form Widgets
• Drop-down menus/combo boxes:
<select name=“state”>
<option>IN</option>
<option>OH</option>
<option>IL</option>
</select>• Make it multi-select using
<select name=“…” multiple=“multiple”>… </select>• Multi-line Text areas:
<textarea name=“…”>Content</textarea>
ISOM
Providing values to form elements
• Text boxes using the value attribute <input name=“username” value=“abcd”/>
• Radio buttons and checkboxes using the checked attribute <input type=“radio” name=“voting” value=“yes”
checked=“checked”/> Default value is “ON”
• Combobox selections using selected attribute <select name=“state”><option value=“OH”
selected=“selected”>Ohio</option>… </select> Default value of selections is the content of the option tag if
no value is specified
• TextArea value is its content <textarea>This is what is sent to the backend</textarea>
ISOM
CSS (Cascading Style Sheets)
• The “proper” way of styling your HTML pages
• Three levels of styles:Tag-level using the style= attributePage-level using the style tagSite level using .css style files
• Why cascading? Priority of styles cascadeSame element can have styles cascaded
from various sources
ISOM
Most common CSS styles
• background
• text stylestext-aligntext-sizetext-decorationtext-heighttext-justify
• color
• visibility
ISOM
CSS Syntax
• Rule-based
• Each rule has two partsSelector (tag, id, hierarchy or class)Declaration set (separated by
semicolons)p {color:blue; text-align:center; }
ISOM
ID and class selectors
• ID selector applies to a specific ID, typically applied to a specific element of a page#para1 {text-align:center; color:red }<p id=“para1”>Stuff</p>
• Class selector applies to a class – can be applied to any tag in a page .center {text-align: center; }<p class=“center”>stuff</p>
• May declare classes for specific tage only:p.center {text-align: center; }
ISOM
Inserting CSS in a page
• External stylesheets (defined inside the head tag as a link tag):
<head>
<link rel=“stylesheet” type=“text/css” href=“mystylefile.css” />
</head>
• Internal stylesheets (defined inside the head tag as a style tag)
<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
• Inline stylesheets (defined as the style attribute of any tag)<p style=“color:red; text-align: center”>Stuff</p>
ISOM
“Cascading” stylesheets
• Multiple stylesheets can cascade into the same tag!
<p id=“para1” class=“center” style=“color:red”>Stuff!</p>
• Cascading order (lowest to highest priority)1. Browser default
2. External stylesheet
3. Internal stylesheet
4. Inline stylesheet
• For the same tag, inline > id > class
ISOM
Javascript 101
• A subset of Java – using more or less the same syntax, but loosely typed
• Designed to run completely inside the browser (browser must be capable of parsing and applying the script at runtime dynamically)
• Used for:Validating User inputProviding interaction with userCreating dynamic user experience
ISOM
Using Javascript in a page
• Similar to CSS, JS can be inside a page or linked to an external script
• Unlike CSS, JS can be defined in the <head> or inside the <body>
• Typically in one place to avoid confusion – either in <head> or at the bottom of page in the <body> tag
• External script:<head>
<script type=“text/javascript” src=“myscript.js”/>
</head>
ISOM
The Javascript programming language
• Similar syntax like Java• function –based, although objects and methods are
possible• Case sensitive just like Java• Loosely typed – everything is a var – no specific
datatypes• The same variable can take different types of
values at different times!• Arrays and Objects allowed• Same if/else, switch/case, for and while structures
as Java
ISOM
A simple example
<!DOCTYPE html …. ><html><head><script>function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body></html>
ISOM
Some basics
• Changing text of elementsdocument.getElementById("myH1").innerHTML="Welcome to
my Homepage";
• Changing stylesdocument.getElementById("myH1").style.visibility=‘hid
den’;
• Checking form valuesfunction validateForm()
{var x=document.forms["myForm"]["fname"].value;if (x==null || x=="") { alert("First name must be filled out"); return false; }}