Tutorial HTML CSS Dasar

Pada kesempatan ini saya akan membagikan tutorial HTML & CSS dasar khusus untuk pemula. Semoga apa yang saya share bisa berguna dan bermanfaat untuk kamu yang ingin belajar coding. Selamat membaca ya.

Apa itu HTML?

HTML (HyperText Markup Language) adalah kerangka dasar sebuah website. HTML digunakan untuk menyusun struktur konten, seperti teks, gambar, link, dan tombol. HTML sering dibilang sebagai bahasa pemograman oleh sebagian orang, tetapi HTML bukan bahasa pemrograman, melainkan kerangka dasar sebuah website.

Tips Sebelum Mulai Belajar

Persiapan pertama yang perlu kamu lakukan adalah membagi waktu. Sempatkan untuk mencari waktu yang tepat untuk mempelajari sambil mempraktekkannya, jika ingin belajar apalagi soal pemograman tentu kita perlu meluangkan waktu beberapa lama. Kedua, siapkan laptop atau komputer. Kamu perlu device yang seengganya mampu untuk menjalankan program code editor seperti Visual Studio Code dan semacamnya. Terakhir, mungkin kamu membutuhkan sumber-sumber lain seperti video pembahasan atau materi pendukung lainnya jika ingin lebih lanjut.

Struktur Dasar HTML

HTML memiliki struktur dasar yang wajib kamu ketahui sebelum mulai membuat sebuah website. Struktur ini terdiri dari beberapa bagian utama seperti DOCTYPE, html, head, dan body.


                <!DOCTYPE html>
                <html>
                <head>
                <title>Website Pertamaku</title>
                </head>
                <body>

                <h1>Hello World</h1>
                <p>Ini adalah website pertamaku.</p>

                </body>
                </html>

Penjelasan singkat dari struktur di atas:

<!DOCTYPE html> digunakan untuk memberitahu browser bahwa dokumen ini adalah HTML5.
<html> adalah elemen utama yang membungkus seluruh isi halaman.
<head> berisi informasi seperti judul halaman.
<body> berisi konten yang akan ditampilkan ke pengguna.

Pengenalan Tag HTML Dasar

Berikut beberapa tag HTML dasar yang sering digunakan:


                <h1>Judul Utama</h1>
                <p>Ini adalah paragraf</p>
                <a href="https://example.com">Link website</a>
                <img src="gambar.jpg" alt="Deskripsi gambar">

Tag-tag di atas memiliki fungsi yang berbeda:

<h1> digunakan untuk judul.
<p> digunakan untuk paragraf.
<a> digunakan untuk membuat link.
<img> digunakan untuk menampilkan gambar.

Pengenalan CSS

Setelah mengetahui struktur dasar HTML di atas, selanjutnya kamu perlu tau mengenai CSS (Cascading Style Sheets) CSS seringkali digunakan terutama untuk HTML kedua hal ini saling berdampingan.

CSS digunakan untuk membuat tampilan website yang kamu buat menjadi lebih menarik dan bagus. fungsi utamanya yaitu adalah mengatur layout, memberikan warna, mengubah ukuran teks dan gambar dan bahkan membuat animasi khusus di web kamu.


                body {
                background-color: #000;
                color: white;
                font-family: Arial, sans-serif;
                }

                h1 {
                color: blue;
                }

Dengan contoh CSS di atas, background halaman kamu akan menjadi berwarna gelap dan teks judul akan berwarna biru.

Akhir kata.. saya ucapkan selamat belajar, semoga bermanfaat. Happy coding!

Ditulis oleh: Junkaaa

← Sebelumnya Selanjutnya →