001. Introduction to HTML: Basic Structure & Element

What is HTML?

HTML (Hypertext Markup Language) is a markup language used to create structures and compile content on web pages. HTML provides a basis for compiling basic elements such as text, images, and hyperlinks.

Basic Structure of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman web -->
</body>
</html>

Information :

<!DOCTYPE html>: Determine the HTML version used (HTML5).
<html>: Starting the HTML element.
<head>: Contains meta information and document settings.
<meta charset="UTF-8">: Determine the character set of documents (UTF-8 for Unicode).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Determine responsive display for moving devices.
<title>: Determine the page title that will appear in the browser tab.
<body>: Place for all content that will be displayed on web pages.

Basic Elements of HTML

1. Text

<h1>Heading 1</h1>
<p>Paragraf teks.</p>
<strong>Teks tebal</strong>
<em>Teks miring</em>

2. Picture (Picture)

<img src=" alt="Deskripsi gambar">

Or you can with an image url

<img src=" alt="Deskripsi gambar">

3. Link

<a href=" target="_blank">Contoh Link</a>

4. List (List)

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
</ul>

<ol>
    <li>Item pertama</li>
    <li>Item kedua</li>
</ol>

5. Form (Form)

<form action="/proses-data" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <input type="submit" value="Kirim">
</form>

Important attributes

id: Give a unique identification to the element.
class: Determine one or more class for elements.
src: Determine the source (source) of images or media.
alt: Alternative description for images (important for accessibility).
href: URL address for links.

Importance of Accessibility:

Make sure to use attributes alt on elements <img> To provide an alternative description to the image, help users with limitations of vision.

Exercise:

Create a simple HTML page with the title “Today’s News”, add some paragraphs of text, images and links.
Create a simple form with three name forms, email, password.

By understanding the basics of HTML, you can build the basic structure of web pages and continue to study CSS and Javascript to improve their appearance and functionality.

Game Center

Game News

Review Film
Rumus Matematika
Anime Batch
Berita Terkini
Berita Terkini
Berita Terkini
Berita Terkini
review anime

Bishan