Aktifitas Pembelajaran 1. Mendesain Halaman Home, Caruosel dan Menu
122
6 7
8 9
10 11
12 13
14 15
16 17
18 19
20 21
22 23
24 25
26 27
28 29
30 31
32 33
34 35
35 37
38 39
40 41
42 43
44 45
46 47
48 49
50 51
52 53
55 56
57 58
59 60
61 62
63 64
65 66
67 68
69 70
71 72
73 74
meta name
= viewport
content =
width=device-width, initial-scale=1 link
rel =
stylesheet href
= cssbootstrap.min.css
link href
= stylecarousel.css
rel =
stylesheet style
.carousel-inner .item img, .carousel-inner .item a img {
width: 100; margin: auto;
} style
head body
-- CAROUSEL -- div
id =
myCarousel class
= carousel slide
data-ride =
carousel ol
class =
carousel-indicators li
data-target =
myCarousel data-slide-to
= class
= active
li li
data-target =
myCarousel data-slide-to
= 1
li li
data-target =
myCarousel data-slide-to
= 2
li ol
div class
= carousel-inner
role =
listbox div
class =
item active img
src =
imagesgambar1.jpg alt
= Chania
div class
= carousel-caption
h2 Judul Gambar 1
h2 p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
p div
div div
class =
item img
src =
imagesgambar2.jpg alt
= Flower
div class
= carousel-caption
h2 Judul Gambar 2
h2 p
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
p div
div div
class =
item img
src =
imagesgambar3.jpg alt
= Flower
div class
= carousel-caption
h2 Judul Gambar 3
h2 p
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse p
div div
-- Left and right controls -- a
class =
left carousel-control href
= myCarousel
role =
button data-slide
= prev
span class
= glyphicon glyphicon-chevron-left
aria-hidden =
true span
span class
= sr-only
Previous span
a a
class =
right carousel-control href
= myCarousel
role =
button data-slide
= next
span class
= glyphicon glyphicon-chevron-right
aria-hidden =
true span
span class
= sr-only
Next span
a div
-- carousel-inner -- div
-- AKHIR SCRIPT CAROUSEL -- div
class =
container div
br nav
class =
navbar navbar-default div
class =
container-fluid
123
75 76
77 77
78 79
80 81
82 83
84 85
86 87
88 89
90 91
92 93
94 95
96 97
98 99
100 101
102 103
104 105
106 107
108 109
110 111
112 113
114 115
116 117
div class
= navbar-header
button type
= button
class =
navbar-toggle collapsed
data-toggle =
collapse data-
target =
navbar aria-expanded
= false
aria-controls =
navbar span
class =
sr-only Toggle navigation
span span
class =
icon-bar span
span class
= icon-bar
span span
class =
icon-bar span
button a
class =
navbar-brand href
= Nama Proyek
a div
div id
= navbar
class =
navbar-collapse collapse ul
class =
nav navbar-nav li
class =
active a
href =
Home ali
lia href
= Profil
ali lia
href =
Kontak ali
li class
= dropdown
a href
= class
= dropdown-toggle
data-toggle =
dropdown role
= button
aria- haspopup
= true
aria-expanded =
false Menu lain
span class
= caret
spana ul
class =
dropdown-menu lia
href =
Galery ali
lia href
= Video
ali ul
li ul
div --.nav-collapse --
div --.container-fluid --
nav div
div class
= row
div class
= col-sm-8 blog-main
div h2
Blog post h2
p December 23, 2015 by
a href
= Iswanul Umam
ap p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. p
div -- .blog-post --
nav ul
class =
pager lia
href =
Previous ali
lia href
= Next
ali ul
nav div
-- .blog-main -- div
class =
col-sm-3 col-sm-offset-1 blog-sidebar div
class =sidebar-module sidebar-module-inset
h4 About
h4 p
Etiam porta em
sem malesuada magna em
mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
p div
div h4
Archives h4
ol class
= list-unstyled
lia href
= Januari 2015
ali lia
href =
Februari 2015 ali
lia href
= Maret 2015
ali lia
href =
April 2015 ali
lia href
= Mei 2015
ali lia
href =
Juni 2015 ali
lia href
= Juli 2015
ali lia
href =
Augustus 2015 ali
124
lia href
= September 2015
ali lia
href =
Oktober 2015 ali
lia href
= November 2015
ali lia
href =
Desember 2015 ali
ol div
div h4
Elsewhere h4
ol class
= list-unstyled
lia href
= GitHub
ali lia
href =
Twitter ali
lia href
= Facebook
ali ol
div div
-- .blog-sidebar -- div
-- .row -- script
src =
jsjquery.min.js script
script src
= jsbootstrap.min.js
script body
html
Jalankan pada browser dan tampilkan hasilnya.