15 Menit Memahami ” Apa itu HTML ” Secara Mendalam oleh - seputarkotlin.xyz

Isinya teks, gambar, atau apapun yang tampil di web

Penjelasan 

• File HTML diawali sebuah tag dan ditutup dengan tag  
• Tag … merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag dan tag …
• Pada bagian tag … kita bisa menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang akan disampaikan melalui web.

Praktek 1

Untuk mengetahui bagaimana penggunaan HTML dalam proses pembuatan web. Silahkan praktekan langkah-langkah dibawah ini.

a. Buka Text Editor

Buka text editor yang terdapat pada komputer kamu. Disini saya menggunakan text editor Notepad (bawaan windows).

Text Editor Notepad

b. Tambakan kode-kode HTML 

Setelah Notepad terbuka tambahkan kode-kode HTML sederhana berikut ini :

           Selamat Belajar HTML   

Lalu save dengan nama file belajar.html, pada save as type pastikan menjadi All files jika sudah klik save.

Menyimpan File HTML

Maka icon file belajar.html akan menjadi web browser default yang kita gunakan.

File HTML pada Desktop

 

Buka file tersebut maka hasilnya akan seperti dibawah ini.

Tampilan dari Struktur HTML

1. Test html merupakan title dari tag
2. Selamat Belajar html merupakan hasil dari tag Selamat Belajar Html

Properti Dokumen

Properti dokumen dalam html diatur melalui atribut-atribut yang berada pada tag . Sebagai contoh adalah bila kita ingin memberikan warna pada background halaman, warna teks, link dan lainnya.

Pengaturan warna dalam html biasanya menggunakan kode RGB yang ditampilkan ke dalam nilai hexadesimal. Berikut ini adalah contoh kode warna yang bisa kita gunakan saat mendesain web menggunakan html.

• Kode Hex : #0000FF, Nama Warna : Blue
• Kode Hex : #8A2BE2, Nama Warna :  Blueviolet
• Kode Hex : #A52A2A, Nama Warna :  Brown
• Kode Hex : #DEB887, Nama Warna :  Burlywood
• Kode Hex : #5F9EAD, Nama Warna :  Cadetblue

Berikut adalah beberapa atribut warna  elemen yang sering digunakan saat membuat web :

• Bgcolor : Digunakan untuk memberikan warna latar belakang. Defaultnya putih.
• Text : Digunakan untuk memberikan warna teks. Defaultnya hitam.
• Link : Digunakan untuk memberikan warna link dokumen. Defaultnya biru.

Praktek 2

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

           
 Ini adalah contoh penggunaan Atribut Warna 
        

Maka hasilnya akan seperti gambar dibawah ini.

Penggunaan Atribut Warna

Penjelasan

• Kode bgcolor =”#FFFF00″ digunakan untuk menampilkan background berwarna kuning
• Kode text=”#FF0000″ digunakan untuk menampilkan teks berwarna merah
• Kode h1 digunakan untuk membuat ukuran heading pada halaman web yang dibuat dengan html

 

Penggunaan Heading

Heading digunakan untuk pengaturan judul dan sub judul pada halaman web yang dibuat menggunakan HTML.  Tanpa panjang lebar langsung saja kita praktekan cara penggunaan heading pada HTML.

Praktek 3

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode html berikut pada notepad.

           
 Ini adalah heading 1
  
 Ini adalah heading 2
  
 Ini adalah heading 3
  
 Ini adalah heading 4
  
 Ini adalah heading 5
  
 Ini adalah heading 6
     

Jika sudah jangan lupa simpan. Kemudian hasilnya akan terlihat seperti gambar dibawah ini.

Penggunaan Heading

Format Teks pada HTML

Format teks pada html digunakan untuk membuat huruf tebal, miring, dan lain sebagainya.

Praktek 4

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

           
   Menebalkan teks (bold)  
    
   Memiringkan teks (italic)  
    
   Memberi garis bawah (underline)   
    
   Mencoret teks   
         

Silahkan kamu simpan file tersebut. Maka tampilan akan seperti gambar berikut.

Pemformatan Teks

Tag Format Teks

Berikut ini adalah beberapa tag yang sering digunakan untuk format teks pada HTML.

• digunakan untuk teks tebal
• digunakan untuk teks menekankan
• digunakan untuk teks miring
• digunakan untuk teks kecil
• digunakan untuk teks penting
• digunakan untuk teks di bawah garis
• digunakan untuk teks di atas garis
• digunakan untuk teks sisipan
• digunakan untuk teks dicoret
• digunakan untuk teks ditandai

Format Paragraf pada HTML

 merupakan tag yang digunakan pada HTML untuk membuat paragraf. Dibuka dengan tag

dan ditutup dengan tag

. 

Praktek 5 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

           
  Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   
    
  Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   
    
  Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web.   
           Jika sudah lihat hasilnya. Maka akan tampil seperti gambar dibawah ini.  

Format Paragraf pada HTML

---

Baca Juga :

• 50 Judul Skripsi Android dilengkapi Link Jurnal
• 100 Contoh Skripsi Sistem Informasi Berbasis web dan Jurnal

---

Pembuatan List 

List yaitu bagian teks yang berisi daftar menu/ item dari suatu kelompok tertentu. Contohnya daftar menu makanan dan harganya, daftar kategori buku, juga yang lainnya.

Pada HTML list dibagi menjadi 3, yaitu :

• List Berurutan
• List Tidak Berurutan
• List Definisi

List Berurutan

Ini biasanya ditandai dengan nomor urutan tertentu. Biasanya menggunakan angka (1, 2, 3, dst ) atau menggunakan alpabet (a, b, c, dst).

List ini sering digunakan untuk item-item yang saling berhubungan satu sama lain. Contoh list berurutan yaitu :

Cara menyimpan file

1. Klik save
2. Beri nama file
3. Klik Ok

Tag List Berurutan

Tag yang digunakan untuk membuat list berurutan adalah tag

yang artinya ordered list berpasangan dengan

. Masing-masing item di dalam daftar dibuat menggunakan tag

yang artinya list item ditutup dengan tag

. 

Praktek 6 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

           
 Daftar Makanan 
  
   
 Nasi Goreng 
   
 Mie Ayam 
   
 Kwetiaw 
  
      

Jika sudah disimpan dan dibuka tampilan akan seperti gambar berikut ini.

Pembuatan List Berurutan

Urutan default dari list berurutan yaitu 1, 2, 3 dst. Kita bisa menggunakan tipe lain untuk suatu list.

• Tipe A : Digunakan untuk membuat list dengan karakter A, B, C, dst.
• Tipe a : Digunakan untuk membuat list dengan karakter a, b, c, dst.
• Tipe I : Digunakan untuk membuat list dengan karakter I, II, III, dst.
• Tipe i : Digunakan untuk membuat list dengan karakter i, ii, iii, dst.

Supaya lebih jelas berikut contohnya.

           
 Daftar Makanan 
  
   
 Nasi Goreng 
   
 Mie Ayam 
   
 Kwetiaw 
  
      

Maka hasilnya adalah sebagai berikut.

Pembuatan List Menggunakan Tipe

List Tidak Berurutan

List tidak berurtan biasanya digunakan pada list yang item-itemnya bisadiubah secara acak posisinya. List ini biasanya menggunakan simbol-simbol seperti kotak atau bulat (bullet). Contohnya :

Daftar Buku :

• Matematika
• Bahasa Inggris
• Bahasa Indonesia

Daftar buku di atas, bisa kita ubah posisinya. Ini karena setiap item tidak memiliki satu sama lain berbeda dengan list berurutan yang saling berkaitan setiap item yang ditampilkannya.

Tag List Tidak Berurutan 

Tag yang digunakan pada  HTML  untuk membuat list tidak berurutan yaitu tag

yang artinya (unordered list), berpasangan dengan tag

. Sama seperti list berurutan setiap item yang ditampilkan harus menggunakan tag

…

.

Praktek 7 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode html berikut pada notepad.

              
 Daftar Buku Pelajaran 
   
   
 Matematika 
   
 Bahasa Indonesia
   
 Bahasa Inggris
   

Simpan file tersebut. Silahkan buka dan tampilan akan seperti gambar dibawah ini.

Penggunaan List Tidak Berurutan

Urutan default dari list tidak berurutan yaitu berbentuk bullet. Tipe lain yang bisa kita gunakan adalah :

• Tipe Disk : Digunakan untuk membuat list dengan tanda bulatan hitam
• Tipe Circle  : Digunakan untuk membuat list dengan tanda bulatan putih
• Tipe Square  : Digunakan untuk membuat list dengan tanda kotak

Berikut contoh menggunakan tipe square pada list tidak berurutan.

              
 Daftar Buku Pelajaran 
   
   
 Matematika 
   
 Bahasa Indonesia
   
 Bahasa Inggris
   
      

Maka tanda bulatan hitam pada contoh diawal akan berubah menjadi bulatan kotak. Itu dikarenakan penambahan type=square pada tag

.



List Tidak Berurutan Menggunakan Tipe Square

List Kombinasi 

Coba perhatikan list dibawah ini.

Daftar Mahasiswa Per Jurusan :

1. Sistem Informasi

• Ayu
• Rizki
• Dani

2. Teknik Informatika

• Ratna
• Anisa
• Rendi

List di atas merupakan gabungan dari pada list berurutan dan tidak berurutan. Untuk membuat list seperti di atas pada HTML kita cukup menggabungkan tag

dengan tag
.


Praktek 8 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML  berikut pada notepad.

              
 Daftar Mahasiswa Per Jurusan 
   
    
 Sistem Informasi 
   
   
 Ayu 
   
 Rizki 
   
 Dani 
   
    
 Sistem Informasi 
   
   
 Ayu 
   
 Rizki 
   
 Dani 
   
   
       

Jika sudah silahkan simpan file HTML tersebut. Maka hasilnya seperti gambar di bawah ini.



Penggunaan List Kombinasi

Untuk membuat list dengan urutan tidak dimulai dari 1/ a, kita bisa menambahkan start=”2″ pada elemen tag

.

Misalnya, angka dimulai dari 50. Maka kode-kode htmlnya adalah sebagai berikut.

              
 Daftar Mahasiswa Per Jurusan 
   
       
 Ayu 
   
 Rizki 
   
 Dani 
      
       

Maka hasilnya seperti gambar di bawah ini.



Penggunaan Kode Start pada List

Dari gambar diatas nomor dimulai dari 50. Lalu bagaimana jika kita ingin memulainya dengan huruf ? berikut contohnya.

              
 Daftar Mahasiswa 
   
       
 Ayu 
   
 Rizki 
   
 Dani 
      
           

Maka hasilnya yaitu seperti gambar berikut.



Penggunaan Start dengan Huruf

 

---

Baca Juga : 

• Belajar React Native Untuk Pemula
• Belajar Kotlin Android Untuk Pemula

---

Kesimpulan dan Latihan 

Sebagai latihan dari keseluruhan materi struktur HTML sampai dengan pembuatan list. Cobalah pahami kode-kode HTML berikut ini.

              
 Membuat Website 
    
 Website merupakan halaman yang bisa kita lihat menggunakan web browser 
    
 Macam-macam Website
    
   
   
 Website Statis 
   
 Website Dinamis 
   
    
    
 Ciri-ciri Website Statis dan Dinamis 
  
   
   
 Website Statis 
   
   
 Tidak adanya interaksi antara pengguna dan web
   
 Biasanya dibangun hanya menggunakan html 
   
 Tidak adanya database
   
       
 Website Dinamis 
   
   
 Adanya interaksi, contoh: melalui komentar atau lainnya
   
 Adanya Database untuk menyimpan data dari interaksi yang terjadi 
   
 Sering diupdate 
   
   
  
    
   Itulah pengertian  Website  dan juga  Macam-macam Website . Untuk lebih jelasnya kamu bisa membaca artikel atau buku mengenai  Website