Halloooooo!
Selamat datang di blog ketigaku. Namaku Maghfira Maulani, biasa dipanggil Fira.
Aku owner sekaligus penulis di blog ini. Salam kenal *karena belum sempet
memperkenalkan diri di post sebelumnya*
Kenapa aku bikin blog lagi? Karena tugas-tugas mewajibkanku menggunakan
blog aku mau berbagi sesuatu yang beda dari blog yang sebelumnya. Seperti
judul dan tema blog ini, aku akan berbagi ilmu yang berharga yang aku dapat di
perkuliahan maupun kehidupan sehari-hari disini.
Nah, sekarang kita akan belajar tentang HTML. Bagi para beginner yang penasaran
sama cara bikin HTML, yuk merapat. Kita belajar sama-sama dari awal. Yang udah
expert, kasih ruang ya ^_^ Ok, cekidot!
HTML adalah
markup language untuk mendeskripsikan web documents (halaman web)
- HTML singkatan dari Hyper Text Markup Language
- Sebuah markup language adalah bagian dari markup tags.
- Dokumen HTML terbentuk dari HTML tags
- Masing-masing HTML tag mendeskripsikan konten dokumen yang berbeda
Contoh HTML
Penjelasan:
- Kata DOCTYPE mendefinisikan tipe dokumen yang menjadi HTML
- Teks yang ada diantara <html> dan </html> mendeskripsikan dokumen HTML
- Teks diantara <head> dan </head> menyediakan informasi tentang dokumen
- Teks diantara <title> dan </title> menyajikan judul dari dokumen
- Teks diantara <body> dan </body> mendeskripsikan isi dari halaman
- Teks diantara <h1> dan </h1> merupakan muka halaman
- Teks ddiantara <p> dan </p> berisi tentang sebuah paragraf
Dengan
menggunakan deskripsi tersebut, web browser dapan menampilkan dokumen dengan
sebuah heading dan paragraf.
HTML tags
HTML tags
adalah kata kunci (tag names) yag diapit oleh tanda kurung lancip:
<tagname>isi</tagname>
- HTML tags biasanya ditulis sepasang, seperti <p> dan </p>
- Tag pertama merupakan start tag, tag kedua merupakan end tag
- Tag terakhir ditulis seperti tag pertama, tetapi dengan slash sebelum tag name
Web Browser
Tujuan dari web
browser (Chrome, Interet Explorer, Firefox, Safari) adalah untuk membaca
dokumen HTML dan menampilkannya.
Browser
tersebut tidak menampilkan HTML tags, tetapi menggunakannya untuk menentukan
bagaimana menampilkan dokumen:
Strukur halaman
HTML
Berikut adalah
visualisasi dari struktur halaman HTML:
Deklarasi
<!DOCTYPE>
Pernyataan
<!DOCTYPE> membantu browser untuk menampilkan halaman web dengan benar.
Terdapat
berbagai tipe dokumen di web.
Untuk
menampilkan dokumen dengan benar, browser harus tahu semua tipe dan versi.
Deklarasi
doctype dengan huruf besar maupun kecil tidak masalah:
Versi-versi
HTML
Sejak awal
adanya web, terdapat berbagai versi HTML:
Menulis HTML
Dengan Menggunakan Notepad atau TextEdit
HTML dapat
diedit dengan menggunakan HTML editor profesional, seperti:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeCup HTML Editor
Namun,
untuk belajar HTML sebaiknya menggunakan text editor seperti Notepad (untuk PC)
atau TextEdit (untuk Mac).
Kami yakin
mengunakan text editor sederhana adalah cara yang baik untuk belajar HTML.
Ikuti 4 langkah
berkut untuk membuat halaman web pertamamu dengan notepad.
Step 1: Buka
Notepad
Untuk membuka
Notepad di Windows 7 atau versi sebelumnya:
·
Klik Start (di
kiri bawah layar)
·
Klik All
Programs
·
Klik
Accessories
·
Klik Notepad
Untuk membuka
Notepad di Windows 8 atau yang terbaru:
· Buka halaman
Start (simbol jendela di kiri bawah layar)
·
Ketik Notepad
Step 2: Tulis
beberapa HTML
Tulis atau copy
beberapa HTML ke Notepad
Step 3: Simpan
halaman HTML
Simpan file di
komputermu.
Pilih
File>Save as di Notepad menu.
Beri nama
“index.htm” atau nama lain yang diakhiri dengan htm.
Untuk Encoding
kebanyakan menggunakan UTF-8 untuk file HTML.
Encoding ANSI
hanya mencakup karakter/huruf US dan Western European saja.
Step 4: Lihat
halaman HTML di browsermu
Buka file HTML
yang telah disimpan dengan browser yang kamu inginkan. Hasilnya akan terlihat
seperti ini:
Dokumen HTML
Semua dokumen
HTML harus dimulai dengan deklarasi <!DOCTYPE html>
Dokumen HTML
sendiri dimulai dengan <html> dan diakhiri dengan </html>
Bagian yang terlihat
di dokumen HTML adalah yang berada diantara <body> dan </body>
HTML Headings
HTML Headings
digambarkan dengan <h1> sampai <h6>
HTML Paragraphs
Paragraf HTML
digambarkan dengan tag <p>
HTML Links
HTML Links
digambarkan dengan tag <a> sebagai berikut:
Alamat links
ditulis pada atribut href.
Atribut
tersebut digunakan untuk memberikan informasi tambahan tentang elemen HTML.
HTML Images
Gambar HTML
digambarkan dengan tag <img>.
Sumber file
(scr), teks alternatif (alt) dan ukuran (width dan height) disertakan sebagai
atribut:
Itu dia sekilas tentang cara membuat HTML. Gampang kan? Kalau ada pertanyaan,
comment aja dibawah. Bisa langsung aku jawab di comment atau di post
selanjutnya. Makanya, jangan sampai ketinggalan yaa. Jangan lupa cantumkan sumber kalau copas materi ini ya. Soalnya ini aku translate sendiri dari w3schools. Jangan lupa follow juga
^_^ terimakasih udah mampir di Precious Blog. Sampai jumpa di post selanjutnya. byebye~
@firaafira
0 komentar:
Posting Komentar