Introduction to HTML

Photo By Gabriel Heinzer on Unsplash

Before diving into the basics of HTML, ensure you have a text editor such as Sublime Text, Notepad++, or any other of your choice. If you don’t have one, I recommend checking the previous article to learn about text editors and how to save an HTML file.

Elements/Tags

In the previous section, we learned that HTML consists of a set of tags that represent content. To create any content in HTML, we first need to understand which tags to use. An HTML document usually consists of an opening tag, a closing tag, and the content in between.

Basic Syntax:

Generally, all HTML elements/tags have attributes. Attributes provide additional information about the tag. For example, to create a centered heading using the H6 tag, we can add the attribute align=”center”. Attributes in HTML are placed within the opening tag, usually following the format name=”value”.

<h6 align="center">Judul dengan rata tengah</h6>
<p align="left">Paragraph dengan rata kiri </p>
<a href="https://www.mangcoding.com" target="_blank">Klik disini</a>

Headings are used to create titles for articles or sections within a page. HTML provides six levels of headings, from H1 to H6, where H1 is the largest and H6 is the smallest.

<h1>ini heading 1</h1>
<h2>ini heading 2</h2>
<h3>ini heading 3</h3>
<h4>ini heading 4</h4>
<h5>ini heading 5</h5>
<h6>ini heading 6</h6>

To create a paragraph, we use the p tag. If you are using Sublime Text 3, you can simply type p and press Tab to automatically generate the opening and closing p tags. To generate dummy text, type lorem and press Tab.

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum esse inventore reiciendis voluptate, sapiente, perspiciatis minima et debitis dignissimos harum nisi ex? Odit non perspiciatis adipisci. Dicta nisi, cupiditate alias. </p>

Similar to word processing software, HTML provides tags for text formatting, such as making text bold or italic. Below are some commonly used formatting tags:

Lists in HTML are categorized into two types: ordered lists and unordered lists.

Ordered List

1. Ordered lists use numbers or letters for item sequencing.
2. The ol tag opens an ordered list.
3. The li tag defines list items.
4. The type attribute specifies the numbering format (“a”, “A”, “I”, “i”, “1”

Unordered List

• Unordered lists use bullet points instead of numbers.
• The ul tag opens an unordered list.
• The li tag defines list items.
• The type attribute can be “square”, “circle”, “disc”, or “none”.

To understand `

` and `
`, please create the file below, save it, and then open it in your favorite browser.

<h2 align="center">Mengenal List</h2>
<p>List itu terbagi menjadi 2</p>
<h4>Ordered List</h4>
<ol>
  <li>tag ol digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "a", "A", "I", "i", "1"</li>
</ol>
<h4>Unordered List</h4>
<ul>
  <li>tag ul digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "square", "circle", "disc", "none"</li>
</ul>
<a href="dasar.html" target="_parent">Halaman dasar</a>



Hyperlinks in HTML

Hyperlinks allow users to navigate between pages or external websites. For example, if we have an index.html file, clicking a specific button can take us to the about.html page or redirect us to our Facebook page. To achieve this, a hyperlink is required.

An example of writing a hyperlink is as follows:

<a href="url/link tujuan">link text</a>
<a href="https://www.facebook.com/mangcoding/" target="_blank">Lihat FB saya</a>

By default, links appear in browsers as follows:

• Unvisited links are blue and underlined.
• Visited links turn purple but remain underlined.
• The `target` attribute allows opening links in different ways (“_blank”, “_self”, “_top”, “_parent”)



Inserting Images in HTML

To insert images, use the img tag. It supports attributes like src image source, width, height, and alt alternative text.

<img src="gambar.jpg" alt="gambar anda" width="200px" height="auto" />

This is a brief introduction to HTML basics. Hopefully, this guide helps you understand the fundamental structure of HTML. Keep learning and stay motivated! 😊