Materi dan Tutorial pemrograman web
1.
HTML
(Hypertext
Markup Language)
HTML atau Hypertext
Marksup Language merupakan salah satu format yang digunakan dalam pembuatan
dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML
hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur
format tampilan suatu dokumen.
HTTP atau Hypertext
Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data
atau document yang berformat HTML dari web server ke browser (Internet
Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman
web.Materi dan Tutorial pemrograman web
Untuk membuat dokumen HTML hanya
dibutuhkan sebuah aplikasi teks editor biasa. Namun sekarang ini di pasaran terdapat banyak
sekali HTML authoring (software yang digunakan untuk membuat atau mendesain
halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar
contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh
hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut
semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya
seseorang masih perlu untuk mengedit halaman web tersebut secara manual.
Terutama untuk halaman web yang sangat komplek.
Dalam tutorial ini Anda akan kami
ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah
word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang
lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda
memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar
membuat halaman web dengan menggunakan web tool.
Dalam penggunaannya, sebagian besar kode HTML harus
terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan
diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar
dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul
Halaman Web</title>
</head>
<body>
ISI
Halaman WEB
</body>
</html>
Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut
adalah file HTML.
<head>
.. </head> Sebagai informasi
page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE,
BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<title>
.. </title> Sebagai
titel atau judul halaman/form. Kalimat yang terletak
di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title
bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang
hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan
berbagai page attribute seperti bgcolor,
background, text, link, vlink, alink, leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat
dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:.
Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan
kita.
2. Buka Browser,
misalnya Internet Explorer Dsb.
3. Buka program aplikasi teks editor misalnya dalam
latihan ini adalah Notepad.
4. Mulai baris paling atas, tuliskan:
<html>
<head>
<title>Latihan 1</title>
</head>
</head>
<body>
Ini
adalah halaman web pertama saya.
</body>
</html>
5. Simpan file anda dengan cara klik menu File
- Save:
Kemudian...
anda juga dapat mencoba ketikan seperti dibawah di notepad
<html>
<head>
<title>Aplikasi dari <pre> tag</title>
</head>
<body>
<h3>tanpa menambahkan pre</h3>
Berakit-
rakit ke hulu
berenang-renag
ketepian, bersakit-sakit
dahulu,
bersenag-senang kemudian
<p><h3>dengan menggunakan
pre</h3>
<pre>
Berakit-
rakit ke hulu
berenang-renag
ketepian, bersakit-sakit
dahulu,
bersenag-senang kemudian
</pre>
</body>
</html>
atau coba....
<html>
<head>
<title>::: Latihan Membuat Link Ke
Dokumen Lain:::</title>
</head>
<body
bgcolor=#ffffd0>
<font
face=arial size=6 color=tahoma>
<b>.::: SMKN 1 PURWOKERTO:::. <br>
<font
face=arial size=4 color=blue>
<i>Sukses itu didapat dari usaha dan kerja keras
serta doa</i>
<font
face=arial size=1 color=tahoma>
<hr
size=2 width=100 align=left color=blue>
| <a
href=link_dokumen_lain.html>H o m e</a>
| <a
href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font
face=verdana size=4 color=orange>
Ahlan wa Sahlan di web kami ...
</body>
</html>
Kemudian anda juga bisa mengembangkan seperti...
<html>
<head>
<title>::: Latihan Membuat Link Ke
Dokumen Lain:::</title>
</head>
<body
bgcolor=#ffffd0>
<font
face=arial size=6 color=tahoma>
<b>.::: SMKN 1 PURWOKERTO:::. <br>
<font
face=arial size=4 color=blue>
<i>Sukses itu didapat dari usaha dan kerja keras
serta doa</i>
<font
face=arial size=1 color=tahoma>
<hr
size=2 width=100 align=left color=blue>
| <a
href=link_dokumen_lain.html>H o m e</a>
| <a
href=proli.html>Program Keahlian</a>
| <a
href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font
face=verdana size=4 color=orange>
Ekstra
Kurikuler<br>
<font
size=1>
<ul
type=circle>
<li>Pramuka
<li>Rohis
<li>PMR
<li>Paskibra
<li>Boxer
</ul>
</body>
</html>
Untuk melihat hasil dari apa yang anda ketikan....
"save as" kemudian berinama "latihan.html"
kemudian buka hasil save tadi di browser
Dari beberapa contoh diatas dapat disimpulkan:
Teks tebal
|
<b>teks kamu</b>
|
Teks besar
|
<big>teks kamu</big>
|
Teks garis bawah
|
<u>teks kamu</u>
|
Teks garis bawah
|
<s>teks kamu</s>
|
Teks miring
|
<i>teks kamu</i>
|
Teks miring
|
<i>teks kamu</i>
|
Teks kedip
|
<blink>teks kamu</blink>
|
Teks ketengah
|
<p align=center>teks kamu</p>
|
Teks kekiri
|
<p align=letf>teks kamu</p>
|
Teks kekanan
|
<p align=right>teks kamu</p>
|
Teks warna
|
<font color="blue">teks
kamu</font>
|
Font yang digunakan
|
<font face="georgia">teks
kamu</font>
|
Membuat garis
|
<hr>teks kamu
|
Garis warna
|
<hr color=blue>
|
Membuat spasi
|
<br>
|
Membuat bookmark
|
<a href="http://URL">nama</a>
|
Memasang gambar/image
|
<img src="http://URLgambarkamu">
|
Teks jalan dari kanan ke kiri
|
<marquee>teks kamu</marquee>
|
Teks jalan dari kiri kekanan
|
<marquee direction="right">teks
kamu</marquee>
|
Teks bolak balik kiri
|
<marquee behavior="alternate">teks
kamu</marquee>
|
Memberi background warna pada teks berjalan
|
<marquee bgcolor="blue">teks
kamu</marquee>
|
Tinggi pada bagian teks berjalan
|
<marquee height="20px">teks
kamu</marquee>
|
Lebar pada kemunculan teks berjalannya
|
<marquee width="100px">teks
kamu</marquee>
|
Menampilkan kecepatan pada teks berjalan
|
<marquee scrollamount="10">teks
kamu</marquee>
|
Menampilkan kecepatan pada teks berjalan juga
|
<marquee scrolldelay="5">teks
kamu</marquee>
|
Tidak ada komentar:
Posting Komentar