Institute of Information Science - University of Miskolc

This is an old revision of the document!

HTML (HyperText Markup Language)

1. XML, a structured data description language

XML (eXtensible Markup Language) is a universal data description language readable by both humans and machines, used for structured data storage and transfer.

Example:

<mail>
    <from>Alice</from>
    <to>Bob</to>
    <subject>Reminder</subject>
    <message>Meeting at 2 PM in office II.</message>
</mail>

The structures mail, from, to, etc., are called tags or elements.

HTML documents, which describe the content of web pages, are also written in XML, using various elements with specific meanings to format or structure content.

2. Basic Structure of an HTML Document

An HTML document mainly consists of three main parts: <html>, <head>, and <body>. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Heading 1</h1>
    <p>This is a paragraph</p>
</body>
</html>

The <!DOCTYPE> tag is used to declare the document type and version of HTML being used. It ensures that the web browser renders the page correctly by telling it what type of HTML (e.g., HTML5) the document is written in. More information is available here.

The html tag encapsulates the whole content, it is the root of the HTML document.

The head section contains metadata about the page, such as the title between <title> tags.

The body section contains the content of the page.

In the following, we can learn about the HTML elements that can be used in the body of the document.

3. Comments

HTML documents can contain comments, which are not visible to users in the browser, but are visible to developers in the HTML code.

<!-- description of ME -->
<p>University of Miskolc is a higher education institution in Miskolc.
The institution operates as a true university, with wide-ranging programs across eight faculties...</p>

It can be used to make our code more transparent and understandable for developers.

4. Headings and Paragraphs

Headings are defined using the <h1>-<h6> elements, while paragraphs are defined using the <p> element.

<h1>Heading Level 1</h1>
<p>This is a paragraph.</p>
 
<h2>Heading Level 2</h2>
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>

5. Text Formatting and Structuring

Elements like <br>, <hr>, <small>, < sup> / < sub>, < span>, < div> help with text formatting and structuring.

<p>This is a <small>small text</small>.</p>
<p>This is a second line <br> with a line break.</p>
<hr> <!-- this is a horizontal line -->
<p>Subscript and superscript: P<sub>i</sub> = I<sup>2</sup>R </p>
 
<!-- text formatting -->
<p>This is a <span style="font-weight: bold">bold text</span>.</p>
 
<!-- formatting all child elements -->
<div style="font-weight: bold">
  <p>1st paragraph</p>
  <p>2nd paragraph</p>
  <p>3rd paragraph</p>
</div>

<br> inserts a line break in the text.

<hr> creates a horizontal line, often used to separate content.

<small> reduces the size of the text, typically used for disclaimers or footnotes.

< sup> displays text as superscript, raising it above the baseline.

< sub> displays text as subscript, lowering it below the baseline.

< span> groups inline elements to apply styles or manipulate them with JavaScript.

< div> defines a division or section in an HTML document, often used to group multiple elements together for layout or styling purposes.

6. Links

Links can point to web pages, email addresses, telephone numbers, etc.

<a href="index.html">Internal page link</a>
<a href="https://www.example.com">External website link</a>
<a href="mailto:info@example.com">Email link</a>
<a href="tel:0036301234567">Phone number link</a>

7. Images

Images are inserted using the <img> element, with the src attribute specifying the path to the image and the alt attribute providing an explanatory text.

<img src="https://www.uni-miskolc.hu/wp-content/themes/uni-miskolc-wp/assets/img/header-logo.svg" alt="University of Miskolc logo">

8. Ordered and Unordered Lists

Ordered lists use the <ol> tag, while unordered lists use the <ul> elements. List items are marked with <li> tags.

<!-- ordered list -->
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
 
<!-- unordered list -->
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

9. Tables

To create tables, use the following elements:

<table>: the main table element
<tr>: table row
<th>: table header
<td>: table data cell

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>500 Ft</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td>400 Ft</td>
    </tr>
    <tr>
      <td colspan="2">Total: 900 Ft</td>
    </tr>
</table>

10. Exercise

Create an introduction page on your favorite topic (music, film, product, etc.) using paragraphs, images, links, tables, and lists.

Feel free to use online resources (e.g. W3Schools HTML tutorial) as help.

Table of Contents