Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Panduan Dasar Belajar HTML untuk Pemula

Advertisement

Belajar HTML – HTML merupakan dasar bagi web developer dalam membuat halaman web. HTML (HyperText Markup Language) adalah bahasa pemograman markup yang digunakan untuk membuat atau menuliskan kode program sehingga terbentuk suatu halaman website. HTML kurang tepat disebut bahasa pemograman karena pada bahasa HTML disusun menggunakan tanda (mark) atau biasa disebut tag. Tanda atau tag ini berfungsi untuk menandai tipe text tertentu pada halaman web. Kita ambil contoh untuk membuat baris paragraf menggunakan tag <p>, membuat heading kita gunakan <h>, untuk membuat tabel kita gunakan <table>.

Baca juga, Membuat Website Sekolah Menggunakan WordPress

Untuk menyusun sebuah halaman web, HTML harus disimpan dalam bentuk file dengan ekstensi .html. Selain itu, untuk membangun sebuah halaman web, tidak cukup menggunakan HTML saja, harus ada bahasa lain seperti CSS dan JavaScript.

Daftar Isi hide

Struktur Dasar HTML

HTML merupakan struktur atau kerangka dasar dalam suatu halaman web. CSS menjadikan halaman web lebih menarik dengan mengatur tampilan atau desain web tersebut. Sedangkan JavaScript dibutuhkan untuk membuat halaman web menjadi dinamis dan interaktif. Untuk mengakses halaman web dibutuhkan web browser seperti Mozila dan Chrome.

Agar browser dapat menterjemahkan sebuah dokumen HTML, maka dibutuhkan struktur dasar dengan menambahkan informasi DTD (Document Text Declaration). Dengan menambahkan informasi DTD ini, web browser tau bahwa dokumen yang sedang diproses adalah sebuah halaman HTML. Contoh struktur dasar HTML dengan DTD <!DOCTYPE html> :

Struktur dasar HTML pada web browser:

Struktur HTML

Penjelasan mendalam tentang struktur di atas akan kami paparkan pada bahasan khusus di bawah ini. Jika kita buat dalam bentuk layout akan kelihatan seperti di bawah ini.

Belajar HTML

Belajar HTML – Mengenal Text Editor

Text editor merupakan aplikasi atau software yang digunakan untuk membuat atau memodifikasi suatu syntax atau kode program sehingga menjadi sebuah aplikasi baru. Contoh sederhana aplikasi text editor yang sudah kita kenal selama ini adalah Notepad yang terdapat pada sistem operasi Windows.

Ada banyak jenis text editor yang dapat digunakan oleh programmer dalam menuliskan kode program. Beberapa diantaranya yang kami rekomendasikan adalah sebagai berikut:

Notepad++

Notepad++ merupakan aplikasi text editor sederhana yang dikembangkan dari notepad bawaan Windows dengan banyak dukungan bahasa pemograman, salah satunya adalah HTML. Aplikasi Notepad++ didukung oleh beberap fitur diantaranya shortcut customization, text-shortening, macro recording, auto-completion, dan lain-lain.

Notepad++ dapat digunakan secara gratis. Tertarik ingin menggunakan text editor ini? Silakan kunjungi langsung laman Notedpat++ di sini.

Sublime Text

Sublime Text merupakan text editor yang banyak digunakan oleh web developer dan dapat diinstall pada sistem operasi Windows, Linux, maupun Mac. Di Sublime Text tersedia tema yang dapat diatur sesuai selera.

Belajar HTML - Tampilan Sublime Text

Sublime Text dapat digunakan secara gratis dengan batasan waktu tertentu. Untuk menggunakannya secara terus-menerus kita diharuskan untuk membeli lisensi sekitar $99. Tertarik menggunakan Sublime Text, silahkan kunjungi langsung laman resmi untuk mendapatkan aplikasi ini.

Visual Studio Code

Visual Studio Code menjadi aplikasi terakhir yang kami rekomendasikan untuk digunakan oleh programmer. Visual Studio Code dikembangkan oleh Microsoft dan dapat digunakan secara gratis. Sama halnya dengan Sublime Text, VS Code mensuport semua sistem operasi termasuk Linux.

Visual Studio Code mendukung banyak bahasa pemograman, salah satunya HTML. Selain itu terdapat banyak fitur yang tersedia di Visual Code diantaranya fitur debuggingGit controlsyntax highlighting, code completionsnippets, dan code refactoring.

Belajar HTML - Tampilan Visual Studio COde

Bagi yang ingin menggunakan text editor bawaan Microsoft ini, silakan kunjungi langsung laman Visual Studio Code lalu pilih paket instalasi sesuai sistem operasi yang digunakan.

Belajar HTML – Mengenal Tag, Element, dan Atribut

Tag, atribut, dan element merupakan komponen penting yang harus kita pahami pada saat belajar html. Mari kita bahas satu-persatu

Tag

Tag merupakan penanda atau kode yang ditempatkan sebelum dan sesudah isi text/kalimat/paragraf. Fungsinya adalah mendefinisikan suatu text, kalimat, atau paragraf di halaman browser. Penulisan tag menggunakan tanda kurung siku. Untuk tag pembuka gunakan < … > sedangkan tag penutup terdapat tambahan slash </… >.

Contoh penggunaan tag paragraf:

struktur element

Tag selalunya dibuat berpasangan, tag pembuka – isi tag – tag penutup, tetapi terdapat juga baris html yang tidak menggunakan tag penutup.

Tag terdiri atas berbagai jenis dengan fungsi masing-masing. Berikut tag umum yang sering digunakan:

TagFungsi
<!DOCTYPE html>mendefinisikan tipe dokumen HTML5
<html>memulai dokumen html
<head>mendefinisikan bagian head
<body>mendefinisikan bagian body
<title>mendefinisikan judul halaman
<h1> s.d <h6>membuat heading 1 s.d 6
<p>membuat paragraf
<!– –>membuat komentar
<link>mendefinisikan link antar dokumen
<table>membuat tabel
<form>membuat kotak formulir
dst..

Untuk mengetahui lebih banyak tag pada html, silakan kunjungi link berikut ini (klik di sini).

Harap diperhatikan, jika terdapat beberapa tag yang digunakan pada sebuah text atau kalimat, tag pembuka yang pertama kali ditulis, harus ditempatkan pada akhir tag penutup. Contoh penulisan tag yang benar dan salah:

penulisan tag yang benar

Tag yang pertama dibuat harus ditutup terakhir, maka yang benar untuk penulisan tag di atas adalah nomor 2.

Element

Jika kita menuliskan baris html sebenarnya kita telah mendefinisikan sebuah element. Jadi element adalah baris html yang terdiri dari tag pembuka – isi tag – tag penutup, seperti gambar berikut ini.

struktur element

Element bisa saja hanya terdiri atas satu baris html, tetapi dapat juga gabungan dari element-element lain yang disebut dengan nested element. Contohnya:

Pada contoh di atas, terdapat 3 element yaitu <html>, <head>, dan <title>:

  • element <html> berisi element <head></head>
  • element <head> berisi element <title></title>
  • element <title> berisi tag pembuka – isi tag – tag penutup

Atribut

Komponen penting lain dalam terdapat pada halaman html adalah atribut. Atribut adalah informasi tambahan yang dituliskan pada tag awal suatu elemen, misalnya mengatur posisi kalimat, menambahkan warna, dan lain-lain.

struktur element

Penulisan atribut selalui diikuti dengan nilai atribut atau disebut dengan value yang diapit oleh tanda petik. Untuk atribut dengan value berupa text harus menggunakan tanda petik baik ganda (“) maupun tunggal (‘), sedangkan value berupa angka penggunaan tanda menjadi opsional. Penggunaan atribut pada suatu element juga dapat digunakan lebih dari satu. Gunakan spasi untuk memisahkan atribut satu dengan lainnya. Selain itu, atribut yang memiliki lebih dari satu kata harus dihubungkan dengan tanda strip (-) bukan spasi.

Beberapa jenis atribut yang biasa digunakan pada halaman html:

  • Atribut align pada tag <p> digunakan untuk mengatur posisi paragraf
  • Atribut href pada tag <a> digunakan untuk menempatkan halaman link yang dituju
  • Atribut src pada tag <img> digunakan untuk path dari suatu gambar
  • Atribut width dan height pada tag <img> digunakan untuk mengatur ukuran lebar dan tinggi gambar
  • Atribut alt pada tag <img> digunakan untuk menambahkan informasi pada gambar (alternative text)
  • Atribut style pada element digunakan untuk menambahkan gaya bisa berupa warna, font, size, dan lain-lain
  • dst..

Contoh beberapa penggunaan atribut pada element html

Atribut href

Atribut href berfungsi untuk menyatakan halaman tujuan dari suatu link. Atribut href digunakan pada tag <a>. Contoh penggunaanya:

Agar link di atas tampil di tab baru browser, tambahkan atribut target dengan value “_blank”, contohnya:

Atribut src

Atribut src digunakan untuk menampilkan suatu gambar pada halaman html menggunakan tag <img>. Contoh:

Atribut alt, width, dan height

Atribut alt (alternate) berfungsi sebagai keterangan gambar jika gambar gagal tampil di halaman browser. Sedangkan width dan height untuk mengatur lebar dan tinggi gambar. Ketiga atribut ini bisa digabungkan dengan atribut src di atas sehingga menjadi seperti ini:

Belajar HTML – Mengenal Head dan Body

Element Head

<Head> merupakan element html yang terletak antara tag <html> dan <body>, berfungsi sebagai tempat metadata yaitu informasi yang berkaitan dengan halaman html yang dibuat. Metadata tidak ditujukan untuk pengunjung web, melainkan untuk web browser itu sendiri sehingga tidak akan muncul pada halaman web. Dalam element <head> terdapat element lain yaitu <title>, <meta>, <style>, <link>, dan <script>.

Element Title

Element <title> adalah element yang berfungsi sebagai judul atau title dokument web yang bisa kita lihat pada title bar web browser. Contoh penulisan element <title> :

Element <title> pada web browser:

Element title HTML

Element Meta

Seperti yang dijelaskan sebelumnya, metadata berfungsi sebagai informasi mengenai halaman web yang ditujukan untuk web browser dan robot mesin pencari seperti Google serta layanan web lainnya.

Element <meta> terdiri dari berbagai jenis, element yang wajib ada di halaman html adalah character set, yang lain sifatnya opsional.

Berikut beberapa contoh penggunaan element <meta> :

1. meta charset (character set)

Untuk text editor tertentu, meta charset biasa otomatis ditulis pada saat membuat struktur html sederhana.

2. meta description

Meta description berungsi untuk menambahkan informasi atau deskripsi singkat tentang web yang dibuat. Untuk meta deskripsi akan muncul di mesin pencarian jika halaman web sudah di index oleh search engine.

3. meta keywords

Menuliskan meta keywords sama pentingnya dengan meta description, yaitu menuliskan keyword-keyword yang mewakili konten dan deskripsi web yang telah dibuat.

4. meta author

Meta author menginformasikan pemilik atau pembuat halaman web.

5. meta viewport

Menambahkan meta viewprot ke dalam element html bertujuan untuk membuat halaman web menjadi responsif, menyesuaikan dengan device atau perangkat yang digunakan untuk mengakses web tersebut.

Element Style

Element <style> berfungsi untuk memberikan style atau mengatur tampilan halaman web. Biasa element <style> dibuat pada satu halaman tersendiri mengunakan CSS. Contoh element <style>

Element Link

Element <link> berfungsi untuk menghubungkan halaman web dengan file atau halaman lain salah satunya adalah CSS. Contoh menghubungkan file style.css (berada di folder yang sama dengan index.html):

Element Script

Element <script> berfungsi untuk menghubungkan halaman web dengan file Javascript. Sama halnya dengan CSS, javascript juga dapat langsung dituliskan ke dalam halaman html. Contoh penggunaan element <script>

Jika JavaScript berupa file, element <script> yang harus ditambahkan adalah

Element <head> di atas dapat kita susun seperti berikut ini:

Element <head> pada web browser:

Element head HTML

Belajar HTML – Membuat Heading

Untuk membuat judul atau subjudul dapat menggunakan tag heading <h>. Tag <h> terdiri atas 6 tingkatan yaitu: h1, h2, h3, h4, h5, h6. Heading 1 (h1) digunakan untuk judul utama subuah konten blog atau web. h2 sampai h6 digunakan untuk subjudul sesuai tingkatan dari judul setiap artikel. Semakin besar angka heading, semakin kecil tulisan subjudul tersebut. Format penulisan heading pada html:

Contoh penggunaan tag <h> sebagai berikut:

Element <heading> pada web browser:

Belajar HTML - element heading

Belajar HTML – Membuat Komentar

Komentar dalam sebuah halaman html kadang perlu ditambahkan untuk memberikan keterangan pada suatu baris html. Baris komentar ini tidak akan tampil di halaman browser. Tag yang digunakan adalah <!– untuk tag pembuka, dan –> untuk tag penutup. Format penulisan baris komentar:

Contoh penggunakan baris komentar pada halaman html seperti berikut (kita gunakan kode di atas):

Belajar HTML – Membuat Paragraf

Untuk membuat suatu paragraf pada html dapat menggunakan tag <p> … </p>. Format penulisan:

Contoh penggunaan tag <p> seperti berikut ini:

Element paragraph pada web browser:

Belajar HTML - element paragraf

Mengatur Posisi Paragraf

Untuk mengatur posisi sebuah paragraf gunakan atribut align dengan value “left” untuk rata kiri, “right” untuk rata kanan, “center” untuk rata tengah, dan “justify” untuk rata kiri-kanan.

Element paragraph dengan atribut align pada web browser:

Mengatur posisi paragraf

Membuat Baris Baru (Break)

Untuk membuat baris baru dalam suatu text pada halaman html dapat menggunakan tag break yaitu <br>, <br />, atau <br/>. Contoh penerapannya bisa kita aplikasikan pada bait pantun berikut ini:

Element <br> pada web browser:

Belajar HTML - element break

Membuat Garis

Pada halaman html juga bisa ditambahkan garis horizontal menggunakan tag <hr> (horizontal rule). Contoh penggunaannya sebagai berikut:

Element <hr> pada web browser:

Belajar HTML - element horizontal rule

Belajar HTML – Mengenal Format Text

Format text berfungsi untuk membuat sebuah text menjadi berbeda dari bentuk awal, tujuannya untuk mempertegas, memperjelas, atau membedakan suatu text dengan text atau kalimat yang lain. Format text dalam html terdiri dari beberapa jenis diantaranya huruf tebal bisa menggunakan bold atau strong, huruf miring gunakan italic, huruf garis bawah menggunakan underline. Atau untuk menuliskan rumus kimia bisa menggunakan subscript untuk kecil bawah (jumlah atom) atau superscript untuk kecil atas (jumlah muatan). Berikut format text yang bisa digunakan pada halaman html:

  • tag <b> : huruf tebal (bold)
  • tag <i> : huruf miring (italic)
  • tag <u> : huruf garis bawah (underline)
  • tag <sub> : huruf kecil di bawah (subscript)
  • tag <sup> : huruf kecil di atas (superscript)
  • tag <strong> : huruf tebal
  • tag <ins> : huruf garis bawah
  • tag <mark> : text berwarna
  • tag <del> : garis tengah huruf

Contoh penggunaan format text:

Format text HTML pada web browser:

Format text HTML

Belajar HTML – Menambahkan Image

Gambar atau image merupakan komponen yang tidak dapat dipisahkan dari sebuah halaman html. Dengan menambahkan image ke dalam halaman html, web jadi kelihatan lebih menarik selain itu untuk memperkuat informasi di dalam halaman web itu sendiri.

Untuk menambahkan image ke dalam html, gunakan tag <img> dengan beberapa atribut tambahan seperti src untuk link image, alt untuk alternate text image, width dan height untuk lebar dan tinggi image seperti yang telah dijelaskan di atas.

Khusus untuk atribut src, value dapat berupa nama file image (tanpa spasi) yang disimpan dalam folder yang sama dengan file html, atau dapat juga berupa link gambar. Contoh menambahkan gambar dengan tag <img>.

Contoh pertama saya ingin membahkan gambar logo Vokasi yang disimpan pada komputer (file gambar berada satu folder dengan file index.html)

Contoh kedua menambahkan gambar yang diperoleh dari internet yaitu berupa link:

Contoh ketiga menambahkan atribut title yang berfungsi untuk menambahkan keterangan yang muncul ketika mouse diarahkan ke gambar tersebut:

Contoh keempat menambahkan atribut title, alt, weight, dan height pada salah satu image di atas:

Element <image> pada web browser:

Belajar HTML - Menambahkan image

Belajar HTML – Menambahkan Audio

Sama halnya seperti image, audio juga dapat ditambahkan ke dalam halaman web. Kalau image kita menggunakan tag <img> tanpa tag penutup, sedangkan untuk element audio kita gunakan tag <audio> … </audio>. Sebelum menambahkan audio, pastikan file audio tersebut berada di folder yang sama dengan file index.html. Atribut yang bisa ditambahkan pada element audio berdasarkan fungsinya adalah sebagai berikut:

  • Atribut controls. Untuk menampilkan tombol play/stop, volume, time, seperti halnya pemutar audio kita perlu menambahkan atribut control ke dalam element audio.
  • Atribut controls muted. Atribut ini digunakan jika kita ingin mengset tampilkan pemutar audio pada posisi volume mute.
  • Atribut autoplay. Jika ingin memutar audio pada saat halaman web tampil, tambahkan atribut autoplay ke dalam element audio
  • Atribut loop. Jika musik ingin dimainkan berulang-ulang gunakan atribut loop dengan value

Jika atribut bernilai “true”, pada element audio cukup dituliskan atributnya saja, misalnya:

Untuk penerapannya di halaman web, silakan pilih atribut audio sesuai fungsi yang diinginkan. Contoh menambahkan audio dengan atribut muted dengan menampilkan tombol kontrol:

Element <audio> pada web browser:

Belajar HTML - Menambahkan audio

Untuk menambahkan musik sebagai background web, gunakan atribut loop dan autoplay serta hidden untuk menyembunyikan kontrol musik. Contoh:

Format audio yang umum digunakan pada html:

File FormatMedia Type
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/wav

Berikut jenis-jenis browser yang mendukung element audio

ElementChromeEdgeFIrefoxSafariOpera
<audio>4.09.03.54.010.5

Untuk format audio yang support berdasarkan jenis browser yang digunakan:

BrowserMP3WAVOGG
Edge/IEYESYES*YES*
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

Belajar HTML – Menambahkan Video

Untuk menambahkan video ke dalam halaman web, kita ganti format penulisan element audio di atas dengan mengganti tag <audio> … </audio>. Atribut yang bisa digunakan untuk menambahkan element video adalah:

  • Atribut controls, berfungsi menambahkan tombol control (play/stop, volume,
  • Atribut autoplay, berfungsi menjalankan video secara otomatis saat halaman web di muat
  • Atribut loop, berfungsi menjalankan video terus-menerus
  • Atribut muted, berfungsi menonaktifkan volume
  • Atribut width dan height, berfungsi mengatur lebar dan tinggi layar video

Penulisan nilai atribut boleh ditiadakan jika atribut tersebut bernilai “true”, sama seperti element audio di atas. Contoh menambahkan video ke dalam halaman html:

Element <video> pada web browser:

Belajar HTML - Menambahkan video

Format video yang biasa digunakan pada halaman web:

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Jenis browser yang mendukung element video:

ElementChromeEdgeFIrefoxSafariOpera
<audio>4.09.03.54.010.5

Format video yang support berdasarkan jenis browser:

BrowserMP4WebMOgg
EdgeYESYESYES
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

Tambahan

Untuk browser yang tidak bisa menjalankan audio maupun video yang diset otomatis (autoplay), silakan diatur permission, ubah dari block menjadi allow audio and video. Contoh pada browser Firefox berikut ini:

Mengatur permission pada browser

Belajar HTML – Membuat Daftar (List)

Daftar atau list dalam sebuah halaman html berfungsi untuk menampilkan suatu daftar atau dapat juga menjelaskan suatu kronologis maupun cara kerja. Umumnya, list pada html terdiri atas dua jenis yaitu:

Ordered List (ol)

Ordered list merupakan list yang dibuat secara berurutan. Tipe list seperti ini cocok untuk menjelaskan suatu tahapan, prosedur, maupun cara kerja, menjelaskan suatu kronologis kejadian, atau dapat juga daftar instruksi yang dibuat secara berurutan.

Secara default ordered list berupa angka desimal dengan tag yang digunakan adalah <ol> dan </ol> dan tag <li> dan </li>.

Unordered List (ul)

Unordered list merupakan list yang tidak diurutkan. Tipe list seperti ini sesuai untuk daftar yang tidak menjelaskan kronologis, prosedur, seperti halnya ordered list di atas. Contohnya dapat berupa list alat dan bahan, jenis-jenis, dan lain.lain.

Secara default unordered list berupa lingkaran kecil (disk). Tag yang digunakan adalah <ul> … </ul>.

Contoh penggunaan ordered list dan unordered list:

Hasil ordered list dan unordered list pada web browser:

Membuat list di HTML

Selain list default di atas, kita juga dapat membuat beberapa bentuk list lain dengan menambahkan atribut type sebagai berikut:

  • Ordered list:
    • type=”A” untuk list huruf kapital, contoh: A, B, C, D, dan seterusnya
    • type=”a” untuk list huruf kecil, contoh: a, b, c, d, dan seterusnya
    • type=”I” untuk list huruf romawi besar, contoh: I, II, III, IV, dan seterusnya
    • type=”i” untuk list huruf romawi kecil, contoh: i, ii, iii, iv, dan seterusnya
  • Unordered list:
    • type=”none” untuk list yang tidak memiliki simbol
    • type=”square” untuk list berupa simbol persegi
    • type=”circle” untuk list berupa simbol lingkaran

Contoh penggunaan ordered list dengan atribut type tertentu:

Hasil ordered list dengan karakter tertentu pada web browser:

Membuat custom list di HTML

Contoh unordered list dengan type tertentu:

Hasil unordered list dengan type tertentu di web browser:

Membuat custom list di HTML

Untuk ordered list, kita bisa membuat daftar atau list dimulai pada angka atau abjad tertentu dengan menambahkan atribut start. Contoh penggunaannya berikut ini.

Hasil list pada nomor tertentu di web browser:

Custom number list

Selain cara di atas, list juga dapat dibuat menggunakan logo atau image dengan menambahkan atribut style CSS, seperti berikut ini:

Hasil list dengan image tertentu pada web browser:

List dengan image

Nested List

Nested list merupakan list yang terdapat list lain di dalamnya. Contoh penggunaan nested list seperti berikut ini:

Hasil nested list pada web browser:

Nested list di HTML

Description List

Description list merupakan list yang terdiri dari suatu kata, frasa, atau istilah yang nantinya akan dideskripsikan atau dijelaskan lebih lanjut. Tag yang digunakan untuk membuat description list adalah:

  • <dl> (description list), tag yang digunakan untuk memulai description list
  • <dt> (description term), tag yang digunakan untuk kata, frasa, atau istilah yang akan dideskripsikan
  • <dd> (description description), tag yang digunakan untuk mendiskripsikan dt

Contoh penggunaan description list:

Hasil description list pada web browser:

Description list di HTML

Belajar HTML – Membuat Tabel

Tabel merupakan struktur yang digunakan untuk menampilan suatu data dalam bentuk kolom dan baris. Suatu tabel terdiri dari tiga bagian yaitu table head (th) untuk header tabel, table row (tr) untuk baris tabel, dan tabel data (td) untuk sel atau kolom dalam sebuah tabel.

Untuk membuat tabel di html, gunakan tag <tabel> … </table>, jumlah baris gunakan tag <tr> … </tr>, sedangkan tag <td> … </td> untuk sel tabel.

Contoh membuat tabel dengan jumlah baris 2 dan kolom 3 (untuk tag <th> dapat diabaikan terlebih dahulu).

Hasil tabel pada web browser:

Membuat tabel di HTML

Untuk menambahkan header tabel gunakan tag <th> … </th>. Misalnya suatu tabel terdiri atas 4 kolom yaitu Nomor, Nama, Kelas, dan Kompetensi Keahlian, seperti contoh berikut:

Hasil tabel dengan header di web browser:

Membuat tabel header di HTML

Atribut pada Tabel

Tabel pada html juga dapat dilakukan optimasi maupun modifikasi sedemikian rupa sesuai kebutuhan, seperti halnya di Microsoft Office Excel. Beberapa atribut yang dapat kita gunakan pada tabel adalah sebagai berikut:

Border

Tag tabel di atas tidak menggunakan garis atau border. Untuk menambahkan border gunakan atribut border dengan value sesuai keinginan. Value di sini menyatakan ukuran dari border tersebut. Contoh kita akan membuat tabel di atas dengan border = 1, silakan tambahkan atribut border=”1″ pada tag <table> seperti berikut ini.

Hasil tabel dengan border di web browser:

Membuat tabel border

Cellpadding

Atribut cellpadding berfungsi untuk mengatur jarak suatu text dengan garis (border) dari suatu sel. Contoh penggunaan atribut cellpadding:

Hasil penambahan atribut cellpadding pada web browser:

Membuat cellpadding tabel

bgcolor

Atribut bgcolor berfungsi untuk memberikan warna pada sel tabel. Atribut ini dapat diterapkan untuk satu baris atau hanya satu buah sel saja. Contoh penerapan atribut bgcolor adalah sebagai berikut:

Hasil menambahkan warna tabel di web browser:

Membuat background color tabel

rowspan dan colspan

Atribut rowspan berfungsi untuk menggabungkan beberap baris sel, sedangkan colspan digunakan untuk menggabungkan kolom sel. Kalau di office biasa kita menggunakan merge. Nilai atribut menyatakan berapa banyak sel yang digabungkan. Contoh penggunaan atribut ini adalah sebagai berikut:

Hasil merge cell tabel pada web browser:

Membuat merge cell

Pelajari selengkapnya, Panduan Membuat Tabel di HTML

Belajar HTML – Membuat Link

Link atau hyperlink merupakan salah satu element html yang berfungsi untuk menghubungkan suatu halaman web ke halaman web lain. Selain itu, link juga dapat difungsikan untuk mengarah ke entitas lain sepeti gambar, dokumen/file, lagu, video, dan lain-lain.

Untuk membuat elemen link di html, tag yang digunakan adalah <a> (anchor) dengan tambahan atribut href (hyperlink reference) dengan value berupa link absolut dan link relatif. Apa perbedaannya?

Link absolut adalah alamat atau link yang mencantumkan url secara lengkap mulai dari protokol, link domain, dan link file atau halaman tujuan. Sedangkan link relatif adalah alamat atau link yang mengarah ke halaman lain pada direktori yang berada di komputer yang sama. Contoh:

Jenis Link

Nomor 1 merupakan link absolut berupa alamat url lengkap. Sedangkan nomor 2 berupa link relatif, di mana link diarahkan ke halaman about.html yang terdapat pada direktori profil.

Selain menambahkan atribut href beserta valuenya, membuat link juga membutuhkan anchor text, fungsinya adalah untuk melakukan eksekusi terhadap link tersebut. Kita bahas dulu macam-macam anchor text berikut ini:

Anchor Text

Anchor text merupakan kata, frasa, atau kalimat yang berisi tautan atau link yang dapat diklik. Umumnya anchor text berwarna biru. Selain mengarahkan ke halaman tertentu, anchor text juga berfungsi untuk mendeskripsikan halaman tersebut. Berikut ini macam-macam anchor text yang bisa diterapkan pada element link:

  • Generic, jenis anchor text berupa petunjuk atau perintah, misalnya “klik di sini”, “daftar di sini”, dan lain-lain
  • Brended, jenis anchor text berupa nama atau jenis merk/produk, misalnya W3schools
  • Exact-Match, jenis anchor text berupa kata kunci yang sama persis dengan halaman web tujuan
  • Partial-Match, jenis anchor text yang menggunakan kata kunci alternatif dari halaman web yang dituju
  • Naked LInk, jenis anchor text yang menampilkan link atau tautan secara langsung
  • Image, jenis anchor text yang diambil dari alt text gambar tersebut

Dari penjelasan di atas, dapat kita susun struktur element link sebagai berikut:

Belajar HTML - Struktur link

Contoh pembuatan link pada html:

Hasil menambahkan anchor text di web browser:

Anchor text di HTML

Internal dan Eksternal Link

Link dapat diarahkan ke halaman internal maupun halaman eksternal. JIka link diarahkan ke halaman internal, maka link masih berada pada domain atau komputer yang sama, sedangkan eksternal link, maka link tersebut diarahkan ke halaman atau domain lain.

Untuk internal link akan kita bahas lebih dalam di berikut ini.

Siapkan 3 dokumen html tambahan, beri nama masing-masing dengan nama about.html dan contact. html (untuk file index.html bisa gunakan file sebelumnya). Simpan di folder yang sama.

Belajar HTML - membuat file contact dan about

Selanjutnya, tuliskan kode berikut ke masing-masing file. Untuk menghubungkan ketiga halaman di atas, element link harus ditambahan atribut href dengan value sesuai dengan nama file di atas.

Kode fIle index.html

Halaman home pada web browser:

Internal link HTML

Kode file about.html

Halaman tentang pada web browser:

Internal link HTML

Kode file contact.html

Halaman contact pada web browser:

Internal link HTML

Jika di klik tautan internal tersebut akan terlihat seperti berikut ini:

Untuk penggunaan eksternal link cukup dengan menambahkan link luar ke dalam atribut href. Contoh eksternal link yang mengarah ke halaman W3Schools:

Atribut Element Link

Selain menggunakan href sebagai atribut link tujuan, element dari sebuah link dapat juga ditambahkan atribut lain seperti target, title, style, dan lain-lain.

Atribut target

Atribut target berfungsi untuk menentukan tempat membuka suatu halaman link. Jenis-jenis value untuk atribut target adalah:

  • _self, membuka link pada halaman sendiri (default target)
  • _blank, membuka link pada halaman atau tab baru
  • _parent, membuka link pada frame induk
  • _top, menuju ke posisi atas suatu halaman

Contoh membuka halaman pada tab baru dengan value _blank:

Setelah di klik anchor text di atas, link W3Schools akan tampil pada halaman atau tab baru.

Membuat Form

Form atau formulir merupakan sarana yang dapat digunakan untuk mengumpulkan informasi dari suatu user misalnya identitas atau profil. Form juga dapat difungsikan untuk registrasi atau login seperti contoh berikut:

Contoh form registrasi
Contoh form login

Untuk membuat form pada halaman web seperti contoh di atas dapat menggunakan element HTML berupa <form>:

Element form terdiri atas element-element lain yang memilliki fungsi masing-masing yaitu:

Element Input

Element input merupakan element yang banyak digunakan pada form html dan berfungsi untuk memasukkan teks, data, atau informasi lain. Tag yang digunakan dalam element input adalah <input> tanpat tag penutup atau biasa disebut dengan istilah self closing tag.

Di dalam element input diperlukan tambahan atribut type dengan value sesuai jenis inputan form yang kita inginkan, beberapa diantaranya:

  • Element input dengan type=”text”, berfungsi untuk menerima input berapa text seperti nama, username, alamat, tempat lahir, dan lain-lain
  • Element input dengan type=”password”, berfungsi untuk menerima input berupa password yang disamarkan dengan tanda titik
  • Element input dengan type=”radio”, input berumessegepa radio button di mana user hanya bisa memilih salah satu dari pilihan yang telah disediakan
  • Element input dengan type=”checkbox”, input berupa checkbox atau centang di mana user dapat memilih lebih dari satu pilihan yang telah disediakan
  • Element input dengan type=”number”, berungsi untuk menerima input berupa nomor atau angka
  • Element input dengan type=”date”, berfungsi untuk menerima input berapa tanggal
  • Element input dengan type=”email”, berfungsi untuk menerima input berupa email

Selain penggunaan atribut type, element input juga perlu ditambahkan atribut lain seperti id, name, dan value.

Element Textarea

Element satu ini memiliki fungsi sama dengan element input dengan type=”text” yaitu menerima input berupa text. Bedanya pada textarea dapat menerima lebih banyak karakter teks misalnya untuk form isian lengkap atau komentar. Untuk membuat element textarea gunakan tag <textarea> … </textarea>. Untuk mengcostum ukuran textarea tambahkan atribut row dengan value jumlah baris yang diinginkan, dan atribut cols untuk lebar textarea yang digunakan, contoh jumlah baris 5 dengan lebar textarea 40:

Element Select

Jika suatu formulir dibutuhkan informasi seperti nama kabupaten atau provinsi yang dibuat dalam bentuk menu dropdown dapat menggunakan element ini dengan tag <select> … </select>. Di dalam element tersebut harus kita tambahkan element lain menggunakan tag <option> … </option> :

Element Button

Biasa pada halaman form login atau registrasi selalui dilengkapi dengan tombol kirim, submit, login, atau sejenisnya. Kesemua tombol tersebut merupakan fungsi dari element bottom. Sebenarnya fungsi ini juga dapat menggunakan element input dengan type=”submit”. Untuk membuat element ini gunakan tag <button> … </button>.

Element Label

Element label difungsikan untuk menambahkan informasi maupun keterangan terkait dengan jenis inputan yang digunakan pada form HTML dan selalu disandingkan dengan element input yang dipakai. Gunakan tag <label> … </label> untuk membuat element ini. Element label juga dapat ditambahkan dengan atribut lain seperti for=”value” untuk menghubungkan label dengan element lain pada form.

Contoh membuat element form:

Hasil pembuatan form pada halaman HTML di web browser:

Membuat form HTML

Pelajari Selengkapnya, Cara Membuat Form dengan HTML

Mengenal Element Block dan Inline

Ditinjau dari cara browser menampilkan halaman web, element HTML dapat kita bagi ke dalam dua jenis yaitu element block dan element inline. Mari kita bahasa kedua jenis element ini.

Element Block

Element block pada HTML akan memenuhi lebar dari halaman web browser (penuh ke kanan). Jika terdapat element block lain akan didefisinikan pada block atau baris berikutnya bukan disamping block sebelumnya.

Tag yang termasuk ke dalam element block adalah:

Element inline

Element Inline

Element inline pada HTML sebatas lebar dari teks atau konten tersebut. JIka terdapat element inline lain akan didefinisikan disamping element sebelumnya bukan membuat baris baru.

Tag yang termasuk ke dalam element inline adalah:

Element block

Contoh perbandingan element block dan inline pada halaman HTML:

Hasil pada halaman web browser:

Element block dan inline

Untuk memberjelas sejauh mana batas element block dan inline, kita tambahkan kode CSS pada HTML di atas seperti berikut:

Hasil pada halaman web browser:

Element block dan inline

Dari contoh di atas kita dapat ketahui bahwa element block akan mengisi lebar dari suatu halaman web (warna merah), sedangkan element inline hanya sebatas text atau konten tersebut (warna kuning). Tag <p> akan membuat baris atau block baru di bawah tag <h1> bukan berada disamping <h1>, sedangkan tag <span> akan berada disamping tag <strong> bukan membuat baris baru di bawah tag <p>.

Element Div dan Span

Berkaitan dengan element block dan inline, terdapat element lain yang tak kalah penting yaitu element <div> dan <span>. Kedua element ini sangat berguna pada saat menghubungkan halaman HTML dengan kode CSS.

Div merupakan salah satu element block sedangkan span bagian dari element inline. Kedua jenis element ini tidak memiliki efek visual apapun di halaman browser tetapi sangat bermanfaat ketika penggunaanya dihubungkan dengan kode CSS.

Kedua element ini dapat kita jadikan penanda terhadap element-element HTML yang akan ditambahkan style dengan CSS. Selain itu dapat juga dijadikan pembungkus (container) atau penampung beberapa element sekaligus yang ada pada halaman HTML.

Contoh penggunaan tag <div> pada HTML:

Perhatikan kode HTML di atas, tag <div> membungkus atau mengelompokkan element-element HTML berdasarkan fungsinya masing-masing, yaitu element sebagai header, menu, konten, sidebar, dan footer. Kesemunya fungsi tadi dikelompokkan menggunakan tag <div>.

Jika dibuka menggunakan web browser, tag <div> pada kode diatas tidak memberikan efek apapun. Hasilnya seperti gambar di bawah ini:

Element div dan span

Sama halnya dengan tag <div>, tag <span> juga tidak memberikan efek visual apapun, perhatikan contoh kode berikut:

Pada contoh di atas, kata BERMANFAAT pada paragraf dua menggunakan tag <span>. Jika dilihat hasilnya di web browser tidak memberikan efek apapun, sama seperti di paragraf pertama tanpa menggunakan tag <span> untuk kata yang sama.

Element span

Atribut Class dan Id pada HTML

Sengaja kita masukkan bahasan atribut class dan id ke dalam subjudul yang sama dengan div dan span, karena kedua materi ini memiliki hubungan yang erat. Ada banyak jenis atribut yang bisa kita tambahkan ke dalam element HTML, diantaranya adalah Class dan Id. Apa perbedaan kedua atribut ini?

Atribut class berfungsi sebagai nama class pada style sheet dan dapat digunakan untuk memanipulasi element pada Javascript. Penggunaan atribut class bisa diterapkan pada beberapa element HTML sekaligus. Atribut class dapat dipanggil menggunakan tanda “.” pada kode CSS.

Atribut id berfungsi sebagai id atau nama unik untuk element HTML dan tidak boleh digunakan lebih dari satu element untuk id yang sama. Atribut id dapat dipanggil menggunakan tanda hash (#) pada kode CSS.

Contoh penggunaan atribut class dan id pada HTML:

Hasil pada web browser:

Layout HTML dengan element div

Mengenal CSS (Cascading Style Sheet)

Jika HTML berfungsi sebagai kerangka halaman web, maka CSS adalah stylenya yaitu mempercantik tampilan atau desain halaman tersebut. CSS (Cascading Style Sheet) merupakan bahasa markup yang berfungsi mengatur desain atau tampilan setiap element yang ada pada HTML, seperti menambahkan warna teks, mengubah ukuran dan jenis font, menambahkan background, dan masih banyak fungsi lain yang dapat dilakukan oleh CSS.

Struktur Dasar CSS

Pada HTML kita mengenal istilah tag, atribut, dan value seperti yang sudah dijelaskan di awal. Sama halnya dengan HTML, CSS juga memiliki struktur dasar yang kita kenal dengan istilah selector, property, dan value. Penulisan kode CSS dapat dilihat pada gambar berikut:

Struktur dasar CSS

Dari struktur di atas, dapat kita jabarkan sebagai berikut:

  • Selector berfungsi untuk menandai tag maupun atribut class dan id pada halaman HTML yang akan diberikan style dengan CSS.
    • Contoh selector berupa tag: <h1> s.d <h6>, <p>, <body>, <table>, <div>, <span>, dan lain-lain
    • Contoh selector berupa atribut class dan id: class=”menu”, class=”content”, id=”header”, dan lain-lain
  • Property berfungsi untuk menentukan jenis style yang akan diterapkan pada selector. Contoh beberapa property CSS:
    • Property color: memberikan warna font
    • Property background-color: memberikan warna background
    • Property font-size: mengatur ukuran font
    • Property padding: mengatur jarak konten dengan border
    • dan lain-lain
  • Sedangkan value berfungsi sebagai nilai dari property yang telah dipilih. Contoh penggunaan value pada CSS:
    • Value black atau #000: menghasilkan warna hitam
    • Value 100px: menghasilkan property dengan ukuran 100px
    • Value center, left, right, auto: mengatur posisi property
    • dan lain-lain

Untuk struktur CSS di atas, dapat kita simpulkan sebagai berikut:

Cari seluruh tag <h1> dan berikan style pada font dengan warna biru

Declaration dalam CSS untuk satu buah selector bisa saja lebih dari satu. Kita ambil contoh menambahkan jenis, warna, dan ukuran font pada tag h1:

Menghubungkan HTML dengan CSS

Kode CSS dapat kita terapkan pada halaman HTML dengan melalui tiga cara yaitu:

Inline CSS

Dilakukan dengan cara menambahkan atribut style ke dalam element HTML. Contoh kita menambahkan warna pada teks heading dan paragraf:

Hasil pada web browser:

Menghubungkan HTML dengan CSS

Cara seperti ini tidak direkomendasikan karena akan membuat element html kelihatan panjang dan penuh.

Internal CSS

DIlakukan dengan cara menambahkan kode CSS ke dalam element <head> pada halaman HTML. Kode CSS tersebut harus diapit oleh tag <style> dan </style>. Contoh menambahkan warna background halaman, warna teks heading dan paragraf:

Hasil pada web browser:

Menghubungkan HTML dengan CSS

Eksternal CSS

Menerapkan kode CSS dengan cara menghubungkan file CSS melalui element <link> menggunakan atribut href. Untuk cara yang satu ini kita persiapkan dua buah file yaitu index.html dan style.css sebagai file CSS yang nantinya akan kita hubungkan dengan halaman HTML melalui element <link>. Penulisan element <link> sudah kita paparkan di atas pada subjudul Mengenal Head dan Body. Contoh penerapan eksternal CSS pada halaman HTML:

File index.html

File style.css

Hasil pada web browser:

Menghubungkan HTML dengan CSS

Property Dasar CSS

Sebelumnya kita telah membahas struktur atau anatomi CSS yang terdiri dari selector, property, dan value. Selain ketiga komponen tersebut, ada lagi komponen yang disebut dengan istilah declaration yang berfungsi memberikan perintah terhadap selector yang dipilih. Declaration terdiri dari property beserta valunya.

Kali ini kita akan coba jabarkan beberapa property dasar yang sering digunakan untuk memberikan style pada halaman website.

Text Property

NoPropertyFungsiContoh
1colormengatur warna teksp { color: blue; }
2line-heightmengatur jarak antar barisp { line-height: 20px; }
3text-alignmengatur posisi teksp { text-align: center; }
4letter-spacingmengatur jarak antar karakter/hurufp { letter-spacing: 2px; }
5word-spacingmengatur jarak antar kata p {word-spacing: 5px; }
6text-decorationmengatur dekorasi teksp { text-decoration: overline; }
7dll

Font Property

NoPropertyFungsiContoh
1font-sizemengatur ukuran fontp { font-size: 14px; }
2font-weightmengatur ketebalan fontp { font-weight: bold; }
3font-familymengatur jenis fontp { font-family: sans-serif; }
4font-stylemengatur style fontp { font-style: italic; }
5font-variantmengatur tampilan teks (lowercase & uppercase letters) p {font-variant: small-caps; }
6fontmengatur beberapa property font sekaligus dalam satu declarationp { font: bold 14px sans-serif; }

Background Property

NoPropertyFungsiContoh
1background-colormengatur warna latar belakang (background).header { background-color: skyblue; }
2background-imagemenambahkan gambar (image) pada latar belakang.header { background-image: url(“image.png”); }
3background-originmengatur posisi gambar.header {background-origin: content-box; }
4background-sizemengatur ukuran gambar.header {background-size: auto; }
5backgroundmengatur beberapa property background sekaligus dalam satu declaration .header {background: skyblue url(“image.png”) auto; }
6dll

Padding Property

NoPropertyFungsiContoh
1padding-topmengatur ruang atau jarak antara konten dengan border atash2 { padding-top: 20px; }
2padding-rightmengatur ruang atau jarak antara konten dengan border kananh2 { padding-right: 30px; }
3padding-bottommengatur ruang atau jarak antara konten dengan border bawahh2 { padding-bottom: 40px; }
4padding-leftmengatur ruang atau jarak antara konten dengan border kirih2 { padding-left: 50px; }
5paddingmengatur beberapa property padding sekaligus dalam satu declaration h2 { padding: 20px 30px 40px 50px; }

Margin Property

NoPropertyFungsiContoh
1margin-topmengatur ruang atau jarak antara border atas ke bagian luar elementh2 { margin-top: 20px; }
2padding-rightmengatur ruang atau jarak antara border kanan ke bagian luar elementh2 { margin-right: 30px; }
3padding-bottommengatur ruang atau jarak antara border bawah ke bagian luar elementh2 { margin-bottom: 40px; }
4padding-leftmengatur ruang atau jarak antara border kiri ke bagian luar elementh2 { margin-left: 50px; }
5paddingmengatur beberapa property margin sekaligus dalam satu declaration h2 { margin: 20px 30px 40px 50px; }

Border Property

NoPropertyFungsiContoh
1border-widthmengatur lebar border keseluruhanh2 { border-width: 5px; }
2border-colormengatur warna border keseluruhanh2 { border-color: blue; }
3border-stylemengatur style border keseluruhanh2 { border-style: solid; }
4border-top
border-right
border-bottom
border-left
mengatur border pada posisi atas, kanan, bawah, kirih2 { border-bottom: 5px solid blue; }
5bordermengatur beberapa property border sekaligus pada semua posisi dalam satu declaration h2 { border: 5px dotted red; }
6dll

Width & Height Property

NoPropertyFungsiContoh
1widthmengatur lebar elementbody { width: 600px; }
2heightmengatur tinggi elementbody { height: 600px; }
3max-widthmengatur lebar maksimal elementbody { max-width: 800px; }
4max-heightmengatur tinggi maksimal elementbody { max-height: 800px; }
5min-widthmengatur lebar minimal elementbody { min-width: 200px; }
6min-heightmengatur tinggi minimal elementbody { min-height: 200px; }

Float Property

NoPropertyFungsiContoh
1leftposisi element sebelah kiri.sidebar { float: left; }
2rightposisi element sebelah kanan.sidebar { float: right; }
3noneposisi element default.sidebar { float: none; }
4max-heightposisi element mengikuti element parent.sidebar { float: inherit; }

Membuat Layout HTML

Untuk mendesain sebuah halaman website, selain pemilihan property CSS yang tepat, hal penting lain yang harus diperhatikan adalah layout HTML yaitu bagaimana mengatur element-element HTML sehingga terbentuk layout yang sesuai dengan kebutuhan web developer.

Layout HTML

Sebuah halaman website umumnya memiliki element-element seperti gambar berikut ini.

Header

Element header biasanya berisi informasi judul dan tagline web. Selain itu, bisa juga ditambahkan elemen lain seperti logo website, waktu, kontak, atau running text breaking news (untuk portal berita)

Navigation

Element navigasi biasa berupa menu horizontal atau kombinasi horizontal dan drowpdown yang berfungsi mengarahkan pengunjung web ke halaman lain baik itu internal maupun external link.

Sidebar

Element sidebar biasanya difungsikan untuk menempatkan informasi berupa postingan terbaru, postingan populer, arsip, iklan, dan masih banyak lagi yang dapat kita tempatkan di element ini. Element siderbar dapat dibuat di kiri maupun kanan konten, atau bisa kiri dan kanan tergantung kebutuhan pengembang web.

Article

Element article berfungsi untuk menempatkan atau menampilkan dokumen atau konten yang ada pada website.

Footer

Element footer berada pada bagian paling bawah halaman website. Informasi yang ada di footer biasanya berupa copyright, halaman profil seperti about, contact, privacy policy, atau bisa juga eksternal link yang mengarah ke web relevan. Element footer dapat kita buat ke dalam beberapa kolom sesuai kebutuhan pengembang web.

Contoh Membuat Layout HTML

Dalam membuat layout HTML, kita dapat menggunakan beberapa element utama sebagai kerangka yaitu menggunakan element <table> dan elemen <div>.

Membuat Layout menggunakan Tabel

Studi kasus: Buatlah sebuah halaman website dengan ketentuan berikut:

  • 1 kolom header
  • 1 kolom menu navigasi
  • 1 kolom siderbar sebelah kiri
  • 1 kolom konten
  • 1 kolom footer.

Jika diperhatikan kasus di atas, tabel terdiri atas 2 kolom dan 4 baris. Baris pertama untuk header, baris kedua untuk menu navigasi, baris ketiga untuk siderbar dan konten, baris keempat untuk footer. Pada baris pertama, kedua, dan keempat tabel sel harus digabungkan menjadi satu menggunakan atribut colspan.

Untuk membuat layout HTML di atas, kita siapkan dua buah file yaitu index.html dan style. css. Penulisan kode untuk layout HTML di atas adalah sebagai berikut:

Kode halaman index.html

Output kode HTML pada web browser tanpa CSS:

Membuat layout HTML

Sekarang kita manipulasi halaman HTML menggunakan kode CSS berikut.

Layout HTML pada web browser setelah ditambahkan kode CSS:

Membuat layout HTML

Membuat Layout menggunakan Element div

Dengan kasus yang sama, kita dapat membuat layout HTML menggunakan element div seperti berikut ini.

Kode pada file index.html

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Membuat layout HTML

Kode pada file style.css

Hasil layout HTML setelah ditambahkan kode CSS:

Membuat layout HTML

Selengkapnya tentang layout HTML dapat dipelajari pada materi Panduan Membuat Layout Website Sederhana.

5 1 vote
Article Rating
Subscribe
Notify of
guest
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
1 month ago

[…] Panduan Belajar HTML untuk Pemula […]

trackback
15 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]

trackback
14 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]

trackback
9 days ago

[…] element block & inline, div & span, serta atribut class dan id pada HTML, baca selengkapnya di sini. Sekarang kita mulai step by step untuk koding HTML […]

trackback
4 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]

trackback
4 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]

trackback
3 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]

trackback
2 days ago

[…] Baca Selengkapnya..Panduan Belajar HTML untuk Pemula […]