Langsung ke konten utama

Mengenal Dasar HTML


HTML (Hypertext Markup Language)

HTML merupakan bahasa pemrograman untuk membuat sebuah halaman web. HTML berguna untuk menampilkan berbagai informasi di dalam sebuah penjelajahan web internet. HTML pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII. 


Sejarah HTML

HTML dibuat oleh seorang ahli fisika dengan timnya Berners Lee pada lembaga penelitian CERN yang berada di Swiss. Tim Bernes Lee mengeluarkan versi HTML pertama kali pada tahun 1991. Sejak tahun 1991, setiap HTML merilis versi terbarunya, selalu dilengkapi dengan attribute dan tag terbaru. Saat ini sudah ada 140 HTML tag berdasarkan HTML Element Reference yang dimiliki oleh Mozila Developer Network. 

1. HTML 1.0

Versi ini merupakan pioneer yang masih terdapat banyak kelemahana sehingga tampilannya masih sederhana. HTML 1.0 memiliki kemampuan yaitu membuat paragraf, heading, list, hypertext dan cetak tebal atau miring pada teks. Versi ini juga mendukung peletakan gambar pada dokumen tanpa wrapping. 

2. HTML 2.0

HTML 2.0 mempunyai kualitas HTML yang lebih baik dan mempunyai kemampuan menampilkan data atau form pada dokumen serta memasukkan alamat, nama, dan saran atau kritik. HTML 2.0 ini pemula dalam web interaktif.

3. HTML 3.0

HTML versi 3.0 mempunyai fitur tambahan dari versi sebelumnya yaitu figure yang berfungsi untuk meletakkan gambar serta tabel. HTML 3.0 uga sudah mendukung adanya rumus matematika pada dokumen.

4. HTML 4.0

HTML 4.0 sudah mengalami banyak perubahan dari versi sebelumnya seperti pada perintah HTML terhadap image, tabel, text, link, form dan lainnya.

5. HTML 5.0 

HTML versi 5 merupakan prosedur pembuatan tampilan web terbaru dengan menggabungkan CSS, HTML, dan Javascript. Versi ini dibuat dari informasi W3C dan IETF membuat versi HTML yang terbaru.  W3C terus membuat dan merilis versi HTML terbaru dan terupdate. HTML 5.0 memiliki  fitur canggih yaitu support pada embed video dan audio, sehingga kamu bisa menggunakan file video atau audio ke halaman website yang kamu inginkan. 

Fitur ini juga mendukung untuk grafis vektor dengan skala dan mathML untuk rumus matematika atau lainnya. HTML 5.0 memperkenalkan perbaikan ranah semantic pada browser sehingga konten dapat dilihat dan dibaca oleh pengguna lain dan kamu sendiri.  


Struktur HTML


1. Dokumen Informasi

<html></html>


2. Dokumen Header

<head></head>


3, Dokumen Body

<body></body>


Contoh Dokumen HTML

1. Buka aplikasi notepad++

2. Kemudian copy dan pastekan kode berikut :

<html>

   <head>

   <title>Kode HTML Baru</title>

   <link rel="stylesheet" type="text/css" href="style.css">

   </head>

   <body>

        <p>Hello World</p>

   </body>

</html>

3. Buat folder di dalam folder htdocs misalnya weblatihan

4. Simpan file dengan nama index.html (All File)


Contoh Dokumen CSS

1. Buka aplikasi notepad++

2. Copy dan paste kode berikut :

p{

   background-color: #ff0000;

   padding: 10px;

   text-align: center;

}

3. Masukkan ke dalam folder weblatihan

3. Simpan file dengan nama style.css (All File)

4. Buka http://localhost/weblatihan/ dan lihat hasilnya


Kamu juga bisa belajar dan menjadikan web berikut sebagai panduan untuk mempelajari HTMl dan CSS :

1. Panduan HTML

https://www.w3schools.com/html/default.asp


2. Panduan CSS

https://www.w3schools.com/css/default.asp


Komentar

Postingan populer dari blog ini

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...