Modul HTML 5 Programming

Modul HTML 5 Programming
MATA KULIAH HTML 5

PROGRAMMING/IWCD (KOMPUTER II)
FAKULTAS ILMU KOMPUTER
SISTEM INFORMASI
2019
1. HTML
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam
HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan
text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang
dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai
bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan
jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
Tag HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang
dikenai perintah tag berada diantara tag pembuka dan tag penutip. Objek disini dapat berupa text,
gambar, maupun video. Penulisan tag berada di antara dua kurung siku : “<” dan “>”.
HTML bisa dibagi menjadi tiga bagian utama : HTML, HEAD dan BODY .
<html>
<head>
</head>
</body>
</body>
<html>
Susunan HTML
<head>
<title>
Kepala
Judul Homepage
<head>
<title>
</head>
Homepage
<body>
Isi . . . Teks
Tubuh
Isi . . . Tabel
<body>
Isi . . . Audio, Video, dll
</body>
Berikut adalah format dasar penulisan tag HTML :
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>
• <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf .
• </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda (/)
Contoh tag HTML adalah <head>, <title>, <body>, <img> dan lain-lain.
Tag HTML tidak bersifat case sensitive <body> sama dengan <BODY>
Bentuk umum penulisan tag HTML adalah :
<ELEMENT ATTRIBUTE = value>
Dimana :
• Element = Nama Tag
• Attribut = Attribut dari Tag
• Value = Nilai dari Attribut
Contoh : <BODY BGCOLOR = “BLUE”>
LATIHAN
Latih1.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Universitas Subang</title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>
</body>
</html>
Latih2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="green">
<p>Document HTML yang pertama</p>
</body>
<html>
Latih3.html
<!DOCTYPE html>
<html>
<body background="logo.png">
</body>
<html>
Latih4.html
<!DOCTYPE html>
<html>
<h1>Heading SATU</h1>
<h2>Heading DUA</h2>
<h3>Heading TIGA</h3>
<h4>Heading EMPAT</h4>
<h5>Heading LIMA</h5>
<h6>Heading ENAM</h6>
</body>
<html>
Latih5.html
<!DOCTYPE html>
<html>
<h1 align="left">Heading rata kiri</h1>
<h2 align="right">Heading rata kanan</h2>
<h3 align="center">Heading rata tengah</h3>
</body>
<html>
Latih6.html
<!DOCTYPE html>
<html>

<body bgcolor="#00FF00">
<p align="left">Format dari Paragraf ini rata KIRI</p>
<p align="right">Format dari Paragraf ini rata KANAN</p>
<p align="center">Format dari Paragraf ini rata TENGAH</p>
<p align="justify">Format dari Paragraf ini rata KIRI-KANAN</p>
</body>
<html>
Latih7.html
<!DOCTYPE html>
<html>

<body>
TEBAL garis = 10 pixel
<hr size="10">
LEBAR garis 75% dari lebar layar browser dan perataannya rata TENGAH.
<hr width="75%" align="center">
LEBAR garis 75% dari lebar layar browser dan perataannya rata KIRI.
<hr width="75%" align="left">
TEBAL garis 10 pixel LEBAR garis 75% rata KANAN warna BIRU.
<hr size="10" width="75%" align="right" color="blue">
</body>
<html>
Latih8.html
<!DOCTYPE html>
<html>

<body>
<pre>
Tampilan ini akan ditampilkan sesuai format aslinya :
-----------------------
1. Belajar HTML.
2. Belajar CSS.
3. Belajar JS.
+++++++++++++++++++++++
</pre>
</body>
</html>
Latih9.html
<!DOCTYPE html>
<html>

<body>
Peripheral Komputer :
<ul type="circle">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ul>
<ul type="disc">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ul>
<ul type="square">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ul>
</body>
</html>
Latih10.html
<!DOCTYPE html>
<html>

<body>
Peripheral Komputer :
<ol type="1">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ol>
<ol type="a">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ol>
<ol type="A">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ol>
<ol type="i">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ol>
<ol type="I">
<li>Monitor</li>
<li>CPU</li>
<li>Printer</li>
<li>Mouse</li>
</ol>
</body>
</html>
Latih11.html
<!DOCTYPE html>
<html>
<head>
</head>
<marquee><h1>Universitas Subang</h1></marquee>
<marquee direction="left">Universitas Subang</marquee>
<marquee direction="right">Universitas Subang</marquee>
<marquee direction="up">Universitas Subang</marquee>
<marquee direction="down" behavior="alternate">Universitas
Subang</marquee>
</body>
<html>
Latih12.html
<!DOCTYPE html>
<html>
<head>
<title>Ini Gambar Saya</title>
</head>
<body>
<img src="logo.png">
<img src="logo.png" align="center">
<img src="logo.png" align="right">
<img src="logo.png" width="100%" height="100%">
</body>
<html>
Latih13.html
• Cari di internet tentang tag-tag dalam HTML
• Nama file : tugas2_kelas_npm_namasendiri.doc
2. FONT
FONT digunakan untuk merubah tampilan font, dengan tag ini kita bisa merubah tampilan atau style
tulisan, warna dan ukuran tulisan.
Tag FONT memiliki 3 Opsi Attribut diantaranya Color, Size, dan Face
Attribute :
1. Face : Digunakan untuk menentukan jenis teks.
2. Size : Digunakan untuk menentukan ukuran teks
3. Color : Digunakan untuk menentukan warna teks, Warnanya berupa nama warna dalam
Bahasa Inggis atau kode hexadecimal.
Tag ini memiliki tag penutup yaitu “</font>”. Cara menggunakannya yaitu dengan menyisipkan
teks diantara tag pembuka dan penutup yang sudah diberi attribute dan value.
Contoh : <font attribute=”value”>contoh font</font>
Latih14.html
<!DOCTYPE html>
<html>
<body>
<font face="verdana" size="5" color="red">Contoh Penggunaan Tag
Font</font>
</body>
<html>
Latih15.html
<!DOCTYPE html>
<html>
<body>
<font size="5">Contoh Penggunaan Tag Font</font>
</body>
<html>
Latih16.html
<!DOCTYPE html>
<html>
<body>
<font color="red">Contoh Penggunaan Tag Font</font>
</body>
<html>
Latih17.html
<!DOCTYPE html>
<html>
<body>
<font color="ff0000">Contoh Penggunaan Tag Font</font>
</body>
<html>
Latih18.html
<!DOCTYPE html>
<html>
<body>
<font face="impact" size="6" color="blue">Contoh Penggunaan Tag
Font</font>
</body>
<html>
3. LINK
Link atau Hyperlink adalah sebuah text yang ketika teks tersebut di-klik oleh user, maka user
tersebut akan dibawa ke halaman lainnya, baik itu menuju ke halaman website yang berbeda maupun
ke website yang sama.
Untuk menambahkan link, HTML menyediakan sebuah tag yang bernama tag <a>. Tag <a>
merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki atribut href
(singkatan dari hypertext reference) yang berisi alamat atau url yang dituju. Berikut syntax dasar
penulisan tag link :
<a href=”url_tujuan”>Teks Link</a>
Contoh penggunaan tag link <a> berikut ini :

Latih19.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar link HTML</title>
</head>
<body>
<h1>Contoh Penggunaan tag link</h1>
<h2>Ini link saya <a href="http://detik.com">Detik.com</a></h2>
</body>
<html>
Alamat Absolut dan Alamat Relatif
Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, seperti:
href=”http://www.duniailkom.com/belajar_html.html”, atau href=”http://www.wikipedia.org”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan alamat
lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini.
Jenis alamat ini disebut Alamat relatif.
Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file hello.html pada folder
yang sama dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”. Berikut adalah kode
HTMLnya:
Latih20.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Ini link saya <a href="latih21.html">Hello</a></h2>
</body>
<html>
Latih21.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello</h1>
</body>
<html>
Attribut tag <a> : target
Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah
link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.
Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman
web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut
target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target:
Latih22.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Ini link saya <a href=”http://detik.com”
target=”_blank”>Detik.com</a></h2>
</body>
<html>
4. TABLE
Table digunakan untuk menampilkan data dalam bentuk tabel
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>,
dan tag <td>:
• Tag <table> digunakan untuk memulai tabel

• Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
• Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Contoh penggunaan tag table <table> berikut ini :

Latih23.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan
luar.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai
cellspacing=”2″, maka web browser akan menampilkan jarak sebesar 2 pixel diantara garis
border table.
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi text
tabel itu sendiri.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai
cellpadding=”2″, maka web browser akan membuat jarak sebesar 2 pixel dari border sisi dalam
tabel dengan isi text tabel.
Latih24.html
<!DOCTYPE html>
<HTML>
<BODY>
<B>Penggunaan Cellpadding.</B><BR>
<TABLE width="85%" align="center" border="1" cellpadding="0">
<TR>
<TD>Baris1, kolom1</TD>
</TR>
</TABLE>
<BR>
<TABLE width="85%" align="center" border="1" cellpadding="7">
<TR>
</TR>
</TABLE>
<B>Penggunaan Cellspacing.</B><BR>
<TABLE width="85%" align="center" border="1" cellspacing="0">
<TR>
</TR>
</TABLE>
<BR>
<TABLE width="85%" align="center" border="1" cellspacing="7">
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau
menggabungkan beberapa kolom atau baris menjadi satu, sehingga satu unit kolom atau baris ini
menjadi lebih lebar.
Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak
kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Latih25.html
<!DOCTYPE html>
<HTML>
<BODY>
<B>COLSPAN</B><BR>
<TABLE width="85%" align="center" border="1">
<TR>
<TD COLSPAN="3">Element 1</TD>
</TR>
<TR>
<TD>Element 2</TD>
<TD>Element 3</TD>
<TD>Element 4</TD>
</TR>
</TABLE>
<BR>
<B>ROWSPAN</B><BR>
<TABLE width="85%" align="center" border="1">
<TR>
<TD ROWSPAN="3">Element 1</TD>
<TD>Element 2</TD>
</TR>
<TR>
<TD>Element 3</TD>
</TR>
<TR>
<TD>Element 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5. FORM
Form identik dengan formulir, yaitu untuk memasukan data (nilai) Contohnya komentar tamu ke
suatu situs web (guestbook).
Kapasitas dari form hanya menyediakan media entry data dan mengirimkannya (request) tetapi tidak
untuk menerima dan mengolah. Yang akan menangani penerimaan dan pengolahan data secara lebih
lanjut adalah web scripting yang bersifat server side. Contohnya : ASP, PHP
Form dalam HTML merupakan jembatan komunikasi antara client dengan server. Untuk melakukan
validasi pengisian elemen form, dibutuhkan JavaScript karena HTML tidak memiliki perintah untuk
pengujian validasi dari nilai elemen form.
Untuk membuat tampilan elemen objek form tersusun rapi, maka dapat digunakan tabel.
Aturan penulisan :
<FORM name=”x” method=”GET | POST” action=’proses.asp’>
…..
….. elemen2 tag-tag data form
…..
</FORM>
Name → (optional), nama untuk form yang berlaku

Method → GET = GET digunakan jika informasi yang dikirim menjadi satu dengan URL
POST = POST digunakan jika informasi dikirim secara terpisah dengan URL
Action → URL/File yang digunakan untuk menangkap dan mengolah nilai (data) yang dikirimkan.
Contoh bentuk form :
Latih26
Latih27 Latih28
Latih26.html
<!DOCTYPE html>
<HTML>
<BODY>
<FORM method="get" action="">
<CENTER>
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>Nama </td>
<td>:</td>
<td colspan="3"><input type="TEXT" name="nama"></td>
</tr>
<tr>
<td>Usia</td>
<td>:</td>
<td><input type ="RADIO" name="usia" value="A">Kurang dari 20</td>
<td><input type ="RADIO" name="usia" value="B">Antara 20 s/d 40 </td>
<td><input type ="RADIO" name="usia" value="C">Diatas 40</td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="3"><input name="aksi" type="submit" value="Kirim"></td>
</tr>
</table>
</CENTER>
</FORM>
</BODY>
</HTML>
Latih27.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Form</TITLE>
</HEAD>
<BODY>
<FORM action="" method="get" name="form1">
<TEXTAREA name="text1">isi text disini</TEXTAREA>
<BR> <BR>
Musik Favorite Anda :
<SELECT name="Musik">
<Option value="Jazz">Jazz</Option>
<Option value="Rock">Rock</Option>
<Option value="Classic">Classic</Option>
<Option value="Dangdut">Dangdut</Option>
</SELECT>
</FORM>
</BODY>
</HTML>
Latih28.html
<!DOCTYPE html>
<HTML>
<BODY>
<FORM method="get" action="">
Nama : <INPUT type="text" name="nama"> <br>
Password : <INPUT type="password" name="pass"> <br>
Jenis Kelamin :
<INPUT type="radio" name="jk" value="pria"> Pria
<INPUT type="radio" name="jk" value="wanita"> Wanita <br>
Tingkat Pendidikan :
<SELECT name="tp">
<OPTION value="sd">Sekolah Dasar</OPTION>
<OPTION value="smp">Sekolah Menengah Pertama</OPTION>
<OPTION value="sma">Sekolah Menengah Atas</OPTION>
<OPTION value="pt">Perguruan Tinggi</OPTION>
</SELECT> Hobby :
<INPUT type="checkbox" name="hobby" value="mancing"> Memancing
<INPUT type="checkbox" name="hobby" value="baca"> Membaca <br>
Komentar : <TEXTAREA name="komentar"></TEXTAREA> <br>
<INPUT type="submit" name="aksi" value="Kirim">
<INPUT type="reset" name="aksi" value="Reset">
</FORM>
</BODY>
</HTML>
Latih29.html
Buatlah tampilan berikut!
FORM PENDATAAN MAHASISWA SISTEM INFORMASI
Nomor Pokok Mahasiswa :

Nama Mahasiswa :
Alamat :
Tempat, tanggal lahir : ,
Password :
Retype Password :
Jenis Kelamin :  Pria  Wanita
Hobby : Membaca Memancing Lain2
Tingkat Pendidikan :
Komentar :
Kirim Reset
6. CSS
CSS = Cascading Style Sheets, digunakan untuk menampilkan style dari content document HTML
dengan lebih menarik dan meminimalkan penggunaan tag-tag HTML sehingga dapat menghemat
waktu pengerjaannya dan lebih cepat proses loadingnya oleh web browser. Cara membuat style dari
content adalah dengan menggunakan property dan memberikan nilai yang diinginkan terhadap
properti tersebut.
CSS dapat diimplementasikan dalam 3 cara, yaitu :
1. Inline Style
➢ Yaitu menjadi atribut dalam tag HTML, atributnya adalah style.
Caranya :
Style = ”property-1:nilai-1;property-2:nilai-2;
2. Internal Style Sheet atau Embed Style

➢ Yaitu berada di dalam tag <HEAD>
Caranya :
<STYLE type = ”text/css”>
.........
.........
</STYLE>
Style yang telah dibuat tersebut dapat kita gunakan dalam tag-tag HTML.
3. External Style Sheet

➢ Yaitu style CSS berada terpisah pada sebuah file (.CSS)
Untuk pemanggilannya dalam dokumen-dokumen HTML, dilakukan dengan
menggunakan perintah LINK REL.
Caranya :
<LINK REL=”stylesheet” type=”text/css” href=”namafile.css”>
Sintaks dari style untuk Internal atau External CSS :
Selector {
Property-1: nilai-1;
Property-2: nilai-2;
:
Property-n: nilai-n;
}
Keterangan :
- Selector tag HTML yang akan diberikan style CSS
- Property atribut yang ingin ditetapkan pada tag HTML
LATIHAN
Latih30.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Penggunaan CSS --- INLINE Style</TITLE>
</HEAD>
<BODY style="color:blue">
<P style="text-align:center; color:red; font-weight:bold">HTML Dengan
CSS</P>
<P>Fakultas Ilmu Komputer</P>
<P>Universitas Subang 2018</P>
</BODY>
</HTML>
Latih31.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Penggunaan CSS -- INTERNAL Style</TITLE>
<STYLE type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {font-size: 70px}
p {background-color: rgb(250,0,255)}
</STYLE>
</HEAD>
<BODY>
<H1>Header 1 ... Universitas Subang</H1>
<P>Penulisan Universitas Subang menggunakan paragraf</P>
</BODY>
</HTML>
Latih32.html
<HTML>
<HEAD>
<TITLE>Penggunaan CSS -- INTERNAL Style </TITLE>
body {
background-image: url('logo.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</STYLE>
</HEAD>
<BODY>Fakultas Ilmu Komputer Universitas Subang
</BODY>
</HTML>
Latih33.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Penggunaan CSS -- INTERNAL Style </TITLE>
body { background: #00ff00 url('logo.png') no-repeat fixed center; }
</STYLE>
</HEAD>
<BODY>
Fakultas Ilmu Komputer Universitas Subang
</BODY>
</HTML>
Latih34.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Grouping dalam CSS … lihat pada h1,h2,h3 </TITLE>
h1,h2,h3 {color:green; font-family:verdana;}
p {color:red}
</STYLE>
</HEAD>
<BODY>
<p>Universitas Subang</p>
</BODY>
</HTML>
Latih35.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>PRIVATE CLASS....style berbeda utk tag yg sama</TITLE>
p.kecil {text-transform: lowercase}
p.besar {text-transform: uppercase}
p.awalkapital {text-transform: capitalize}
</STYLE>
</HEAD>
<BODY>
<P class="kecil">universitas subang</P>
<P class="besar">universitas subang</P>
<P class="awalkapital"> universitas subang</P>
</BODY>
</HTML>
Latih36.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>PUBLIC CLASS....style yg sama utk tag yg berbeda</TITLE>
.besar {text-transform: uppercase; color:red}
.kecil {text-transform: lowercase; color:blue}
</STYLE>
</HEAD>
<BODY>
<P class="besar">HTML DAN CSS</P>
<H1 class="besar">Halo...universitas subang</H1>
<H1 class="kecil">Halo...universitas subang</H1>
<H2 class="besar">Halo...universitas subang</H2>
</BODY>
</HTML>
Latih37.html
<!DOCTYPE html>
<HTML>
<HEAD>
ul { list-style-image: url('logo2.png') }
</STYLE>
</HEAD>
<BODY>
<H1>Universitas Subang </H1>
<UL>
<LI>Fakultas Ilmu Administrasi</LI>
<LI>Fakultas Teknik</LI>
<LI>Fakultas Hukum</LI>
<LI>Fakultas Ilmu Komputer</LI>
<LI>Fakultas Ilmu Komunikasi</LI>
<LI>Fakultas Agrobisnis dan Rekayasa Pertanian</LI>
<LI>Fakultas Keguruan dan Ilmu Pendidikan</LI>
</UL>
</BODY>
</HTML>
Latih38.css
body { background-color: yellow; color:blue}
h1 { background-color:#00ff00}
h2 { background-color:blue}
p { background-color:rgb(250,0,255); color:yellow}
ul { list-style-image: url('logo.png') }
Latih38.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Penggunaan CSS -- EXTERNAL Style </TITLE>
<LINK REL="stylesheet" type="text/css" href="latih38.css" >
</HEAD>
<BODY>
<H1> Header 1 ... Universitas Subang </H1>
<H2> Header 2 ... Universitas Subang </H2>
<P> Penulisan Universitas Subang menggunakan paragraf <br> </p>
Penulisan Universitas Subang TANPA menggunakan paragraf
<UL>
<LI>Fakultas Ilmu Administrasi</LI>
<LI>Fakultas Teknik</LI>
<LI>Fakultas Hukum</LI>
<LI>Fakultas Ilmu Komputer</LI>
<LI>Fakultas Ilmu Komunikasi</LI>
<LI>Fakultas Agrobisnis dan Rekayasa Pertanian</LI>
<LI>Fakultas Keguruan dan Ilmu Pendidikan</LI>
</UL>
</BODY>
</HTML>
7. JAVASCRIPT
JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language.
Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya
dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google
Chrome dan Mozilla Firefox. JavaScript bersifat case sensitive .
Client Side : Semua sintaks dan perintah program dijalankan/diproses di web browser. Contoh :
Java Script, HTML
Server Side : Semua sintaks dan perintah program yang diberikan akan dijalankan/diproses di web
server, kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML. Contoh : PHP
Sintaks penulisan JavaScript :

<script language=”javascript”>
:
:
</script>
Setiap statement/perintah diakhiri dengan titik-koma (;).
Untuk komentar/keterangan, gunakan // atau /* .... */
Cara penulisan JavaScript, dapat ditempatkan pada :

1. Body, dalam dokumen HTML
<BODY>
:
</script>
</BODY>
2. Header, dalam bentuk function

<HEAD>
function namafungsi(parameterinput)
{ .
:
}
</script>
</HEAD>
3. External JavaScript,
→ yaitu terpisah dari file HTML dan disimpan pada sebuah file javascript (.js)
Untuk pemanggilannya dengan menggunakan perintah :
<SCRIPT language=”javascript” src=”namafile.js”> </SCRIPT>
LATIHAN
Latih40.html
<!DOCTYPE html>
<HTML>
<BODY>
<SCRIPT language="javascript">
//latihan pertama JavaScript
document.write("Selamat Datang<BR>");
document.write("di Latihan Pertama ");
document.write("Menggunakan JavaScript");
</SCRIPT>
</BODY>
</HTML>
Latih41.html
<!DOCTYPE html>
<HTML>
<BODY>
document.bgColor="blue";
document.fgColor="white";
document.title="Universitas Subang";
document.write("Fakultas<b>IlmuKomputer</b>di<i>Universitas Subang</i>");
</SCRIPT>
</BODY>
</HTML>
Latih42.html
<!DOCTYPE html>
<HTML>
<BODY>
document.write("<strong>Selamat Belajar JavaScript</strong> di");
var nama = "Fakultas" ;
nama = nama + " Ilmu "
nama += "Komputer"
document.write("<p style='color:magenta; font-weight:bold'>"+nama+
"</p>");
</SCRIPT>
</BODY>
</HTML>
Latih43.html
<!DOCTYPE html>
<HTML>
<BODY>
var nama="Tazkia Sasabila Ardan";
var nt=70; np=80;
/* Menghitung nilai akhir */
na = (nt+np)/2;
document.write("Nilai Akhir Perancangan Web<BR>------------------");
document.write("<BR>Hallo <b>"+nama+"</b>");
document.write("<BR>Nilai = "+na);
</SCRIPT>
</BODY>
</HTML>
Latih44.html
<!DOCTYPE html>
<HTML>
<BODY>
var kata = "Universitas Subang ";
document.write(kata.big()+"<BR>");
document.write(kata.bold()+"<BR>");
document.write(kata.fontcolor("blue")+"<BR>");
document.write("Panjang Kata adalah "+kata.length+"<BR>");
document.write("Karakter ke-0 adalah "+kata.charAt(0)+"<BR>");
document.write("Kata menjadi huruf besar "+kata.toUpperCase()+"<BR>");
document.write("Kata menjadi huruf kecil "+kata.toLowerCase()+"<BR>");
document.write("<BR>"+kata.link("http://www.unsub.ac.id")+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Latih45.html
<!DOCTYPE html>
<HTML>
<BODY>
window.alert("Hallo...Selamat Datang");
angka = window.prompt("Masukkan sebuah angka?",0);
document.write("Angka favorit anda adalah =
<strong>"+angka+"</strong><BR>");
pilihjk = window.confirm("Jenis kelamin anda Pria?");
if (pilihjk)
{
document.write("Jenis kelamin anda PRIA");
}
else
{
document.write("Jenis Kelamin anda WANITA");
}
window.close();
</SCRIPT>
</BODY>
</HTML>
Latih46.html
<!DOCTYPE html>
<HTML>
<BODY>
var input = window.prompt("Masukan Karakter A atau B ","A");
switch(input)
{
case 'A': document.write("Salsabila Ardan"); break;
case 'B': document.write("Tazkia Ardan"); break;
default : document.write("Salah... HARUS diisi A/B");
}
</SCRIPT>
</BODY>
</HTML>
Latih47.html
<!DOCTYPE html>
<HTML>
<HEAD>
function hitung()
{
panjang = document.myform.p.value;
lebar = document.myform.l.value;
luas = panjang * lebar;
document.myform.luas.value = luas;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform">
Panjang = <INPUT type="text" name="p"><BR>
Lebar = <INPUT type="text" name="l"><BR>
<INPUT type="button" name="aksi"
value="HITUNG" onclick="hitung()"><BR>
Luas = <INPUT type="text" name="luas"><BR>
</FORM>
</BODY>
</HTML>
Latih48.js
function popup() {
alert("Hai Aku Ganteng")
}
Latih48.html
<!DOCTYPE html>
<HTML>
<HEAD>
<SCRIPT language="javascript" src="latih48.js"> </SCRIPT>
</HEAD>
<BODY>
<input type="button" onclick="popup()" value="Click Me!">
</BODY>
</HTML>
Latih49.html
<!DOCTYPE html>
<HTML>
<BODY>
hari = new
Array("Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu");
document.write("Awal pekan adalah hari "+hari[0]+"<BR>");
hariakhir=hari.length-1;
document.write("Akhir pekan adalah hari "+hari[hariakhir]+"<BR>");
document.write("Keseluruhan hari : <BR>");
tampung = hari.join("-");
document.write(tampung);
</SCRIPT>
</BODY>
</HTML>
Latih50.html
<!DOCTYPE html>
<HTML>
<HEAD>
function timer()
{
var waktu = new Date();
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
var strwaktu = (jam<10) ? "0" + jam : jam;
strwaktu += (menit<10) ? ":0" + menit : ":" + menit;
strwaktu += (detik<10) ? ":0" + detik : ":" + detik;
document.waktusaya.txtwaktu.value=strwaktu;
setTimeout("timer()",1000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="waktusaya">
<INPUT type="text" name="txtwaktu">
</FORM>
<SCRIPT language="javascript"> timer() </SCRIPT>
</BODY>
</HTML>
Latih51.html
<!DOCTYPE html>
<HTML>
<HEAD>
var warna = new Array("red","yellow","green");
var count= 0;
function ganti()
{
count++;
if (count>=warna.length)
count=0;
document.bgColor = warna[count];
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" name="aksi" value="Perubahan Warna Dasar"
onclick="ganti()">
</BODY>
</HTML>
Latih52.html
<!DOCTYPE html>
<HTML>
<BODY>
nilai = 75;
document.write("Nilai = "+nilai);
if (nilai%2==0)
{
document.write("<BR>Bilangan Genap");
}
else
{
document.write("<BR>Bilangan Ganjil");
}
// contoh if ke 2
ket = (nilai>=60)?"Lulus":"Tidak Lulus";
document.write("<BR>Anda "+ket);
</SCRIPT>
</BODY>
</HTML>
Latih53.html
<!DOCTYPE html>
<HTML>
<BODY>
var nbatas = 75;
document.write("<H2>Pengulangan dengan FOR</H2>");
for(var i=0;i<nbatas;i++)
{
if (i%2==0)
{
document.write(i+", ");
}
}
document.write("<H2>Pengulangan dengan WHILE</H2>");
i=0
while (i<nbatas)
{
if (i%2==0)
{
document.write(i+", ");
}
i++;
}
</SCRIPT>
</BODY>
</HTML>

Modul HTML 5 Programming

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML 5 Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul HTML 5 Programming

MATA KULIAH HTML 5

Sebagai contoh, perhatikan kode HTML berikut :

Contoh : <font attribute=”value”>contoh font</font>

<a href=”url_tujuan”>Teks Link</a>

Contoh penggunaan tag link <a> berikut ini :

Alamat Absolut dan Alamat Relatif

Attribut tag <a> : target

Contoh penggunaan tag link <a> dengan atribut target:

• Tag <table> digunakan untuk memulai tabel

Contoh penggunaan tag table <table> berikut ini :

Name → (optional), nama untuk form yang berlaku

FORM PENDATAAN MAHASISWA SISTEM INFORMASI

Nomor Pokok Mahasiswa :

2. Internal Style Sheet atau Embed Style

3. External Style Sheet

Sintaks penulisan JavaScript :

Cara penulisan JavaScript, dapat ditempatkan pada :

2. Header, dalam bentuk function

Anda mungkin juga menyukai