Hypertext markup language (HTML)

HTML is the language that tells the browser how to display texts, images, computer graphics, etc, on the screen.
A program in HTML is a simple text file with .html ending.
HTML is called a markup language because the commands describing how to display the text are intermixed with the content itself.
The commands start and end with special characters so the HTML processor can distinguish them from normal text.
HTML documents consist of building blocks called elements.
Elements are nested in a hierarchical manner.
An element is represented by a tag. Every element has a start tag. Most elements also has an end tag, but some do not.
A tag labels a piece of content such as heading, table, paragraph, etc.
Some start tag can also have attributes, written as name="value" pairs.

Example HTML file

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First HTML File</title>
</head>
<body>
    <h1>Welcome to my home page</h1>
    <p>
    Hello, I'm Sam.
    Nice to meet you.
    I work <a href="http://gustavus.edu">here</a>.
    </p>
    <img src="smiley.svg" alt="SMILEY FACE" height="42" width='42'>
</body>
</html>

Extensible markup language (XML)

XML is a markup language. Its syntax is like that of HTML but more strict.
It is designed to be a self-descriptive language for storing and transporting data.
XML is all about content description. HTML is all about how to display its content.
XML tags have no predefined meanings. Their meanings are arbitrarily assigned by the desinger of that particular XML format. In contrast, every HTML tag has a predefined meaning.
XML is everywhere:
- XML is used in inter-app communication.
- It’s used as the language for configuration files.
- It is the language for writing the graphical user interface (GUI) for android apps.
- It is used in some database systems.

Scalable Vector Graphics (SVG)

There are two main types of image files: raster and vector.
Raster images are created by pixel-based programs or captured with cameras or scanners. Examples are the jpg, gif, and png files. A raster image is defined by the individual pixels, and the image becomes blurry upon magnification.
Vector images are created with vector software. Examples are the svg, eps, and pdf files. A vector image is described by mathematical lines and curves and the image stays crisp upon magnification.
SVG is written in XML; it defines vector-based graphics for the web.
Modern browsers can interpret SVG elements embedded in an HTML page.

Example HTML file with an SVG tag

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="400" height="110">
  <circle cx="350" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <rect width="300" height="100" stroke="black" stroke-width="3" fill="skyblue" />
</svg>

</body>
</html>

HTML, XML, and SVG

San Skulrattanakulchai

October 17, 2018

Topics

Hypertext markup language (HTML)

Example HTML file

Extensible markup language (XML)

Scalable Vector Graphics (SVG)

Example HTML file with an SVG tag