HTML - Part 1
Materi ini saya berikan pada pembelajaran di SMK Muhammadiyah 1 (SMK MUTU) Pasuruan. Saya berikan di kelas X Multimedia (MM 1 dan mm2). Materi ini saya buat sejarah mendetil supaya bisa lebih mudah dimengerti serta mudah untuk diterapkan (praktek).
Kamu pastinya sudah tahu apa itu HTML, bukan? Yap benar, HTML yang kepanjangannya adalah HyperText Markup Language merupakan bahasa yang digunakan untuk membuat halaman web ataupun blog seperti yang saya punya ini. Bahasa ini tentunya digunakan pada dunia antah berantah bernama "Internet". :D Nah mari kita belajar HTML dan dimulai dari Bab I ini.
BAB I
HTML (HYPERTEXT MARKUP LANGUAGE)
A. World Wide Web
Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World
Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol Standart aturan yang digunakan untuk berkomunikasi pada computer networking, Hyertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa diakses melalui web.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa diakses dari seluruh dunia.
Menambahkan object-object seperti image, audio, video, dan juga java applet dalam document HTML.
C. Browser dan Editor Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Google Chrome, Mozille Firefox, Netscape Navigator dan masih banyak yang lainya.
Editor Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
HTML Sederhana
Nah suatu HTML yang paling sederhana terdiri dari tag berikut:
<html>
<head>
<title>Mari Belajar HTML</title>
</head>
<body>
<a>Hari Ini Hari Yang Cerah</a>
</body>
</html>
Sekarang coba kamu copy script di atas pada Notepad kemudian simpan dengan tipe .html kemudian buka file program browser (Internet Explorer atau sejenisnya misalanya Google Chrome, Mozilla Firefox,) selain jendela browser yang anda baca ini. Klik menu File lalu Open. Pada kotak dialog yang muncul, klik tombol Browse. Cari dan pilih file latih1.htm lalu klik Open.
Nah ini penjelasannya.
Penjelasan
Suatu HTML yang paling sederhana memiliki 2 jenis tag yaitu tag buka dan tag tutup (meskipun ada beberapa tag yang hanya berdiri sendiri - dipelajari di part-part selanjutnya). Berikut cara menulis tag buka maupun tutup:
Tag buka ditulis dengan cara seperti ini: <namatag>
Sedangkan untuk tag tutup: </namatag>
Dengan format seperti berikut:
<namatag> informasi yang ingin ditampilkan </namatag>
Pada contoh sebelumnya kamu bisa lihat tag buka maupun tutup seperti:
<html> dan </html> : tag ini untuk mengidentifikasi bahwa bahasa yang akan kita masukkan diantara 2 tag tersebut merupakan bahasa HTML.
<head> dan </head> : sesuai dengan namanya tag ini merupakan tag kepala dimana bisanya pemilik web maupun blog membubuhkan informasi tentang situsnya tersebut. Seperti contoh: nama website, informasi tentang website, dan biasanya script SEO dibubuhkan disini. :D
<title> dan </title> : tag ini merupakan tag untuk menampilkan judul dari script HTML tersebut ataupun digunakan untuk menampilkan judul/nama web. Tag ini akan ditampilkan oleh browser pada title bar browser tersebut.
<body> dan </body> : Tag ini merupakan tag untuk menampilkan bagian badan dari HTML tersebut. Nah disinilah tempat untuk memasukkan script dari isi website tersebut.
dan yang terakhir <a> dan </a> : Tag ini digunakan dalam bahasa HTML untuk menampilkan teks biasa (tanpa italic ataupun bold, pokoknya masih polos gitu. :D)
Kode-Kode HTML Lainnya
Belajar HTML itu mudah |
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O).
Untuk warna putih sengaja saya kasih warna abu -abu, soalnya kalo dikasih warna putih, kodenya ndak keliatan kan? Tapi kodenya tetap #FFFFFFkok. Dengan demikian, kode HTML untuk contoh di atas bisa ditulis sebagai berikut:
<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Belajar HTML itu mudah.
</BODY>
</HTML>
Dengan menggunakan kode warna heksa, variasi warna yang dibuat bisa lebih banyak. Klik di sini atau Disini untuk melihat daftar kode warna yang lainnya!
black #000000
blue #0000FF
olive #808000
lime #00FF00
white #FFFFFF
fuchsia #FF00FF
green #008000
maroon #800000
red #FF0000
gray #808080
teal #008080
purple #800080
yellow #FFFF00
silver #C0C0C0
navy #000080
aqua #00FFFF
Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code alias kode-kode HTML. Masih ingat, kan caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag berikut ini:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Belajar HTML itu mudah.
</BODY>
</HTML>
Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Belajar HTML itu mudah.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: Karya Pertamaku. Alhamdulillah, selesailah latihan pertama kita.
Oke sekian dulu penjelasannya. Nanti kita sambung lagi.
Kalau ada yang mau ditanyakan, mau merevisi atau menambahkan penjelasan saya langsung saja kasih komentar dibawah ini..
Daftar Tugas yang sudah masuk kelas X MM2
- A. Fadholi
- Khusnul Khotijah
- Naflah Safira
- Siti Maghrfiroh (absen 29)
- Khanifa
- M. Faisol Rofiqi
- Astrifi Kurnia Sari
- Siti fatimah
- Zulfiyar AF
- Fatimatuz Zahro
- Nurul Aini
- Monica dwi L
- Alifayuning Wimas, N.A.
- Anggi Rizky Febriyanti, R.
- Jamaludin Fahmi
- Reza Rosmalinda
- Saiful Anam
- M. Iqbal Ramadhan
- Umi Sa'adah
- Khilmiyatul A.
Post a Comment