Belajar Dasar HTML Lengkap untuk Pemula

Belajar HTML Lengkap - Pada kesempatan kali ini saya akan memberikan tutorial html lengkap. Jika kalian baru belajar html dasar, maka kalian bisa mengikuti panduan artikel yang saya berikan dibawah ini.

Belum mengenal html ? tidak tahu apa itu html ? tenang saja kita akan mempelajari tentang html.

Belajar html dan mengetahui bagaimana cara html bekerja merupakan langkah awal bagi kalian yang ingin tahu cara membuat website dari dasar.

Jika kalian ingin belajar membuat website dengan cepat, pastikan kalian harus menguasai html terlebih dahulu.

Software yang digunakan untuk membuat website dengan html sangat beragam dan bisa kalian dapatkan secara gratis tanpa harus membelinya, namun ada juga software yang berbayar.


Belajar Dasar HTML Lengkap untuk Pemula

Belajar html tidaklah sesulit yang kalian bayangkan karena di sini sudah disediakan artikel untuk mempelajari bahasa html lengkap secara gratis.

Maulandaru.id telah mempersiapkan banyak tutorial html dasar untuk pemula yang ingin belajar membuat web dari awal.

Kita akan belajar html dari nol, mempelajari bagaimana cara membuat file html, memahami syntax atau tag html dan atribut html yang biasa digunakan.


Sejarah HTML



Html di temukan oleh Berners-Lee pada tahun 1990 dengan menspesifikasikan HTML dan beserta perangkat lunak yang digunakan.

Berners menjelaskan cara menggunakan HTML yang dibagi secara umum yaitu sebuah dokumen yang disebut "Tag HTML".


Perkembangan HTML



Pada saat pembuatan pertama HTML yakni versi 1.0, tidak banyak orang yang ikut berpatisipasi dan Fiturnya pun masih terbatas seperti heading, paragraf, list dan hypertext. kemudian menambahkan beberapa fitur lainnya seperti form, efek tebal dan miring pada versi HTML 2.0.

Pada HTML 3.0 sudah banyak orang yang berpartisipasi pada pembuatannya dan kemudian banyak mengalami revisi pada HTML 4.0 seperti link, image, table, form dan lain-lain.

Versi terakhir yang saat ini ada yaitu HTML 5 yang membawa banyak perubahan sekaligus menambahkan tag baru seperti <section>, <aside>, <header>, <footer> dan mendukung streaming video tanpa menggunakan flash.


Pengertian HTML



Apa itu html ? html singkatan dari Hyper Text Markup Language. Pengertian HTML adalah bahasa markah yang biasa digunakan untuk membuat halaman website.

Html menyusun sebuah halaman website menjadi sedemikian rupa seperti yang biasa kalian lihat di sebuah browser.


Manfaat dan Fungsi HTML



Sebagai bahasa markah, html mempunyai banyak fungsi dan kegunaan. Beberapa manfaat dari bahasa html diantaranya :

Pondasi dari sebuah web

Ibarat rumah jika tidak mempunyai pondasi maka rumah tersebut akan cepat roboh.  Begitu pula dengan sebuah website.

Jika kita tidak memiliki bahasa html sebagai pondasi, maka kita tidak akan bisa mengimplementasikan bahasa lainnya.

Membuat halaman web

Semua halaman web pasti dibuat dengan html karena html adalah dasar untuk membuat sebuah halaman website.

Menandai elemen atau bagian pada halaman web

Sebuah website tentunya memiliki beberapa bagian. Kita bisa menggunakan html untuk menandai bagian dari website seperti header, navigasi, konten dan footer.

Menambahkan objek

Dalam sebuah halaman web, kita bisa menambahkan objek menggunakan html seperti teks, audio, gambar dan video.

Membuat online form

Kita bisa membuat online form menggunakan html misalnya menangani pendaftaran secara online dan transaksi online.


Istilah Dalam HTML



Ada beberapa istilah dalam bahasa html yang mungkin belum kalian pahami, diantaranya adalah :

WWW

Apa itu www ? www singkatan dari World Wide Web. Pengertian www adalah sistem yang memungkinkan pengaksesan informasi dalam internet menggunakan hypertext.

HTTP

Apa itu http ? http singkatan dari Hyper Text Transfer Protokol. Pengetian http adalah protokol aplikasi untuk sistem informasi terdistribusi, kolaboratif dan hypermedia.

IP Address

Apa itu ip address ? pengertian ip address adalah sebuah alamat pada komputer agar saling terhubung dengan komputer yang lain.

Contoh ip address adalah 192.168.0.1 deretan angka ini misalnya merupakan ip address dari server Maulandaru.id.

Domain

Apa itu domain ? pengertian domain adalah sebuah nama unik untuk mengidentifikasikan suatu server komputer di internet sehingga lebih mudah mengaksesnya tanpa harus mengingat ip address server tersebut.

Contoh domain adalah seperti nama situs ini yaitu Maulandaru.id atau yang lainnya seperti google.com, youtube.com dan facebook.com.

Jadi saat kalian ingin mengakses situs ini kalian tidak perlu mengetikan ip address misalnya 192.168.0.1, kalian hanya perlu mengetikkan Maulandaru.id pada sebuah browser.

URL

Apa itu url ? url singkatan dari Uniform Resource Locator. Pengertian url adalah rangkaian karakter dengan format standard tertentu yang digunakan sebagai perujuk alamat di internet.

Contoh url adalah https://www.Maulandaru.id atau https://www.google.com

Tag

Apa itu tag html ? pengertian Tag html adalah teks khusus berupa suatu pasangan yang biasanya terdiri dari 2 bagian yang disebut tag awal <nama_tag> dan tag akhir </nama_tag>

Element

Apa itu element html ? pengertian Element html adalah isi dari suatu Tag yang berada diantara tag pembuka dan penutup, namun perlu anda ingat bahwa elemen yang berada diantara tag tidak hanya teks saja namun bisa juga berisi Tag yang lain.

Atribut

Apa itu atribut html ? pengertian Atribut html adalah informasi tambahan pada suatu Tag html contohnya jika kita ingin membuat tulisan rata tengah maka kita harus menambahkan atribut align.

<p align=“center”>Menampilkan tulisan rata tengah</p>

Perlu diingat bahwa setiap tag memiliki atribut yang berbeda-beda namun ada juga beberapa Tag yang memiliki atribut yang sama.


Persiapan Belajar HTML



Apa yang dibutuhkan untuk membuat website dari dasar ? sebelum belajar html, kita harus mempersiapkan hal-hal yang berguna untuk membuat website dengan html, diantaranya :

Komputer atau Laptop

Untuk belajar html kita membutuhkan sebuah komputer atau laptop. Sebenarnya hanya bermodalkan smartphone saja kita sudah bisa memulai untuk belajar html.

Aplikasi untuk belajar html di android sangat banyak, namun belajar html dengan smartphone kurang efektif, dalam mengetik kita harus ekstra sabar.

membuat website hanya dengan smartphone akan sulit karena banyak simbol-simbol yang mungkin bisa menyulitkan kalian dalam mengetik.

Untuk itu kita harus memiliki komputer atau laptop untuk membuat website. Jika kalian tidak memiliki budget, kalian bisa membeli komputer atau laptop dengan spesifikasi yang rendah.

Kita bisa membuat website dengan komputer atau laptop spek yang rendah. Software yang akan kita gunakan tidak membutuhkan komputer atau laptop dengan spesifikasi yang tinggi. Komputer atau laptop dengan ram 1 GB atau 2 GB saja sudah cukup untuk membuat website dengan html.

Web Browser

Selanjutnya kita membutuhkan web browser untuk membuat website dengan html. File html yang dibuat akan kita lihat hasilnya menggunakan web browser.

Apa itu web browser ? pengertian web browser adalah aplikasi yang digunakan untuk mengakses dan menampilkan halaman web.

Kalian bisa menggunakan browser google chrome atau mozilla firefox. Kalau untuk programming saya lebih suka menggunakan mozilla firefox.

Perlu diketahui bahwa untuk membuka file html di browser kita tidak membutuhkan koneksi internet, file html akan diakses secara offline.

Text Editor

Software apa yang digunakan untuk membuat website ? untuk mengetik kode html dalam membuat website, kita membutuhkan sebuah software text editor.

Apa itu text editor ? pengertian text editor adalah program yang digunakan untuk mengetik sebuah kode program.

Sebenarnya membuat website menggunakan notepad saja sudah cukup. Namun saya lebih suka menggunakan sublime text sebagai text editornya. Jadi kita akan membuat website menggunakan sublime.


Langkah Belajar HTML dari Dasar



Membuat website sederhana menggunakan html bisa dilakukan dengan :

Membuka text editor

Pertama yang harus kalian lakukan adalah membuka text editor untuk menuliskan kode programnya. Silakan buka software sublime textnya.

Membuat File HTML

Selanjutnya buat file baru kemudian simpan dengan nama belajar-membuat-website.html kita menambahkan ekstensi .html dibelakangnya.

Semua file html disimpan dengan format .html jadi untuk penulisannya yaitu nama-file.html, simpan pada lokasi yang mudah diingat. Disini saya menyimpannya di drive “F:\\\web\html\belajar-membuat-web.html”.

Membuka File HTML

Untuk membuka file html kita hanya perlu menuju ke lokasi dimana file tersebut disimpan, kemudian klik kanan pada file tersebut pilih open with -> mozilla firefox.

Kalian bisa memilih web browser yang lain seperti google chrome. Setelah itu lihat pada web browser, apa yang terjadi ? kosong karena kita belum mengetikan kode html apapun.

Struktur HTML

Html memiliki struktur dasar dalam membuat sebuah halaman website. Berikut ini adalah sturktur dasar kode html.

<html>
<head>
<title>judul halaman website</title>
<head>
<body>
Konten halaman website
</body>
<html>

Penjelasan :
  • <html></html> dikenal dengan elemen utama karena semua elemen berada didalamnya
  • <head></head> elemen ini berfungsi untuk memasukan informasi dari sebuah halaman tersebut misalnya keyword, deskripsi dan judul
  • <title></title> merupakan judul dari sebuah halaman web yang muncul pada tab browser
  • <body></body> berisi konten  yang ditampilkan pada browser ketika ada pengunjung yang mengakses pada halaman web tersebut

Syntax atau script html tergolong mudah dipahami dibandingkan dengan bahasa pemrograman lainya.
Salah satu contoh Tag HTML adalah tag <h1> sampai <h6>, tag <a>, tag <img>, tag <p> dan lain sebagainya.


Membuat Website dengan HTML



Sekarang kita akan mencoba untuk membuat website menggunakan html, silakan buka kembali file html yang tadi.

1. Ketik kode dasar html

Silakan ketik kode di bawah ini, untuk judulnya terserah mau kalian ganti atau nggak.

<html>
<head>
<title>Website Maulandaru.id</title>
<head>
<body>

</body>
<html>

2. Menambahkan judul

Judul yang dimaksud disini bukan judul halaman webnya, melainkan judul artikelnya.
Untuk membuat judul kita bisa menggunakan tag heading(h1 sampai h6)  HTML. Berikut ini adalah tag yang digunakan
•    <h1></h1> digunakan untuk membuat judul utama
•    <h2></h2> digunakan untuk judul bagian dari judul utama atau sub heading
•    <h3></h3> membuat judul dengan ukuran agak besar
•    <h4></h4> membuat judul dengan ukuran sedang
•    <h5></h5> membuat judul dengan ukuran agak kecil
•    <h6></h6> membuat judul dengan ukuran kecil

Tambahkan kode berikut ini dibawah kode <body> :
<h1>Website Pertama Milik Maulandaru.id</h1>

3.    Meletakan gambar

Dibawah heading kita tambahkan gambar agar lebih menarik. Terserah mau gambar apa saja, copy kan 1 gambar ke folder yang sama pada file html berada.

Kalau saya berarti copy ke folder “F:\\\web\html\” kemudian perhatikan nama dan ekstensi dari gambarnya, saya menamakan filenya dengan “clannad.png”.

Kita bisa menggunakan tag img html untuk menambahkan gambar. Untuk menampilkan gambar pada halaman web, silakan ketik kode berikut di bawah tag </h1> tadi.

<img alt=“anime clannad” src=“clannad.png” width=“300” height=“200” />
<br /><br />

Keterangan :
  • Tag img hanya mempunyai 1 tag yaitu dengan tag dasar <img />
  • Alt digunakan untuk menamakan sebuah gambar agar bisa dipahami oleh mesin pencari
  • Src digunakan untuk mencari nama dari sebuah gambar, apabila tidak berada dalam 1 folder atau berada di alamat website yang berbeda maka harus menuliskannya secara lengkap, contohnya http://namadomain.com/nama-gambar.jpg
  • Witdh untuk mengatur lebar gambar dan height untuk mengatur tinggi gambar
  • Tag <br /> digunakan untuk ganti baris

4. Membuat tabel

Selanjutnya kita tambahkan tabel biodata pada halaman website kita. Tag table html digunakan untuk membuat tabel. Ketik kode dibawah tag <br />, berikut kodenya :

<table border="1">
    <tr>
        <td>Nama</td>
        <td>Maulandaru</td>
    </tr>
    <tr>
        <td>Alamat</td>
        <td>Pemalang, Jawa Tengah</td>
    </tr>
</table>

Keterangan :
  • Atribut border=”1” digunakan untuk membuat garis pada tabel
  • Tag tr digunakan untuk membuat baris pada tabel
  • Tag td digunakan untuk membuat kolom pada tabel

5. Menambahkan paragraf

Untuk membuat paragraf pada html kita bisa menggunakan tag p html. Silakan ketik kode berikut di bawah kode </table>, berikut kodenya :

<p>saya adalah seorang blogger</p>
<p>saat ini saya sedang belajar membuat website menggunakan html</p>

6. Membuat list

Selanjutnya kita akan membuat list pada halaman web dengan html. Dengan fungsi tag ul html dan tag ol html, kita bisa membuat list. Ketik kode berikut dibawah kode </p>, berikut scriptnya :

<h4>Makanan Kesukaan</h4>
<ol>
    <li>Nasi Goreng</li>
    <li>Mie Ayam</li>
</ol>
<h4>Minuman Kesukaan</h4>
<ul>
    <li>Es Teh</li>
    <li>Jus Jeruk</li>
</ul>


Kode HTML Lengkap



Setelah menuliskan bagian-bagian dari kode html diatas, saatnya kita menggabungkan scriptnya menjadi satu.

<html>
<head>
<title>Website Maulandaru.id</title>
<head>
<body>
<h1>Website Pertama Milik Maulandaru.id</h1>
<img alt="anime clannad" src="clannad.png" width="300" height="200">
<br />
<br />
<table border="1">
    <tr>
        <td>Nama</td>
        <td>Maulandaru</td>
    </tr>
    <tr>
        <td>Alamat</td>
        <td>Pemalang, Jawa Tengah</td>
    </tr>
</table>
<p>saya adalah seorang blogger</p>
<p>saat ini saya sedang belajar membuat website menggunakan html</p>
<h4>Makanan Kesukaan</h4>
<ol>
    <li>Nasi Goreng</li>
    <li>Mie Ayam</li>
</ol>
<h4>Minuman Kesukaan</h4>
<ul>
    <li>Es Teh</li>
    <li>Jus Jeruk</li>
</ul>
</body>
<html>

Sekarang lihat di browser, maka akan tampil seperti berikut :

Belajar Dasar HTML Lengkap untuk Pemula


Nah website pertama kalian sudah jadi, tampilannya memang tidak bagus. kalian bisa menambahkan css agar terlihat lebih baik.

Jika kalian ingin membuat website yang keren, pastikan kalian sudah memahami html dan css.
Langkah awalnya adalah belajar html dan css dasar agar bisa membuat website yang keren.


Struktur HTML 5



Versi html yang terbaru adalah html5, di dalam versi html5 terdapat tambahan mengenai struktur dasarnya. Dibawah ini merupakan struktur html5 yaitu :

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Maulandaru.id</title>
</head>
<body>
     <!-- Ini adalah komentar -->
     <p>halaman website Maulandaru.id</p>
</body>
</html>

Keterangan :
  • <!DOCTYPE html> merupakan deklarasi tipe dokumen
  • <meta charset=“UTF-8”> digunakan untuk memberitahu web browser mengenai pengkodean karakter yang sesuai dengan ketentuan UTF-8


Materi Panduan Belajar HTML



tutorial yang saya berikan pada artikel belajar dasar HTML lengkap untuk pemula hanya sekilas saja untuk mengetahui dasar bahasa HTML.


Kesimpulan



Setelah menyelesaikan tutorial html dasar lengkap untuk pemula kalian akan memahami cara membuat website dari dasar dengan cepat.

Html adalah bahasa yang wajib dipahami terlebih dahulu jika kalian ingin menjadi pembuat web (Web developer).

Perlu diketahui bahwa kalian tidak perlu menghafal semua kode html secara lengkap. kalian hanya perlu memahami fungsi dari masing-masing tag html.

Caranya adalah dengan terus berlatih membuat halaman web dengan html maka kalian akan ingat diluar kepala dengan sendirinya.

Langkah selanjutnya untuk membuat website keren dari dasar adalah dengan mempelajari css.

Jika kalian belum menguasai css, kalian bisa belajar css dasar yang sudah saya tulis di situs ini, selamat belajar.

0 Comentarios