This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Contoh Format Makalah.docx as PDF for free.
JURUSAN SISTEM INFORMASI FAKULTAS SAINS DAN TEKNOLOGI UIN ALAUDDIN MAKASSAR 2018
[Type the document title]
2
PENGANTAR PENULIS
Alhamdulillah, segala puji dan rasa syukur hanya untuk Allah SWT atas segala rahmat dan hidayah yang telah diberikan sehingga makalah ini dapat diselesaikan dengan baik. Shalawat dan salam senantiasa tercurah kepada junjungan Nabi Muhammad SAW, Nabi akhir zaman sang pembuka pintu kebenaran hakiki. Makalah ini adalah tugas akhir mata kuliah teknologi desain web, sebagai bentuk pertanggung jawaban sekaligus evaluasi dari peroes perkuliahan.Semoga makalah ini dapat memberi manfaat buat kita semua, Aamiin Yaa Robbal’alamin.
Samata , 15 Juli 2018
Penyusun
[Type the document title]
3
DAFTAR ISI KATA PENGANTAR........................................................ii DAFTAR ISI..................................................................iii BAB I CASCADING STYLE SHEETS ORIENTATION PART 2.................................................... 1 A. Cascading .............................................................................. 1 B. Specify .............................................................................. 2 C. Important .............................................................................. 4 D. Inheritance .............................................................................. 5 E. CSS Unit .............................................................................. 5 F. Boxes .............................................................................. 6 G. Padding .............................................................................. 6 H. Borders .............................................................................. 7 I. Margins
[Type the document title]
4
.............................................................................. 7 BAB II JAVASCRIPT......................................................... 8 A. Javascript History .............................................................................. 8 B. Javascript .............................................................................. 8 C. Statement .............................................................................. 9 D. Javascript & Html .............................................................................. 9 E. Variable .............................................................................. 9 F. Operator & Comparator .............................................................................. 10 G. Condisonal .............................................................................. 10 H. Loop .............................................................................. 10 I. Function .............................................................................. 11 J. Array Dan Associative Array .............................................................................. 11 K. Event-Handler .............................................................................. 11
[Type the document title]
5
L. Event-Handler (2) .............................................................................. 12 M. Event-Handler(3) .............................................................................. 12 N. Event-Handler(4) .............................................................................. 13 O. Event-Handler(5) .............................................................................. 13 P. Dom (Document Object Model) .............................................................................. 13 Q. Dom (2) .............................................................................. 14 R. Dom (3) .............................................................................. 14 S. Dynamic Script .............................................................................. 14 T. Sampel .............................................................................. 15 BAB III ADDONS MEDIA................................................. 16 A. Method .............................................................................. 17 B. Graphics File Formats .............................................................................. 18 C. Digital Image File Size
[Type the document title]
6
.............................................................................. 20 D. Digital Image File Optimization .............................................................................. 21 BAB IV PENUTUP............................................................ 22 Kesimpulan .............................................................................. 22
BAB I “Cascading Style Sheets Orientation Part 2” A. Cascading -prioritas.css
-Prioritas.html
• Inline style, yakni style yang langsung melekat pada tag. • Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>) • Eksternal style , yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag atau @import
B. Specify • No Specify • Universal, combinator 0,0,0,0 • Element (tag), pseudo element 0,0,0,1 • Class, aPribut, pseudo-class 0,0,1,0 • ID 0,1,0,0 • Inline-style 1,0,0,0
• Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1 • Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2 • Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0 • Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3 • Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2 • Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling 8nggi, yaitu 0,1,0,0 atau 0100
C. Important
D. Inheritance
E. CSS Unit • For many of the remaining CSS values, we will need to be able to specify size measurements – These are used to specify sizes: • em width of the lePer ‘m’ • ex height of the lePer ‘x’ • px pixels (usually 72 per inch, but depends on monitor)
• % percent of inherited size – These are also used to specify sizes, but don’t really make sense unless you know the screen resolu8on: • in inches • cm cen8meters • mm millimeters • pt points (72pt = 1in) • pc picas (1pc = 12pt) • Note: you can use decimal frac8ons, such as 1.5cm F. Boxes The invisible box containing element has three special areas :
a
styled
G. Padding • Padding is the extra space around an element, but inside the border • To set the padding, use any or all of: – padding-top: size – padding-bottom: size – padding-left: size – padding-right: size – padding: size to set all four sides at once
• size is given in the units described earlier • Example: sidebar {padding: 1em; padding-bottom: 5mm} H. Borders • You can set border aPributes with any or all of: border-top:, border-bottom:, borderleft:, border-right:, and border: (all at once) • The aPributes are: – The thickness of the border: thin, medium (default), thick, or a specific size (like 3px) – The style of the border: none, dotted, dashed, solid, double, groove, ridge, inset, or outset – The color of the border: one of the 16 predefined color names, or a hex value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%) • Example: section {border-top: thin solid blue;} • Note: the special styles (such as groove) are not as cool as they sound I. Margins • Margins are the extra space outside the border • Se^ng margins is analogous to se^ng padding • To set the margins, use any or all of: – margin-top: size – margin-bottom: size
– margin-left: size – margin-right: size – margin: size to set all four sides at once
BAB II “JAVASCRIPT” A. Javascript History • • • • • • •
B. Javascript • Client-side • ScripSng language • Object based – Document – Window – Navigator – History
C. Statement document.write(“Hello World"); • Case sensiSve • Semicolon (opSonal) D. Javascript & Html • • • •
Elemen <script> head & body External <noscript> Comment
E. Variable • Weak type – Number – String – Boolean – Null – Undefined • Diawali oleh huruf, $, atau _ var test=20; test="apa";
F. Operator & comparator • Aritmethic Assignment ComparaSon Logical
G. CondiSonal • if (condi&on) { } else if(condiSon) { } • a =“satu” switch(a) { case “satu”: break; case 2: break; default: } H. Loop • for (i=0;i<=5;i++) { } • while (i<=5) { i++; }
• break; • conSnue; I. Function • funcSon func&onname(var1,var2,...,varX) { } • return J. ARRAY dan AssociaSve array var a = new Array(); a[0]=1; a[1]=2; a[2]=“Sga”; var b = ["A",10,"c"] var c = {satu: ‘angka 1',dua:‘angka dua'}; • length • concat() • push() • pop() • indexOf()
K. Event-Handler
L. Event-Handler (2) • onblur – Terjadi jika elemen kehilangan focus – Berlaku pada elemen : • , , , ,