My Blog Account: November 2014

Ass. mau cerita nih tentang makul kuliahku "perancangan web" sama pak haryoko sang dosen seruuu ;) kl bahas masalah web jujur akuu udah gak terlalu canggung lagi karena di smk jga aku udah belajar apa itu web, bagaimana ngoding, tapi istilah ngoding baru aku pake di kuliah ini, hehehe
awalnya sih pas pertama sekali masuk lab untuk praktek langsung pembuatan web aku kira dosennya killer, taunya penilaianku salah besar.. dosenya asyikk, baik lagi.. :) dan akuu juga gak aneh lagi ngelihat ataupun mendengar sebutan web.
pertemuan pertama it tentang basic web, liat di bawah!!

HTML

HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang

menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa

pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen

teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )

dan tanda lebih besar ( > ) yang biasa disebut tag.

1. Dokumen dan Penamaan HTML

Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena

merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang

sederhana, misalnya notepad. Dapat juga menggunakan HTML editor yang bersifat

WYSIWYG ( What You See Is What You Get ), misalnya Frontpage atau Dreamwaver.

Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling

nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama

sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan

berbeda dengan dokumen A.html.

2. Elemen dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk

menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.

Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML

terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).

Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan

pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa

harus berpasangan. Diantaranya:

•

Image ( <img /> )

Ganti Baris – Break ( <br /> )

Horizontal Rule ( <hr /> )

•

Input Field ( <input /> )

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut

digunakan

untuk

mengubah

default

pemformatan

dokumen

dengan

tag

yang

bersangkutan.

Struktur Element

Element

Tag Penutup

Tag Pembuka

Name

Value

Content

Atribut

Struktur Dasar HTML

<html>

<head>

....informasi dokumen....

</head>

<body>

....konten yang di tampilkan

pada halaman browser.....

</body>

</html>

3. Penggunaan Tag dan Atributnya

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag

HTML, memiliki syarat penulisan yaitu:

•

Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )

Tag HTML secara normal selalu berpasangan misal (<i>...</i>)

Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua

merupakan tag akhir.

•

Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>

Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh

bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

4. Tag Dasar HTML

4.1 HTML

Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini

merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag

pertama dalam dokumen html. Penulisan tag seperti berikut ini :

<html> pada awal dokumen dan </html> pada akhir dokumen

4.2 Head

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head

yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –

kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan

tag seperti berikut ini :

<head> di awal setelah <html> dan </head> di akhir section head.

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :

•

Menyediakan judul dokumen

Menjembatani hubungan antar dokumen

Memberitahu browser untuk membuat form pencarian

Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin terdapat pada bagian head :

•

Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah

sebagai berikut :

<title>Judul Dokumen</title>

•

Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh

penggunaannya adalah sebagai berikut berikut :

•

Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.

Tag ini mempunyai beberapa atribut :

Atribut

href

rel

Fungsi

Menunjuk pada URL / dokumen lain

Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain

yang berisi informasi tentang personil yang member kontribusi

terhadap dokumen tersebut

Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain

Menentukan tipe dan paramenter dari relasi

rev

type

Contoh penggunaannya adalah sebagai berikut:

Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML

Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas

yang belum didukung oleh HTML.

Tag <meta> mempunyai atribut :

Atribut

http-equiv

name

url

content

Fungsi

Mendefinisikan properti dari elemen

Menyediakan deskripsi tambahan dari elemen

Mendefinisikan target dokumen dari sebuah properti

Menyediakan nilai respon dari properti

•

Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh

berikut ini :

Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,

kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak

disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan

mengklik tombol Refresh / Reload pada browser.

Penggunaan elemen <meta> yang paling populer adalah penggunaan properti

Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja

search engine. Biasanya search engine akan menggunakan teks yang disebutkan

pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang

terdapat pada properti Description untuk mendeskripsikan indeks tersebut.

4.3 BODY

Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan

ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.

Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup

</body>.

Atributnya:

Atribut

alink

background

bgcolor

bgproperties

leftmargin

link

text

topmargin

vlink

01.latihan_01.html

<html>

<head>

<title>Penggunaan BODY</title>

</head>

Ini adalah contoh penggunaan body.

Dan ini adalah sebuah <a href="">link</a>.

</body>

</html>

Fungsi

Menunjukkan warna link aktif

Merujuk URL atau direktori dari gambar yang digunakan sebagai

latar belakang

Menentukan warna latar belakang

Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut

tergulung

Batas kiri dokumen

Menentukan warna link yang belum dikunjungi

Menentukan warna teks

Menentukan batas atas

Menentukan warna link yang telah dikunjungi

Title

Body

Warna

Black

Maroon

Green

Olive

Navy

Purple

Teal

Gray

Silver

Red

Lime

Yellow

Blue

Fuchsia

Aqua

White

Nilai

#000000

#800000

#008000

#808000

#000080

#800080

#008080

#808080

#c0c0c0

#ff0000

#00ff00

#ffff00

#0000ff

#ff00ff

#00ffff

#ffffff

Table Warna

4.4 Memberikan Komentar

Untuk

mempermudah

pembacaan

kembali

kode-kode

HTML,

kadang-kadang

ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca

pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda

-->.

01.latihan_02.html

<html>

<head>

<title>Penggunaan Komentar</title>

</head>

<body>

Selamat belajar html<br>. Semoga sukses!

</body>

</html>

4.5 Memformat Dokumen HTML

Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.

Tag-tag tersebut diantaranya adalah :

•

Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.

01.latihan_03.html

<html>

<head>

<title>Latihan 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>

•

Tag <br />, membuat baris baru, tidak memerlukan penutup </br>

Tag <p>, memulai paragaraf baru.

Tag <hr />, membuat garis batas horizontal, tidak memerlukan penutup </hr>

01.latihan_04.html

<html>

<head>

<title>Cerita Ramayana</title>

</head>

<body>

Cerita wayang Ramayana, di Kerajaan Alengka Diraja

<br>Rahwana membuat geger karena menculik Dewi Sinta

<p>Anoman, Si Kera Putih

ditugaskan Tukul Arwana untuk menjemput Sinta

</p>

Tukul Arwana tidak sempat menjeputnya, karena sedang

mengisi acara di stasiun TV Swasta

<hr />

Rama Tukul Arwana

<hr />

<br />

Ini adalah isi Bab I

<h2>1.1 Subbab HTML</h2>

Ini adalah isi Subbab 1.1

<h3>1.1.1 Sub-Subbab HTML</h3>

Ini adalah isi Sub Subbab 1.1.1

</body>

</html>

•

Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan

tampilan pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br /> jadi

tidak diperlukan lagi.

01.latihan_05.html

<html>

<head>

<title>Latihan PRE</title>

</head>

<body>

<pre>

Tampilan ini sma dengan tampilan di teks editor.

Klasemen

TeamMainMenangSeriKalah

=================================================

Team A3210

Team B3201

Team c3111

=================================================

Kode program :

For I = 1 to 10

For J = 1 to 5

A(I,J)=I*J

</pre>

</body>

</html>

•

Tag <center>, Teks rata tengah

Tag <ul> dan <ol>

Pemformat dokumenlain yang akan sangat banyak berguna adalah LIST (daftar).

Ada dua macam daftar, yaitu ORDERED lists (ol) dan UNORDERED lists (ul).

01.latihan_06.html

<html>

<head>

<title>Latihan LIST</title>

</head>

<body>

<p>Keluarga Pandawa</p>

<ol>

<li>Yudhistira</li>

<li>Arjuna</li>

<li>Nakula</li>

<li>Sadewa</li>

</ol>

<p>Jenis Musik</p>

<ul>

<li>Campur Sari</li>

<li>Dangdut</li>

</ul>

</body>

</html>

4.6 Memformat Karakter

Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk

membuat sebuah dokumen menjadi menarik dan informatif.

4.6.1 Logical Format

Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag

ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai

berikut :

•

<cite>, digunakan untuk menandai suatu kutipan (citation).

<code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa

•

<em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh

penulis.

•

<kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user

melalui keyboard.

•

<samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.

<strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu

teks.

•

<var>, digunakan untuk menampilkan nama variabel.

<dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

4.6.2 Physical Format

Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag

penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :

•

<b>, untuk menampilkan huruf tebal.

<i>, untuk menampilkan huruf miring.

<u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf

seperti huruf mesin ketik.

•

<strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.

<big>, untuk menampilkan ukuran huruf yang lebih besar.

<small>, untuk menampilkan ukuran huruf yang lebih kecil.

<sub>, untuk menampilkan subscript.

<sup>, untuk menampilkan superscript.

01.latihan_07.html

<html>

<head>

<title>Memformat Karakter</title>

</head>

<body>

<b>Kalimat ini akan dicetak tebal</b><br>

<i>Kalimat ini akan dicetak miring</i><br>

<u>Kalimat ini akan bergaris bawah</u><br>

<strike>Kalimat ini akan bergaris tengah</strike>

</body>

</html>

4.6.3 Tag Font

Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:

01.latihan_08.html

<html>

<head>

<title>Memformat FONT</title>

</head>

<body>

Jenis font ini adalah Arial, berwarna merah, ukurannya 3

</font>

<br />

Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6

</font>

</body>

</html>

4.7 Menambahkan Gambar

Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar

yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar

yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah

gambar digunakan tag <img />.

Tag <img /> mempunyai atribut :

Atribut

src

align

width

height

alt

01.latihan_09.html

<html>

<head>

<title>Menambahkan Gambar</title>

</head>

<body>

Gambar ini terdapat pada windows 98 secara default, anda boleh

menggantinya.

</body>

</html>

Fungsi

Merujuk kepada URL atau direktori lokasi gambar

Posisi text disekitar gambar, nilainya adalah top, middle, bottom,

left, right

Lebar gambar dalam satuan pixel

Tinggi gambar dalam satuan pixel

Menampilkan text pengganti jika gambar tidak tampil

4.8 Menambahkan Link

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika

Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan

Anchor, yaitu tag <a>. Tag <a> mempunyai atribut HREF yang digunakan sebagai link

tujuan.

01.latihan_10.html

<html>

<head>

<title>Menggunakan Link</title>

</head>

<body>

<a href="http://www.yahoo.com">Klik disini</a> untuk menuju situs

Yahoo.com.<br />

Atau dapat juga mengklik gambar ini :

</a>

</body>

</html>

4.9 Tabel

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

•

Tag <table>

Tag <tr>

Tag <th>

Tag <td>

: Mendefinisikan sebuah tebel

: Mendefinisikan baris tabel

: Mendefinisikan judul kolom

: Mendefinisikan isi tiap kolom

01.latihan_11.html

<html>

<head>

<title>HTML Tabel</title>

</head>

<body>

<tr>

<th>Kolom 1</th>

<th>Kolom 2</th>

<th>Kolom 3</th>

</tr>

<tr>

<td>Baris 1 kolom 1</td>

<td>Baris 1 kolom 2</td>

<td>Baris 1 kolom 3</td>

</tr>

<tr>

<td>Baris 2 kolom 1</td>

<td>Baris 2 kolom 2</td>

<td>Baris 2 kolom 3</td>

</tr>

</table>

</body>

</html>

My Blog Account

Jumat, 28 November 2014

Makul Perancangan Web bikin seru karena dosenya asyi!!