-
Notifications
You must be signed in to change notification settings - Fork 0
/
pmhmn.html
223 lines (212 loc) · 11.4 KB
/
pmhmn.html
1
2
3
4
5
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>Pemahaman Mahasiswa</title>
<link rel="icon" type="image/png" href="other/gbr/ico.png">
<!-- Summoner -->
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/all.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/fa-custom.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet">
<script src="./other/jq/jquery.min.js"></script>
<script src="./other/jq/popper.min.js"></script>
<script src="./other/bootstrap/js/bootstrap.min.js"></script>
<!-- Customizer -->
<style>
body {
background-image: url("images/pmhmn.png");
background-color: #cc99ff;
}
body .container {
width: 1440px !important;
background-color: #f2e6ff;
}
.tab=pane{
background-color:white;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm" data-toggle="sticky-onscroll" style=" background-color: #311e54;">
<div class="container" style=" background-color: #311e54;">
<div class="col-md-6 ml-auto">
<a href=index.html><img src="images/logo-footer-univ.png"></a> </div>
<div class="col-md-6 mr-auto">
<h4 style="color: orange;"><i>"TIM PENYUSUN <b>FINALE PROJECT</b>" </i></h4>
</div>
</div>
</nav>
<nav class="container navbar-light">
<!--Tab Menu-->
<ul class="nav nav-tabs font-weight-bold">
<li class="nav-item">
<p class="navbar-text">Anggota Kelompok : </p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#Novian">Novian</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#Choo">Choirul</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#Reza">Reza</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#Rezzha">Rezzha</a>
</li>
</ul>
</nav>
<div class="container">
<div class="tab-content container-fluid">
<div class="tab-pane active" style="background-color:white;" id="Novian">
<center>
<table>
<tr><td rowspan="3"><img src="images/n.jpg" width="150px" height="190px"></td><td>Nama : NOVIAN ANDIKA</td></tr>
<tr><td>NIM : 18.01.4133</td></tr>
<tr><td>Kelas : D3 TI-01</td></tr>
</table>
</center>
<h3>Pemahaman Setelah mengikut mata kuliah Perancangan Web Semester 2</h3><br>
<ol>
<li>Mampu membuat website statis dengan bantuan HTML, CSS, dan Javascript</li>
<ol type="a">
<li>HTML sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.<br>(Saya menjadi tahu urutan kerangka simpel kerangka html mulai dari <!DOC HTML>, sampai <FOOTER></li>
<li>CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya website<br>(Disini saya belajar bagaimana caranya mesetting padding dan margin pada suatu item di html agar placementnya sesuai dengan keinginan)</li>
<li>Javascript Menyempurnakan tampilan dan sistem halaman web</li>
</ol>
<li>Bisa menjalankan berbagai framework seperti Boostrap, dan Jquery, FontAwesome</li>
<ol type="a">
<li>Disini saya jadi tahu caranya memakai Boostrap, caranya ternyata simple tinggal di link cssnya di head kemudian dipanggil kelas yang diinginkan</li>
<li>Untuk membuat berbagai icon di website kami seperti link social media dll kami tidak menggunakan cara manual, kami menggunakan Framework Ico <br>Fontawesome, FontAwesome bekerja sama seperti Boostrap link file css nya di head kemudian dipanggil lah kelasnya untuk list iconnya kami melihat di website fontaweome ( <a href="https://fontawesome.com/icons?d=gallery">https://fontawesome.com/icons?d=gallery</a> )</li>
</ol>
<li>Dapat membuat repository di github untuk kolaborasi online antar member kelompok</li>
<ol type="a">
<li>Demi memudahkan kolaborasi antar member kami berinisiatif menggunakan Github sebagai sarana untuk setor dan pengeditan coding kami awalnya saya binggung menggunakan untuk pertama kali lalu saya belajar bagaimana car git yg benar melalui internet, dengan Github workflow team kami menjadi lebih cepat dan efisien</li>
</ol>
<li>Mengerti caranya membeli domain dan mengaturnya agar meredirect ke website</li>
<ol type="a">
<li>Dengan domain yang didapatkan gratis dari Github Students Pack kami mencoba menggunakannya untuk tujuan akademis </li>
</ol>
</ol>
</div>
<div class="tab-pane " style="background-color:white;" id="Choo">
<center>
<table>
<tr><td rowspan="3"><img src="images/c.jpg" width="150px" height="190px"></td><td>Nama : CHOIRUL ROHMAT HIDAYAT</td></tr>
<tr><td>NIM : 18.01.4136</td></tr>
<tr><td>Kelas : D3 TI-01</td></tr>
</table>
</center>
<h3>Pemahaman tentang Web yang saya peroleh setelah mengikuti perkuliahan <b>PERANCANGAN</b> WEB, diantaranya:</h3>
<ol>
<li>Sedikit paham tentang struktur kode dalam html<br>
<ol type="a">
<li>< !DOCTYPE html> : menunjukkan bahwa file tersebut adalah html5.</li>
<li><head></head> : berada dibawah tag <html>,berisi: judul halaman tsb, link untuk menghubungkan dengan file css,js yg dibutuhkan, serta css/script js. isinya tidak tampil dihalaman yg dibuat.</li>
<li><body></body> : berisi tentang segala sesuatu yg akan ditampilkan dalam halaman yg dibuat. Biasa dibagi menjadi 3, yaitu: header, content, footer</li>
</ol>
</li>
<li>Sedikit paham tentang tag-tag dasar dalam html dan css</li>
<li>Prioritas Komputer dalam menjalankan program css
<ol type="a">
<li>Inline : berada satu baris dengan tag yg ingin dimodif<br><xmp> <p style= 'color:blue;'></xmp></li>
<li>Embed : berada didalam tag <head>
<xmp>
<style type=”css/text”>
p{ color:blue; }
.klas1{background-color:navy;}
#kotak{ width:100px; height:100px;}
</style>
</xmp></li>
<li>Link/ terlampir : pengaturan css berada didalam file berbeda dengan file html kita, dan untuk memanggil pengaturan tersebut kita gunakan selector tag, class, maupun id
<xmp> <link rel="stylesheet" href="./css/all.css"> </xmp>
</li>
</ol>
</li>
<li>Memahami cara penggunaan bootstrap dan mengenal sebagian kecil dari tag yg ada didalamnya
<ol type="a">
<li>Bootstrap merupakan sebuah file css maupun js, dimanan didalamnya sudah tersedia pengaturan-pengaturan yang biasa digunakan oleh para web programmer sehingga memudahkan kita dalam membuat suatu web.</li>
<li>Cara kerja bootstrap mirip dengan css/js biasa yaitu dengan melampirkan file bootstrap kedalam file html kita, ketika ingin menggunakan pengaturan tertentu kita bisa memanggilnya dengan selektor tag, class, maupun id</li>
</ol>
</li>
<li>Memahami tentang cara kerja dari sebuah web responsive
<ol type="a">
<li>Web Responsive merupakan desain web yang dapat menyesuaikan dirinya terhadap perangkat tempat ia dipanggil, sehingga membuat user merasa nyaman ketika membukanya baik melalui smartphone maupun desktop komputer</li>
<li>Pengaturan web responsive berada didalam sebuat css baik embed maupun linked
<xmp>
@media screen and (max-width:768px){
#carouselExampleIndicators{ display:none; }
#filters{ display:none; }
#sosmed{ margin-left: 10px; margin-top: -30px; }
}
</xmp>
</li>
</ol>
</li>
</div>
<div class="tab-pane " style="background-color:white;" id="Reza">
<center>
<table>
<tr><td rowspan="3"><img src="images/r.jpg" width="150px" height="190px"></td><td>Nama : MUHAMMAD REZA SAHID</td></tr>
<tr><td>NIM : 18.01.4124</td></tr>
<tr><td>Kelas : D3 TI-01</td></tr>
</table>
</center>
<h3> Setelah mengikuti perkuliahan perancangan web, saya sadar bahwa hal tersebut bukan passion saya, karena tidak banyak yang saya pahami tentang perancangan web, namun saya juga berusaha untuk memahami walaupun tidak seberapa.
<br> Berikut beberapa hal yang dapat saya pahami: </h3>
<ol>
<li>HTML<br>
<p>Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML</p>
</li>
<li><DOCTYPE><br>
<p>Tag yang digunakan untuk menentukan tipe dokumen</p>
</li>
<li><HTML><br>
<p>Tag untuk membuat sebuah dokumen HTML</p>
</li>
<li><title><br>
<p>Tag yang digunakan untuk membuat title dari sebuah halaman</p>
</li>
<li><body><br>
<p>Tag untuk membuat tubuh dari sebuah halaman</p>
</li>
<li><h1> - <h6><br>
<p>Tag untuk membuat heading</p>
</li>
<li>Dan tag dasar lainnya</li>
<li>Membuat link ke page lain</li>
<li>Sedikit paham tentang CSS dasar</li>
</ol>
</ol>
</div>
<div class="tab-pane " style="background-color:white;" id="Rezzha">
<center>
<table>
<tr><td rowspan="3"><img src="images/re.jpg" width="150px" height="190px"></td><td>Nama : MUHAMMAD REZZHA RIAMRIZAL ARSYA</td></tr>
<tr><td>NIM : 18.01.4105</td></tr>
<tr><td>Kelas : D3 TI-01</td></tr>
</table>
</center>
<h3>Pemahaman saya mengerjakan final project perancangan web ini saya mengetahui bahwa pemahaman saya tentang perancangan web masih kurang dan hanya sedikit yang saya ketahui banyak yang harus saya pelajari lagi, beberapa hal yang saya pelajari dari final project ini adalah:</h3>
<ol>
<li>HTML menggambarkan struktur halaman Web menggunakan markup</li>
<li>Elemen HTML adalah blok bangunan halaman HTML</li>
<li>Elemen HTML diwakili oleh tag buka dan tutup kurung <></li>
<li>Tag HTML memberi label potongan konten seperti “heading”, “paragraf”, “table”, dan sebagainya</li>
<li>Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk merender konten halaman</li>
<li>Tag <HTML></HTML> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.</li>
<li>Tag <HEAD></HEAD> menyimpan informasi meta, seperti judul dan charset halaman.</li>
<li>Tag <BODY></BODY> melampirkan semua konten yang muncul pada suatu halaman.</li>
<li>tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong>akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic.</li>
<li>Memahami sedikit tentang pengunaan css</li>
<li>Saya kurang memahami tentang penggunaan responsive</li>
</ol>
<p>Setelah mengerjakan final projek ini saya sadar bahwa banyak yang harus saya pelajari tentang perancangan web jika saya mau masuk konsentrasi di bidang ini.</p>
</div>
</div>
</div>
</body>
<html>