HTML | DOM - PowerPoint PPT Presentation

Loading...

PPT – HTML | DOM PowerPoint presentation | free to download - id: 6b58fb-Yjc5N



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

HTML | DOM

Description:

Title: Slide 1 Author: Bill Gibbs Last modified by: Bill Created Date: 3/29/2004 3:52:19 AM Document presentation format: On-screen Show (4:3) Company – PowerPoint PPT presentation

Number of Views:2
Avg rating:3.0/5.0
Date added: 9 September 2019
Slides: 114
Provided by: BillG77
Learn more at: http://www.jma.duq.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: HTML | DOM


1
HTML DOM
2
Objectives
  • HTML Hypertext Markup Language
  • Sematic markup
  • Common tags/elements
  • Document Object Model (DOM)
  • Work on page HTML CSS Responsive

3
HTML Background
4
What is Html/Xhtml?
  • HTML 5 is still a draft
  • HTML (4.01) is subsumed as XHTML 1.0
  • Extensible HyperText Markup Language (XHTML)
    extends HTML - reformulated in XML

5
What is Html/Xhtml?
  • XHTML was a cleaner and clearer standard compared
    to early versions of HTML.
  • HTML 5 offers new elements for better semantics,
    structure, drawing, media content, and handling
    of forms.
  • Nav Article Section Aside Footer

6
HTML 5
  • Emphasizes semantics.
  • Removes some presentational elements.
  • Introduces new elements such as header, footer,
    article, sections, nav.
  • Use elements that best describe your content.
  • Work from the content outward.

7
HTML Elements
  • HTML markup divides a document into elements
    (i.e., paragraphs).
  • ltpgtThis is paragraph one.lt/pgt
  • ltpgtThis is paragraph one.lt/pgt

Element Content
Element
8
HTML
  • Each individual markup code is referred to as an
    element or tag.
  • Each type of element has a name.
  • A, P, DIV, ARTICLE, IMG, ETC.
  • Each element is introduced by a start tag and
    terminated by an end tag

9
HTML Tags
  • Hypertext MarkUp Language - HTML

Tags generally come in pairs.
Beginning Tag
lthtmlgt lt/htmlgt
Ending Tag
10
HTML Elements
  • ltheadergt
  • lthgroupgt
  • lth1gtInterface designlt/h1gt
  • ltpgtTech spotlight on trendslt/pgt
  • lth2gtInterface patternslt/h2gt
  • lt/hgroupgt
  • lt/headergt

Beginning Tag
Ending Tag
11
HTML Tags
  • HTML elements that have no content - empty
    elements.
  • Empty elements have start and end tags run
    together ltimg /gt, lthr /gt,
  • Empty elements such as
  • lthr /gt Horizontal rule
  • ltbr /gt Line break
  • ltimg /gt Image
  • ltinput /gt Form element

12
HTML Attributes
  • lta href/ titlegoogle linkgtGoogle.comlt/agt
  • ltimg srcmyimage.jpg altCompany XYZ logo /gt
  • ltarticle idnewsGlobal classtypeSizegtlt/articl
    egt

13
Document Structure
  • HTML

14
HTML Getting started - Robbins
  • Robbins suggest beginning with the following
    steps
  • Step 1 Start with Content
  • Examine content so you can determine appropriate
    markup
  • Step 2 Give the Document Structure
  • Step 3 Identify Text Elements
  • semantic markup
  • E.g., h1-6, p, em, blockquote, q

15
Step 2 Give the Document Structure
16
Step 2 Give the Document Structure
lt!doctype htmlgt lthtmlgt ltheadgt ltmeta
charsetutf-8gt lttitlegt Registration for W3
App Conferencelt/titlegt lt/headgt ltbodygt
ltpgtHello, world!lt/pgt lt/bodygt lt/htmlgt
  • A DTD defines the legal structure, elements,
    and attributes that are available for use in a
    document that complies to the DTD."
  • Definition of what is legal syntax in HTML and
    what isn't.

17
Document Structure DocType
  • If you do not declare a specific DocType
    correctly a visitors browser must "guess"
  • usually by applying the loosest possible DocType
    or a "quirks" mode DocType of its own) resulting
    in slower rendering.
  • result in display variation between browsers.

18
Step 2 Give the Document Structure
lt!doctype htmlgt lthtmlgt ltheadgt ltmeta
charsetutf-8gt lttitlegtRegistration for W3 App
Conference!lt/titlegt lt/headgt ltbodygt ltsectiongt ltarti
clegt ltnavgtlt/navgt ltpgtHello,
world!lt/pgt lt/articlegt lt/sectiongt lt/bodygt lt/htmlgt
Basic structure even in complex docs.
HEAD
HTML
BODY
19
Step 3 Identify Text Elements
  • semantic markup
  • h1-6
  • p
  • br
  • em
  • blockquote
  • q
  • cite
  • code

20
Inline and Block level elements
21
Block boxes and inline boxes
  • Block boxes and inline boxesthat correspond to
    the two types of tagsblock-level and inline tags.

22
Block boxes and inline boxes
  • A block-level tag creates a break before and
    after the element.
  • ltpgt, lthgt,ltdivgt, ltsectiongt, ltarticlegt, etc.
  • Inline tags dont create a break before or after
    element.
  • ltspangt, ltemgt, ltstronggt, ltcitegt, ltabbrgt,ltkbdgt, ltagt

See page 85 in Robbins text for list of inline
elements
23
Block boxes and inline boxes
  • Inline tags dont create a break before or after
    element.
  • ltcitegt
  • ltcitegtMapping Temporal Relations of Discussions
    Software is a powerful tool(Miller, 2010, p.
    45)lt/citegt, it can be used on

24
Structural Block-Level Elements
  • p paragraphs
  • h1, h2,,h6 level 1, 2,,6 headers
  • blockquote long quotations (not indented
    paragraphs)
  • section
  • aside
  • article
  • div arbitrary division
  • ol, ul, dl - list
  • lttablegt for tabular data

25
Structural Paragraph Tag
  • ltpgtlt/pgt
  • Gives the appearance of paragraphs

26
ltpgt In the summer of 2008, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the ltemgttemporal
aspectslt/emgt of conversations. From the diagrams,
one can observe the general time and date of
discussion activity and individual patterns of
interactivity. lt/pgt ltpgt I am seeking funds to
assist me in further developing an intelligent
online tool that provides semantic as well as
temporal analyses of online educational
conversations. lt/pgt
27
In the summer of 2008, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the temporal
aspects of conversations. From the diagrams, one
can observe the general time and date of
discussion activity and individual patterns of
interactivity. I am seeking funds to assist
me in further developing an intelligent online
tool that provides semantic as well as temporal
analyses of online educational conversations.
28
Structural Heading Levels
  • Groups information into major points
  • lth1gtlt/h1gt Biggest heading level
  • lth6gtlt/h6gt Smallest heading level

29
Structural Heading Levels
lth1gtHeading Level 1lt/h1gt lth2gtHeading Level
2lt/h2gt lth3gtHeading Level 3lt/h3gt lth4gtHeading Level
4lt/h4gt lth5gtHeading Level 5lt/h5gt lth6gtHeading Level
6lt/h6gt
30
lth1gt Introductionlt/h1gt
In the summer of 2009, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the temporal
aspects of conversations. From the diagrams, one
can observe the general time and date of
discussion activity and individual patterns of
interactivity. I am seeking funds to assist me
in further developing an intelligent online tool
that provides semantic as well as temporal
analyses of online educational conversations.
lth2gt Educational Conversationslt/h2gt
31
Structural HTML Lists
  • ul unordered list
  • ol ordered list
  • li list element
  • dl definition list
  • Use pairs of dt (term) and dd (definition)
    elements within dl

32
Structural Unordered Lists
  • Apples
  • Oranges
  • Pears
  • ltulgt
  • ltligtAppleslt/ligt
  • ltligtOrangeslt/ligt
  • ltligtPearslt/ligt
  • lt/ulgt

33
Structural Ordered Lists
  1. Step 1
  2. Step 2
  3. Step 3
  • ltolgt
  • ltligtStep 1lt/ligt
  • ltligtStep 2lt/ligt
  • ltligtStep 3lt/ligt
  • lt/olgt

34
Structural HTML Tables
  • Table elements contain tr (row) elements
    containing td (data, i.e. cell) elements
  • Tables are used for tabular data
  • Tables commonly used for page layout not
    recommended

lttablegt lttrgtlttdgtRow 1Col 1lt/tdgtlt/trgt lttrgtlttdgtRow
2 Col 1lt/tdgtlt/trgt lt/tablegt
35
Tables commonly used for page layout not
recommended
Proper use of table
36
Tables commonly used for page layout not
recommended
Should not uses tables for layout.
37
lttablegt lttrgtlttdgtRow 1Col 1lt/tdgtlt/trgt
lttrgtlttdgtRow 2 Col 1lt/tdgtlt/trgt lt/tablegt
38
Row 1 Column 1
Row 2 Column 1
39
(No Transcript)
40
Commonly used elements
41
Tags in Every HTML Document
  • lt!doctype htmlgt
  • lthtmlgtlt/ html gt
  • ltheadgtlt/headgt
  • lttitlegt.lt/titlegt
  • ltbodygtlt/bodygt

42
ltHTMLgt Tag
  • Reminds the browser that the document is a HTML
    document
  • lthtmlgt.lt/htmlgt

43
ltHEADgt Tag
  • Gives the browser information about the document
  • Comes after the ltHTMLgt tag
  • ltheadgt.lt/headgt

44
ltTITLEgt Tag
  • Places information in the title bar of the
    browsers window, used by search engines
    optimization (SEO).
  • lttitlegt.lt/titlegt

45
Comment Tag
  • Text that shows up in the HTML source code, but
    does not show up in the browser window
  • lt! - - Comments go here - - gt

46
ltBODYgt Tag
  • All the information between the body tags appears
    in the browsers window
  • ltbodygtlt/bodygt

47
Common HTML Tags/elements
lt!doctype htmlgt lthtmlgtlt/ html
gt ltheadgtlt/headgt lttitlegt.lt/titlegt ltbodygtlt/bodygt
ltimggt ltolgtltligtlt/ligtlt/olgt ltulgtltligtlt/ligtlt/ulgt ltbloc
kquotegtlt/blockquotegt lttablegtlt/tablegt ltdivgt ltformgt
lt/formgt ltinputgt lth1-6gtlt/h1-6gt ltpgtlt/pgt ltemgtlt/emgt lt
br /gt
New in HTML 5 ltarticlegtlt/articlegt ltasidegtlt/asidegt
ltsectiongtlt/sectiongt ltheadergtlt/headergt ltfootergtlt/fo
otergt ltfiguregtlt/figuregt ltfigcaptiongtlt/figcaptiongt
48
ltsectiongt
ltsectiongt
ltarticlegt
lt/sectiongt
lth1gt
ltsectiongt
ltaddressgt
lttime datetime""gt
ltimggt
lt/articlegt
lt/sectiongt
lt/sectiongt
49
ltarticlegt
lth3gt
ltolgt ltligtlt/ligt lt/olgt
ltasidegt
lth3gt
ltpgt
ltolgt ltligtlt/ligt lt/olgt
lth3gt
lt/articlegt
lt/asidegt
50
Blog site
51
ltnavgt

lt/navgt
ltsectiongt ltheadergtlth2gtBy the Seagtlt/h2gtlt/headergt
lt/sectiongt
ltasidegt ltsectiongt ltheadergt
lth3gtCategorieslt/h3gt lt/headergt lt/sectiongt
ltsectiongt ltheadergt lth3gtArchiveslt/h3gt
lt/headergt lt/sectiongt lt/asidegt
ltsectiongt ltarticlegt ltheadergtlth2gtThis is the
titlelt/h2gtlt/headergt lt/articlegt lt/sectio
ngt
52
HTML Tree relationship of one element to another.
53
HTML Tree
  • lthtmlgt
  • ltheadgt
  • lttitlegtMy Web Page Descriptionlt/titlegt
  • lt/headgt
  • ltbodygt
  • lth1gtMain Topiclt/h1gt
  • ltpgt
  • A web page about the days of the week,
    specificallyltstronggtTuesday.lt/stronggt
  • lt/pgt
  • lt/bodygt
  • lt/htmlgt

54
HTML Tree DOM
55
HTML Tree DOM
Ancestor to all tags
Ancestor to h1, p, strong
Descendent of lthtmlgt
Descendent of lthtmlgt and ltheadgt
Siblings
Child of ltpgt
56
HTML Tree
  • Document Object Model DOM
  • Markup gives document structure.
  • Underlying document hierarchy is important.
  • Elements follow or nested within one another -
    creates relationships between elements.
  • Gives browsers cues on how to handle content.
  • Foundation on which we add styles and behaviors
    with JavaScript.

57
(No Transcript)
58
Visual vs. Structural
  • Markup

59
Visual vs. Structural
  • HTML - evolved from original version with tags
    suitable for marking up scientific papers.
  • Recent versions emphasize structural markup, but
    there are visual markup features left over from
    earlier versions.

60
Block boxes and inline boxes
  • Block boxes and inline boxesthat correspond to
    the two types of tagsblock-level and inline tags.

61
Block boxes and inline boxes
  • A block-level tag creates a break before and
    after the element.
  • ltpgt, lthgt,ltdivgt, ltsectiongt, ltarticlegt, etc.
  • Inline tags dont create a break before or after
    element.
  • ltspangt, ltemgt, ltstronggt, ltcitegt, ltabbrgt,ltkbdgt, ltagt

See page 85 in Robbins text for list of inline
elements
62
Block boxes and inline boxes
  • Inline tags dont create a break before or after
    element.
  • ltcitegt
  • ltcitegtMapping Temporal Relations of Discussions
    Software is a powerful tool(Miller, 2010, p.
    45)lt/citegt, it can be used on

63
Structural Block-Level Elements
  • p paragraphs
  • h1, h2,,h6 level 1, 2,,6 headers
  • blockquote long quotations (not indented
    paragraphs)
  • Section
  • Aside
  • article
  • div arbitrary division
  • OL, UL, DL - list
  • lttablegt for tabular data

64
Structural Paragraph Tag
  • ltpgtlt/pgt
  • Gives the appearance of paragraphs

65
ltpgt In the summer of 2008, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the ltemgttemporal
aspectslt/emgt of conversations. From the diagrams,
one can observe the general time and date of
discussion activity and individual patterns of
interactivity. lt/pgt ltpgt I am seeking funds to
assist me in further developing an intelligent
online tool that provides semantic as well as
temporal analyses of online educational
conversations. lt/pgt
66
In the summer of 2008, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the temporal
aspects of conversations. From the diagrams, one
can observe the general time and date of
discussion activity and individual patterns of
interactivity. I am seeking funds to assist
me in further developing an intelligent online
tool that provides semantic as well as temporal
analyses of online educational conversations.
67
Structural Heading Levels
  • Groups information into major points
  • lth1gtlt/h1gt Biggest heading level
  • lth6gtlt/h6gt Smallest heading level

68
Structural Heading Levels
lth1gtHeading Level 1lt/h1gt lth2gtHeading Level
2lt/h2gt lth3gtHeading Level 3lt/h3gt lth4gtHeading Level
4lt/h4gt lth5gtHeading Level 5lt/h5gt lth6gtHeading Level
6lt/h6gt
69
lth1gt Introductionlt/h1gt
In the summer of 2009, I developed Mapping
Temporal Relations of Discussions Software
(MTRDS) as a tool to analyze the temporal aspects
of online course discussions. This Web-based
prototype imports discussion files from a course
management system and diagrams the temporal
aspects of conversations. From the diagrams, one
can observe the general time and date of
discussion activity and individual patterns of
interactivity. I am seeking funds to assist me
in further developing an intelligent online tool
that provides semantic as well as temporal
analyses of online educational conversations.
lth2gt Educational Conversationslt/h2gt
70
Structural HTML Lists
  • ul unordered list
  • ol ordered list
  • li list element
  • dl definition list
  • Use pairs of dt (term) and dd (definition)
    elements within dl

71
Structural Unordered Lists
  • ltulgt
  • ltligtAppleslt/ligt
  • ltligtOrangeslt/ligt
  • ltligtPearslt/ligt
  • lt/ulgt
  • Apples
  • Oranges
  • Pears

72
Structural Ordered Lists
  • ltolgt
  • ltligtAppleslt/ligt
  • ltligtOrangeslt/ligt
  • ltligtPearslt/ligt
  • lt/lgt
  1. Apples
  2. Oranges
  3. Pears

73
Structural HTML Tables
  • Table elements contain tr (row) elements
    containing td (data, i.e. cell) elements
  • Tables are very commonly used for page layout

lttablegt lttrgtlttdgtRow 1Col 1lt/tdgtlt/trgt lttrgtlttdgtRow
2 Col 1lt/tdgtlt/trgt lt/tablegt
74
lttablegt lttrgtlttdgtRow 1Col 1lt/tdgtlt/trgt
lttrgtlttdgtRow 2 Col 1lt/tdgtlt/trgt lt/tablegt
75
Row 1 Column 1
Row 2 Column 1
76
Making Links Color
77
Linking to Another Document
  • Null links
  • lta href gtThis is a NULL linklt/agt

78
Linking to Another Document
  • lta href document.htmgtText that acts as the
    linklt/agt
  • This anchor links to a document in the same
    folder as the current web page.

79
Linking to a Specific Section of Another Document
  • lta hrefdocument.htmSectionTitlegtText that
    acts as the linklt/agt
  • lta nameSectionTitlegt lt/agt
  • This anchor links to a specific section of the
    document.htm page, which is in the same folder
    and the current web page.

80
Linking to a Specific Section of Another Document
  • lta hrefbooks/document.htmgtRead Bookslt/agt
  • This anchor links to the document.htm page, which
    is in a folder titled books.

81
Linking to a Specific Section of Another Document
  • lta hrefhttp//www.cnn.comgtRead Bookslt/agt
  • This anchor links to an external web site.

82
Linking to Another Web Site
  • lta hrefhttp//www.yahoo.comgtYahoolt/agt

83
Color Equivalent
  • RED FF0000
  • GREEN 00FF00
  • BLUE 0000FF
  • MAGENTA FF00FF
  • CYAN 00FFFF
  • YELLOW FFFF00
  • BLACK 000000
  • WHITE FFFFFF
  • baker's chocolate (5C3317)
  • semi-sweet chocolate (6B4226)

84
Color
  • Colors are defined using a hexadecimal notation
    for the combination of Red, Green, and Blue color
    values (RGB).
  • The lowest value that can be given to one light
    source is 0 (hex 00). The highest value is 255
    (hex FF)

85
Color
  • Hexadecimal value FF0000
  • FF 00 00

Red
Blue
Green
86
(No Transcript)
87
Cascading Style Sheets
  • CSS

88
Cascading Style Sheets
  • What are style sheets?
  • HTML was not meant to specify an exact appearance
    for your Web pages.
  • CSS (Cascading Style Sheets) allows you to
    specify more information about the appearance of
    elements on a Web page.

89
Cascading Style Sheets
  • A style sheet is a set of one or more rules that
    apply to an HTML document.
  • H1 color 000000

90
Cascading Style Sheets
  • Why use styles?

91
Cascading Style Sheets
  • Update the look of a Web site by changing a
    single document.
  • Keep content separate from styling.

92
External Styles
ltlink rel"styleSheet" type"text/css"
href"styles.css"gt
page2.htm
page3.htm
page1.htm
index.htm
Style.css
page4.htm
page7.htm
page5.htm
page6.htm
93
External Styles
ltlink rel"styleSheet" type"text/css"
href"styles.css"gt
  • Make changes from a single document
  • Changes multiple documents

page2.htm
page3.htm
page1.htm
index.htm
Style.css
page4.htm
page7.htm
page5.htm
page6.htm
94
Rules, Selectors, Declarations
  • CSS

95
The Rule
  • h1 color c0c0c0

Rule
96
The Rule
  • A rule consists of two parts
  • Selector - the part before the left curly brace
  • Declaration - the part within the curly braces
  • h1 color c0c0c0

97
The Rule
Rule
  • h1 color c0c0c0

Selector
Declaration
98
The Rule
  • body
  • font-family Verdana
  • background-color ffffff

Selector
Declaration
99
The Declaration
  • Has two parts separated by a colon
  • Property - that part before the colon
  • Value - that part after the colon
  • h1 color c0c0c0

100
The Declaration
  • h1 color c0c0c0

Value
Property
101
The Declaration
  • Property is a quality or characteristic that
    something possesses (e.g., color, size, style).

102
The Declaration
  • Curly brackets help distinguish between
    selector, property, and value
  • Colon separates property and values
  • Semicolon separates declarations
  • h1 color c0c0c0

103
Classes
  • Classes (applies to more than one type of element
    several different styles for the same element.
  • .mytext font-family Verdana font-size 10pt
  • ltp classmytextgtHello Worldlt/pgt

104
CSS Typography
  • Five properties control font characteristics
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

105
font-family
  • Value is a list of font names in decreasing order
    of preference
  • p font-family "The Sans", Verdana, Helvetica,
    sans-serif
  • Names separated by a space should be in

106
font-style font-variant
  • font-style may be normal, italic or oblique (i.e.
    slanted)
  • font-variant may be normal or small-caps

107
font-weight
  • Values normal and bold have expected effect
  • Many font families have more than two weights,
    with no standard names
  • font-weight may be 100, 200,, 900

108
font-size
  • Sizes relative to browser default may be chosen
    from xx-small, x-small, small, medium, large,
    x-large, xx-large
  • Sizes may be a percentage of inherited value, or
    specified in em units of inherited font

109
Leading
  • line-height property specifies leading
  • Use percentage (150), ratio (1.5) or ems (1.5em)
    to specify leading relative to font size

110
font property
  • Combine all five font properties into a single
    declaration for font
  • Can include composite size/leading
  • Order is unspecified, but browsers seem to
    prefer style, variant, weight, size, family
  • p font italic bold 14pt/21pt "The Sans",
    Verdana, Helvetica, sans-serif

111
Colour
  • background-color and color properties control the
    colour of background and text
  • Values specify colours in RGB colour space
  • rgb(r, g, b)
  • rgb(r, g, b) where r, g, b are in range 0255
  • rrggbb where rr, gg, bb are hex values
  • rgb(80,40,80) rgb(204,102,204) CC66CC

112
Alignment
  • text-align property can take values left, right,
    center or justify
  • body text-align left
  • p.display text-align center

113
External Stylesheets
  • Can put a collection of rules in a file and
    refer to it from within an HTML document
  • link element with href attribute points to
    stylesheet, rel"stylesheet", type"text/css
  • ltlink href"styles.css" rel"stylesheet"
    type"text/css" /gt
About PowerShow.com