panduann lengkap html dan css

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


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






Buka menggunakan browser dan hasilnya seperti gambar di bawah ini,


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


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.






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


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


ini untuk memperjelas barisan teks yang ada.

Contoh paragraf ini bisa digunakan untuk berbagai ide

gagasan.

Ini adalah contoh pragraf rata kanan.





bentuk dan nilai sebuah penulisan artikel maupun

cerita.

Ini adalah contoh teks paragraf rata

tengah. Pada saat menuliskan teks untuk mengisi konten


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


ini untuk memperjelas barisan teks yang ada.


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.


jenis huruf Calibri.


jenis huruf Times New Roman.



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


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


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


kolom.

Sebagai contoh buatlah sebuah table dengan 2 kolom dan 3 baris.

Table

kolom ke 1 baris ke 1




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


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 >


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.


panduann lengkap html dan css

Documents