Muhammad Fikri Mustopo 150535604974 Praktikum4

MODUL IV
HTML (Hypertext Markup Language)

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB
Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web

yang Dibimbing oleh Bapak Didik Dwi Prasetya S.T., M.T.
Oleh:
Muhammad Fikri Mustopo
TI 2015 Offering B
UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
OKTOBER 2016
HTML (Hypertext Markup Language)
A. KOMPETENSI DASAR
1. Memahami struktur dasar dokumen HTML dan HTML5,
2. Mampu membuat dokumen HTML yang baik dan benar,
3. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
B. DASAR TEORI
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi
CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan
dokumen HTML.
Penggunaan CSS dalam pembahasan ini juga menyinggung CSS3 yang
merupakan aturan terbaru. Dengan demikian, hal ini diharapkan dapat memberikan
referensi yang terkini. Selain itu, bagian ini juga menekankan pada pembuatan desain
dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman
web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah
dengan memanfaatkan division.
C. TUGAS PRAKTIKUM
Syntaks Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="studikasuspraktikum4.css"
media="screen" title="no title">
<title>Document</title>
</head>
<body>
<div class="bagian1">
Yang ini border lingkaran Pendekatan yang digunakan
sama hanya menambahkan pengaturan tinggi dan posisi text
</div>
Yang ini border dengan 2 sisi yang lancip dan 2 sisi lain tumpul
pendekatan yang digunakan sama hanya mengatur border radius
</div>
Yang ini border dengan bayangan , Dan menggunakan peraturan
bayangan
pada box
</div>
</body>
</html>
Output:
Penjelasan:
Dalam Penjelasan Kali ini Membuat Sebuah Header dari Website dengan
menggunakan CSS untuk memperindah sekaligus menata tata letak gambar,Navbar maupun
inputan denga CSS Internal sebagai Pondasi Style. Dalam website di atas menggunakan
section dan div untuk mengelompokan suatu tag html yang akan di hubungkan pada CSS.
<!DOCTYPE html> dasar tag html 5 serta lang=en adalah bahasa standart untuk
menuliskan content website dalam halaman ini menggunakan value en yang artinya
berbahasa inggris.
<meta name="viewport" content="width=device-width, initialscale=1.0">
Dasar isi dari Tag head dimana berfungsi sebagai configurasi pada browser. Di dalam
tag head dapat di selipkan tag dari css yang bersifat Internal css, untuk memanggil CSS di
butuhkan tag style agar bisa terdeklarasikan dalam halaman ini bahwa tag tersebut merupakan
element dari CSS.
#header adalah pendeklarasian id untuk di hubungkan pada element css, header
terletak pada sisi teratas website yang biasanya di isi dengan gambar banner, Logo serta
Navbar agar mudah di lihat oleh user.Header memiliki properti dan value antaralain :
background-color:grey; adalah mengatur Sisi belakang dari id header dan bervalue
grey dimana sisi belakang akan berubah menjadi warna Abu-Abu
width: 90%; berfungsi sebagai pengatur Lebar pada id header dengan lebat 90% dari
layar yang akan di tampilkan pada user, meskipun berbasis mobile maka akan tetap
menyesuaikan ukuran dari layar tersebut.
height: 10em; dengan tinggi 10em dimana satuan em adalah 1em = besar font yang
terletak pada halaman website
margin-left: 5%; membuat batasan Luar sisi kiri sebanyak 5%
margin-right: 5%; membuat batasan Luar sisi kanan sebanyak 5%
Selector img berguna untuk mengatur pendelarasian gambar pada css Properti dan value yang
digunakan adalah:
margin-left:2em;membuat batasan Luar sisi kiri sebanyak 2em
margin-top:2em;membuat batasan Luar sisi atas sebanyak 2em
width: 7em; sebagai pengatur lebar selector yang akan di tampilkan pada website
dengan value 7em
height: 7em; sebagai pengatur tinggi selector yang akan di tampilkan pada website
dengan value 7em
float: left; berfungsi untuk membuat gambar terletak pada sisi kiri.
Selector div.desc untuk mengatur tulisan Judul pada Header :
font-size: 30px; berfungsi mengatur besar kecil nya font dan ber value 30px
float:left; berfungsi untuk membuat gambar terletak pada sisi kiri.
margin: 10px; Mengatur jarak luar sebesar 10px;
margin-left: 3em; Mengatur jarak luar kiri sebesar 3em;
margin-top: 1em; Mengatur jarak luar atas sebesar 1em;
color: white; memberikan warna pada font dengan warna putih
Selector Ul & li & li a :
list-style-type: none; menghilangkan tanda li pada tampilan website
margin: 1px; mengatur jarak luar sebanyak 1px
padding: 10px; mengatur jarak dalam sebanyak 10px
text-decoration: none; menghilangakan decorasi pada a href dan menjadikan tulisan
menjadi normal namun masih memiliki fungsi link
color: white; membuat warna font dengan warna putih
Id footer :
background-color: black;
width:90%;
height: 2em;
margin-left: 5%;
margin-right:5%;
Selector input berfungsi untuk mengatur style dari type inputan serta tataletak nya.
position: absolute; membuat posisi dari selector inputan menjadi mudah di atur serta
di letak kan dengan bebas tanpa terhalang oleh div lain yang posisi nya masih
default.
margin-top: 10em; mengatur jarak luar atas sebanyak 10em
margin-left: 35em; mengatur jarak luar kiricsebanyak 35em
border-radius: 2px; membuat garis sis pucuki menjadi efek lengkung dengan radius
2 px.
Tag title berguna untuk menuliskan judul pada website.

Tag body adalah isi dari badan halaman yang akan di tampilkan pada webbrowser.
Memiliki 2 selection :
Selection Header :
<img src="img.jpg" width="2em"> untuk memanggil gambar yang akan di
tampilkan oleh browser
Class desc berguna untuk menghubungkannya pada Css
H1 berfungsi untuk Penulisan huruf dengan ukuran Terbesar dalam font html.
Class nav berguna untuk memuat menu dalam halaman di atas dimana membuat menu
memerlukan tag ul dan tak il untuk membuat sebuah bullet. Dan a href untuk
menghubungkan link antara link satu dengan link yang lain.
Tag input berguna untuk membuat tempat pengimputan data, type text berguna
untuk inputan berupa text yang bersifat string, placeholder berguna untuk membuat
tulisan sementara yang terletak di dalam tex box inputan.
Selection Footer :
Berfungsi untuk Mengatur footer yang akan di hubungkan dengan css. Di mana footer
ini biasanya digunakan untuk informasi yang bersifat pribadi dari pemilik website.
D. STUDI KASUS
Syntaks studikasuspraktikum4.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="studikasuspraktikum4.css"
media="screen" title="no title">
<title>Document</title>
</head>
<body>
Yang ini border lingkaran Pendekatan yang digunakan
sama hanya menambahkan pengaturan tinggi dan posisi text
</div>
Yang ini border dengan 2 sisi yang lancip dan 2 sisi lain tumpul
pendekatan yang digunakan sama hanya mengatur border radius
</div>
Yang ini border dengan bayangan , Dan menggunakan peraturan
bayangan
pada box
</div>
</body>
</html>
Syntaks studikasuspraktikum4.css:
.bagian1{
padding: 10px;
height: 10em;
width: 10em;
text-align: center;
background-color: #76FF03;
border-radius: 20px;
margin: 3em;
border-color: #03A9F4;
border-style: solid;
}
.bagian2{
background-color: #FFFF00;
text-align: center;
height: 3em;
width: 30em;
padding: 10px;
margin: 3em;
border-bottom-left-radius:30px;
border-bottom-right-radius: 30px;
border-color: #EF6C00;
border-style: solid;
}
.bagian3{
background-color: #69F0AE;
text-align: center;
height: 3em;
width: 30em;
padding: 10px;
margin: 3em;
box-shadow: 5px 5px #BDBDBD;
}
Output:
Penjelasan:
Studi kasus kali membuat sebuah bangun datar dimana bangun datar tersebut
memiliki efek yang di buat oleh CSS itu sendiri dengan menggunakan border-radius
maupun bayangan pada border, serta tata letak maupun tinggi dan lebarnya. Body
pada halaman ini terdiri dari 3 class bagian yang berbeda, serta menggunakan metode
external css.
<!DOCTYPE html> dasar tag html 5 serta lang=en adalah
bahasa
standart untuk menuliskan content website dalam halaman ini menggunakan value en yang
artinya berbahasa inggris.
Dasar isi dari Tag head dimana berfungsi sebagai configurasi pada browser.
<link
rel="stylesheet"
href="studikasuspraktikum4.css"
media="screen"
title="no title"> untuk memamnggil file css yang ada pada satu folder dari file .html
di atas, di dalam tag body memiliki 3 class dimana setiap kelas mewakili 1 bidang
datar yang berbeda antara lain :
Class bagian 1 : Membuat bidang datar dengan penerapan border-radius.
CSS :
padding: 10px; berfungsi untuk membuat batas sisi dalam secara keseluruhan
selectornya.
height: 10em; mengatur ketinggan selector dengan value 10 em
width: 10em; mengatur Lebarselector dengan value 10 em
text-align: center; membuat tulisan mejadi rata tengah
background-color: #76FF03; membuat sisi belakang menjadi berwarna.
border-radius: 20px; berguna untuk membuat sisi pojok menjadi lengkung dengan
value 20px,
margin: 3em; membuat batas luar dengan value 3em;
border-color: #03A9F4; mengatur warna dari border
border-style: solid; mengatur border type style border

Class bagian 2 : Membuat bidang datar dengan sisi atas lancip dan sisi bawah
tumpul
CSS :
background-color: #FFFF00; mengatur warna belakang
text-align: center; membuat tulisan rata tengah
height: 3em; mengatur ketinggian selector dengan value 3em
width: 30em; mengatur lebar selector dengan value 30em
padding: 10px; mengatur jarak dalam dari selector
margin: 3em; mengatur jarak luar dari selector

border-bottom-left-radius:30px; membuat sudut kiri bawah menjadi melengkung
dengan value 30px

border-bottom-right-radius: 30px;membuat sudut kanan bawah menjadi
melengkung dengan value 30px
border-color: #EF6C00; mengatur warna dari border
border-style: solid; solid; mengatur border type style border

Class bagian 3 : membuat efek bayangan pada bidang datar
CSS :
background-color: #69F0AE; mengatur warna belakang
text-align: center;membuat tulisan rata tengah
height: 3em; mengatur ketinggian selector dengan value 3em
width: 30em;mengatur lebar selector dengan value 30em
padding: 10px; mengatur jarak dalam dari selector
margin: 3em;mengatur jarak luar dari selector
box-shadow: 5px 5px #BDBDBD; membuat efek bayangan dari bangun datar di
selector, dan value sisi kanan 5px serta sisi bawah 5px di tambah dengan warna ke
abu - abuan
E. KESIMPULAN
Dalam penerapan CSS terbagi menjadi 3 metode :
Inline dengan menyisipkan style pada pertag tag dari html
Internal : biasanya Css internal akan di sisipkan kedalam Tag Head
External : untuk metode ini adalah metode yang paling baik dalam menuliskan
CSS pada HTML
Dalam css memiliki element selector sebagai penghubung dan pendeklarasian
variable dari html ke css. Selector terdiri dari 3 jenis :
1.Tag html itu sendir
2.Id : hanya dapat di pakai cuma satu kali saja tidak bisa lebih
3.Class : bisa di fungsikan dengan bebas dan tanpa batas selagi selector class cocok
dengan pendeklarasian
Css memiliki decklarasi yaitu properti sebagai alat dan fungsi css sedang kan
value adalah isi dari properti itu sendiri. Dalam css box yang terpenting adalah
margin, pading, border.
Untuk menempatkan posisi element digunakan float sebagai properti css dan
untuk Positioning menggunakan properti position yang terdiri dari 3 value :
1.Absolute
2.Fixed
3.Relatif
F. DAFTAR PUSTAKA
Asisten Praktikum Pemrograman Berbasis Web. 2015. Modul 4 HTML. Malang:
Universitas Negeri Malang.
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/css_float.asp
http://www.nyekrip.com/cara-membuat-website-sederhana-dengan-html-5/
http://www.duniailkom.com/tutorial-belajar-css-dan-index-artikel-css/
https://www.codepolitan.com/
https://www.dicoding.com/

Muhammad Fikri Mustopo 150535604974 Praktikum4

Diunggah oleh

Informasi Dokumen

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

Muhammad Fikri Mustopo 150535604974 Praktikum4

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL IV

HTML (Hypertext Markup Language)

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web

UNIVERSITAS NEGERI MALANG

HTML (Hypertext Markup Language)

margin-top: 10em; mengatur jarak luar atas sebanyak 10em

margin-left: 35em; mengatur jarak luar kiricsebanyak 35em

Tag title berguna untuk menuliskan judul pada website.

height: 10em; mengatur ketinggan selector dengan value 10 em

width: 10em; mengatur Lebarselector dengan value 10 em

text-align: center; membuat tulisan mejadi rata tengah

background-color: #76FF03; membuat sisi belakang menjadi berwarna.

margin: 3em; membuat batas luar dengan value 3em;

border-color: #03A9F4; mengatur warna dari border

border-style: solid; mengatur border type style border

text-align: center; membuat tulisan rata tengah

height: 3em; mengatur ketinggian selector dengan value 3em

width: 30em; mengatur lebar selector dengan value 30em

padding: 10px; mengatur jarak dalam dari selector

margin: 3em; mengatur jarak luar dari selector

dengan value 30px

melengkung dengan value 30px

border-color: #EF6C00; mengatur warna dari border

border-style: solid; solid; mengatur border type style border

background-color: #69F0AE; mengatur warna belakang

text-align: center;membuat tulisan rata tengah

height: 3em; mengatur ketinggian selector dengan value 3em

width: 30em;mengatur lebar selector dengan value 30em

padding: 10px; mengatur jarak dalam dari selector

margin: 3em;mengatur jarak luar dari selector

Anda mungkin juga menyukai