Belajar HTML #Intermediet

Juni 7, 2011 at 6:32 am (komputer, pemrograman) (, )

Ini merupakan lanjutan dari belajar HTML #beginner, jadi level pemahamannya sedikit lebih tinggi.

1. span dan div

span dan div digunakan untuk mengelompokkan group elemen HTML. Paling sering menggunakan attribut class dan id untuk mengasosiasikan elemen dengan class atau id css selector.

Perbedaan span dan div yaitu bahwa elemen span = in-line sedangkan div = block-line (bisa memiliki line-break) dan digunakan untuk cakupan potongan kode yang lebih banyak.
Dengan class dan id kita dapat mendefinisikan selektor. Sehingga kita dapat memiliki elemen HTML yang sama akan tetapi ditampilkan dengan cara yang berbeda sesuai dengan class dan id

Pada CSS, selector class diawali dengan “.” (tanpa tanda petik) sedangkan selector class diawali dengan “#” (tanpa tanda petik)
eq:
#top {
background-color: #ccc;
padding: 1em
}

.intro {
color: red;
font-weight: bold;
}

Pada HTML penggunaan attribut class dan id yang mengarah ke css adalah sebagai berikut:
<div id=”top”>

<h1>Chocolate curry</h1>

<p>This is my recipe for making curry purely with chocolate</p>

<p>Mmm mm mmmmm</p>

</div>

2. meta tags
Meta tag digunakan untuk memberikan informasi tentang halaman HTML. Meta tag oleh mesin pencari digunakan untuk mengelompokkan informasi tentang web page. Ini harus ditempatkan dalam elemen head. Ada satu meta tag yang dapat digunakan beberapa kali sesuai yang kita inginkan dan dapat berisi attribut content (required), http-equiv dan name.

-content (required attribut)
Isi dari atribut content merupakan meta data itu sendiri yang mana itu dilink-kan ke attribut name atau ke attribute http-equiv. Attribut content dapat berupa content-type, expires, refresh atau set-cookie.

-name
Attribute name bisa disesuaikan dengan keinginan kita. Name yang sering digunakan misalnya author, keywords dan description. Description meta data digunakan untuk menampilkan deskripsi dari halaman web di hasil pencarian oleh search engine.

-http-equiv
Attribut http-equiv dapat digunakan sebagai pengganti attribut name dan akan membuat HTTP header yaitu informasi yang dikirim ke server dimana halaman web diadakan.

-scheme
Dapat digunakan ketika name digunakan untuk menentukan bagaimana nilai konten harus ditafsirkan

eq:
<html>

<head>

<title>Title</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”keywords” content=”darwin, evolution, natural selection, species, beagle, 1859″ />
<meta scheme=”ISBN”  name=”identifier” content=”0-14-043205-1″ />

3. tables
Pada belajar html #beginner kita sudah belajar tentang bagaimana membuat table. Sekarang kita akan membuat table dengan tambahan attribut rowspan dan colspan

eq:
<table border=”1″>
<tr>
<th>column 1 heading</th>
<th>column 2 heading</th>
<th>column 3 heading</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td colspan=”2″>row 2, cell 2, also spanning row 2, cell 3</td>
</tr>
<tr>
<td rowspan=”2″>row 3, cell 1, also spanning row 4, cell 1</td>
<td> row 3, cell 2 </td>
<td> row 3, cell 3 </td>
</tr>
<tr>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
</tr>

</table>

pastekan hasil tabel nya disini

-Kita mengganti tag td pada baris pertama menggunakan tag th. Yang mana tag td merupakan standar data cell, dan th merupakan header cell. Seperti td, th juga harus diletakkan didalam tr

-Kita juga telah belajar bagaimana menggunakan colspan dan rowspan pada beberapa attribut td
colspan=> berfungsi untuk menggabungkan 2 kolom
rowspan=> berfungsi untuk menggabungkan 2 baris

4. definition lists
Pada pembahasan belajar HTML #beginner telah dibahas cara membuat ordered dan unordered list. Kali ini akan dibahas tentang definition list.
– dl (definistion list) fungsinya sama dengan ul (unordered list) atau ol (ordered list)
-dt (definition term) fungsinya sama dengan li (list item)
-dd (definition description) terletak dibawah dt yang fungsinya untuk memperinci dt

eq:

<h4>Contoh random glosary<h4>
<dl>
<dt>HTML</dt>
<dd>Abbreviation for HyperText Markup Language – a language used to make web pages</dd>

<dt>Dog</dt>
<dd>Any carnivorous animal belonging to the family Canidae</dd>
<dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

<dt>Moo Juice</dt>
<dt>Cat Beer</dt>

<dt>Milk</dt>
<dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>

5. javascript
Javascript merupakan bahasa pemprograman client-side yang dapat bekerja sama dengan HTML.
Javascript event dapat digunakan seperti attribut pada tag HTML. Event, merupakan sesuatu yang terjadi pada elemen HTML misalnya ketika terjadi event klik.
eq:
<a href=”#top” onclick=”alert (‘wow. Javascript.’)”>Click me</a>

Event yang dapat digunakan antara lain:
– onblur => digunakan pada form elements dan dijalankan ketika elemen kehilangan fokus
– onchange => digunakan pada form elements dan dijalankan ketika sesuatu berubah
– onclick => dijalankan ketika mouse diklik pada elemen
– ondblclick => dijalankan ketika melakukan double klik
– onfocus => digunakan pada form elemen dan dijalankan when an element gains focus
– onkeydown => dijalankan ketika tombol ditekan ke bawah
– onkeypress => dijalankan ketika tombol ditekan dan dilepaskan
– onkeyup => dijalankan ketika tombol dilepaskan
– onload => digunakan pada tag body  dan dijalankan ketika halaman diload
– onmousedown => dijalankan ketika tombol mouse ditekan ke bawah
– onmousemove => dijalankan ketika kursor mouse bergerak pada elemen
– onmouseout => dijalankan ketika mouse moves away (bergerak keluar)
– onmouseover => dijalankan ketika mouse bergerak pada elemen
– onmouseup => dijalankan ketika tombol mouse dilepaskan
– onreset => digunakan pada form elemen dan dijalankan when form is reset
– onselect => digunakan pada form elemen dan dijalankan ketika elemen dipilih
– onsubmit => digunakan pada form elemen dan dijalankan ketika form is submitted
– onunload => digunakan pada tag body dan dijalankan ketika pengguna navigates away from the page

notes:

Try not to get carried away with Javascript. It’s best uses tend to be small additions of functionality. There is a danger of seriously degrading the accessibility of a web page with Javascript, and many things that it can be used for can be replaced with server-side scripting languages such as PHP or AS

Terutama dalam CSS (untuk mengatur tampilan) ada beberapa tag yang paling umum digunakan dan memiliki alternatif yang lebih baik antara lain:
– b => untuk bold (cetakan tebal) sebagai pengganti strong eq: font-weight: bold

– i => untuk italic (cetak miring) sebagai pengganti em eq: font-style: italic
– big => untuk membuat big teks
– small => untuk membuat small teks
– hr => untuk menunjukkan aturan horisontal. Itu biasanya digunakan pada halaman CSS, properti seperti border-top dan border-bottom menjadikan its more better

Tag tersebut diatas sesuai dengan standar HTML terbaru, tetapi tag-tag tersebut tidak berlaku untuk konten

– u => untuk underlined elemen
– center => untuk membuat align center. The other align such as left, right, and justify
– menu => dapat digunakan untuk membuat list menu. Hampir sama dengan tag ul
– layer => Hampir sama seperti div. Tapi tag ini tidak terlalu berguna sebab tag ini bekerja hanya pada versi lama netscape
– blink or marquee ini link tutorialnya http://www.goer.org/Journal/2003/10/html_house_of_horror_things_that_go_blink_in_the_n.html#26
– font => untuk mendefinisikan warna dengan property font name, size, dan color

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: