MAKALAH

DESAIN WEB
TENTAMG
PERSAMAAN DAN PERBEDAAN HTML 4 DAN HTML 5

Oleh :

NAMA : SYAMSUDIN BATOLA

NIM :15.45.55.056
SEMESTER :VII (TUJUH) .B
PRODI :TEKNIK INFORMATIKA

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
(STMIK) SYAIKH ZAINUDDIN NW ANJANI LOTIM

2018-2019
 KATA PENGANTAR

Bismillahirrahmanirrahim. . .
Assalamualaikum warah matullahi wabarokatuh

Segala puji bagi allah s.w.t. yang telah melimpahkan rahmat

dan karunianya sehingga saya dapat menyelesaikan makalah ini . salawat
beriringan salam kita ucapkan kapada nabi besar muhammad s.a.w. yang
telah menegakan syarit islam yang sampai pada saat ini yang sama-sama
kita rasakan nikmatnya, dalam kesempatan ini, saya mengucapkan terima
kasih kepada bapak dosen.
Penulis juga menyadari bahwa dalam pembuatan makalah ini
saya masih banyak kekurangan dan kelemahan untuk itu saya
mengharapkan kritik dan saran demi kesempurnaan makalah ini, saya
selaku penulis mengucapkan terima kasih semoga menjadi amal sholeh di
sisi allah s.w.t. Aminnn.

Anjani ,28 November 2018

ii
 DAFTAR ISI

KATA PENGANTAR ...................................................................................................... ii

DAFTAR ISI..................................................................................................................... iii

BAB I PENDAHULUAN

A. Latar Belakang................................................................................................... 1

B. Rumusan Masalah............................................................................................. 1

C. Tujuan Makalah................................................................................................ 1

D. Manfaat Makalah................................................................... .......................... 1

BAB II PEMBAHASAN
A. Persamaan dan Perbedaan HTML5 dengan HTML4......................... 2

B. Pengertian CSS....................................................................................... 5

C. Cara mengintegrasikan CSS ke HTML...................................... 6

BAB III PENUTUP

A. Kesimpulan.................................................................................................... . 9

B. Saran........................................................................... .......................... 9

DAFTAR PUSTAKA

iii
 BAB 1

PENDAHULUAN

A. Latar Belakang

Web merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua
yaitu web statis dan web dinamis. Web statis adalah media untuk menampilkan
halaman statis atau tetap, tetapi yang mengatur nya adalah web browser. Contoh
teknologi yang berkaitan dengan web statis adalah Client Side seperti HTML, Java
script.

Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran,

maksud nya walaupun kita tidak begitu mrngerti terhadap pembahasan tetapi kita
sudah mengenal dan mengetahui nya. Hal ini telah memudahkan bagi pelajar yang
mempelajari tentang bab ini karena sudah dikelompokkan sesuai dengan bahasannya.
Tetapi disamping itu kita haru rajin berlatih terus mencoba membuat web, baik yang
statis ataupun dinamis. Berdasarkan kenyataan diatas penyusun tertarik untuk
membuat makalah yang berjudul HTML dan Java Script.

B. Rumusan Masalah

1) Apa saja yang mendasari HTML?

2) Bagaimana struktur HTML?

3) Atribut-atribut apa saja saat kita ingin membuat sebuah web?

C. Tujuan Makalah

Makalah ini disusun dengan tujuan untuk mengetahui dan mendeskripsikan

tentang HTML.

D. Manfaat Makalah

Makalah ini dapat digunakan sebagai contoh untuk pembelajaran dan pengenalan
dasar dari HTML dan Java Script.

1
 BAB II

PEMBAHASAN

A. Persamaan dan Perbedaan HTML 5 dengan HTML 4

HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum
HTML5 adalah HTML 4.01. dan XHTML 1.1. Kali ini kita akan membahas apa saja
fitur-fitur baru yang tersedia di dalam HTML5 serta perbedaannya dengan versi
HTML sebelumnya.
Perkembangan HTML terhenti pada versi 4.01 di tahun 1999. W3C sebagai badan
yang bertanggung jawab dalam standarisasi teknologi internet (termasuk HTML),
kemudian beralih mengembangkan XHTML yang juga akhirnya menemui jalan
buntu pada versi 2.0. Jika sebelumnya anda sudah terbiasa menggunakan HTML 4.01
ataupun XHTML 1.1, terdapat perubahan kecil pada HTML5.
Pada dasarnya HTML5 adalah gabungan ‘best practice‘ dari HTML 4.01 dan
XHTML. Hampir semua tag atau elemen pada HTML 4.01 maupun XHTML 1.1
dapat digunakan dalam HTML5.
1. Beberapa perbedaan yang akan ditemukan dalam HTML5:

 Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling
mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak.
Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE
html>.
 Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5.
Hal ini karena secara default web browser akan menggunakan text/css untuk
tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk
menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag
<style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam
HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>
 Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih
sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-
equiv=”content-type” content=”text/html;charset=UTF-8″ />.
 Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti
dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.

2
 Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau
tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.
 Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga
tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang
mengharuskan seluruh tag ditulis dalam huruf kecil.
 Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p
class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka
tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.
 HTML5 mendukung multimedia secara langsung menggunakan
tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak
ke-3 seperti flash player.
 HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi
(pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan
frameset).

Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5
di http://validator.w3.org/:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Tes Validasi HTML5</TITLE>
6 <style>
7 .penting {
8 color:blue;
9 }
10 </style>
11 </head>
12 <BODY>
13 <p CLASS=penting>Paragraf ini menggunakan atribut tanpa
14 menggunakan tanda kutip </p>
15 <br>
16 <p> Paragraf ini tidak memiliki penutup tag

3
17 </body>
18 </html>

Dari perbedaan diatas, terlihat bahwa HTML5 ‘lebih bebas‘‘ dari XHTML. Akan
tetapi sebaiknya kita tetap menggunakan penulisan yang ‘rapi‘,
‘ ‘, seperti menggunakan
huruf kecil untuk semua tag, menutup semua tag dan memberi tanda kutip dalam
setiap nilai atribut

4
B. Pengertian CSS
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain
sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk
segala dokumen XML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang
meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten
pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi
darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi
halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode
dan struktur dari konten, contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai
style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen,
in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan
link yang menghubungkan konten dengan file CSS.
ujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari
tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan
lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah
warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan
mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-
tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat
halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan
web.

5
 Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman
wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya
css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih
fungsional dan menarik.

C. Cara mengintegrasikan CSS ke HTML

1) Tips cara menggunakan css pada html:
Dalam membuat halaman web, biasanya kita akan memberi style pada elemen
HTML yang telah dibuat. Penggunaan CSS tidak sebatas untuk memberi warna dan
merubah ukuran, dengan CSS kita bisa mengatur tata letak sebuah halaman HTML.
Banyak cara menerapkan css pada html, dalam tutorial kali ini kita akan
membahas 3 metode cara menerapkan css pada html dan masing-masing metode
memiliki kelebihan dan kekurangan. Oke, mari kita bahas satu persatu.

Cara mengaplikasikan CSS adalah sebagai berikut:

a. Cara menggunakan CSS Inline Style
Inline style adalah penerapan kode css pada satu elemen HTML didalam satu
halaman HTML, dengan cara ini kita bisa langsung memberikan style dengan cara
memasukkan kode css pada atribut tag HTML. Atribut yang digunakan untuk
menyisipkan kode css adalah atribut style, sebagai contoh perhatikan contoh skrip
HTML dibawah:

Skrip HTML diatas jika dijalankan akan menampilkan tulisan yang bewarna hitam,
jika kita ingin merubah warna paragraf ke warna biru, maka kita bisa langsung
memberikan atribut style dengan nilai color: blue;.

Perlu diketahui, bahwa metode inline style tidak efisien jika kita sering merubah dan
menggunakan kembali kode CSS yang telah kita buat. Dengan metode ini, kita hanya
bisa menerapkan style hanya pada satu elemen, bayangkan jika kita harus memberi
dan merubah satu-satu style semua paragraf yang terdapat dalam dokumen HTML.

6
b. Cara menggunakan CSS Embedded Style / Internal Style

Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu
halaman HTML, maka embedded style bisa digunakan dalam beberapa elemen
HTML. Meskipun bisa digunakan dalam beberapa elemen HTML, embedded style
hanya bisa diterapkan hanya pada satu halaman HTML.

Metode ini menggunakan tag <style> didalam elemen head, kita membuat baris
skrip CSS dalam tag <style> dan skrip CSS itu akan langsung merubah semua
elemen sesuai yang kita atur.
Sebagai contoh, kita akan merubah style tulisan semua elemen paragraf dengan
warna biru, maka skrip HTML akan seperti ini.

Dengan metode ini baik paragraf kesatu atau kedua akan langsung berubah menjadi
berwarna biru, kembali lagi jika kita menggunakan metode inline style maka kita
harus merubah satu-satu elemen.

c. Cara Menggunakan CSS Linked Style/External Style

Ini adalah metode yang bisa digunakan untuk merubah style pada semua elemen
di semua page, cara ini mengharuskan kita untuk membuat file CSS. Setelah kita
membuat file CSS, maka file tersebut kita panggil dalam tag <link>.
Sebagai contoh, pertama kita buat file dengan nama style.css, ketikkan skrip berikut
untuk merubah semua tulisan elemen paragraf ke warna biru.

Setelah itu, ketikkan skrip berikut untuk memanggil file style.css yang telah dibuat.

7
 Letakkan skrip diatas dalam tag <head> sehingga skrip akhir menjadi seperti ini.

Ketika skrip diatas dijalankan akan memberikan hasil yang serupa seperti dua
metode sebelumnya, kelebihan dalam metode ini adalah kemudahan untuk merubah
dan menerapkan style pada elemen apapun dalam page manapun.

Cara ini hampir pasti dilakukan oleh para pengembang web. Pada kenyataannya
ketiga metode diatas sering digunakan berbarengan ketika kita menggunakan
tambahan skrip dari luar seperti penggunaan plugin atau sejenisnya.

Untuk melihat demo dari metode embedded style silahkan anda klik tombol “Run
Skrip” dibawah ini.

No.1 No.2

Hasil dari skrip di atas, jika kursornya belum di arahkan ke tomol, maka warnanya
seperti gambar no.1, jika kursornya di arahkan ke tombol, maka secara otomatis
tombolnya akan berubah menjadi warna abu.

8
 BAB III

PENUTUP

A. Kesimpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan
HTML. Dimana www merupakan suatu protokol standar dari internet, sedangkan
HTML merupakan script atau program standar yang dijalankan oleh www atau
internet. Proyek HTML ini dibuat dengan menggunakan media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan
bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan
notepad ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian
untuk setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri
sesuai dengan apa yang akan kita buat.

B. Saran

Bagi para pemula, pembuatan web/HTML merupakan dasar yang penting

sehingga dapat membantu ketika kita memulai sebuah proyek web tanpa
menggunakan cara yang praktis.

9
 DAFTAR PUSTAKA

http//Pengertian%20CSS%20(Cascading%20Style%20Sheet)%20_%20IT-
Jurnal.com.html

http//Tips%20Cara%20menggunakan%20CSS%20pada%20HTML%20-
%20Nyekrip.html

http//MAKALAH%20HTML%20_%20sismartamelia.html

Perbedaan%20HTML5%20dengan%20HTML%204.01%20dan%20XHTML%201
.1_%20Belajar%20HTML5%20_%20Duniailkom.html

Tips%20Cara%20menggunakan%20CSS%20pada%20HTML%20-
%20Nyekrip.html

10