 |
Sekarang kamu pengen Mencobanya..?
Baik kalo kamu pengen coba bikin file HTML silahkan buka “Notepad” kemudian ketikkan sintak dibawah ini :
<html>
<head>
<title>Judul Halaman Web</title>
</head>
</html>
<head>
<title>Judul Halaman Web</title>
</head>
</html>
Simpan file tersebut dengan nama “myweb.html” atau terserah apa yang kamu suka asalkan dengan ekstensi “.html” atau “.htm”. Untuk menjalankan file yang telah kita buat, sekarang kita jalankan browser (internet browser) File > Open kemudian browse ketempat dimana kamu letakkan file tersebut, kemudian pilih file tersebut lalu klik Open setelah itu seharusnya kamu akan dapatkan alamat file tersebut di address bar lalu klik OK dan file tersebut sudah berhasil kita jalankan di browser kita.
Penjelasan Tentang Tag Sample Di atas
Tag pertama yang kamu jumpai adalah tag <html> tag ini merupakan tag standar pembentuk utama suatu halaman web. Tag tersebut akan memberitahukan browser bahwa dokumen yang kamu buat merupakan dokumen HTML. Dan tag terakhir yang kamu jumpai adalah </html> tag tersebut akan memberi tahukan bahwa tag HTML sudah selesai.
Text diantara tag <head> dan tag </head> merupakan tag informasi header, informasi tersebut tidak akan ditampilkan di browser window.
Text diantara tag <title> dan tag </title> merupakan title
atau judul dari sebuah dokumen. Text tersebut akan ditampilkan di
browser’s caption.
Kemudian gimana cara kita menampilkan text di browser..? ya kita bisa menempatkan diantara tag <body> dan </body>, jadi tag tersebut akan memberi tahu browser tentang isi dari dokumen tersebut. Tag <b> dan </b> merupakan tag pembantu untuk mempercantik halaman web yang akan dibahas lebih lanjut bab yang lain.
HTM atau HTML ekstensi..?
Saat kamu menyimpan suatu file HTML, kamu dapat menggunakan kedua jenis ekstensi tersebut yaitu .htm atau .html. Namun saat kamu menggunakan sistem lama yang hanya memperbolehkan ekstensi 3 digit (misalnya DOS atau Microsoft Windows 3.x), penggunaan ekstensi .html akan menimbulkan masalah. Tapi jangan takut dengan software sekarang yang ada, hal itu tidak akan menimbulkan masalah. Jadi kita cukup aman menggunakan kedua ekstensi tersebut semau kita :p.
Note: Sebenarnya kamu dapat membuat suatu halaman web dengan mudah dengan sistem
WYSIWYG (What You See Is What You Get) yaitu dengan menggunakan software
pihak ketiga seperti Dreamweaver atau FrontPage. Tapi kalo kamu ingin
menjadi Web Developer yang handal, disarankan untuk mempelajari dan
mengetahui tag HTML standar.
HTML Tag
Kemudian gimana caranya agar kita dapat membentuk suatu halaman HTML yang lengkap...? oleh karenanya kita akan membutuhkan yang namanya Tag….. tag akan digunakan untuk membentuk element HTML. Tag HTML di bentuk oleh karakter yaitu < dan >. HTML tag biasanya berpasangan seperti <b> dan </b> namun ada juga yang tidak berpasangan seperti <img>. Text diantara tag tersebut disebut element content. HTML tag tidak case sensitive jadi kita bisa menuliskan <b> dengan <B> ☺.
HTML Element
Coba kita ingat lagi scripts yang telah kita ketikkan diawal pembahasan tadi, kita akan menemukan script :
<b> ini adalah text bold</b>
Script tersebut merupakan html element, karena terdiri dari :
• diawali dengan start tag <b>
• berisi element content : Ini adalah text bold
• diakhiri dengan end tag </b>
Mengapa kita menggunakan Lowercase tag..?
Dawal tadi telah disebutkan bahwa tag html tidak case sensitive, maka jika kamu pengen menjadi developer, maka membiasakan diri menggunakan lower case akan membantu kamuntuk berkembang .
Tag Attributes
Suatu tag dapat memiliki beberapa atribut. Atribut merupakan informasi tambahan yang dapat dipasangkan pada suatu tag, sebagai contoh tag <body> bisa ditambahkan informasi tentang warna background dari tag tersebut dengan menambahkan <body bgcolor=”red”> suatu atribut selalu terbentuk dengan naman atribut dengan diikuti dengan value, seperti nama=”value”. atribut selalu ditambahkan pada start tag. Lalu apakah untuk menyatakan value dari tag attribute harus menggunakan quoe..? ya... standar dari W3C mengharuskan kita menggunakan quoes, tapi kita bisa menggunkan double quote atau single quote.
Text Formatting
Untuk mempercantik tampilan web, maka kita harus memformat text dalam dokumen tersebut, yaitu dengan :
- Heading
Heading didefinisikan dengan tag <h1> hingga <h6> dengan tag <h1> merupakan heading terbesar. Untuk melihat perbedaannya cobalah script berikut :
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML akan secara otomatis menambahkan ruang kosong tambahan sebelum dan sesudah heading.
- Paragraphs
Dalam format text paragraf didefinisikan dengan tag <p> cobalah tag berikut ini untuk mengetahui tag paragraphs:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Paragraphs juga secara otomatis menambahkan ruang kosong sebelum dan sesudah text tersebut.
- Line Breaks
Tag <br> digunakan saat kamu ingin mengakhiri suatu baris tapi tidak mau membuat paragraphs baru. Tag ini bisa kamu tempatkan dimana aja
<p>This <br> is a para<br>graph with line breaks</p>
Tag <br> merupakan tag yang kosong jadi tidak diperlukan end tag.
- Comments in HTML
Comment digunakan untuk memasukkan sebuah comment pada HTML source tapi text tersebut tidak akan diproses. Kamu dapat menggunakan comment untuk menjelaskan kode yang kamu gunakan yang akan mempermudah mengingat guna suatu kode dikemudian hari, hi HTML comment didefinisikan sebagai :
<!-- This is a comment -->
Note : Ketika kamu menulis text HTML, maka tampilan yang dihasilkan akan tergantung oleh browser yang digunakan selain setting sistem dari user. Sebuah text akan diformat kembali sesuai settingan browser. Jangan gunakan <p> untuk membuat blank line gunakan <br> untuk membuatnya. Tapi jangan gunakan <br> untuk membuat list
Basic HTML Tags
| Tag | Description |
| <html> | Mendefinisikan dokumen HTML |
| <body> | Mendefinisikan isi dokumen |
| <h1> to <h6> | Header dari 1 sampai 6 |
| <p> | Mendefinisikan paragraf |
| <br> | Membuat jeda satu baris |
| <hr> | Mendefinisikan garis horizontal |
| <!- -> | Mendefinisikan sebuah komen |
HTML mendefinisikan banyak element yang digunakan untuk memformat text,
di bawah ini akan dicantumkan format text yang lebih lengkap yang dapat
kamu coba sendiri gimana hasilnya ☺
Tips : Cara melihat source suatu halaman web :
Tips : Cara melihat source suatu halaman web :
Tindakan yang bisa kamu lakukan untuk melihat source suatu halaman web
adalah dengan klik View pada toolbar browser kemudian pilih Source atau
Page Source kamu juga bisa melakukannya dengan klik kanan pada halaman
web kemudian pilih View Source, dengan melihat source suatu halaman web
kamu dapat mempelajari sistem yang mereka buat :p
LATIHAN
Gunakan
teks editor misalkan "Notepad" untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya
bukalah file tersebut dengan menggunakan web browser atau gunakan
editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_1.html
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_1.html
<html>
<head> <title>Latihan1-1</title> </head> <body> Belajar bahasa pemrograman web ternyata mudah juga :) </body> </html> |
Tugas
tambahan:
Gantilah teks tersebut dengan teks lainnya.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html
Gantilah teks tersebut dengan teks lainnya.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html
<html>
<head> <title>Latihan1-2</title> </head> <body text="red"> Belajar bahasa pemrograman web ternyata mudah juga :) </body> </html> |
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html
<html>
<head> <title>Latihan1-3</title> </head> <body text="red" bgcolor="black"> Belajar bahasa pemrograman web ternyata mudah juga :) </body> </html> |
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head> <title>Latihan1-4</title> </head> <body text="red" bgcolor="aqua" background="./images/image027.jpg"> Belajar bahasa pemrograman web ternyata mudah juga :) </body> </html> |
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar
Tidak ada komentar:
Posting Komentar