Apa Itu HTML ?
Jika kita
berbicara tentang HTML pasti kita akan berfikir tentang web, ya html memang
erat sekali kaitannya dalam pembuatan sebuah web, namun kita harus tahu dulu
arti yang sebenarnya dari html, html merupakan singkatan dari Hypertext Markup Language. Fungsi
utama dari html yaitu memungkinkan seorang user untuk membuat atau Menyusun bagian-bagian
seperti paragraph, heading, link atau tautan, dan blockquote untuk halaman web
dan aplikasi.
Ingat !!
HTML bukanlah Bahasa pemrograman, seringkali Sebagian orang mengartikan bahwa html merupakan bagian dari Bahasa pemrograman seperti C++, Java, Python, PHP dan
lain sebagainya. html bukan Bahasa pemrograman karena html tidak mempunyai
kemampuan untuk fungsionalitas yang dinamis. Sebagai gantinya html memungkinkan
user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.
Struktur Dasar HTML
HTML memiliki
struktur dasar yang terdiri dari 4 bagian utama, diantaranya tag DOCTYPE, tag
html, tag head, dan tag body. Keempat bagian itu adalah syarat minimal yang
menjadi standar pada struktur global dokumen html dari W3C.
Untuk lebih
jelasnyam kita bisa melihat contoh penulisan struktur data html berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Judul
Halaman Web</title>
</head>
<body>
<p>Konten
halaman web.</p>
</body>
</html>
Setelah kita mengetahui struktur dasar kita harus
mengenal lebih dalam tentang fungsi dari struktur tersebut, masing masing
struktur tersebut memiliki fungsinya tersendiri didalam HTML, didalam struktur tersebut terdapat tag.
Tag merupakan sebuah penanda awalan dan akhiran dari
sebuah elemen dalam HTML. Tag dibuat dengan kurung
siku (<...>), lalu didalamnya berisi nama tag dan kadang juga ditambahkan
dengan atribut-atribut pendukung. contoh : <p>, <a>, <body>,
<head>, dan lain sebagainya.
Tag HTML memiliki dua tipe utama
yaitu block-level dan inline tags, berikut penjelasan tentang kedua tag
tersebut :
1. Elemen block-level
Elemen block-level memakai semua space yang tersedia dan selalu membuat line baru di dalam dokumen, contoh dari elemen ini ialah heading dan paragraf, Tag block-level dibagi menjadi 3 bagian yaitu :
a. Tag <html></html> adalah elemen level
tertinggi yang menyertakan setiap
halaman HTML.
b. Tag<head></head> menyimpan informasi
meta, seperti judul dan charset halaman
c. Tag<body></body> melampirkan semua
konten yang muncul pada suatu halaman
2. Elemen inline
Elemen inline hanya
akan memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di
halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level.
Contoh dari tag inline ini adalah link dan emphasized strings.
Elemen inline sebagian besar hanya digunakan untuk memformat
teks. sebagai contoh yaitu tag <strong></strong> akan merender
elemen ke format blod, sedangkan tag <em></em> akan
ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya
tag <a></a> dan attribut href untuk mengindikasi
tujuan link.
<a href ="https://example.com/">Click me!<a/>
Gambar Image juga merupakan elemen dari inline. Kita
bisa menambahkan satu gambar dengan menggunakan <img> tanpa harus
membubuhkan tag penutup. Hanya saja anda disarankan untuk menggunakan
attribute src untuk menentukan path gambar, misalnya :
<img src="/image/example.jpg" alt="Example image">
Rekomendasi Text Editor Untuk Membuat File HTML
Sebelum kita membuat file HTML kita memerlukan sebuah text editor untuk proses pembuatannya, dan berikut beberapa text editor html terbaik yang bisa digunakan dan di unduh secara gratis
:
1. Notepad++
Notepad++ merupakan sebuah text editor paling populer dikalangan sistem
operasi Windows, text editor ini memiliki tampilan yang sederhana
namun cukup ringan jika dipakai untuk keseharian coding kita.
Selain tampilannya
yang ringan, text editor ini juga yang paling penting open source, artinya
software ini bisa kalian download di web officialnya secara gratis.
Jika kalian ingin
mengunduhnya silahkan kunjungi web berikut ini, pilihlah versi sesuai dengan
bit laptop/pc yang kalian miliki :
2. Atom
Text editor yang kedua ini juga populer sekali di
kalangan programer, karena atom ini memiliki adalah salah satu editor terbaik
untuk HTML, selain itu atom memiliki fitur istimewa yang bernama
teletype.
Fitur ini yang memungkinkan beberapa web developer berkontribusi
pada kode tertentu secara bersamaan. Selain itu, Atom dikembangkan
oleh orang-orang dibalik GitHub. GitHub sendiri
merupakan salah satu aplikasi berbasis website yang menyediakan layanan untuk
menyimpan source code secara gratis, maka dari itu tidak perlu diragukan lagi
tentang kualitasnya.
Untuk kalian yang ingin mendownload software Atom bisa
di download di bawah ini :
3. Sublime Text
Sublime text merupakan
sebuah text editor yang memiliki fitur sangat lengkap namun ringan
digunakan.
Didalam sublime text ini kita bisa mengerjakan berbagai
macam bahasa pemrograman, mulai dari C++, C, Python, PHP, Java, CSS, HTML dan
lain sebagainya, namun kalian harus menginstal mengaturnya terlebih dahulu agar
tools yang dimiliki sublime text ini dapat berjalan dengan semestinya.
Untuk kalian yang sedang mencari text editor ringan
untuk mengerjakan html namun lengkap fitur-fitur nya, saya
rasa sublime text ini akan cocok untuk kalian, karena didalam software ini
terdapat fitur seperti autosave dan autocompletion yang akan membantu dalam
pengerjaan html kalian.
Selain itu sublime text ini tersedia dibeberapa sistem
operasi seperti Windows, Mac, dan Linux.
Jika kalian tertarik dengan text editor yang satu ini
kunjungi web official nya disini untu mendownload software :
4. Visual Studio Code
Visual studio code merupakan text
editor gratis dan powerfull setelah sublime text. dengan tampilan antarmuka
yang kalem dan elegant, Visual studio code ini banyak sekali
fitur-fitur yang tidak mungkin ada di text editor lainnya.
Fitur pengelolaan extensi yang mudah dipahami ini
dapat membantu kami bila mana ingin menginstall extensi yang ada di text editor
ini, untuk pergi ke menu extensi kamu hanya perlu menekan CTRL + SHIFT + X
secara bersamaan dan pilih extensi yang akan kamu install atau kalian juga bisa
mencarinya di kolom search.
Visual studio code sudang mendukung beberapa bahasa
pemrograman seperti C, C++, PHP, Javascript dan
masih banyak lagi. Dan lagi text editor ini mendukung beberapa sistem operasi
seperti MacOS, Windows, dan Linux.
Namun text editor ini memiliki beban kinerja yang
lumayan berat, untuk menjalankan text editor ini memerlukan performa yang
stabil minimal memiliki CPU 4 core dan 4 Gb ram.
Jika kalian tertarik dengan software ini, silahkan
untuk mengunjungin link download dibawah :
5. Notepad
Text editor
selanjutnya adalah text editor yang sudah pasti kalian bakalan tahu, karena
text editor ini sudah tersedia langsung di sistem operasi windows.
Notepad adalah software text editor yang dapat menyimpan file berekstensi
'txt'. Notepad tanpa ++ ini merupakan text editor bawaan yang
dimiliki oleh windows, fitur yang dimilikinya cukup simple karena notepad ini
lebih diutamakan untuk menyimpan sebuah catatan, Namun untuk kalian yang ingin
menyimpan kode pemrograman seperti HTML, notepad tanpa ++ ini bisa
digunakan untuk menampung sementara kode html kalian.
Cara Membuat, Membuka File HTML dan Contoh Sederhana Untuk Penggunaan HTML
Untuk pembuatan kali
ini kita akan menggunakan visual studio code sebagai text editor yang akan
menampung kode-kode yang akan kita buat lagi, dan siapkan browser favorit
kalian, disini kita akan menggunakan browser Microsoft Edge.
Setelah kalian
menentukan text editor dan browser yang sudah terinstal di laptop/pc anda maka
selanjutnya kita akan membuat file hmtl nya dulu, berikut adalah
Langkah-langkah nya :
1. Masuk ke text editor bernama Visual Studio Code dan buat new file untuk memulai pembuatan filenya
2. Buatlah
sebuah kode html sederhana yang nantinya bisa ditampilkan di browser kalian,
untuk kode nya kita bisa lihat disini :
3. Jika kalian sudah membuat sebuah kode html tersebut, maka selanjutnya save file tersebut di directori yang kalian miliki, ini sifatnya bebas, namun sekarang kita akan simpan di document, berikan nama “Rekomendasi Web Anime.html”, untuk Langkah Langkah nya seperti ini :
4. Setelah kode html tersebut disimpan selanjutnya kalian buka kode html yang sudah kalian simpan tersebut, pergi ke directori document, dan buka file yang bernama “Rekomendasi Web Anime.html”.
5. Hasilnya akan seperti ini :
Kunjungi
juga web official kampus saya untuk kalian yang ingin mengetahui tentang Pendidikan
teknologi informasi, Web Official PTI.
1 Komentar
I leave comment..
BalasHapusgood job