Institute of Information Science - University of Miskolc

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== 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:
<code XML>
<mail id="00001">
    <from>Alice</from>
    <to>Bob</to>
    <subject>Reminder</subject>
    <message>Meeting at 2 PM in office II.</message>
</mail>
</code>

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 [[https://code.visualstudio.com/|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:
 
{{:tanszek:oktatas:techcomm:pasted:20240923-091837.png}}

Then search **Live Server**, and click the "Install" button on the following result:

{{:tanszek:oktatas:techcomm:pasted:20240923-092114.png}}

If the extension installed successfully, you can see the following button in the bottom right corner of VSCode:
{{:tanszek:oktatas:techcomm:pasted:20240923-092231.png}}

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:

<code XML>
<!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>
</code>

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 [[https://www.w3schools.com/tags/tag_doctype.asp|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.

<code XML>
<!-- 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>
</code>

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.

<code XML>
<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>
</code>


==== Text Formatting and Structuring ====

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

<code XML>
<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>
</code>

''<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.

<code XML>
<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>
</code>


==== 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.

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

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 URL**s 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:

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

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.

<code XML>
<!-- 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>
</code>

==== Tables ====

To create tables, use the following elements:
  * ''<table>'': the main table element
  * ''<tr>'': table row
  * ''<th>'': table header
  * ''<td>'': table data cell

<code XML>
<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>
</code>

''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. [[https://www.w3schools.com/html/|W3Schools HTML tutorial]]) as help.