Pengertian HTML: Gambar1

1.
Pengertian HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa Mark Up yang digunakan
untuk membuat sebuah halaman website. Sebuah file HTML di simpan dengan ekstensi .html
(dot html) dan dieksekusi atau diakses menggunakan web browser. Untuk membuat sebuah
website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan
PHP untuk membuat sebuah website yang dinamis. Jika sebuah website dibuat hanya
menggunakan HTML saja maka halaman website tersebut disebut halaman statis karena tidak
memiliki aksi atau fungsi-fungsi yang dapat mengelola website.
HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsinya
masing-masing. Adapun struktur dasar dari html terdiri dari 5 bagian utama yaitu : tag
DOCTYPE, tag html, tag head, tag title dan tag body. Silahkan perhatikan gambar 1.
Gambar1.
2. Struktur Dasar HTML
2.1. DOCTYPE
Doctype singkatan dari Document Type Declaration, adalah deklarasi document

yang digunakan untuk menginformasikan tipe dokumen dan versi HTML yang
digunakan kepada aplikasi web browser. Penulisan doctype harus berada pada awal
dokumen.
2.2. Tag <html>
Tag html menjadi wadah untuk semua elemen HTML. Jadi, semua elemen harus
berada di dalam tag tersebut kecuali DOCTYPE karena dia bukan termasuk elemen
melainkan deklarasi dokumen.
2.3. Tag <head>
Tag head merupakan tag yang berisi informasi tentang halaman yang tidak
ditampilkan di halaman web browser.
2.4. Tag <title>
Tag title berfungsi untuk menampilkan judul halaman web pada judul jendela
browser.
2.5. Tag <body>
Tag body berfungsi untuk menampilkan isi dokumen HTML.
TUGAS 1
1. Carilah minimal 5 text editor, kemudian review kelebihan serta kekurangannya

2. Carilah minimal 5 web browser, kemudian review kelebihan serta kekurangannya
3. Carilah contoh website statis dan dinamis, kemudian bandingkan perbedaannya
4. Buatlah seperti gambar di bawah ini menggunakan text editor
Note :
4.1. Pengetahuan tentang website diisi mengenai apa saja yang kalian ketahui dari sebuah
website.
4.2. Minat tentang website diisi mengenai seberapa minat dan apa yang membuat kalian
minat belajar website.
4.3. Screenshots tampilan pada text editor serta tampilan pada web browser.
3. Tag, Element, Atribut HTML
3.1.Tag
Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser
untuk apa text HTML yang ditulis. Dalam penulisan tag, hampir semua menggunakan
tag pembuka dan tag penutup, dimana objek yang dimaksud berada diantara tag
pembuka dan tag penutup. Silahkan perhatikan gambar 2.
Gambar 2.
Berikut beberapa jenis tag yang umumnya sering digunakan :
Tag Fungsi
<!- -> Digunakan untuk memberikan sebuah komentar atau keterangan
<a> Anchor, digunakan untuk saling menautkan antara satu dokumen HTML
ke dokumen HTML yang lain
<b> Membuat teks menjadi tebal
<p> Membuat paragraf
<h1> Membuat heading satu
<h2> Membuat heading dua
<i> Membuat teks tercetak miring
<u> Membuat teks bergaris bawah
<table> Mendefinisikan tabel
3.2.Element
Element pada html merupakan sebuah komponen yang menyusun dokumen
HTML, elemen dibentuk dari tag pembuka, isi tag dan tag penutup. Perhatikan
gambar 3.
Gambar 3.
Pada contoh diatas, terdapat satu element <h2> yang memiliki isi berupa teks, yakni
Element html. Elemen tidak selalu berisi teks, kadang ia juga berisi elemen lain, atau
yang biasa disebut dengan nested element (elemen di dalam element).
3.3.Atribut
Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka,
informasi ini bisa berupa intruksi untuk memberikan efek warna, ketebalan dll.
Atribut memiliki 2 bagian yaitu nama dan nilai. Perhatikan gambar 4.
4. Format Teks pada HTML.
Penulisan paragraf bisa menggunakan tag <p>. Adapun untuk memformat tulisan/teks
bisa menggunakan berbagai macam tag sesuai dengan keperluan, perhatikan tabel di bawah
ini.
Tag Fungsi
<b> Membuat teks tercetak tebal
<i> Membuat teks tercetak miring
<u> Membuat teks tercetak dengan garis bawah
<small> Membuat teks tercetak kecil
<strong> Menyatakan bahwa teks tersebut penting
<sub> Membuat teks tercetak dengan subscript
<sup> Membuat teks tercetak sebagai superscript (pangkat)
<del> Membuat teks tercetak dengan garis di tengah
<mark> Format teks yang berwarna
TUGAS 2
Silahkan buat tampilan seperti gambar di bawah ini kemudian screenshots tampilan pada text
editor dan web browser.
5. List pada HTML

List atau yang kita kenal dengan daftar urutan, merupakan fungsi dalam HTML yang
digunakan untuk menampilkan data secara berurutan. Dalam HTML pembuatan list
menggunakan tag <li>, terdapat dua jenis tampilan list yang bisa digunakan yaitu ordered list
dan unordered list.
5.1. Ordered list
Berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. Tag
yang digunakan yaitu <ol>.
5.2. Unordered list
Berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di
awalnya. Tag yang digunakan yaitu <ul>.
Gambar diatas merupakan contoh dari ordered list <ol>
Gambar diatas merupakan contoh dari unordered list <ul>

TUGAS 3
6. Link
Link menjadi penghubung antara satu halaman dengan halaman lainnya, jika link diklik
maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan anchor, yaitu tag
<a>.
Tag <a> selalu diikuti oleh atribut href (hypertext reference). Atribut href nantinya akan
diisikan alamat yang dituju ketika teks atau gambar diklik, didalam penulisan alamat link
pada html terbagi menjadi dua jenis yaitu alamat absolute dan alamat alternatif.
6.1. Alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website.
Contohnya :
6.2. Alamat alternatif yaitu penulisan alamat file yang akan dipanggil berada dalam aplikasi
yang sama.
Contohnya:
7. Gambar
Tampilan halaman website akan lebih menarik jika ditambahkan sebuah media
berupa gambar. HTML mendukung banyak format gambar, namun gambar kita ingi dikenali
oleh mayoritas browser, maka jpeg adalah format yang paling cocok. Untuk gambar
digunakan tag <img>.
Tag <img> memiliki atribut sebagai berikut :
Atribut Keterangan
src Menunjukkan URL atau direktori tempat file gambar berada
width Lebar gambar
heigth Tinggi gambar
align Posisi teks di sekitar gambar
alt Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan
Perhatikan contoh di bawah ini
8. Form
Form merupakan tempat penginputan data sebelum diproses oleh sistem. Untuk
membuat sebuah form, tag-tag yang diperlukan adalah :
8.1. Tag Form
Tag <form> merupakan tag yang digunakan untuk mendefinisikan sebuah form.
Tag ini mempunyai dua atribut, yaitu method dan action.
Atribut Keterangan
method Untuk menentukan metode pengolahan form. Pilihan method
adalah get atau post
action Untuk menentukan URL atau lokasi dari file yang digunakan untuk
mengelola form tersebut
8.2. Tag Textarea
Tag <textarea> digunakan untuk membuat sebuah kotak teks multibaris. Tag ini
mempunyai beberapa atribut, yaitu :
Atribut Keterangan
name Mendefinisikan nama textarea
rows Menentukan baris textarea
cols Menetukan lebar dari textarea
8.3. Tag Select

Tag <select> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki
beberapa atribut, yaitu :
Atribut Keterangan
name Mendefinisikan nama objek select
disabled Menentukan apakah dropdown list tidak diaktifkan
size Menentukan berapa pilihan yang akan ditampilkan
required Menyatakan bahwa user harus memilih sebelum form disubmit
multiple Mengizinkan untuk memilih lebih dari satu
autofocus Memerintahkan browser agar drop-down list secara otomatis
mendapatkan focus pada saat halaman dimuat ke browser
Pilihan yang disediakan oleh tag <select> diberikan di dalam tag <option>. Tag <option>
sendiri mempunyai 2 atribut yaitu value yang digunakan untuk memberi nama item
pilihan dan selected yang menunjukkan pilihan default.
8.4. Tag Input
Tag <input> digunakan untuk membuat elemen-elemen yang digunakan untuk
meminta informasi dari user, misalnya kotak pilihan, tombol dan lain-lain. Tag ini
mempunyai beberapa atribut, yaitu :
Atribut Keterangan
name Mendefinisikan nama dari elemen input
size Menentukan lebar dari element input
maxlength Menentukan jumlah maksimum karakter yang dapat dimasukkan
pada elemen input
value Untuk kotak teks, menentukan teks yang tertulis. Untuk check box
atau radio, menentukan nilai item yang dipilih. Untuk submit dan
reset , menentukan teks yang tertulis pada tombol
checked Hanya digunakan untuk check box atau radio, menentukan pilihan
default.
type Menentukan tipe input yang dibuat
Tipe input yang dapat dibuat adalah:
 Teks, digunakan untuk membuat kotak teks
 Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan
ditampilkan dengan tanda *.
 Check box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih
lebih dari satu.
 Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih
satu saja.
 Reset, digunakan untuk membuat tombol yang berfungsi untuk menghapus semua
isian form yang telah diberikan.
 Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan
data form agar dioleh.
TUGAS 3
9. Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu :
Tag Keterangan
<table> Mendefinisikan sebuah tabel
<tr> Mendefinisikan baris tabel
<th> Mendefinisikan judul pada sel dalam tabel
<td> Mendefinisikan isi tiap sel dalam tabel
Atribut untuk tag <table> yang umumnya sering digunakan adalah sebagai berikut :
Atribut Keterangan
align posisi sebuah tabel
bgcolor Menentukan warna latar belakang tabel
border Menentukan tebal bingkai
cellspacing Menentukan jarak spasi antara sel
Width Menentukan lebar tabel

Pengertian HTML: Gambar1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pengertian HTML: Gambar1

Diunggah oleh

Hak Cipta:

Format Tersedia

1.

Doctype singkatan dari Document Type Declaration, adalah deklarasi document

2.2. Tag <html>

2.4. Tag <title>

2.5. Tag <body>

Tag body berfungsi untuk menampilkan isi dokumen HTML.

1. Carilah minimal 5 text editor, kemudian review kelebihan serta kekurangannya

5. List pada HTML

Gambar diatas merupakan contoh dari unordered list <ul>

8.3. Tag Select

Anda mungkin juga menyukai