Hasil belajar Web
tanggal 20 Oktober 2013
Saat ini saya akan
membahas tentang materi praktikum kemaren, yaitu membuat halaman web. Halaman
web browser dapat dibuat dengan berbagai aplikasi notepad++, xampp, dreamweaver
dan lain-lain. Sedangkan kemaren, kita melakukan praktek dengan menggunakan
notepad++.
Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan
di system operasi windows. Notepad++ menggunakan komponen sintaks
untuk dapat menampilkan dan menyuntingan teks dan berkas kode sumberr berbagai bahasa pemograman
Pada notepad
kita akan menggunakan HTML (Hypertext Markup Language) yaitu
bahasa pemograman standart yang digunakan untuk menyusun/membangun halaman web.
Bahasa HTML
(tag) dapat ditulis/dibuat melalui berbagai macam word editor, misalnya Notepad++,
Wordpad, PHP Designer 2005, dll. Tag-tag tersebut dapat dituliskan dengan huruf
besar ataupun huruf kecil.
Untuk memulai
aplikasi notepad++ klik file>new kemudian klik language>H>HTML
Setelah tag HTML
ditulis dengan menggunakan
Notepad atau
word editor yang lain, simpanlah file tersebut dengan format file nama_file.htm
atau nama_file.html. contoh : weboender html lalu di save as di localdisk atau
di dokumen yang bdi inginkan.
Dan kita akan
memulai coding pada jendela notepad++ sebagai berikut :
<html>
<head>
<title>Weboender</title>
</head>
Keterangan :
Tag HTML secara
default dimulai dari <html> dan diakhiri dengan </html>. Tag <head>
… </head> merupakan tag kepala sebelum badan. Tag kepala ini akan
terlebih dulu dieksekusi sebelum tag badan. Sedangkan tag <title> … </title>
adalah tag judul. Sebaiknya setiap halaman web memiliki judul, dan judul
tersebut dituliskan di dalam <title> … </title>. Judul ini akan
muncul dalam titlebar dari browser. Setelah tag tersebut di atas ditulis,
simpan dalam format .htm atau .html. Akan tetapi terlebih dahulu ubah Save
as type ke dalam All Files. Kemudian tentukan letak direktori mana
file tersebut akan disimpan, selanjutnya klik Save. Selanjutnya document
HTML tersebut dipanggil dengan browser untuk melihat hasilnya.
(Jpg.jk)
bentuk
tampilan/desain web tergantung pada tag yang ditulis di dalam <body> …
</body>.
Berikut ini
berbagai macam tag yang dapat digunakan untuk penyuntingan teks.
1. Heading
2. Garis
horizontal
3. Teks miring
4. Teks tebal
5. Teks dengan
garis bawah
6. Center
7. Paragraf
8. Alignment
(Rata kiri, tengah, kanan, justifikasi)
9. Jenis huruf
10.Superscripts
11. Subscripts
12.List/daftar
Sebelumnya kita
perlu untuk menuliskan
<style>
body{background:red;color:
white;}
</style>
Script tersebut
berfungsi untuk menentukan warna background dan warna font pada halaman web.
Pada bagian
<body>…</body> kita dapat
mengisinya seperti sebagai berikut :
Heading : untuk
membuat/memilih ukuran teks, umumnya untuk judul karena ukurannya yang besar.
<H1> …
</H1>,
<H2> …
</H2>,
<H3> …
</H3>
<H4> …
</H4>
<H5> …
</H5>
<H6> …
</H6>
Dan akan
menghasilkan teks seperti berikut
Semakin besar angka
1 s/d 6 maka semakin kecil ukuran hurufnya. Seperti yang di bawah ini :
Sedangkan BOLD
untuk menuliskan suatu teks tebal
<b>Anda
memasuki kawasan senyum</b>
<br>smile
please</br>
Ket : <b>…
</br> sintak ini berfungsi untuk enter
Untuk mengisi sebuah
form seperti log in di facebook, kita dapat memakai :
<form>
email
anda<input placeholder="email kamu">
password<input
type='password'>
<input
type='submit' value='login'>
</form>
Maka akan
menghasilkan halaman web sebagai berikut :
Tidak ada komentar:
Posting Komentar