e-bookilearning.me/wp-content/uploads/2014/01/first-e-book.pdf · format ASCII normal sehingga...

e-book ini di buat sebagai bahan penunjang pembelajaran di Perguruan Tinggi Raharja

Pengantar

erkembangan dunia Teknologi internet saat ini berkembang begitu pesat. Seiring dengan perkembangan tersebut maka webside di jadikan sarana dalam pengolah informasi di dunia maya( internet). Untuk membangun sebuah webside bukanlah hal yang mudah, e-book ini akan memberikan inforrmasi dasar mengenai CSS dan

HTML. Dan sebagai referensi pembelajaran http://idu.raharja.info/ di Perguruan Tinggi Raharja

Daftar Isi

Bab 1 : Menaiki anak tangga pertama, Sejarah singkat HTML

Bab 2 : Mendekati,mengerti dan memahami HTML

Bab 3 : Pertengahan anak tangga, Lebih dalam memahami HTML

Bab 4 : anak tangga terakhir, mempercantik tampilan dengan CSS

Bab 1 :

Menaiki anak tangga pertama,

Sejarah Singkat HTML

HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan

oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web . HTMLjuga

dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan

menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia

internet. HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan

untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam

sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam

berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata

lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam

format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula

dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan

yang disebut dengan SGML(Standard Generalized Markup Language), HTML adalah sebuah

standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini

merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World

Wide Web . HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka

bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di

Jenewa).

1. Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali

setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian

mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-

perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah

bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya

ini sebagai Generalized Markup Language atau GML.

2. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang

dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 )

yang menyatakan markup language sebagai standar untuk pembuatan dokumen-

dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain,

yaitu SGML ( Standard Generalized Markup Language ).

HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta

cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya

tanpa memperbolehkan meletakkan teks

disekelilingnya (wrapping).

HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan

suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama,

alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage

interaktif.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga

sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.

HTML versi 4.0

HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps

, image dan lain lain sebagai penyempurnaan versi 3.2diambil.

HTML versi 5.0

Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih

dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task

Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0

Bab 2 :

Mendekati, Mengerti

dan Memahami HTML

STRUKTUR DOKUMEN HTML

a. Tag

Tag adalah khusus (markup) berupa karakter “<”dan “>”, sebagai contoh <title>

adalah tag dengan nama title. Secara umum tag di tulis secara berpasangan terdiri atas

tag pembuka dan tag penutup (di tambah karakter”/” setelah karakter “<” ). Sebagai

contoh <title> ini adalah tag pembuka judul dokumen html dan </title> adalah tag

penutup judul html

b. Elemen

Elemen terdiri dari tiga bagian yaitu tag pembuka,tag isi dan tag penutup.

Sebagai contoh untuk memberikan isi atau tampilan apa saja yang ada dalam dokumen

html kita menggunakan tag body.

<body> sebagai tag pembuka dan </body> sebagai tag penutup.

<html>

<head>

<title> ini adalah HTML </title>

</head>

<body>

Hallo Pribadi Raharja!

</body>

</html>

Elemen HTML

Untuk menyatakan pada web browser bahwa dokumen web yang digunakan adalah HTML

<html>

………

</html>

Elemen Head

Merupakan kepala dari dokumen HTML, tag <head> dan tag </head> terletak diantara tag

<html> dan tag </html

<head>

……….

</head>

Elemen Title

Merupakan judul dari dokumen HTML yang di tampilkan pada judul jendela browser. Tag <title>

dan tag </title> terletak diantara tag <head> dan tag </head>.

<title>

<html> ... </html> : merupakan tag pembuka sebuah dokumen html.<head> ... </head> : bagian kepala html<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.<body> ... </body> : bagian isi atau segala sesuatu yang akan di tampilkan padaa sebuah dokumen html

……….

</title>

Elemen Body

Elemen ini di gunakan untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>

terletak di bawah tag <head> daan tag </head>.

<body text=”a” bgcolor=”a” background=”url” link=”x” alink=”y” vlink=”z”>

…………

</body>

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latar belakang

dokumen, background memberikan latar belakang dokumen html dalam bentuk gambar, link

memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktiv, vlink

untuk memberikan warna untuk link yang telah dikunjungi.

Elemen BR(Line Break)

Elemen br berfungsi untuk ganti baris dan tidak mempunyai tag penutup.

<br>

Elemen P (Paragraph)

Elemen P berfungsi untuk ganti paragraph yang di ikuti dengan baris kosong di awal dan akhir

paragraph

<p>

…

</p>

Elemen P mempunyai attribute yaitu align yang bernilai “left”, “center”,”right” yang

menspesifikasikan posisi tepi horizontal dari paragraph

<p align=”left”|”center”|”right”|>

………………………..

</p>

Bab 3 :

Pertengahan anak tangga,

Lebih dalam memahami HTML

Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading

terdiri dari beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:

<html>

<head>

<title>Title</title>

</head>

<body>

<h1>Heading Level 1</h1>






</body>

</html>

Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf,

warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen

html caranya dengan menggunakan tag <font>...</font>.

<html>

<head>

<title> mengatur font </title>

</head>

<body >

<font size="4pt" face="comic" color="green">

Bentuk Text comic berwarna hijau

</font>

</body>

</html>

Dari code diatas terdapat tag <font size="4pt" face="comic" color="green">

itu artinya kita mengatur font pada dokumen html dengan ukuran 4 pt, dengan jenis font comic

berwarna hijau

.

MENAMPILKAN GAMBAR PADA DOKUMEN HTML

Berikut adalah contoh

penggunaan tag <img>.

Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript

<html>

<head>

<title></title>

</head>

<body >

<b>Ini Text Bold</b><br>

<i>Ini Text Italic</i><br>

<u>Ini Text Underline</u><br>

<s>Ini Text Striketrue</s></br>

Text Superscript: X<sup>2</sup><br>

Text Subscript: H<sub>2</sub>O

<html>

<head>

<title>upload image</title>

</head>

<body>

<img src="devii.jpg" height="80%" width="20%" alt="sebuah gambar">

</body>

</html>

</body>

</html>

Membuat Garis Dalam Dokumen HTML

Tag hr digunakan untuk membuat garis pada dokumen html. Contoh:

<html>

<head>

<title>Membuat Garis</title>

</head>

<body>

<h1 align="right">Ini adalah garis</h1>

<hr align="right" width="60%" color="#FF0000"

size="3">

</body>

</html>

Membuat Link

Ada 4 jenis pembuatan link dalam html:

Link untuk menghubungkan antar halaman

Link untuk menghubungkan ke bagian halaman lain

ink untuk menghubungkan ke halaman website lain

Link untuk menghubungkan ke alamat email

<html>

<head>

<title>use link</title>

</head>

<body>

<a href="http://idu.raharja.info">Menuju idu class

Membuat List

Ada 3 jenis list dalam dokumen html yaitu:

1. Ordered List “<ol>”

Tag <ol> adalah kependekan dari Ordered List, secara berurutan. list yang ditampilkan nanti

oleh tag ini adalah nomor

Pada Ordered List “<ol>”

Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut

type pada tag <ol> contoh:

<html><head><title> web baru </title></head><body>Barang belanjaan hari ini :<ol><li>telur</li><li>buah</li><li>sayur</li><li>beras</li><li>obat</li><li>sabun</li></ol></body></html>

<html><head><title>contoh ol</title></head><body>Produk saya:<ol type="A"><li>sepatu</li><li>tas</li><li>baju</li>

2. Unordered List <ul>

Unordered List merupakan pengurutan list dengan menggunakan

symbol/bullet.

<html><head><title>contoh ol</title></head><body>Produk saya:<ol type="A"><li>sepatu</li><li>tas</li><li>baju</li><li>celana</li><li>jam tangan</li></ol></body></html>

3. List tanpa bullet <dl>

Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis

dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan

<dl> lalu tag <li> diganti dengan <dd> contoh:

<html><head><title>list tanpa symol</title></head><body>Daftar perabot rumah tangga :<dl type=><dd>kipas angin</dd><dd>mesin cuci</dd><dd>kulkas</dd><dd>kompor</dd><dd>lemari</dd><dd>televisi</dd></dl></body></html>

Membuat Tabel Pada Dokumen HTML

Untuk membuat tabel pada html menggunakan tag <table> dan di akhiri dengan tag

</table>

lalu di dalam sebuah tag <table> dan tag </table> dimasukan tag <tr> dan </tr>

yang bekerja sebagai baris pada tabel lalu di dalam sebuah <tr> dan </tr> terdapat

tag <td> dan </td> yang bekerja memberikan sebuah kolom pada tabel. Untuk

mengetahui garis tabel tersebut, kita menggunakan atribut 'border' pada tag table.

<html><head><title>table</title></head>

<body>Daftar mahasisw<table border="1"><tr><td>Nim</td><td>Nama</td><td>jurusan</td></tr><tr><td>11166677</td><td>Andi</td><td>SI</td></tr><tr><td>1355799</td><td>Dina</td><td>SE</td></tr>

Menggabungkan Kolom dan Baris Pada Tabel

Untuk menggabungkan kolom dalam halaman html yaitu dengan menggunakan

colspan.

Contoh:

<html>

<head>

<title>Belajar menggabungkan kolom</title>

</head>

<body>

<table border="1">

<tr>

<td colspan="2">Colom yang di gabungkan</td>

</tr>

<tr>

<td>Colom 1, Baris 2</td>

<td>Colom 2, Baris 2</td>

</tr>

</table>

</body>

</html>

Sedangkan untuk menggabungan baris pada html yaitu dengan menggunakan

rowspan. Contoh:

<html>

<head>

<title>Belajar Tabel</title>

</head>

<body>

<table border="1">

<tr>

<td rowspan="2">Baris yang di gabungkan</td>

<td>Colom 2 , Baris 1</td>

</tr>

<tr>

<td >Colom 2, Baris 2</td>

</tr>

</table>

</body>

</html>

Input type

Maka hasilnya akan terlihat seperti gambar di bawah ini

<input type="text" size="20" name="nama"id="nama"/><br/><label for="alamat">Alamat:</label><input type="text" size="40" name="alamat"id="alamat"/></form>

Text area

Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag

form.

adalah tampilan dari control text area

Control List Box

Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih

jelasnya lihatlah kode di bawah ini

<form><label for="msg">Message</label><br/><textarea name="msg" cols="20" rows="4"></textarea></form>

<form><label for="program">Program :</label><select name="program" id="program"><option value="">Pilih Program</option><option value="Web Arsitektur">WebArsitektur</option><option value="Mastering CMS">MasteringCMS</option><option value="Print Design">PrintDesign</option><option value="Multimedia dan Animasi">MultimediaAnimasi</option></select></form>

Berikut adalah bentuk dari control list box...

Jika kita tambahkan atribut size pada tag <select> maka bentuk list box akan

berubah seperti gambar berikut ini:

Control Radio Button

Anda dapat menggunakan tag <input> untuk membuat radio button, dengan type

=”radio”. Contoh:

Berikut adalah bentuk dari radio button.

<form>Jenis Kelamin:<input type="radio" name="jkl" id="pria"value="Pria"/><label for="pria">Pria</label><input type="radio" name="jkl" id="wanita"value="Wanita"/><label for="wanita">Wanita</label></form>

Control Check Box

Untuk membuat check box sama seperti membuat radio button, hanya atribut type

pada tag input diganti menjadi checkbox, untuk lebih jelasnya lihat kode di bawah

ini.

Jika di jalankan di browser akan tampil seperti gambar di bawah ini:

Control Password Box, Submit dan Reset Button

<form>Hoby :<input type="checkbox" name="hoby[]" id="bacabuku"value="Baca Buku"/><label for="bacabuku">Baca Buku</label><input type="checkbox" name="hoby[]" id="olahraga"value="Olah Raga"/><label for="olahraga">Olah Raga</label><input type="checkbox" name="hoby[]" id="maingame"value="Main Game"/><label for="maingame">Main Game</label><input type="checkbox" name="hoby[]" id="hiking"value="hiking"/><label for="hiking">Hiking</label></form>

<form><label for="password">Password</label><input type="password" name="password"id="password"/><br/><br/><input type="submit" name="submit" value="Submit"/><input type="reset" name="reset" value="Reset"/></form>

Bab 4 :

anak tangga terakhir, mempercantik tampilan dengan CSS

Tentang CSS

CSS (Cascading Style Sheet)

adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan

untuk

mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas

sehingga tidak

terjadi pengulangan tulisan.

Keuntungan menggunakan CSS

• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.

• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web

• Mempercepat proses rendering/pembacaan HTML.

Manfaat dari CSS:

Kode HTML menjadi lebih sederhana dan lebih mudah diatur,

Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,

Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,

Dapat berkolaborasi dengan JavaScript.

Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul

Menu –> menu link web

Content –> isi dari web

Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

Static –> posisi normal (default).

Relative –> posisi elemen tergantung dari elemen yang lain.

Absolute –> posisi elemen berpatokan pada jendela browser.

Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

Float:left –> elemen akan menempel pada sebelah kiri elemen induk.

Float:right –> elemen akan menempel pada sebelah kanan elemen induk.

Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.

Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah

Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css :

<html>

<head>

<style type = "text/css">

#header {

width:900px;

height:50px;

border: 1px solid #640404;

}

#headerLeft {

width:400px;

background-color:#CCCCCC;

height:50px;

float:left;

text-align:center;

}

#headerRight {

width:450px;

background-color:#999999;

height:50px;

float:right;

text-align:center;

}

</style>

</head>

<body>

<h1>Sample</h1>

<div id = "header">

<div id="headerLeft">Header Left</div>

<div id="headerRight">Header Right</div>

</div>

</body>

</html>

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

External Style Sheet (file CSS berbeda dari file HTML),

Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)

Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>

<head>

<style type = "text/css">

.header {

width:900px;

height:50px;

border: 1px solid #640404;

}

.headerLeft {

width:400px;

background-color:#CCCCCC;

height:50px;

float:left;

text-align:center;

}

.headerRight {

width:450px;

background-color:#999999;

height:50px;

float:right;

text-align:center;

}

</style>

</head>

<body>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”public.css”/>

</head>

<body>

</body>

</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>

<head>

</head>

<div style="background-color:#999999; text-align:center;">Inline CSS</div>

</body>

</html>

Jika menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan

simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan

diantara tag<head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi

gunakan saja file style.css dan coba. Untuk file HTML anda gunakan coba.html dan ubah isinya

pada bagian<body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML perlu menggunakan atribut class untuk memanggil CSS

selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua

halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman

anda cukup mengubah selector CSSnya saja. CSS memiliki ratusan properties dan values, tentu

Tidak semua browser dapat menampilkan jenis huruf yang di spesifikasikan didalam CSS. Untuk

itu perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang

digunakan. dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu

Times New Roman. dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga

jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum.

Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link,

menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru

tua terang dengan garis bawah anda dapat mengubahnya.

Coba kode CSS berikut:

a.link1:link {

font-weight: bold;

font-size: 12px;

color: #C87C28;

font-family: Times New Roman;

text-decoration: none;

}

a.link1:visited {

font-weight: bold;

font-size: 12px;

color: #CC6600;



}

a.link1:hover {

font-weight: bold;

font-size: 12px;

color: #C87C28;


text-decoration: underline

}

a.link1:active {

font-weight: bold;

font-size: 12px;

color: #C87C28;



}

a.link2:link {

font-weight: bold;

font-size: 12px;

color: #663300;

font-family: Arial, Helvetica, sans-serif;

text-decoration: underline;

}

a.link2:visited {

font-weight: bold;

font-size: 12px;

color: #800000;



}

a.link2:hover {

font-weight: bold;

font-size: 12px;

color: #ff6600;


text-decoration: underline overline;

}

a.link2:active {

font-weight: bold;

font-size: 12px;

color: #ff6600;


text-decoration: underline;

}

Daftar pustaka

www.google.com

www.ilmuwebside.com

www.ilmuhamster.blogspot.com

materi perkuliahan

e-bookilearning.me/wp-content/uploads/2014/01/first-e-book.pdf · format ASCII normal sehingga...

Documents

Transcript of e-bookilearning.me/wp-content/uploads/2014/01/first-e-book.pdf · format ASCII normal sehingga...