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 tags such as 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 different meanings to present content.

2. Basic Structure of an HTML Document

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

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

The head section contains metadata about the page, such as the title (<title>) and the icon (<link rel=“icon”>).

<head>
    <title>Hello World</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

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>

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>

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