Pertemuan 2 ~ .

•Objectives(TujuanInstruksionalumum):

–Pengenalan Client Side Scripting(HTML dan XHTML)

•IndikatorKompetensi

–Mahasiswa mampu mendefinisikan, kegunanaan, dan perkembangan HTML dan XHTML.

–Mahasiswa mampu menjelaskan W3C dan macam-macam doctype

–Mahasiswa mampu menjelaskan struktur dasar HTML dan tag-tag dasar HTML.

–Mahasiswa mampu membedakan elemen, tag, dan atribut

–Mampu menjelaskan fungsi dari setiap tag dan element yang terdapat dalam HTML

–Mampu menggunakan tag dan element HTML dalam membuat halaman web

HTML

•HTMLsingkatan dari Hyper Text Markup Language

•Digunakanuntukmembuatsuatuhalamanweb

•HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN

•HTML dipopulerkanpertamakali olehbrowser Mosaic

•Selamaawaltahun90’an, HTML mengalamiperkembanganyang sangatpesat

•Bukanbahasapemrogramankarena tidakmemilikistrukturpemrogamanyang umumadapadasebuahbahasapemrogamanstandar, misaltidakadanyastrukturpercabangan, perulangan.

•Hypertextmenunjukkefaktabahwahalamanweb lebihtepatberupatext yang dapatmemuatmultimedia danmelakukanlink denganatautanpalompatan

•Terdiridarimarkup(penandaan) dengansimbol

•lebihkecil( < ) dandanlebihbesar( > ) yang biasadisebuttag.

•Sebuahdokumenataufile HTML agar dapatdibacalangsungolehbrowser disimpandalamekstensi.htmatau.html

PERKEMBANGAN HTML

•HTML 1 (barners-lee, 1989) : sangat dasar,integrasi terbatas pada multimedia. Tahun 1993 Mosaic menambahkan beberapa fitur baru (integrasi image)

•HTML 2.0 (IETF, 1994) : lembaga resmi HTML adalah world wide consortium (w3c), yangbekerjasama dengan internet engineering task force (IETF) mencoba untuk membuat standar kode-kode HTML dan menambah fitur-fitur lain, tapi kenyataannya hingga tahun 1994-1996 netscape dan microsoft dengan IE seringkali juga telah mengembangkan berbagai tag “perluasan” bagi HTML

•HTML3.2(W3C,1996):Menyatukankedalamstandartunggaltetapitidakmengarahketeknologiyanglebihbarusepertijavaappletdanvideostraming.

•HTML4.0(W3C,1997):UsahastandarisasimenunjukkefiturdiluarpetaHTML,tetapitidakmenunjukkesuatuvendor.

•XHTML1.0(W3C,2000):HTML4.01dimodifikasiuntukmenyesuaikandirikestandarXML.

•HTML5(W3CdanWHATWG,2009):BekerjasamauntukpengembangkanHTML5

APA ITU W3C?

•W3CsingkatandariWorldWideWebConsortium

•W3Cmerupakanbadanresmiyangmembuatstandarweb.

•W3Cmengembangkanteknologi(spesifikasi,petunjuk,software,dantool)yangdapatdioperasikanpadaplatformmanapun.

•DibentukpadaOktober1994,denganjumlahanggotalebihdari400organisasianggotaseluruhdunia,dantelahmenghasilkanpengakuaninternasionaluntukkontribusinyapadaperkembanganweb.

•HasilstandarW3C:

StandarwebygpalingmendasaradalahHTML,CSS,danXML

StandarHTMLyangterakhiradalahXHTML1.0

XHTML

•XHTMLsingakatan dari Extensible HyperText Markup Language

•XHTML versi 1.0 diumumkan pada tahun 2000.

•Formulasi bahasa HTML sebagai aplikasi XML

•Konsisten dengan aturan penulisan XML

•XHTML mirip dengan HTML tidak ada perbedaan yang signifikan

•Dokumen XHTML sepenuhnya didukung semua program yang bisa membaca, menulis, atau mengedit dokumen XML yang sah.

•XML mendukung penambahan tag baru dengan relatif mudah.

Contoh XHTML

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Belajar XHTML</title>

</head>

<body>

Selamat BelajarXHTML!

</body>

</html>

PERBEDAAN HTML & XHTML

•Dokumen XHTML harus terbentuk dengan baik (wellformed) yaitu bahwa semua tag pembuka harus mempunyai tag penutup, mis ()

•Semua elemen dan atribut harus ditulis dengan huruf kecil.

•Untuk tag seperti dan <hr> yang tidak memiliki tag penutup, harus diberi notasi , <hr/>

•Nilai untuk atribut harus berada dalam tanda kutip.

•Atribut tanpa nilai tidak diijinkan lagi di XHTML. Setiap atribut harus mempunyai nilai.

•Beberapa tanda spasi atau karakter white space lain dalam string yang menyimpan nilai sebuah atribut digabungkan menjadi satu spasi saja.

•Atribut “name” untuk beberapa tag diubah menjadi atribut “id” sehingga penamaan menjadi konsisten untuk semua tag

•XHTML (seperti XML) adalah case sensitive,

•Format karakter dalam bentuk heksadesimal harus dimulai dengan &#x (dengan x kecil), misalnya 

ELEMEN HTML

•Dokumen HTML disusun oleh elemen-elemen.

•Elemenmerupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML.

•Contoh elemen : head, body, table, paragraf, dan list.

TAG HTML

•Tagdigunakan untuk menandai berbagai elemen dalam suatu dokumen HTML.

Syarat Penulisan Tag HTML

•Tag html diapit dua karakter kurung sudut

•Tag html secara normal selalu berpasangan

•Tag html tidak case sensitive

•Tag akhir tidak boleh bersilang dan harus berurutan.

APA ITU DOCTYPE?

•DOCTYPE bukanlah tag HTML

•DOCTYPEadalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.

•Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).

•DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.

•Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML,sebelum tag <html>

•Biasakan selalu menambahkan DOCTYPEke halaman web. Ini akan membantu browser untuk membuat halaman web/blog dengan benar

MACAM-MACAM DOCTYPE

•HTML 4.01 StrictDTD ini berisi semua elemen HTML dan atributnya, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan.

•HTML 4.01 TransitionalDTD ini berisi semua elemen HTML dan atributnya, TERMASUK presentasional dan elemen lama (seperti font). Framesets tidak diperbolehkan.

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

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

•HTML 4.01 FramesetDTD ini sama dengan HTML 4.01 Transitional, tapi memungkinkan penggunaan Frameset.

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

•XHTML 1.0 StrictDTD ini berisi semua elemen HTML dan atributnya, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

TAG-TAG DASAR HTML

•<html>Mendefinisikan bahwa dokumen HTML

•<head> tentang dokumen web yang ditampilkan

•<title> untuk menuliskan judul dari dokumen HTML

•<body> untuk section utama dalam dokumen HTML

• Paragraf

• Line Break atau ganti baris

•<h1>s/d<h6> Heading untuk judul dan sub judul

•<hr> Penggaris Mendatar

align:[left | center| right] default center

size:pixel(tebal garis, default 2)

width:panjang(lebar garis, pixel atau persen, default 100%) noshade (garis solid)

•Komentar pada HTML

FORMAT KARAKTER

Format terhadap karakter yang di tampilkan akan sangat

berguna untuk membuat sebuah dokumen HTML yang

menarik.

Pemformatan karakter mencakup beberap hal:

•Logical Format akan menerapkan layout dokumen secara logis dan terstruktur.

•Physical format adalah format terhadap fisik suatu font.

LOGICAL FORMAT

Tag-tag yang termasuk logical format adalah sbb:

•<cite> untuk menandai suatu kutipan (citation)

•<code> untuk menampilkan kode-kode program

• untuk memberi tekanan pada teks (emphasize)

•<kbd> untuk menandai suatu teks yang harus dimasukkan oleh user melaui keyboard

•<samp> untuk menandai suatu teks yang dimaksudkan sebagai contoh

• untuk menandai bagian yang terpenting dari suatu teks

•<var> untuk menampilkan nama variabel

•<dfn> untuk menandai sebuah subdefinisi dari daftar definisi.

PHYSICAL FORMAT

Tag-tag yang termasuk logical format adalah sbb:

• untuk menampilkan huruf tebal

• untuk menampilkan huruf miring

• untuk menampilkan garis bawah pada teks

•<tt> untuk menmpilkan huruf seperti huruf mesin ketik

•<strike> untuk menampilkan garis horizontal pada bagian tengah huruf

•<big> untuk menampilkan ukuran huruf yang lebih besar

• untuk menampilkan ukuran huruf yang lebih kecil

• untuk menampilkan subscript

• untuk menampilkan superscript(di cetak naik)

FORMAT TEKS

BLOCKQUOTE

•Fungsinya browser akan menampilkan teks menjorok ke dalam

PERFORMATTED TEXT <PRE>

•Fungsinya untuk menampilkan teks sama seperti yang ada ketikkan dalam dokumen HTML

KARAKTER KHUSUS

LIST

List item merupakan perintah yang di gunakan dalam

HTML untuk membuat daftar atau pengelompokkan kata

[list].

Unordered List (Bullet)

•<ul>: Digunakan membuat list dengan tanda bullet. Type Atribut yang menyertai yaitu:

–Circle (Default)

–Disc

–Square

SINGKATAN (AKRONIM)

•Tag <abbr> dan tag <acronym>

•Di gunakan untuk menyimpan data kepanjangan dari suatu singkatan yang di tampilkan dalam dokumen

•Atribut yang di gunakan title

•Contoh penulisannya :

<abbr title=“kepanjangannya”>singkatan</abbr>

<acronym title=“kepanjangannya”>singkatan</acronym>

TAG ADDRESS

•Salah satu elemen yang umum digunakan untuk menstandarkan penulisan alamat.

•Di awali dengan Tag <address> dan di akhiri dengan </address>

•Contoh :<address>STMIK AMIKOM Yogykarta Kampus Terpadu: Jl.Ring Road Utara Condong Catur Sleman Yogykarta</address>

ARAH TEKS

•Untuk mengubah teks dari kiri ke kanan (left to right –ltr) menjadi dari kanan ke kiri (right to left –rtl).

•Tag <bdo> -bidirectional override

•Merupakan tag di gunakan untuk mendefinisikan arah penulisan teks.

•Atribut: dir

•Contoh :

<bdo dir="rtl">Teknik Informatika</bdo>

Tag Disipkan atau Dihapus

•Koreksi terhadap suatu teks dapat di simulasikan / di perlihatkan dengan menggunakan tag <ins> dan tag <del> untuk menunjukkan hasil koreksi yang di sisipkan atau di hapus.

•Tag Sisipan <ins>

•Tag Hapus <del>

•Contoh :

Satu tahun adalah <del>lima belas</del>

<ins>dua belas</ins> bulan

FONT

•Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainnya.

Ukuran Font

•Atribut SIZE digunakan untuk mengatur ukuran font. Nilai font dimulai dengan nilai 1 untuk ukuran huruf terkecil dan nilai 7 untuk ukuran paling besar.

Jenis Font

•Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman, Verdana dan lain sebagainya.

Warna Font

•Atribut COLOR digunakan untuk mengatur warna font yang diinginkan. Untuk memberi nilai pada atribut color ada dua cara, yaitu :

1.Dengan menyebutkan nama warna seperti red, green dan blue.

2.Dengan menggunakan nilai RGB ( Red Green Blue ) dari satu warna misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk Blue.

Contoh :

Ini ukuran 1

Ini memakai font Arial

Ini Warna Biru

LINK HTML

•Hyperlink (anchor) Befungsi untuk menghubungkan ke internal ataupun eksternal halaman web

•Attribute elemen a yaitu : href, name, dan target.

•Sintaks:

•Ada 3 jenis link :

1.Link relatif

2.Link absolut

3.Link dalam dokumen sama

Perbedaannya hanya pada letak dokumen yang menjadi

linknya, berada pada komputer yang sama atau tidak.

LINK RELATIF

•Di buat apabila anda membuat suatu link pada page Anda ke page lain pada komputer yang sama.

•Tidak memerlukan alamat internet yang lengkap.

•Jika dua page pada direktori yang sama.

•Contoh:<a href="file2.html">Selengkapnya</a>

LINK ABSOLUT

•Di buat apabila Anda membuat link ke page web lain yang berada pada web site lain di Internet.

•Contoh:

<ahref="http://www.amikom.ac.id">Selengkapnya</a>

LINK DALAM DOKUMEN SAMA

•Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang.

•Contoh:

<ahref="#tujuan">Link asal</a>

Artikelbebas

<aname="tujuan">Posisi tujuan</a>

Artikel bebas

MAILTO

•Untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak pasang)

•Contoh:

<ahref="mailto:okiarifin@amikom.ac.id">Kirim E-mail Cui</a>

Posted in: web2

.

Friday, March 28, 2014

Pertemuan 2

0 comments:

Post a Comment

INI KAMPUSKU

INFO KAMPUS