Tugas2 1300631019

PEMROGRAMAN
PROGRAM STUDI
UNIVERSITAS MUHAMMADIYAH JEMBER
PEMROGRAMAN FRAMEWORK
TUGAS 2
HTML
Disusun oleh:
(SETIYO MUJI B)
(1300631019)
PROGRAM STUDI MANAJEMEN INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2015
INFORMATIKA

Tugas 2
HTML
I. Tujuan:
1. Mengetahui tentang HTML
2. Mengetahui konsep pembuatan halaman HTML
3. Menerapkan kode HTML untuk pembuatan website
II. Dasar Teori
HTML (Hypertext Markup Language)
1. PENGANTAR HTML
HTML merupakan singkatan dari Hypertext Markup Language, merupakan bahasa
pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan </namatag>.
File HTML dapat dibuat menggunakan aplikasi text editor apapun, seperti Notepad di
windows, simple text di Macintosh, gedit di Linux, dan beberapa text editor lain seperti
Notepad++, Sublime Text, Macromedia Dreamweaver, Aptana Studio, dan lain-lain.
Halaman HTML ini hanya dapat dijalankan melalui web browser, seperti Internet
Explorer, Google Chrome, Mozilla Firefox, Opera, Safari, dan lain-lain.
Kesalahan dalam menulis tag HTML tidak berakibat buruk pada system komputer,tetapi
browser hanya mengabaikan perintah tersebut dan menganggapnya sebagai text biasa.
Browser web dirancang memiliki kemampuan hanya untuk mengenali dan mengeksekusi
beberapa Tag HTML dari keseluruhan tag HTML standard dari W3C. Jika web browser
tidak mengenali tag HTML tertentu maka browser akan melewatinya saja seakan hanya
text biasa lainnya.

2. FORMAT PENULISAN CODE HTML
<nametag atribut=”value”> </nametag>
3. TAG DASAR HTML
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
1) <HTML>… </HTML> Sebagai tanda awal dokumen HTML.
2) <HEAD>… </HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa
meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
3) <TITLE>… </TITLE> Sebagai title atau judul halaman. Kalimat yang terletak di
dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
4) <BODY>… </BODY> Di dalam tag ini bisa diletakkan berbagai page attribute
seperti warna latar belakang, warna teks, warna link, warna visited link, warna active
link, form, field, dan lain-lain.
4. DAFTAR TAG HTML
Tag Utama
Tag Atribut Deskripsi
<html> </html> Baris paling atas dari setiap file HTML
<head> </head> berfungsi sebagai tanda pengenal pada halaman yang
akan Anda buat.
<title> </title> Judul halaman yang diletakkan di dalam tag head
<body> </body> background
bgcolor
bgsound
font
link
alink
vlink
topmargin
leftmargin
Isi content dari seluruh web

marginheight
marginweight
Font
Tag Atribut Deskripsi
<font> </font> color
size
name
Untuk mengatur huruf pada halaman HTML
Modifikasi Teks
Tag Deskripsi Contoh
<b> </b> Bold (Teks tebal) Teks Tebal
<i> </i> Italic (Teks miring) Teks miring
<u> </u> Underline (teks garis bawah) Teks garis bawah
<pre> </pre> Preformatted teks Contoh teks
<h1> </h1> Teks Heading 1
Heading 1
<h2> </h2> Teks Heading 2
Heading 2
<h3> </h3> Teks Heading 3 Heading 3
<sub> </sub> Subscript SubScript
<sup> </sup> Superscript Sup
Script

Table
Tag Atribut Value Deskripsi
<table>
</table>
border 0
1
Menentukan ada atau tidaknya garis sel tabel.
Nilai 1 untuk menampilkan garis tepi, dan nilai
0 untuk tidak menampilkan
cellpadding pixels Menentukan ruang antara dinding sel tabek
dan isi sel tabel
cellspacing pixels Menentukan ruang antara sel-sel tabel
width pixels
%
Menentukan panjang tabel
height pixels
%
Menentukan tinggi tabel
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Mementukan warna pada tabel
align left
center
right
Menentukan keselarasan tabel sesuai dengan
teks sekitarnya
valign top
midle
bottom
baseline
Menentukan keselarasan posisi vertikal pada
isi cel tabel
background filename image
format color
Memberi background berupa gambar atau
warna pada tabel
<tr> </tr> height
bgcolor
background
align
valign
Membuat baris
<td> </td> height
bgcolor
Membuat kolom

background
align
valign
colspan
rowspan
Form

5. CONTOH SEDERHANA MEMBUAT HALAMAN HTML
<HTML>
<HEAD>
<TITLE>Judul Web</TITLE>
</HEAD>
<BODY>
Letakkan text, images, form, field dan link Anda
di sini
</BODY>
</HTML>
III.Tools yang digunakan:
1) Notepad++ / Sublime Text / Aptana Studio / dll (dilarang menggunakan dreamweaver)
2) Web Browser (Mozilla Firefox / Google Chrome / dll)

IV.Latihan
1) MEMBUAT HALAMAN HTML PERTAMA
Ketikkan code berikut ini pada notepad++:
HASIL:
Penjelasan program:
 Elemen <html> yang menyatakan suatu dokumen HTML
 Elemen </HEAD> yang memberikan informasi tentang dokumen tersebut,seperti
judul dokumen atau hubungannya dengan dokumen lain
 Eleman <Body> yang menentukan bagaimana isi suatu dokumen ditampilkan
oleh browser seperti pada gambar di atas, paragraf atau list ,tabel dan lain-lain

2) MEMBUAT HEADING
Buat file baru yang kemudian ketikkan code berikut ini, dan simpan dengan nama
latihan-heading.html
HASIL:
PENJELASAN PROGRAM:
 TITLE untuk menampilkan judul dari dokumen

 <h1>sampai <h6> untuk meyatakan suatu heading digunakan tag<h1> sampaai <h6>
yaitu adalah level heading dari 2 sampai dengan 6 pemakaian heading di awali dengan
tag <h1> dan di akhiri dengan tag </h1>
3) MEMBUAT TABEL
Untuk membuat tabel di HTML, menggunakan tag <table> dan ditutup dengan </table>.
Didalam tag tersebut terdapat tag untuk membuat baris yaitu <tr> </tr>. Dan didalam
baris terdapat tag untuk membuat kolom yaitu <td> </td>
Untuk dapat memahami cara pembuatan tabel, ketikkan code berikut, dan simpan dengan
nama latihan-tabel.html
HASIL:

PENJELASAN PROGRAM:
 <tabel> digunakan untuk mendefinisikan pembuatan tabel.
 <tr> tag ini digunakan untuk membuat baris baru (pada tabel)
 <td> tag ini digunakan untuk membuat kolom baru pada tabel .
 Border untuk menentukan ukuran border tabel (dalam pixel).
4) MEMBUAT MERGE CELL PADA TABEL
Yang perlu diperhatikan ketika akan melakukan merge cell adalah merge cell pada kolom
atau baris. Jika pada baris, maka menggunakan rowspan, jika pada kolom maka
menggunakan atribut colspan.
Contoh 1:
Merge Cell Kolom
Baris 2 Kolom 1 Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 3 Baris 3 Kolom 3 Baris 3 Kolom 3
Merge cell pada tabel diatas adalah pada kolomnya, sehingga atribut yang digunakan
adalah colspan. Code untuk membuat tabel seperti di atas adalah sebagai berikut:
Simpan dengan nama file latihan-colspan.html

HASIL:
PENJELASAN PROGRAM:
 Colspan untuk menggabungkan beberapa kolom
Contoh 2:
Merge Cell Baris Baris 1 Kolom 2 Baris 1 Kolom 3
Baris 2 Kolom 2 Baris 2 Kolom 3
Baris 3 Kolom 2 Baris 3 Kolom 3
Ketikkan code berikut, dan simpan dengan nama latihan-rowspan.html

HASIL:
 ROWSPAN digunakan untuk menggabungkan beberapa baris
5) MEMBUAT PARAGRAF
Dalam membuat paragraf di HTML, menggunakan tag <p> </p>. Silahkan ketikkan code
ini, dan simpan dengan nama latihan-paragraf.html

HASIL:
PENJELASAN PROGRAM
 Paragraf, suatu paragraf dalam dokumen HTML ditandai dengan pasagan <P> diakhiri
dengan </p> Atribut yang di gunakan dalam paragraf di antaranya ALIGN yang
mempunai tiga nilai yaitu LEFT (rata kiri) , RIGHT (rata kanan) dan CENTER (rata
tengah)
6) MENAMPILKAN GAMBAR PADA HTML
Untuk menampilkan gambar pada HTML, menggunakan tag <img>. Pertama siapkan
terlebih dahulu gambar yang akan ditampilkan. Letakkan gambar tersebut pada directory
yang sama dengan file HTML yang akan kita buat berikut:
Code untuk menampilkan gambar adalah seperti berikut:
Simpan code HTML tersebut dengan nama latihan-image.html

HASIL:
PENJELASAN PROGRAM
 Scrip di atas <img src="Capture.jpg"/> di gunakan untuk menampilkan gambar
dengan format"Capture.jpg" gambar harus satu folder dengan file code tersimpan.
7) MEMBUAT FORM
Ketikkan code berikut dan simpan dengan nama latihan-form.html

HASIL :
PENJELASAN PROGRAM
 Nama: <input type="text" name ="nama"/> program ini di gunakan untuk
menampilkan nama dan kotak tempat imputan atau kolom pada nama
 <br/> <br/> digunakan untuk membuat baris baru atau gunanya sama sperti enter
 <select name="MK"> digunakan untuk menampilkan menu pihian yang berisi
beberapa pilihan matakuliah
 <td> <input type="radio" name="JK" value="Laki-Laki"/>Laki-Laki digunakan
untuk menampilkan inputan berupa radio button yakni jenis kelamin laki – laki
ataupunperempuan
 <option value="none">---- Pilihan Mata kulia ----</option>
<option value="1">---- Pemrograman struktur data ----</option>
<option value="2">---- Pemrograman web ----</option>
<option value="3">---- Pemrograman berorientasi objek ----</option>
<option value="4">---- algoritma & struktur data ----</option>
di gunakan untuk mengisi pilihan mata kuliah yang akan di tampilkan

V. Tugas
1) Modifikasi latihan nomer 1 dengan penambahan atribut bgcolor=“#4EA8DE“ dan
topmargin=“50“, pada tag <body>.
MENAMBAHKAN BGCOLOR=“#4EA8DE“
MENAMBAHKAN topmargin=“50“

TAMPILAN KODING
PENJELASAN PROGRAM:
 bgcolor=“#4EA8DE“ untuk menampilka warna biru pada latar belakan
 topmargin=“50“ untuk mengatur margin atas dari isi dokumen dengan
ukuran pixel

2) Rapikan hasil dari latihan No. 7 tentang Form dengan memasukkan field-field tersebut ke
dalam tabel seperti gambar berikut:

TAMPILAN KODING
HASIL:
PENJELASAN KODING
 <table border=1></table > = untuk membuat tabel dan membuat tebal tabel
angka 1 untuk membuat ketebalan tabel
 <tr></tr> = untuk membuat baris baru dalam tabel
 <td>Nama </td> = untuk menam pilkan nama dalan
 <td><input type="text" name="Nama"/> = digunakan untuk membuat
text field atau inputan berupa text pada Nama di baris

 <input type="radio" name="JK" value="Laki-Laki"/>Laki-Laki =
digunakan untuk menampilkan button untuk memilih Laki-laki atau Perempuan
dalam tabel
 <td> <select name="MK"> = Untuk membuat atau menampilkan select pada
kolom untuk memilihan mata kuliah yang tampil dropdown.
 <option value="None"> ----- Pilih Mata Kuliah ----</option> = digunakan
untuk memilih pilihan didalam ini dan Scrip None di atas yakni untuk
menampilkan paling utama yang tampil jika belum memilih.
3) Melanjutkan tugas praktikum No. 2 diatas, beri tambahan field berikut:
 Tanggal Lahir  menggunakan type=“date“
 No.HP  menggunakan type=“number“
 Blog  menggunakan type=“url“
 Tombol Reset  menggunakan type=“reset“
Kemudian hilangkan border pada tabel tersebut, atau border diset 0 (border=0)

TAMPILAN KODING
HASIL:
 <td> <input type ="Date"/> </td> = digunakan untuk memberi inputan tanggal pad
kolom tanggal lahir yang berisi tanggal, bulan dan tahun dengan kita memilihnya
saja tanpa mengetikkanya satu persatu

 <td> <input type ="number"/> </td> = digunakan untuk inputan berupa number
saja dan kita tidak bisa menginputkan caracter.
 <td> <input type ="url"/> </td> = digunakan untuk menyimpan karakter yang akan
dibuat hyperlink.
 <input type ="reset"/></td> = digunakan untuk menampilkan tombol reset
pada button.
4) Buatlah halaman HTML dengan bentuk seperti berikut:
Buatlah laporan untuk tugas ini dengan disertai SCREENSHOT dan PENJELASAN dari setiap
langkah yang telah dikerjakan pada latihan dan tugas diatas.

PENJELASAN KODING
 <br></br> = digunakan untuk membuat baris baru
 <p> = digunakan untuk paragraf mengatur untuk rata kana, kiri, tengah
 <b> = di gunakan untuk membuat tulisan tebal atau bold
 <table border=1 align="center"> = di gunakan untuk mengatur tabel berada di
tengah
 <tr></tr> = digunakan untuk membuat baris
 <td rowspan="3" align="center"><b>No</td> = digunakan untuk membuat merge
pada baris 1 sebanyak 3 baris dan membuat text No berada di tengah tabel.
Laporan dikumpulkan di elearning pada tanggal 19 Maret 2015 jam 23.55 WIB.
VI.Kesimpulan
(Kesimpulan apa yang dapat anda ambil dari tugas ini?)
 Mahasiswa mampu membuat web dan dapat memahamin program-program atau
coding yg sudah di buat.
 Mahasiswa mampu berfikir kreatif dalam membuat web dengan menampilkan
gambar pada web

Tugas2 1300631019

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Tugas2 1300631019

Similar to Tugas2 1300631019 (20)

Recently uploaded

Recently uploaded (13)

Tugas2 1300631019