LAPORAN
PRAKTIKUM
PEMROGRAMAN WEB
Oleh:
Kelompok
1
FAJRUL
FALLAH (04/X TKJ)
ITA WIDYA K (07/X
TKJ)
MARIFATUN
NAFILA (11/X TKJ)
NUR QOMARIAH
DRS (16/X TKJ)
TRI
WIDYAYANTO H (22/X TKJ)
SMK
INDUSTRI AL KAAFFAH
KOMPETENSI
KEAHLIAN TEKNIK KOMPUTER DAN JARINGAN
SEPTEMBER
2014
BAB
I
DASAR-DASAR
HTML
A.
TUJUAN
1) Memahami struktur dasar
HTML dan HTML5.
2) Mampu membuat dokumen
HTML yang baik dan benar.
3) Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
B.
DASAR
TEORI
1. PersiapanKebutuhan
Pada praktikum awal ini,
meskipun dokumen HTML bisa ditampilkan tanpa menggunakan web server, namun di sini diwajibkan tetap menggunakan.Selain itu,
praktikum ini juga menuntut pembuatan kode-kode yang baik, benar, dan valid.
Berikut ini adalah kebutuhan-kebutuhan
yang minimal diperlukan:
a.
Local
Web Server
Sebuah perangkat lunak server yang dipasang (instal) pada computer Berfungsi menerima permintaan HTTP atau HTTPS dari web
browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.
Rekomendasi: WampServer. Merupakan paket web server lokal yang berisiApache,
Php, Php My admin, MySQL, dan SQL Buddy.Alasan pemilihan paket bundle seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.
b.
Web
browser
Merupakan perangkat lunak yang menyediakan fasilitas untuk membaca halaman web
di suatu komputer.
Rekomendasi: Mozilla Firefox minimal versi 31.0.
Adapun untuk pembanding, sebaiknya juga memanfaatkan
browser lain.
c.
Text
editor
Editor teks untuk menuliskan kode-kode
HTML pembentuk halaman aplikasi web (tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
Rekomendasi: Notepad atau Notepad++
d.
HTML
validator
Untuk menghasilkan dokumen HTML yang valid, sangat disarankan memasang validator.
Rekomendasi: Add
on pada browser Firefox.
C.
HTML
dan XHTML
HTML (HyperText Markup
Language) merupakan sebuah bahasa markup, bukan Bahasa pemrograman.Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000, konsorsium W3C (World Wide Web
Consortium) membuat perubahan besar melalui
XHTML (eXtensible Hypertext Markup Language).
Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas
XML (eXtensible Markup Language) ke HTML.Perkembangan
HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun 2009.HTML5 dibangun oleh konsorsium
W3C untuk dimasukkan sebagai perubahan besar berikutnya pada standar
HTML.Atas dasar ini, maka penting sekali untuk mengenal dan memahami HTML5 dengan baik.
D.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML harus diawali dengan elemen <html> dan diakhiri dengan komplemennya, yakni elemen</html>. Dokumen HTML juga menyertakan tiga pasang elemen.
a.
Elemen <head> dan </head> : digunakan untuk menyatakan informasi mengenai dokumen
HTML.
b.
Elemen <title> dan </title> : digunakan untuk menambahkan
title di title bar browser.
c.
Elemen <body> dan </body> : digunakanuntukmelingkupisemuateks yang
terdapat di halamanHTML.
Bentuk struktur dokumen HTML yang standar sebelum versi
HTML5 diperlihatkan sebagai berikut:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,digunakan untuk melakukan spesifikasi Bahasa dan versi apa yang digunakan oleh dokumen.
Hal ini disebut juga dengan
DTD (Data Type Declaration).<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">, merupakan deklarasi dari XML.
Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai berikut:
DTD pada HTML5 dipersingkatmenjadi: <!DOCTYPE HTML>. Perludiingatbahwapenulisan
DTD bersifat case sensitive.Sedangkandeklarasi XML dipersingkatmenjadi:
<html lang="en">.
Hasildaristrukturkodediatas:
Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML.Salah satu elemen yang perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan
tag <!—dan diakhiri dengan tag -->.
Ada beberapa penambahan elemen baru pada HTML5,
antara lain: <article>, <aside>, <audio>, <canvas>,
<command>, <datalist>, <details>, <embed>, <figcaption>,
<figure>, <footer>, <header>, <hgroup>, <keygen>,
<mark>, <meter>, <nav>, <output>, <progress,
<rp>, <rt>, <ruby, <section, <source>, <summary>,
<time>, <video>.
Dan perlu diketahui bahwa dalam HTML5 ada beberapa elemen pada HTML versi sebelumnya lama yang dihilangkan karena dinilai tidak efisien (karena bias digantikan fungsinya dengan CSS (Cascading Style Sheet). CSS akan dibahas lebih lanjut
di Bab III). Berikut elemen-elemen yang
dihapus dari HTML5:
<acronym>, <applet>, <basefont>, <big>, <center>,
<dir>, <font>, <frame>, <frameset>, <isindex>,
<noframes>, <s>, <strike>, <tt>, <u>.
E.Format Teks
A.Heading:Keterangan: Menggunakan
font Courier Newukuran 10
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--Inibariskomentar,
tidakdiproses -->
<title>Heading</title>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>
</body>
</html>
Hasil:
B.Heading
align
script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- ini baris komentar, tidak diproses -->
<title>align</title>
</head>
<body>
<h1 align"left">ini heading 1 rata
kiri</h1>
<h2 align"center">ini heading 2 rata
tengah</h2>
<h3 align"right">ini heading 3 rata
kanan</h3>
</body>
</html>
Hasil:
C.paragraf
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Ini baris komentar, tidak diproses -->
<title>Paragraf</title>
</head>
<body>
<p>
Ini paragraf pertama
</p>
<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.
</p>
<p>
Ini paragraf ketiga
</p>
</body>
</html>
Hasil:
D.Pararaf Align
Script
:
<!DOCTYPE
HTML>
<HTML
LANG="EN">
<HAED>
<!--
INI BARIS KOMENTAR, TIDAK DIPROSES -->
<TITLE>PARAGRAF
ALIGN</TITLE>
</HEAD>
<BODY>
<P
ALIGN="LEFT">
INI
PARAGRAF PERTAMA
</P>
<P
ALIGN="CENTER">
LOREM
IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT,
SED DO
EIUSMOR TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA
ALIQUA.
UT ENIM AD MININ VENIAM, QUIS NOSTRUD EXERCITATION
ULLAMCO
LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT.
</P>
<P
ALIGN="RIGHT">
INI
PARAGRAF KETIGA
</P>
</BODY>
</HTML>
Hasilnya
:
E.Paragraf Line Break
Script
:
<!doctype
html>
<html
lang="en">
<head>
<title>Line
Break</title>
</head>
<body>
kalimat
1.<br/>
Kalimat
2. <br/>
kalimat
3. <br/>
<!-Line
Break dalam Paragraf-->
<p>
Lorem
ipsum dolor sit amet.<br/>
Quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.<br/>
Adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
Hasilnya:
F.Fontase
Script
:
<!doctype
html>
<html
lang="en">
<head>
<title>Line
Break</title>
</head>
<body>
<b>Menggunakan
tag <b>...</b></b> <br />
<strong>Menggunakan
tag
<strong>...</strong&t;</strong>
<br />
<i>mengunakan
tag <i>...</i></i> <br />
<em>menggunakan
tag <em>...</em></em> <br />
<u>Menggunakan
tag <u>...</u></u> <br />
<strike>menggunakan
tag
<strike>...</strike></strike>
<br />
</body>
</html>
Hasilnya
:
G.Karakter khusus
Script:
<!DOCTYPE HTML>
<html lang="en">
<title>Karakter Khusus</title>
</head>
<body>
£ Pound <br />
€ Euro <br />
© copyright <br />
® registered <br />
™ Trademark <br />
</body>
</html>
Hasil :
F. Preformatted text
Script:
<!doctype
html>
<html
lang="en">
<head>
<title>line
break</title>
</head>
<body>
<pre>
----------------------------------------------------
no | nama | alamat
----------------------------------------------------
1 | pt.
bintang | jl . terusan surabaya
2 | pt.
sinar jaya | jl . tidar
----------------------------------------------------
</pre>
</body>
</html>
Hasil:
G. Garis horizontal
Script:
<!DOCTYPE
HTML>
<html
lang="en">
<head>
<title>Horizontal</title>
</head>
<body>
Membuat
garis horizontal <hr />
<p>
Lorem
ipsum dolor sit amet, consctetur adipisicing eli.
<br
/>
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
<br
/>
Ut enim
ad minim Veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<hr
/>
</body>
</html>
Hasil:
H. Menggunakan list
Script:
<!DOCTYPE
HTML>
<html
lang="en">
<head>
<title>List</title>
</head.
<body>
Ordered
List
<ol>
<li>Hardware</li>
<li>Software</li>
</ol>
<hr
/>
Unordered
List
<ul>
<li>Hardware</li>
<li>Software</li>
</ul>
<hr
/>
Definition
List
<dl>
<!-Data List -->
<dt>Hardware</dt>
<!-Data Term -->
<dd>Perangkat
Keras Komputer</dd> <!-Data Description -->
<dt>Software</dt>
<dd>Perangkat
Lunak Komputer</dd>
</dl>
</body>
</html>
Hasil:
I.
Pewarnaan
Script:
<!doctype html>
<html lang="en">
<head>
<title>pewarnaan</title>
</head>
<body bgcolor="aqua">
<h3 align="center">Heading
3</h3>
<font color="red">font berwarna
merah</font> <br />
<font color=#FF0000">
Font berwarna merah (menggunakan nilai
heksa)</font>
</body>
</html>
Hasil:
J.
Bekerja dengan gambar
Script:
<!DOCTYPE
HTML>
<html
lang="en">
<head>
<title>List</title>
</head>
<body>
<p>
<!-- menggunakan
relative path -->
<img
src="Kucing.jpg" alt="Kucing lucu"/>
Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
<hr
/>
<p>
<!--menggunakan
absolute path -->
<img
src="http://localhost/Web01/01/Kucing.jpg"
align="right"
alt="Kucing lucu"/>
Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</body>
</html>
Hasil:
K.
Paragraf
Script:
(Keterangan: Menggunakan font
Courier Newukuran 10)
<!DOCTYPE HTML>
<html
lang="en">
<head>
<!--Inibariskomentar,
tidakdiproses -->
<title>Heading</title>
</head>
<body>
<h1>Ini heading
1</h1>
<h2>Ini heading
2</h2>
<h3>Ini heading
3</h3>
<h4>Ini heading
4</h4>
<h5>Ini heading
5</h5>
<h6>Ini heading
6</h6>
</body>
</html>
Hasil:
Script:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--Inibariskomentar, tidakdiproses -->
<title>Align</title>
</head>
<body>
<h1 align=”left”>Ini heading 1 rata
kiri</h1>
<h2 align=”center”>Ini heading 2 rata
tengah</h2>
<h3 align=”right”>Ini heading 3 rata
kanan</h3>
</body>
</html>
Hasil:
L.studi kasus
Script:
<title>study
kasus</title>
<link
href="favicon.ico" rel="shortcut icon">
<h1><font
color="red">SMK ALKAAFFAH</font></h1>
<hr>
<body
background="back.jpg">
<font
color="red"><h2>
<ol>
<b><li>pictures</li></b>
<img
src="cd.jpg">
<li><b>nama
lengkap :</b>
FAJRUL ITA TRI DIAH</li>
<li><b>panggilan :</b> FITD</li>
<li><b>Hobi :</b>
berenang, soping ,ngegame , bermain voli
</li>
<li><b>warna
kesukaan :</b> biru, pink ,ungu
,kuning </li>
<li><b>status :</b>
single ,sudah punya pacar ,kawin ,janda </li>
<br>MEREKA
FITD ADALAH SISWA SMK-ALKAAFFAH yang paling pinter
</ol>
<font></h2>
</body>
</html>
HASIL:
M.TINJAUAN REFERENSI
Tim
Guru Mata PelajaranProduktif TKJ. Modul 2: Dasar-dasar
HTML. Kepanjen: SMK
Industri Al Kaaffah. 2014.
Posting Komentar