# Documentation

We all have wanted to have our lessons and content display text in a millennial way. The right way. The following documentation will introduce you to the fundamentals of HTML and how you can beautify your content using classes from Bootstrap —which is built-in in Moodle.

# Prerequisites

You should be familiar with the following technologies:

  1. Moodle
  2. Moodle Editor
title
format_bold
format_italic
format_align_left
format_align_center
format_align_justify
format_align_right
format_list_bulleted
format_list_numbered
format_underlined
strikethrough_s
link
link_off
insert_photo
mic
videocam
accessible
code
# Where to use HTML in Moodle

codeWhen we click on this button, you can insert a pretty big deal of HTML tags that wouldn't come in your editor; (unless it's a plugin) actually, the editor is converting the text you're using into HTML.

We can't write:

<html>
    <head>
        <title>This is the title of the website.</title>
    </head>
    <body>
        <nav>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </nav>
    </body>
</html>

The only tags that we will be able to write on Moodle is these ones:

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>
<nav>
    <ul style="background-color: red;">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

# Tags

Opening Tag Content Closing Tag
<p> Content sinde the tag </p>

# Divs

Learning HTML is the first step to becoming a web developer. No matter how many frameworks out there try to minimize the usage of this technology, understanding its structure is of outmost importance. Later on, you'll learn CSS, but we strongly recommend that you stick to these pages until you've grasped the basics and fundamentals of HTML.

# Headings

There are six different types of headings. In Moodle, they might look different, especially if your Moodle core CSS has been changed.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# HTML Code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

TIP

Increase the font size by adding: style="font-size: (# of pixels)px;" inside the heading. For example, if I want my heading 1 to be bigger, I can do: <h1 style="font-size: 45px;">Title of Course</h1>, and that will make this h1 bigger than its normal size.

# Titles in Moodle

The first headings in Moodle appear to be heading 1 and heading 2.

For this reason, most of our slides are created using heading 3 and 4.

# Paragraphs

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

# Blockquotes

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

# Tables

Tables are always useful when teaching online. To create tables in HTML we use the tag <table> and the class class="table" to display it nicely on the screen.

Here's the HTML structure.

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

We put inside the <thead> table headers. The number of <th> tags that we put will indicate the number of columns.

The data for each column have to be displayed on the <td>, tabla data, which is inside the table row <tr>.

For example:

Web Technologies Creator Year
JavaScript Brendan Eich 1995
CSS Håkon Wium Lie 1996
HTML Tim Berners-Lee 1989

# Images

code

Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

This is a container styled by me.