BAB IPENDAHULUANA. 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.

B. Rumusan MasalahPada pembuatan makalah pemrograman web, tim penyusun menemukan beberapa rumusan masalah yaitu:1. Apa pengertian serta fungsi dari HTML, HTML 5, CSS, CSS 3 serta JavaScript?2. Bagaimana contoh dari aplikasi atau web dari bahasa HTML, HTML 5, CSS, CSS 3 ?

C. Tujuan Penelitian

Dalam rumusan masalah diatas maka ditemukan beberapa tujuan penelitian makalah yaitu:

1. Untuk mengetahui pengertian serta fungsi dari HTML, HTML 5, CSS, CSS 3 serta JavaScript.2. Untuk mengetahui dan memberikan tampilan web atau aplikasi dari HTML, HTML 5, CSS, CSS 3.

BAB IILANDASAN TEORI

1. HTML ( Hyper Text Markup Language)

Hyper Text Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk membuat sebuah halaman web, 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. HTML disebut Markup language karena bahasa HTML menggunakan tanda atau mark, untuk menandai bagian- bagian dari text. Dan juga HTML disebut sebagai HyperText karena di dalam HTML sebuah text biasa dapat berfungsi lain, dan kita dapat membuatnya menjadi link yang dapat berpindah dari satu halamn ke halaman lainnya dengan hanya mengklik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya tidak saja hanya text yang dapat dijadikan link. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Dan dalam pengertian lain HTML juga merupakan sebuah standar yang digunakan secara luas untuk menampilkan halaman web. 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). Pada awalnya bahasa HTML banyak digunakan di dunia penerbitan dan pencetakan yang disebut dengan SGML (Standart Generalized Markup Language), disebut Markup language karena bahasa HTML menggunakan . HTML menjadi sebuah standart yang digunakan secara luas untuk menampilkan halaman web. Untuk saat ini HTML merupakan standart internet yang didefinisikan dan dikendalikan penggunanya oleh World Wide Web Consortium (W3C).

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Namun fungsi HTML yang lebih spesifik yaitu sebagai berikut :1. Mengintegerasikan gambar dengan tulisan.2. Membuat pranala.3. Mengintegerasikan berkas suara dan rekaman gambar hidup.4. Membuat form interaktif.5. Membuat halaman web.6. Menampilkan berbagai informasi di dalam sebuah browser Internet.7. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Dari beberapa fungsi yang telah dijelaskan diatas. Penyusun juga memberikan contoh dokumen HTML sederhana yang dapat dicoba, dan untuk membuat dokumen HTML dapat menggunakan notepad ataupun tools lainnya seperti Notepad ++ dan Dreamweaver.

1.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, W3C), sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language). Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Beberapa Tujuan dibuatnya HTML5 antara lain:1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan Java Script.2. Mengurangi kebutuhan untuk plugin eksternal (seperti flash).3. Penanganan kesalahan yang baik4. Lebih banyak markup untuk menggantikan scripting5. HTML5 merupakan perangkat mandiri6. Proses pembangunan dapat terlihat untuk umum

Sedangkan fitur baru dalam HTML 5 yaitu sebagai berikut:1. Unsur kanvas untuk menggambar2. Video dan elemen audio untuk media pemutaran3. Dukungan yang lebih baik untuk penyimpanan secara offline4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.Untuk saat ini beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

1.2 Perbedaan HTML5 dengan HTML sebelumnya

a. Penambahan elemen baru :

1. Article bisa berupa entri blog atau tulisan konten.2. Section serupa seperti h1-h6.3. Aside menyajikan konten pelengkap.4. Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi5. Footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya6. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

b. Penambahan atribut baru:

atribut media, ping pada elemen pranala autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form reversed pada elemen ol untuk urutan besar ke kecil.

c. Perubahan makna elemen:

1. Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak deprecated (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. 2. Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis.3. Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya dan lain-lain.

d. Elemen dan atribut yang tidak digunakan:

Center,font,strike, u, big,frame, frameset, noframes, acronym, longdesc, scope pada td dan sebagainya.

Dalam HTML5 mempunyai banya kelebihan dibanding dengan versi HTML yang sebelum nya. Terdapat juga fitur-fitur canggih pada HTML5. Dengan HTML5, pengembangan aplikasi web adalah lebih mudah dibandingkan sebelumnya.

1.3 Tag HTML Dan Fungsinya

Membuat link ke halaman lain atau ke bagian lain dari halaman tersebutMembuat nama bagian yang didefinisikan pada link pada halaman yang samaMendefinisikan informasi kontak untuk penulisMendefinisikan akronim/fungsi tag ini kurang lebih sama dengan tag Sebagai awal dari Java appletsMendefinisikan daerah yang dapat diklik (link) pada image mapMembuat teks tebalMembuat atribut teks default seperti jenis, ukuran dan warna fontMemberi (suara latar) background sound pada halaman webMemperbesar ukuran teks sebesar satu point dari defaultnyaMembuat teks berkedipMendefinisikan sebuah kutipan panjang.Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browserTag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
Pindah barisMendefinisikan sebuah tombol diklikMembuat caption pada tabelUntuk perataan tengah terhadap teks atau gambarMendefinisikan kutipanMendefinisikan sebuah bagian dari kode komputerMeletakkan komentar pada halaman web tidak tidak akan nampak pada browserIndents teksRepresents different sections of textUntuk memberi garis tengah pada teks/mencoret teksMendefinisikan sebuah istilah definisiMembuat teks miring. Fungsi tag ini sama dengan tag tetapi tag yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miringMenambahkan sound or file avi ke halaman webSeperti tag Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teksMendefinisikan input formMendefinisikan frameMendefinisikan attribut halaman yang akan menggunakan frameUkuran font yang dibedakan berdasarkan headingnya.Mendefinisikan head document.Membuat garis horizontalBararti dokumen htmlMembuat teks miringMembuat teks miringMembuat teks bergaris bawahImage, imagemap atau an animationMendefinisikan input field pada formMembuat bullet point atau baris baru pada list (berpasangan dengan tag , , and )Mendefinisikan label untuk sebuah elemen Fungsi tag ini sama dengan tag .Mendefinisikan client-side mapMembuat scrolling teks (teks berjalan) hanya pada MS IEMencegah ganti baris pada teks atau imagesJika browser user tidak mendukung frameMendefinisikan awal dan akhir sebuah numberingmeletakkan sebuah embed untuk objekMenampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-downGanti paragraphMembuat teks dengan ukuran huruf yg samaMendefinisikan awal scriptMembuat daftar drop-downMembuat tabelKolom pada tableMendefinisikan title Mendefinisikan sebuah kontrol input multilineBaris pada tableUntuk mengelompokkan isi header di dalam sebuah tabelUntuk mengelompokkan isi body di dalam sebuah tabelUntuk mengelompokkan isi footer di dalam sebuah tabelMembuat teks bergaris bawahMendefinisikan awal dan akhir sebuah Bullets2. CSS (Cascading Style Sheet)CSS merupakan salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehinggan akan terlihat lebih terstruktur dan seragam. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.CSS dikembangkan untuk mengatur gaya tampilan pada web. Pada awalnya CSS dikembangkan pada SSGML pada tahun 1970 dan terus dikembangkann sehingga saat ini CSS telah mendukung banyak bahasa Markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozila XUL (XML User Interfaces Language). Mengacu dari bahasa CSS memiliki arti gaya menata halaman bertingkat yang berarti setiap satu elemen yang telah diformat memiliki anak, maka anak dari elemen tersebut secara otimatis mengikuti format elemen induknya.CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang bisa mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images, dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin kiri/kanan/atas/bawah, spasi antar paragraf, spasi antar teks, dan parameter lainnya. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Adapun beberapa kegunaan CSS antara lain:1. Mempersingkat penulisan tag HTMLSehingga tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.2. Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.3. Mudah dan cepat dalam me-maintenance dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu merombak semua elemen atau property dalam HTML, cukup mengedit file CSS-nya saja.Dibawah ini merupakan sedikit contoh coding CSS (Cascading Style sheet) : Contoh Paragraf dalam DIV dengan style font-weight:boldContoh SPAN dalam DIV dengan style font-weight:bold contoh Paragraf dalam DIV tanpa styleContoh SPAN dalam DIV tanpa style2.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.Beberapa kelebihan yang terdapat pada CSS 3 :1. CSS3 lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya didalam objek blockquote bisa membuat(quote) diawal dan akhir menggunakan font lebih besar dan konten blockquote itu sendiri.2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS1 dan CSS2.3. Dengan menggunakan CSS3 situs yang kita buat akan lebih berkembang dan bisa lebih interaktif dengan pengunjung.4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwith inbound/outbound situs.CSS3 juga memiliki fasilitas untuk shadow (bayangan) dari suatu div layout, fitur transparasi, gradien warna pada border, warna pada teks yang diseleksi, fitur skala untuk memperkecil atau memperbesar layout, kolom pada teks dan fitur gradien pada background.CSS3 tak berdeba jauh dengan tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa standar fungsi yang lebih menarik. Setelah W3C mengeluarkan standar untuk CSS3 banyak pengembang web browser mencoba mengadopsi CSS3 pada browernya. Masing-masing pengembang web browser mendefinisikan metode sendiri dalam mengembangkan CSS3 pada web browser mereka. Beberapa dari prodyusen web browser menetapkan aturan untuk menggunakan CSS3, seperti Mozilla yang menggunakan Prefix_moz pada browsernya untuk menterjemahkan suatu properti CSS3, sama halnya dengan Safari yang menggunakan Perfix-webkit dan diikuti oleh Opera dengan Prefix-o.Beberapa perbedaan CSS3 dan CSS:1. CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek blockquote bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS.3. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung.4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs.5. CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa fungsi yang menarik.3. JavaScriptAdalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk dibrowser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.Javascript merupakan bahasa scripting yang digunakan untuk membuat aplikasi web, sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung keserver terlebih dahulu. Walaupun namanya menggunakan kata Java, Javascript tidak berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki kemiripan dalam hal syntax yang meniru bahasa C.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. Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server. Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.Kelebihan pemrograman java script :1. Lebih cepat, dikarenakan diletakkan di HTML, dan dapat langsung dicoba di browser.2. Mudah, karena memiliki sedikit sintaks yang lebih mudah dimengerti.3. Terbuka (Platform Independent).4. Ukurannya sangat kecil dibandingkan dengan pemrograman java.Sedangkan untuk kekurangan dari bahasa pemrograman bahasa java script adalah:1. Tidak dapat membuat program aplikasi sendiri2. Objek yang dikelolah oleh java script sangat terbatas3. Script yang dapat disalin dari web browser. Sehingga setiap orang dapat menggunakan program java script yang telah kita buat.BAB IIIPENUTUPA. KesimpulanDari penjelasan materi tentang HTML (Hyper Text Markup language) dan berkembang menjadi HTML5, 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, namun oleh karena kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web. Sedangkan untuk CSS , CSS bukan termasuk bahasa pemrograman namun CSS berperan dalam mengendalikan ukuran gambar, warna, ukuran border serta desain lainnya. Namun CSS digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur. JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML.BAB IVDAFTAR PUSTAKAfile:///D:/Kuliyah/Semester%204/PWB/Perbedaan%20CSS%20dan%20CSS3%20_%20Perbedaan%20CSS%20dan%20CSS3.htm 11-03-2015file:///D:/Kuliyah/Semester%204/PWB/Tutorial%20Belajar%20JavaScript%20%20Pengertian%20dan%20Fungsi%20JavaScript%20_%20Dunia%20Ilkom.htm 11-03-2015file:///D:/Kuliyah/Semester%204/PWB/Perbedaan%20CSS%20dan%20CSS3%20Lengkap%20Berserta%20Pengertiannya.htm 11-03-2015file:///D:/Kuliyah/Semester%204/PWB/Pengertian%20HTML%20Dan%20Fungsi%20Bahasa%20HTML%20%E2%80%A2%20Trik%20Komputer%20Gratis.htm 11-03-2015file:///D:/Kuliyah/Semester%204/PWB/Apa%20itu%20HTML5%20dan%20Kelebihannya%20%20%20MKR%20site%20_%20Berbagi%20Tanpa%20Batas,%20Blogger%20Tips,%20Widget,%20Template.htm 11-03-2015file:///D:/Kuliyah/Semester%204/PWB/HTML%20%20Wikipedia%20bahasa%20Indonesia,%20ensiklopedia%20bebas.htm 11-03-2015bluesmulus.blogspot.com 11-03-20151