HTML Scripting Tingkat Dasar

(1)

Modul

6

HTML Scripting – Tingkat Dasar

Tujuan :

 Memahami dan dapat menggunakan konsep HTML

 Memahami dan mengenal lebih jauh mengenai HTML 5

 Memahami dan dapat menggunakan tag dasar dalam HTML

6.1 Definisi HTML

HTML adalah sekumpulan kode logika (markup) yang diapit oleh tag (tanda kurung siku) untuk mengatur bagaimana penampilan sebuah dokumen web dan kandungan informasinya. Pemrograman HTML berbeda dengan pemrograman Pascal yang kalian sedang pelajari. HTML tidak butuh variabel layaknya Pascal dan pemrograman lainnya. HTML lebih dititk beratkan untuk bagaimana mengatur format dan tata letak sebuah web page.

- HTML disajikan dalam web browser oleh web server

- HTML pada umumnya berisi informasi ataupun interface, dan umumnya HTML yang ditampilkan di client bukan merupakan murni source code asli.

- HTML bisa hasil dari representasi bahasa pemrograman server side seperti PHP, JSP, NET, ruby dll

Seperti contohnya, jika kita membuka sebuah halaman index sebuah web, misalnya "index.php", tetapi jika dilihat di source code nya hanya merupakan sekumpulan kode HTML.

Aturan penulisan baku HTML sekarang diatur oleh sebuah organisasi Internasional bernama W3C. Misalnya sebuah web harus dilengkapi minimal elemen head dan body. Untuk menandai elemen, kita menggunakan tag (diawali <, diakhiri >), sedangkan untuk menandai komen digunakan tanda slash bintang (diawali /*, diakhiri */). Secara umum, digambarkan sebagai berikut

Tag dapat mempunyai atribut, yang digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Misalnya :

<head>

/*… informasi tentang dokumen, judul webpage, script selain HTML (seperti javascript, CSS)… */

</head> <body>

/*…konten web/ segala sesuatu yang akan ditampilkan di browser diletakkan disini… */

</body> </html>

(2)

Ket : body = elemen tag HTML bgcolor = atribut

red = nilai

Sedangkan yang tanpa atribut seperti bold <b>, italic <i>, dll.

Dengan source kode diatas, maka di halaman web akan berwarna merah, dengan tulisan “tes” bercetak tebal.

6.2 HTML5

HTML5 adalah next generation dari HTML 4.01 / XHTML 1.x. HTML5 akan menjadi standar baru HTML, XHTML dan HTML DOM. HTML5 merupakan hasil kerjasama dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group.

Browser modern kebanyakan sudah mendukung HTML5, seperti Safari, Opera 10.6, Mozilla Firefox 3.5, Google Chrome 6.0, dll. Selain itu banyak website yang telah menggunakan HTML 5, seperti Youtube dan Vimeo yang tidak lagi menggunakan flash dalam menampilkan video melainkan menggunakan syntag. Beberapa fitur baru yang ada di HTML5 :

 Elemen Canvas

Untuk menggambar objek di halaman web tanpa menggunakan flash maupun aplet java. Berikut adalah tag untuk membuat canvas

dan canvas tidak memiliki kemampuan untuk menggambar sendiri. Menggambar semua harus dilakukan didalam JavaScript.

 Elemen audio dan video

Dengan elemen ini, plugin pemutar audio dan video tidak dibutuhkan lagi karena sudah ada tag khusus dan codec OGG sudah langsung mengenalinya, sehingga akan menjadi ancaman tersendiri untuk Adobe Flash dan Ms Silverlight.

Video Format

Format IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG 4 9.0+ No No 5.0+ 3.0+

WebM No 4.0+ 10.6 6.0+ No

 Ogg = Ogg files with Theora video codec and Vorbis audio codec

 MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec

 WebM = WebM files with VP8 video codec and Vorbis audio codec <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>

(3)

Contoh

Audio Format

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis No Yes Yes Yes No

MP3 Yes No No Yes Yes

Wav No Yes Yes Yes Yes

 Local offline storage

Local storage ini bukan sekedar cookies biasa. Fitur ini mampu menyimpan data dalam ukuran besar sekaligus. Misalnya jika kamu sedang membuka Feed situs-situs favorit di Google Reader, kamu bisa membaca seluruh isi Feed langganan kamu dalam offline mode.

 Konten elemen baru

Seperti article, footer, header, nav, section, calendar, date, time, email, url, search 6.3 Format Content dalam HTML

Dalam menulis HTML diperlukan pemformatan yang sesuai sehingga ada pemisahan antara satu kata, kalimat , paragraf dengan yang lainnya. Berikut beberapa format untuk konten teks webpage.

<source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

</body> </html> <html> <body>

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>

</body> </html>

(4)

a. Heading

Adalah format teks tertentu yang digunakan sebagai judul dari suatu paragraph. Heading lebih tepat digunakan untuk tulisan berkedudukan sebagai judul atau sub bab. Ada 6 tingkatan heading. <h1> merupakan tingkatan dengan ukuran font paling besar, sedangkan <h6> sebaliknya.

Outputnya

b. Paragraph

Jika kita ingin menampilkan dokumen yang cukup panjang, misalnya pada suatu postingan blog, maka kita perlu pemisah antar kalimat yang biasa kita sebut paragraph, supaya hasil tulisan menjadi lebih rapih maka diberikan sebuah style dengan CSS.

Outputnya :

c. Break

Adalah tag yang digunakan untuk memenggal atau memotong kalimat atau konten HTML. Hasil yang diperoleh seperti kita menekan “enter” ketika mengetik pada dokumen. Penulisan brak yaitu <br>.

d. Horizontal Rule

Digunakan untuk membuat garis batas horizontal. Atribut yang dapat digunakan antara lain seperti align, width, size, noshade, color. Penulisan horizontal rule yaitu <hr>.

<h1>contoh heading 1l</h1> <h2>contoh heading 2</h2> <h3>contoh heading 3</h3> <h4>contoh heading 4</h4> <h5>contoh heading 5</h5> <h6>contoh heading 6</h6>  <html> <head> </head> <body> <h2>paragraph</h2>

<p>ini adalah sebuah paragraf. kita menggunakan tag paragraf jika kita ingin menuliskan sebuah dokumen yang cukup panjang</p> </body>

(5)

6.4 Format Text

Format text dalam HTML berfungsi menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dengan bentuk huruf tebal, miring, garisbawah dan semacamnya.

6.4.1 Font

Untuk mengatur huruf pda HTML. Namun pada HTML5 sudah tidak support lagi. Tetapi bisa menggunakan CSS.

6.4.1.1 Size

Untuk mengatur besarnya huruf, paling kecil 1 dan paling besar 7. Tetapi bisa juga menggunakan ukuran pixel dengan max tidak terbatas

6.4.1.2 Face

Untuk mengatur jenis huruf, bisa juga dituliskan lebih dari satu yang artinya mempunyai prioritas yang berbeda-beda. Misalnya diisi string jenis font (jenis font didalam tanda petik dua), seperti “Arial”, “Times New Roman” dan sebagainya. Atribut tersebut memiliki arti huruf yang ditampilkan berjenis Arial, jika tidak terdapat huruf Arial maka akan menjadi jenis Times New Roman. 6.4.1.3 Color

Untuk memberi warna pada font. Ada 2 cara yaitu, pertama menuliskan nama warnanya seperti red, green atau blue. Dan cara kedua dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna yang dinyatakan dalam angka hexadecimal.

<font size="5">teks ini sizenya 5</font> <br>

<font size="7">teks ini sizenya 7</font> <br>

<font face="Rockwell, Times New Roman">Jika browser tidak mendukung font Rockwell, maka akan tampil <br>

tulisan dengan font Times New Roman</font> <br><br>

<font color="FF0000">tulisannya jadi warna merah</font><br> <font color="00FF00">tulisannya jadi warna hijau</font><br>

(6)

6.4.2 Blockquote dan Address

Blockquote digunakan untuk menulis kutipan teks, sehingga tulisan akan menjorok kekanan layar browser. Sedangkan Address merupakan salah satu elemen yang umum di dalam suatu dokumen, untuk penulisan alamat perusahaan, personal atau instansi.

6.4.3 List

Berfungsi untuk menjabarkan point-point informasi. Pada HTML ada 2 buah jenis list yaitu ordered list <ol>, dan unordered list <ul>. Selain itu, list juga bisa digunakan sebagai dasar dalam pembuatan menu dengan menggabungkan CSS atau javascript.

 Ordered list (list terurut), penomeran menggunakan angka 1,2,3,4,…dst ataupun menggunakan sejumlah item dalam list tersebut.

 Unordered list, bisa diartikan seperti bulleted list dalam aplikasi “Office”, defaultnya berupa noktah.

 Neste list. Merupakan unordered list yang digunakan secara bersarang, maksudnya di dalam list ada list lagi.

<p>Ini contoh petikan/ quotation <blockquote cite="http://www.w3.org">

untuk kutipan yang berasal dari luar website </blockquote>

Sedangkan untuk petikan tanpa tag paragraph break cukup dengan <q>gausah pake petik </q>

</p> <address>

contoh penulisan tag address <br>

<a href="mailto:boisme@rocketmail.com">Email me</a><br> ITTELKOM BANDUNG, Jl. Telekomunikasi Terusan Buah Batu<br> Phone: +022xxxxxx

(7)

6.4.4 Link

Link berfungsi untuk memberikan sebuah hubungan kepada sebuah konten ataupun dokumen lain baik dalam satu web page ataupun berbeda bahkan ke seluruh konten yang berada pada satu jaringan yang sama. Atribut href sering dipakai. Href merupakan kepanjangan dari hypertext reference.

Ketika link ditekan, maka halaman baru akan muncul sesuai value yang dipilih. Dengan menggunakan attribute target, kita bisa menentukan value nya yang berfungsi Valuenya yaitu :

 _blank : target URL akan dibuka di tab/ jendela baru

 _self : target URL akan dibuka di tab yang sama

 _parent : target URL akan dibuka di tab/ dokumen sebelumnya.

 _top : target URL akan dibuka di tab/ jendela secara full Ada beberapa jenis link, yaitu sbb:

6.4.4.1 Link Absolute

Digunakan untuk membuat link ke web page lain yang berada di situs lain. 6.4.4.2 Link Relative

Digunakan untuk membuat link ke web page lain yang berada di dalam web tersebut, atau masih berada dalam public_html / htdocs yang sama.

6.4.4.3 Bookmark

Digunakan untuk menghubungkan dengan bagian-bagian tertentu yang ada pada dokumen yang sama. Ada 2 tag yang diperlukan dalam mebuat bookmark, yaitu tag untuk

<ol>ordered list <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ol> <ul>unordered list <li>HTML</li> <li>CSS</li> <li>PHP</li> </ul> <ul>nested list

<li>bahasa pemrograman web <ul>

</li>

<li>bahasa pemrograman aplikasi <ul> <li>Pascal</li> <li>C</li> </ul> </li> </ul>

(8)

link <a href=”#nama_bookmark”>ke bookmark</a>, dan tag untuk bookmarknya sendiri <a name=”#nama_bookmark”>test</a>

6.4.5 Media pada HTML

Memasukkan konten media selain image sangat memungkinkan pada HTML, dengan menggunakan tag <embed> maka beberapa media yang didukung oleh browser memungkinkan untuk dimunculkan mulai dari sebuah file music sampai sebuah file office. Konten yang dimainkan atau dijalankan dalam tag embed sebenarnya merupakan sebuah perantara, konten atau file tersebut tidak langsung dijalankan dengan browser tetapi dijalankan dengan sebuah plugins yang terinstall pada browser. Misalnya plugin media player, flashplayer, pdf , dll. Beberapa atribut pada tag embed:

 src : alamat resource untuk di masukkan ke tag embed.

 width : lebar area untuk resource yang akan dimunculkan.

 height : tinggi area untuk resource yang akan ditampilkan.

 align : posisi pada embed misalnya left, right, center.

 name : nama untuk identitas objek.

 pluginspage : identitas untuk menandakan dimana software untuk plugins yang di embedkan.

 pluginurl: url untuk instalasi plugin.

 hidden : untuk menyembunyikan atau tidak objek.

 href : membuat link pada objek.

 target: target pada objek yang akan di tampilkan.

 autostart: jika konten atau objek yang ditampilkan berjenis music atau film maka akan otomatis dijalankan (start).

 loop dan playcount : jumlah untuk perulangan pada musik atau film.

 volume : untuk menset besar suara.

 control : untuk menampilkan posisi peletakan control

 controller : untuk menampilkan control pada objek.

 mastersound : untuk mengidentifikasikan music yang akan digunakan dalam

<!LINK>

<!absolute link>

<a href="http://ittelkom.ac.id" title="ITTELKOM BANDUNG" target="_top">kampus saya</a> <br>

<!relative link><br><br>

<a href="admin/index.html">akan tampil index.html di folder admin</a> <br>

<!bookmark>

(9)

beberapa grup objek.

 starttime : seberapa lama musik atau video dimainkan.

 endtime : untuk menset waktu untuk memberhentikan. Contoh penggunaan embed untuk file music atau video :

Contoh penggunaan embed untuk file pdf:

Contohpenggunaan embeduntuk file flash:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/s wflash.cab#version=6,0,40,0 WIDTH="550" HEIGHT="400" id="myMovieName">

<PARAMNAME=movie VALUE="myFlashMovie.swf">

<PARAMNAME=quality VALUE=high><PARAMNAME=bgcolorVALUE=#FFFFFF>

<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF

WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

Sebagai keterangan pemakaian tag <object> berfungsi sebagai Flash ActiveX control pada beberapa browser yang support.

JURNAL:

1. Adakah perbedaan yang paling mencolok antara HTML dan HTML 5?

2. Carilah lebih banyak lagi referensi mengenai HTML 5 dan gunakan HTML 5 dalam membuat suatu situs !