isom mis 3150 data and info mgmt basics of html arijit sengupta
TRANSCRIPT
ISOM
MIS 3150 Data and Info MgmtBasics of HTML
Arijit Sengupta
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; }}
ISOM
To learn more
• W3schools.com is a great resource
• Most examples in this deck are from there!
• Work on building your own homepage
• In these days of Drupal, DreamWeaver and the like, taking control of your pages is important!