Pembuat an Websit e Sederhana Menggunakan HTML (Hyper Text Markup Language)
Oleh :
Tri Wahyu Nugroho
t
[email protected] maswahyu@st udent s.ee.it b.ac.id ht t p: / / s.ee. it b. ac. id/ ~maswahyu ht t p:/ / www.maswahyu.t k 08562065165
Lisensi Dokumen: Right t o copy @ Sept ember 2006, Divkom HME ITB Seluruh t ut orial Maswahyu dapat digunakan, dimodifikasi dan disebarkan secara bebas unt uk t uj uan bukan komersial (nonprofit), dengan syarat tidak menghapus atau mengubah atribut penulis dan pernyataan right t o copy yang disertakan dalam set iap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapat kan ij in t erlebih dahulu dari Maswahyu
Pembuat an Websit e Sederhana Menggunakan HTML (Hyper Text Markup Language) Websit e at au disingkat web at au dikenal j uga dengan nama homepage kini t elah menjadi trend. Ribuan bahkan jutaan website kini telah meramaikan dunia maya seiring dengan perkembangan int ernet . Bila t elah t erhubung dengan int ernet , sebuah perusahaan dapat mempromosikan produknya ke segala penj uru dunia lewat website perusahaan. Dengan www.yahoomail.com kita bisa berkirim email ke teman kita di luar negeri t anpa harus repot repot menulis di kert as, memasukkan ke dalam amplop, dan mengirimnya lewat kantor pos. Dengan website pula kita bisa mengetahui berita mutakhir lewat www.det ik.com, dan dengan websit e pula kit a bisa menambah t eman dengan mendaft ar ke www.friendst er.com. Kita pun bisa membuat website seperti itu sendiri dengan bantuan software web developer yang sudah ada seperti Microsoft Frontpage atau Macromedia Dreamweaver. Kalaupun program tersebut tidak terinstal di komputer anda, asalkan ada program Notepad, Internet Explorer, at au web browser sej enis anda masih bisa membuat web pribadi anda. Selain PHP, bahasa yang umum dipakai untuk membuat halaman website ini salah sat unya adalah Hyper Text Mark up Language (HTML). HTML ini sangat mudah untuk kita pelajari bila dibandingkan dengan PHP. Karena itu untuk latihan kali ini saya terangkan mengenai pembuatan web pribadi sederhana menggunakan HTML. Perint ah perint ah yang dipakai dalam HTML ini dinamakan t ag. Tag t ag yang dipakai untuk membuat halaman sebuah web dapat kita lihat dengan mengeklik tab View > Source dalam web browser yang anda pakai, yang dalam t ut orial ini saya pakai web browser Internet Explorer. Unt uk web browser lainnya seperti Mozilla Firefox, source halaman websit e bisa anda lihat dengan mengeklik t ab View > Page Source. Berikut ini saya j elaskan langkah langkah unt uk membuat websit e sederhana buat an anda sendiri. Ikut i t erus ya !
1. Klik Start > All Program > Accessories > Notepad untuk membuka program Not epad.
2. Tampilan program Notepad seperti gambar di bawah ini. Di Notepad ini nanti kit a akan menget ik t ag HTML unt uk membuat sebuah halaman web.
3. Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website kita, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membent uk sebuah kesat uan halaman websit e yang akan kit a buat . Tuliskan t ag t ag berikut dalam Not epad unt uk membuat bagian kepala dan badan web.
Websit e Saya </ title> </ head> <body> Selamat dat ang di websit e saya </ body> </ ht ml > <html>, <head>, <title>, <body>, </ html>, </ head>, </ title>, </ body> adalah beberapa contoh tag yang dipakai untuk membangun sebuah halaman website. Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/ ). Perlu diingat bahwa tidak semua tag mempunyai pasangan sepert i cont oh di at as, dan t ag t ag yang t idak mempunyai pasangan akan kit a bahas di nomer selanj ut nya. Kalimat atau kata yang kita tuliskan di antara tag <title> </ title> merupakan j udul atau deskripsi dari website kita. Sedangkan kalimat di antara <body> </ body> merupakan isi dari website kita. Kalau sudah anda ketik klik File > Save / Save As , dan simpan dengan nama file index.ht ml. File ini akan mempunyai icon Internet Explorer atau icon web browser lain yang anda gunakan dalam komputer anda. Klik icon ini untuk melihat tampilan halaman web yang t elah anda buat .<br />
<br />
Terlihat bahwa di bagian atas halam website terdapat kata kata yang anda t uliskan di ant ara t ag <t it le> </ t it le>, sedangkan dalam badan websit e t erdapat t ulisan yang anda t uliskan di ant ara t ag <body> </ body>. 4. Warna background website anda dapat anda ubah dengan menambahkan kata “ bgcolor = warna” set elah t ag body. Misalnya anda ingin memberi warna hit am websit e anda maka anda t inggal t ambahkan kode berikut : <body bgcolor = black> Bila sudah anda tambahkan ke ketikan anda dalam Notepad kemudian disave, dan selanjutnya tekan tombol refresh dalam web browser anda. Tampilan website anda akan berubah menjadi seperti di bawah ini. Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik set elah bgcolor, misalnya : red, green, blue, at au warna lainnya.<br />
<br />
5. Anda bisa juga menj adikan sebuah gambar sebagai background website anda dengan menambahkan kode : “ background = file gambar” setelah tag body. Misalnya anda ingin menjadikan file gambar pemandangan.jpg sebagai background halaman websit e anda maka anda t inggal t ambahkan kode berikut : <body background = pemandangan. j pg> Save dan klik refresh. Tampilan websit e anda akan sepert i gambar di bawah ini.<br />
<br />
Perlu diingat bahwa menggunakan gambar sebagai background halaman websit e anda akan memperlambat loading halaman websit e anda, t erut ama bila ukuran file gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar background websit e anda t idak menggunakan file gambar. 6. Sepert i halnya background websit e, t ulisan dalam websit e pun bisa j uga diubah ubah warnanya. Selain itu j enis dan ukuran tulisan bisa j uga kita ubah ubah. Unt uk it u kit a perlu menyisipkan t ag <font > </ font > dalam t ag <body> </ body>. Unt uk mengubah warna t ulisan kit a t ambahkan kode “ color” set elah font , unt uk mengubah jenis tulisan kita tambahkan kode “ face” , dan untuk mengubah ukuran tulisan kita tambahkan kode “size”. Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan dit ampilkan dalam halaman web. Kit a bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi. Misal kode yang kit a t uliskan dalam Not epad : <ht ml> <head> <title> Websit e Saya </ title> </ head> <body bgcolor = black> <font color = whit e face = verdana size = +3 align = cent er> Selamat dat ang di websit e saya </ f ont > </ body> </ ht ml > Kode di atas berarti memberi pengaruh tulisan warna putih berj enis Verdana dan berukuran +3. Save dan refresh browser unt uk melihat pengaruhnya. Anda<br />
<br />
bia<br />
<br />
juga<br />
<br />
menambahkan<br />
<br />
efek<br />
<br />
tulisan<br />
<br />
bergerak<br />
<br />
dengan<br />
<br />
menyisipkan<br />
<br />
tag<br />
<br />
<marquee> </ marquee> sebelum kode <font > </ f ont ><br />
<br />
Unt uk mengat ur posisi t ulisan bisa kit a sisipkan t ag <posisi> </ posisi> di ant ara tulisan yang kita tuliskan. Posisi kita isi dengan “ left” , “ center” , atau “ right” . Misalkan kit a ingin membuat posisi t ulisan ke t engah, maka kit a ket ikkan : <cent er> Selamat dat ang di websit e saya </ cent er><br />
<br />
7. Anda bisa menyisipkan foto atau gambar anda dalam website anda dengan mengetikkan tag <img src = file foto anda>. Misalkan file yang ingin anda masukkan bernama baj aj .j pg, maka t ag yang perlu anda t uliskan adalah : <img src = baj aj . j pg> Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda t ambahkan t ag <br>. <font color = whit e face = verdana size = +3 align = cent er> Selamat dat ang di websit e saya <br> <img src = baj aj . j pg> </ f ont > Tampilan websit e anda akan sepert i ini. Ukuran gambar bisa anda at ur dengan menambahkan kode “ height = ukuran” , dan/ atau “ width = ukuran” . Misalkan anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal t ambahkan “ height = 100” set elah kode nama file gambar yang anda sisipkan.<br />
<br />
8. Selanjutnya tinggal anda tambahkan menu menu dalam website anda. Menu st andar yang ada dalam web sederhana biasanya adalah profil, galeri fot o, dan link. Untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang t elah dij elaskan sebelumnya. Unt uk menghubungkan halaman ut ama websit e dengan halaman halaman t ambahan ini kita perlu ketikkan t ag <a href = profil.html rel="nofollow"> dan ditut up dengan </ a> bila kit a ingin menghubungkan dengan halaman profil, demikian pula unt uk halaman web lainnya. Kode berikut akan menampilkan hubungan ant ar halaman websit e yang berj ej er. <a href = profil.ht ml rel="nofollow"> Profil </ a> <a href = galeri.ht ml rel="nofollow"> Galeri </ a> <a href link.ht ml rel="nofollow"> Link </ a> Klik Save dan refresh sehingga ditampilkan halaman website seperti berikut. Bila link yang anda buat benar maka kursor mouse akan berubah menjadi t angan bila anda dekat kan ke link yang anda buat .<br />
<br />
9. Unt uk halaman profil, galeri, dan link bisa anda t ambahkan sesuka anda sepert i langkah langkah sebelumnya. Khusus unt uk halaman link, anda bisa mengisinya dengan link ke Friendst er, Yahoomail, Google, dan sebagainya. Link yang t elah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu j endela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita j uga ingin membuka Friendster misalnya, maka kita perlu menambahkan tag “ target = “ _blank” setelah alamat Friendster. Misal : <a href = ht t p:/ / www.friendst er.com t arget = “ _blank” rel="nofollow"> Friendst er </ a> Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda tinggal hilangkan saja “ target = “_blank” nya. 10. Bila anda ingin link ke halaman profil anda berupa gambar profil.j pg misalnya, maka anda perlu menyisipkan file gambar di dalam tag <a href = profil.html rel="nofollow"> </ a>. Sehingga dapat kit a t uliskan sebagai berikut : <a href = profil.ht ml rel="nofollow"> <img src = profil.j pg> </ a> Bila benar maka kursor mouse akan berubah menj adi t angan bila didekat kan ke gambar profil.j pg. Demikian pula bila link ke Friendster atau Yahoomail j uga dalam bent uk gambar, maka anda t inggal menambahkan t ag <img src = gambar> di ant ara t ag <a href = link rel="nofollow"> </ a>. 11. Saya rasa t ut orial ini sudah cukup sebagai awal unt uk mulai membuat websit e pribadi anda. Pesan terakhir, dosen saya pernah bercerita yang kurang lebih int inya adalah anda t idak akan bisa j ago silat bila anda cuma melihat orang silat saj a dan t idak berusaha unt uk berlat ih. Yang saya bahas di sini cuma HTML saj a, dan bahasa HTML ini masih jauh lebih mudah dari bahasa PHP. Karena itu, sering seringlah berlatih dan jangan cepat merasa puas bila anda sudah mempunyai websit e pribadi. Selamat berkarya ! :)<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/tutorial-html-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Tutorial HTML"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
