html - uOttawa
Download
Report
Transcript html - uOttawa
SEG3210
DHTML Tutorial
DHTML
• DHTML is a combination of technologies
used to create dynamic and interactive Web
sites.
– HTML - For creating text and image links and other
page elements.
– CSS - Style Sheets for further formatting of text and
html, plus other added features such as positioning
and layering content.
– JavaScript - The programming language that allows
you to accesses and dynamically control the
individual properties of both HTML and Style Sheets
Why DHTML
• With DHTML you can create:
– Animation
– Pop-up menus
– Inclusion of Web page content from external
data sources
– Elements that can be dragged and dropped
within the Web page
HTML (Hyper Text Markup
Language)
• An HTML file is a text file containing small
markup tags
• The markup tags tell the Web browser how to
display the page
• An HTML file must have an htm or html file
extension
• An HTML file can be created using a simple
text editor
HTML (cont.)
<html>
<head>
<title>SEG3210-Lab1</title>
</head>
<body>
This is Our First Test.
<I>This text is Italic</I>
gives technical information
about the document, and
specifies its title. Nothing
that appears in the header
section will be displayed by
the browser.
</body>
</html>
• Most tags have opening and closing tags:
<html> </html>, <head> </head>
• Only some don’t have it: <br>, <hr>, <img>
HTML
HTML
• Most of html tags have the stander
attributes
– Not valid in base, head, html, meta, param, script, style,
and title elements.
Attribute
Value
Description
Class
Class_rule or style_rule
The class of the element
Id
Id_name
Unique Id
Style
Style_definition
An inline style
Title
Tool tip
Tooltip text
•Some tags have attribute such as:
–Attributes always come in name/value pairs like this: name="value".
<body bgcolor = “green">
HTML
• Special treatment for some characters
 , ".
• Click here to see most of HTML Tags
and their attributes
HTML
<html>
<head>
<title>SEG3120 Lab1</title>
</head>
<body bgcolor =Red>
<p align =center> <B> User Interface Design </B></p>
<hr>
<p>[1] Course Notes<br>
<a href="http://www.site.uottawa.ca/%7Eelsaddik/abedweb/teaching/seg3120.html">
SEG3210</a>
</p>
</body>
</html>
HTML
Try it
<body>
<p>Student Marks<br> </p>
<table width="100%" border="2">
<tr bgcolor="green“ align =center >
<td>Student Number</td>
<td>Student First Name </td>
<td>Mark</td>
</tr>
<tr>
<td>10</td>
<td>Adem</td>
<td>A+</td>
</tr>
<tr>
<td>20</td>
<td>Jack</td>
<td>C+</td>
</tr>
</table>
</body>
HTML
CSS
•
•
•
CSS stands for Cascading Style
Sheets
Styles define how to display HTML
elements
Styles are normally stored in Style
Sheets
CSS
•
•
•
•
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
Why?
–
–
–
–
Modularity simplicity,
usability,
reusability,
etc…
CSS
•
Syntax
– selector {property: value}
• The selector is normally the HTML element/tag
• the property is the attribute you wish to change,
– each property can take a value.
•
Three Method to specify
1. Tag Modfier
– body {color: black}
– p { text-align: center; color: black;
font-family: arial }
CSS
•
Three Method to specify
2. Class selector
• With the class selector you can define different
styles for the same type of HTML element
– p.right {text-align: right}
– p.center {text-align: center}
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
CSS
3. The id Selector
• With the id selector you can define the same
style for different HTML elements
#green {color: green}
<h1 id="green">Hello </h1>
<p id="green">Some text</p>
CSS (cont.)
• How to Insert a Style Sheet
– Internal style
• An internal style sheet should be used when a
single document has a unique style.
• You define internal styles in the head section by
using the <style>
– Inline Styles:
• Many of the Advantages are lost
CSS Example
<Html>
<head>
Tag Modifier
<style type="text/css">
hr {color: green}
p {margin-left: 20px}
body {background-color:yellow}
</style>
Inline
</head>
<body>
<h1 style ="color =blue; text-align=center"> SEG3210 </h1>
<hr>
<p>DHTML tutorial</p>
</body>
</Html>
CSS Example
CSS (cont.)
• How to Insert a Style Sheet
– External Style Sheet ideal when the style is
applied to many pages
.css text
file
<head>
<link rel="stylesheet" type="text/css“ href="mystyle.css" />
</head>
CSS example
CSS
• Click for more details:
CSS Tutorial.
JavaScript Introduction
• JavaScript was designed to add interactivity to
HTML pages
• JavaScript is
– a scripting language (a programming language)
• JavaScript embedded in a web browser
connects through interfaces called Document
Object Model (DOM) to applications, especially
to the server side (web servers) and the client
side (web browsers) of web applications .
– This allows interactivity and dynamicity.
JavaScript Introduction
• A JavaScript is usually embedded directly into
HTML pages
• JavaScript is an interpreted language
– scripts execute without preliminary compilation
How to Put a JavaScript Into an
HTML Page
• Scripts in the body section:
– Scripts to be executed when the
page loads go in the body
section..
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Java Script
• Scripts in the head section:
– Scripts to be executed when they are called,
or when an event is triggered, go in the head
section.
<html>
<head>
<script type="text/javascript">
……..
</script>
</head>
</html>
Java Script
• External JavaScript
– Save the external JavaScript file with a .js file
extension
<script src="xxx.js"> </script>
• Deals with web elements using Java command,
–
–
–
–
If statement
Variables
Loops
…….
JavaScript Examples
<Html>
<body>
<script type="text/javascript">
var d=new Date()
var timeh=d.getHours()
var timem=d.getMinutes()
document.bgColor=“red”
document.write("the time is: ")
document.write(timeh)
document.write(":")
document.write(timem)
if (timeh>=12)
document.write(" PM")
else
document.write(" AM")
</script>
</body>
JavaScript – function
<html>
<head>
<script type="text/javascript">
function message()
{
alert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message"
onclick="message()" />
</body>
</html>
Java Script and DOM
<html>
<body>
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>
<p><b>Note:</b> It is the script that changes the style of the element!</p>
</body>
</html>
More About DOM
http://www.w3schools.com/htmldom/default.asp
Example Try it
<html>
<head>
<script type="text/javascript">
function hide()
{
document.getElementById('txt1').style.visibility ='hidden'
}
function show()
{
document.getElementById('txt1').style.visibility = 'visible'
}
function format()
{
document.getElementById('txt1').style.color = 'red'
document.getElementById('txt1').style.fontSize = '20'
document.getElementById('txt1').style.textAlign ="center"
document.bgColor='green'
}
Example (Cont)
function reset()
{
document.getElementById('txt1').style.color = 'black'
document.getElementById('txt1').style.fontSize = '14'
document.getElementById('txt1').style.visibility = 'visible'
document.bgColor='white'
document.getElementById('txt1').style.textAlign ="left"
}
</script
</head>
<body>
<input type="text" id= "txt1">
<input type="button" value="Hide" onclick="hide()">
<input type="button" value="show" onclick="show()">
<input type="button" value="format" onclick="format()">
<input type="button" value="Reset" onclick="reset()">
</body>
</html>
Next: go through all the
examples and try them