tugas 1 html

8

Click here to load reader

Upload: rizky-riyandika

Post on 19-Nov-2015

93 views

Category:

Documents


12 download

DESCRIPTION

aaa

TRANSCRIPT

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    1

    HyperText Markup Language (HTML)

    Apa yang dimaksud dengan file HTML? HTML merupakan kependekan dari Hyper Text markup Language Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup Tag markup memberitahukan browser bagaimana harus menampilkan

    sebuah halaman File HTML harus memiliki ekstensi htm atau html File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai

    HyperText Markup Language (HTML) adalah sebuah bahasa markup yangdigunakan untuk membuat sebuah halaman web, menampilkan berbagai informasidi dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yangditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yangterintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolahkata dan disimpan kedalam format ASCII normal sehingga menjadi home pagedengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnyabanyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML(Standard Generalized Markup Language), HTML adalah sebuah standar yangdigunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakanstandar Internet yang didefinisikan dan dikendalikan penggunaannya oleh WorldWide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM denganBerners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalahlembaga penelitian fisika energi tinggi di Jenewa).

    Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenalisetiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudianmengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuahbahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakansistemnya ini sebagai Generalized Markup Language atau GML.

    Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentangdokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya namalain, yaitu SGML ( Standard Generalized Markup Language ).

    ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untukpemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraanISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untukmenjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web.Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembangXHTML yang merupakan pengembangan dari HTML.

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    2

    PendahuluanHTML berupa kode-kode tag yang menginstruksikan penjelajah web untuk

    menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakanfile HTML dapat dibuka dengan menggunakan penjelajah web seperti Mozilla Firefoxatau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembukasurel ataupun dari PDA dan perangkat lunak lain yang memiliki kemampuanbrowser. Dengan menggunakan perintah-perintah HTML memungkinkan penggunauntuk melakukan tugas-tugas berikut:

    Menentukan ukuran dan alur tulisan. Mengintegerasikan gambar dengan tulisan. Membuat Pranala. Mengintegerasikan berkas suara dan rekaman gambar hidup. Membuat form interaktif.

    HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalamdokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode ataulebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisanditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukandengan cara: TAMPIL TEBAL. Tanda digunakan untuk mengaktifkaninstruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengantanda untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan padapenggambaran komponen-komponen struktur dan formating di dalam halaman webdaripada menentukan penampilannya.Sedangkan penjelajah web digunakan untukmenginterpretasikan susunan halaman ke gaya built-in penjelajah web denganmenggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki kekomputer yang menampilkan halaman web. Salah satu hal Penting tentangeksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antarkomputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihattampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasisWindows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yangsama sebagaimana tampilan yang terlihat pada pengguna yang menggunakanProduk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebutdapat melihat semua halaman web yang telah diformat dan berisi Grafika danPranala.

    Menyunting Format TulisanHTML memungkinkan kita untuk menyunting tampilan atau format berkas yang

    akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalammenentukan format berkas adalah :

    Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuranyang dapat digunakan untuk judul, heading dan sebagainya.

    Kita dapat menampilkan tulisan dalam bentuk cetakan tebal Kita dapat menampilkan sekelompok kata dalam bentuk miring Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan

    hasil ketikan mesin ketik Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    3

    Markup/TandaSecara garis besar, terdapat 4 jenis elemen dari HTML:

    1. structural. tanda yang menentukan level atau tingkatan dari sebuah tulisan(contoh, Golf akan memerintahkan browser untuk menampilkan"Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1.

    2. presentational. tanda yang menentukan tampilan dari sebuah tulisan tidakpeduli dengan level dari tulisan tersebut (contoh, boldface akanmenampilkan bold. Tanda presentational saat ini sudah mulai digantikan olehCSS dan tidak direkomendasikan untuk mengatur tampilan tulisan.

    3. hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebutatau pranala ke dokumen lain (contoh, OKEPONSEL akan menampilkanOKEPONSEL sebagai sebuah hyperlink ke URL tertentu).

    4. Elemen widget yang membuat objek-objek lain seperti tombol (), list(), dan garis horizontal (), Konsep hypertext pada HTMLmemungkinkan kita untuk membuat link pada suatu kelompok kata atau fraseuntuk menuju ke bagian manapun dalam World Wide Web.

    Ada tiga macam link yang dapat kita gunakan :1. Link menuju bagian lain dari page2. Link menuju page lain dalam satu web site3. Link menuju resource atau web site yang berbeda.

    Selain markup presentational , markup yang lain tidak menentukan bagaimanatampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untukmenentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagaigantinya digunakan Cascading Style Sheets.

    Contoh dokumen HTML sederhana

    Judul Halaman

    Ini halaman pertama saya. Teks ini ditebalkan

    HEADBagian header dari document HTML di apit oleh tag di

    dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halamanpada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untukmemberi mark suatu web site. Browser menyimpan titile sebagai bookmark dan

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    4

    juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagaikeyword. Header juga memuat tag META yang biasanya di gunakan untukmenentukan informasi tertentu mengenai document HTML, anda bisa menentukanauthor name, keywords, dan lainyan pada tag META.

    Contoh:

    Elemen BodyBagian BODY, yang dinyatakan dengan tag , merupakan

    tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akanditampilkan pada browser.

    Elemen HTML ini dimulai dengan tag pembuka: , isi dari elemen HTMLadalah teks ini ditebalkan, elemen HTML diakhiri dengan tag penutup: . Fungsitag adalah untuk mendefinisikan sebuah elemen HTML yang harus ditampilkandengan huruf tebal.

    TagBerikut poin-poin yang akan membantu kamu mengingat dan memahami

    pengertian Tag HTML: Tag HTML digunakan untuk menandai (mark-up) elemen HTML Tag HTML berada di antara dua karakter penanda berikut < dan > Karakter penanda itu disebut dengan tanda kurung siku Tag HTML umumnya selalu berpasangan seperti dan Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup Teks di antara kedua tag tersebut disebut isi elemen Tag HTML tidak bersifat case sensitif, memiliki arti yang sama dengan

    HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari

    suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalamtag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (). Tag biasanya merupakan suatu pasangan yang disebut dengan : 1. Tagawal, dinyatakan dalam bentuk 2. Tag akhir, dinyatakan dalam bentuk

    Format : teks yang ditampilkan Contoh : untukmenampilkan teks dalam format teks miring Teks ini terlihat miring di browser andadengan perintah HTML Teks ini terlihat miring di browser Anda.

    Tag HTML yang paling penting adalah tag-tag yang mendefinisikan judul,paragraf dan ganti baris.

    JudulJudul didefinisikan dengan menggunakan tag sampai >h6>.

    mendefinisikan huruf judul yang paling besar, dan yang terkecil. HTMLsecara otomatis akan menambahkan baris kosong sebelum dan sesudahjudul. Contoh:

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    5

    Ini Judul

    Ini Judul

    Ini Judul

    Ini Judul

    Ini Judul

    Ini Judul

    ParagrafParagraf didefinisikan dengan menggunakan tag . Sama seperti

    judul, HTML secara otomatis akan menambahkan baris kosong sebelum dansesudah paragraf. Contoh:

    Ini adalah sebuah paragraf

    Ini paragraf lainnya

    Ganti BarisTag digunakan pada saat kamu ingin membuat baris baru, tapi

    belum ingin ganti paragraf. Tag akan membuatkan sebuah baris barubuat kamu dimanapun kamu letakkan tag itu. Tag adalah tag yangkosong. Nah, karena itu dia tidak punya tag penutup seperti misalnya .Contoh:

    Ini adalah sebuah paragaraf dengan ganti baris Kamu akan makin sering melihat penulisan tag dengan cara begini:

    . Karena tag tidak memiliki tag penutup, maka tag tersebutmelanggar salah satu aturan dasar dalam penulisan HTML ke depannya(XHTML yang berbasis XML), di mana semua elemen harus ditutup.

    Menuliskan penggantian baris dengan cara ini menjamin bahwafile HTML kamu akan kompatibel dengan XML maupun cara penulisan HTMLdi masa datang.

    Menuliskan Komentar dalam HTMLTag komentar digunakan untuk menyisipkan sebuah komentar dalam

    kode sumber HTML. Sebuah komentar akan diabaikan oleh browser. Kamubisa menggunakan komentar untuk menjelaskan kode yang kamu bikin, dantentu saja hal ini akan membantu kamu saat kamu perlu melakukanperubahan pada kode kamu kapan-kapan. Perhatikan bahwa kamu perlumenuliskan tanda seru setelah kurung buka, tetapi tidak sebelum kurungtutupnya. Contoh:

    Ingat hal-hal berikut! Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br) Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda

    kurung siku

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    6

    Isi elemen berada di antara tag pembuka dan tag penutup Beberapa elemen HTML tidak memiliki isi elemen Beberapa elemen HTML tidak memiliki tag penutup

    Tag HTML DasarBerikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu

    akan mempelajari masing-masing secara lebih detil terutama yang menyangkutatributnya.Tag - Description

    - Mendefinsikan sebuah dokumen HTML

    - Mendefinisikan isi utama

    to - Mendefinisikan judul 1 sampai 6

    - Mendefinisikan paragraf

    - Menyisipkan sebuah baris

    - Mendefinisikan garis horisontal

    - Bikin komentar

    AtributeTag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik

    dari tag tersebut. Misalnya : digunakan untuk membuat rata kiri suatu paragraf. Tagyang digunakan adalah dan atribut yang menyertainya adalah ALIGN dengan nilaileft. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

    Entitas karakterBeberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil

    (

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    7

    Beberapa entitas karakter yang sering dipakai:

    Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

    Link HTMLSebuah link adalah sebuah alamat yang merujuk ke dokumen atau alamat

    lainnya di Internet. Menurut saya sebenarnya konsep link inilah yang akhirnya benar-benar membuat web menjadi sangat bermanfaat dan akhirnya menjadi sangat besarseperti sekarang ini. Orang sangat mudah merujuk ke referensi lain yang semuanyatersedia online. Hyperlinks, Anchors, dan Links

    Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet.Hyperlink biasanya merujuk ke sebuah halamanHTML, sebuah gambar, file suara, movie, dll. Sedangkan anchor (bahasaIndonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikantujuan hyperlink dalam sebuah dokumen. Untuk membuat hyperlink dan anchorkita menggunakan elemen HTML anchor .Contoh sintaks Link:

    Teks LinkTag pembuka berisi atribut link tersebut. Isi elemen (Teks link)

    mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

  • EKO HERMANTOTEKNIK ELEKTRO

    3332081493

    8

    Sejarah dari standar HTML HTML 2.0 (RFC 1866) disetujui sebagai standar 22 September 1995, HTML 3.2 14 Januari 1996, HTML 4.0 18 Desember 1997, HTML 4.01 (minor fixes) 24 Desember 1999, ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)

    15 Mei 2000. HTML 5 masih dalam draft pengerjaan Januari 2008.

    Referensi Wendy willard (2006). HTML. ISBN 979-0-07-226378-7. David willard (2005). Crash Course. ISBN 0-07-142242-0. Andi (2001). Desain Web dengan Microsoft FrontPage 97. Wahana Komputer

    & Andi Yogyakarta. ISBN 979-533-521-9. Shelly woods (2001). Introductory Concepts and Techniques. Gex publising

    service. ISBN 978-1429-2720-6. Steven E. Callihan (2006). HTML 4 in a Weekend. USA. ISBN 1-59200-059-2. http://prothelon.com/caramembuatwebsite/tutorial-html/ http://id.wikipedia.org/wiki/Hypertext_markup_language