TUGAS

DESAIN WEB 1

OLEH :
NAMA : JURINI
NIM : 1321022

STMIK SURYA INTAN KOTABUMI

LAMPUNG UTARA
TAHUN 2016/2017

Kata Pengantar
Puji syukur hanya pantas dipersembahkan kehadirat Allah SWT atas limpahan
berkah, nikmat dan pertolongan-Nya berupa kemudahan dan kelancaran, serta petunjukNya yang diberikan sehingga penyusun bisa melewati semua kendala dalam penyusunan
makalah Desain Web ini serta menyelesaikan sesuai batas waktu yang diberikan.
Makalah ini dimaksudkan untuk memenuhi tugas Semester Pendek yang
diberikan. Makalah ini disusun sesuai web yang dibuat. Pokok-pokok pembahasan
diuraikan secara terperinci dengan menggunakan bahasa yang sederhana dan mudah
dicerna sehingga diharapkan bisa dipahami oleh pembaca secara luas.
Karena banyaknya kendala dan keterbatasan, penyusun menyadari makalah ini
tidak terlepas dari kekurangan. Akhir kata, penyusun menghaturkan rasa terimakasih
yang sedalam-dalamnya kepada banyak pihak yang telah memberikan dorongan dan
bantuan dalam penyelesaian makalah ini. Penyusun menerima saran dan kritik yang
membangun untuk kesempurnaan makalah ini. Semoga makalah ini bermanfaat bagi kita
semua. Amin!
Kotabumi,

Juli 2016

Penyusun

Daftar Isi
Kata Pengantar.......................................................................................................
Daftar Isi ...............................................................................................................

2
3

PENDAHULUAN.. ..............................................................................................
PEMBAHASAN.. .................................................................................................

4
5

BAB I ....................................................................................................................
Latar Belakang. .....................................................................................................
Tujuan. ..................................................................................................................

5
5
5

BAB II ..................................................................................................................
Mengenal HTML5. ...............................................................................................
HTML 5 Canvas Element Template [Basic]. ........................................................
Pengenalan Struktur HTML 5. .............................................................................
HTML 5 Canvas Path Tutorial [Basic]. ................................................................
HTML 5 Canvas Image Tutorial [Basic]. .............................................................
HTML 5 Canvas Text Tutorial [Basic]. ................................................................
HTML 5 Canvas Radial Gradient Tutorial [Basic]. .............................................
HTML 5 Canvas Oval Tutorial [Basic]. ...............................................................
HTML 5 Canvas Semicircle Tutorial [Basic]. ......................................................

5
5
7
9
12
14
15
16
18
20

BAB III .................................................................................................................

Home. ...................................................................................................................
Profil .....................................................................................................................
Gallery. .................................................................................................................
Download Photoshop. ...........................................................................................
Download jet audio. ..............................................................................................
Contacts. ...............................................................................................................
Form beli ..............................................................................................................

21
21
22
22
23
23
24
24

PENUTUP. ............................................................................................................
KESIMPULAN.. ..................................................................................................

25
25

PENDAHULUAN
Perancangan web (web design) adalah istilah umum yang digunakan untuk mencakup
bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia)
yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan
sebuah browser web atau perangkat lunak berbasis web. Tujuan dari web design adalah
untuk membuat website sekumpulan konten online termasuk dokumen dan aplikasi yang
berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar,
suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.
Elemen-elemen seperti teks, forms, images (GIFs, JPEGs, Portable Network Graphics)
dan video dapat diletakkan di dalam halaman menggunakan tag-tag
HTML/XHTML/XML. Browser terkadang juga memerlukan Plug-ins seperti Adobe
Flash, QuickTime, Java, dan sebagainya untuk menampilkan beberapa media yang
diletakkan di dalam halaman web menggunakan tag-tag HTML/XHTML.
Halaman web dan situs web dapat berupa halaman statis, atau dapat diprogram secara
dinamis sehingga menghasilkan halaman web dengan konten atau tampilan visual yang
diinginkan, tergantung pada berbagai faktor, seperti masukan dari pengguna akhir,
masukan dari Webmaster, atau perubahan dalam lingkungan komputasi (seperti situs
yang terkait dengan database yang telah diubah).

Bahasa Markup (seperti HTML, XHTML dan XML)

Gaya lembar bahasa (seperti CSS dan XSL)
Client-side scripting (seperti JavaScript dan VBScript)
Server-side scripting (seperti PHP dan ASP)
Teknologi database (seperti MySQL dan PostgreSQL)
Teknologi multimedia (seperti Flash dan Silverlight)

Perancang web atau desainer web (web designer) adalah orang yang memiliki keahlian
menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke
pengguna-akhir melalui World Wide Web, menggunakan Web browser atau perangkat
lunak Web-enabled lain seperti televisi internet, Microblogging, RSS, dan sebagainya.
Dengan berkembangnya spesialisasi dalam desain komunikasi dan bidang teknologi
informasi, ada kecenderungan kuat untuk menarik garis yang jelas antara web design
khusus untuk halaman web dan pengembangan web secara keseluruhan dari semua
layanan berbasis web. Adobe Dreamweaver merupakan program penyunting halaman
web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver
keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fiturfiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia
Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi
terakhir Dreamweaver keluaran Adobe Systems adalah versi 10 yang ada dalam Adobe
Creative Suite 4 (sering disingkat Adobe CS4).

PEMBAHASAN

BAB I
Latar Belakang
latar belakang pembuatan website yang menyajikan tentang software ialah agar orang
lebih mudah mencari software software yang bagus baik itu beli maupun trial.dimana
kalau anda ingin membeli software ini harap mengisi ketentuan yang berlaku,dan kalau
pilih download trial anda hanya dikasih kesempatan untuk mencoba software yang anda
download untuk mencobanya dalam 1 minggu.

Tujuan
Tujuan kami ialah agar orang lebih mudah mencari software yang diinginkan.

BAB II
Mengenal HTML5
HTML5 adalah versi kelima dari HTML standar yang pertama kali diciptakan pada tahun
1990. HTML5 hingga bulan September 2011 ini masih dalam tahap pengembangan.
HTML5 ini diharapkan dapat memperbaiki teknologi HTML sehingga mendukung
teknologi multimedia terbaru serta lebih mudah dimengerti oleh manusia maupun mesin.
Meski masih dalam tahap pengembangan, perlu kiranya kita mengenal HTML5 ini.
Berikut muchad sajikan coding-coding menarik di HTML5.
1
2
3
4
5
6

<html><body>Ini contoh Video<br />

<video width="320" height="240" controls="controls">
<source src="http://img.muchad.com/film.mp4" type="video/mp4" />
<source src="http://img.muchad.com/film.ogg" type="video/ogg" />
<source src="http://img.muchad.com/film.webm" type="video/webm" />
Browser Anda tidak mendukung Video Tag.

</video>

8
9
10
11
12
13

<br /><br />

Ini contoh Audio<br />
<audio controls="controls">
<source src="http://img.muchad.com/song.ogg" type="audio/ogg" />
<source src="http://img.muchad.com/song.mp3" type="audio/mpeg" />

14
15

Browser Anda tidak mendukung Elemen Audio.

</audio>

16

<br /><br />

17

Contoh Input<br />

18

<form action="" method="get">

19

Homepage: <input type="url" name="user_url" /><br /><br />

20

<input type="submit" />

21
22
23

</form>
<br /><br />
<form action="" method="get">
E-mail: <input type="email" name="user_email" /><br /><br />

24
25
26
27
28
29

<input type="submit" />

</form>
</body>
</html>

Tampilan dari coding di atas adalah sebagai berikut:

Ini contoh Video
Browser Anda tidak mendukung Video Tag.
Ini contoh Audio
Browser Anda tidak mendukung Elemen Audio.
Contoh Input
Top of Form
Homepage:
Bottom of Form
Top of Form
E-mail:
Bottom of Form
Mudah kan
Ya berkat HTML5 kita lebih mudah memasukkan video maupun lagu layaknya coding
memasukkan gambar. Selamat mencoba.
Contoh file video dan suara muchad peroleh dari Wikipedia.
INGAT! Untuk video dan suara tidak semua browser mendukung berikut listnya:
Format Video
Ogg
MPEG 4
WebM

IE
No
9.0+
No

Firefox
3.5+
No
4.0+

Opera
10.5+
No
10.6+

Chrome
5.0+
5.0+
6.0+

Safari
No
3.0+
No

Format Audio
Ogg Vorbis
MP3
Wav

IE 9
No
Yes
No

Firefox 3.5
Yes
No
Yes

Opera 10.5
Yes
No
Yes

Chrome 3.0
Yes
Yes
Yes

Safari 3.0
No
Yes
Yes

HTML 5 Canvas Element Template [Basic]

Elemen atau Unsur Canvas merupakan Tag HTML yang hampir sama dengan tag
<table>, <div>, atau <a> dengan pengecualian yang isinya diberikan dengan
Menggunakan Javascript. Dengan kata lain, untuk memanfaatkan Canvas HTML 5 anda
harus menempatkan Canvas di suatu tempat di dalam tag HTML, membuat sebuah
penginisialisasi fungsi Javascript yang nantinya kita gunakan untuk mengakses tag
canvas setelah Page Load (setelah Loading), dan kemudian memanfaatkan HTML5
Canvas API untuk menggambarkan visualisasinya.
elemen utama yang kita gunakan disini adalah :
<canvas id=myCanvas></canvas>

Karena disini saya menggunakan Blogspot, jadi untuk anda yang juga menggunakan
Blogspot silahkan buat sebuah Blog testing terlebih dahulu untuk menguji postingan ini.
Setelah blog percobaan tersedia, silahkan menuju Rancangan > Edit HTML Kemudian
Centang Expand Template Widget. Setelah itu hapus seluruh Script Template anda. Jika
Sudah silahkan tunggu dulu karena saya akan terlebih dahulu memberikan Script untuk
pengguna Platform lain, Jadi untuk anda yang juga mengikuti panduan ini namun tidak
menggunakan Blogspot, silahkan gunakan Script Template dibawah ini:
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
var canvas=document.getElementById(myCanvas);
var c=canvas.getContext(2d);
// do stuff here
}
</script>
</head>
<body onload=init()>
<canvas id=myCanvas width=576 height=300></canvas>
</body>
</html>
Dan Untuk anda yang menggunakan Blogspot, Sebenarnya Script diatas pun dapat
langsung anda gunakan, namun saya pastikan anda akan dihadapkan pada peringatan
dibawah ini :
Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.

Seharunya ada satu dan hanya satu skin pada template, dan kami menemukan: 0
Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut
Script untuk anda yang menggunakan Blogspot :
<?xml version=1.0 encoding=UTF-8 ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[]]></b:skin>
<script>
function init() {
var canvas=document.getElementById(myCanvas);
var c=canvas.getContext(2d);
// do stuff here
}
</script>
</head>
<body onload=init()>
<canvas id=myCanvas width=576 height=300></canvas>
</body>
</html>
Lalu silahkan Save Template anda, dan Lihat hasilnya.
Apa yang akan didapat? jika yang didapati hanyalah page Kosong artinya sudah
mengikuti panduan ini dengan benar, karena disini kita memang belum membuat satupun
Variabel untuk Canvas, karena kelanjutannya akan diposting di postingan kemudian.

Pengenalan Struktur HTML 5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar
selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih
baik atau kita kenal dengan nama HTML 5.
HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih
menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti
Kontrol bentuk, API, multimedia, struktur, dan semantik.
HTMl 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan
WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan
Google kabarnya ikut mengembangkan HTML 5.
Struktur Dasar HTML dapat di lihat dibawah ini:

BAB III
Home
Kami menampilkan gambar dan software seperti jet audio , photoshop , dan office di
website kami.apabila gambar itu diklik gambar akan berubah

Profil
Kami menampilkan profil pembuat dan latar belakang membuat website ini dengan judul
soft ku (software ku)

PENUTUP
KESIMPULAN

Harapan kami dengan membuat web Soft ku adalah wadah dan pusat informasi tentang
perkembangan Software, dan dengan web ini kami mengharapkan agar semua orang bias
mengetahui software terbaru dan bisa mencobanya dengan membeli atau mencoba
trialnya