Why Markup Languages?

Sometimes, we need to embed data in our text. Usually, we choose an uncommon character sequence to denote a special command, like make this bold:

<b>Hello</b> everybody!

**Hello** everybody!

XML and HTML

XML (eXtensible Markup Langauge) and HTML (HyperText Markup Language) use a syntax of tags:

<tag>content</tag>

The inside content is read as text, and the tag is the instruction to the compiler.

Attributes

The tag might also have attributes. For example, the <a> tag is a link. But, we need a reference point href to link (anchor) to:

<a href="https://beatymuseum.ubc.ca">The Beaty Website</a>



Why <a> and not <l>? The anchor is at the end of the link, and also refers to links within a page.

Styles

A special type of attribute is the style.

<span style="color: red">Hello</span>, world!

Hello, world!

HTML pages

An HTML page is just a text file with a special markup structure. It is convention to indent tags so that it's easier to read.

<html>
    <body>
        Hello, world!
    </body>
</html>

Copy the above into a text file (using Notepad or TextEdit) and save with a .html extension rather than .txt then open with a browser.

Play with HTML tags

Here are some HTML tags. Try using them to make your own content.

  • Tags

    <h1>Heading</h1>
<p>Paragraph</p>
<ul>Unordered list</ul>
<ol>Ordered list</ol>
<li>List item</li>

  • Example

    <h1>This is my grocery list</h1>
<p>Groceries</p>
<ul>
    <li>Bananas</li>
    <li>Tahini</li>
</ul>
<p>Stores</p>
<ol>
    <li>Save-on</li>
    <li>Donald's</li>
</ol>

Example from Specify

<viewdef name="Collection Object" >
    <desc>The Collection Object form</desc>
    <rows>
        <row>
            <cell type="label" labelfor="1" label="Catalog Number"/>
            <cell type="field" id="1" name="catalogNumber" uitype="formattedtext"/>
        </row>
        <row>
            <cell type="label" labelfor="4" label="Cataloger"/>
            <cell type="field" id="4" name="cataloger" uitype="querycbx" isrequired="true"/>
        </row>
    </rows>
</viewdef>