Thursday 30 April 2015

Home » » Dasar - Dasar HTML Dan Penerapannya

Dasar - Dasar HTML Dan Penerapannya

By 1 comment
HTML ( Hypert Text Mark-up Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman website. HTML juga merupakan bahasa pemrograman web dasar yang bersifat statis. Dikatakan statis, dikarenakan dalam pembuatannya kita masih perlu menginputkannya dalam skrip program dan berkala untuk update datanya. Yangmana hasil dari pembuatan halaman website nanti hanya sebatas pemberian sebuah informasi saja

Struktur Dasar HTML

Berikut ini adalah struktur dasar dari HTML, beserta dengan penjelasan singkatnya :

<html> -> Tag pembuka / awal untuk bahasa pemrograman HTML

<head> -> Tag pembuka header untuk dokument HTML

<title></title> -> Judul halaman dokumen HTML

</head> -> Tag penutup header

<body> -> Tag pembuka body / isi dokument HTML

---- isi untuk tampilan pada browser -----

</body> -> Tag penutup body / isi dokument HTML

</html> -> Tag penutup HTML

Untuk lebih memahami dan mengerti maksut dari bagian atau elemen struktur HTML diatas, mari kita lihat contoh dibawah ini :

<html>

<head>

<title> Pembuatan Dokument HTML </title>

</head>

<body>

Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.

</body>

</html>

Sampai disini sudahkah Anda memahami dan mengerti tentang struktur dasar dari HTML dan pembuatan dokumen HTML yang sederhana diatas ? Kalau belum kita akan coba ulang kembali contoh diatas, namun jika Anda telah memahaminya maka tahap berikutnya adalah metode penyimpanannya.

Setelah kita menuliskan skrip diatas dalam sebuah Notepad, tentunya kita akan melakukan penyimpanan terlebih dahulu sebelum dieksekusi. Adapun langkahnya sebagai berikut :

1. Pilih Menu File -> Save As atau dengan tombol CTRL + S

2. Tentukan dimana letak penyimpanan untuk menyimpan file tersebut, kemudian tuliskan nama filenya

3. Setelah menentukan letak penyimpanan dan nama filenya, silahkan anda tambahkan ekstensi . htm atau .html pada bagian akhir nama file Anda.

Bagaimana untuk menjalankan skrip program HTML yang barusan kita buat tadi ? berikut ini adalah langkah – langkahnya :

1. Silahkan anda cari dimana letak Anda menyimpan file notepad tadi

2. Double klik file tersebut

atau

1. Buka Browser

2. Pilih Menu Open atau gunakan tombol CTRL + O, kemudian Anda cari file yang disimpan tadi lalu Open

Attribut dari Struktur HTML <body>

Perlu diketahui bahwa untuk Tag pembuka pada body -> <body> didalamnya memiliki beberapa attribute diantaranya seperti :

1. Latar belakang / background warna

Adalah membuat latar belakang halaman website dengan warna saja. Untuk penulisan skripnya seperti ini : <body bgcolor=yellow>

2. Latar belakang / background gambar

Adalah membuat sebuah latar belakang halaman website dengan menggunakan gambar, untuk tipe gambarnya dapat berupa : jpg, jpeg, gif, bmp, dsb. Untuk penulisan dalam bentuk skrip HTML sebagai berikut :

<body background=mawar.jpg>

Penulisan mawar.jpg, dikarenakan gambar berada dalam satu folder dengan skrip. Akan tetapi apabila gambar itu berada diluar folder dimana skrip berada, silahkan Anda tuliskan dengan lengkap letak dimana gambar itu berada. Misal : gambar mawar.jpg yang akan saya pakai berada di drive C://my document maka untuk penulisan skripnya sebagai berikut :

<body background=“c://my document/mawar.jpg”>

3. Margin

Adalah untuk mengatur jarak tepi dari halaman website tersebut. Di sini margin ada 4 bagian seperti layaknya margin pada sebuah paper, yaitu : Top, Bottom, Left, dan Right. Untuk penulisan pada dokumen HTML sebagai berikut :

<body topmargin=10> -> untuk mengatur tepi atas saja

<body topmargin=10 bottommargin=10> -> untuk mengatur lebih dari satu tepi, yaitu : atas dan bawah

<body topmargin=10 bottommargin=10 leftmargin=10 rightmargin=10> -> untuk mengatur semua tepi sekaligus baik atas, kiri, kanan, maupun bawah sekaligus.

4. Warna Link

Adalah membuat warna link, dimana warna link ini berbeda – beda pada saat sebelum di klik, dan pada saat setelah diklik. Adapun cara penulisannya dalam HTML :

<body alink=red vlink=green>

5. Warna Teks

Adalah untuk memberikan warna teks secara default yang akan ditampilkan pada halaman website. Untuk penulisannya seperti ini :

<body text=red>

Bagaimana sekarang sudah mengerti bukan bagaimana struktur dasar pada HTML dan attribute dari tag body ? Nah, kalau memang sudah paham dasar – dasarnya mari kita memulai dengan step selanjutnya, yaitu memodifikasi teks.

Memodifikasi Teks

Dalam memodifikasi teks ini kita akan Jenis – jenis font, ukuran font, heading, paragraf, dan allignment. Untuk mengawali sub bab berikut ini kita mulai dengan pembuatan heading terlebih dahulu.

1. Heading

Teks dalam dokumen umumnya mempunyai judul topik, dalam dokumen HTML disebut dengan Heading. Heading didalam HTML akan ditampilkan dalam tulisan bercetak tebal. Heading juga berarti untuk menunjukkan tingkat keberartian dari teks.

Ada 6 tingkatan heading dalam HTML, yang dinomori mulai dari angka satu sampai dengan enam. Nomor 1 atau heading1 menghasilkan teks judul yang terbesar, sedangkan nomor 6 atau heading6 menghasilkan teks judul terkecil. Sehingga kesimpulannya semakin angka heading itu besar, maka semakin kecil teks yang akan ditampilkan dengan batasan sampai dengan angka 6.

Adapun sintak penulisan dalam HTML sebagai berikut :

<h1>Penulisan Teks Heading Nomor 1</h1>

<h2>Penulisan Teks Heading Nomor 2</h2>

<h3>Penulisan Teks Heading Nomor 3</h3>

<h4>Penulisan Teks Heading Nomor 4</h4>

<h5>Penulisan Teks Heading Nomor 5</h5>

<h6>Penulisan Teks Heading Nomor 6</h6>

2. Paragraf

Setiap paragraf harus dimulai dengan pemberian tag <p> dan diakhiri dengan tag </p>. Namun sebenarnya dalam pembuatan sebuah paragraf tidak perlu diberikan tag akhir tidak mengapa, karena dalam setiap kita akan membuat sebuah paragraf harus diawali dengan tag <p>.

Contoh :

<p>

Setiap paragraf harus dimulai dengan pemberian tag “<p>” dan diakhiri dengan tag “</p>”. Namun sebenarnya dalam pembuatan sebuah paragraf tidak perlu diberikan tag akhir tidak mengapa, karena dalam setiap kita akan membuat sebuah paragraf harus diawali dengan tag “<p>”.

<p>

Demikian pengertian untuk pembuatan paragraf dalam struktur HTML.

</p>

3. Jenis dan ukuran font

Untuk mengawali pembuatan font disini kita akan mempelajari bagaimana membuat sebuah teks dengan mengganti jenis dan ukuran pada font. Untuk membuat sebuah modifikasi teks maka kita harus mengawalinya dengan tag <font> dan diakhiri dengan tag </font>. Misal disini kita akan merubah jenis / style teks yang sudah ada sebelumnya pada sebuah dokument HTML menjadi jenis font monotype corsiva , maka penulisannya sebagai berikut :

<font face=”monotype corsiva”>

Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.

</font>

Kemudian untuk merubah ukuran teksnya :

<font size=5>

Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.

</font>

Untuk ukuran huruf bisa kita berikan dari angka 1 samapi dengan 7.

Kemudian untuk merubah warna teksnya :

<font color=red face=calibri size=2>

Ini adalah isi dari <font size=5 face=jokerman>dokument HTML</font> yang kita buat dan akan tampil pada layar browser.

</font>

4. Allignment

Adalah untuk mengatur posisi sebuah obyek. Untuk posisi allign dibagi menjadi 2 yaitu allign untuk horisontal dan vertikal. Untuk allign secara horisontal ada 4, yaitu : left, right, center, dan justify.

a. Left untuk membuat sebuah obyek rata ke sebelah kiri.

b. Right untum membuat sebuah obyek rata ke sebelah kanan.

c. Center untuk membuat sebuah obyek rata tengah.

d. Justify untuk membuat sebuah obyek rat kiri dan kanan.

Sedangkan allign secara vertikal terdiri dari : top, middle / center, bottom.

a. Top, untuk mengatur posisi obyek rata atas secara vertikal

b. Center, untuk mengatur posisi obyek rata tengah secara vertikal

c. Bottom, untuk mengatur posisi obyek rata bawah secara vertikal

Allignment penerapannya berbeda – beda :

1. Allignment diterapkan dalam struktur HTML :

<center>Misal teks ini saya buat rata tengah</center>

<left>Gambar rata kiri <img src=mawar.jpg></left>

<right>Ini rata kanan <img src=mawar.jpg></right>

2. Allignment diterapkan dalam paragraf :

<p align=center>

<p align=right>

Membuat List

List merupakan bentuk umum yang sering kita jumpai dalam membuat suatu daftar. Dalam HTML List dibagi menjadi 3, yaitu :

1. List dengan nomor ( ordered List )

2. List tanpa nomor ( unordered List )

3. List definisi.

1. List dengan nomor ( ordered List )

Adalah model daftar yang setiap itemnya diberikan nomor. Adapun sintak dalam HTML :

<ol> -> tag pembuka diambil dari kata ordered list

<li>item 1</li> -> diawali tag pembuka dan diakhiri tag penutup list, secara default menggunakan angka 1,2,3,...dst...

</ol> -> tag penutup ordered list

Berikut ini adalah type yang dapat digunakan sebagai attribute dalam ordered list :

Type


Keterangan

A


Mengubah menjadi abjad dengan huruf besar

a


Mengubah menjadi abjad dengan huruf kecil

i


Mengubah menjadi angka romawi dengan huruf kecil

I


Mengubah menjadi angka romawi dengan huruf besar

Untuk penerapannya sebagai berikut :

<ol type=A>

<li>List satu</li>

</ol>

Merubah awalan / dimulainya list atau daftar :

Misal akan membuat sebuah list dengan menggunakan abjad huruf besar dimulai E, maka penerapannya sebagai berikut :

<ol type=A start=5>

<li>List kelima</li>

<ol>

2. List tanpa nomor ( unordered List )

Adalah model daftar yang setiap itemnya diberikan tanpa nomor tetapi berbentuk bullet. Untuk jenis unordered list ini juga tidak jauh berbeda dengan ordered list. Kalau ordered memiliki beberapa type disini juga memiliki beberapa jenis bentuk bullet, antara lain :

Type


Keterangan

Disc


Berbentuk lingkaran berwarna hitam didalamnya

Circle


Berbentuk lingkaran kosong

Square


Berbentuk kotak / box

Penerapan dalam sintak HTML :

<ul> tag pembuka diambil dari nama unordered list

<li>item pertama</li> list bullet

</ul> Tag penutup unordered list

3. List definisi.

List ini digunakan untuk mendefinisikan sebuah daftar menjorok ke dalam. Sintak dalam HTMLnya sebagai berikut :

<dl> tag pembuka definisi list

<dt> tag definisi term

</dt> tag penutup definisi term

<dd> definisi deskripsi

</dd> akhir dari definisi deskripsi

</dl> tag penutup definisi list

Contoh :

<dl>

<dt>

Makanan

</dt>

<dd>

Chicken Steak Crispy

</dd>

<dd>

Tenderloin Steak Crispy

</dd>

</dl>


1 comment:

  1. Unknown29 February 2020 at 05:07

    Terima kasih kak, dengan postingan ini dapat membantu tugas mata kuliah saya. Sukses terus kak, di tunggu postingan selanjutnya
    Nama : Reza Anggraini
    Nim : 1922500196
    Dan ini link web kampus saya https://www.atmaluhur.ac.id

    ReplyDelete

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com