Institute of Information Science - University of Miskolc

HTML (HyperText Markup Language)

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 id="00001">
    <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.

Tags can have attributes (e.g. the identifier of the mail).

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

Development Environment

For practicing HTML, we will use Visual Studio Code (VSCode), the open-source code editor developed by Microsoft.

After VSCode is started, Live Server extension should be installed. To do this, click on the following icon, in the left sidebar:

Then search Live Server, and click the “Install” button on the following result:

If the extension installed successfully, you can see the following button in the bottom right corner of VSCode:

To initialize a new project, create a new folder with File Explorer, then open this folder in VSCode (File > Open folder…).

Then, create a new file called index.html.

Copy the code from the next section, then save your HTML file (Ctrl+S).

Now, push the “Go Live” button, and open http://localhost:5500/ on your browser (it may be automatically opened by Live Server extension). If you change the code of the HTML file, the content will also be updated in the browser.

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>
    <p>This is also 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.

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.

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>
 
<h3>Heading Level 3</h3>
<p>This is a paragraph.</p>
 
<h4>Heading Level 4</h4>
<p>This is a paragraph.</p>

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.

Links

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

<a href="contact.html">Internal page link</a> <!-- To make this work, we should create another HTML document, named as contact.html.  -->
<a href="https://www.uni-miskolc.hu/">External website link</a>
<a href="mailto:info@example.com">Email link</a>
<a href="tel:+36301234567">Phone number link</a>

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">

In this example, src contains an absolute URL, the image will be downloaded from the server behind the www.uni-miskolc.hu domain.

In addition to this, we can define relative URLs to our HTML file. For example, if we have a folder imgs next to our HTML document, and a file called main_building.png in this folder, we can refer to it as:

<img src="imgs/main_building.png" alt="Main Building of the University of Miskolc">

Try downloading an image from the internet, and using a relative URL in your HTML document!

Ordered and Unordered Lists

For ordered lists, you can use the <ol> tags, while for unordered lists, use <ul> elements. List items are marked with <li> tags in each list type.

<!-- ordered list -->
<p>The final result of the sports day:</p>
<ol>
    <li>Computer Scientists</li>
    <li>Mechanical Engineers</li>
    <li>Chemical Engineers</li>
</ol>
 
<!-- unordered list -->
<p>We should buy today:</p>
<ul>
    <li>apples</li>
    <li>milk</li>
    <li>bread</li>
</ul>

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>

colspan is an attribute, and is used here to merge 2 table cells in the row. Attributes are used often to define certain properties of HTML elements (e.g. styling, alternative text, etc.).

Exercise

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

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

Table of Contents