You are on page 1of 16

BAB I

PENDAHULUAN
A. Latar belakang
HTML ( Hyper Text Markup language) merupakan sebuah bahasa
untuk mendeskripsikan halaman web. HTML sendiri bukan tergolong sebagai
bahasa pemograman, karena sifatnya yang hanya memberikan tanda ( marking
up ) pada suatu naskah teks untuk mendeskripsikan suatu halaman
web.sedangkan dalam perkembangannya HTML berkembang lagi menjadi
HTML5 yang lebih ringan penggunaannya dibandingkan dengan HTML.
Untuk lebih jelasnya HTML5 merupakan sebuah bahasa markah untuk
menstrukturkan dan menampilkan isi dari Waring Wera Wanua (World Wide
Web Consortium, W3C), sebuah teknologi inti dari Internet. Sedangkan untuk
bahasa CSS (cascading style sheet) digunakan mengendalikan beberapa
komponen dalam sebuah web sehinggan akan terlihat lebih terstruktur dan
seragam. Dan CSS juga berkembang menjadi CSS3 , setelah itu kita juga
mengenal tentang bahasa java script. JavaScript merupakan bahasa script yang
popular di internet dan dapat bekerja di sebagian besar penjelajah web popular
, JavaScript dapat disisipkan dalam halaman web menggunakan tag Script.

1

B. tim penyusun menemukan beberapa rumusan masalah yaitu: 1. CSS 3 serta JavaScript. Untuk mengetahui dan memberikan tampilan web atau aplikasi dari HTML. HTML 5. Untuk mengetahui pengertian serta fungsi dari HTML. Apa pengertian serta fungsi dari HTML. HTML 5. CSS 3 ? C. CSS. 2. CSS. HTML 5. Tujuan Penelitian Dalam rumusan masalah diatas maka ditemukan beberapa tujuan penelitian makalah yaitu: 1. CSS. CSS 3. BAB II LANDASAN TEORI 2 . CSS. Bagaimana contoh dari aplikasi atau web dari bahasa HTML. HTML 5. Rumusan Masalah Pada pembuatan makalah pemrograman web. CSS 3 serta JavaScript? 2.

untuk menandai bagian. Untuk saat ini HTML merupakan standart internet yang didefinisikan dan dikendalikan penggunanya oleh World Wide Web Consortium (W3C). Dan dalam pengertian lain HTML juga merupakan sebuah standar yang digunakan secara luas untuk menampilkan halaman web. fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di 3 . menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.1. HTML menjadi sebuah standart yang digunakan secara luas untuk menampilkan halaman web. walaupun pada implementasinya tidak saja hanya text yang dapat dijadikan link. disebut Markup language karena bahasa HTML menggunakan . HTML disebut Markup language karena bahasa HTML menggunakan tanda atau mark. HTML ( Hyper Text Markup Language) Hyper Text Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk membuat sebuah halaman web. berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Dan juga HTML disebut sebagai HyperText karena di dalam HTML sebuah text biasa dapat berfungsi lain. Dengan kata lain. Pada awalnya bahasa HTML banyak digunakan di dunia penerbitan dan pencetakan yang disebut dengan SGML (Standart Generalized Markup Language). Kemampuan text inilah yang dinamakan hypertext.bagian dari text. HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). dan kita dapat membuatnya menjadi link yang dapat berpindah dari satu halamn ke halaman lainnya dengan hanya mengklik text tersebut. Secara umum.

W3C). 2. Dari beberapa fungsi yang telah dijelaskan diatas. Menampilkan berbagai informasi di dalam sebuah browser Internet. Membuat halaman web. Membuat link menuju halaman web lain dengan kode tertentu (hypertext). Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya. dan Java Script. DOM. dan untuk membuat dokumen HTML dapat menggunakan notepad ataupun tools lainnya seperti Notepad ++ dan Dreamweaver.1 HTML (Hyper Text Markup Language) 5 HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua (World Wide Web Consortium. pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Beberapa Tujuan dibuatnya HTML5 antara lain: 1. mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Mengintegerasikan berkas suara dan rekaman gambar hidup. Penyusun juga memberikan contoh dokumen HTML sederhana yang dapat dicoba. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru. Namun fungsi HTML yang lebih spesifik yaitu sebagai berikut : 1. Mengintegerasikan gambar dengan tulisan. 7. Fitur baru harus didasarkan pada HTML. Membuat pranala. sebuah teknologi inti dari Internet. Membuat form interaktif. 6. 1. 3. 5. 4 . CSS.Internet melalui layanan web. mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. 4. HTML4. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language).

Bentuk kontrol form seperti kalender. source. deskripsi. canvas. Penanganan kesalahan yang baik Lebih banyak markup untuk menggantikan scripting HTML5 merupakan perangkat mandiri Proses pembangunan dapat terlihat untuk umum Sedangkan fitur baru dalam HTML 5 yaitu sebagai berikut: 1. Mengurangi kebutuhan untuk plugin eksternal (seperti flash). url. Untuk saat ini beberapa browser sudah mendukung HTML5 seperti safari. Article bisa berupa entri blog atau tulisan konten. seperti artikel. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan yang fenomenal adalah penggunaan elemen figure. section 5. email. video. Footer berisi catatan kaki seperti informasi hak cipta. 5. bahkan nav untuk navigasi 5. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5. Header bisa menyajikan judul. 6. penulis. Aside menyajikan konten pelengkap.2 Perbedaan HTML5 dengan HTML sebelumnya a. embed. firefox. 1. Section serupa seperti h1-h6. 3. chrome. footer. tanggal. waktu. dan elemen terkait berkas multimedia lainnya. 2. audio. Unsur kanvas untuk menggambar Video dan elemen audio untuk media pemutaran Dukungan yang lebih baik untuk penyimpanan secara offline Elemen konten yang lebih spesifik. dan opera. kontak. 2. 3. dan sebagainya 6. 5 . 4. Penambahan elemen baru : 1. header. 3. nav. 4. search.2. 4.

strike. pengembangan aplikasi web adalah lebih mudah dibandingkan sebelumnya. acronym. Elemen dan atribut yang tidak digunakan: Center.font. Elemen b dilegalkan sebagai tipografi penegas. Dengan HTML5.frame. Elemen strong menegaskan level kepentingan. frameset. Tidak lebih dari itu. Terdapat juga fitur-fitur canggih pada HTML5. scope pada td dan sebagainya. c.3 Tag HTML Dan Fungsinya <a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut <a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama <address> Mendefinisikan informasi kontak untuk penulis <acronym> Mendefinisikan akronim/fungsi tag ini kurang lebih sama dengan tag <abbr> <applet> Sebagai awal dari Java applets <area> Mendefinisikan daerah yang dapat diklik (link) pada image map <b> Membuat teks tebal 6 . placeholder. Perubahan makna elemen: 1. seperti pada kata kunci yang ingin ditonjolkan. noframes. Jadi tetap tidak bermakna semantik tertentu. Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya dan lain-lain. bukan sekadar penekanan emphasis. 1. dan sebagainya.b. big. longdesc. required. u. terkait elemen input dan form reversed pada elemen ol untuk urutan besar ke kecil. ping pada elemen pranala autofocus. autocomplete. tidak ‘deprecated’ (bukan fitur yang dianggap usang). 2. 3. d. Dalam HTML5 mempunyai banya kelebihan dibanding dengan versi HTML yang sebelum nya. Penambahan atribut baru: atribut media.

warna link & visited link <br> Pindah baris <button> Mendefinisikan sebuah tombol diklik <caption> Membuat caption pada tabel <center> Untuk perataan tengah terhadap teks atau gambar <cite> Mendefinisikan kutipan <code> Mendefinisikan sebuah bagian dari kode komputer <comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser <dd> Indents teks <div> Represents different sections of text <del> Untuk memberi garis tengah pada teks/mencoret teks <dfn> Mendefinisikan sebuah istilah definisi <em> Membuat teks miring.<basefont> Membuat atribut teks default seperti jenis. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser <body> Tag awal untuk melakukan berbagai pengaturan terhadap text. <!– –> Memberi komentar atau keterangan. <head> Mendefinisikan head document. ukuran. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring <embed> Menambahkan sound or file avi ke halaman web <fn> Seperti tag <a name> <font> Mengganti jenis. <hr> Membuat garis horizontal <html> Bararti dokumen html <i> Membuat teks miring <i> Membuat teks miring <ins> Membuat teks bergaris bawah 7 . ukuran dan warna font <bgsound> Memberi (suara latar) background sound pada halaman web <big> Memperbesar ukuran teks sebesar satu point dari defaultnya <blink> Membuat teks berkedip <blockquote> Mendefinisikan sebuah kutipan panjang. warna huruf yang akan digunakan utk teks <form> Mendefinisikan input form <frame> Mendefinisikan frame <frameset> Mendefinisikan attribut halaman yang akan menggunakan frame <h1> … <h6> Ukuran font yang dibedakan berdasarkan headingnya.

CSS (Cascading Style Sheet) CSS merupakan salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehinggan akan 8 . <menu>.<ol> and <ul>) <label> Mendefinisikan label untuk sebuah elemen <input> <listing>Fungsi tag ini sama dengan tag <pre>. imagemap atau an animation <input> Mendefinisikan input field pada form <li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>.<img> Image. <map> Mendefinisikan client-side map <marquee> Membuat scrolling teks (teks berjalan) – hanya pada MS IE <nobr> Mencegah ganti baris pada teks atau images <noframes> Jika browser user tidak mendukung frame <ol> Mendefinisikan awal dan akhir sebuah numbering <object> meletakkan sebuah embed untuk objek <option>Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar dropdown <p> Ganti paragraph <pre> Membuat teks dengan ukuran huruf yg sama <script> Mendefinisikan awal script <select> Membuat daftar drop-down <table> Membuat tabel <td> Kolom pada table <title> Mendefinisikan title <textarea> Mendefinisikan sebuah kontrol input multiline <tr> Baris pada table <thead> Untuk mengelompokkan isi header di dalam sebuah tabel <tbody> Untuk mengelompokkan isi body di dalam sebuah tabel <tfoot> Untuk mengelompokkan isi footer di dalam sebuah tabel <u> Membuat teks bergaris bawah <ul> Mendefinisikan awal dan akhir sebuah Bullets 2.

CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. images. SVG (Scalable Vector Graphics) dan Mozila XUL (XML User Interfaces Language). cukup mengedit file CSS-nya saja. Dibawah ini merupakan sedikit contoh coding CSS (Cascading Style sheet) : <div style=”font-weight: bold”> <p> Contoh Paragraf dalam DIV dengan style font-weight:bold</p> 9 . warna tabel. CSS dikembangkan untuk mengatur gaya tampilan pada web. ukuran gambar. heading. margin kiri/kanan/atas/bawah. Pada awalnya CSS dikembangkan pada SSGML pada tahun 1970 dan terus dikembangkann sehingga saat ini CSS telah mendukung banyak bahasa Markup seperti HTML. Mudah dan cepat dalam me-maintenance dikarenakan file CSS dibuat secar terpisah . footer.CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang bisa mengatur beberapa style. XML. Mengacu dari bahasa CSS memiliki arti gaya menata halaman bertingkat yang berarti setiap satu elemen yang telah diformat memiliki anak. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. spasi antar teks. ukuran border. spasi antar paragraf. bodytext. XHTML. Adapun beberapa kegunaan CSS antara lain: 1. dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. 3. maka anak dari elemen tersebut secara otimatis mengikuti format elemen induknya. maka Anda tidak perlu merombak semua elemen atau property dalam HTML.terlihat lebih terstruktur dan seragam. CSS mampu mengatur warna body teks. warna mouse over. 2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan. warna hyperlink. misalnya subbab. dan parameter lainnya. Mempersingkat penulisan tag HTML Sehingga tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.

fitur skala untuk memperkecil atau memperbesar layout. Dengan menggunakan CSS3 situs yang kita buat akan lebih berkembang dan bisa lebih interaktif dengan pengunjung. 2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek. yang sebelumnya tidak bisa dilakukan oleh CSS1 dan CSS2. Bisa mengurangi ukuran file yang di-load dan lebih ringan. gradien warna pada border. Beberapa kelebihan yang terdapat pada CSS 3 : 1. warna pada teks yang diseleksi. kolom 10 . CSS3 lebih detail untuk mendeklarasikan objek yang akan diberikan style. secara otomatis mengurangi bandwith inbound/outbound situs. Contohnya didalam objek ‘blockquote’ bisa membuat(quote) diawal dan akhir menggunakan font lebih besar dan konten blockquote itu sendiri.<span>Contoh SPAN dalam DIV dengan style font-weight:bold</span> </div> <div> <p> contoh Paragraf dalam DIV tanpa style</p> <span>Contoh SPAN dalam DIV tanpa style</span> </div> 2. 4. 3. fitur transparasi. CSS3 juga memiliki fasilitas untuk shadow (bayangan) dari suatu div layout.1 CSS3 (Cascading Style Sheet) CSS3 merupakan generasi ke-3 dari perkembangan CSS sebelumnya. jadi pada dasarnya pengertian CSS3 sama dengan pengertian CSS generasi sebelumnya hanya saja beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kita dapat berkolaborasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat kita menunngu dengan loading yang yang lama.

2. dan bisa menggantikan peran gambar. sama halnya dengan Safari yang menggunakan Perfixwebkit dan diikuti oleh Opera dengan Prefix-o. seperti Mozilla yang menggunakan Prefix_moz pada browsernya untuk menterjemahkan suatu properti CSS3.CSS3 tak berdeba jauh dengan tingkat-tingkat sebelumnya.pada teks dan fitur gradien pada background. Setelah W3C mengeluarkan standar untuk CSS3 banyak pengembang web browser mencoba mengadopsi CSS3 pada browernya. Beberapa perbedaan CSS3 dan CSS: 1. CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek. Standar web 2. Masing-masing pengembang web browser mendefinisikan metode sendiri dalam mengembangkan CSS3 pada web browser mereka. 4. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS. Bisa mengurangi ukuran file yang di-load dan lebih ringan. hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa standar fungsi yang lebih menarik. Contohnya di dalam objek ‘blockquote’ bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. 3. 11 . yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2. secara otomatis mengurangi bandwidth inbound/outbound situs.1. Beberapa dari prodyusen web browser menetapkan aturan untuk menggunakan CSS3.

CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya. kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk dibrowser atau halaman web agar halaman web menjadi lebih hidup. Netscape dan Opera. JavaScript Adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE). Jika kita berbicara dalam konteks web.Javascript merupakan bahasa scripting yang digunakan untuk membuat aplikasi web. Kalau dilihat dari suku katanya terdiri dari dua suku kata. sedangkan Script adalah serangkaian instruksi program. 3. Mozilla Firefox. bahasa pemrograman berbasis prototipe yang berjalan disisi klien. 12 . Java adalah Bahasa pemrograman berorientasi objek. yaitu Java dan Script. sederhananya. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.5. hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.

Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML. Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up. Terbuka (Platform Independent). Sebelum javascript. dan lain lain. JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript. setiap interaksi dari user harus diproses oleh web server. dikarenakan diletakkan di HTML. user sepenuhnya dapat mengontrol eksekusi JavaScript. Secara fungsional. karena memiliki sedikit sintaks yang lebih mudah dimengerti. meskipun keduanya memiliki kemiripan dalam hal syntax yang meniru bahasa C. atau bahkan mengubah kode JavaScript yang ada. merubah image kursor ketika melewati objek tertentu. 13 . 2. Lebih cepat. JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Javascript tidak berhubungan dengan bahasa pemprograman java. Walaupun namanya menggunakan kata “Java”. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript. 3. fungsi validasi pada form sebelum data dikirimkan ke server. Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs. Mudah. dan dapat langsung dicoba di browser.sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung keserver terlebih dahulu. Kelebihan pemrograman java script : 1.

namun oleh karena kesederhanaan serta kemudahan penggunaanya. BAB III PENUTUP A. Objek yang dikelolah oleh java script sangat terbatas 3. Ukurannya sangat kecil dibandingkan dengan pemrograman java. serta CSS (Cascading Style Sheet) dan berkembang menjadi CSS3 dan yang terkahir materi tentang java script. HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web sedangkan HTML versi 5 justru tidak dibuat untuk mempublikasikan informasi di web. Sedangkan untuk CSS . Tidak dapat membuat program aplikasi sendiri 2. HTML kemudian dipilih orang untuk mendistribusikan informasi di web. 14 . CSS bukan termasuk bahasa pemrograman namun CSS berperan dalam mengendalikan ukuran gambar. Script yang dapat disalin dari web browser. Sedangkan untuk kekurangan dari bahasa pemrograman bahasa java script adalah: 1. Sehingga setiap orang dapat menggunakan program java script yang telah kita buat.4. Kesimpulan Dari penjelasan materi tentang HTML (Hyper Text Markup language) dan berkembang menjadi HTML5.

%20Blogger%20Tips.htm 1103-2015 file:///D:/Kuliyah/Semester%204/PWB/Apa%20itu%20HTML5%20dan %20Kelebihannya%20%20%20MKR%20site%20_%20Berbagi%20Tanpa%20Batas. BAB IV DAFTAR PUSTAKA file:///D:/Kuliyah/Semester%204/PWB/Perbedaan%20CSS%20dan%20CSS3%20_ %20Perbedaan%20CSS%20dan%20CSS3. ukuran border serta desain lainnya. JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML.%20Template.%20ensiklopedia%20bebas.htm 11-03-2015 file:///D:/Kuliyah/Semester%204/PWB/Pengertian%20HTML%20Dan%20Fungsi %20Bahasa%20HTML%20%E2%80%A2%20Trik%20Komputer%20Gratis.htm 11-03-2015 file:///D:/Kuliyah/Semester%204/PWB/HTML%20%20Wikipedia%20bahasa %20Indonesia.htm 11-03-2015 file:///D:/Kuliyah/Semester%204/PWB/Perbedaan%20CSS%20dan %20CSS3%20Lengkap%20Berserta%20Pengertiannya.htm 11-03-2015 15 . Namun CSS digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur.%20Widget.htm 11-03-2015 file:///D:/Kuliyah/Semester%204/PWB/Tutorial%20Belajar%20JavaScript %20%20Pengertian%20dan%20Fungsi%20JavaScript%20_%20Dunia%20Ilkom.warna.

com 11-03-2015 16 .blogspot.bluesmulus.