HTML

(HYPER TEXT MARKUP LANGUAGE)

HTML

Struktur dokumen HTML

Bagian kepala, yang diawali dengan tag <HEAD> dan diakhiri dengan tag </HEAD>. Merupakan tempat untuk menuliskan judul halaman web dan script (program kecil).

Bagian badan/isi, yang diawali dengan tag <BODY> dan diakhiri dengan tag </BODY>. Merupakan tempat untuk menuliskan informasi yang akan di tampilkan pada browser.

Contoh struktur dokumen HTML

<HTML> <HEAD> <! Bagian kepala HTML> <TITLE>Judul web</TITLE></HEAD><BODY>tempat untuk menuliskan informasi </BODY> </HTML>

Cat : Tag <!....> menyatakan komentar, isi teks di dalamnya tidak akan diproses dan dapat diletakkan di mana saja.

Atribut pada tag

Setiap tag memiliki atribut yang berguna untuk memberi aturan pada tag yang kita gunakan.

Contoh : <table align="center"><font color=“red” size=“18px”>

Format teks

Teks pada dokumen html dapat di ubah formatnya misalnya menebalkan, memberi garis bawah dan tulisan miring, menggati font, font size, font color dll.

<b>teks tebal</b> hasil : teks tebal<i>teks miring</i> hasil : teks miring<u>garis bawah</u> hasil : garis bawah<font face="verdana" color ="red"

size="12">merah</font> hasil : merah

Membuat tabel

Untuk membuat tabel yang perlu diketahui adalah tag <table> <th> <tr> dan <td>

<table> awal dari pembuatan tabel<th> table header, mendefinisikan header tabel<tr> table row, mendefinisikan baris pada tabel<td> mendefinisikan cell/kolom pada tabel

tabel header1 tabel header2 tabel header3

Baris 1 kolom 1 Baris 1 kolom 2 Baris 1 kolom 3

Row 1

Cell 1

Row 2

Cell 2 Cell 3

Koding membuat table

<table> <tr> 

<td> Kolom 1 </td> 

<td> Kolom 2 </td> </tr> 

<tr> 

<td> nama </td> 

<td> alamat </td> </tr> 

</table> Setiap tag pembuka baik itu <tr> <td> harus ditutup dengan tag penutup </tr> </td>

Membuat form

Untuk input user biasanya web browser menyediakan sebuah form input yang terdiri dari

Input tipe teks, contoh Input tipe radio, contoh Combo box/select list contoh Checkbox Submit, tombol yang digunakan untuk

mengirimkan data yang di inputkan

Koding membuat form

<form action="kirim.php" method=POST>Nama <input type="text" size="24" name="nm"/> <br> Jenis kelamin <input type="radio" name="jkel"

value="pria"/> Pria <input type="radio" name="jkel" value="wanita"/> Wanita <br>

Jurusan <select name="jur"> <option> TIF</option>

<option> TI</option> <option> TIF</option>

</select> <br>Aktif <input type="checkbox" checked value="Y"> <br><input type="submit" value="simpan"/></form>

Link dan image

Membuat link<a href="google.com">Situs Google </a>Membuat image<img src="buku.png" width= " 200px"

height=" 100" />Membuat gambar yang diberi link<a href="google.com"><img src="buku.png"

border=“0"/></a>

CSS

( Cascading Style Sheets )

CSS ??

Cascading Style Sheets (CSS) merupakan suatu teknologi yang digunakan untuk memperindah tampilan halaman situs web dan aplikasi yang berbasis web.

medefinisikan warna, huruf dan layout dan aspek-aspek lain dari halaman

Contoh CSS

<style type=“text/css”> body

{background-color:#d0e4fe;}

h1{color:orange;text-align:center;}

</style>

CSS Menghemat Banyak Pekerjaan!

Default warna dari HTML ketika kita membuat sebuah link adalah warna biru dengan underline. <a href=www.fb.com>facebook</a>

Bagaimana jika kita ingin merubah semua warna link menjadi merah.?

Cara HTML : <font color=“red”><a ></a></font>beri tag <font> dengan atribut color red disetiap link yang ada.

Cara CSS : a { color : red; text-decoration: none;

}secara otomatis default warna link menjadi merah dan tidak ada underline www.fb.com

Syntax CSS

selector (yang digunakan untuk menyeleksi bagian mana yang mau di format)

declarations (isi dari format css, bisa menggati warna, ukuran font dll):

Deklarasi CSS selalu diakhiri dengan semicolon/titik koma (;), dan

Deklarasi dari grup property (apabila ada banyak property) berada didalam tanda kurung siku {}

p {color:red;text-align:center;}

Komentar pada CSS

Komentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamu ingin mengedit source codenya.

Komentar tidak akan dibaca oleh browser.Komentar CSS diawali dengan "/*", dan

diakhiri dengan "*/“Contoh : /*This is a comment*/

Selectors

Selector terbagi menjadi 4 1. Universal selector (*) digunakan untuk

menseleksi keseluruhan dokumen html.2. Tag selector. Untuk menseleksi tag tertentu

misalnya h1, a, body dll.3. Id selector (#) menseleksi tag yang memiliki

atribut id tertentu.4. Class selector(.), menseleksi tag yang

memiliki atribut name tertentu.

Id (#) and class (.) Selectors

id SelectorId selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" pada CSS.

Contoh Pada HTML : <div id="header">Pada file CSS nya #header { properti yang

ingin diberikan}Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja pada Mozilla/Firefox.

Id (#) and class (.) Selectors

class Selector Class selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML (group elements). Selektor class menggunakan atribut "class" pada HTML, dan didefinisikan dengan tanda "." pada CSS.

Contoh Pada HTML : <div class=“center">Pada file CSS nya: .center { properti yang

ingin diberikan}Jangan memmulai nama class dengan angka/nomor! Karena tidak akan berkerja pada Mozilla/Firefox.

Selector yang lebih spesifik

Kita dapat melakukan seleksi yang lebih spesifik.Misalnya kita ingin menyelesi semua tag <a> yang

ada didalam tag <p> CSS: p a {properti }

Contoh lain : <div id=biodata><div class=nama> </div>

</div>#biodata .nama { }css diatas akan menyeleksi semua tag yang

memiliki class nama yang berada didalam tag yang memiliki id biodata.

Contoh lain<div id=“atas”>

<a></a><a class=“menu”></a>

</div>

Kita ingin menyeleksi (tag <a>) yang memiliki class menu pada div id=atas. Jadi tag <a> yang lain tidak terganggu

CSS :#atas a.menu {properti }

Contoh lain<div id=“tengah”></div><div id=“atas”>

<a class=“menu”></a></div>Kita ingin menyeleksi tag div yang memiliki id

tengah dan id atas.CSS : #tengah,#atas {properti}ataudiv #tengah,#atas {properti}

Test pemahaman<body><div id=“tengah”> <p> <a></a> <b></b>

</p><div class=“isi”><a></a><b></b></div>

</div><b ></b><body>

1. Sintaks CSS untuk menseleksi tag <a> (yang berwarna merah) ?2. Sintaks CSS untuk menseleksi semua tag <b> yang ada didalam div id

tengah3. Sintaks CSS untuk menseleksi tag <b> diluar div id tengah ?

1. #tengah .isi a { properti } 2. #tengah b { properti }3. b {properti }

Tiga cara memasukkan CSS

Ada 3 cara untuk memasukkan style sheet kedalam dokumen HTML:

External style sheetInternal style sheetInline style

External Style Sheet

File css dipisah dengan file html.File css dipanggil pada file html dengan

menggunakan tag <link>

<head><link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

mystyle.css adalah nama file css yang yang diletakkan didalam 1 folder dengan file html.

Internal Style Sheet

Dokumen css terletak didalam file html.mendefinisikan style sheet dibagian <head> pada

halaman HTML, dengan menggunakan tag <style>,

<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style>

</head>

Inline Styles

Css terletak didalam tag html,menggunakan attibut style pada elemen tag

HTML

<p style="color:red; margin-left:20px">This is a paragraph.</p>

Margin dan Padding pada CSS

Fugsi : untuk memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen

Contoh padding :

Margin dan Padding pada CSS

Fugsi : untuk memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen

Contoh margin :

Padding memberikan jarak antara border/batas luar dengan content ( isi dari elemen tersebut).

Margin memberikan jarak antara border/batas luar dengan bagian luar dari elemen lain

padding: 25px 50px 75px 100px;Berarti top padding 25pxright padding 50pxbottom padding 75pxleft padding 100px

padding :25px; berarti semua padding baik top bottom left

right bernilai 25px;

Make Your Personal Website!

HEADER

CONTETNT

FOOTER

Bagi halaman menjadi 3 bagian Header, content dan footer

Koding HTML

<html><head><title>Personal WEB</title></head><link href="webstyle.css" rel="stylesheet"

type="text/css"/><body leftmargin="0" topmargin="0" marginwidth="0"

marginheight="0"><div id="header"></div><div id="content"></div><div id="footer"></div>

</body></html>

Save dengan nama personal.html

Koding CSS

Buat file css simpan dengan nama "webstyle.css” dan letakkan di dalam folder yang sama dengan file html.

#header {Width:90%; height:50px;Padding: 10px 5% 10px 5%;Background-color : #efeffe;

}Coba save file css kemudian buka personal.html

Koding CSS

#footer {Width:100%; height:50px;Padding: 10px 0 5px 0;Text-align:center; Font-size:12px;

Color:#ffffff;Background-color : #3f3f3f;

}#content{

Width:1000px; height:450px;margin:auto;border-left: 3px #efefff solid;border-right: 3px #efefff solid;

}

Koding HTML

Tambahkan teks pada file html seperti berikut

<div id="header"><h2>WEB Personal<h2></div><div id="content">Isi dari web ini dapat berupa artikel dan lain lain</div>

<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>

Koding HTML

buat sebuah form pada div id= content

<div id="content"><form name="form1" action=""><table>

<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr><tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>

Koding HTML

<tr> <td>Jurusan </td> <td><select name="jurusan"> <option>T Informatika</option> <option> T Industri </option> <option> Matematika </option> <option> Sis Informasi </option> <option> T Elektro </option></select></td></tr>

<tr><td> </td> <td><input type="submit" name="submit" value="submit"></td></tr>

</table>

</form>

</div>

Koding CSS

Percantik header dengan mengubah format h2 yang ada didalam tag <div id="header"> pada file css

#header h2 {font-family : tahoma, verdana, serif;font-size: 18px;color : #e33;}

Hasil

Documents

HTML