Pemrograman Web - Pengenalan HTML & CSS

LAPORAN AKHIR
Mata Praktikum : Pemrograman Web

Kelas : 4IA08
Praktikum Ke - : 1 (Satu)
Tanggal : 04 November 2017
Materi : Pengenalan HTML dan CSS
NPM : 57414194
Nama : Muhammad Fahreza
Ketua Asisten : Albertus Vrima Setiawan
Nama Asisten :
Paraf Asisten :
Jumlah Lembar : 19 (Sembilan Belas Lembar)
LABORATORIUM TEKNIK INFORMATIKA

UNIVERSITAS GUNADARMA
2017
Pertemuan pertama ini, praktikan mempelajari apa itu HTML dan CSS.
HTML adalah format standar yang digunakan pada website sebagai wadah
atau tempat penulisan informasi. Sedangkan CSS adalah bahasa yang dapat
dikombinasikan dengan HTML yang digunakan untuk mempercantik halaman
web. Penulisan CSS ini dapat melalui 3 cara, yaitu inline(diletakkan pada tag
html), internal(diletakkan di dalam tag head) dan eksternal(diluar dokumen
html). Untuk lebih memahami HTML dan CSS tersebut, praktikan mencoba
membuat sebuah tabel(tabel jadwal perkuliahan) beserta pemberian css pada
tabel tersebut.
Oleh karena itu, untuk mengingat kembali apa yang telah dipelajari di
lab, laporan akhir pertama ini praktikan diminta untuk memberi materi
tambahan tentang HTML dan CSS kemudian membuat kembali tabel di
HTML ditambah CSS beserta logika dari scriptnya. Berikut laporannya:
1. Output
2. Listing Program
<html>
<head>
<title>LA Pert 1 - Membuat Tabel + CSS</title>
<style type="text/css">
h2 {
text-align:center;
}
#tabel {
font-family:Myriad pro;
align:center;
}
#tabel table {
text-align:center;
}
#tabel table th {
width:100px;
font-size:20;
background-color:#b80924;
color:#fff;
}
#tabel table td {
width:100px;
padding:7px;
#tabel .mk {
width:250px;
}
#tabel .jam {
text-align:center;
font-weight:bold;
font-size:18;
color:#fff;
}
</style>
</head>
<body>
<div id="tabel">
<br>
<h2>Jadwal Perkuliahan Kelas 4IA08<h2>
<br>
<center><table border="1">
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Hari</th>
<th rowspan="2" class="mk">Mata Kuliah</th>
<th colspan="2">Jam</th>
<th rowspan="2">Ruang</th>
</tr>
<tr>
<td class="jam">Masuk</td>
<td class="jam">Keluar</td>
</tr>
<tr>
<td>1</td>
<td>Senin</td>
<td>Bahasa Inggris Bisnis 1</td>
<td>10.30</td>
<td>12.30</td>
<td>D349</td>
</tr>
<tr>
<td style="background-color:#f2f2f2">2</td>
<td style="background-color:#f2f2f2">Senin</td>
<td style="background-color:#f2f2f2">Teknik Kompilasi</td>
<td style="background-color:#f2f2f2">12.30</td>
<td style="background-color:#f2f2f2">D349</td>
</tr>
<tr>
<td>3</td>
<td>Selasa</td>
<td>Pemodelan dan Simulasi</td>
<td>07.30</td>
<td>10.30</td>
<td>G147</td>
</tr>
<tr>
<td style="background-color:#f2f2f2">Rabu</td>
<td style="background-color:#f2f2f2">Rekayasa Perangkat
Lunak</td>
<td style="background-color:#f2f2f2">E212</td>
</tr>
<tr>
<td>5</td>
<td>Rabu</td>
<td>Pengantar Pengolahan Citra</td>
<td>13.30</td>
<td>15.30</td>
<td>E212</td>
</tr>
<tr>
<td style="background-color:#f2f2f2">Rabu</td>
<td style="background-color:#f2f2f2">Pengantar Forensik Teknologi
Inf</td>
</tr>
<tr>
<td>7</td>
<td>Kamis</td>
<td>Pengantar Bisnis Informatika</td>
<td>10.30</td>
<td>12.30</td>
<td>E233</td>
</tr>
<tr>
<td style="background-color:#f2f2f2">Kamis</td>
<td style="background-color:#f2f2f2">Pemrograman Web</td>
</tr>
<tr>
<td>9</td>
<td>Kamis</td>
<td>Jaringan Komputer Lanjut</td>
<td>14.30</td>
<td>16.30</td>
<td>E233</td>
</tr>
</table> </center>
</div>
</body>
</html>
3. Logika
Berdasarkan listing program, menghasilkan output tabel seperti yang ada di

atas. Pembuatan tabel tersebut pertama membuat format HTML standar
terlebih dahulu seperti berikut :
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Setelah itu, langkah-langkah membuat tabelnya adalah seperti berikut :
1. Berikan tag <div></div> dan ID nya yang berguna untuk membungkus

tabel agar mempermudah dalam pemberian style nanti.
2. Tuliskan tag <table></table> . Agar garis pada tabel terlihat, berikan

border, sehingga tag menjadi <table border=”1”></table>. Sehingga
listing menjadi seperti berikut :
<div id="tabel">
<table border="1">
</table>
</div>
3. Selanjutnya memberikan judul tiap tabel menggunakan tag

<tr><th></th></tr>. Letakkan di antara tag <table></table>. Tag <tr>
ini sebagai table row untuk memberikan baris. Sedangkan <th>
adalah table header sebagai judul kolomnya, seperti No, Hari, Mata
Kuliah dan seterusnya.
4. Sehingga listing untuk membuat tabel menjadi seperti berikut :
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Hari</th>
<th rowspan="2" class="mk">Mata Kuliah</th>
<th colspan="2">Jam</th>
<th rowspan="2">Ruang</th>
</tr>
<tr>
<td class="jam">Masuk</td>
<td class="jam">Keluar</td>
</tr>
Terlihat terdapat atribut rowspan dan colspan. Colspan dan rowspan
adalah html attribute yang digunakan untuk memperlebar atau
menggabungkan beberapa kolom atau row menjadi satu, sehingga satu
unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan
dari “column span” yang bisa mengartikan sebagai “berapa kotak ke
samping” sedangkan rowspan mengartikan “berapa kotak kebawah”. Di
listing tersebut colspan dan rowspan diberikan nilainya = 2, berarti 2
kotak ke samping dan 2 kotak ke bawah.
5. Selanjutnya masukkan data tabelnya menggunakan listing berikut :
<tr>
<td>1</td>
<td>Senin</td>
<td>Bahasa Inggris Bisnis 1</td>
<td>10.30</td>
<td>12.30</td>
<td>D349</td>
</tr>
Dapat dilihat urutan datanya disesuaikan berdasarkan judul kolomnya.
Tag <tr> untuk memberikan baris dan tag <td> untuk memberikan
kolom. Karena ada 7 judul kolom, berarti ada <td> sebanyak 7.
6. Salin listing untuk memasukkan data di atas untuk data berikutnya,

kemudian ganti isinya sesuai jadwal praktikan.
7. Jika sudah selesai, selanjutnya memberikan style atau CSS-nya.

Langkah pertama ketikkan sintaks seperti berikut di dalam tag
<head></head> :
<style type="text/css">
</style>
8. Untuk memanggil tag pada tabel yang akan diberi CSS, caranya
ketikkan nama tagnya kemudian beri tanda { dan diakhiri tanda }.
Misalnya seperti berikut :
#tabel table th {
width:100px;
font-size:20;
color:#fff;
}
Logikanya berarti berikan style pada atribut <th> yang ada pada tabel
di dalam div tabel. Stylenya berupa width / lebar sebesar 100 pixel,
ukuran font 20 pt , dan seterusnya. Lakukan untuk atribut yang lain.
4. Teori
Kumpulan Tag HTML
Memberi komentar atau keterangan. Kalimat yang terletak pada


tag kontiner ini tidak akan terlihat pada browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman
tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada
halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text,

warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan

nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk

<font>
teks
<form> Mendefinisikan input form

<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ...
Ukuran font
<h6>
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Bararti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan
dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah

Kumpulan Tag CSS
a. Text
Property Deskripsi Values
color Mengeset warna teks color
direction Mengeset arah teks ltr
rtl
line-height Mengeset jarak antar garis normal
number
length
%
letter-spacing Menambah atau mengurangi normal
jarak antar karakter length
text-align Mengatur teks agar rata left
kanan, kiri, tengah, atau right
kanan-kiri pada elemen center
justify
text-decoration Menambah dekorasi pada none
teks underline
overline
line-through
blink
text-indent Mengindentasikan baris length
pertama teks pada elemen %
text-shadow none
color
length
text-transform Mengontrol huruf pada none
elemen capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Mengeset bagaimana ruang normal
putih di dalam elemen pre
ditangani nowrap
word-spacing Menambah atau mengurangi normal
jarak antar kata length
b. Pseudo-elements
Pseudo-element Kegunaan
:first-letter Menambahkan style spesial pada huruf pertama
sebuah teks
:first-line Menambah spesial style pada baris pertama sebuah
teks
:before Menyisipkan suatu konten sebelum elemen
:after Menyisipkan suatu konten setelah elemen
c. Font
font Mengeset semua properti font-style
untuk font(huruf) dalam satu font-variant
deklarasi font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Prioritas list untuk font family family-name
dan/atau generic pada suatu generic-family
elemen
font-size Mengset ukuran dari font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Menspesifikasi aspek nilai none
untuk sebuah elemen yang number
akan mempertahankan tinggi-x
dari font pilihan pertama
font-stretch Memadatakan atau normal
melonggarkan font-family yang wider
digunakan narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Mengeset style dari font normal
italic
oblique
font-variant Menampilkan teks dalam normal
small-caps font atau normal small-caps
font
font-weight Mengeset ketebalan huruf normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
d. Background
background Mengeset semua properti background-color
background dalam satu background-image
deklarasi background-repeat
background-attachment
background-position
background-attachment Mengeset kondisi posisi scroll
background; antara dapat fixed
discroll atau tidak dapat
digerakkan dalam halaman
background-color Mengeset warna latar color-rgb
background suatu elemen color-hex
color-name
transparent
background-image Mengeset sebuah gambar url(URL)
menjadi sebuah background none
background-position Mengeset posisi background top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Mengeset apakah/bagaimana repeat
background akan diulang repeat-x
repeat-y
no-repeat
e. Table
border-collapse Mengeset apakah border collapse
tabel collapse pada satu separate
border atau terpisah sesuai
standar HTML
border-spacing Mengeset jarak yang length length
memisahkan border sel
(khusus untuk model
separate-border)
caption-side Mengeset posisi dari judul top
tabel bottom
left
right
empty-cells Megeset apakah sel kosong show
ditampilkan pada tabel atau hide
tidak (khusus untuk model
separate-border)
table-layout Mengeset algoritma yang auto
digunakan untuk fixed
menampilkan sel tabel,
baris, dan kolom
f. Padding
padding Mengeset semua properti padding-top
untuk padding (bloknot) padding-right
dalam satu deklarasi padding-bottom
padding-left
padding-bottom Mengeset pad bagian length
bawah dari elemen %
padding-left Mengeset pad bagian kiri length
dari elemen %
padding-right Mengeset pad bagian kanan length
dari elemen %
padding-top Mengeset pad bagian atas length
dari elemen %
g. List & Marker

list-style Mengeset semua properti list-style-type
untuk sebuah list dalam satu list-style-position
deklarasi list-style-image
list-style-image Mengeset gambar sebagai none
list-item marker url
list-style-position Mengeset dimana list-item inside
marker ditempatkan pada outside
list
list-style-type Mengeset tipe dari list-item none
marker disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto
length
h. Border
border Mengeset semua properti border-width
untuk 4-border (yang border-style
tertutup) dalam satu border-color
deklarasi
border-bottom Mengeset semua properti border-bottom-width
untuk bottom-border (yang border-style
bawah aja) dalam satu border-color
deklarasi
border-bottom-color Mengeset warna dari border-color
bottom-border
border-bottom-style Mengeset style dari bottom border-style
border
border-bottom-width Mengeset ketebalan dari thin
garis bottom-border medium
thick
length
border-color Mengeset warna dari Color
keseluruhan border
border-left Mengeset semua properti border-left-width
untuk left-border (yang kiri border-style
aja) dalam satu deklarasi border-color
border-left-color Mengeset warna dari left- border-color
border
border-left-style Mengeset style dari left- border-style
border
border-left-width Mengeset ketebalan dari thin
garis left-border medium
thick
length
border-right Mengeset semua properti border-right-width
untuk right-border (yang border-style
kanan aja) dalam satu border-color
deklarasi
border-right-color Mengeset warna dari right- border-color
border
border-right-style Mengeset style dari right- border-style
border
border-right-width Mengeset ketebalan dari thin
garis right-border medium
thick
length
border-style Mengeset style dari none
keseluruhan border hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Mengeset semua properti border-top-width
untuk top-border (yang atas border-style
aja) dalam satu deklarasi border-color
border-top-color Mengeset warna dari top- border-color
border
border-top-style Mengeset style dari top- border-style
border
border-top-width Mengeset ketebalan dari thin
garis top-border medium
thick
length
border-width Mengeset ketebalan dari thin
keseluruhan border; terdapat medium
empat jenis ketebalan thick
length
i. Positioning
Bottom mengeset sejauh mana auto
pojok bawah elemen di atas %
atau di bawah dari pojok length
bawah parent element
clip Mengeset bentuk dari shape
elemen. Elemen diclip auto
menjadi bentuk ini, dan
ditampilkan
left Mengeset sejauh mana auto
pojok kiri dari elemen di %
kiri/kanan tepi kiri parent length
element
overflow Mengeset apa yang terjadi visible
jika konten dari elemen hidden
melebihi area elemen scroll
auto
position Menempatkan elemen static
dengan posisi static, relative, relative
absolute, atau fixed absolute
fixed
right Mengeset sejauh mana auto
pojok kanan dari elemen di %
kiri/kanan dari pojok kanan length
parent element
top Sets how far the top edge of auto
an element is above/below %
the top edge of the parent length
element
vertical-align Sets the vertical alignment of baseline
an element sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an auto
element number
j. Classification
clear Mengeset sisi dari sebuah left
elemen dimana elemen right
ngambang lainnya tidak both
diperbolehkan none
cursor Menspesifikasi kursor yang url
ditampilkan auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Mengeset none
apakah/bagaimana suatu inline
elemen ditampilkan block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float Mengeset dimana sebuah left
gambar atau teks right
dimunculkan pada elemen none
lain
position Mengeset penempatan static
elemen sebagai posisi yang relative
static, relative, absolute atau absolute
fixed fixed
visibility Mengeset apakah suatu visible
elemen ditampilkan atau hidden
tidak collapse
k. Pseudo-classes
Pseudo-class Kegunaan
:active Menambahkan spesial style kepada elemen yang aktif
:focus Menambahkan spesial style kepada elemen selama
elemen sedang focus
:hover Menambahkan spesial style kepada elemen saat
cursor berada di atas elemen tersebut
:link Menambahkan spesial elemen kepada link yang
belum kena hit
:visited Menambahkan spesial style kepada link yang telah
dihit
:first-child Menambah spesial style pada elemen yang
merupakan child pertama dari gabungan beberapa
elemen lainnya
:lang Membolehkan pemilik(author) untuk menentukan
bahasa yang digunakan pada elemen tertentu
l. Dimension
height Mengeset tinggi dari sebuah auto
elemen length
%
line-height Mengeset jarak antar garis normal

pada elemen number
length
%
max-height Mengeset tinggi maksimal dari none

elemen length
%
max-width Mengeset lebar maksimal dari none

elemen length
%
min-height Mengeset tinggi minimal dari length

elemen %
min-width Mengeset lebar minimal dari length

elemen %
width Mengeset lebar dari suatu auto

elemen %
length
M. Generated Content
content Membuat konten dalam string
dokumen. Digunakan url
bersama pseudo-element counter(name)
:before dan :after counter(name, list-style-
type)
counters(name, string)
counters(name, string,
list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment Mengeset berapa banyak none

suatu counter identifier number
menambahkan pada tiap
aksi pada selektor
counter-reset Mengeset nilai yang counter none
set pada tiap aksi pada identifier number
selektor
quotes Mengeset tipe dari quote none
string string
n. Outlines
outline Mengeset semua properti outline-color
untuk outline dalam satu outline-style
deklarasi outline-width
outline-color Mengeset warna dari outlinecolor
elemen invert
outline-style Mengeset style outline darinone
elemen dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width Mengeset ketebalan outline thin
dari elemen medium
thick
length

Pemrograman Web - Pengenalan HTML &amp; CSS

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

Pemrograman Web - Pengenalan HTML &amp; CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN AKHIR

Mata Praktikum : Pemrograman Web

LABORATORIUM TEKNIK INFORMATIKA

Berdasarkan listing program, menghasilkan output tabel seperti yang ada di

1. Berikan tag <div></div> dan ID nya yang berguna untuk membungkus

2. Tuliskan tag <table></table> . Agar garis pada tabel terlihat, berikan

3. Selanjutnya memberikan judul tiap tabel menggunakan tag

4. Sehingga listing untuk membuat tabel menjadi seperti berikut :

5. Selanjutnya masukkan data tabelnya menggunakan listing berikut :

6. Salin listing untuk memasukkan data di atas untuk data berikutnya,

7. Jika sudah selesai, selanjutnya memberikan style atau CSS-nya.

Kumpulan Tag HTML

Memberi komentar atau keterangan. Kalimat yang terletak pada

<applet> Sebagai awal dari Java applets

<b> Membuat teks tebal

<bgsound> Memberi (suara latar) background sound pada halaman web

<big> Memperbesar ukuran teks sebesar satu point dari defaultnya

<blink> Membuat teks berkedip

<body> Tag awal untuk melakukan berbagai pengaturan terhadap text,

<br> Pindah baris

<caption> Membuat caption pada tabel

<center> Untuk perataan tengah terhadap teks atau gambar

<comment> Meletakkan komentar pada halaman web tidak tidak akan

<dd> Indents teks

<div> Represents different sections of text.

<embed> Menambahkan sound or file avi ke halaman web

<fn> Seperti tag <a name>

Mengganti jenis, ukuran, warna huruf yang akan digunakan utk

<form> Mendefinisikan input form

<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame

<head> Mendefinisikan head document.

<hr> Membuat garis horizontal

<html> Bararti dokumen html

<i> Membuat teks miring

<img> Image, imagemap atau an animation

<input> Mendefinisikan input field pada form

<map> Mendefinisikan client-side map

<marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE

<nobr> Mencegah ganti baris pada teks atau images

<noframes> Jika browser user tidak mendukung frame

<ol> Mendefinisikan awal dan akhir list

<p> Ganti paragraf

<pre> Membuat teks dengan ukuran huruf yg sama

<script> Mendefinisikan awal script

<table> Membuat tabel

<td> Kolom pada tabel

<title> Mendefinisikan title

<tr> Baris pada tabel

<u> Membuat teks bergaris bawah

g. List & Marker

line-height Mengeset jarak antar garis normal

max-height Mengeset tinggi maksimal dari none

max-width Mengeset lebar maksimal dari none

min-height Mengeset tinggi minimal dari length

min-width Mengeset lebar minimal dari length

width Mengeset lebar dari suatu auto

counter-increment Mengeset berapa banyak none

Anda mungkin juga menyukai

Pemrograman Web - Pengenalan HTML & CSS

Pemrograman Web - Pengenalan HTML & CSS