Prak. E-Bussiness & E-Commerce · digunakan untuk membuat sebuah halaman web dan menampilkan...

21
Prak. E-Bussiness & E-Commerce RAHMADY LIYANTANTO [email protected] liyantanto.wordpress.com HTML HTML (HyperText Markup Language) (HyperText Markup Language)

Transcript of Prak. E-Bussiness & E-Commerce · digunakan untuk membuat sebuah halaman web dan menampilkan...

Prak. E-Bussiness & E-Commerce

RAHMADY LIYANTANTO

[email protected]

liyantanto.wordpress.com

HTMLHTML

(HyperText Markup Language)(HyperText Markup Language)

Pendahuluan

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.

Sejarah

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 Consortium (W3C).

Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

Struktur HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Belajar HTML</title>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />

</head>

<body>

<h1>Mengenal HTML</h1>

<p>Belajar html ternyata mudah nich....</p>

</body>

</html>

1. HTML<html>...</html> 2. Head<head>...</head> 3. Body<body>...</body>

Struktur TerpentingStruktur Terpenting

Pembahasan Tag HTML1. DOCTYPE

Tag <!DOCTYPE> dideklarasikan pada awal dokumen sebelum <html>. Tag ini memberitahukan kepada browser tipe dokumen HTML apakah XHTML. Tag ini sifatnya optional, boleh ada atau tidak.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

(http://www.w3schools.com/tags/tag_doctype.asp)

<!DOCTYPE> dari HTML ada tiga model yaitu: Strict--> pengecekan tag yg lebih teliti, gunakan tipe ini bersama

dengan CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional--> gunakan tipe ini jika browser tidak dukung CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset--> gunakan tipe ini jika ada frame di dalam dokumen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/html4/frameset.dtd">

2. HEAD Tag <head> berisi informasi mengenai judul/ title,

tentang penulis, kata kunci, dll. Didalam <head> terdapat tag child, antara lain yang sering dipakai adalah:

<TITLE> Untuk menampilkan judul halaman web <title>Belajar HTML</title>

<META>

Digunakan untuk memberikan informasi tentang isi dari suatu halaman web yang akan ditampilakn oleh pengunjung.

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />

<meta http-equiv="refresh" content="5" />

(http://www.w3schools.com/tags/tag_meta.asp)

<LINK>

Digunakan untuk merelasikan file ke dalam dokumen.

<link rel="stylesheet" type="text/css" href="theme.css" /> <STYLE>

Digunakan untuk mendefinisikan cascading style sheets (CSS) di dalam dokumen.

<SCRIPT>

Digunakan untuk mendefinisikan skrip seperti JavaScript atau VBScript.

<script type="text/javascript">

document.write("Hello World!")

</script>

3. BODY HEADING Tag yang digunakan untuk membuat judul yang tebal, tag

heading mempunyai beberapa level yaitu: <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

<h1>Belajar HTML</h1> <BR> Tag line break digunakan untuk ganti baris.

HTML<br>CSS

<p> / paragraph

Tag <p> digunakan untuk membuat paragraf

<p>Belajar HTML</p> LINK

Tag anchor “<a>” digunakan untuk link ke halaman web tertentu.

<a href=”home.html”>Home</a> IMG

Tag <img> digunakan untuk memasukkan image/ gambar

<img src="angry.gif" alt="Angry" > FONT

Tag <font> digunakan untuk properti huruf

<font size="3" color="red"> This is some text! </font>

TABLETag <table> digunakan untuk membuat tabel biasanya

diikuti oleh tag <tr> dan <td>. <caption>..</caption> : untuk membuat judul tabel <th>...</th> : untuk membuat judul sel. <tr>...</tr> : untuk membuat baris. <td>...</td>: untuk membuat kolom.

FORM dan INPUT Tag form dan input digunakan secara bersama-sama untuk

meminta masukan dari user untuk kemudian dikirim ke server.

Tag <FORM> membuat kerangkanya sedangkan tag <INPUT> menyediakan elemen atar muka dengan user.

<FORM METHOD=“POST|GET”ACTION=“URL”>

....

</FORM>

→ POST mengirimkan data secara terpisah

→ GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk

Tag <INPUT> memiliki beberapa tipe yaitu:

<input type="button" >

<input type="image" >

<input type="submit" >

<input type="reset" > CENTER

Tag <center> digunakan untuk mengetengahkan text

<center>HTML</center> Tag Komentar

Untuk memberi komentar kita menggunakan tag <!-- ... -->

<!-- Ini Komentar HTML --> NOSCRIPT Digunakan untuk mengantisipasi jika JavaScript atau VBScript disable /

mati.Contoh: <noscript>Wah JavaScript Mati Neh !!!</noscript>

<tt> <i> <b> <big> <small> tags<tt> membuat huruf mono teks

<i> membuat huruf miring<b> membuat huruf tebal<big> membuat huruf lebih besar

<small> membuat huruf lebih kecil UL, OL, LI→ UL (Unorder List) digunakan untuk membuat list tidak ber-

nomer→ OL (Order list) digunakan untuk membuat list ber-nomer→ LI list

FRAME Digunakan untuk memberikan frame pada dokumen. Frame

adalah area yang berisi halam web lain.<html><frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /></frameset></html>

DIV

Digunakan untuk membuat area/ layout tertentu

<div>Hallo world</div>

Aturan Penulisan tag HTMLDidalam penulisan tag HTML ada beberapa ketentuan yaitu: Tag terbagi menjadi dua yaitu tag tunggal dan tag berpasang

→ Tag berpasang harus ditutup oleh pasangannya. Contoh: <p>...</p> ,<h1>...</h1>

→ Tag tuggal tidak boleh ditutup. Contoh: <br> , <input> , <img> Tag HTML bersifat Case-Insensitif (Ditulis kapital atau kecil

sama saja). Penulisan tag HTML boleh satu baris atau beberapa baris

dengan konsekuensi jika ditulis satu baris besar ukuran file lebih kecil, namun sulit dibaca. Sedangkan ditulis dengan beberapa baris memakan ukuran file lebih besar, namun enak dibaca.

Penulisan simbol khusus diawali dengan huruf “&” dan ditutup dengan huruf “;”seperti

➢ &quot; → “➢ &amp; → &➢ &copy; → ©➢ &reg; → ®

Terima Kasih

Referensi:→ http://www.ilmuwebsite.com→ http://www.ilmukomputer.com→ http://www.good-tutorials.com→ http://www.google.com