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 perintahperintah 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 dokumendokumen. 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 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. sebagai tag pembuka dan sebagai tag penutup.

Hallo Pribadi Raharja!

... : merupakan tag pembuka sebuah dokumen html. ... : bagian kepala html : merupakan tag untuk memberikan judul pada dokumen html. ... : bagian isi atau segala sesuatu yang akan di tampilkan padaa sebuah dokumen html

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

Elemen Head Merupakan kepala dari dokumen HTML, tag dan tag terletak diantara tag dan tag ……….

Elemen Title Merupakan judul dari dokumen HTML yang di tampilkan pada judul jendela browser. Tag terletak diantara tag dan tag . Elemen Body Elemen ini di gunakan untuk menampilkan isi dokumen HTML. Tag dan tag terletak di bawah tag daan tag . ………… 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.
Elemen P (Paragraph) Elemen P berfungsi untuk ganti paragraph yang di ikuti dengan baris kosong di awal dan akhir paragraph

…

Elemen P

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

menspesifikasikan posisi tepi horizontal dari paragraph

………………………..

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:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

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 .... Bentuk Text comic berwarna hijau

Dari code diatas terdapat tag 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 .

Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript Ini Text Bold
Ini Text Italic
Ini Text Underline
<s>Ini Text Striketrue
Text Superscript: X<sup>2
Text Subscript: H<sub>2O

Membuat Garis Dalam Dokumen HTML Tag hr digunakan untuk membuat garis pada dokumen html. Contoh:

Ini adalah garis

---

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 Menuju idu class

Membuat List Ada 3 jenis list dalam dokumen html yaitu: 1. Ordered List “

” Tag
adalah kependekan dari Ordered List, secara berurutan. list yang ditampilkan nanti oleh tag ini adalah nomor

Barang belanjaan hari ini :
1. telur
2. buah
3. sayur
4. beras
5. obat
6. sabun


Pada Ordered List “
” Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut type pada tag
contoh:

Produk saya:
1. sepatu
2. tas


2. Unordered List
Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet.

Produk saya:
1. sepatu
2. tas
3. baju
4. celana
5. jam tangan


3. List tanpa bullet

Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis dengan pembuatan list dengan tag ol/ul, hanya saja tag

diganti dengan

lalu tag

diganti dengan

contoh:

Daftar perabot rumah tangga :

kipas angin

mesin cuci

kulkas

kompor

lemari

televisi



Membuat Tabel Pada Dokumen HTML Untuk membuat tabel pada html menggunakan tag dan di akhiri dengan tag lalu di dalam sebuah tag dan tag dimasukan tag dan yang bekerja sebagai baris pada tabel lalu di dalam sebuah dan terdapat tag dan yang bekerja memberikan sebuah kolom pada tabel. Untuk mengetahui garis tabel tersebut, kita menggunakan atribut 'border' pada tag table.

Daftar mahasisw

Menggabungkan Kolom dan Baris Pada Tabel Untuk menggabungkan kolom dalam halaman html yaitu dengan menggunakan colspan. Contoh:

Nim	Nama	jurusan
11166677	Andi	SI
1355799	Dina	SE

Colom yang di gabungkan
Colom 1, Baris 2	Colom 2, Baris 2

Sedangkan untuk menggabungan baris pada html yaitu dengan menggunakan rowspan. Contoh:



Baris yang di gabungkan	Colom 2 , Baris 1
	Colom 2, Baris 2

Input type


Alamat:

Maka hasilnya akan terlihat seperti gambar di bawah ini

Text area Untuk membuat text area anda cukup menambahkan tag diantara tag form.<br /> <br /> <form> <label for="msg">Message</label><br/> <textarea name="msg" cols="20" rows="4">

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



Program : <select name="program" id="program"> Pilih Program Web Arsitektur Mastering CMS Print Design Multimedia Animasi



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 untuk membuat radio button, dengan type =”radio”. Contoh: Berikut adalah bentuk dari radio button.

Jenis Kelamin: Pria Wanita



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:



Hoby : Baca Buku Olah Raga Main Game Hiking



Control Password Box, Submit dan Reset Button

Password





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 : <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; }



Sample

Header Left

Header Right

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: <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; }

Eksternal CSS file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh: Inline CSS Penulisan kode CSS dalam tag HTML. contoh:

Inline CSS

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 yang diletakkan diantara tag. 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 saja bagian yang didalam 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 . 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:

Serif font

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; font-family: Times New Roman; text-decoration: none; } a.link1:hover { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: underline } a.link1:active { font-weight: bold; font-size: 12px; color: #C87C28;

font-family: Times New Roman; text-decoration: none; } 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; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a.link2:hover { font-weight: bold; font-size: 12px;

color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline overline; } a.link2:active { font-weight: bold; font-size: 12px; color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }

Daftar pustaka www.google.com www.ilmuwebside.com www.ilmuhamster.blogspot.com materi perkuliahan