Panduan Lengkap HTML dan CSS
A. Pengertian HTML
Di dalam sebuah halaman website tidak terlepas dari HTML. Hyper Text Markup Language
(HTML) adalah kumpulan struktur bahasa markup bukan bahasa pemrograman untuk
membangun sebuah halaman website. Bahasa merkup mengkombinasikan teks dan
informasi mengenai tambahan teks tersebut. HTML merupakan dokumen penting standar
untuk sebuah halaman website.
Dalam pemrograman website dibutuhkan dasar teori HTML. Semua bentuk web tidak
terlepas dari struktur HTML. Struktur tersebut dapat dibuat pada aplikasi berbasis teks,
seperti notepad, notepad +, gedit, dan aplikasi lainnya yang mendukung pembuatan struktur
HTML.
B. Struktur HTML
Setiap dokumen HTML di awali dengan sebuah tag dan diakhiri dengan
tag. Tambahan dokumen HTML ada tiga bagian yang harus ada pada dokumen HTML.
Bagian tersebut yakni:
Tag dan ; digunakan untuk memberikan informasi mengenai
HTML.
Tag dan ; berguna untuk menuliskan judul halaman web
yang akan terlihat pada halaman browser.
Tag dan ; berisi tampilan seluruh konten informasi untuk
melengkapi HTML. Konten yang ada berupa teks maupun gambar.
Selain tiga bagian di atas pada saat menuliskan kode HTML sering digunakan kode
komentar. Bagaimanapun tag komentar sangat membatantu untuk mengetahui setiap bagain
yang telah di buat. Tag yang dapat digunakan adalah .
C. Persiapan Kebutuhan
Pada saat menuliskan bahasa markup di butuhkan sebuah aplikasi pendukung editor teks
untuk memudahkan dalam membangun sebuah halaman web. Selain editor teks diperlukan
juga web server, walaupun dokumen HTML sendiri tetap dapat ditampilkan pada browser.
Sebuah web server nantinya akan berfungsi pada saat pembuatan struktur data yang
membutuhkan database.
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Beberapa kebutuhan yang harus dipersiapkan antara lain sebagai berikut:
1. Editor Teks
Aplikasi editor teks sangat diperlukan untuk membangun halaman web. Editor teks
yang dapat digunakan antara lain:
Notepad,
Notepad +,
Gedit,
Bluefish,
2. Aplikasi Browser
Untuk menampilkan hasil dokumen HTML diperlukan aplikasi browser. Dapat
digunakan aplikasi Mozila Firefox atau yang lainnya sebagai perbandingan hasil
tampilannya.
3. Web Server
Aplikasi web server yang dapat digunakan sebagai pendukung HTML yakni Xamp,
PhpMyadmin, Apache, dan lain-lain.
Tips dan Trik:Gunakan huruf besar atau kecil dan menggunakan kode HTML. Jika menggunakan huruf besar,gunakan huruf besar untuk semua kode HTML.
Sedangkan huruf kecil juga sama gunakan seluruhnya menggunkan huruf kecil. Janganbercampura
D. Latihan
Pada latihan kali ini dalam pembuatan dokumen HTML tersusun atas bagian-bagian
tersendiri. Struktur HTML tersebut diantaranya:
Berisi Judul Halaman Web
Berisi konten berupa teks maupun gambar
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Dokumen HTML di atas agar dapat tampilkan pada browser harus disimpan dengan ekstensi
*.html maupun *.htm. Gunakan salah satu jenis ekstensi penyimpanan tersebut dan selalu
konsisten. Tidak boleh menggunakan keduanya, karena nantinya jika akan memanggil
dokumen HTML lainnya tidak akan berhasil. Sebagai contoh penyimpanannya yaitu
index.html; tentang.html; dan lain-lain. Simpanlah pada satu folder yang sama agar mudah
dalam memanggil dokumen HTML yang lain.
Beberapa kode HTML yang sering digunakan pada saat membuat isi dari halaman web
antara lain yakni:
a. Heading
Fungsi heading untuk memilih ukuran teks/huruf secara default tanpa menggunakan
ukuran biasa yaitu pixel (misal: 12px). Buatlah sokumen HTML seperti di bawah ini
simpan dengan file heading.html .
Latihan Heading
Ini adalah teks untuk H1
Ini adalah teks untuk H2
Ini adalah teks untuk H3
Ini adalah teks untuk H4
Ini adalah teks untuk H5
Ini adalah teks untuk H6
Buka menggunakan browser dan hasilnya seperti gambar di bawah ini,
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
b. Garis Horisontal
Script atau kode HTML yang digunakan untuk membuat garis horisontal adalah
Sebagai contoh kita buat dokumen HTML seperti dibawah ini:
Garis Horisontal
Ini contoh garis horisontal yang ditampilkan.
c. Paragraf dan Ganti baris
Pada saat menuliskan teks untuk mengisi konten halaman web diperlukan paragraf
pada penulisannya. Hal ini untuk memperjelas barisan teks yang ada. Script yang
digunakan untuk membuat paragraf dan mengganti baris kalimat antara lain seperti
contoh di bawah ini. Istilah lain ganti baris yang sering adalah enter pada pengolah
kata.
Penggunaan Paragraf dan Baris Kalimat
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Pada saat menuliskan teks untuk mengisi konten halaman
web diperlukan paragraf pada penulisannya. Hal ini untuk
memperjelas barisan teks yang ada.
Contoh paragraf ini bisa digunakan untuk berbagai ide
gagasan.
Penggunaan baris atau ganti baris diperlukan untuk
memisahkan paragraf yang satu dengan yang lainnya.
Sehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan yang kedua. Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun cerita.
d. Teks Miring, Tebal dan Garis bawah
Pengunaan tek miring, tebal dan garis bawah mengugunakan koder tag yakni:
Miring : di akhiri dengan tag
Tebal : diakhiri dengan tag
Garis bawah : diakhiri dengan tag
Sebagai contoh buatlah dokumen HTML berikut ini.
Contoh Teks Miring, Tebal, dan Garis bawah
Pada saat menuliskan teks (ini teks miring)
untuk mengisi konten halaman web diperlukan paragraf pada
penulisannya. Hal ini untuk memperjelas barisan teks
(ini tek tebal) yang ada.
Contoh paragraf (ini teks garis bawah) ini
bisa digunakan untuk berbagai ide gagasan.
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Penggunaan baris atau ganti baris diperlukan untuk
memisahkan paragraf yang satu dengan yang lainnya.
Sehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan yang kedua. Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun cerita.
e. Align
Penggunaan align ini untuk menata teks apakah rata kiri, rata tengah, rata kanan
maupun rata kanan-kiri. Perpaduan penataan teks ini berhubungan dengan paragraf
yaitu dengan script . Kode yang digunakan pada HTML adalah:
rata kiri : align=left
rata tengah : align=center
rata kanan : align=right
rata kanan-kiri: align=justify
Sebagai contoh buatlah dokumen HTML di bawah ini,
Contoh Align
Ini adalah contoh teks paragraf rata kiri.
Pada saat menuliskan teks untuk mengisi konten halaman
web diperlukan paragraf pada penulisannya. Hal ini untuk
memperjelas barisan teks yang ada.
Ini adalah contoh teks paragraf rata
tengah. Pada saat menuliskan teks untuk mengisi konten
halaman web diperlukan paragraf pada penulisannya. Hal
ini untuk memperjelas barisan teks yang ada.Pada saat
menuliskan teks untuk mengisi konten halaman web
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
diperlukan paragraf pada penulisannya. Hal ini untuk
memperjelas barisan teks yang ada.Pada saat menuliskan
teks untuk mengisi konten halaman web diperlukan paragraf
pada penulisannya. Hal ini untuk memperjelas barisan teks
yang ada.Pada saat menuliskan teks untuk mengisi konten
halaman web diperlukan paragraf pada penulisannya. Hal
ini untuk memperjelas barisan teks yang ada.
Contoh paragraf ini bisa digunakan untuk berbagai ide
gagasan.
Ini adalah contoh pragraf rata kanan.
Penggunaan baris atau ganti baris diperlukan untuk
memisahkan paragraf yang satu dengan yang lainnya.
Sehingga memudahkan untuk membedakan gagasan pertama
dengan gagasan yang kedua. Hal ini dikaitkan dengan
bentuk dan nilai sebuah penulisan artikel maupun
cerita.
Ini adalah contoh teks paragraf rata
tengah. Pada saat menuliskan teks untuk mengisi konten
halaman web diperlukan paragraf pada penulisannya. Hal
ini untuk memperjelas barisan teks yang ada.Pada saat
menuliskan teks untuk mengisi konten halaman web
diperlukan paragraf pada penulisannya. Hal ini untuk
memperjelas barisan teks yang ada.Pada saat menuliskan
teks untuk mengisi konten halaman web diperlukan paragraf
pada penulisannya. Hal ini untuk memperjelas barisan teks
yang ada.Pada saat menuliskan teks untuk mengisi konten
halaman web diperlukan paragraf pada penulisannya. Hal
ini untuk memperjelas barisan teks yang ada.
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
f. Jenis dan Ukuran Huruf
Kegunaan jenis dan ukuran huruf adalah untuk memilih jenis huruf yang dipakai dan
berapa besar (dalam pixel) ukuran huruf tersebut. Kode tag yang di pakai dalam
HTML adalah: Isi dari
teks dan di kahiri dengan tag
Keterangan:
Jenis huruf yang berisi berbagai jenis huruf yang dipakai. Seperti Arial, Times New
Roman, Calibri dan lain-lain. Sedangkan ukuran hurus yang dipakai dalam pixel dari
1 pixel sampai 100 pixel. Namun untuk menampilkan standar ukuran teks pada
halaman website yakni 12 pixel hingga 24 pixel.
Buatlah dokumen HTML sebagai berikut.
Jenis dan Ukuran Huruf
Contoh Jenis Huruf
Ini adalah teks berukuran 2 pixel dengan
jenis huruf Arial.
Ini adalah teks berukuran 24 pixel dengan
jenis huruf Calibri.
Ini adalah teks berukuran 3 pixel dengan
jenis huruf Times New Roman.
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Ini adalah teks berukuran 24 pixel dengan
jenis huruf Arial.
g. Penggunaan Superscript dan Subscript
Superscript berguna untuk membuat karakter huruf berpangkat. Contoh: 24
sedangkan subscript untk membuat huruf seperti berikut ini. Contoh: H2SO4.
Untuk membuat huruf seperti contoh di atas pada HTML menggunakan kode, yakni:
superscript : dan diakhiri dengan tag
subscript : diakhiri dengan tag
Superscript dan Subsripct
Ini adalah teks dengan efek superscript
23 = 8
Ini adalah contoh subscript
H2SO4
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
h. List dan Daftar
Penggunaan list dan daftar sangat berguna pada saat mempunyai pilihan sebuah
informasi. Pada list dan daftar terdapat dua jenis yaitu secara urut (number) dan tidak
urut (bullets). Kode yang digunakan antara lain:
secara urut,
Satu
Dua
Tiga
Empat
dst
secara tidak urut
Data 1
Data 2
Data 3
Data 4
dst
Dokumen HTML yang dapat dibuat seperti berikut ini.
List dan Daftar
Secara Urutan
Satu
Dua
Tiga
Empat
dst
Secara tidak urut
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Data 1
Data 2
Data 3
Data 4
dst
i. Membuat Tabel
Table terdiri atas kolom dan baris. Pada saat membuat table tentukan jumlah kolom
dan baris agar mudah dalam pembuatannya. Kode tag untuk membuat table antara
lain:
Keterangan:
Untuk memulai pembuatan table dimulai dengan tag dan diakhiri dengan tag
. Tag menunjukan baris sedangkan tag menunjukan
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
kolom.
Sebagai contoh buatlah sebuah table dengan 2 kolom dan 3 baris.
Table
kolom ke 1 baris ke 1
kolom ke 2 baris ke 1
kolom ke 1 baris ke 2
kolom ke 2 baris ke 2
Berikut ini atribut pendukung table yang sering digunakan antara lain:
Atribut Fungsinyawidht Mengatur lebar table (dalam %
maupunn pixel)bgcolor (warna) Memberi warna tablealign [left | center | right | justify] Mengatur rata teks pada tablebackground = url Memberi gambar backgorund
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
j. Memanggil Gambar dan Link
Link adalah metode memanggil suatu halaman web dari satu web ke halaman web
lain. Kode script yang digunakan pada HTML ialah:
href='heading.html'>di sini
Tips dan Trik:Gunakan tanda < untuk mengganti tanda < dan > untuk mengganti tanda >
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Tentang Penulis
Nama : WAHYU SETIYONO
Kelahiran tahun : 1993
Bidang pekerjaan : Desain Grafis
Facebook : www.facebook.com/wahyuninggusti
Twitter : www.twitter.com/why_usetiyono
Website : http://www.webwahyu.web.id
http://webwahyu.wordpress.com
Deskripsi lain : Kesukaan dan hobi pada pemrograman website membuat saya bisa
mengutak-atik. Bukannya saya bisa namun karena suka.
Panduan Lengkap HTML dan CSS | Wahyu Setiyono
Top Related