0% menganggap dokumen ini bermanfaat (0 suara)
228 tayanganBuku Pemrograman Web HTML Css Javascript
vjvkv
Diunggah oleh
BeeHak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
228 tayanganBuku Pemrograman Web HTML Css Javascript
vjvkv
Diunggah oleh
BeeHak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
/ 43
Created By
7 deka@swkbhinus-_ne& /
—_— “fi
ee ne
f Buku belajarsiswa 2
A. TEKNOLOGI APLIKASI WEB
1, Konsep Teknologi Web Page
Website atau Web merupakan sekumpulan media halaman yang berbasis j
ngan
komputer yang berisikan konten berupa teks, gambar, video, sound, gambar animasi, link dan
lain sebagainya yang tersimpan di dalam server yang terkoneksi internet. Website merupakan
perpustakaan dunia yang berisikan berbagai macam informasi, berita dan ilmu pengetahuan.
Selain itu Web merupakan bentuk implementasi dari bahasa pemrograman web (Web
Programming). Sebwah website tidak lepas dari bahasa pemrograman web, dan sekarang
bahasa pemrograman web sudah semakin meluas, sekarang website tidak hanya menjadi
sebuah media pemberi informasi, tetapi sudah berkembang menjadi sistem informasi
pendataan, pengelolaan atau management dalam suaty instansi atau perusahwan,
Dokumen-dokumen website baik dalam desain maupun pemformatan kontennya
dengan menggunakan kode-kode scripting untuk menyusun halaman web. Kode-kode
seripting yang dipakai adalah HTML (Hypertext Markup Language) merupakan bahasa
scripting atau markah yang digunakan untuk menyusun dokumen-dokumen web. Tidak
hanya itu, untuk mengolah desain dalam suatu website biasanya para web designer
menambahkan dan mengkolaborasikan kode html dengan bahasa CSS (Cascading Style
Sheet) yaitu pemrograman yang mengacu pada desain layout website. Hmu yang mempelajari
tentang bahasa dan pengkodean website disebul pemrograman web, Pemrograman Web ada
dua macam, yaitu : Pemrograman Client-Side dan Pemrograman Server-Side.
Pemrogr
man Client-Side mermpakan pemrograman web yang sumber kodenya
dieksekusi langsung oleh aplikasi Web Browser, contoh : HTML, VBScript dan JavaScript,
sedangkan Pemrograman Server-Side merupakan pemrograman web yang memiliki struktur
program, langkah urutan, prosedur dan sumber kodenya dieksekusi melalui server kemudian
di kirim ke web browser client, sehingga kode program yang sudah ditulis tidak akan tampak
pada web browser, contoh : PHP, CGI, PERL, Python, Java Server Page (JSP), ASP (Aciive
Server Page). Pemrograman Client-Side merupakan dasar dari pemrograman website untuk
membangun sebuah website. Pemrograman Client-Side tidak sama dengan pemrograman
Server-Side , karena tidak mengenal prosedur pemrograman dan tidak mengenal urutan
langkah program. Akan tetapi, pemrograman Client-Side selalu dikolaborasikan dengan
pemrograman Server-Side untuk membangun sebuah Sistem Informasi, dimana website
sekarang tidak hanya berfungsi sebagai pemberi informasi atau berita saja, melainkan
menjadikan sebuah sistem pengolahan data dari perusahaan atau instansi.
Sejarah perkembangan bahasa pemrograman web diawali dengan munculnya HTML
(HyperText Markup Language), yang kemudian dikembangkan dengan munculnya CSS
(Cascading Style Sheet) yang betujuan untuk memperindah tampilan website dengan
perintah-perintah atau kode bahasa pemrograman css. Pemrograman web bisa diartikan
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa
sebagai proses pembuatan program dalam bentuk web dengan perintah-perintah atau kode
yang terstruktur dan hasilnya akan ditampilkan dalam bentuk web melalui web browser.
Beberapa bahasa pemrograman web berbasis server (Server-Side) mulai muncul dan
dikembangkan oleh beberapa perusahaan perangkat lunak, seperti: ASP (Active Server
Pages) oleh perusahaan Microsoft Corporation, JSP (Java Server Pages) oleh perusahaan
Sun Microsystem, dan CGI (Common Gateway Interface) oleh perusahaan UNIX yang
sekarang diadopsi oleh NCSA (National Central for Supercomputing Application) web
server. Berikut macam-macam bahasa pemrograman web yang lebih lengkap :
Bahasa
Pemrograman
Keterangan
[WTML
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang
ldigunakan untuk membust sebuah halaman web dan menampilkan berbagai
linformasi di dalam sebuah browser Internet.
HTML. saat ini merupakan standar Internet yang didefinisikan dan
|dikendalikan penggunaannya oleh World Wide Web Consortium (W3C),
HTML berupa kode-kode tag yang menginstruksikan browser untuk
Imenghasitkan tampilan sesuai dengan yang diinginkan. Sebuah file yang
Imerupakan file HTML dapat dibuka dengan menggunakan browser web
seperti Mozilla Firefox, Microsoft Intemet Explorer dll
PHP
[Hy pertext Preprocessor (PHP) adalah bahasa pemrograman script yang paling
[banyak dipakai saat ini
IPHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu
itu. PHP masih bernama FI (Form Interpreted), yang wujudnya berupa
Ikekumpulan script yang digunakan untuk mengolah data form dari web. PHP
[banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak
lertutup kemungkinan digunakan untuk pemakaian lain. PHP biasanya berjalan
lpada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).
|ASP
[ASP adalah singkatan dari Active Server Pages yang merupakan salah satu
lbahasa pemograman web untuk menciptakan halaman web yang dinamis.
|ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft
|ASP bekerja pada web server dan merupakan server side scripting,
IXML
[Extensible Markup Language (XML) adalah bahasa markup serbaguna yang
irekomendasikan W3C untuk mendeskripsikan berbagai macam data.
[XML menggunakan markup tags seperti halnya HTML namun penggunaannya|
‘dak terbatas pada tampilan halaman web saja. XML merupakan suatu metode
lalam membuat penanda/markup pada sebuah dokumen,
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 4
WML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa
Jpemrograman yang digunakan dalam aplikasi berbasis XML (Extensible
WML. larkup Langauge). WML adalah bahasa pemrograman yang digunakan dalam
laplikasi wireless.
IWML merupakan analogi dari HTML yang berjakan pada protocol nirkabel.
[Perl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix
|(SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti
|DOS, Windows, BeOS, VMS, EBCDIC, dan PocketPC.
IPERL merupakan bahasa pemograman yang mirip bahasa pemograman C.
PERL
[CEM dibuat menggunakan tag ColdFusion dengan software Adobe
CFM ColdFusion / BlueDragon / Coldfusion Studio.
|syntax coldfusion berbasis html
javascript adalah bahasa scripting yang handal yang berjalan pada sisi client
[JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh
Javascript INetscape. Untuk menjalankan script yang ditulis dengan JavaScript kita
lmembutuhkan
cript-enabled browser yaitu browser yang mampu
Imenjalankan JavaScript.
[Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan
luntuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.
= IPenggunaan yang paling umum dari CSS adalah untuk memformat halaman
|web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya
lsendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG
lan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
1.1, HTTP
HTTP (HyperTextT
mentransfer dokumen dalam World Wide Web(WWW). Protokol ini adalah protokol ringan,
fer Protocol) adalah protokel yang dipergunakan untuk
tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen,
Pengembangan HTTP dikoordinasi oleh Konsorsium World Wide Web(W3C) dan grup bekerja
Intemet Engineering Task Force(IETF), bekerja dalam publikasi satu seri RFC, yang paling
terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP yang digunakan umum sekarang
ini, HTTP adalah sebuah protokol meminta/menjawab antara clientdan server. Sebuh client
HITTP seperti web browser, biasanya memulai permintaan dengan membuat hubungan TCP/IP
ke port tertentu di
rumah yang jauh (biasanya port 80). Sebuab server HTTP yang
mendengarkan diport tersebut menunggu client mengirim kode permintaan (request), seperti
"GET / HTTP/1.1" (yang akan meminta halaman yang sudah ditentukan), diikuti dengan pesan
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 5
MIME yang memiliki beberapa informasi kode kepala yang menjelaskan aspek dari permintaan
tersebut, diikut dengan badan dari data tertentu. Beberapa kepala (header) juga bebas ditulis atau
tidak, sementara lainnya (seperti tua
rumah) diperlukan oleh protokol HTTP/I,1. Begitu
menerima kode permintaan (dan pesan, bila ada), server mengirim kembali kode jawaban, seperti
"200 OK", dan sebuah pesan yang diminta, atau sebuah pesan error atau pesan lainnya.
1.2, WORLD WIDE WEB (WWW)
World Wide Web, biasa lebih terkenal disingkat sebagai WWW adalah suatu ruang
informasi yang dipakai oleh pengenal global yang disebut Pengidentifikasi Sumber Seragam
untuk mengenal pasti sumber daya berguna, WWW sering dianggap sama dengan Internet
secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada Internet.
WWW merupakan kumpulan web dari seluruh dunia yang mempunyai kegunaan
untuk menyediakan data dan informasi untuk dapat digunakan bersama. WWW adalah bagian
yang paling menarik dari Intemet. Melalui web, para pengguna dapat mengakses informasi-
informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan
animasi.
WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991
Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya.
Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi, Sistem itu adalah
program peranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee berhasil
menciptakan jaringan yang menautkan berbagai arsip sehingga memudabkan pencarian
informasi yang dibutubkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat
yang dikenal sebagai WWW.
Pertanyaan !
1. Jelaskan apa yang di maksud dengan Website !
Sebutkan macam-macam ba a pemrograman Web !
3. Jelaskan apa yang di maksud dengan pemrograman Client-Side !
Sebutkan contoh bahasa pemrograman web berbasis Server-Side !
we
Jelaskan apa yang di maksud dengan HTTP !
B, FORMAT TEKS HALAMAN WEB
2, Format Font Halaman WEB
2.L.Struktur Dasar HTML
HTML (Hyper Text Markup Language) merupakan sebuah bahasa markah pemrograman web
yang terstruktur susunan programnya yang digunakan untuk menyusun dokumen-cokumen
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 6
halaman web. HTML terdiri atas 4 bagian, yaitu : tag, elemen, properti dan atribut atau nilai
properti.
‘Tag memupakan suatu tanda khusus (markup) untuk menandai sebuah teks berupa 2
karakter “<* dan “>, Tag dibagi menjadi 2 bagian yaitu tag pembuka dan tag penutup.
Contob tag pembuka : . Tanda “<" dan “>” adalah tag pembuka sedangkan “body”
adalah elemen pembuka, Tag penutup ditandai dengan 3 karakter “”. Contoh :
. Tanda “” adalah tag penutup sedangkan “body” adalah elemen
penuiupnya, Elemen merupakan tang dari perintah-perintah html, yang berfungsi sebagai
tempat penampungan properti dan atribut perintah html. Contoh : .
Properti adalah sekumpulan perintah yang tersedia pada suatu elemen html. Properti
pada elemen 1 dengan yang lainnya bisa berbeda, tergantung fungsi dari elemen tersebut
Contoh . Pada perintah “bgcolor=" adalah properti dati elemen “body”,
yang menjelaskan bahwa body tersebut diberi properti background warna atau latar dengan
warna, Atribut merupakan nilai dari suatu properti. Contoh : . Pada
perintah tersebut, kata atau kode “red” adalah nilai atribut dari suatu properti, yang bertujuan
untuk membuat latar belakang dengan warna merah,
Bentuk struktur html :
Judul Website
<hitle>
<tnead>
<body>
ISI CONTENT WEBSITE
<body>
<fhtml>
Format atau ekstensi atau perluasan nama file untuk html adalah “*.htm" atau “html”.
Untuk membuat halaman web dengan kode html, banyak aplikasi yang bisa digunakan
seperti = notepad (aplikasi bawaan windows), notepad ++, macromedia dreamweaver,
micosoft frontpage, web page maker, dan lain seb
Berikut beberapa perintah HTML dan fungsinya:
inya.
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa
Tag ‘Airibu’Conioh penulisan
Fungsi
<body>
background="0\Gambar jpg”>
‘Backgorund halaman benwama
merah
‘Memben wama pada teks
Warna link
Warne link yang sudah dikunjungi
Warna link yang aktit
‘Memberi background gambar
‘pada halaman’
<a> <a
href="D:\home himi™>Home</a>
<a
hhrof="http://wmwwyahoo.com”>Ya,
hool</a>
<a
hhref="mailto:name@edomain.com"
>here</a> to email mel
‘Membuat hyperiinkvink
<img> ~<img src="person jpg” width=50"
height="50" border="0"
alt="Person” align="teft">
Wemasukkan gambar dengan
‘nama file gambar person jpg,
lebar 50px, tingat 50px, border 0,
rata kin, dan jika gambar tidak
muneul akan keluar teks Person
<img ste="C\Documents and
Settings\All UsersiDocuments\My
Pictures\Sample.
Pictures\Sunset.jpo>
<font on <FONT siz0=">" color FF FFFOO™
face="ariat>... </font>
Wongatur font dengan ukuran 2,
vwara kuning, jenis hurt Ari
aS IGF <BIG>Contoh <TBIG>
‘Membuat teks Canton menjadi
Jobin besar
=SMALL>7SMALL> — | =SMALL> Conton7SMALL>
‘Mombuat tok Canton menjad
Iebih kee
eS ‘aks DalaraTcotaK lebih Tobal
=a Teks Htalicmning
<siike> —<Jatnike> Teks tercoret
<u> <u> Teks underined
sni> ini Teks heading 1 Tingkat heading
bisa sampai tingkat 6. Semakin
bosar tingkar heading, maka toks
‘aka dicetak semakin Kec
he Shr width="600">
<hr align="center” size="5"
‘Garis dengan lebar 600. Tag <i>
tidak perlu ditutup
Garis dengan tinggi 5, lebar 60%
dant lebar layar browser dan rata
tengan
wicth="8096"
=p algn="centar= Paragrat rata Tengah. Penintan ir
<I> juga dapat ditulis dengan tag
“center> </eanter>
aE Tag untuk gant bans Tag <be dak por Gap
~sup>_<Tsup> Teks superscript
abs Sea Teks subscript
“marquee Teks berjlan. Memiiki atibut
<imarauee> direction, behavior dan lain-lain
Contoh
marquee direction="right™>
</marquee
marquee behavior=atemate”>
‘<imarquee>
Latihan 1
Buka aplikasi notepad dari windows dengan cara klik menu start — pili AL! Programs ~ pilih
Accessories ~ pilih notepad, kemudian tuliskan kode seperti di bawah ini :
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa
<html>
<head>
<title> Judul Situs Web Saya <tttle>
<head>
<body>
Ini halaman situs Saya. Letakkan perintah-perintah HTML di si
Ini halaman situs Saya. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Saya. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Saya. Letakkan perintah-perintah HTML di sini.
</body>
</html>
Setelah itu simpan di folder dengan nama latihan1.html dan hasilnya akan terfihat seperti
gambar di bawah ini.
Computer Protected Mode: Of
‘Tugas 1
Buatlah halaman web dengan nama tugas1.html dengan hasil tampilan seperti di bawah ini
menggunakan teks editor Notepad atau Notepad ++.
8 tar/cinnene
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 9
2.2, HTML Format Font WEB
‘Memformat font pada html pada dasamya mengubah atau mendesain suatu teks. Format font
terdiri atas beberapa macam, yaitu : format heading, paragraf, warna teks, elemen tebal,
elemen garis bawah, elemen italic (miring), Elemen Garis Horizontal atau <HR>, format
teks dan elemen perataan,
a) Heading
Heading berfungsi untuk membuat header dengan format 6 jenis ukuran huruf, Nilai ukuran
huruf terbesar adalah HI dan H6 adalah nilai ukuran huruf terkecil. Berikut daftar Heading =
HIH2,H3,H4,H5,H6
Sintaks =
<hx align=“left' right "center>
TEKS YANG DIBUAT HEADING
<lax>
Keterangan : karakter “x” diisi dengan nilai level heading dimana x adalah penyebut dari
nilai level dari suatu heading,
Latihan 2
Buatlah halaman web dengan nama heading-html menggunakan teks editor notepad atau
sejenisnya kemudian ketikkan kode seperti di bawah ini
<humb>
<head>
title>
LATIHAN MEMBUAT HEADING
<hitle>
<head>
“Jeft”>INI HEADING 1 RATA KIRI</hl>
inter" >INI HEADING 2 RATA TENGAH</h2>
‘right">INI HEADING 3 RATA KANAN</h3>
<h4>INI HEADING 4</’h4>
<hSINI HEADING 5</h5>
<h6>INI HEADING 6</h6>
<Ioody>
</html>
Dengan hasil tampilan seperti gambar di bawah ini.
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 10
‘Tugas 2
Buatlah halaman web heading teks dengan nama file tugasheading.html dengan hasil mirip
seperti di bawah
b)Paragrat
‘Membuat paragraf, pada dasarnya sama seperti membuat heading dalam pemberian properti
dan tribut, hanya berbeda pada ukuran dan penempatannya saja, Contoh Sintax atau
perintah membuat paragraf =
</p> karakter titik-titik (...) merupakan teks yang dibuat paragraf. Kemudian
jika ditambahkan properti dan atribut, seperti di bawah ini
<p>.
<p align="left" center"\"right">TEKS
PARAGRAF </p>
©) Huruf Tebal, Miring dan Garis Bawah
Untuk membuat huruf tebal atau bold, menggunakan syntax atau perintah : <b>.....</b>
kepanjangan dari <bold>, sedangkan untuk membuat huruf miring gunakan perintah :
<i>....<A> , kepanjangan dati <italic>, dan untuk membuat garis bawah, gunakan perintah
2 <U>....u/u> kepanjangan dari <underline>. Khusus untuk pemformatan huruf seperti
membuat huruf tebal, miring, dan garis bawal tidak mempunyai properti dan atribut, karena
format tersebut masing-masing hanya mempunyai satu fungsi.
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa un
Tugas 3
Buatlah halaman web dengan nama file tugasfont2.html dengan hasil tampilan seperti
gambar di bawab ini =
d) Font Teks
Font merupakan bentuk pengolahan suatu teks yang akan ditampilkan ke dalam halaman
web di web browser. Untuk merubsh dan mengolah font teks, gunakan syntax atau perintah
<font {nama properti|={nilai atribut}>TEKS</font>
Macam-macam properti dan atribut pada font :
<font color =red\bluelyellowlgreen\ ”#00f{00" I" #dedeca”">
‘Arial |" Times New Roman” Verdana”>
"6
7">
Contoh penggabungan ketiga properti tersebut
<font face="Arial” size="5” color=blue>TEKS YANG DI OLAH</font>
Tugas 4
Buatlah halaman web dengan nama tugasfont3.html dari aplikasi notepad dengan contoh
hasil mirip seperti gambar di bawah ini
e) Elemen HR (Horizontal Rule)
Elemen HR atau Horizontal Rule berfungsi untuk membuat suatu garis horizontal. Elemen
inj tidak mempunyai tag penutup dan mempunyai properti dan atribut seperti : “align
untuk menempatkan posisi secara horizontal (“left”,"right’,"center”), “size” untuk
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 2
chr aligne“left” |“center”|"right” size="1"]"2" ["3"|"4"|"5"|"6”
width="10%" |" 20%" | "3026" | "4026" |"5096" | "60%" |"70%" "80%" |"90%"|"100%" noshade>
mengatur ukuran ketebalan garis (“pixel”), "width" untuk mengatur ukuran panjang garis
(“persen”), dan “noshade" (garis solid). Syntax atau perintah untuk membuat garis
horizontal adalah,
f) Elemen <Center>
Untuk membuat perataan pada semua konten bis menggunakan _perintah
<center>. </center>. Fungsi tersebut digunakan merata tengahkan objek atau konten
sebagai pengganti paragraf <p>. Contoh
<center>
Kalimat ini di rata tengahkan oleh elemen center
</eenter>
Latihan 3
Buatlah halaman web dengan nama latihanhrchtml menggunakan teks editor notepad,
dengan kode seperti di bawah ini.
<html>
<head>
<title>Latinan Membuat garis Horizontal
ch align="center’>
DINAS PENDIDIKAN JAWA TENGAH
<
Dengan hasil tampilan seperti gambar di bawab ini Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa B Tuga: Buatlah halaman web dengan nama file tugashr.html dari aplikasi notepad dan buat seperti hasil gambar di bawah ini : g) Daftar Urutan (Bullet And Numbering) Daftar urutan atau biasa disebut dengan Bullet And Numbering terdiri atas 2 elemen, yaitu elemen
PEMERINTAH KABUPATEN KENDAL
Dengan hasil tampilan seperti gambar di bawab ini Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa B Tuga: Buatlah halaman web dengan nama file tugashr.html dari aplikasi notepad dan buat seperti hasil gambar di bawah ini : g) Daftar Urutan (Bullet And Numbering) Daftar urutan atau biasa disebut dengan Bullet And Numbering terdiri atas 2 elemen, yaitu elemen
- (Ordered List) dan
- atau List, Elemen
- merupakan sub elemen atau isi dari elemen dari daftar
uunutan tersebut.
1) Elemen
- (Ordered List)
Elemen
- . Syntax
-
i>
Latihan HTML Daftar urutan Angka - (List) Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 15 Elemen
- merupakan is
“
- ” atau “
-
flix
‘Tugas 5
Buatlah halaman web dengan nama tugasdaftarchtml menggunakan aplikasi_ notepad
dengan hasil seperti gambar di bawah ini
©. FORMAT TABEL HALAMAN WEB
3. Struktur Elemen Tabel Halaman WEB
3.1 Pengertian Tabel
Tabel adalah suatu kumpulan baris dan kolom terstruktur pembentuk layout untuk
‘menempatkan dan menata informasi atau konten agar mudab dibaca, dipahami dan lebih rapi
dalam penyusunan dokumen web. Element TABLE befungsi untuk membuat suatu data
multidimensi yang terdiri atas kolom dan baris, Element ini mempunyai attribute seperti
align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), eellspacing (jarak
antara sel), width (lebar tabel), height (linggi tabel). Element TABLE berisikan element
CAPTION, TH, TR dan TD.
3.2 Struktur Elemen Tabel
Pada HTML terdapat elemen tabel (table) yang berfungsi untuk menata konten dan membuat
layout agar lebih tertata rapi, Bentuk struktur tabel dalam HTML sebagai berikut :
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 16
stable>
JUDUL TABEL th 31 KONTEE ISLKONTEN Elemen tabel juga terdapat beberapa atribut dan nilai atribut atau properti, diantaranya yaitu Jtmembuat tinggi tabel
3.3 Elemen Caption Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top (judul terletak di atas tabel), dan bottom (judul terletak di bawah tabel). Sintaks:3.4 Blemen (Table Row) Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada clement ini adalah align, valign (posisi vertikal), dan bgcolor. Sintaks: Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 7 3.5 Elemen (Table Header) dan Elemen (Table Data) Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan. Sintaks untuk elemen Sintaks untuk elemen : “cpap sne>-AOSDATA SSA KELAS X RPL A>” “wie $" sone A> nate 00" pe ABU S00 pe TENTS ELAM wie" gente? vgn SATS ae ipa ae ga Sad ab 300 Sagres a “A nth sent neste SATIS op a a an [nd ab 300 Spe Peep Buatlah halaman web html dengan nama tugastabel.html menggunakan teks editor notepad dengan hasil tampilan seperti gambar di bawah ini : Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 19 D, MULTIMEDIA PADA HALAMAN WEB 4, Elemen HTML Multimedia Halaman WEB 4.1 Elemen Gambar (Image) Elemen gambar atau image dalam pemrograman him! disingkat dengan karakter yang berfungsi untuk mengeksekusi atau menampilkan gambar di halaman web. Elemen ini tidak mempunyai tag penutup dan mempunyai properti yaitu “align”, "width", “height”, “border”, “hspace” (jarak kosong posisi horizontal), “vspace” (jarak kosong posisi vertikal), “alt” (Weks alternatif jika gambar tidak tampil) dan “sre” kepanjangan dari souree (letak atau lokasi dari gambar itu disimpan beserta nama file-nya). Berikut syntax atau perintah dan properti pada elemen image =
Latihan 5 Buatlah file halaman web dengan nama latihangambar.html menggunakan aplikasi notepad, lalu ketikkan kode di bawah ini <
Latihan Menampilkan Gambarcititle> </head> <body bgcolor=yellow> ‘gambarku,jpg” alt="ini adalah gambar” width="350px" height="400px” border="2" align="left” hspace="10" vspace="10"> </body> <htmb> Pada tulisan gambarku.jpg merupakan nama file gambar dengan perluasan *jpg. menunjukkan lokasi file gambar yang akan dieksekusi atau ditampilkan, dan antara file gambar dengan file document html-nya harus satu lokasi agar dalam penulisan sintaksnya lebih mudah, contoh : <img sre="gambarku.jpg"> berarti antara file huml dengan file gambar terletak di satu lokasi, lalu jika <img st sambar/gambarku.jpg”> berarti antara file heml dengan file gambar tidak satu lokasi melainkan file gambarku.jpg berada di folder gambar. Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 20 Gambar di bawah ini menjelaskan lokasi penyimpanan gambar dan file halaman web html. Organise © we Fevers i Ubraries ‘gemberkuj _latihangam 3 Documents pa baht! a) Masie (5 Pics Bh Videos Sching, 1 hasilnya akan terlihat seperti di bawah ini Tugas 7 Buatlah halaman web html dengan nama tugasimage.html menggunakan aplikasi notepad dan buat seperti gambar di bawah ini: 4.2 Elemen <audio> Elemen audio merupakan bentuk kode html5 atau huml versi 5. Untuk menampilkan audio ke dalam web browser menggunakan perintah <audio controls>, sedangkan untuk mengambil sumber fi audionya menggunakan perintah <source s ile_audio.ogg | file_audio.mp3 | file_audio.wav” type="audio/mp3logglwav”>. Namun harus di dukung dengan versi web brows 1 terbaru seperti Mozilla Firefox versi 4 ke atas, karena html versi 5 hanya bisa Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 2 digunakan pada web browser yang sudah mendukung himl5. Contoh bentuk perintah atau sintaks elemen audio sebagai berikut : <audio controls> <source sre="music.ogg” type="audio/ogg"> </audio> Pada perintah di atas terdapat atribut type="audio/ogg” berfungsi untuk menentukan jenis file audio yang akan di pasang yaitu dengan perluasan atau ekstensi ogg. Nilai atribut atau properti tersebut disesuaikan dengan ekstensi atau perluasan dari sumber file audionya, apabila file audionya berupa mp3 berarti tipe audionya adalah audio/mp3. Sedangkan perintah <source sre="music.ogg”> merupakan sumber file audio yang bernama music. dan antara file audio dan file html harus satu lokasi atau satu folder yang sama Latihan 6 Buatlah halaman web dengan nama latihan_audio.html menggunakan teks editor notepad atau sejenisnya kemudian ketikkan kodenya seperti di bawah ini. <hemi> <head> <title>Memasang Audio ke dalam WEB -
- ”, Elemen ini juga mempunyai properti “type” dan “value”, Nilai
dari pada daftar. Elemen ini harus berada di dalam elemen
properti “type” adalah “A,ai,l,,cirele,square,dise” dan properti “value” berisikan nomor
turutan dari properti “type”. Contoh syntax :
-
flix
‘Tugas 5
Buatlah halaman web dengan nama tugasdaftarchtml menggunakan aplikasi_ notepad
dengan hasil seperti gambar di bawah ini
©. FORMAT TABEL HALAMAN WEB
3. Struktur Elemen Tabel Halaman WEB
3.1 Pengertian Tabel
Tabel adalah suatu kumpulan baris dan kolom terstruktur pembentuk layout untuk
‘menempatkan dan menata informasi atau konten agar mudab dibaca, dipahami dan lebih rapi
dalam penyusunan dokumen web. Element TABLE befungsi untuk membuat suatu data
multidimensi yang terdiri atas kolom dan baris, Element ini mempunyai attribute seperti
align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), eellspacing (jarak
antara sel), width (lebar tabel), height (linggi tabel). Element TABLE berisikan element
CAPTION, TH, TR dan TD.
3.2 Struktur Elemen Tabel
Pada HTML terdapat elemen tabel (table) yang berfungsi untuk menata konten dan membuat
layout agar lebih tertata rapi, Bentuk struktur tabel dalam HTML sebagai berikut :
Buku Pemrograman Web | SMK Bhinus Buku belajarsiswa 16
stable>
- berfungsi untuk membuat nomor daftar unut, Elemen ini mempunyai properti
“start” dan “type”. Properti start berfungsi untuk memberikan nilai awal dari daftar urutan,
properti type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf
Kapital, a untuk abjad huruf keeil, alu T untuk membuat angka romawi besar, i untuk
membuat angka romawi kecil, dan 1 untuk membuat angka decimal (default start
typ
atau perintah untuk membuat
- :
"), Setiap elemen OL atau UL selalu terdapat sub elemen List atau
- (Unordered List)
Elemen
- berfungsi untuk membuat daftar urutan tanpa nomor urut (dalam format
bullet). Elemen ini hanya mempunyai properti “type”. Properti “type” berfungsi untuk
memilily bentuk bullet yang digunakan, Nilai atribut dari properti “type” ini adalah “circle”
untuk membuat tanda lingkaran, “square” untuk membuat tanda kotak dan “dise” untuk
membuat tanda cakram, Contoh syntax atau perintah membuat elemen
-
cirde"|"square” |“disc”>
fle
TYPE=square | Nembuat tanda kotak O
[TYPE=disc_ | Membuat tanda cakram ©
3) Elemen
- . Syntax
- (Unordered List). Sedangkan elemen tambahannya
adalah