CSE 3345 - Graphical User Interfaces Jason Murphy [email protected] Lecture 1 – HTML Warmup.
-
Upload
april-bunney -
Category
Documents
-
view
227 -
download
1
Transcript of CSE 3345 - Graphical User Interfaces Jason Murphy [email protected] Lecture 1 – HTML Warmup.
CSE 3345 2
HTML Warm-up
e X tensible
M arkup
L anguage
H yper
T ext
M arkup
L anguage
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 class 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 class 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