BSI PURWOKERTO - BELAJAR HTML part 1
Hello my sunlight! Apa kabar? Seminggu tidak berjumpa, kali
ini Mentari akan mengajak kalian untuk belajar HTML bersama, berdasarkan
rangkuman mata kuliah Web Programming 1 pada hari Senin, 19 Maret 2018. Langsung saja yuk!
Sekarang kita mulai dari pengertian HTML, apa itu HTML?
Hypertext Markup Language (HTML) adalah sebuah
bahasa
markah yang digunakan untuk membuat sebuah halaman web, menampilkan
berbagai informasi di dalam sebuah penjelajah
web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan
kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan
dalam format ASCII
normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari
sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah
sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML
saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya
oleh World Wide Web Consortium (W3C). HTML
dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi
tinggi di Jenewa).
Nah, sebelum Mentari mulai menjelaskan bagaimana kita akan
membuat HTML, kita perlu tahu apa saja Software yang digunakan untuk belajar
HTML ini.
Sebagai Servernya, kita perlu menginstal yang namanya XAMPP,
seperti gambar di bawah ini!
Nah, untuk Editornya, kita bisa menggunakan Notepad ++,
PHPcoder, Adobe, Dream Waver, Subtime Text, dan Notepad (bawaan dari komputer).
Sebelum lanjut ke struktur dasar HTML, kita perlu tahu apa
yang namanya Elemen HTML, Tag HTML, dan Attribute HTML.
-Elemen HTML: Satu
blok kode terdapat tag pembuka dan tag penutup, <html>....</html>
-Tag HTML: Penanda,
di ketik dengan simbol “<” dan “>”
-Attribute HTML:
Selalu diletakkan dalam <tag_pembuka> setelah nama tag, sebagai contoh:
<tag_pembuka name=”value”>
- Attribute Name: nama informasi atau nama sifat apa yang akan ditambahkan kepada tag dan elemen yang mengandung informasi tersebut.
- Attribute Value: Nilai dari sebuah infromasi atau nilai sifat apa yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut.
STRUKTUR DASAR HTML
Tips agar lebih mudah
dan tidak kelupaan, saat membuat elemen HTML, lebih baik langsung mengetikkan
keduanya, Tag pembuka dan Tag penutupnya.
Dan berikut adalah
langkah-langkah membuat HTML:
1. Pertama-tama, kita harus mengiInstal
XAMPP seperti yang sudah dijelaskan diatas;
2. Jika sudah selesai diinstal, buka
aplikasi XAMPP Control Panel;
3. Klik tombol start pada bagian
Apache dan MySQL >>
Apache -> Server
MySQL -> Database
4. Buka windows explorer;
5. Masuk ke folder instalasi XAMPP
(biasanya di partisi C (local disk)) Ã
C://xampp/
6. Masuk ke folder htdocs;
7. Hapus dua file yang bernama index
(index.php dan index.html);
8. Buka web browser (firefox,
chrome, dsb);
9. Ketikkan di kolom url address bar
à localhost (localhost =
C://xampp/htdocs Ã
tempat menyimpan file2 web);
10. Buat folder bernama “lat1” di
dalam folder htdocs;
11. Ulangi langkah ke-9, maka nanti
folder “lat1” akan muncul;
12. Buka apl editor text (notepad ++
/ notepad (bawaan dari windows));
13. Isikan di notepad, struktur dasar html beserta
title;
14. Simpan file tersebut ke dalam
folder “lat 1”, maka nanti muncul file percobaan.html;
15. Ulangi langkah ke-9, pilih folder
“lat1”, maka nanti muncul file percobaan.html,
klik dan lihat hasilnya;
Beberapa contoh tag HTML
<b>....</b> = untuk huruf tebal (bold)
<i>....</i> =
untuk huruf miring (Italic)
<u>....</u> = untuk
garis bawah (underline)
<p>....</p> =paragraf
<marquee>....</marquee> = text berjalan
<br> = ganti baris atau Enter (break)
<hr> = garis horizzontal (horizontal ruler)
16. Tambahkan beberapa tag diatas ke
dalam file percobaan.html, taruh diantara Tag <body>....</body>.
Sekian langkah-langkah yang dapat kita gunakan saat belajar
HTML. Oh iya, Mentari juga akan menambahkan materi yang masih berhubungan
dengan HTML.
HEADING = Digunakan untuk judul. Contohnya judul
Web, judul berita, judul testimoni, dan judul artikel.
<h1>..............</h1>
<h2>..............</h2>
<h3>..............</h3>
<h4>..............</h4>
<h5>..............</h5>
<h6>.............</h6> Ã
adalah yang paling kecil ukuran font-nya.
BULLET AND NUMBERING
<ul>
<li>.......</li>
<li>.......</li>
</ul>
ul berarti
Unordered List (Simbol), ul juga bisa diganti dengan ol yang berarti Ordered
List (Angka)
li berarti List
Contoh HTML yang saya buat, script dan hasilnya!
SCRIPT
HASIL
Demikian rangkuman mata
kuliah Web Programming 1 pada hari Senin, 19 Maret 2018 dengan dosen pembimbing
bapak Fabriyan Fandi Dwi Imaniawan.
Semoga bermanfaat!
Mohon maaf apabila masih terdapat banyak kesalahan, karena kita sama-sama
belajar, okay? Jika ada yang kurang jelas, bisa ditanyakan, comment saja.
Sekian dari saya,
terima kasih!
Purwokerto, 25 Maret
2018
-Mentari Rizki-
Comments
Post a Comment