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






<sub> </sub> Subscript SubScript

<sup> </sup> Superscript SupScript

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

Formatting

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.

TAMPILAN KODING:

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

Data & Analytics

Tugas2 1300631019