IS556

WEB DESIGN & DEVELOPMENT

Tatap Muka 04
TM04
Analisis, Perancangan dan
Pengembangan Web Sisi Klien

• Capaian Pembelajaran Lulusan (CPL) yang

Dibebankan pada Mata Kuliah
• Level KKNI: 6
•  CPK-11 Mampu membuat dan mengevaluasi
sistem aplikasi dalam membantu dalam penyelesaian
masalah dan pengambilan keputusan berbasis
project.
TM04
Analisis, Perancangan dan Pengembangan Web Sisi Klien

• CPMK03-1 : Mahasiswa mampu mengalisis, merancang dan

mengembangkan aplikasi pada sisi klien (C5)
• Pokok Bahasan:
– Analisis, Perancangan dan Pengembangan Web Sisi Klien
• Sub-Pokok Bahasan:
– layout halaman web,
– animasi
– halaman web dengan CSS
Topik
• Layout halaman web
• Halaman Web dengan CSS
• Animasi dengan CSS
Layout Halaman Web
• Adding Links
• Adding Images
• Adding Tables
• Forms
• Layout dengan CSS
Adding Links
Adding Links
Two ways to specify the URL
• Absolute URLs
• Relative URLs
Absolute URLs
Relative URLs
Linking to Pages on the Web
Targeting a New Browser Window
Targeting a New Browser Window
Mail & Telephone Links
a few best practices for using telephone links
• It is recommended that you include the full international dialing
number, including the country code, for the tel: value because there
is no way of knowing where the user will be accessing your site.
• Also include the telephone number in the content of the link so that
if the link doesn’t work, the telephone number is still available.
• Android and iPhone have a feature that detects phone numbers and
automatically turns them into links. Unfortunately, some 10-digit
numbers that are not telephone numbers might get turned into
links, too. If your document has strings of numbers that might get
confused as phone numbers, you can turn auto-detection off by
including the following meta element in the head of your
document.
Adding Images
Adding Images
Adding Images
Adding Images
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Table
Forms
• There are two parts to a working form. The
first part is the form that you see on the page
itself that is created using HTML markup.
• Forms are made up of buttons, input fields,
and drop-down menus (collectively known as
form controls) used to collect information
from the user.
• Forms may also contain text and other
elements.
Floating and Positioning
• Both are CSS methods for breaking out of the
normal flow and arranging elements on the
page
• Floating an element moves it to the left or
right, and allows the following text to wrap
around it.
• Positioning is a way to specify the location of
an element anywhere on the page with pixel
precision
Normal Flow
• In the CSS layout model, text elements are laid out
from top to bottom in the order in which they appear
in the source, and from left to right (in left-to-right
reading languages*).
• Block elements stack up on top of one another and fill
the available width of the browser window or other
containing element.
• Inline elements and text characters line up next to one
another to fill the block elements.
Normal Flow
Floating
• the float property moves an element as
far as possible to the left or right, allowing
the following content to wrap around it.
• Floats are one of the primary tools of
modern CSSbased
• web design, used to create multicolumn
layouts, navigation toolbars from lists, and
table-like alignment without tables.
Floating
Floating
Floating
Floating inline and block elements
Floating block elements
Floating multiple elements
• When you float multiple elements,
there is a complex system of behind-
thescenes rendering rules that ensures
floated elements do not overlap.
Floating multiple elements
Floating multiple elements
Page Layout With CSS
• Fixed layouts stay put at a specific pixel width
regardless of the size of the browser window or
text size.
• Fluid (or liquid) layouts resize proportionally
when the browser window resizes.
• Elastic layouts resize proportionally based on
the size of the text.
• Hybrid layouts combine fixed and scalable areas
Fixed Layout
Fluid Layout
Fluid Layout
Fluid Layout
Elastic Layout
Elastic Layout
Hybrid Layout
Future CSS Layout
Animasi dengan CSS
• The CSS Animations module allows authors to create real,
honest-to goodness keyframe animation.
• Unlike transitions that go from one state to another, keyframe
animation allows you to explicitly specify other states at points
along the way, allowing for more granular control of the action.
• Those “points along the way” are established by keyframes that
define the beginning or end of a segment of animation.
• CSS transitions are animations with two keyframes: a start state
and an end state.
• More complex animations require many keyframes to control
property changes in the sequence.
Animasi dengan CSS
• Keyframe animation is known as
explicit animation because you
program its behavior.
• By contrast, transitions are an
example of implicit animation
because they are triggered only
when a property changes.
Animasi dengan CSS
• The animation process has two
parts:
• first, establish the keyframes with a
@keyframes rule, and then
• Second, add animation properties
to the elements that will be
animated.
Animasi dengan CSS
• The animation process has two
parts:
• first, establish the keyframes with a
@keyframes rule, and then
• Second, add animation properties
to the elements that will be
animated.
@keyframes rule
Add animation properties
• Which animation to use (animation-name)
• How long it should take (animation-duration)
• The manner in which it should accelerate (animation-timing-function)
• Whether to pause before it starts (animation-delay)
• How many times it should repeat (animation-iteration-count).
• Whether it plays forward, in reverse, or alternates back and forth
(animation-direction )
• Whether it should be running or paused. The play-state can be toggled
on and off with JavaScript or on hover (animation-play-state).
• Whether to override defaults that prevent properties from applying
outside runtime ( animation-fill-mode)
Animasi dengan CSS
Terima kasih
Atas Perhatian Anda