PEMOGRAMAN WEB HTML
1.Pengertian HTML
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa
pemrograman standar yang digunakan untuk membuat sebuah halaman web,
yang kemudian dapat diakses untuk menampilkan berbagai informasi di
dalam sebuah penjelajah web internet(browser)
. HTML dapat juga digunakan sebagai link link antara file-file dalam
situs atau dalam komputer dengan menggunakan localhost, atau link yang
menghubungkan antar situs dalam dunia internet.
Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan
hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi
halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di
dunia percetakan dan penerbirtan yang disebut Standard Generalized
Markup Language (SGML ).
Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa)
2.Struktur HTML & Contohnya
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Setiap ada tag pembuka maka harus ada tag penutup yang ditandai dengan
tanda "/". Contoh :<title></title>, <body>
</body>,<html></html>.
Antara tag <title>
</title> digunakan untuk menulis judul halaman web yang
bersangkutan. Contohnya adalah tulisan "ahmadamirudin.jw.lt" yang ada
pada pojok kiri atas halaman ini
maka penulisannya menjadi :
<html>
<head>
<title>ahmadamirudin.jw.lt
</title>
</head>
<body>
</body>
</html>
Sedangkan antara tag <body> </body> digunakan untuk mengisi
apa yang akan ditampilkan pada halaman anda, bisa berupa tulisan,
gambar, link dan sebagainya.
Adapun beberapa tambahan yang dapat ditambahkan pada tag <body> adalah sebagai berikut:
- Meberikan warna background pada halaman web :
<body bgcolor="blue">
Atau dapat juga menggunakan kode warna Hexa (RGB /red-green-blue) yang
terdiri dari 6 karakter yang terdiri dari gabungan angka dan huruf, dan
penulisannya juga harus diawalai dengan tanda "#"(pagar).
2 karakter pertama mewakili warna merah yang dimulai dari paling rendah
00 sampai paling tinggi ff, atau bisa juga kombinasi huruf dan angka
tadi. Begitu juga 2 karakter berikutnya mewakili warna hijau dan 2
karakter berikutnya
mewakili warna biru.
contoh penulisan kode untuk warna hitam #000000, putih #ffffff,
merah #ff0000, abu-abu #d3d3d3 dan lain lain sesuai dengan keinginan
anda.
- Memberikan background gambar
<body background="gambar.jpg">
Penulisan format gambar juga harus disertakan seperti *.jpg, *.gif, *.bmp dan lain-lain
Jika ingin menginginkan warrna background transparan maka ditulis dengan <body bgcolor="transparent">
- Memberikan warna teks
<body text="#000000">
- Mengatur margin halaman
<body leftmargin="20" topmargin="20">
- mengatur warna link
<body link="#ff0000"vlink="#00ff00"
alink="#0000ff">
Dan jika semuanya ditulis bersamaan maka menjadi :
<body bgcolor="blue"text="#000000"
leftmargin="20" topmargin="20"
link="#ff0000"vlink="#00ff00"alink="#0000ff">
3.Tag HTML & Contohnya
Tag Judul (Heading) : Biasanya digunakan untuk menuliskan judul suatu paragraf.
<hn>Judulparagraf</hn>
Tag Paragraf (Paragraph) : Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.<body bgcolor="blue">Atau dapat juga menggunakan kode warna Hexa (RGB /red-green-blue) yang terdiri dari 6 karakter yang terdiri dari gabungan angka dan huruf, dan penulisannya juga harus diawalai dengan tanda "#"(pagar). 2 karakter pertama mewakili warna merah yang dimulai dari paling rendah 00 sampai paling tinggi ff, atau bisa juga kombinasi huruf dan angka tadi. Begitu juga 2 karakter berikutnya mewakili warna hijau dan 2 karakter berikutnya mewakili warna biru.
contoh penulisan kode untuk warna hitam #000000, putih #ffffff, merah #ff0000, abu-abu #d3d3d3 dan lain lain sesuai dengan keinginan anda.
<body background="gambar.jpg">Penulisan format gambar juga harus disertakan seperti *.jpg, *.gif, *.bmp dan lain-lain
Jika ingin menginginkan warrna background transparan maka ditulis dengan <body bgcolor="transparent">
<body text="#000000">
<body leftmargin="20" topmargin="20">
<body link="#ff0000"vlink="#00ff00" alink="#0000ff">
<p>paragraf</p>
Tag Atribut1 (Bold, Italic, Underline) : Untuk menandai bagian kalimat agar dicetak tebal, miring, dan atau digaris bawahi.
<b>Kalimat yang dicetak tebal</b>
<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digaris bawahi</u>
Tag Atribut2 (Superscript, Subscript) : Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian yang dicetak rendah</sub>
Tag Ganti Baris(Break line) : Untuk pindah ke baris berikutnya.
<br>
Tag Font (size) : Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font
Parameter : size, face, color
<font size="n">kalimat</font> , n= ukuran huruf
<font color="#RRGGBB>kalimat</font>
RR = 00-FF (intensitas warna merah dalam heksadesimal)
GG = 00-FF (intensitas warna hijau dalam heksadesimal)
BB = 00-FF (intensitas warna biru dalam heksadesimal)
Tag Enumerasi (List, Unnumbered List, Ordered List) : Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol buller (•). Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk me-nomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>
<li>item</li>
Tag Garis Mendatar (Horizontal Line) : Membentuk garis pemisah mendatar.
<hr>
Tag Gambar(Image) : Untuk menampilkan sebuah file gambar.
<imgsrc="Nama File Gambar"/>
Nama File Gambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.
Tag Link (Anchor) : membentuk link ke URL/file/bagian dokumen lain.
<a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan= Kata sembarang sebagai penanda.
Tag Tabel(Table) : Menampilkan data dalam bentuk tabel. Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
<table>definisitabel</table>
Tag untuk penanda baris adalah <tr>definisi baris</tr>
Tag untuk penanda kolom adalah <td>data</td>
4.HTML Attributes Reference
A complete list of legal attributes for each HTML element is listed in our:HTML Tag ReferenceBelow is a list of some attributes that can be used on any HTML element:
Attribute | Description | ||||||
---|---|---|---|---|---|---|---|
class | Specifies one or more classnames for an element (refers to a class in a style sheet) | ||||||
id | Specifies a unique id for an element | ||||||
style | Specifies an inline CSS style for an element | ||||||
title | Specifies extra information about an element (displayed as a tool tip) |
5.Contoh dokumen HTML sederhana
<!DOCTYPE html> <html> <head bgcolor=black text=white> <title>'''Selamat Datang''' HTML</title> </head> <body> <p>Halo dunia!</p> </body> </html>
6.Software Untuk Membuat Animasi
Saat ini terdapat banyak jenis software animasi yang beredar di
pasaran, dari softwareyang mempunyai kemampuan yang sederhana hingga
yang komplek, dari yang gratishingga puluhan juta rupiah.
Dari sisi fungsi penggunaan software animasi dapat dikelompokkan menjadi Software.
1. Software Animasi 2 Dimensi.
Software animasi 2D adalah software yang digunakan untuk membuat animasi tradisional (flat animation), umumnya mempunyai kemampuan untuk menggambar, mengatur gerak dan mengatur waktu, terkadang ada yang dapat mengimport suara. Dari sisi penggunaan umumnya tidak sulit.
Contoh dari Software Animasi 2D antara lain :
Software animasi 3D mempunyai fasilitas dan kemampuan yang canggih untukmembuat animasi 3 dimensi. Fasilitas dan kemampuan tersebut antara lain,membuat obyek 3D, pengaturan gerak kamera, pemberian efek, import video dansuara, serta masih banyak lagi. Beberapa software animasi 3D mempunyaikemampuan khusus, misalnya untuk animasi figure(manusia), animasi landscape(pemandangan), animasi title (judul), dll. Karena kemampuannya yang canggih,dalam penggunaannya diperlukan pengetahuan yang cukup tinggi dan terkadang rumit.
Contoh dari Software Animasi 3D ini antara lain:
1.3D Studio
Dari sisi fungsi penggunaan software animasi dapat dikelompokkan menjadi Software.
1. Software Animasi 2 Dimensi.
Software animasi 2D adalah software yang digunakan untuk membuat animasi tradisional (flat animation), umumnya mempunyai kemampuan untuk menggambar, mengatur gerak dan mengatur waktu, terkadang ada yang dapat mengimport suara. Dari sisi penggunaan umumnya tidak sulit.
- Macromedia Flash
- Macromedia Director
- ToonBoom Studio
- Adobe ImageReady
- Corel RaVe
- Swish Max
- Adobe After Effect
Software animasi 3D mempunyai fasilitas dan kemampuan yang canggih untukmembuat animasi 3 dimensi. Fasilitas dan kemampuan tersebut antara lain,membuat obyek 3D, pengaturan gerak kamera, pemberian efek, import video dansuara, serta masih banyak lagi. Beberapa software animasi 3D mempunyaikemampuan khusus, misalnya untuk animasi figure(manusia), animasi landscape(pemandangan), animasi title (judul), dll. Karena kemampuannya yang canggih,dalam penggunaannya diperlukan pengetahuan yang cukup tinggi dan terkadang rumit.
1.3D Studio
2.MaxMaya
3.Poser (Figure Animation)
4.Bryce (Landscape Animation)
5.Vue (Landscape Animation)
6.Cinema 4D
7.Blender
8.Daz3d
Salah satu web design editor populer adalah Adobe Dreamweaver (dulu bernama Macromedia Dreamweaver). Web editor ini juga menggunakan sistem WYSIWYG (What You See Is What You Get). Jadi desain web yang Anda lihat pada Adobe Dreamweaver itulah yang akan Anda lihat pada browser. Selain fitur membedakan warna (syntax coloring) terdapat juga berbagai fasilitas lain yang banyak membantu seorang web designer.
7.Software Web Editor
Web Design / Text Editor
Software pada kategori ini hanya bertugas untuk mengolah skrip HTML, CSS, PHP, atau JavaScript yang hanya terdiri dari teks. Jadi sebenarnya gak perlu software berat yang ribet-ribet amat. Hanya dengan Notepad bawaan Windows sebenarnya sudah bisa, tapi menggunakan aplikasi yang bukan dibuat untuk web design editor tentu ada kekurangannya.Salah satu web design editor populer adalah Adobe Dreamweaver (dulu bernama Macromedia Dreamweaver). Web editor ini juga menggunakan sistem WYSIWYG (What You See Is What You Get). Jadi desain web yang Anda lihat pada Adobe Dreamweaver itulah yang akan Anda lihat pada browser. Selain fitur membedakan warna (syntax coloring) terdapat juga berbagai fasilitas lain yang banyak membantu seorang web designer.