Web HTML

A. Tujuan Praktikum

Dengan Tugas yang diberikan oleh dosen pemograman web 1, saya dapat untuk mengetahui fungsi - fungsi pada tag - tag dasar pada pemograman web ini. Contohnya Tag <p> yang fungsinya untuk membuat sebuah paragraph ada juga tag <h1> sebagai Header atau judul pada sebuah website, ada juga tag – tag seperti <hr> , <center></center>, <br>, <strong></strong>, <big></big>, <em></em>, <i></i>, dan banyak lagi.

B. Teori Singkat

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 ^[1]) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. Dibawah ini beberapa tag – tag html.

Tag Dasar HTML

C. Tools dan Software

Tools :

1. Acer Aspire ES 14

2. Mouse

3. Cas Laptop

Software:

1. Sublime Text 3

2. Mozilla Firefox

3. PDF

4. Microsoft Word 2010

D. Langkah Kerja

a) Pastikan software sudah terinstall.

b) Klik start → All Programs → Pilih Sublime Text 3

c) Setelah Sublime Text 3 terbuka ketikkan struktur dokumen HTML yang terdapat di modul.

d) Jika telah selesai simpan file dengan format “.html”. sebaiknya simpan dalam satu folder saja agar tidak tercecer.

e) Lalu buka file tersebut dengan Mozilla Firefox.

f) Selesai.

E. Hasil Praktikum

1. Field teks dan password

a. Script :

<!DOCTYPE html>

<html>

<head>

<title>

Ega Awellana 1

</title>

</head>

<body>

<p>

Paragraf ini mengandung banyak spasi dari baris dalam kode sumbernya

tetapi sumber akan mengabaikannya.

</p>

<p>

Sedangkan yang ini memiliki           spasi panjang.

</p>

Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda.

Bila Anda mengubah ukuran windiw browser, jumlah baris dalam paragraf akan berubah.

</p>

Untuk memotong <br> baris<br> dalam<br> sebuah<br> paragraf, <br> gunakan tag br.

</p>

</body>

</html>

b. Screenshoot

c. Analisa

· Browser akan mengabaikan spasi kosong tetapi untuk membuat spasi kosong harus menggunakan tag “ ”

· Untuk memasukkan enter atau line break bisa menggunakan tag “<br>”

2. Checkbox dan tombol radio

a. Script :

<!DOCTYPE html>

<html>

<head>

<title>Ega Awellana 2</title>

</head>

<body>

<p>

Perhatikan bahwa halaman ini seharusnya berwarna kuning.

</p>

<h1>ini adalah heading 1</h1>

<h2>ini adalah heading 2</h2>

<h3>ini adalah heading 3</h3>

<h4>ini adalah heading 4</h4>

<h5>ini adalah heading 5</h5>

<h6>ini adalah heading 6</h6>

<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan

menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal.

Gunakan tag lain untuk keperluan itu.

</p>

<h1 align="center">Ini adalah heading 1</h1>

<p>Heading diatas telah diposisikan untuk berada di tengah halaman ini.</p>

</body>

</html>

b. Screenshoot :

c. Analisa

1. Untuk tag heading 1 atau “<h1>” biasanya digunakan untuk judul blog, dan heading 2 atau “<h2>” untuk judul artikel.

2. Untuk membuat background berwarna meggunakan tag “ <body bgcolor="warna yang di inginkan contohnya yellow(kuning)">”

3. Kotak drop down dengan nilai default

a. Script :

<!DOCTYPE HTML>

<html>

<head>

<title>Ega Awellana 3</title>

</head>

<body>

<p>

Tag hr mendifinisikan sebuah garis horisontal, defaultnya, adalah rata tengah

</p>

<p align="left">Terdapat paragraf disini</p>

<center> <p>Terdapat paragraf disini</p>

</center>

</body>

</html>

b. Screenshoot :

c. Analisa

· Untuk membuat komentar tersembunyi gunakan tag “<!—”, maka komentar tidak akan tampil pada jendela browser

· Untuk membuat garis horizontal juga gunakan tas “<hr width="sesuai kemauan" size="sesuai kemauan" align="posisi yang di inginkan" color="warna yang di inginkan">

4.Tombol dan fieldset

a. Script :

<!DOCTYPE HTML>

<html>

<head>

<title>Ega Awellana 4</title>

</head>

<body>

<b>Teks tebal</b>

<br>

<strong>teks tebal juga</strong>

<br>

<big>teks huruf besar</big>

<br>

<em>teks miring</em>

<br>

<i>teks miring juga</i>

<br>

<small> teks huruf kecil</small>

<br>

teks berisi <sub>subscript</sub>

<br>

teks berisi <sup>subscript</sup>

</body>

</html>

b. Screenshoot

c. Analisa :

Untuk menggunakan tag subscript gunakan tag “ <sub> ....</sub>” dan supercript “<sup> superscript </sup>”

5.Form dengan field input dan tombol submit

a. Script :

<!DOCTYPE HTML>

<html>

<head>

<title>Ega Awellana 5</title>

</head>

<body>

<pre>

ini adalah

teks yang di preformat.

preformat akan menampilkan spasi dan

line break apa adanya.

</pre>

<p>tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

b. Screenshoot

c. Analisa :

Jika teksnya diberikan format menurut saya spasi kosongpun yang disengaja diberikan spasi banyak kalipun akan tetap terbaca dan jika diberikan “ ” akan tetap terbaca juga.

6.Mengirim e-mail dari suatu form

a. Script :

<!DOCTYPE HTML>

<html>

<head>

<title>Ega Awellana 6</title>

</head>

<body>

<code>Koe komputer</code>

<br>

<kbd>Masukan dari keyboard</kbd>

<br>

<tt>teks jenis teletype</tt>

<br>

<samp>teks contoh</samp>

<br>

<var>variabel komputer</var>

<br>

<p>

<b>Catatan:</b>

Tag tag tersebut biasanya digunakan untuk menampilkan kode komputer/pemrograman.

</p>

FMIPA UAD <br>

Jl.Prof Dr Soepomo <br>

Jantuan <br>

Yogyakarta

</address>

<br>

<abbrtitle="Universitas Ahmad Dahlan"> UAD </abbr>

<br>

<p>Atribut title digunakan untuk menampilkan versi yang dieja ketika pointer

mouse berada di atas kependekan atau singkatan.

</p>

<p> Dalam IE 5, hanya elemen acronym yang mau bekerja

</p>

<p>Dalam navigator 6.2, elemen abbr atau acronym keduanya dapat bekerja

</p>

</body>

</html>

b. Screenshoot

c. Analisa :

§ Jika pointer berada di atas huruf singkatan maka akan muncul kepanjangannya.

§ Untuk tag address maka akan secara otomatis huruf akan tercetak miring walaupun dalam script tidak dituliskan tag “<i>”

§ “<tt>” gunanya untuk mendefinisikan teks model teletype.

7.Menyisipkan gambar latar belakang dan depan

a. Script :

<!DOCTYPE html>

<html>

<body>

<p>

Bila browser Anda mendukung kemampuan bi-directional override (bdo), baris berikut ini akan dituliskan dari kanan ke kiri (rtl):

</p>

Anggap saja ini tulisan bahasa Arab

</bdo>

<br>

Ini adalah contoh quotation panjang:

Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang.

</blockquote>

Ini adalah contoh quotation pendek:

<q>

Ini adalah quotation pendek.

</q>

<p>

Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetapi elemen q tidak akan menampilkan apapun yang khusus.

</p>

</body>

</html>

b. Screenshoot :

c. Analisa

Tag “<blockquote>” digunakan untuk bagian text yang merupakan kutipan panjang biasanya dalam artikel untuk mengutip perkataan ataupun isi artikel dari seseorang.

8.Mengatur posisi gamba

a. Script :

<!DOCTYPE html>

<html>

<body>

<p>

satu dosin adalah

<del>duapuluh</del>

<ins>duabelas</ins>

buah

</p>

<p>

Hampir semua browser akan memberi garis (overstrike) pada teks yang

(maksudnya) terhapus dan teks yang disisipkan akan diberi garis bawah.

</p>

<p>

Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atau teks disisipkan sebagai suatu teks biasa (plain text).

</p>

<p>Ini adalah entitas karakter: </p>

<p>

Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulang halaman Anda agar Anda dapat melihat hasil dari perubahan yang dilakukan.

</p>

</body>

</html>

b. Screenshoot :

c. Analisa

Untuk memasukkan ententitas karakter gunakan tag “&#“nomor etentitas”;” .

9.Menampilkan teks alternatif untuk gambar

a. Script :

<html>

<body>

<h4>Sebentuk list unordered:</h4>

<ul>

</ul>

<br>

<h4>Sebentuk list ordered:</h4>

<ol>

</ol>

</body>

</html>

b. Screenshoot :

c. Analisa :

· “<li>” untuk mendefinisikan item dalam list

· Untuk list tidak terorder menggunakan tag “<ul>” dan yang terorder menggunakan “<ol>”

10. Membuat Hyperlink pada gambar dan Image Map\

a. Script :

<html>

<body>

<h4>List bernomor:</h4>

<ol>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan huruf:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan huruf kecil:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan angka romawi:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan angka romawi kecil:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

</body>

</html>

b. Screenshoot :

c. Analisa

Untuk latihan 10 ini menggunakan list ordered makanya listnya secara otomatis berurut walaupun menggunakan karakter list yang berbeda.

11.Latar belakang dengan warna teks yang sesuai

a. Script :

<html>

<body>

<h4>List dengan bullet berbentuk disc:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

<h4>List dengan bullet berbentuk lingkaran:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

<h4>List dengan bullet berbentuk kotak:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

</body>

</html>

b. Screenshoot :

c. Analisa

Untuk list tidak ter ordered biasanya menggunakan list dengan karakter bergambar tergantung type yang dimasukkan.

12. Latar belakang dengan warna teks yang buruk

a. Script :

<html>

<body>

<h4>Sebuah list bersarang:</h4>

<ul>

<li>Teh

<ul>

<li>Teh hitam</li>

<li>Teh Hijau</li>

</ul>

</li>

</ul>

<br>

<h4>Contoh list definisi:</h4>

<dl>

<dd>Minuman panas hitam</dd>

<dd>Minuman dingin putih</dd>

</dl>

</body>

</html>

b. Screenshoot :

c. Analisa

Untuk mendefinisikan sesuatu yang ada didalam list defisini menggunakan tag “<dl> <dt> <dd>”. <dl> untuk mendefinisikan sebuah list definisi, <dt> untuk mendefinisikan sebuah istilah list definisi, sedangkan <dd> untuk mendefinisikan sebuah keterangan list definisi.

F. Kesimpulan

HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language). HTML5 merupakan revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan tablet.

Muna Nurmala Sari

Search This Blog

Web HTML

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