HTML 5
Dosen Pembimbing : Aji Setiawan,MMSi
Disusun Oleh :
Nama : Linda Soraya Septiana
NIM : 13230077
Mata Kuliah : Pemrograman Berbasis Web
FAKULTAS TEKNIK
TEKNIK INFORMATIKA
UNIVERSITAS DARMA PERSADA
2013/201
BAB I
PENDAHULUAN
A. Latar Belakang
HTML adalah akronim dari Hyper Text Mark up Language adalah sebuah bahasa untuk mendeskripsikan halaman web. HTML sendiri bukan tergolong sebagai bahasa pemograman, karena sifatnya yang hanya memberikan tanda ( marking up ) pada suatu naskah teks untuk mendeskripsikan suatu halaman web. Sebuah bahasa mark up adalah serangkaian tag markup.
Singkatnya, HTML adalah sebuah bahasa yang kita gunakan untuk membuat suatu halaman web.
Sejak keluar HTML tahun 1990, HTML ini terus mengalami perubahan dan disempurnakan, apalagi sejak dibentuknya W3C (world wide web concorcium).
Tugas dan tujuan W3C ini adalah : Kegiatan utama W3C adalah untuk mengembangkan protokol dan pedoman yang memastikan pertumbuhan jangka panjang untuk Web. Standar W3C mendefinisikan bagian penting dari apa yang membuat World Wide Web bekerja.
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Ada beberapa versi HTML, dan yang terbaru adalah HTML5.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.
Dari paragraf di atas jelas sekali bahwa HTML5 adalah penyempurnaan dari standard yang sebelumnya pernah dikeluarkan oleh W3C.
Banyak sekali tambahan dari standard sebelumnya. Diantaranya adalah adanya tambahan element seperti : Canvas, Video, Audio. Juga penambahan pada tag di web form serta misalnya section dll.
Prinsipnya lebih memudahkan untuk dibaca dan dimengerti oleh manusia.
Dari sisi user, user tidak pernah tahu apakah halaman web yang sedang dia lihat itu HTML5 atau bukan, kecuali user tersebut melihat source code di dalamnya.
Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5.Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.
B. Permasalahan
Berdasarkan latar belakang di atas, maka permasalahan yang akan dibahas dalam makalah ini adalah Kenggulan dan Perbedaan HTML5 dengan HTML Versi Sebelumnya.
C. Tujuan
Tujuan penulisan makalah ini adalah untuk mengetahui tentang HTML5.
BAB II
LANDASAN TEORI
A. Sejarah HTML5
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."
Proses standardisasi W3C
Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0. , hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.
Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:
Markup
Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
API baru
Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). Antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :
• Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.
• Timed media playback
• Media penyimpanan luring (aplikasi web luring). Lihat Web Storage
• Penyuntingan dokumen
• Drag and Drop
• Cross-document messaging
• Manajemen sejarah kunjungan penjelajah web
• Tipe MIME dan penanggung jawab protokol registrasi.
Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :
• Geolocation
• Web SQL Database, media penyimpanan database lokal.
• API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).
• Web Speech API
B. Keunggulan dan Perbedaan HTML5 dengan Versi Sebelumnya
HTML 5 dirancang oleh W3C untuk meneruskan kesuksesan HTML 4 dan XHTML 1.
Nampaknya HTML 5 akan menjadi favorit seperti yang terjadi pada DOCTYPE.
sudah banyak situs-situs yang mulai memakai dan bereksperimen dengan HTML5 dan CSS 3. HTML 5 Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
Dulu, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan berupa canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus
Embed Audio Video Secara Langsung
Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Dapat dimengerti oleh browser lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:
1. Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4
2. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala
3. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail
4. Nav: Koleksi link ke halaman lain
5. Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya
Dalam HTML5 banyak kelebihan nya dibanding dengan versi HTML yang sebelum nya. Terdapat juga fitur fitus canggih pada HTML5. Dengan HTML5, pengembangan aplikasi web adalah lebih mudah dibandingkan sebelumnya.
BAB III
PEMBAHASAN
A. Penerapan HTML5 Pada Teknologi Web Masa Kini
Menurut perkembangan saat ini, penerapan HTML5 awalnya dibagi menjadi beberapa spesifikasi yang dapat memisahkan dokumen standar untuk menjaga spesifikasi terfokus. HTML5 dianggap lebih cerdas untuk mengatur dan mengedit beberapa fitur dokumen web masa kini. Dengan cara ini, satu masalah pada markup kecil tidak akan mempengaruhi markup secara keseluruhan isi dari tampilan HTML.
Para ahli di berbagai penjuru dunia telah berkontribusi bersama-sama pada milis atau tulisan mereka sendiri untuk membahas penerapan fitur HTML5. Penerapan fitur HTML5 yang mereka bahas mengacu pada set asli fitur, termasuk Geolocation, dan berbagai API pada HMTL5. Fiturdalam HTML5 sangat banyak dan berguna pada pengelolaan halaman web. Sampai sekarang ini, fitur pada HTML5 yang dapat dimanfaatkan oleh developer terbagi menjadi beberapa bagian seperti berikut:
Canvas (2D and 3D)
Cross-document messaging
Geolocation
Audio and Video
Forms
MathML
Microdata
Server-Sent events
Scalable Vector Graphics (SVG)
WebSocket API and protocol
Web origin concept
Web storage
Indexed database
Application Cache (Offline Web Apps)
Web Workers
Drag and Drop
XMLHttpRequest Level 2
Bagi programer dan developer yang berkecimpung di dunia web development. HTML5 adalah sebuah jawaban teknologi yang efektif dan tepat untuk membangun aplikasi berbasis web. Meskipun HTML5 saat ini masih dalam tahap pengembangan, namun tingkat kepercayaan dan pemakaian HTML5 tetap meningkat signifikan.
B. Pengunaan Sintaks HTML5
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML.
Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara – cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan kita pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
C. Sintaks dan Struktur dasar HTML5
1.1 Struktur dasar HTML5
Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan body, kedua elemen tersebut dipisahkan oleh beberapa tag. pola dasar HTML dibawah ini
<html>
<head> “Informasi Tentang Dokumen HTML” </head>
<body> “Informasi yang akan ditampilkan dalam web Browser” </body>
</html>
Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka <html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah dua buah elemen atau section yaitu:
a. “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,
Pada elemen ini biasanya berisikan:
o Title, merupakan judul dokumen
o Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web.
Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name, URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires, keywords, revist, refresh maupun language
b. Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web tersebut, untuk elemen keduanya adalah:
1. “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.
2. Atribut HTML, adapun contoh atributh dan kegunaannya sebagai berikut:
• <DFN> untuk menandai sebuah subdefinisi dari daftar ataupun table definisi
• <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat, paragraph ataupun dokumen
• <VAR> untuk menampilkan nama variable
• <CITE> Menandai kutipan
• <CODE> Menampilakan sebuah kode pemrograman
• <EM> Penekanan sebuah kalimat
• <SAMP> untuk membuat contoh ataupun sample didalam sebuah dokumen
• <KBD> menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard
• <B> Bold membuat tampilan tebal huruf, kata ataupun kalimat
• <I> Italic membuat tampilan miring
• <U> Underline membuat tampilan garis bawah
• <TT> Membuat tampilan jenis huruf menyerupai huruf mesin ketik
• <STRIKE> membuat garis tengah pada sebuah kalimat
• <BIG> memperbesar ukuran huruf
• <SMALL> memperkecil ukuran huruf
• <SUP> menampilkan superscript
• <SUB> menampilkan subscript
• <FONT> merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color. Size, style dan lainnya
• <P> Paragrah untuk membuat sebuah paragraph
• <BR> Line break berfungsi untuk mengganti baris
• <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf
• <PRE> Preformatted Text berfungsi menampilkan text apa adanya
• <CENTER> membuat sebuah text berada di posisi tengah
• <LEFT> membuat sebuah text berada di posisi kiri
• <RIGHT> membuat sebuah text berada di posisi kanan
• <Basefont size=”pixel”> mengubah ukuran sebuah huruf
• <HR> Horizontal rule berfungsi untuk membuat garis bawah
• <OL> membuat penomoran pada daftar
• <UL> Membuat sebuah tanda pada daftar tanpa nomor (bullet)
• <LI> tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan di beri penomoron ataupun tanda bullet
• <TABLE> membuat sebuah table
• <TR> Membuat row atau baris didalam table <TH>, membuat judul kolom di table <TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table
• Rowspan, Colspan merupakan pengaturan merge cell pada atribut table
• <FORM> untuk membuat form
• <A HREF=”url link”>Hypertext</A> Hyper Link
• <IMG SRC=”url img”> insert image
Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan tag penutup atributh tersebut </…..>.
1.2 Penjelasan akan Atribut dan Syntak Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body.
Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:
<HTML>
<HEAD> Deskrisi dokumen </HEAD>
<BODY> Isi dokumen </BODY>
</HTML>
Keterangan:
Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan.
1.2.1 Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama. Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY> <H1>Heading Level 1</H1> </BODY>
</HTML>
1.2.2 Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY> <P ALIGN=”right”> <P ALIGN=”center”> <P ALIGN=”left”> </P> </BODY>
</HTML>
1.2.3 Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY> <H3>Sesuatu yang tidak perlu dicoba</H3> <BLOCKQUOTE> </BLOCKQUOTE> </BODY>
</HTML>
1.2.4 Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY> <PRE> </PRE> </BODY>
</HTML>
1.2.5 Begin Row (BR)
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY> <P> Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
1.2.6 Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY> <FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
1.2.7 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 sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY> <FONT SIZE=5> <FONT FACE = “Arial”>Arial, contoh AC Milan <P> <FONT FACE = “Verdana”>Verdana , contoh Persebaya <P> <FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>
</BODY>
</HTML>
1.2.8 Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5> <FONT COLOR = “red”>PSM Makassar<P> <FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>
<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>
</BODY>
</HTML>
1.2.9 Link
Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk
itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut.
Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah: <A HREF = “#nama_anchor”>teks pada browser</A>. Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY> <A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A> <BLOCKQUOTE> <P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A> <P>Ayala <P>Ambrosini <P>Albertini <P>Boban <P> <A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A> </BLOCKQUOTE> <P><A NAME=”abbiati”>Abbiati</A> <BLOCKQUOTE> <P>Kiper ketiga timnas Italia runner up Euro 2000 <BR>Kiper utama U-21 juara Piala Eropa U-21 <BR>Kiper utama AC Milan juara Seri-A 1998-1999 </BLOCKQUOTE> <P><A HREF=”#lengkap”>kembali ke atas</A>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Link tujuan</TITLE>
</HEAD>
<BODY> <P ALIGN=”center”> Maaf, hanya sedikit <BR>Chamot <BR>Dida <BR>Shevchenko <BR><A HREF=”contohlink.html”>kembali</A>
</BODY>
</HTML>
1.3 Membuat Kode Dasar HTML Table
Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode html seperti dibawah ini:
<table>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga kode html nya sekarang menjadi:
<table>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
</body>
</html>
1.3.1 Menambah heading dan paragraph
Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga H6, yang paling tidak penting.
Berikut adalah cara menambah sebuah heading yang penting:
<h1> Sebuah heading yang penting </h1>
<h2> Sebuah heading yang sedikit kurang penting </h2>
Setiap paragraf yang anda tulis harus diawali dengan tag <p>. Tag </p> merupakan opsi, tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:
<p> Ini adalah paragraf pertama </p>
<p> Ini adalah paragraf kedua.</p>
1.3.2 Menambahkan perhatian pada halaman dengan gambar – gambar
<img>
1.3.3 Menambahkan link ke halaman lain.
Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik dapat membawa anda langsung ke seberang dunia!
Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file “peter.html” di folder/direktori yang sama dengan file HTML yang sedang anda edit::
Ini adalah link ke:
<a href=”peter.html”>halamannya Peter</a>.
Teks antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah hal yang umum bagi keterangan tersebut untuk diberi garis bawah berwarna biru.
Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan “../” sebelumnya, sebagai contoh:
<a href=”../mary.html”>halamannya Mary</a>
Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari subdirektori tersebut diikuti sebuah ”/” setelahnya, sebagai contoh:
<a href=”friends/sue.html”>halamannya Sue</a>
Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau turun direktori sesuai kebutuhan, sebagai contoh”:
<a href=”../college/friends/john.html”>halamannya John</a>
Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain bernama ”college”, dan kemudian sebuah subdirektori dengan nama “friends” untuk sebuah file dengan nama “john.html”.
Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink ke www.alimustofa.org anda perlu menuliskan: Ini adalah sebuah link menuju:
<a href=”http://www.alimustofa.org/”>W3C</a>
Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh, berikut ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman utama / depan:
<a href=”/”><img src=”logo.gif” alt=”home page”></a>
Contoh ini menggunakan “/” untuk menghubungi direktori asal, yang mana adalah home page.
1.3.4 Tiga jenis daftar
HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet (bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>, sebagai contoh:
<ul>
</ul>
<li>list item pertama</li> <li>list item kedua</li> <li>list item ketiga</li>
Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:
<ol> <li>list item pertama</li> <li>list item kedua</li> <li>list item ketiga</li>
</ol>
1.3.5 HTML memiliki sebuah head dan body
Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File) anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> … </html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> … </head> mengandung judul, dan informasi style dan script, sementara <body> … </body> mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste
ke text editor untuk menciptakan halaman anda sendiri:
<html>
<head>
<title> ganti dengan judul dokumen anda </title>
</head>
<body> ganti dengan isi dokumen anda </body>
</html>
BAB IV
PENUTUP
Kesimpulan
• HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web. Sesungguhnya Hypertext Markup Language (HTML versi 5) justru tidak dibuat untuk mempublikasikan informasi di web, namun oleh karena kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web.
• File HTML sebenarnya adalah file teks biasa yang selain berisi informasi yang hendak ditampilkan kepada pengguna, juga mempunyai perintah-perintah untuk mengatur tampilan data tersebut. Browserlah yang memiliki kuasa penuh dalam menterjemahkan perintah-perintah yang ada dalam struktur file berbasis program HTML.
• Perkembangan dunia informatika yang semakin canggih pada saat ini menawarkan kemudahan bagi setiap orang dalam membantu menyelesaikan segala kebutuhan dan pekerjaannya. Internet sebagai salah satu bukti nyata dengan adanya perkembangan ini. Maka dari itu, para programmer berusaha untuk merancang beberapa pemrograman di internet. HTML5 adalah salah satu unsur penting dalm pemrograman di internet. Di dalam HTML5 terdapat terdapat komponen-komponen dokumen HTML5 dan elemen-elemen dasar HTML5.
• Untuk itu, bagi para programmer, khususnya pemula yang ingin membuat HTML5 yang baik, sebaiknya sebelum membuat HTML5 harus mengetahui definisi, strukntur dasar, komponen-komponen HTML5 dan elemen-elemen dasarnya. Dan seperti yang telah disampaikan sebelumnya, selain itu ia juga harus menguasai langkah-langkah membuat HTML5 beserta tampilannya yang menarik yang akan diberikan kepada pengguna nantinya. Semoga makalah yang telah disusun ini dapat menjadi pedoman bagi pemula sebelum membuat HTML5.
DAFTAR PUSTAKA
http://id.wikipedia.org/wiki/HTML5 . 16-01-2014
http://sabukhitam.com/blog/topic/latest-news/html5-yuk-berkenalan-dan-belajar-html5.html . 16-01-2014
http://www.w3schools.com/html/html5_intro.asp . 16-01-2014
http://wellysan99.blogspot.com/2013/03/kelebihan-html-5.html . 16-01-2014
http://djepalloge.blogspot.com/2013/02/perbedaan-antara-html5-dengan-versi.html . 16-01-2014
http://db-tigabelas.blogspot.com/2013/01/perbedaan-html5-dan-versi-sebelumnya_9585.html . 16-01-2014
http://one-inspirations.blogspot.com/2013/10/makalah-hypertext-markup-language-5.html . 16-01-2014
Tidak ada komentar:
Posting Komentar