CSE 3345 - Graphical User Interfaces

Chris Raleycraley@smu.edu

Lecture 1 – HTML Warmup

CSE 3345 2

HTML Warm-up

H – hyper

T – text

M – markup

L – language

CSE 3345 3

Markup Language

• Used to give structure to a document• Composed of tags to ‘mark’ the data inside a

document• Tags encapsulate and classify data• Tags provide semantic markup or meaning to

the data

CSE 3345 4

Markup Language Example

<class> <teacher>Professor X</teacher> <students> <student age=“17”>Jean Grey</student> <student age=“16”>Scott Summers</student> </students></class>

CSE 3345 5

Tags

<class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students></class>

CSE 3345 6

Data

<class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students></class>

CSE 3345 7

Tags

Three types of tagsOpening: <tag>Closing: </tag>Solo: <tag/>

<tag>Data</tag> <tag data=“”/>Opening Closing Solo

CSE 3345 8

Elements

• Tags are also called elements• Can contain attributes, child elements, and data• An opening element must have a closing element• An element’s opening and closing tag must have

the same name (case counts).

Good Bad<element></element> <element></tron>

CSE 3345 9

Elements

All information that belongs to an element must be contained between its opening and closing tags.

CSE 3345 10

A Bad example

<friend><name>Sally</name><age>21</age>

</friend><gender>F</gender>

CSE 3345 11

A Good example

<friend><name>Sally</name><age>21</age><gender>F</gender>

</friend>

CSE 3345 12

Attributes

• Specify additional information about an element

• Appears within the opening or solo tag

<friend age=“21”>Sally</friend>

<friend age=“21” name=“Sally”/>

CSE 3345 13

Root Element

<class> <teacher>Professor X</teacher> <students> <student age=“17”>Jean Grey</student> <student age=“16”>Scott Summers</student> </students></class>

CSE 3345 14

Root Element

• There can only be ONE• Must be the first element• Describes what the document is composed of

CSE 3345 15

Dissecting the Document<dinner begins=“5:00pm” ends=“9:30pm” > <entrées> <entrée price=“4.95”>Hamburger</entrée> <entrée price=“1.95”>French Fries</entrée> </entrées> <drinks> <drink price=“1.95”>Milk Shake</drink> <drink price=“0.00”>Water</drink> </drinks> <desserts> <dessert price=“0.75”>Apple Pie</dessert> </desserts></dinner>

1. Find the root, elements, and attributes.

2. How many unique elements are there?

3. What is the data?4. What story does the

document tell us?

CSE 3345 16

XML

<?xml version="1.0" encoding="ISO-8859-15"?><!DOCTYPE note SYSTEM "Note.dtd"><class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> </students></class>

CSE 3345 17

XML - Prolog

<?xml version="1.0" encoding="ISO-8859-15"?>

• Specifies version of document• Encoding type• DTD • Is optional (not needed)

CSE 3345 18

XML - DTD

<!DOCTYPE note SYSTEM "Note.dtd">

DTD – Document Type Definition• Specifies the rules the document conforms to

CSE 3345 19

The XML Tree

CSE 3345 20

XML Trees

• A computer represents an xml document in memory as a tree.

CSE 3345 21

Family Tree

Dad Mom

MeBrother

CSE 3345

Sister

CSE 3345 22

XML Tree<class> <teacher>Professor X</teacher> <students> <student age=“17”>Jean Grey</student> <student age=“16”>Scott Summers</student> </students></class>

Class

Teacher: Professor X Students

Student: Jean Grey

Student: Scott Summers

CSE 3345 23

XML Family Tree

<dinner begins=“5:00pm” ends=“9:30pm” > <entrées> <entrée price=“4.95”>Hamburger</entrée> <entrée price=“1.95”>French Fries</entrée> </entrées> <drinks> <drink price=“1.95”>Milk Shake</drink> <drink price=“0.00”>Water</drink> </drinks> <desserts> <dessert price=“0.75”>Apple Pie</dessert> </desserts></dinner>

CSE 3345 24

XML Family Tree

dinner

entrees drinks desserts

entréeHamburger

drinkMilk Shake

drinkWater

dessertApple Pie

entréeFrench Fries

element data

Legend

CSE 3345 25

Family Tree Terms

• Ancestor – Anyone that comes before you• Descendant – Anyone that comes after you• Parent – An element’s direct ancestor• Child – An element contained one level below

another element• Sibling – When elements share the same

parent

CSE 3345 26

Dissect the Family Tree

dinner

entrees drinks desserts

entréeHamburger

drinkMilk Shake

drinkWater

dessertApple Pie

entréeFrench Fries

element data

Legend