Praktikum HTML (tugas kampus)

PRATIKUM HTML DENGAN MENGGUNAKAN SUBLIME TEXT 3

TUJUAN PRATIKUM

Mengetahui dan memahami dasar-dasar bahasa HTML (HyperText Markup Language) sebagai dasar pemrograman untuk membuat web statis, Memahami struktur dasar HTML, Mampu membuat dokumen HTML yang baik dan benar, Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.

TEORI DASAR

Membangun sebuah Web Page dibutuhkan sebuah bahasa pemprograman yang lebih dikenal dengan sebutan WEB SCRIPTING. Dikatakan Script karena perintah kode program tersebut akan diinterpreter dan tidak ada kompilasi untuk menjadikannya executable. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side.

Client Side dilaksanakan oleh web browser seperti Internet Explorer, Netscape, Opera, Firefox dan lain-lain. Contoh daripada Client Side misalnya HTML,CSS, Javascript, VBscript maupun XML. Sedangkan Server Side dikerjakan oleh Web Server seperti Personal Web Server untuk system operasi Windows 98, IIS untuk system operasi Windows 2000/XP, Apache, Tomcat, Xitami dan Zope. Sedangkan untuk contoh bahasa server side adalah ASP (.Net), PHP, JSP,CFM dan CGI/PL.

Web Scripting yang bersifat Client Side akan menghasilkan web page yang statis dalam arti menekankan pada design format tampilan informasi yang disajikan dan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak dapat menghasilkan output apapun. Sehingga untuk menghasilkan aplikasi web bersifat dinamis tidak mungkin, dan harus dikombinasikan dengan web scripting yang bersifat server side.

HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web scripting bersifat Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih dikenal dengan Hyperlink.

Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI ( Graphical User Interface ) seperti Microsoft Front Page, Dreamweaver CS3, Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad .

TOOLS & SOFTWARE

Ø Tools

Laptop

Ø Software

Software menggunakan Sublime Text 3 dan browser yang dipakai untuk menjalankan yaitu Mozilla Firefox.

LANGKAH KERJA

Langkah pertama

Buka aplikasi Sublime Text maka akan muncul tampilan awal seperti gambar di bawah ini

Langkah kedua

Klik View lalu arahkan pointer ke tulisan Syntax. Setelah itu, akan muncul jendela baru. Pilih salah satu bahasa program sesuai dengan apa yang akan digunakan. Jika ingin menggunakan bahasa program HTML, maka pilih HTML.

Langkah ketiga

Tuliskan tag html pada kotak isian. Jika ingin lebih cepat menuliskannya, cukup dengan menulis html dan tekan TAB di keyboard. Maka secara otomatis tag html akan muncul.

Langkah keempat

Tuliskan source code dibawah tag body seperti contoh dibawah ini.

Langkah keenam

Untuk menyimpan file, kita klik menu File lalu pilih Save As.

Langkah ketujuh

Beri nama file misalnya coba dan pilihlah lokasi penyimpanan file html.. Jika sudah, klik Save.

Langkah kedelapan

Cari di tempat penyimpanan, lalu buka dengan menggunakan browser. Maka ini hasilnya

HASIL PRATIKUM

1. Praktikum 1 (link biasa)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<a href="handayani.ac.id">Teks ini</a>adalah sebuah link ke suatu halaman dalam situs Web.

</p>

<p>

<a href="http://www.stmikhandayani.ac.id">teks ini</a> adalah sebuah link ke halaman awal situs STMIK Handyani di World Wide Web.

</p>

<p>

<a href="#C4" >Melompat ke bagian lain dalam halaman ini.

</a>

<p>anda dapat juga menggunakan gambar sebagai sebuah link :

i<img border ="0" scr="d.jpg" width="1000" height="380">

</a>

</p>

<a href="baru.htm"target="_blank">halaman berikutnya</a>

<p>bila anda memberikan atribut target sebuah link menjadi "_blank", link tersebut akan membuka sebuah window browser baru.</p>

<p>

ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya)

</p>

<p>ada tulisan disini</p>

<a href="C4"><h2>Disinlah tujuan lompatan link internal anda</h2></a>

<p>ada tulisan disini</p>

</p>

</body>

</html>

· Screenshoot

· Analisa

Seperti script yang kita lihat di atas, ada beberapa tag html yang kita gunakan

diantaranya:

• Tag <a> mendefinisikan sebuah anchor dimana apabila kita menambahkan href=” ” contohnya <a href=www.microsoft.com> maka teks yang di beri tag apabila di klik akan menuju ke halaman yang telah di link ke teks tersebut

• Tag <img> digunakan untuk menampilkan gambar pada halaman web

• Dan apabila diberi tag degan <a> dan diberi link maka ketika gambar di klik maka akan menuju halaman yang telah ditujukan

• Tag <a href=”#C4”> maka akan melompat ke link internal pada tag yang telah di beri tage name=”C4”

2. Praktikum 2 (link email)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

ini adalah link e-mail :

<a href="munanurmalasari@student.handayani.ac.">kirim e-mail</a>

</p>

<p>

<b>catatan:</b>spasi di antara setiap kata sebaiknya digantikan dengan tanda %20 untuk <b>memastikan </b>bahwa browser anda akan menampilkan teks anda dengan benar.

</p>

<p>

ini juga contoh link ke e-mail :

<a href="munanurmalasari@student.handayani.ac.id&subject=summer%20party&body=apakah%20anda%20mau%20diundang%20ke%20pesta%20malam%20minggu?">kirim e-mail</a>

</p>

</body>

</html>

· Screenshoot

· Analisa

Kalau analisa dari script yang ada di atas maka kita bisa membuat anchor untuk ke e-mail apabila kita klik teks yang telah di beri tag <a> maka akan menuju ke alamat yang telah ditulis di href.

3. Praktikum 3 (frameset(horisontal dan vertikal))

· Source code

<!DOCTYPE html>

<html>

</frameset>

</html>

· Screenshoot

· Analisa

• Dari analisa script di atas terdapat tag <frameset> yang akan membuat sebuah himpunanan atau sekumpulan frame

• Sedangkan <frame> mendefinisikan sebuah sub windows atau sebuah sub frame

• Pada tag <frame> kita bisa memasukkan sebuah link web yang kita inginkan untuk menampilkannya denga menambah sript src=” ” pada tag <frame> maka script tersebut akan di tampilkan di frame.

• Sedangkan rows=” “ yang terdapat pada tag <frameset> digunakan untuk mengatur ukuran baris frame yang akan digunakan akan tetapi masih bisa di resize di browser

4. Praktikum 4 (Frameset dengan atribut no-resize=”true”)

· Source code

<!DOCTYPE html>

<html>

</frameset>

</html>

· Screenshoot

· Analisa

5. Praktikum 5 (Frame inline)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</iframe>

<p>beberapa browser lama tidek mendukung iframe</p>

<p>bila browser yang anda pakai tidak mendukung. iframe tak akan terlihat</p>

</body>

</html>

· Screenshoot

· Analisa

Dari script diatas ialah kita menggunakn tag <iframe> yang berfungsi untuk mendefinisikan sebuah inline pada sub frame. Pada browser lama iframe ini tidak akan terlihat karena masih belum didukung.

6. Praktikum 6 (Membuat tabel)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

setiap tabel dimulai dengan tag table.

setiap baris tabel dimulai dengan tag tr.

setiap data dalam tabel dimulai dengan tag td.

</p>

<h4>satu baris satu kolom dengan border normal:</h4>

<tr>

</tr>

</table>

<h4>satu baris dan tiga kolom dengan border tebal:</h4>

<tr>

</tr>

</table>

<h4>dua baris dengan tiga kolom dengan border sangat tebal:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>tabel ini tidak memiliki border</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

· Screenshoot

· Analisa

Disini kita menggunakan tag <tabel></table> untuk mendifinisikan debuah tabelDan dalam tabel ada tag <tr> dimana tr digunakan untuk membuat baris

7. Praktikum 7 (Sel kosong dalam tabel)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<p>

seperti yang anda liat, salah satu sel tidak memiliki border. itu terjadi karena sel tersebut kosong. cobalah untuk menyisipkan spasi ke dalam sebuah sel tersebut. terbyata tetap saja tidak memiliki border.

</p>

<p>

cara yang benar adalah dengan menyisipkan spasi non=breaking di dalam sel.

</p>

<p>

spasi non-breaking didalam sel

</p>

<p>

spasi non-breaking adalah sebuah entinitas karakter. bila anda tidak mengetahui apa yang di sebut karakter entitas. baca kembali materi kuliah tentang hal tersebut.

</p>

<p>

entitas spasi non-breaking dimulai dengan tanda ampersand("&"). kemudia karakter-karakter "nbsp, dan diakhiri dengan semicolon(",")

</p>

<p>

</p>

</body>

</html>

· Screenshoot

· Analisa

• Tag <table> digunakan untuk mendefinisikan sebuah tabel

• Tag <tr> Mendefinisikan sebuah barisan tabel

• Tag <td> Mendefinisikan sebuah sel atau kolom tabel

• Sedangkan border=” “ untuk mengatur ketebalan garis pada tabel yang di buat sesuai keinginan yang kita mau

8. Praktikum 8 (Sel tabel yang di perlebar)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h4>sel yang melebar dua kolom:</h4>

<tr>

<th colspan="2">telepon</th>

</tr>

<tr>

<td>bill gates</td>

</tr>

</table>

<h4>sel yang melebar dua baris:</h4>

<tr>

<th>nama depan</th>

<td>bill gates</td>

</tr>

<tr>

<th rowspan="2">telepon:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

· Screenshoot

· Analisa

9. Praktikum 9 (Menambah Latar belakang ke tabel)

· Source code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h4>dengan warna latar belakang:</h4>

<tr>

<td>pertama</td>

<td>baris</td>

</tr>

<tr>

<td>kedua</td>

<td>baris</td>

</tr>

</table>

<h4>dengan latar belakang gambar:</h4>

<tr>

<td>pertama</td>

<td>baris</td>

</tr>

<tr>

<td>kedua</td>

<td>baris</td>

</tr>

</table>

<h4>latar belakang pada sel:</h4>

<tr>

<td bgcolor="red">pertama</td>

<td>baris</td>

</tr>

<tr>

<td background="../ng.jpg">kedua</td>

<td>baris</td>

</tr>

</table>

</body>

</html>

· Screenshoot

· Analisa

10. Praktikum 10 (tabel)

· Source code

<!DOCTYPE html>

<html>

<head>

<title>Tabel</title>

</head>

<body>

<tr>

<td colspan="3" align="center" bgcolor="pink"><font size="12" bgcolor="red">selamat datang di welcome</font></td>

</tr>

<tr>

<ul>

<li>

</li>

<li>

<a href="#">Profil</a>

</li>

<li>

<a href="#">Galeri</a>

</li>

<li>

<a href="#">Hubungi</a>

</li>

</ul>

</td>

<td>

BIODATA SAYA

</p>

<p> MUNA NURMALA SARIT</p>

<p> Teknik Informatika </p>

</div>

</td>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

· Screenshoot

· Analisa

11. Praktikum 11 (frame)

· Source code

· Frame

<!DOCTYPE html>

<framesrc="frame/menu.html" name="left" id="left" />

</frameset>

</frameset>

</html>

· Biodata

<!DOCTYPE html>

<head>

<title>Biodata</title>

</head>

<body>

BIODATA SAYA

</p>

<p> Kelas : TI - IV D</p>

<p> Jurusan : Teknik Informatika</p>

</div>

</body>

</html>

· Header

<!DOCTYPE html>

<head>

<title>Header</title>

</head>

<body>

<p align="center" ><font size="12">Welcome To my Website</font></p>

</body>

</html>

· Menu

<!DOCTYPE html>

<head>

<title>Header</title>

</head>

<body>

<p align="center" ><font size="12">Welcome To my Website</font></p>

</body>

</html>

· Gambar

<!DOCTYPE html>

<head>

<title>Gambar</title>

</head>

<body>

<div>

</div>

</body>

</html>

· Footer

<!DOCTYPE html>

<head>

<title>Footer</title>

</head>

<body>

</body>

</html>

· Screenshoot

· Analisa

Pada gambar di atas saya membuat satu folder yang mana folder tersebut berisi header, footer, menu, gambar, dan biodata. Sehingga di luar folder saya bisa memanggil dan tersebut.

KESIMPULAN

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian

dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Seperti yang perkembangan HTML saat sudah mencapai untuk HTML 5 otomatis dari setiap perkembangannya pasti suatu kelebihan yang dimilikinya. HTML merupakan suatu dasar untuk kita pelajari untuk menguasai atau ingin menjadi Ahli dalam bidang pembuatan suatu website.

Muna Nurmala Sari

Search This Blog

Praktikum HTML (tugas kampus)

Comments

Post a Comment

Popular posts from this blog

Listing program C++ Rental Mobil

model interaksi kecakapan manusia dan komputer

Listing C++ Menetukan Nilai Grade Mahasiswa