HTML (hypertext mark up language) adalah bahasa pemograman yang sifatnya untuk memberikan tanda (mark up) pada suatu naskah teks

Hypertext

Link Hypertext adalah suatu naskah yang bila di klik maka web browser kita akan membawa kita ke link yang dituju naskah/dokumen.

Link hypertext juga bisa terdapat di gambar dan bila klik web browser akan membawa ke link yang di tuju gambar itu

Markup

Merupakan tanda didalah file HTML untuk memberikan intruksi pada dokumen tersebut

Language

Bahasa yang memperintahkan intruksi pada dokumen/naskah tersebut

Tag HTML :

( p ) untuk membuat suatu paragraf( b ) membuat suatu teks menjadi tebal ( textarea) membuat suatu kolom khusus untuk text( big ) membuat teks menjadi besar( br ) membuat garis baru( caption ) membuat caption pada tabel( html ) dokumen html

seperti contohnya:

 

 

Judul Titel

 

 

Isi………

 

 

Kode program diatas merupakan kerangka dari file HTML. Pada tag menandakan bahwa ini merupakan file berupa HTML. Berikut nya tag sebagai kepala dari tampilan dimana terdapat tagyang dapat digunakan sebagai letak dari judul tampilan. Selanjutnya terdapat tagyang merupakan letak untuk menulis isi konten dari tampilan. Pada praktikum kali ini pembuatan HTML disertai dengan file CSS. File CSS ini akan mendukung tampilan dari file HTML menjadi lebih mudah diatur tata letak, warna, bahkan background. Seperti pada kode program sebelumnya bahwa keterkaitan file CSS dan file HTML harus diletakkan beberapa kode program dalam tag yaitu,

 

Website Bahari

 

 

Penyimpanan file HTML dan CSS harus berada pada folder yang setingkat atau sama. Link href dimaksudkan adalah untuk nama dari file CSS yang ingin disertai ke HTML. Dalam membuat file CSS terdapat penulisan menggunakan tanda # dan . seperti,

#halaman {

width: 1000px;

margin: 0 auto;

padding: 0 auto;

}

Penggunaan tanda # adalah tanda kepemilikan seluruh properties dan value untuk div id yang telah dibuat dalam file HTML. Seperti kode program diatas bahwa #halaman adalah div id yang telah dideklarasikan di file HTML dengan nama yang sama sehingga properties dan valuenya dalam #halaman hanya akan berlaku untuk file HTML yang memiliki div id=”halaman”. Width, adalah mengatur ukuran tampilan isi konten dari div id halaman sebesar 100pixel dari layar. Sedangkan margin adalah ukuran yang diberi secara automatic begitupula padding atau jarak antar baris yang diatur secara automatic.

Dalam penggunaan div id, dalam HTML juga dapat menggunakan div class. Div class merupakan anak dari induk div id. Seperti dalam kode program diatas,

 

 

Div class=”tengah” merupakan anak dari div id=”konten”, hal tersebut untuk memberikan kemudahan dalam mengatur tampilan isi konten secara detail. Penggunaan div class juga dapat diberikan pengaturan tampilan dalam CSS seperti,

#konten {

width: 1000px;

margin: 0;

padding: 0;

}

.tengah {

width: 1000px;

height: 200px;

float: left;

background: grey;

}

#konten akan menandakan bahwa file HTML yang telah dibuat memiliki div id=”konten” kemudian memiliki pengaturan properties dan value yang telah ditentukan. Kemudian terdapat .tengah yang merupakan div class=”tengah” dari div id=”konten”. Dan .tengah berisi tentang properties dan value yang diatur untuk div class=”tengah” saja. Perbedaan antar div class dan div id adalah div class dapat digunakan berkali-kali sedangkan div id hanya dapat sekali.

Selanjutnya pembuatan table dalam HTML, pembuatan table diwakilkan oleh kode program sebagai berikut,

 

 

No

Menu Makanan

Harga

 

 

1

Nasi Goreng Biasa

Rp 7000

 

Untuk membuat table maka digunakan tag

, tag ini akan memiliki tag didalamnya yang mewakili baris yaitu,dan kolom yaitu,

. Properties yang dapat digunakan dalam tagdiantaranya salah satunya adalah border dan align. Border merupakan tingkat ketebalan garis yang dibuat sebagai garis dalam membentuk table. Sedangkan aling merupakan letak paragraph untuk table yang akan ditampilkan.

Contoh kode program keseluruhannya menjadi seperti ini,

index.html

 

 

Website Bahari

 

 

 

 

 

---

…::::Warteg Slawi::::….

---

 

 

 

Menu Makanan Yang Tersedia :

 

 

No

Menu Makanan

Harga

 

 

1

Nasi Goreng Biasa

Rp 7000

 

 

2

Nasi Goreng Spesial

Rp 9500

 

 

3

Nasi Goreng Kambing

Rp 9500

 

 

::::::::Terima Kasih::::::::

 

 

 

 

---

Makanan Disini

 

 

• Enak

 

 

• Murah

 

 

• Meriah

 

 

 

 

 

 

File style.css

#halaman {

width: 1000px;

margin: 0 auto;

padding: 0 auto;

}

#judul {

width: 1000px;

height: 100px;

background: grey;

margin: 0;

padding: 0;

}

#konten {

width: 1000px;

margin: 0;

padding: 0;

}

.tengah {

width: 1000px;

height: 200px;

float: left;

background: grey;

}

.footer {

height: 150px;

background: grey;

clear: both;

}

.judul {

color:red;

padding: 10px 0 0 10px;

 

http://yuanhera.wordpress.com/2013/01/15/contoh-pembuatan-web-html-dan-css-sederhana/