DESAIN WEB 01

1. 5150411167 AULIA RAMADAN

2. 5150411174 ADITYA DWI KURNIAWAN
3. 5150411178 YOGA ARDHI PRASETYA
4. 5150411186 ANANDO WAHONO PUTRO
 Desain Web - HTML |1

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta
karunia-Nya kepada kami sehingga kami berhasil menyelesaikan Tugas ini yang alhamdulillah tepat
pada waktunya yang berjudul Desain Web 01.
Tujuan penulisan makalah ini adalah untuk memenuhi salah satu tugas mata pelajaran Desain
Web yang di ampu oleh Bapak Suyud Widiono, S.PD, M.KOM.
Tugas ini berisikan tentang informasi Tentang Sejarah HTML, Tag HTML dan HTML 5.
Diharapkan Tugas ini dapat memberikan informasi kepada kita semua.
Penulis menyadari bahwa Tugas ini masih jauh dari sempurna, oleh karena itu kritik dan saran
dari semua pihak yang bersifat membangun selalu kami harapkan demi kesempurnaan Tugas ini.
Akhir kata, kami sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam
penyusunan Tugas ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai segala usaha
kita. Amiin.

Yogyakarta, 23 September 2018

Penyusun
 Desain Web - HTML |2

DAFTAR ISI
KATA PENGANTAR............................................................................................................................ 1

DAFTAR ISI ........................................................................................................................................ 2

BAB I Hyper Text Markup Language ............................................................................................. 4

1.1. Sejarah Singkat HTML ......................................................................................................... 4
1.2. Tag-tag HTML ...................................................................................................................... 5
1.3. HTML5 ................................................................................................................................. 8
1.4. Latihan HTML5 .................................................................................................................. 12

REFERENSI ....................................................................................................................................... 16
 Desain Web - HTML |3

Nama : Aditya Dwi Kurniawan

NIM : 5150411174

Mengerjakan : 1.1

Nama : Yoga Ardhi Prasetya

NIM : 5150411178

Mengerjakan : 1.2

Nama : Aulia Ramadan

NIM : 5150411167

Mengerjakan : 1.3

Nama : ANANDO WAHONO PUTRO

NIM : 5150411186

Mengerjakan : 1.4
 Desain Web - HTML |4

BAB I
Hyper Text Markup Language

1.1. Sejarah Singkat HTML

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk menulis halaman web
dan menampilkan berbagai informasi di dalam sebuah browser internet. HTML merupakan
pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup
Language (SGML). HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C).

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN (Conseil Europeene Pour La
Recherche Nuclaire) dan dipopulerkan pertama kali oleh browser Mosaic pada tahun 1989 sebagai
cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Tujuan awal dari web
browser adalah untuk melayani sebagai pembaca untuk dokumen berformat HTML. Namun, dua
dekade kemudian browser sendiri telah menjadi sebuah portal ke dunia media online. Itulah sebabnya
versi2 HTML yang selanjutnya tidak hanya sebagai revisi HTML, tetapi juga sebagai standar yang
komprehensif untuk bagaimana halaman web bekerja.

Perkembangan HTML

1. HTML
HTML (Hyper Text Markup Language) atau yang sering disebut dengan HTML
merupakan sebuah jenis teks dokumen khusus yang membuat sebuah halaman web yang
digunakan oleh Web Browser untuk mempresentasikan teks dan gambar. File HTML adalah
berisi beberapa instruksi atau perintah yang kemudian diterjemahkan oleh browser yang ada
dikomputer user. HTML dikenal sebagai standar bahasa yang digunakan untuk menampilkan
dokumen web. Sedangkan dokumen HTML sering disebut sebagai ”Halaman Web”. Browser
mengambil halaman Web dari Web server dan karena adanya Internet, Halaman tersebut bisa
berada di manapun di dunia.

2. HTML +
HTML + merupakan HTML versi pertama yang mempunyai beberapa kemampuan
diantaranya yaitu: Heading, Paragraph, Hypertext, list, Cetak tebal dan miring pada teks,
Image pada dokumen tanpa teks disekelilingnya (wrapping).

3. HTML versi 2.0

Pada HTML versi 2.0 terdapat penambahan kualitas yang terletak pada kemampuan
untuk menampilkan suatu form pada dokumen. Sehingga kita dapat memasukkan nama,
alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari
adanya homepage interaktif. Dengan menggunakan HTML 2.0, kita dapat membuat lembar
halaman ciptaan yang dapat dilihat oleh semua orang.
 Desain Web - HTML |5

4. HTML versi 3.2

HTML 3.2 berisi fitur2 baru seperti font, tabel, applet, superscripts, subscript, dll.
Salah satu unsur yang ditambahkan ke standar HTML 3.2, adalah <tag>. Tag ini diperkenalkan
kompleksitas yang tidak perlu untuk tugas penting dari memisahkan konten HTML (teks) dari
presentasi (style). Selain itu pada HTML versi 3.2 ini, kita bisa menggunakan script di luar HTML
untuk mendukung kinerja HTML tersebut, seperti javascript dan Vbscript.

5. HTML versi 4.01

HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari
HTML versi sebelumnya yang terlebih dahulu diterbitkan. HTML versi 4.01 masih standart
resmi sampai sekarang ini untuk memperbaiki kesalahan-kesalahan kecil (minor errors) pada
versi sebelumnya. HTML versi ini juga menjadi standardisasi untuk elemen dan atribut
dari script XHTML 1.0.

6. HTML versi 5.0

HTML versi 5.0 ini masih dikerjakan/dikembangkan mulai 4 Maret 2010 oleh W3C
(World Wide Web Consortium), W3C sendiri adalah sebuah Organisasi yang menangani
pengembangan web standar. Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca
oleh manusia dan juga mudah dimengerti oleh mesin.

1.2. Tag-tag HTML

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi
untuk warna dari text, besar huruf dari text, dll.

Heading adalah sekumpulan kata yang menjadi judul atau sub judul dalam dokumen HTML,
dengan berbagai ukuran yang berbeda

HTML Style digunakan untuk menentukan informasi gaya untuk dokumen HTML.

HTML Formatting adalah pengolah kata untuk membuat teks tebal, dicetak miring, atau
digarisbawah

Comments adalah tag yang digunakan untuk memasukkan komentar dalam kode sumber HTML.

Colors adalah tag yang digunakan untuk menentukan warna pada tingkat halaman.

links adalah tag yang menentukan tautan antara dokumen dan sumber daya eksternal.

Images adalah tag yang digunakan untuk mendefinisikan gambar di halaman HTML.

Tables adalah tag yang digunakan untuk mendefinisikan tabel HTML.

 Desain Web - HTML |6

Lists adalah tag untuk mendefinisikan item daftar.

Unordered list adalah tag untuk mendefinisikan daftar unordered (bullet).

Ordered List adalah tag untuk mendefinisikan daftar pesanan. Daftar yang dipesan dapat berupa
angka atau alfabet.

Definition list adalah tag untuk mendefinisikan daftar pada list.

Nested List adalah tag untuk membuat daftar tersarang.

Iframe adalah tag untuk menentukan frame inline.

JavaScript digunakan untuk mendefinisikan skrip sisi-klien .

File Paths adalah Jalur file menggambarkan lokasi file dalam struktur folder situs web.

Head adalah wadah untuk semua elemen head.

Layout adalah Situs web sering menampilkan konten dalam beberapa kolom (seperti majalah atau
koran).

Responsive adalah tentang menggunakan HTML dan CSS untuk mengubah ukuran,
menyembunyikan, mengecilkan, atau memperbesar secara otomatis, sebuah situs web, agar
terlihat bagus di semua perangkat.

Computercode adalah digunakan untuk mewakili input pengguna, seperti input keyboard atau
perintah suara.

Entities adalah Karakter yang dicadangkan dalam HTML harus diganti dengan entitas karakter.

Symbol adalah simbol matematika, teknis, dan mata uang yang tidak ada pada keyboard normal.

Charset adalah Untuk menampilkan halaman HTML dengan benar, browser web harus tahu set
karakter mana (pengkodean karakter) yang akan digunakan.

Character Set ASCII adalah Data komputer disimpan sebagai kode biner (01000101) dalam
elektronik.

Character Set Latin-1 atau ISO/IEC 8859-1 adalah rangkaian karakter ASCII asli. Ini berisi angka,
huruf besar dan huruf kecil bahasa Inggris, dan beberapa karakter khusus.

Character Set UTF-16 dan UCS-2

 Desain Web - HTML |7

Character Set UTF-32 dan UCS-4

Character Set dan Character Encoding UTF-8

URL Encoding adalah Penyandian URL mengubah karakter menjadi format yang dapat
ditransmisikan melalui Internet.

Form adalah tag yang digunakan untuk membuat formulir HTML untuk input pengguna.

Form Elemen adalah semua elemen formulir HTML

Input Type adalah berbagai jenis input untuk elemen .

Input Atribut adalah Atribut nilai menentukan nilai awal untuk bidang input.

Atribut Nilai

Atribut Read-Only

Atribut Disable

Atribut Ukuran
 Desain Web - HTML |8

Atribut Max-Length

1.3. HTML5

Tentang HTML 5: HTML adalah teknologi dasar yang digunakan untuk membuat dasar dari
sebuah halaman web dengan menghubungkan teks / link antar halaman, memberi struktur dan
membagikan informasi yang terkait dengan sebuah halaman web.

New Elements dan Semantic Tag :

Elemen <article> : article merupakan tag yang ditulis sebagai element HTML dalam
format <article>..</article> , digunakan untuk memberi mark up sebuah independent content,
artinya element itu dapat berdiri sendiri sebagai sebuah konten utuh yang tidak terikat dengan
konten lain (element lain). Contoh: sebuah postingan blog, komentar blog, postingan forum,
sebuah review item tertentu, berita atau sebuah interaktif widget dapat ditulis dan diapit
menggunakan element <article> </article> .

Elemen <aside> : aside artinya disamping yang menunjukkan bersebelahan.

Element aside digunakan untuk merepresentasikan sebuah bagian halaman (seksi) yang
berkaitan dengan konten disekitar element aside itu sendiri.

Elemen <bdi> : HTML element <bdi> digunakan untuk mengisolasi diri terhadap arah tulisan yang
mungkin berbeda dari element lain di sekitarnya.

Elemen <detail> : menentukan rincian tambahan bahwa pengguna dapat melihat atau
menyembunyikan on demand.

Elemen <dialog> : HTML <dialog> tag digunakan untuk merepresentasikan kotak dialog yang akan
muncul untuk mendapatkan perhatian dan interaksi dengan user.

ELEMEN <figcaption> : HTML <figcaption> element merepresentasikan sebuah judul (caption)

untuk <figure> element. Contohnya, sebuah gambar seringkali terdapat catatan (judul) yang
mewakili atau memberi keterangan pada gambar tersebut. Elemen <figcaption> dapat digunakan
untuk memarkup judul atau keterangan dari gambar tersebut.

ELEMEN <figure> : element digunakan untuk merepresentasikan konten tersendiri (self-

contained, seperti sebuah kalimat lengkap), contohnya sebuah ilustrasi, diagram, foto, video,
skema, deretan kode (code listings) dan lain sebagainya.
 Desain Web - HTML |9

ELEMEN <footer> : HTML <footer> element merepresentasikan sebuah catatan kaki (bagian kaki
/ footer) untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada
sebuah <article> element, <section> element, catatan kaki untuk induk dokumen
( <body> element) dan lain sebagainya.

ELEMEN <header> : element merepresentasikan konten pengantar, pembukaan atau navigasi

yang terdiri dari deretan link.

ELEMEN <main> : element merepresentasikan konten utama dalam sebuah dokumen (tepatnya
didalam <body> element).

ELEMEN <mark> : element digunakan untuk merepresentasikan teks yang disorot atau ditandai
karena memiliki peran penting, yang biasanya dimaksudkan untuk mereferensi (merujuk) atau
mengingatkan akan hal penting yang berkaitan dengan konteks khusus sebuah kalimat.

ELEMEN <meter> : pengukuran skalar dalam kisaran dikenal, atau nilai pecahan. Hal ini juga
dikenal sebagai ukuran.

ELEMEN <nav> : element merepresentasikan link navigasi (navigational link). Link-link yang
merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan (digabungkan) di
dalam element <nav>. Akan tetapi, tidak semua link dapat ditulis (digabungkan) dalam
element <nav>, seperti beberapa link yang ditulis didalam <footer> element, tidak tepat bila
digabungkan dalam <nav> element.

ELEMEN <progress> : merupakan kemajuan tugas.

ELEMEN <selection> : element merepresentasikan sebuah kontrol yang digunakan untuk

menyeleksi (memilih) deretan opsi (daftar pilihan) yang diberikan baik satu ataupun lebih dari
satu pilihan.

ELEMEN <time> : element digunakan untuk merepresentasikan sebuah waktu 24-jam atau
tanggal, tepatnya tanggal dalam sistem masehi (dikenal dengan nama "Gregorian Calendar")
dengan tambahan waktu dan informasi zona waktu (timezone) yang dapat ditulis secara opsional.

ELEMEN <wbr> : (Word Break Opportunity) digunakan untuk merepresentasikan posisi sebuah
kata atau frase yang dapat dipecah (dipindahkan) ke baris baru (line break).

ELEMEN <track> : element digunakan untuk menampilkan teks berdasarkan waktu putar media
(audio maupun video) atau tepatnya adalah timed text tracks. <track> tag ditulis di dalam media
element, seperti <audio> dan <video> .

Graphics dan Canvas : Canvas adalah elemen baru di HTML5 untuk

menggambar (render) grafik, image, dan teks.

Tentang Canvas : element <canvas> digunakan untuk menggambar grafik / bitmap secara
interaktif menggunakan script (javascript). Contohnya, digunakan untuk menggambar grafik
permainan, animasi, komposisi foto dan efek gambar visual lainnya.
 D e s a i n W e b - H T M L | 10

Kanvas Gambar : digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya
JavaScript).

Koordinat kanvas : Kanvas HTML adalah grid dua dimensi.

Draw Line : The lineTo () metode menambahkan titik baru dan menciptakan garis ke titik itu DARI
titik yang ditentukan terakhir di kanvas (metode ini tidak menarik garis).

Draw a Circle :

Canvas Gradient : Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks,
dll Bentuk di kanvas tidak terbatas pada warna solid.

CreateLinearGradient

CreateRadialGradient

Canvas Text

CanvasImages

SVG : singkatan dari Scalable Vector Graphics, yang digunakan untuk mendefinisikan vektor
berbasis grafis untuk Web

Apa itu SVG? bahasa untuk mendeskripsikan grafis 2D dalam XML.

Membuat Gambar SVG : Dalam SVG, setiap bentuk digambar sebagai obyek. Jika atribut dari
sebuah objek SVG berubah, browser secara otomatis dapat kembali membuat bentuk.

kanvas
Contoh SVG Rectangle : Semua utama web modern browser-termasuk Mozilla Firefox, Internet
Explorer, Google Chrome, Opera, Safari, dan Microsoft Ujung-memiliki SVG render dukungan.

Circle :

Ellipse : Ellipse merupakan salah satu software ERP (Enterprise Resource Planning). Konsep ERP
sendiri banyak digunakan oleh beberapa perusahaan atau beberapa industri sekala menengah
keatas.

Line :

Polygon

Polyline

Path : diagram pada pembuatan web

Text
 D e s a i n W e b - H T M L | 11

Stroke

Blur Effect :

Drop Shadow : satu-satunya program publishing terpopuler yang dapat memenuhi semua
kebutuhan kita dalam mendesain sesuatu baik itu untuk media promosi ataupun yang lainnya.

Linear

Radial : Radial adalah sebuah homonim karena arti-artinya memiliki ejaan dan pelafalan yang
sama tetapi maknanya berbeda.

Google Maps : layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan
citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian
dengan berjalan kaki, mobil, sepeda (versi beta), atau angkutan umum.

Media : Media adalah segala bentuk dan saluran yang digunakan untuk menyampaikan informasi
atau pesan.

Video : Video adalah teknologi untuk menangkap, merekam, memproses, mentransmisikan dan
menata ulang gambar bergerak. Biasanya menggunakan film seluloid, sinyal elektronik, atau
media digital.

Audio : Dalam sistem komunikasi bercirikan suara, sinyal elektrik digunakan untuk membawa
unsur bunyi.

Plug-ins : Aplikasi berukuran kecil yang ditanam ke dalam aplikasi lain yang lebih besar, yang
bertujuan untuk meningkatkan fungsionalitas aplikasi induknya.
 D e s a i n W e b - H T M L | 12

1.4. Latihan HTML5

{semua dari sub-bab 1.2. Tag-tag HTML sampai selesai di coba, hasil percobaan berupa kode sumber
/ source code di taruh disini termasuk capture hasil dari browser, dirapikan}
D e s a i n W e b - H T M L | 13
D e s a i n W e b - H T M L | 14
 D e s a i n W e b - H T M L | 15

HASIL SCREENSHOOT
 D e s a i n W e b - H T M L | 16

REFERENSI

https://cahyonex.wordpress.com/2013/09/16/sejarah-dan-perkembangan-html-hyper-text-markup-
language/

https://id.wikipedia.org/wiki/HTML5

https://www.duniailkom.com

https://www.codepolitan.com