modul web UMM

8/18/2019 modul web UMM

1/20

Dokumen Laboratorium Teknik Informatika UMM @ 2016 – Laporan Modul Praktikum Pemrograman

WEB Created By. Mohammad Agung Alifferiza Maulana

Pratikum Pemrograman

WEB

MODUL 2

CSS

Dosen Pengampu :

Maskur S.Kom, M.Kom

Mohammad Agung Alifferiza Maulana

201410370311170

LABORATORIUM PEMROGRAMAN

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

2015/2016


2/20


3/20


4/20



#menu:after {

clear: both;

}

#menu {

zoom:1;

}

#menu li {

float: left;

border-right: 1px solid #222;

box-shadow: 1px 0 0 #444;

position: relative;

}

#menu a {

float: left;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a {

color: #fafafa;

}

*html #menu li a:hover {

color: #fafafa;

}

#menu ul {


5/20



margin: 20px 0 0 0;

_margin: 0;

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 1;

background: #444;

background: linear-gradient(#444, #111);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

border-radius: 3px;

transition: all .2s ease-in-out;

}

#menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

_margin: 0;

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;


6/20



}

#menu ul li:last-child {

box-shadow: none;

}

#menu ul a {

padding: 10px;

width: 130px;

_height: 10px;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#menu ul a:hover {

background-color: #0186ba;

background-image: linear-gradient(#04acec,

#0186ba);

}

#menu ul li:first-child > a {

border-radius: 3px 3px 0 0;

}

#menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}


7/20



#menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#menu ul li:last-child > a {

border-radius: 0 0 3px 3px;

}

#badan{

width:960px;

height:470px;

background:red;

background-image: url("kayu.jpg");

float:left;

}

#sidebar{

width:200px;

height:450px;

background:grey;


8/20




float:left;

}

#kaki{

width:960px;

height:100px;

background:black;

float:left;

}

#kanan{

width:200px;

height:450px;


float:right;}

body {

background-image: url("hitam1.jpg");

font-family: Helvetica, sans-serif; font-size:

18px; line-height: 24px;

}

-->

Beranda


9/20



Kategori

data diri

nilai

keterangan

Layanan

Tentang

Pendaftaran

Saiful Jamil

"200010370311140"

..

Komentar:

berikan

komentar


10/20



Papan Iklan

lulus 10 tahun lagi

HTML

UNTUK TABEL

Form


11/20



» Form

Registrasi «

» Tanggal

Lahir «

Tanggal

1

2

3

4

5

6

7

8


12/20



9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Bulan

Januari

Februari

Maret

April

Mei


13/20



Juni

Juli

Agustus

September

Oktober

November

Desember

Tahun

2014

2013

2012

2011

20102009

2008

2007

2006


14/20



2005

2004

2003

2002

2001

2000

1999

1998

1997

1996

1995

1994

1993

1992

19911990

1989

1988

1987


15/20



1986

1985

1984

1983

1982

1981

1980

1979

1978

1977

1976

1975

1974

1973

19721971

1970

1969

1968


16/20



1967

1966

1965

1964

1963

1962

1961

1960

1959

1958

1957

1956

1955

1954

19531952

1951

1950

1949


17/20



1948

1947

1946

1945

1944

1943

1942

1941

1940

1939

1938

1937

1936

1935

19341933

1932

1931

1930


18/20



1929

1928

1927

1926

1925

1924

1923

1922

1921

1920

1919

1918

1917

1916

19151914

1913

1912

1911


19/20



1910

1909

1908

1907

1906

1905

» Jenis Kelamin

«

Laki - Laki

Perempuan

» Informasi Akun «


20/20



Penggunaan kelas CSS adalah untuk membuat tampilan CSS membuat

HTML yang letaknya monotone menjadi lebih tertata dan memiliki

header body dll yang terletak di CSS dan tampilan UTAMA

Setelah itu ada menu tambahan juga yang menjadi SUBmenu dalam

tampilan CSS dan HTML saya.

Fungsi Id meliputi Judul, konten, dan footer

Kemudian fungsi class dibagi untuk mengatur ukuran teks, tata letak

teks/gambar, navigasi bar, dan juga isi dari konten.

Documents

modul web UMM