Short introduction to HTML
Begin the journey in creating website
HTML is the standard markup language used to display document in a web browser, which is first developed by Tim Berners Lee in 1990 while working at CERN, and it was one of the key innovative technologies used to publish the world’s first website on August 6, 1991, where the original website can now be revisited due to a restoration project by CERN (Glass & Boucheron, 2020). Now with current technologies and as the most widely used language in the world of developing web application, HTML is used for web page development, game development, internet navigation, offline support, and responsive UI (Sufiyan, 2021). The technologies work together to create the web as we know now, which are HTML for creating and formatting content of web pages, CSS for styling the content, and JS for adding dynamic and interactivity elements to web pages (Laurinavicius, 2022). Only a basic text editor is required to edit a HTML document and internet browser to display the result (Stevens, 2023), since a HTML file is merely a text file because all the control characters are themselves printable characters when viewed using a regular text editor (Szabo, 2013). All HTML pages have a series of HTML elements, which are the building blocks of a web page, where each element consists of a set of tags and attributes (Sarosa, 2023). Here some examples of using common HTML elements are given, but in plain, only using it default style and without any interactivity.
Edit and display
Notepad++ is used to edit HTML file and Google Chrome is used to display the result. You can install Google Chrome and Notepad++, if they are not available on your computer.
A web page can be built using a minimal HTML document for HTML 5 (Yank, 2010), which is given in Figure 1, but here still without the use of CSS and JS. In the next section the code will be display as text instead of as image, e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>and the result is as in above part of Figure 0.
Whitespaces
Multiple adjacent spaces will be shown in a plain text document, or while editing a HTML file, but they will not be displayed as result in a HTML page, since the browser will condense the spaces to just one, where this behavior is called whitespace collapse (Juviler, 2022).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Whitespaces</title>
</head>
<body>
<p>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>Spaces: one, two, three, four.</p>
<p>Tabs: one, two, three, four.</p>
<p>Enter:
one,
two,
three,
four.
</p>
</body>
</html>Above code illustrate the use of multiple spaces, tabs, and enters, that produce the same results as follow.
From the example, it can be deduced that the whitespaces are space, return, and tab (Larson, 2022), which follows the whitespace collapse.
To force a new line or enter in a HTML element <br> tag is used and to add multiple spaces HTML entity is used. Then following lines of code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Whitespaces</title>
</head>
<body>
<p>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>Spaces: one, two, three, four.</p>
<p>Enter:<br>
one,<br><br>
two,<br><br><br>
three,<br><br><br><br>
four.
</p>
</body>
</html>will produce
Notice that is treated as a character, so that means three spaces. And result of multiple <br>does not depend on whether they are put on the same line or not.
Paragraph
Paired tags of <p> and </p> are used to define a paragraph, where paragraph content is put between the opening tag and closing tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Whitespaces</title>
</head>
<body>
<p>This is content of the first paragraph. All words and sentences are grouped and there is any newline between them.</p>
<p>And this is the second one, which is not connected to the first one, since there must be a blank line between two adjacent paragraphs.
</p>
</body>
</html>
List
There some types of list supported in HTML, two of them are ordered list and unordered list (Deepali, 2023). The first is using paired tags <ol> and <\ol>, while the second using paired tags <ul> and <\ul>. In the those pairs there will be at least one list item using paired tags <li> and </li>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List</title>
</head>
<body>
<p>Ordered list</p>
<ol>
<li>This is firs item of an ordered list. All words and sentences are grouped and there is any newline between them.</li>
<li>And this is the second one of the same list, which is not connected to the first one, since there must be a blank line between two adjacent list items.
</li>
</ol>
<p>Unordered list</p>
<ul>
<li>This is firs item of an unordered list. All words and sentences are grouped and there is any newline between them.</li>
<li>And this is the second one of the same list, which is not connected to the first one, since there must be a blank line between two adjacent list items.
</li>
</ul>
</body>
</html>
There is also description list (Lehner, 2023), which is using paired tags <dl> and </dl> with two parts of a list item
- description term is using paired tags
<dt>and</dt>, - description data is using paired tags
<dd>and</dd>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List</title>
</head>
<body>
<p>Description list</p>
<dl>
<dt>Full Name</dt>
<dd>Windows User</dd>
<dt>Email</dt>
<dd>windows.user@gmail.com</dd>
<dt>Website</dt>
<dd>https://github.com/windows-user</dd>
</dl>
</body>
</html>
Headings
There are six levels of heading in HTML, where <h1> is for main heading, the biggest in size, and <h6> is for small heading, the smallest in size (Banerjee, 2022). These headings are used as paired tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>List</title>
</head>
<body>
<h1>Country</h1>
1 (Indonesia)
<h2>Province</h2>
38 (Aceh, Sumatra Utara, .., Nusa Tenggara Timur, Kalimantan Barat, .., Papua, Papua Barat)
<h3>Regency</h3>
415 (..)
<h3>Administrative Regency</h3>
1 (Kepulauan Seribu)
<h3>City</h3>
93 (Jakarta, Bogor, Bandung, Blitar, .., Batu, Baubau, Cimahi, Langsa, .., Sungai Penuh, Gunung Sitoli, Tangerang Selatan)
<h3>Administrative City</h3>
5 (Jakarta Pusat, Jakarta Utara, Jakarta Timur, Jakarta Selatan, Jakarta Barat)
<h4>District</h4>
7230 (.., Rasane Barat, Mpunda, Rasanae Timur, Raba, Asakota, ..)
<h5>Urban Village</h5>
8488 (..)
<h6>Village</h6>
74953 (.., Bantarjati, Tegal Gundil, Tanah Baru, Cimahpar, Ciluar, Cibuluh, Kedunghalang, Ciparigi, ..)
</body>
</html>
Information in Figure 6 is only for illustration. Notice that font size for <h5> and <h6> are already smaller than normal font size.
Table
A table, which is a representation of data arranged in rows and columns, is supported in HTML using paired tags <table>.. </table> and is also easy to create and design, where the data can be text, link, and image (Nyakundi, 2021).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table</title>
</head>
<body>
<table border='1'>
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td>1.5</th>
<td>100</td>
</tr>
<tr>
<td>2.5</th>
<td>300</td>
</tr>
<tr>
<td>3.5</th>
<td>500</td>
</tr>
<tr>
<td>4.5</th>
<td>700</td>
</tr>
<tr>
<td>5.5</th>
<td>900</td>
</tr>
</table>
</body>
</html>
Try and notice that without attribute border='1' the table will be drawn without border line. Paired tags <tr> and </tr> define a row, while <td> and </td> define a column, where <th> and </th> are special tags for a column which is also a header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table</title>
</head>
<body>
<table border='1'>
<caption>Table 1. Monthly sales and profit</caption>
<thead>
<tr>
<th colspan='2'>Jul</th>
<th colspan='2'>Aug</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales</td>
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
<tr>
<td>100.000</th>
<td>10.000</td>
<td>200.000</th>
<td>20.000</td>
</tr>
<tbody>
<tfoot>
<tr>
<td colspan='4'>All are in IDR</td>
</tr>
</tfoot>
</table>
</body>
</html>
Notice that table in Figure 8 uses additional tags, such as <caption>, <thead>, <tbody>, <tfoot>, and additional attribute colspan.
Hyperlink
Hyperlinks allow users to travel from page to page, where the destination can be other page or various page elements, including text, images, and more (Ofiwe, 2021). In HTML, the inline a (anchor) element denotes a hyperlink from one web address to another, where in the opening tag it must contain the href attribute, or the a element will not work (Juviler, 2021).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hyperlink</title>
</head>
<body>
<li><a href="https://medium.com/">Medium</a>
<li><a href="https://github.com">Not Medium</a>
</body>
</html>
Notice from Figure 9 that we can set that the text and the link might not related, but it should not be conducted, unless the purpose is to mislead visitors.
Division
To divide sections of a HTML document the div element can be used, which will have specific formatting and scripting (Brownell, 2022). Beside div there is also other generic HTML element that serves similar purpose, the span element, where div element is used for block-level organization and styling of page elemets and span element is used for inline organization and styling of page elements (Juviler, 2023).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hyperlink</title>
</head>
<body>
<h1>Example of div element</h1>
<div style="background: #fcc">
<h2 style="color: #800">1st block heading</h2>
<p>This is a paragraph</p>
</div>
<div style="background: #cfc">
<h2 style="color: #080">2nd block heading</h2>
<p>This is also a paragraph</p>
</div>
<div style="background: #ccf">
<h2 style="color: #008">3rd block heading</h2>
<p>This is another paragraph</p>
</div>
</body>
</html>
To differ the div elements different font color for each h2 element and background color for each div element are used.
