---
rexxpub:
  defaults: rony.yaml
  logo: oorexx
---

<!-- 120_AutoWin_markup_V09.odp (2026-10-15 09:39) -->

<!-- slide # 1 (2026-10-15 09:39) ----------------------------- ODP slide # 1 -->
. slide cover
# Windows-Automatisation 2

. subtitle
**Markup Languages, Document Object Model**

. cover-art
. picture img/120_AutoWin_markup_V09/p01-diagram-7.png

<!-- slide # 2 (2026-10-15 09:39) ----------------------------- ODP slide # 2 -->
# Markup Languages

. after steps
- **Tag**
    . after
    - Enables one to use tags to enclose ("markup") plain text
        - Opening tag (a.k.a. start tag)

          . after
          ```xml
          <some_tag_name>
          ```

        - Closing tag (a.k.a. end tag)

          . after
          ```
          </some_tag_name>
          ```

    - An opening tag may contain attributes (`attributeName="value"`)
    - Makes it easy to parse text and denote which tag was used to mark it up
    . after
    - **Element**
        . after
        - The sequence "opening tag", text, "closing tag"

<!-- slide # 3 (2026-10-15 09:39) ----------------------------- ODP slide # 3 -->
# Markup Languages

. steps each=after
- **D**ocument **T**ype **D**efinition (**DTD**)
    - Defines the tags  and their attributes, if any
        - Name (identifier) of the tag
        - Attributes for tags
        . click
        - "Content model"
            . static
            - Nesting of tags and the allowed sequence of tags
                . static
                - **Hierarchical structure !**
            . static
            - Allows to determine how many times an element may occur
    . click
    - "Instance" of a DTD
        - A document with text that got marked-up according to the rules defined in a DTD
        - A document that has been checked whether the DTD rules were applied correctly is named a "**valid**" document

<!-- slide # 4 (2026-10-15 09:39) ----------------------------- ODP slide # 4 -->
# Markup Languages

. after
- **H**yper**T**ext **M**arkup **L**anguage (**HTML**)
    . after
    - A markup language for the WWW
        . click
        - HTML-Browser
            - Parses a document marked up according to HTML
            - Formats the text, depending on the used tags
. click
- **D**ocument **T**ype **D**efinition (**DTD**)
    . after
    - Version 4.01: three variants defined
        . click
        - **SGML**-based, hence it is possible to
            - Use any case for the tags and attribute names
            - Some closing tags can be omitted, if the end tags could be determined by the rules set forth in the DTD
            - It is possible to define exclusions

<!-- slide # 5 (2026-10-15 09:39) ----------------------------- ODP slide # 5 -->
# Markup Languages

. after steps
- E**x**tensible **M**arkup **L**anguage (**XML**)
    . after
    - A simplified version of SGML
        . static
        - Allows the definition of DTDs for markup languages
            . static
            - Since 2002 an alternative got introduced in the form of "XML Schema": http://www.w3c.org
    - Tag and attribute names must be written in exact case
    - End tags must always be given
    - Attribute values can now be enclosed within apostrophes/single quotes (**'**) in addition to double quotes (**"**)
    - It is possible to explicitly denote empty elements

      . after
      ```xml
      <some_tag_name/>
      ```

<!-- slide # 6 (2026-10-15 09:39) ----------------------------- ODP slide # 6 -->
# Markup Languages

. after
- XML DTDs can be omitted
    . after
    - A matching DTD can be always inferred, if the document is "well formed":
        - All tags must be nested
        - Tags must not overlap
        - Start tags must have matching end tags
. click
- Structure is always indepent of the formatting!
    . after
    - Cascading Style Sheets (CSS)
        - Allows to define formatting (layout) rules for elements
        - It is possible to define specific formatting (layout) rules for elements with attributes that have specific values or depending on the sequence of the elements

<!-- slide # 7 (2026-10-15 09:39) ----------------------------- ODP slide # 7 -->
# HyperText Markup Language (HTML)

- Text, marked up in HTML

  . after
  ```xml
  <html>
    <head>
       <title>This is my HTML file</title>
    </head>
    <body>
       <h1>Important Heading</h1>
       <p>This <span class="verb">is</span> the
          first paragraph.
       <h1>Another Important Heading</h1>
       <p id="xyz1">Another paragraph.
       <p id="9876">This <span class="verb">is</span> it.
    </body>
  </html>
  ```

  . click label
  Web Browser Output:

  . after picture img/120_AutoWin_markup_V09/p07-8.png width=57%

<!-- slide # 8 (2026-10-15 09:39) ----------------------------- ODP slide # 8 -->
# Linking a Cascading Style Sheet (CSS)

- Text, marked up in HTML

  . after
  . after mark 4 pen=1
  ```xml
  <html>
    <head>
       <title>This is my HTML file</title>
       <link rel="stylesheet" type="text/css" href="example2.css">
    </head>
    <body>
       <h1>Important Heading</h1>
       <p>This <span class="verb">is</span> the
          first paragraph.
       <h1>Another Important Heading</h1>
       <p id="xyz1">Another paragraph.
       <p id="9876">This <span class="verb">is</span> it.
    </body>
  </html>
  ```

. click label
Web Browser Output:

. after picture img/120_AutoWin_markup_V09/p08-9.png width=98%

<!-- slide # 9 (2026-10-15 09:39) ----------------------------- ODP slide # 9 -->
# Cascading Style Sheets (CSS)

- **example2.css**

. after group id=#p9x15

. click mark 1-4 pen=1
. mark id=#h2 6-8
. mark id=#h3 10-12
. mark id=#h4 14-15
```css
H1      { color: blue;
          text-align: center;
          font-family: Arial,sans-serif;
          font-size: 200%; }

body    { background-color: yellow;
          font-family: Times, Avantgarde;
          font-size: small; }

.verb   { background-color: white;
          color: red;
          font-weight: 900; }

#xyz1   { font-variant: small-caps;
          text-align: right; }

#9876   { font-size: large; }
```

. with callout --> #p9x15:1-4 at=right
Tag

. show #h2 pen=2

. with callout --> #p9x15:6-8 at=right
Tag

. show #h3 pen=3

. with callout --> #p9x15:10-12 at=right
"class" Attribut

. show #h4 pen=4

. with callout --> #p9x15:14-15 at=right
"id" Attribut

. end group

. drawing id=#p9d16 ratio=27.24 width=84%
. click box bare square left id=#p9x17 at=0,0,100,100 style="--skin-box-bg: rgba(114,159,207,0.20); font-size: 1.61em"
**"id" Attribut**

. end drawing

<!-- slide # 10 (2026-10-15 09:39) --------------------------- ODP slide # 10 -->
# Linking HTML with a CSS, 2

. columns 7 5

. after
. after mark 4 pen=1
```xml
<html>
  <head>
     <title>This is my HTML file</title>
     <link rel="stylesheet" type="text/css" href="example2.css">
  </head>
  <body>
     <h1>Important Heading</h1>
     <p>This <span class="verb">is</span> the
        first paragraph.
     <h1>Another Important Heading</h1>
     <p id="xyz1">Another paragraph.
     <p id="9876">This <span class="verb">is</span> it.
  </body>
</html>
```


. next column

. after
```css
H1      { color: blue;
          text-align: center;
          font-family: Arial,sans-serif;
          font-size: 200%; }
body    { background-color: yellow;
          font-family: Times, Avantgarde;
          font-size: small; }
.verb   { background-color: white;
          color: red;
          font-weight: 900; }
#xyz1   { font-variant: small-caps;
          text-align: right; }
#9876   { font-size: large; }
```

. end columns

. click label
Web Browser Output:

. after picture img/120_AutoWin_markup_V09/p08-9.png width=98%

<!-- slide # 11 (2026-10-15 09:39) --------------------------- ODP slide # 11 -->
# Document Object Model (DOM) – Parse Tree

. after
```xml
<html>
  <head>
     <title>This is my HTML file</title>
     <link rel="stylesheet" type="text/css" href="example2.css">
  </head>
  <body>
     <h1>Important Heading</h1>
     <p>This <span class="verb">is</span> the
        first paragraph.
     <h1>Another Important Heading</h1>
     <p id="xyz1">Another paragraph.
     <p id="9876">This <span class="verb">is</span> it.
  </body>
</html>
```

. click group
. tree style="--skin-tree-node-bg: #f5f5cc"
- html
  - head
    - title
    - link
  - body
    - h1
    - p
      - span
    - h1
    - p
    - p
      - span

. end group

<!-- slide # 12 (2026-10-15 09:39) --------------------------- ODP slide # 12 -->
# Example: Extracting Link from HTML Text, 1

. click group id=#p12x18

. picture img/120_AutoWin_markup_V09/p12-diagram-12.png width=100%

. end group

. after callout --> #p12x18:77,35 style="width:275px; max-width:none; box-sizing:border-box; font-size:19px" pin=top-left offset="910px 155px"
Display HTML text:\
**Ctrl-U**

<!-- slide # 13 (2026-10-15 09:39) --------------------------- ODP slide # 13 -->
. slide reference="Cf. winextensions.pdf (8.3. The OLEObject Class)"
# Example: Extracting Link from HTML Text, 2
# (MS Internet Explorer: Windows Only)

. after
- Extracting WU's Directory URL (as of 2023-01-15)
    . after
    - Get WU BACH's home page from the URL: *https://bach.wu.ac.at/z/start*

      . after
      . click mark 11 "<h2>WU</h2>" pen=1
      . after mark 11 '<a href="' pen=1
      . after mark 11 '">WU Directory<' pen=1
      ```rexx
      ie=.OLEObject~new("InternetExplorer.Application")
      ie~visible=.true           -- make IE visible
      ie~navigate("https://bach.wu.ac.at/z/start")
      do counter i until ie~busy=.false | i>1000 -- wait for page to be loaded (maximum one second)
         call sysSleep 0.001     -- sleep 1/1000 second
      end
      doc=ie~document            -- get loaded document
      source=doc~body~innerHtml  -- get body element and get its HTML text
      ie~quit                    -- close Internet explorer
         -- parse the HTML text to extract a specific URL
      parse var source '<h2>WU</h2>' . '<a href="' url '">WU Directory<'
      say "Current URL of BACH-WU Directory:" url
      ```

    . with
    - Parse the received data for the WU directory URL and display it

. click label
Output:

. with
```output
 Current URL of BACH-WU Directory: http://bach.wu.ac.at/d/directory/
```

<!-- slide # 14 (2026-10-15 09:39) --------------------------- ODP slide # 14 -->
. slide reference="Cf. winextensions.pdf (8.3. The OLEObject Class)"
# Example: Extracting Link from HTML Text, 3
# (Command "curl": All Operating Systems)

. after
- Extracting WU's Directory URL (as of 2023-01-15)
    . after
    - Get WU BACH's home page from the URL: *https://bach.wu.ac.at/z/start*

      . after
      . after mark 5 "<h2>WU</h2>" pen=1
      . with mark 5 '<a href="' pen=1
      . with mark 5 '">WU Directory<' pen=1
      ```rexx
      command="curl --silent https://bach.wu.ac.at/z/start"
      outArr=.array~new          -- array for stdout
      ADDRESS SYSTEM command WITH OUTPUT USING (outArr)
      source=outArr~makeString   -- turn array into string
      parse var source '<h2>WU</h2>' . '<a href="' url '">WU Directory<'
      say "Current URL of BACH-WU Directory:" url
      ```

    . with
    - Parse the received data for the WU directory URL and display it

. click label
Output:

. with
```output
 Current URL of BACH-WU Directory: http://bach.wu.ac.at/d/directory/
```

<!-- slide # 15 (2026-10-15 09:39) --------------------------- ODP slide # 15 -->
# Wrap Up

. steps each=after
- **HTML**/**XML** Files
    - Markup language
    . click
    - Tags defined in **SGML** or XML **DTD**
        - XML allows in addition **XSD** (XML Schema Definition)
    . click
    - **CSS** (cascading style sheets) for formating elements
. click
- **DOM** (document object model, w3.org)
    - Hierarchical (parse tree)
    - APIs for querying, inserting, changing and deleting of elements in the parse tree
    . click
    - Combine programming statements with events
    . click
    - **DHTML**
        - Microsoft's implementation of DOM used only in its Internet explorer (**IE**)
        - Incomplete and proprietary extensions

<!-- slide # 16 (2026-10-15 09:39) --------------------------- ODP slide # 16 -->
# Further Links

. after
- World Wide Web Consortium (W3C)
    . after
    - \<https://www.w3.org/\> (2022-05-22)
    . with
    - \<https://www.w3.org/Style/CSS/\> (2022-05-22)
    . with
    - \<https://dom.spec.whatwg.org/\> (2022-05-22)
    . with
    - \<https://www.w3.org/MarkUp/\> (2022-05-22)
. click
- SelfHTML
    . after
    - Excellent, easy to understand resources about HTML, CSS, XML, DOM, ...!
        - Unfortunately not in English, yet the examples are understandable
    . with
    - Tutorial
        - \<https://www.selfhtml.org/\> (2022-05-22)
. click
- "curl"
    . after
    - \<https://en.wikipedia.org/wiki/CURL\> (2023-01-15)
    . with
    - \<https://curl.se/\> (2023-01-15)

<!-- slide # 17 (2026-10-15 09:39) ----------- business card (not in the ODP) -->
. slide card logo=none
# Contact