Uts - PemWeb - Abdul Aziz - 191011400176 - 05tple005

Mata Kuliah : Pemrograman Web 1 Hari/Tgl :
Fak/Jurusan : Teknik Informatika Waktu :

Semester : Kelas :
Dosen : Ari Syaripudin, S.Kom., M.Kom. Shift : Reg CK/CS
Sifat : Jml Mhs :
1. Jelaskan secara singkat perkembangan HTML! (skor 10)

2. Sebutkan dan berikan contoh bebrapa teknik pewarnaan pada HTML!
(skor 20)
3. Jelaskan Perbedan CSS Inline, Internal dan Eksternal! (skor 20)
4. Carilah sebuah situs web yang memiliki tampilan menarik dan terdapat menu
registrasi/sign up, Kemudian buat tampilan halaman utama dan form
registrasi menggunkan html dan css eksternal mirip dengan situs tersebut.
(skor 50)
Pada saat Ujian Wajib Menggunkan Almamater Universitas Pamulang.
Selamat Mengerjakan
Nama : Abdul Aziz
Kelas : 05TPLE005
NIM : 191011400176
Jawaban:
1. HTML atau dapat di jabarkan (Hypertext Markup Language) adalah bahasa yang digunakan untuk
menulis halaman web.HTML merupakan pengembangan dari standar pemformatan dokumen teks
yaitu Standard Generalized Markup Language (SGML).
HTML diciptakan oleh Tim Berners-Lee ketika bekerja untuk CERN dan dipopulerkan pertama kali
oleh browser Mosaic.
HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML
sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada
suatu sistem operasi tertentu
2. Valid Color Name
Cara yang pertama ini merupakan cara yang paling mudah yang mana pemberian value
dilakukan dengan memberikan nama warna dalam Bahasa Inggris. Contohnya red untuk
warna merah, yellow untuk kuning dan lain sebagainya. Agar lebih jelas, yuk perhatikan
baris kode berikut.
Perhatikan pada pemberian style pada baris kode ke-6. Terdapat property background yang
diberikan value red. Nah pewarnaan seperti inilah yang disebut dengan cara pewarnaan
dengan menggunakan Valid Color Name.
Hasil yang tampak pada Browser :
3. Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian
atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman
website dan tidak digunakan pada halaman website yang lain.
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di
sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian
<head> pada halaman.
Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML
memiliki atribut style, di situ lah inline CSS ditulis.
4.
HTML :
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#signup">daftar</a></li>
<li class="tab"><a href="#login">masuk</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>mendaftar secara gratis</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
Nama depan<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<label>
belakang<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<label>
Alamat email<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<label>
kata sandi<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>mulai</button>

</form>
</div>
<div id="login">
<h1>selamat datang</h1>
<form action="/" method="post">
<label>
alamat email<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<label>
kata sandi<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot"><a href="#">Lupa password</a></p>
<button class="button button-block"/>Masuk</button>
</form>
</div>
</div>
</div> 
CSS :
@import "compass/css3";
$body-bg: #7FFFD4;
$form-bg: #13232f;
$white: #ffffff;
$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);
$gray-light: #a0b3b0;
$gray: #ddd;
$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;
*, *:before, *:after {
box-sizing: border-box;
html {
overflow-y: scroll;
body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
a{
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
.active a {
background:$main;
color:$white;
.tab-content > div:last-child {
display:none;
}
h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
label.highlight {
color:$white;
input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
textarea {
border:2px solid $gray-light;
resize: vertical;
}
.field-wrap {
position:relative;
margin-bottom:40px;
.top-row {
&:after {
content: "";
display: table;
clear: both;
> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
.button-block {
display:block;
width:100%;
.forgot {
margin-top:-20px;
text-align:right;

Uts - PemWeb - Abdul Aziz - 191011400176 - 05tple005

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Uts - PemWeb - Abdul Aziz - 191011400176 - 05tple005

Diunggah oleh

Hak Cipta:

Format Tersedia

Mata Kuliah : Pemrograman Web 1 Hari/Tgl :

Fak/Jurusan : Teknik Informatika Waktu :

1. Jelaskan secara singkat perkembangan HTML! (skor 10)

Pada saat Ujian Wajib Menggunkan Almamater Universitas Pamulang.

2. Valid Color Name

Hasil yang tampak pada Browser :

<li class="tab active"><a href="#signup">daftar</a></li>

<li class="tab"><a href="#login">masuk</a></li>

<h1>mendaftar secara gratis</h1>

<form action="/" method="post">

Nama depan<span class="req">*</span>

<input type="text" required autocomplete="off" />

<input type="text"required autocomplete="off"/>

Alamat email<span class="req">*</span>

<input type="email"required autocomplete="off"/>

kata sandi<span class="req">*</span>

<input type="password"required autocomplete="off"/>

<button type="submit" class="button button-block"/>mulai</button>

<form action="/" method="post">

alamat email<span class="req">*</span>

<input type="email"required autocomplete="off"/>

kata sandi<span class="req">*</span>

<input type="password"required autocomplete="off"/>

<p class="forgot"><a href="#">Lupa password</a></p>

<button class="button button-block"/>Masuk</button>

</div>

</div>

font-family: 'Titillium Web', sans-serif;

box-shadow:0 4px 10px 4px rgba($form-bg,.3);

.tab-content > div:last-child {

transition:all 0.25s ease;

border:1px solid $gray-light;

transition:border-color .25s ease, box-shadow .25s ease;

border:2px solid $gray-light;

Anda mungkin juga menyukai