Subscribe Us

Header Ads

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).

apa itu html
Text Editor Notepad

b. Tambakan kode-kode HTML 

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

     Test HTML        Selamat Belajar HTML   

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

Apa itu html
Menyimpan File HTML

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

apa itu html
File HTML pada Desktop

 

Buka file tersebut maka hasilnya akan seperti dibawah ini.

apa itu html
Tampilan dari Struktur HTML
  1. Test html merupakan title dari tag test html
  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.

        Atribut Warna         

Ini adalah contoh penggunaan Atribut Warna

Maka hasilnya akan seperti gambar dibawah ini.

apa itu html
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.

     Penggunaan Heading        

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.

apa itu html
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.

     Format Teks        

Menebalkan teks (bold)

Memiringkan teks (italic)

Memberi garis bawah (underline)

Mencoret teks

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

apa itu html
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.

     Penggunaan Format Paragraf        

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.
Apa itu html
Format Paragraf pada HTML

Baca Juga :


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.

         Pembuatan List        

    Daftar Makanan

    1. Nasi Goreng
    2. Mie Ayam
    3. Kwetiaw

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

    apa itu html
    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.

         Pembuatan List        

    Daftar Makanan

    1. Nasi Goreng
    2. Mie Ayam
    3. Kwetiaw

    Maka hasilnya adalah sebagai berikut.

    apa itu html
    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.

            List Tidak Berurutan       

    Daftar Buku Pelajaran

    • Matematika
    • Bahasa Indonesia
    • Bahasa Inggris
          

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

    apa itu html
    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.

            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.

                  List Kombinasi        

          Daftar Mahasiswa Per Jurusan

          1. Sistem Informasi
            • Ayu
            • Rizki
            • Dani
          2. 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.

                    List Kombinasi        

            Daftar Mahasiswa Per Jurusan

            1. Ayu
            2. Rizki
            3. 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.

                    List Kombinasi        

            Daftar Mahasiswa

            1. Ayu
            2. Rizki
            3. Dani

            Maka hasilnya yaitu seperti gambar berikut.

            Penggunaan Start dengan Huruf

             


            Baca Juga : 


            Kesimpulan dan Latihan 

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

                    Kesimpulan        

            Membuat Website

            Website merupakan halaman yang bisa kita lihat menggunakan web browser

            Macam-macam Website

            1. Website Statis
            2. Website Dinamis

            Ciri-ciri Website Statis dan Dinamis

            1. Website Statis
              • Tidak adanya interaksi antara pengguna dan web
              • Biasanya dibangun hanya menggunakan html
              • Tidak adanya database
            2. 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

    Posting Komentar

    0 Komentar