HTML Table

Tiga hal penting dari tabel adalah :

Tag pembuka tabel : <table>
Tag row : <tr>
Tag data : <td>

Ok, dengan hal tersebut tertanam di pikiran kita, kita coba membuat sebuah tabel:

Jono	Budi
Wati	Anjas

Source code dari kode di atas :

Codingku HTML Editori

<table>

  <tr><td> Jono </td> <td> Budi </td></tr>

  <tr><td> Wati </td> <td> Anjas </td></tr>

</table>

HTML Gambar

HTML Image

Tag <img> digunakan untuk menampilkan gambar pada dokumen HTML.
Tag <img> termasuk salah satu dari empty element, maksudnya memiliki attribut tetapi tidak memiliki tag penutup.
Browser menampilkan gambar anda berdasarkan letak tag <img> di dokumen HTML anda.

Syntax dari HTML image



<img src='url'/>

Penjelasan :

<img> adalah tag pembuka.
src adalah attribut yang digunakan sebagai informasi darimana url letak gambar yang akan ditampilkan tersimpan.

Codingku HTML Editori

<!DOCTYPE html>



<html>



<body>



<img src="http://cemewew.com/html/sample/street-fighter-4.jpg" />



</body>



</html>

HTML Form

HTML Form digunakan untuk mengirimkan data ke server

HTML Form bisa mengandung elemen-elemen input semisal text fields, button, submit-buttons, check-box dan lain sebagainya.

Tag <form> digunakan untuk mendeklarasikan HTML form.



<form>
.
.
elemen2 input
.
.
</form>

Text Fields

<input type="text"> mendefinisikan sebuah teks input yang bisa diisi oleh user.



<form>
Nama Anda : <input type="text" name="nama">
</form>

HTML Marquee

Pernahkah anda melihat barisan tulisan yang bergerak dari samping kanan kekiri atau dari atas ke bawah pada suatu halaman web?
Itulah fungsi dari HTML marquee.HTML marquee dibuka dengan tag <marquee> dan ditutup dengan tag </marquee>



<marquee attribute="nilai atribut">
...
...
</marquee>

Contoh kode :

<marquee> Contoh sederhana dari HTML marquee </marquee>

<html>



<body>



<marquee direction="right">This text berjalan dari kiri ke kanan</marquee>



</body>



</html>

TUJUAN :

Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.

MATERI :

Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY.

Struktur Dasar Pemrograman :

HTML adalah singkatan dari HyperText Markup Language yang merupakan sebuah script untuk menyusun dokumen-dokumen halaman Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.

Contoh Struktur dasar pemrograman web HTML:

<!DOCTYPE html>
<html>
<head>
<title>Judul halaman web disini</title>
</head>
<body>
Informasi halaman website disini
</body>
</html>

Pejelasan Struktur dasar diatas :

A. TAG

Merupakan teks khusus (markup) yang terdiri dari dua karakter yaitu karakter "<" dan karakter ">", sebagai contoh <body> adalah tag dengan nama body.

Secara Umum tag ditulis secara berpasangan contoh tag <body> biasanya diakhiri dengan tag penutup </body> (ditambahkan karakter "/" setelah karakter "<") sehingga informasi yang diberikan didalam tag <body> berada sebelum ditutup dengan </body> .

B. ELEMENT

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML

Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML

</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.

Contoh penulisan tag-tag yang benar
<p>
<b> Informasi yang di bold </b>
</p>

Contoh yang salah :
<p>
<b> Informasi yang di bold </p>
</b>

 

C. ATTRIBUTE

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Secara umum nilai attribute harus berada dalam tanda petik satu atau dua, Contoh ingin membuat background hitam dengan warna tulisan putih

<body bgcolor="black" text="white">
test html
</body>

(Biasanya jarang digunakan, lebih banyak menggunakan CSS dalam desain tampilan.)

Ada banyak elemet dan tag dalam html, namun penggunaanya disesuaikan dengan kebutuhan, untuk mempelajari element-element dari tag html dapat di lihat dan dilatih dari link ini : http://w3schools.com/html/html_attributes.asp . Untuk awal silahkan belajar dengan kreasi menurutmu untuk tahap dasar, postingan mengenai html ini akan saya lanjutkan secara berlanjut, untuk tahap dasar mungkin beberapa pertanyaan dibawah ini bisa menjadi dasar latihan pemrograman dasar html.

Cara Menampilkan teks dalam dokumen web HTML
Cara Merubah warna Teks dan background
Cara Mengganti Teks dan Background gambar.

Sebagai panduan, silahkan membuat dokumen html menggunakan Notepad++, setelah membuat silahkan save as dengan extension html contoh save as “index.html”. Itu saja postingan kali ini mengenai belajar pemrograman web HTML sampai ketemu di postingan selanjutnya.

SMK Bina Nasional Informatika

Selasa, 11 November 2014

HTML