1. Belajar HTML 5 Sebagai Wujud Perkembangan Teknologi
Makalah
untuk melengkapi tugas matakuliah
Teknologi Informasi dan Komunikasi
Oleh
Utia Fauziah Yahya
NIM 1102412021
TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
TAHUN 2013
2. BAB 1
PENDAHULUAN
A. LATAR BELAKANG
Kebutuhan akan informasi di dunia maya membuat para developer website
berlomba-lomba menyajikan berbagai macam layanan sehingga para pengguna
akan betah berkunjung ke dalam websitenya. Dari masa-masa ke masa teknologi
website mengalami perkembangan yang begitu pesatnya dan kini bahkan
memberalihkan aplikasi dektop yang selama ini kita kenal menjadi aplikasi
berbasis web.
Banyak aplikasi yang selama ini hanya sebatas akses di komputer dan harus
diinstal terlebih dahulu, kini aplikasi website memberikan ruang pada kita untuk
mencicipi aplikasi misanya game online, sehingga tidak perlu lagi yang namanya
instalasi kita cuma butuh yang namanya koneksi internet.
Perkembangan website tersebut di atas, tidak lepas yang namanya script/tag
HTML (Hypertext Markup Language). Bagi para web development mungkin
sudah familiar yang namanya HTML ini karena untuk membangun website yang
dinamis para web development harus memahami konsep-konsep dasar dari
HTML. Banyak orang bilang HTML itu bahasa yang mudah sederhana dan
struktur dan sering pula di anggap remeh karena kemampuan HTML itu sendiri,
jauh di bawah Java Script (client side) apalagi di bantingkan dengan script server
side seperti PHP, ASP, ASPX, dan bahasa lain sebagainya.
B. RUMUSAN MASALAH
Dalam makalah ini secara garis besar rumusan masalahnya adalah :
a. Apa saja yang mendasari HTML?
b. Bagaimana struktur HTML?
c. Atribut-atribut apa saja saat kita ingin membuat sebuah web?
3. BAB II
PEMBAHASAN
a. Pengertian HTML 5
HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C
(World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan
utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini
dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh
komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk
menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML
juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia,
World Wide Web Consortium (W3C) dan Web Hypertext Application
Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009
untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas.
Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan pluginplugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri.
Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lainlainnya.
b. Dasar-Dasar HTML
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 tagtag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar
HTML kita dapat di akses oleh browser. Mendesain HTML 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:
4. 1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe
Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML
ke dalam dokumen HTML.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama
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.
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 harus melakukan cara-cara
konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua
adalah dasar dari segala bentuk HTML yang akan pelajari, karena dengan cara
itulah akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa
dipakai pada bahasa HTML.
c. Struktur dasar HTML
1. Struktur dasar HTML
HTML merupakan sebuah bahasa pemrograman yang berisikan perintah
kepada browser yang telah terinstal pada computer client, Bahasa pemograman ini
terdapat sebuah elemen, tag dan attribute didalam perintahnya. Secara umum Web
dokumen terdiri dari dua elemen ataupun section yaitu head dan body, kedua
elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda
lihat sebuah pola dasar HTML dibawah ini
<html>
5. <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
•
“HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head
</head>,
Pada elemen ini biasanya berisikan
- Title, merupakan judul dokumen
-
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
-
Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi
browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain
6. pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web
tersebut, untuk elemen keduanya adalah
- “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada
elemen ini berisikan informasi dan pengaturannya yang akan ditampilkan dalam
browser.
Di dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita
pelajari, 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
7. •
<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)
8. •
<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 </…..>, untuk
lebih jelasnya dilain waktu saya akan mencoba bahas satu persatu atributh
tersebut dan akan saya lengkapi dengan syntax dan contohnya kompleksnya.
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
9. </BODY>
</HTML>
d. Elemen baru di HTML 5
Demi mewujudkan struktur halaman web yang lebih baik semantik dan
aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
section serupa seperti h1-h6.
article bisa berupa entri blog atau tulisan konten.
aside menyajikan konten pelengkap.
header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan
sebagainya.
Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman
FAQ) dapat digunakan untuk menyajikan percakapan.
yang fenomenal adalah penggunaan elemen figure, video, audio, source,
embed, canvas dan elemen terkait berkas multimedia lainnya.
e. Atribut baru di HTML 5
Dikenalkan pula beberapa atribut baru, seperti:
atribut media, ping pada elemen pranala,
autofocus, placeholder, required, autocomplete dan sebagainya, terkait
elemen input dan form
reversed pada elemen ol untuk urutan besar ke kecil.
Beberapa kelebihan yang dijanjikan pada HTML5:
Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML)
danXML.
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
10. Integrasi („inline‟) dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine.
f. Browser yang Mendukung HTML
Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini
yaitu opera 10)
Safari (mulai dari versi 3.1)
FireFox (Mulai dari FireFox 3 )
Google Chrome (Mulai dari versi 3)
Internet Explorer (Mulai dari versi 8)
1. HTML5 Semantic
HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam
HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen
baru digunakan untuk mengurangi pemakaian tag <div>.
Elemen-elemen baru yang ditambahkan pada HTML5 adalah:
Tag
Keterangan
<article>
Menspesifikasikan konten yang bersifat
independen, seperti artikel, blog post,
forum post, dan sejenisnya.
<aside>
Digunakan untuk sebuah subkonten.
Biasanya
digunakan
di
dalam
tag
<article>.
<bdi>
Untuk teks yang tidak boleh terikat pada
arah teks-elemen induknya
<command>
Sebuah button, atau radiobutton, atau
checkbox.
<details>
Untuk
menjelaskan
detail
tentang
sebuah dokumen atau sebagian dari
11. dokumen.
<summary>
Digunakan pada sebuah ringkasan dan
sejenisnya di dalam tag <details>
<figure>
Untuk mengelompokkan sekumpulan
section, biasanya berupa video.
<figcaption>
Berisi
caption/keterangan
yang
ditempatkan di dalam tag <figure>
<footer>
Digunakan sebagai footer dari sebuah
halaman
<header>
Digunakan sebagai header dari sebuah
halaman
<hgroup>
Digunakan untuk sekumpulan heading
<mark>
Digunakan pada teks yang akan di
highlight
<meter>
Digunakan untuk pengukuran, dimana
nilai maksimal dan minimal telah
ditentukan
<nav>
Digunakan untuk sekumpulan navigasi
<progress>
Membuat Progress bar
<ruby>
Digunakan untuk anotasi ruby
<rt>
Untuk menjelaskan anotasi ruby
<rp>
Menunjukkan elemen jika browser tidak
mendukung ruby
<section>
Untuk sebuah section di dalam halaman.
Seperti Bab, Footer, dan sebagainya
<time>
Untuk
mendefinisikan
waktu
dan
tanggal
<wbr>
Word Break. Untuk memisah suatu kata
bila diperlukan.
12. 2. HTML5 Audio
Salah satu fitur baru HTML5 yang paling mencengangkan adalah
disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai
yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player.
Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg
ke dalam halaman web kita.
Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="music/FromHere.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Sehingga akan menampilkan output seperti berikut :
·
Mozilla version 9.0.1
Google chrome Version 22.0.1229.94
13. Opera version 12.10 beta RC
Penjelasan dari tags diatas:
< <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.
·
<source>, digunakan untuk mengambil source file yang akan dimainkan
audionya.
Atribut pada audio
·
Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah
langsung dimainkan secara otomatis atau tidak.
·
Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio
(volume, seeker, play/pause button).
·
Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.
·
Src, digunakan untuk mendefinisikan source audio yang dimainkan.
Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV,
dan OGG. Berikut adalah data dukungan browser terhadap audio.
Browser
MP3
Wav
Ogg
Internet Explorer 9 Ya
Tidak
Tidak
Firefox 4.0
Tidak
Ya
Ya
Google Chrome 6
Ya
Ya
Ya
Apple Safari 5
Ya
Ya
Tidak
14. Opera 10.6
Tidak
Ya
Ya
3. HTML5 Video
Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika
selama ini kita harus menggunakan flash player untuk memasukkan konten video,
pada HTML5 kita tidak perlu lagi menggunakannya.
Untuk menambahkan elemen video kita gunakan kode berikut
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="video/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Sehingga akan menampilkan output sebagai berikut :
·
Mozilla version 9.0.1
Google chrome Version 22.0.1229.94
15. Opera version 12.10 beta RC
4. HTML5 Canvas
Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan
kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga
sama seperti GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk
membuat objek di dalamnya, baik 2D maupun 3D.
Untuk membuat objek di dalam canvas kita gunakan kode berikut :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
17. Namun untuk keygen, dukungan browser saat ini belum memenuhi standar
keamanan, sehingga lebih aman untuk para web programmer menggunakan
enkripsi pada server-side seperti md5, sha1, dan base64_encode.
·
Form Datalist
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit"></form>
</body>
</html>
Sehingga kita dapatkan hasil output seperti berikut :
·
Mozilla version 9.0.1
Google chrome Version 22.0.1229.94
18. Opera version 12.10 beta RC
·
Form Output
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50">100 +
<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
Sehingga kita dapatkan hasil output seperti berikut :
·
Mozilla version 9.0.1
19. Google Chrome Version 22.0.1229.94
Opera version 12.10 beta RC
g. Referensi Tag HTML
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>
20. </BODY>
</HTML>
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>
21. 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>
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).
23. <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>
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>
24. <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>
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>
25. <FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>
</BODY>
</HTML>
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>
26. </HTML>
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
27. <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>
28. <P ALIGN=”center”> Maaf, hanya sedikit
<BR>Chamot
<BR>Dida
<BR>Shevchenko
<BR><A HREF=”contohlink.html”>kembali</A>
</BODY>
</HTML>
h. 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:
29. <table>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
</body>
</html>
a. Menambah heading dan paragraf
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>
b. Menambahkan perhatian pada halaman dengan gambar – gambar
30. <img
c. 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”.
31. Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan
alamat lengkap Web (umumnya dinamakan URL), sebagai contoh untuk melink
ke www.w3.org anda perlu menuliskan:
Ini adalah sebuah link menuju<a href=”http://www.w3.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.
d. 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>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ul>
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:
32. <ol>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ol>
Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>, tetapi
tag penutup </li> merupakan opsi dan dapat di hiraukan.
Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan
anda untuk membuat daftar suatu hal dan penjelasannya. Daftar ini diawali
dengan sebuah tag <dl> dan diakhiri dengan </dl> Tiap hal diawali dengan
sebuah tag <dt> dan tiap penjelasannya diawali dengan sebuah tag <dd>. Sebagai
contoh:
<dl>
<dt>hal pertama</dt>
<dd>penjelasannya</dd>
<dt>hal kedua</dt>
<dd>penjelasannya</dd>
<dt>hal ketiga</dt>
<dd>penjelasannya</dd>
</dl>
33. Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat
bahwa daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>
list item kedua
<ul>
<li>list pertama yang disisipkan</li>
<li>list kedua yang disisipkan</li>
</ul>
</li>
<li>list item ketiga</li>
</ol>
Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang
lebih panjang..
e. 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>
34. 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:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> ganti dengan judul dokumen anda </title>
</head>
<body>
ganti dengan isi dokumen anda
</body>
</html>
35. BAB III
PENUTUP
A.
Simpulan
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.Di dalam HTML terdapat dua bagian
dokumen yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek
web/HTML sekolah dengan menggunakan notepad ini dimulai dengan pembuatan
bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam proyek
ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan
kita buat.
