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

SEG3210-Lab1 This is Our First Test. This text is Italic Most tags have opening and closing tags:, Only some don’t have it:,, HTML (cont.) gives technical information about the document, and specifies its title. Nothing that appears in the header section will be displayed by the browser.

HTML

Most of html tags have the stander attributes –Not valid in base, head, html, meta, param, script, style, and title elements. AttributeValueDescription ClassClass_rule or style_ruleThe class of the element IdId_nameUnique Id StyleStyle_definitionAn inline style TitleTool tipTooltip text Some tags have attribute such as: –Attributes always come in name/value pairs like this: name="value".

HTML Special treatment for some characters &nbsp, &quot. Click here to see most of HTML Tags and their attributesHTML Tags

SEG3120 Lab1 User Interface Design [1] Course Notes SEG3210 HTML

Try it Student Marks Student Number Student First Name Mark 10 Adem A+ 20 Jack C+

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} This paragraph will be right-aligned. This paragraph will be center-aligned.

CSS 3.The id Selector With the id selector you can define the same style for different HTML elements #green {color: green} Hello Some text

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 – Inline Styles: Many of the Advantages are lost

CSS Example hr {color: green} p {margin-left: 20px} body {background-color:yellow} SEG3210 DHTML tutorial Tag Modifier Inline

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

CSS example

CSS Click for more details: CSS Tutorial 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.. document.write("Hello World!")

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. ……..

Java Script External JavaScript –Save the external JavaScript file with a.js file extension Deals with web elements using Java command, –If statement –Variables –Loops –…….

JavaScript Examples 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")

JavaScript – function function message() { alert("Welcome guest!") }

Java Script and DOM My header document.getElementById('header').style.color="red" Note: It is the script that changes the style of the element!

More About DOM

Example Try it 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

Next: go through all the examples and try them